import { Calendar, File, Menu } from "@truststack/icons-ui";
import { YStack } from "tamagui";
import { TopAppBar } from "./TopAppBar.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
var TopAppBar_stories_default = {
  component: TopAppBar,
  parameters: {
    layout: "fullscreen",
    viewport: {
      defaultViewport: "mobile2"
    }
  }
};
const Variants = () => /* @__PURE__ */jsxs(YStack, {
  gap: 20,
  backgroundColor: "$primaryContainer",
  style: {
    height: "100vh"
  },
  children: [/* @__PURE__ */jsx(TopAppBar, {
    size: "small",
    children: /* @__PURE__ */jsxs(TopAppBar.TopRail, {
      children: [/* @__PURE__ */jsx(TopAppBar.LeadingIcon, {
        icon: Menu
      }), /* @__PURE__ */jsx(TopAppBar.SmallHeadline, {
        children: "Small App Bar"
      }), /* @__PURE__ */jsxs(TopAppBar.TrailIconContainer, {
        children: [/* @__PURE__ */jsx(TopAppBar.TrailingIcon, {
          icon: Calendar
        }), /* @__PURE__ */jsx(TopAppBar.TrailingIcon, {
          icon: File
        })]
      })]
    })
  }), /* @__PURE__ */jsx(TopAppBar, {
    size: "small",
    centered: !0,
    children: /* @__PURE__ */jsxs(TopAppBar.TopRail, {
      children: [/* @__PURE__ */jsx(TopAppBar.LeadingIcon, {
        icon: Menu
      }), /* @__PURE__ */jsx(TopAppBar.SmallHeadline, {
        children: "Small Center"
      }), /* @__PURE__ */jsx(TopAppBar.TrailingIcon, {
        icon: File
      })]
    })
  }), /* @__PURE__ */jsxs(TopAppBar, {
    size: "medium",
    children: [/* @__PURE__ */jsxs(TopAppBar.TopRail, {
      children: [/* @__PURE__ */jsx(TopAppBar.LeadingIcon, {
        icon: Menu
      }), /* @__PURE__ */jsxs(TopAppBar.TrailIconContainer, {
        children: [/* @__PURE__ */jsx(TopAppBar.TrailingIcon, {
          icon: Calendar
        }), /* @__PURE__ */jsx(TopAppBar.TrailingIcon, {
          icon: File
        })]
      })]
    }), /* @__PURE__ */jsx(TopAppBar.BottomRail, {
      children: /* @__PURE__ */jsx(TopAppBar.MediumHeadline, {
        children: "Medium App Bar"
      })
    })]
  }), /* @__PURE__ */jsxs(TopAppBar, {
    size: "large",
    children: [/* @__PURE__ */jsxs(TopAppBar.TopRail, {
      children: [/* @__PURE__ */jsx(TopAppBar.LeadingIcon, {
        icon: Menu
      }), /* @__PURE__ */jsxs(TopAppBar.TrailIconContainer, {
        children: [/* @__PURE__ */jsx(TopAppBar.TrailingIcon, {
          icon: Calendar
        }), /* @__PURE__ */jsx(TopAppBar.TrailingIcon, {
          icon: File
        })]
      })]
    }), /* @__PURE__ */jsx(TopAppBar.BottomRail, {
      children: /* @__PURE__ */jsx(TopAppBar.LargeHeadline, {
        children: "Large App Bar"
      })
    })]
  })]
});
export { Variants, TopAppBar_stories_default as default };
//# sourceMappingURL=TopAppBar.stories.mjs.map
