From f82cfd54d5e7530bc1c6ba70f176d06e354ada00 Mon Sep 17 00:00:00 2001 From: Kiril Peyanski Date: Sat, 6 Apr 2024 10:33:00 +0300 Subject: [PATCH] feat: add divider component --- .../material-you/components/divider.mdx | 32 +++++++++++++++++++ apps/docs/public/demos.json | 2 +- .../app/demos/material-you/divider/page.tsx | 5 +++ .../divider/stories/divider.stories.tsx | 29 +++++++++++++++++ .../material-you/divider/stories/page.tsx | 19 +++++++++++ .../material-you/divider/vertical/page.tsx | 5 +++ 6 files changed, 91 insertions(+), 1 deletion(-) create mode 100644 apps/docs/data/design/material-you/components/divider.mdx create mode 100644 apps/docs/src/app/demos/material-you/divider/page.tsx create mode 100644 apps/docs/src/app/demos/material-you/divider/stories/divider.stories.tsx create mode 100644 apps/docs/src/app/demos/material-you/divider/stories/page.tsx create mode 100644 apps/docs/src/app/demos/material-you/divider/vertical/page.tsx diff --git a/apps/docs/data/design/material-you/components/divider.mdx b/apps/docs/data/design/material-you/components/divider.mdx new file mode 100644 index 0000000..ed4600e --- /dev/null +++ b/apps/docs/data/design/material-you/components/divider.mdx @@ -0,0 +1,32 @@ +--- +title: Divider +--- + +# Divider + +The `Divider` component is used to separate content in a list or a layout. + + + +### Usage + +```tsx +import { BakaDivider } from "baka-ui"; + +function MyComponent() { + return ( + + {/* content */} + {/* content */} + + {/* content */} + + ); +} +``` + +### Examples + +#### Vertical Divider + + diff --git a/apps/docs/public/demos.json b/apps/docs/public/demos.json index 757efdf..fe71a5e 100644 --- a/apps/docs/public/demos.json +++ b/apps/docs/public/demos.json @@ -1 +1 @@ -[{"name":"demos/material-you/badge","files":[{"name":"page.tsx","code":"import { BakaBadge } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n <>\n \n
\n
\n 4\n
\n
\n 14\n \n );\n}\n"}]},{"name":"demos/material-you/bars","files":[{"name":"page.tsx","code":"import { BakaButton, BakaIcon, BakaText, BakaBar } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n <>\n \n \n menu\n \n \n Product\n \n \n account_circle\n \n \n
\n
\n \n
\n {[\"circle\", \"change_history\", \"rectangle\", \"pentagon\", \"hexagon\"].map((shape) => (\n \n {shape}\n \n ))}\n
\n {true ? (\n \n add\n \n ) : null}\n \n \n );\n}\n"}]},{"name":"demos/material-you/button","files":[{"name":"page.tsx","code":"import { BakaButton } from \"baka-ui\";\n\nexport default function ButtonDemo() {\n return (\n <>\n
\n Button\n Button\n Button\n Button\n
\n \n );\n}\n"}]},{"name":"demos/material-you/card","files":[{"name":"page.tsx","code":"import {\n BakaCard,\n BakaAvatar,\n BakaText,\n BakaButton,\n BakaIcon,\n} from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n \n \n
\n \n A\n \n \n Header\n Subhead\n \n
\n \n more_vert\n \n \n
\n \n
\n \n
\n Title\n Subhead\n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n \n
\n Enabled\n Enabled\n
\n \n \n );\n}\n"}]},{"name":"demos/material-you/checkbox","files":[{"name":"page.tsx","code":"import { BakaCheckbox } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n <>\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n \n );\n}\n"}]},{"name":"demos/material-you/chip","files":[{"name":"page.tsx","code":"import { BakaChip } from \"baka-ui\";\n\nexport default async function Chip() {\n return Label;\n}\n"}]},{"name":"demos/material-you/dialog","files":[{"name":"page.tsx","code":"import {\n BakaAvatar,\n BakaButton,\n BakaCheckbox,\n BakaDialog,\n BakaIcon,\n BakaListItem,\n BakaText,\n} from \"baka-ui\";\n\nexport default function DialogDemo() {\n return (\n \n
\n mobile_friendly\n \n Dialog Title\n \n \n A dialog is a type of modal window that appears in front of app content to provide\n critical information, or prompt for a decision to be made.\n \n
\n \n \n A\n \n BakaList item\n \n 100+\n \n \n \n A\n \n BakaList item\n \n 100+\n \n \n \n A\n \n BakaList item\n \n 100+\n \n \n \n
\n Action 2\n Action 1\n
\n \n );\n}\n"}]},{"name":"demos/material-you/navigation","files":[{"name":"page.tsx","code":"import SideNavigation from \"./side/page\";\nimport BottomNavigation from \"./bottom/page\";\nimport RailNavigation from \"./rail/page\";\n\nexport default async function () {\n return (\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n );\n}\n"}]},{"name":"demos/material-you/text-field","files":[{"name":"page.tsx","code":"import { BakaButton, BakaIcon, BakaInput, BakaText, BakaTextField } from \"baka-ui\";\n\nexport default async function App() {\n const args = {};\n return (\n
\n
\n \n search\n Label\n \n \n clear\n \n \n \n search\n Label\n \n \n error\n \n \n
\n
\n \n search\n Label\n \n \n clear\n \n \n \n search\n Label\n \n \n error\n \n \n
\n
\n );\n}\n"}]},{"name":"demos/material-you/avatar/basic","files":[{"name":"page.tsx","code":"import { BakaAvatar, BakaIcon } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n <>\n A\n
\n
\n \n check\n \n
\n
\n \n \n \n \n );\n}\n"}]},{"name":"demos/material-you/avatar/icon","files":[{"name":"page.tsx","code":"import { BakaAvatar, BakaIcon } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n <>\n \n check\n \n \n );\n}\n"}]},{"name":"demos/material-you/avatar/image","files":[{"name":"page.tsx","code":"import { BakaAvatar, BakaIcon } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n <>\n \n \n \n \n );\n}\n"}]},{"name":"demos/material-you/avatar/stories","files":[{"name":"page.tsx","code":"/// \nimport { BakaAvatar, BakaAvatarProps, BakaIcon } from \"baka-ui\";\n\nexport type AvatarStoryProps = BakaAvatarProps & {\n type: \"letter\" | \"icon\" | \"image\";\n children: React.ReactNode;\n};\nexport const defaultProps: AvatarStoryProps = {\n type: \"letter\",\n};\n\nexport default function AvatarStory(props: AvatarStoryProps) {\n const { type, children, ...other } = { ...defaultProps, ...props };\n\n return (\n <>\n {(() => {\n switch (type) {\n case \"icon\":\n return (\n \n check\n \n );\n case \"image\":\n return (\n \n \n \n );\n case \"letter\":\n default:\n return {children || \"A\"};\n }\n })()}\n \n );\n}\n"},{"name":"avatar.stories.tsx","code":"/// \n\nimport React from \"react\";\nimport type { BakaDesign } from \"baka-core\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport AvatarStory, { AvatarStoryProps, defaultProps } from \"./page\";\n\nconst variantOptions: BakaDesign[\"AvatarVariant\"][] = [\"small\", \"medium\"];\n\nconst meta: Meta = {\n title: \"Material You/Avatar\",\n component: (props: AvatarStoryProps) => ,\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n type: {\n control: \"radio\",\n options: [\"letter\", \"icon\", \"image\"],\n },\n variant: {\n control: \"radio\",\n options: variantOptions,\n },\n children: { table: { disable: true } },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\nexport const Basic: Story = {\n args: {\n variant: \"medium\",\n ...defaultProps,\n },\n};\n"}]},{"name":"demos/material-you/avatar/text","files":[{"name":"page.tsx","code":"import { BakaAvatar } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n <>\n A\n \n );\n}\n"}]},{"name":"demos/material-you/badge/stories","files":[{"name":"page.tsx","code":"import { BakaBadge, BakaBadgeProps } from \"baka-ui\";\n\nexport type BadgeStoryProps = BakaBadgeProps & {};\nexport const defaultProps: BadgeStoryProps = {\n variant: \"single-digit\",\n};\n\nexport default function BadgeStory(props: BadgeStoryProps) {\n switch (props.variant) {\n case \"small\":\n return ;\n case \"multi-digit\":\n return 99+;\n case \"single-digit\":\n default:\n return 3;\n }\n}\n"},{"name":"badge.stories.tsx","code":"import React from \"react\";\nimport type { BakaDesign } from \"baka-core\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport BadgeStory, { BadgeStoryProps, defaultProps } from \"./page\";\n\nconst variantOptions: BakaDesign[\"BadgeVariant\"][] = [\"small\", \"single-digit\", \"multi-digit\"];\n\nconst meta: Meta = {\n title: \"Material You/Badge\",\n component: (props: BadgeStoryProps) => ,\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n variant: {\n control: \"radio\",\n options: variantOptions,\n },\n children: { table: { disable: true } },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\nexport const Basic: Story = {\n args: {\n ...defaultProps,\n },\n};\n"}]},{"name":"demos/material-you/bars/bottom","files":[{"name":"page.tsx","code":"import { BakaBar, BakaButton, BakaIcon } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n \n
\n {[\"circle\", \"change_history\", \"rectangle\", \"pentagon\", \"hexagon\"].map((shape) => (\n \n {shape}\n \n ))}\n
\n {true ? (\n \n add\n \n ) : null}\n \n );\n}\n"}]},{"name":"demos/material-you/bars/stories","files":[{"name":"page.tsx","code":"import { BakaBadge, BakaBar, BakaBarProps, BakaButton, BakaIcon, BakaText } from \"baka-ui\";\n\nexport type BarStoryProps = BakaBarProps & {\n size?: \"small\" | \"medium\" | \"large\";\n position?: \"top\" | \"bottom\";\n elevated?: boolean;\n items?: number;\n fab?: boolean;\n};\nexport const defaultProps: BarStoryProps = {\n position: \"top\",\n items: 3,\n fab: true,\n size: \"medium\",\n elevated: false,\n};\n\nexport default function BarStory(props: BarStoryProps) {\n switch (props.position) {\n case \"bottom\":\n return (\n \n
\n {[\"circle\", \"change_history\", \"rectangle\", \"pentagon\", \"hexagon\"]\n .slice(0, props.items)\n .map((shape) => (\n \n {shape}\n \n ))}\n
\n {props.fab ? (\n \n add\n \n ) : null}\n \n );\n case \"top\":\n default:\n switch (props.size) {\n case \"small\":\n return (\n \n \n menu\n \n \n Product\n \n \n account_circle\n \n \n );\n case \"medium\":\n return (\n \n
\n
\n \n arrow_back\n \n
\n \n attach_file\n \n \n today\n \n \n more_vert\n \n
\n
\n \n Title\n \n
\n \n );\n case \"large\":\n return (\n \n
\n
\n \n arrow_back\n \n
\n \n attach_file\n \n \n today\n \n \n more_vert\n \n
\n
\n \n Title\n \n
\n \n );\n }\n }\n}\n"},{"name":"bar.stories.tsx","code":"import React from \"react\";\nimport type { BakaDesign } from \"baka-core\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport BarStory, { BarStoryProps, defaultProps } from \"./page\";\n\nconst meta: Meta = {\n title: \"Material You/Bar\",\n component: (props: BarStoryProps) => ,\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n children: { table: { disable: true } },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\nexport const Basic: Story = {\n args: {\n ...defaultProps,\n },\n argTypes: {\n position: {\n control: \"radio\",\n options: [\"top\", \"bottom\"],\n },\n elevated: {\n control: \"boolean\",\n if: {\n arg: \"position\",\n eq: \"top\",\n },\n },\n size: {\n control: \"radio\",\n options: [\"small\", \"medium\", \"large\"],\n if: {\n arg: \"position\",\n eq: \"top\",\n },\n },\n items: {\n control: {\n type: \"range\",\n min: 1,\n max: 5,\n },\n if: {\n arg: \"position\",\n eq: \"bottom\",\n },\n },\n fab: {\n control: \"boolean\",\n if: {\n arg: \"position\",\n eq: \"bottom\",\n },\n },\n },\n};\n"}]},{"name":"demos/material-you/bars/top","files":[{"name":"page.tsx","code":"import { BakaBar, BakaButton, BakaIcon, BakaText } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n <>\n \n \n menu\n \n \n Product\n \n \n account_circle\n \n \n \n );\n}\n"}]},{"name":"demos/material-you/button/filled","files":[{"name":"page.tsx","code":"import { BakaButton, BakaIcon } from \"baka-ui\";\n\nexport default function ButtonDemo() {\n return (\n <>\n
\n
\n Button\n \n Button\n \n \n Button\n \n \n Button\n \n \n Button\n \n
\n
\n Button\n \n add\n Button\n \n \n add\n Button\n \n \n add\n Button\n \n \n add\n Button\n \n
\n
\n \n );\n}\n"}]},{"name":"demos/material-you/button/stories","files":[{"name":"page.tsx","code":"import { BakaButton, BakaButtonProps } from \"baka-ui\";\n\nexport type ButtonStoryProps = BakaButtonProps & {\n children?: React.ReactNode;\n};\nexport const defaultProps: ButtonStoryProps = {\n hovered: false,\n focused: false,\n activated: false,\n disabled: false,\n children: \"Label\",\n};\n\nexport default function ButtonStory(props: ButtonStoryProps) {\n const { children, ...other } = { ...defaultProps, ...props };\n return {children};\n}\n"},{"name":"button.stories.tsx","code":"/// \n\nimport React from \"react\";\nimport type { BakaDesign } from \"baka-core\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport ButtonStory, { ButtonStoryProps, defaultProps } from \"./page\";\nimport { BakaIcon } from \"baka-ui\";\n\nconst variantOptions: BakaDesign[\"ButtonVariant\"][] = [\n \"filled\",\n \"outlined\",\n \"text\",\n \"elevated\",\n \"tonal\",\n];\n\nconst meta: Meta = {\n title: \"Material You/Button\",\n component: (props: ButtonStoryProps) => ,\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n variant: {\n control: \"radio\",\n options: variantOptions,\n },\n children: { table: { disable: true } },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\nexport const Basic: Story = {\n args: {\n variant: \"filled\",\n ...defaultProps,\n },\n};\n\nexport const IconButton: Story = {\n args: {\n toggleable: false,\n selected: false,\n variant: \"icon\",\n ...defaultProps,\n children: settings,\n },\n render: (props) => {\n const { toggleable, ...other } = props;\n\n return (\n \n );\n },\n argTypes: {\n variant: {\n control: \"radio\",\n mapping: {\n [\"icon\"]: \"icon\",\n [\"+ filled\"]: [\"icon\", \"filled\"],\n [\"+ tonal\"]: [\"icon\", \"tonal\"],\n [\"+ outlined\"]: [\"icon\", \"outlined\"],\n },\n options: [\"icon\", \"+ filled\", \"+ tonal\", \"+ outlined\"],\n },\n selected: { control: \"boolean\", if: { arg: \"toggleable\" } },\n toggleable: { control: \"boolean\" },\n },\n};\n\nexport const TextAndIcon: Story = {\n render: (props: ButtonStoryProps & { icon?: string }) => {\n const { icon, children, ...other } = props;\n\n return (\n \n {icon}\n {children}\n \n );\n },\n args: {\n icon: \"add\",\n variant: \"filled\",\n ...defaultProps,\n children: \"Label\",\n },\n};\n\nexport const FAB: Story = {\n render: ({ extended, ...props }) => {\n return (\n \n {props.children} {extended && \"Label\"}\n \n );\n },\n args: {\n variant: \"fab\",\n [\"variant (size)\"]: \"medium\",\n extended: false,\n ...defaultProps,\n children: mode_edit,\n },\n argTypes: {\n variant: {\n control: \"radio\",\n mapping: {\n [\"fab\"]: \"fab\",\n [\"+ primary\"]: [\"fab\", \"primary\"],\n [\"+ secondary\"]: [\"fab\", \"secondary\"],\n [\"+ tertiary\"]: [\"fab\", \"tertiary\"],\n },\n options: [\"fab\", \"+ primary\", \"+ secondary\", \"+ tertiary\"],\n },\n [\"variant (size)\"]: {\n control: \"radio\",\n options: [\"small\", \"medium\", \"large\"],\n },\n extended: { control: \"boolean\" },\n },\n};\n"}]},{"name":"demos/material-you/card/elevated","files":[{"name":"page.tsx","code":"import { BakaCard, BakaAvatar, BakaText, BakaButton, BakaIcon } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n \n \n
\n \n A\n \n \n Header\n Subhead\n \n
\n \n more_vert\n \n \n
\n \n
\n \n
\n Title\n Subhead\n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n \n
\n Enabled\n Enabled\n
\n \n \n );\n}\n"}]},{"name":"demos/material-you/card/filled","files":[{"name":"page.tsx","code":"import { BakaCard, BakaAvatar, BakaText, BakaButton, BakaIcon } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n \n \n
\n \n A\n \n \n Header\n Subhead\n \n
\n \n more_vert\n \n \n
\n \n
\n \n
\n Title\n Subhead\n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n \n
\n Enabled\n Enabled\n
\n \n \n );\n}\n"}]},{"name":"demos/material-you/card/horizontal","files":[{"name":"page.tsx","code":"import { BakaCard, BakaAvatar, BakaText } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n \n
\n \n A\n \n
\n Header\n Subhead\n
\n
\n\n \"media\"\n \n );\n}\n"}]},{"name":"demos/material-you/card/stories","files":[{"name":"page.tsx","code":"import { BakaAvatar, BakaButton, BakaCard, BakaCardProps, BakaIcon, BakaText } from \"baka-ui\";\n\nexport type CardStoryProps = BakaCardProps & {\n type: \"vertical\" | \"horizontal\";\n};\nexport const defaultProps: CardStoryProps = {\n type: \"vertical\",\n};\n\nexport default function CardStory(props: CardStoryProps) {\n const { type, ...other } = { ...defaultProps, ...props };\n\n switch (type) {\n case \"horizontal\":\n return (\n \n
\n \n A\n \n
\n Header\n Subhead\n
\n
\n\n \"media\"\n \n );\n case \"vertical\":\n default: {\n return (\n \n \n
\n \n A\n \n \n Header\n Subhead\n \n
\n \n more_vert\n \n \n
\n \n
\n \n
\n Title\n Subhead\n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n \n \n Enabled\n Enabled\n \n \n \n );\n }\n }\n // return ;\n}\n"},{"name":"card.stories.tsx","code":"import React from \"react\";\nimport type { BakaDesign } from \"baka-core\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport CardStory, { CardStoryProps, defaultProps } from \"./page\";\n\nconst variantOptions: BakaDesign[\"CardVariant\"][] = [\"outlined\", \"elevated\", \"filled\"];\n\nconst meta: Meta = {\n title: \"Material You/Card\",\n component: (props: CardStoryProps) => ,\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n variant: {\n control: \"radio\",\n options: variantOptions,\n },\n type: { table: { disable: true } },\n children: { table: { disable: true } },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\nexport const Basic: Story = {\n args: {\n variant: \"outlined\",\n ...defaultProps,\n },\n};\n\nexport const Horizontal: Story = {\n args: {\n variant: \"outlined\",\n ...defaultProps,\n type: \"horizontal\",\n },\n};\n"}]},{"name":"demos/material-you/checkbox/stories","files":[{"name":"page.tsx","code":"import { BakaCheckbox, BakaCheckboxProps } from \"baka-ui\";\n\nexport type CheckboxStoryProps = BakaCheckboxProps & {};\n\nexport const defaultProps: CheckboxStoryProps = {\n variant: \"primary\",\n checked: true,\n indeterminate: false,\n hovered: false,\n focused: false,\n activated: false,\n disabled: false,\n};\n\nexport default function CheckboxStory(props: CheckboxStoryProps) {\n return ;\n}\n"},{"name":"checkbox.stories.tsx","code":"import React from \"react\";\nimport type { BakaDesign } from \"baka-core\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport CheckboxStory, { CheckboxStoryProps, defaultProps } from \"./page\";\n\nconst variantOptions: BakaDesign[\"CheckboxVariant\"][] = [\"primary\", \"error\"];\n\nconst meta: Meta = {\n title: \"Material You/Checkbox\",\n component: (props: CheckboxStoryProps) => ,\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n variant: {\n control: \"radio\",\n options: variantOptions,\n },\n children: { table: { disable: true } },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\nexport const Basic: Story = {\n args: {\n ...defaultProps,\n },\n argTypes: {\n variant: {\n control: \"radio\",\n map: {\n primary: null,\n error: \"error\",\n },\n options: [\"primary\", \"error\"],\n },\n indeterminate: {\n control: \"boolean\",\n if: { arg: \"checked\", neq: true },\n },\n },\n};\n"}]},{"name":"demos/material-you/chip/elevated","files":[{"name":"page.tsx","code":"import { BakaChip } from \"baka-ui\";\n\nexport default async function Chip() {\n return Label;\n}\n"}]},{"name":"demos/material-you/chip/leading-icon","files":[{"name":"page.tsx","code":"import { BakaChip, BakaIcon, BakaText } from \"baka-ui\";\n\nexport default async function Chip() {\n return (\n \n local_taxi\n Label\n \n );\n}\n"}]},{"name":"demos/material-you/chip/stories","files":[{"name":"page.tsx","code":"import { BakaAvatar, BakaChip, BakaChipProps, BakaIcon } from \"baka-ui\";\n\nexport type ChipStoryProps = BakaChipProps & {\n variant?: \"elevated\";\n leadingIcon?: boolean;\n trailingIcon?: boolean;\n avatar?: boolean;\n};\n\nexport const defaultProps: ChipStoryProps = {\n variant: \"normal\" as any,\n leadingIcon: false,\n trailingIcon: false,\n avatar: false,\n hovered: false,\n focused: false,\n activated: false,\n dragged: false,\n selected: false,\n};\n\nexport default function ChipStory(props: ChipStoryProps) {\n const { leadingIcon, trailingIcon, avatar, variant, ...other } = { ...defaultProps, ...props };\n\n return (\n \n {leadingIcon && local_taxi}\n {avatar && (\n \n {props.selected ? (\n check\n ) : (\n \n )}\n \n )}\n {!avatar && props.selected && (\n \n check\n \n )}\n Label\n {trailingIcon && close}\n \n );\n}\n"},{"name":"chip.stories.tsx","code":"import React from \"react\";\nimport type { BakaDesign } from \"baka-core\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport ChipStory, { ChipStoryProps, defaultProps } from \"./page\";\n\nconst variantOptions: (BakaDesign[\"ChipVariant\"] | \"normal\")[] = [\"normal\", \"elevated\"];\n\nconst meta: Meta = {\n title: \"Material You/Chip\",\n component: (props: ChipStoryProps) => ,\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n variant: {\n control: \"radio\",\n options: variantOptions,\n },\n children: { table: { disable: true } },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\nexport const Basic: Story = {\n args: {\n ...defaultProps,\n },\n argTypes: {\n variant: {\n control: \"radio\",\n mapping: {\n normal: undefined,\n elevated: \"elevated\",\n },\n defaultValue: undefined,\n options: variantOptions,\n },\n avatar: {\n if: { arg: \"leadingIcon\", eq: false },\n },\n },\n};\n"}]},{"name":"demos/material-you/chip/trailing-icon","files":[{"name":"page.tsx","code":"import { BakaChip, BakaIcon, BakaText } from \"baka-ui\";\n\nexport default async function Chip() {\n return (\n \n Label\n close\n \n );\n}\n"}]},{"name":"demos/material-you/design/color-system","files":[{"name":"page.tsx","code":"export default async function Page() {\n return (\n
\n {['primary', 'secondary', 'tertiary', 'error'].map((color) => (\n
\n {color}\n
\n ))}\n
\n )\n}"}]},{"name":"demos/material-you/dialog/full-screen","files":[{"name":"page.tsx","code":"import { BakaButton, BakaDialog, BakaIcon, BakaText } from \"baka-ui\";\n\nexport default function DialogDemo() {\n return (\n \n
\n mobile_friendly\n \n Dialog Title\n \n \n A dialog is a type of modal window that appears in front of app content to provide\n critical information, or prompt for a decision to be made.\n \n
\n
\n Action 2\n Action 1\n
\n \n );\n}\n"}]},{"name":"demos/material-you/dialog/stories","files":[{"name":"page.tsx","code":"import {\n BakaDialog,\n BakaIcon,\n BakaText,\n BakaListItem,\n BakaAvatar,\n BakaCheckbox,\n BakaButton,\n BakaDialogProps,\n} from \"baka-ui\";\n\nexport type DialogStoryProps = BakaDialogProps & {\n icon?: boolean;\n menu?: boolean;\n items?: boolean;\n itemsCount?: number;\n scrollable?: boolean;\n};\n\nexport const defaultProps: DialogStoryProps = {\n variant: \"basic\",\n icon: false,\n items: true,\n itemsCount: 3,\n};\n\nexport default function DialogStory(props: DialogStoryProps) {\n const args = { ...defaultProps, ...props };\n\n return (\n \n
\n {args.icon && mobile_friendly}\n \n Dialog Title\n \n \n A dialog is a type of modal window that appears in front of app content to provide\n critical information, or prompt for a decision to be made.\n \n
\n {args.items && (\n \n {new Array(args.itemsCount ?? 0).fill(null).map((_, index) => (\n \n A\n \n List item\n \n 100+\n \n \n ))}\n \n )}\n
\n Action 2\n Action 1\n
\n \n );\n}\n"},{"name":"dialog.stories.tsx","code":"import React from \"react\";\nimport type { BakaDesign } from \"baka-core\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport DialogStory, { DialogStoryProps, defaultProps } from \"./page\";\n\nconst variantOptions: BakaDesign[\"DialogVariant\"][] = [\"basic\", \"full-screen\"];\n\nconst meta: Meta = {\n title: \"Material You/Dialog\",\n component: (props: DialogStoryProps) => ,\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n variant: {\n control: \"radio\",\n options: variantOptions,\n },\n children: { table: { disable: true } },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\nexport const Basic: Story = {\n args: {\n ...defaultProps,\n itemsCount: 3,\n },\n argTypes: {\n variant: {\n control: \"radio\",\n defaultValue: undefined,\n options: variantOptions,\n },\n itemsCount: {\n control: {\n type: \"range\",\n min: 3,\n max: 5,\n },\n if: { arg: \"items\", eq: true },\n },\n },\n};\n"}]},{"name":"demos/material-you/navigation/bottom","files":[{"name":"page.tsx","code":"import { BakaBadge, BakaNavigation, BakaNavigationItem, BakaIcon, BakaText } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n \n \n fiber_manual_record\n \n \n fiber_manual_record\n \n\n \n \n fiber_manual_record\n \n \n \n \n );\n}\n"}]},{"name":"demos/material-you/navigation/rail","files":[{"name":"page.tsx","code":"import { BakaNavigation, BakaButton, BakaIcon, BakaNavigationItem, BakaText } from \"baka-ui\";\n\nexport default function Navigation() {\n return (\n \n \n \n menu\n \n {\n \n mode_edit\n \n }\n \n
\n \n fiber_manual_record\n Label\n \n \n fiber_manual_record\n \n \n fiber_manual_record\n \n \n fiber_manual_record\n \n
\n \n );\n}\n"}]},{"name":"demos/material-you/navigation/side","files":[{"name":"page.tsx","code":"import {\n BakaNavigation,\n BakaNavigationItem,\n BakaIcon,\n BakaText,\n BakaDivider,\n} from \"baka-ui\";\n\nexport default async function () {\n return (\n \n
\n Title\n
\n
\n Section header\n
\n \n fiber_manual_record\n Label\n 100+\n \n \n fiber_manual_record\n Label\n 100+\n \n \n fiber_manual_record\n Label\n 100+\n \n \n
\n Section header\n
\n \n fiber_manual_record\n Label\n \n \n fiber_manual_record\n Label\n \n \n fiber_manual_record\n Label\n \n \n );\n}\n"}]},{"name":"demos/material-you/navigation/stories","files":[{"name":"page.tsx","code":"import {\n BakaBadge,\n BakaButton,\n BakaDivider,\n BakaIcon,\n BakaNavigation,\n BakaNavigationItem,\n BakaNavigationProps,\n BakaText,\n} from \"baka-ui\";\n\nexport type NavigationStoryProps = BakaNavigationProps & {\n type: \"side\" | \"bottom\" | \"rail\";\n labels: boolean;\n items: number;\n icons: boolean;\n align: \"top\" | \"center\" | \"bottom\";\n};\nexport const defaultProps: NavigationStoryProps = {\n type: \"bottom\",\n labels: true,\n icons: true,\n items: 3,\n align: \"top\",\n};\nexport default function NavigationStory(props: NavigationStoryProps) {\n const { type, labels, items, icons, align, ...other } = props;\n\n switch (type) {\n case \"side\":\n return (\n \n
\n Title\n
\n
\n Section header\n
\n \n {icons ? fiber_manual_record : null}\n Label\n 100+\n \n \n {icons ? fiber_manual_record : null}\n Label\n 100+\n \n \n {icons ? fiber_manual_record : null}\n Label\n 100+\n \n \n
\n Section header\n
\n \n {icons ? fiber_manual_record : null}\n Label\n \n \n {icons ? fiber_manual_record : null}\n Label\n \n \n {icons ? fiber_manual_record : null}\n Label\n \n \n );\n case \"bottom\":\n default:\n return (\n \n \n fiber_manual_record\n {labels ? Label : null}\n \n {Array.from({ length: items - 2 }, (_, i) => (\n \n fiber_manual_record\n {labels ? Label : null}\n \n ))}\n \n \n fiber_manual_record\n {labels ? (\n \n 3\n \n ) : (\n \n )}\n \n {labels ? Label : null}\n \n \n );\n case \"rail\":\n return (\n \n \n \n menu\n \n {\n \n mode_edit\n \n }\n \n \n \n fiber_manual_record\n {labels ? BakaText : null}\n \n \n fiber_manual_record\n \n \n fiber_manual_record\n \n \n fiber_manual_record\n \n \n \n );\n }\n}\n"},{"name":"navigation.stories.tsx","code":"import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport NavigationStory, { NavigationStoryProps, defaultProps } from \"./page\";\n\nconst meta: Meta = {\n title: \"Material You/Navigation\",\n component: (props: NavigationStoryProps) => ,\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n type: { table: { disable: true } },\n children: { table: { disable: true } },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\nexport const Bottom: Story = {\n args: {\n labels: true,\n items: 3,\n type: \"bottom\",\n },\n argTypes: {\n items: {\n control: {\n type: \"range\",\n min: 3,\n max: 5,\n },\n if: { arg: \"type\", eq: \"bottom\" },\n },\n labels: {\n control: \"boolean\",\n if: { arg: \"type\", eq: \"bottom\" },\n },\n },\n};\n\nexport const Side: Story = {\n args: {\n type: \"side\",\n icons: true,\n },\n argTypes: {\n icons: {\n control: \"boolean\",\n },\n },\n};\n\nexport const Rail: Story = {\n args: {\n type: \"rail\",\n labels: true,\n align: \"top\",\n },\n argTypes: {\n labels: {\n control: \"boolean\",\n },\n align: {\n control: \"radio\",\n options: [\"top\", \"center\", \"bottom\"],\n if: { arg: \"type\", eq: \"rail\" },\n },\n },\n};\n"}]},{"name":"demos/material-you/text-field/filled","files":[{"name":"page.tsx","code":"import { BakaTextField, BakaIcon, BakaText, BakaInput, BakaButton } from \"baka-ui\";\n\nexport default function FilledTextFieldDemo() {\n return (\n
\n \n search\n Label\n \n \n clear\n \n \n \n search\n Label\n \n \n clear\n \n \n \n search\n Label\n \n \n clear\n \n \n \n search\n Label\n \n \n clear\n \n \n \n search\n Label\n \n \n clear\n \n \n
\n );\n}\n"}]},{"name":"demos/material-you/text-field/outlined","files":[{"name":"page.tsx","code":"import { BakaTextField, BakaIcon, BakaText, BakaInput, BakaButton } from \"baka-ui\";\n\nexport default function FilledTextFieldDemo() {\n return (\n
\n \n search\n Label\n \n \n clear\n \n \n \n search\n Label\n \n \n clear\n \n \n \n search\n Label\n \n \n clear\n \n \n \n search\n Label\n \n \n clear\n \n \n
\n );\n}\n"}]},{"name":"demos/material-you/text-field/stories","files":[{"name":"page.tsx","code":"import {\n BakaButton,\n BakaIcon,\n BakaInput,\n BakaText,\n BakaTextField,\n BakaTextFieldProps,\n} from \"baka-ui\";\n\nexport type TextFieldStoryProps = BakaTextFieldProps & {\n value: string;\n placeholder: boolean;\n label: boolean;\n leadingIcon: boolean;\n trailingIcon: boolean;\n state: \"\" | \"hovered\" | \"focused\" | \"invalid\" | \"disabled\";\n};\nexport const defaultProps = {\n value: \"\",\n placeholder: true,\n label: true,\n leadingIcon: true,\n trailingIcon: true,\n state: \"\",\n};\n\nexport default function TextFieldStory(props: TextFieldStoryProps) {\n const { value, placeholder, label, leadingIcon, trailingIcon, state, ...other } = props;\n\n return (\n \n {leadingIcon && search}\n {label && Label}\n \n {trailingIcon &&\n (state === \"invalid\" ? (\n \n error\n \n ) : (\n \n cancel\n \n ))}\n \n );\n}\n"},{"name":"text-field.stories.tsx","code":"/// \n\nimport React from \"react\";\nimport type { BakaDesign } from \"baka-core\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport TextFieldStory, { TextFieldStoryProps, defaultProps } from \"./page\";\n\nconst variantOptions: BakaDesign[\"TextFieldVariant\"][] = [\"filled\", \"outlined\"];\n\nconst meta: Meta = {\n title: \"Material You/TextField\",\n component: (props: TextFieldStoryProps) => ,\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n variant: {\n control: \"radio\",\n options: variantOptions,\n },\n children: { table: { disable: true } },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\nexport const Basic: Story = {\n args: {\n variant: \"filled\",\n state: \"\",\n value: defaultProps.value,\n placeholder: defaultProps.placeholder,\n label: defaultProps.label,\n leadingIcon: defaultProps.leadingIcon,\n trailingIcon: defaultProps.trailingIcon,\n },\n argTypes: {\n value: {\n control: \"text\",\n },\n state: {\n control: \"radio\",\n map: {\n idle: \"\",\n hovered: \"hovered\",\n focused: \"focused\",\n invalid: \"invalid\",\n disabled: \"disabled\",\n },\n options: [\"\", \"hovered\", \"focused\", \"invalid\", \"disabled\"],\n },\n variant: {\n control: \"radio\",\n options: [\"filled\", \"outlined\"],\n },\n },\n};\n"}]},{"name":"demos/material-you/bars/top/elevated","files":[{"name":"page.tsx","code":"import { BakaButton, BakaBar, BakaIcon, BakaText } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n \n
\n
\n \n arrow_back\n \n
\n \n attach_file\n \n \n today\n \n \n more_vert\n \n
\n
\n \n Title\n \n
\n \n );\n}\n"}]},{"name":"demos/material-you/bars/top/large","files":[{"name":"page.tsx","code":"import { BakaButton, BakaBar, BakaIcon, BakaText } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n \n
\n
\n \n arrow_back\n \n
\n \n attach_file\n \n \n today\n \n \n more_vert\n \n
\n
\n \n Title\n \n
\n \n );\n}\n"}]},{"name":"demos/material-you/bars/top/medium","files":[{"name":"page.tsx","code":"import { BakaButton, BakaBar, BakaIcon, BakaText } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n \n
\n
\n \n arrow_back\n \n
\n \n attach_file\n \n \n today\n \n \n more_vert\n \n
\n
\n \n Title\n \n
\n \n );\n}\n"}]},{"name":"demos/material-you/navigation/bottom/labels","files":[{"name":"page.tsx","code":"import { BakaBadge, BakaNavigation, BakaNavigationItem, BakaIcon, BakaText } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n \n \n fiber_manual_record\n {true ? BakaText : null}\n \n \n fiber_manual_record\n {true ? BakaText : null}\n \n\n \n \n fiber_manual_record\n {true ? (\n \n 3\n \n ) : (\n \n )}\n \n {true ? BakaText : null}\n \n \n );\n}\n"}]}] \ No newline at end of file +[{"name":"demos/material-you/badge","files":[{"name":"page.tsx","code":"import { BakaBadge } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n <>\n \n
\n
\n 4\n
\n
\n 14\n \n );\n}\n"}]},{"name":"demos/material-you/bars","files":[{"name":"page.tsx","code":"import { BakaButton, BakaIcon, BakaText, BakaBar } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n <>\n \n \n menu\n \n \n Product\n \n \n account_circle\n \n \n
\n
\n \n
\n {[\"circle\", \"change_history\", \"rectangle\", \"pentagon\", \"hexagon\"].map((shape) => (\n \n {shape}\n \n ))}\n
\n {true ? (\n \n add\n \n ) : null}\n \n \n );\n}\n"}]},{"name":"demos/material-you/button","files":[{"name":"page.tsx","code":"import { BakaButton } from \"baka-ui\";\n\nexport default function ButtonDemo() {\n return (\n <>\n
\n Button\n Button\n Button\n Button\n
\n \n );\n}\n"}]},{"name":"demos/material-you/card","files":[{"name":"page.tsx","code":"import {\n BakaCard,\n BakaAvatar,\n BakaText,\n BakaButton,\n BakaIcon,\n} from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n \n \n
\n \n A\n \n \n Header\n Subhead\n \n
\n \n more_vert\n \n \n
\n \n
\n \n
\n Title\n Subhead\n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n \n
\n Enabled\n Enabled\n
\n \n \n );\n}\n"}]},{"name":"demos/material-you/checkbox","files":[{"name":"page.tsx","code":"import { BakaCheckbox } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n <>\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n \n );\n}\n"}]},{"name":"demos/material-you/chip","files":[{"name":"page.tsx","code":"import { BakaChip } from \"baka-ui\";\n\nexport default async function Chip() {\n return Label;\n}\n"}]},{"name":"demos/material-you/dialog","files":[{"name":"page.tsx","code":"import {\n BakaAvatar,\n BakaButton,\n BakaCheckbox,\n BakaDialog,\n BakaIcon,\n BakaListItem,\n BakaText,\n} from \"baka-ui\";\n\nexport default function DialogDemo() {\n return (\n \n
\n mobile_friendly\n \n Dialog Title\n \n \n A dialog is a type of modal window that appears in front of app content to provide\n critical information, or prompt for a decision to be made.\n \n
\n \n \n A\n \n BakaList item\n \n 100+\n \n \n \n A\n \n BakaList item\n \n 100+\n \n \n \n A\n \n BakaList item\n \n 100+\n \n \n \n
\n Action 2\n Action 1\n
\n \n );\n}\n"}]},{"name":"demos/material-you/divider","files":[{"name":"page.tsx","code":"import { BakaDivider } from \"baka-ui\";\n\nexport default function DividerDemo() {\n return ;\n}\n"}]},{"name":"demos/material-you/navigation","files":[{"name":"page.tsx","code":"import SideNavigation from \"./side/page\";\nimport BottomNavigation from \"./bottom/page\";\nimport RailNavigation from \"./rail/page\";\n\nexport default async function () {\n return (\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n );\n}\n"}]},{"name":"demos/material-you/text-field","files":[{"name":"page.tsx","code":"import { BakaButton, BakaIcon, BakaInput, BakaText, BakaTextField } from \"baka-ui\";\n\nexport default async function App() {\n const args = {};\n return (\n
\n
\n \n search\n Label\n \n \n clear\n \n \n \n search\n Label\n \n \n error\n \n \n
\n
\n \n search\n Label\n \n \n clear\n \n \n \n search\n Label\n \n \n error\n \n \n
\n
\n );\n}\n"}]},{"name":"demos/material-you/avatar/basic","files":[{"name":"page.tsx","code":"import { BakaAvatar, BakaIcon } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n <>\n A\n
\n
\n \n check\n \n
\n
\n \n \n \n \n );\n}\n"}]},{"name":"demos/material-you/avatar/icon","files":[{"name":"page.tsx","code":"import { BakaAvatar, BakaIcon } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n <>\n \n check\n \n \n );\n}\n"}]},{"name":"demos/material-you/avatar/image","files":[{"name":"page.tsx","code":"import { BakaAvatar, BakaIcon } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n <>\n \n \n \n \n );\n}\n"}]},{"name":"demos/material-you/avatar/stories","files":[{"name":"page.tsx","code":"/// \nimport { BakaAvatar, BakaAvatarProps, BakaIcon } from \"baka-ui\";\n\nexport type AvatarStoryProps = BakaAvatarProps & {\n type: \"letter\" | \"icon\" | \"image\";\n children: React.ReactNode;\n};\nexport const defaultProps: AvatarStoryProps = {\n type: \"letter\",\n};\n\nexport default function AvatarStory(props: AvatarStoryProps) {\n const { type, children, ...other } = { ...defaultProps, ...props };\n\n return (\n <>\n {(() => {\n switch (type) {\n case \"icon\":\n return (\n \n check\n \n );\n case \"image\":\n return (\n \n \n \n );\n case \"letter\":\n default:\n return {children || \"A\"};\n }\n })()}\n \n );\n}\n"},{"name":"avatar.stories.tsx","code":"/// \n\nimport React from \"react\";\nimport type { BakaDesign } from \"baka-core\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport AvatarStory, { AvatarStoryProps, defaultProps } from \"./page\";\n\nconst variantOptions: BakaDesign[\"AvatarVariant\"][] = [\"small\", \"medium\"];\n\nconst meta: Meta = {\n title: \"Material You/Avatar\",\n component: (props: AvatarStoryProps) => ,\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n type: {\n control: \"radio\",\n options: [\"letter\", \"icon\", \"image\"],\n },\n variant: {\n control: \"radio\",\n options: variantOptions,\n },\n children: { table: { disable: true } },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\nexport const Basic: Story = {\n args: {\n variant: \"medium\",\n ...defaultProps,\n },\n};\n"}]},{"name":"demos/material-you/avatar/text","files":[{"name":"page.tsx","code":"import { BakaAvatar } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n <>\n A\n \n );\n}\n"}]},{"name":"demos/material-you/badge/stories","files":[{"name":"page.tsx","code":"import { BakaBadge, BakaBadgeProps } from \"baka-ui\";\n\nexport type BadgeStoryProps = BakaBadgeProps & {};\nexport const defaultProps: BadgeStoryProps = {\n variant: \"single-digit\",\n};\n\nexport default function BadgeStory(props: BadgeStoryProps) {\n switch (props.variant) {\n case \"small\":\n return ;\n case \"multi-digit\":\n return 99+;\n case \"single-digit\":\n default:\n return 3;\n }\n}\n"},{"name":"badge.stories.tsx","code":"import React from \"react\";\nimport type { BakaDesign } from \"baka-core\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport BadgeStory, { BadgeStoryProps, defaultProps } from \"./page\";\n\nconst variantOptions: BakaDesign[\"BadgeVariant\"][] = [\"small\", \"single-digit\", \"multi-digit\"];\n\nconst meta: Meta = {\n title: \"Material You/Badge\",\n component: (props: BadgeStoryProps) => ,\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n variant: {\n control: \"radio\",\n options: variantOptions,\n },\n children: { table: { disable: true } },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\nexport const Basic: Story = {\n args: {\n ...defaultProps,\n },\n};\n"}]},{"name":"demos/material-you/bars/bottom","files":[{"name":"page.tsx","code":"import { BakaBar, BakaButton, BakaIcon } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n \n
\n {[\"circle\", \"change_history\", \"rectangle\", \"pentagon\", \"hexagon\"].map((shape) => (\n \n {shape}\n \n ))}\n
\n {true ? (\n \n add\n \n ) : null}\n \n );\n}\n"}]},{"name":"demos/material-you/bars/stories","files":[{"name":"page.tsx","code":"import { BakaBadge, BakaBar, BakaBarProps, BakaButton, BakaIcon, BakaText } from \"baka-ui\";\n\nexport type BarStoryProps = BakaBarProps & {\n size?: \"small\" | \"medium\" | \"large\";\n position?: \"top\" | \"bottom\";\n elevated?: boolean;\n items?: number;\n fab?: boolean;\n};\nexport const defaultProps: BarStoryProps = {\n position: \"top\",\n items: 3,\n fab: true,\n size: \"medium\",\n elevated: false,\n};\n\nexport default function BarStory(props: BarStoryProps) {\n switch (props.position) {\n case \"bottom\":\n return (\n \n
\n {[\"circle\", \"change_history\", \"rectangle\", \"pentagon\", \"hexagon\"]\n .slice(0, props.items)\n .map((shape) => (\n \n {shape}\n \n ))}\n
\n {props.fab ? (\n \n add\n \n ) : null}\n \n );\n case \"top\":\n default:\n switch (props.size) {\n case \"small\":\n return (\n \n \n menu\n \n \n Product\n \n \n account_circle\n \n \n );\n case \"medium\":\n return (\n \n
\n
\n \n arrow_back\n \n
\n \n attach_file\n \n \n today\n \n \n more_vert\n \n
\n
\n \n Title\n \n
\n \n );\n case \"large\":\n return (\n \n
\n
\n \n arrow_back\n \n
\n \n attach_file\n \n \n today\n \n \n more_vert\n \n
\n
\n \n Title\n \n
\n \n );\n }\n }\n}\n"},{"name":"bar.stories.tsx","code":"import React from \"react\";\nimport type { BakaDesign } from \"baka-core\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport BarStory, { BarStoryProps, defaultProps } from \"./page\";\n\nconst meta: Meta = {\n title: \"Material You/Bar\",\n component: (props: BarStoryProps) => ,\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n children: { table: { disable: true } },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\nexport const Basic: Story = {\n args: {\n ...defaultProps,\n },\n argTypes: {\n position: {\n control: \"radio\",\n options: [\"top\", \"bottom\"],\n },\n elevated: {\n control: \"boolean\",\n if: {\n arg: \"position\",\n eq: \"top\",\n },\n },\n size: {\n control: \"radio\",\n options: [\"small\", \"medium\", \"large\"],\n if: {\n arg: \"position\",\n eq: \"top\",\n },\n },\n items: {\n control: {\n type: \"range\",\n min: 1,\n max: 5,\n },\n if: {\n arg: \"position\",\n eq: \"bottom\",\n },\n },\n fab: {\n control: \"boolean\",\n if: {\n arg: \"position\",\n eq: \"bottom\",\n },\n },\n },\n};\n"}]},{"name":"demos/material-you/bars/top","files":[{"name":"page.tsx","code":"import { BakaBar, BakaButton, BakaIcon, BakaText } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n <>\n \n \n menu\n \n \n Product\n \n \n account_circle\n \n \n \n );\n}\n"}]},{"name":"demos/material-you/button/filled","files":[{"name":"page.tsx","code":"import { BakaButton, BakaIcon } from \"baka-ui\";\n\nexport default function ButtonDemo() {\n return (\n <>\n
\n
\n Button\n \n Button\n \n \n Button\n \n \n Button\n \n \n Button\n \n
\n
\n Button\n \n add\n Button\n \n \n add\n Button\n \n \n add\n Button\n \n \n add\n Button\n \n
\n
\n \n );\n}\n"}]},{"name":"demos/material-you/button/stories","files":[{"name":"page.tsx","code":"import { BakaButton, BakaButtonProps } from \"baka-ui\";\n\nexport type ButtonStoryProps = BakaButtonProps & {\n children?: React.ReactNode;\n};\nexport const defaultProps: ButtonStoryProps = {\n hovered: false,\n focused: false,\n activated: false,\n disabled: false,\n children: \"Label\",\n};\n\nexport default function ButtonStory(props: ButtonStoryProps) {\n const { children, ...other } = { ...defaultProps, ...props };\n return {children};\n}\n"},{"name":"button.stories.tsx","code":"/// \n\nimport React from \"react\";\nimport type { BakaDesign } from \"baka-core\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport ButtonStory, { ButtonStoryProps, defaultProps } from \"./page\";\nimport { BakaIcon } from \"baka-ui\";\n\nconst variantOptions: BakaDesign[\"ButtonVariant\"][] = [\n \"filled\",\n \"outlined\",\n \"text\",\n \"elevated\",\n \"tonal\",\n];\n\nconst meta: Meta = {\n title: \"Material You/Button\",\n component: (props: ButtonStoryProps) => ,\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n variant: {\n control: \"radio\",\n options: variantOptions,\n },\n children: { table: { disable: true } },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\nexport const Basic: Story = {\n args: {\n variant: \"filled\",\n ...defaultProps,\n },\n};\n\nexport const IconButton: Story = {\n args: {\n toggleable: false,\n selected: false,\n variant: \"icon\",\n ...defaultProps,\n children: settings,\n },\n render: (props) => {\n const { toggleable, ...other } = props;\n\n return (\n \n );\n },\n argTypes: {\n variant: {\n control: \"radio\",\n mapping: {\n [\"icon\"]: \"icon\",\n [\"+ filled\"]: [\"icon\", \"filled\"],\n [\"+ tonal\"]: [\"icon\", \"tonal\"],\n [\"+ outlined\"]: [\"icon\", \"outlined\"],\n },\n options: [\"icon\", \"+ filled\", \"+ tonal\", \"+ outlined\"],\n },\n selected: { control: \"boolean\", if: { arg: \"toggleable\" } },\n toggleable: { control: \"boolean\" },\n },\n};\n\nexport const TextAndIcon: Story = {\n render: (props: ButtonStoryProps & { icon?: string }) => {\n const { icon, children, ...other } = props;\n\n return (\n \n {icon}\n {children}\n \n );\n },\n args: {\n icon: \"add\",\n variant: \"filled\",\n ...defaultProps,\n children: \"Label\",\n },\n};\n\nexport const FAB: Story = {\n render: ({ extended, ...props }) => {\n return (\n \n {props.children} {extended && \"Label\"}\n \n );\n },\n args: {\n variant: \"fab\",\n [\"variant (size)\"]: \"medium\",\n extended: false,\n ...defaultProps,\n children: mode_edit,\n },\n argTypes: {\n variant: {\n control: \"radio\",\n mapping: {\n [\"fab\"]: \"fab\",\n [\"+ primary\"]: [\"fab\", \"primary\"],\n [\"+ secondary\"]: [\"fab\", \"secondary\"],\n [\"+ tertiary\"]: [\"fab\", \"tertiary\"],\n },\n options: [\"fab\", \"+ primary\", \"+ secondary\", \"+ tertiary\"],\n },\n [\"variant (size)\"]: {\n control: \"radio\",\n options: [\"small\", \"medium\", \"large\"],\n },\n extended: { control: \"boolean\" },\n },\n};\n"}]},{"name":"demos/material-you/card/elevated","files":[{"name":"page.tsx","code":"import { BakaCard, BakaAvatar, BakaText, BakaButton, BakaIcon } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n \n \n
\n \n A\n \n \n Header\n Subhead\n \n
\n \n more_vert\n \n \n
\n \n
\n \n
\n Title\n Subhead\n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n \n
\n Enabled\n Enabled\n
\n \n \n );\n}\n"}]},{"name":"demos/material-you/card/filled","files":[{"name":"page.tsx","code":"import { BakaCard, BakaAvatar, BakaText, BakaButton, BakaIcon } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n \n \n
\n \n A\n \n \n Header\n Subhead\n \n
\n \n more_vert\n \n \n
\n \n
\n \n
\n Title\n Subhead\n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n \n
\n Enabled\n Enabled\n
\n \n \n );\n}\n"}]},{"name":"demos/material-you/card/horizontal","files":[{"name":"page.tsx","code":"import { BakaCard, BakaAvatar, BakaText } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n \n
\n \n A\n \n
\n Header\n Subhead\n
\n
\n\n \"media\"\n \n );\n}\n"}]},{"name":"demos/material-you/card/stories","files":[{"name":"page.tsx","code":"import { BakaAvatar, BakaButton, BakaCard, BakaCardProps, BakaIcon, BakaText } from \"baka-ui\";\n\nexport type CardStoryProps = BakaCardProps & {\n type: \"vertical\" | \"horizontal\";\n};\nexport const defaultProps: CardStoryProps = {\n type: \"vertical\",\n};\n\nexport default function CardStory(props: CardStoryProps) {\n const { type, ...other } = { ...defaultProps, ...props };\n\n switch (type) {\n case \"horizontal\":\n return (\n \n
\n \n A\n \n
\n Header\n Subhead\n
\n
\n\n \"media\"\n \n );\n case \"vertical\":\n default: {\n return (\n \n \n
\n \n A\n \n \n Header\n Subhead\n \n
\n \n more_vert\n \n \n
\n \n
\n \n
\n Title\n Subhead\n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\n \n \n Enabled\n Enabled\n \n \n \n );\n }\n }\n // return ;\n}\n"},{"name":"card.stories.tsx","code":"import React from \"react\";\nimport type { BakaDesign } from \"baka-core\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport CardStory, { CardStoryProps, defaultProps } from \"./page\";\n\nconst variantOptions: BakaDesign[\"CardVariant\"][] = [\"outlined\", \"elevated\", \"filled\"];\n\nconst meta: Meta = {\n title: \"Material You/Card\",\n component: (props: CardStoryProps) => ,\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n variant: {\n control: \"radio\",\n options: variantOptions,\n },\n type: { table: { disable: true } },\n children: { table: { disable: true } },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\nexport const Basic: Story = {\n args: {\n variant: \"outlined\",\n ...defaultProps,\n },\n};\n\nexport const Horizontal: Story = {\n args: {\n variant: \"outlined\",\n ...defaultProps,\n type: \"horizontal\",\n },\n};\n"}]},{"name":"demos/material-you/checkbox/stories","files":[{"name":"page.tsx","code":"import { BakaCheckbox, BakaCheckboxProps } from \"baka-ui\";\n\nexport type CheckboxStoryProps = BakaCheckboxProps & {};\n\nexport const defaultProps: CheckboxStoryProps = {\n variant: \"primary\",\n checked: true,\n indeterminate: false,\n hovered: false,\n focused: false,\n activated: false,\n disabled: false,\n};\n\nexport default function CheckboxStory(props: CheckboxStoryProps) {\n return ;\n}\n"},{"name":"checkbox.stories.tsx","code":"import React from \"react\";\nimport type { BakaDesign } from \"baka-core\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport CheckboxStory, { CheckboxStoryProps, defaultProps } from \"./page\";\n\nconst variantOptions: BakaDesign[\"CheckboxVariant\"][] = [\"primary\", \"error\"];\n\nconst meta: Meta = {\n title: \"Material You/Checkbox\",\n component: (props: CheckboxStoryProps) => ,\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n variant: {\n control: \"radio\",\n options: variantOptions,\n },\n children: { table: { disable: true } },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\nexport const Basic: Story = {\n args: {\n ...defaultProps,\n },\n argTypes: {\n variant: {\n control: \"radio\",\n map: {\n primary: null,\n error: \"error\",\n },\n options: [\"primary\", \"error\"],\n },\n indeterminate: {\n control: \"boolean\",\n if: { arg: \"checked\", neq: true },\n },\n },\n};\n"}]},{"name":"demos/material-you/chip/elevated","files":[{"name":"page.tsx","code":"import { BakaChip } from \"baka-ui\";\n\nexport default async function Chip() {\n return Label;\n}\n"}]},{"name":"demos/material-you/chip/leading-icon","files":[{"name":"page.tsx","code":"import { BakaChip, BakaIcon, BakaText } from \"baka-ui\";\n\nexport default async function Chip() {\n return (\n \n local_taxi\n Label\n \n );\n}\n"}]},{"name":"demos/material-you/chip/stories","files":[{"name":"page.tsx","code":"import { BakaAvatar, BakaChip, BakaChipProps, BakaIcon } from \"baka-ui\";\n\nexport type ChipStoryProps = BakaChipProps & {\n variant?: \"elevated\";\n leadingIcon?: boolean;\n trailingIcon?: boolean;\n avatar?: boolean;\n};\n\nexport const defaultProps: ChipStoryProps = {\n variant: \"normal\" as any,\n leadingIcon: false,\n trailingIcon: false,\n avatar: false,\n hovered: false,\n focused: false,\n activated: false,\n dragged: false,\n selected: false,\n};\n\nexport default function ChipStory(props: ChipStoryProps) {\n const { leadingIcon, trailingIcon, avatar, variant, ...other } = { ...defaultProps, ...props };\n\n return (\n \n {leadingIcon && local_taxi}\n {avatar && (\n \n {props.selected ? (\n check\n ) : (\n \n )}\n \n )}\n {!avatar && props.selected && (\n \n check\n \n )}\n Label\n {trailingIcon && close}\n \n );\n}\n"},{"name":"chip.stories.tsx","code":"import React from \"react\";\nimport type { BakaDesign } from \"baka-core\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport ChipStory, { ChipStoryProps, defaultProps } from \"./page\";\n\nconst variantOptions: (BakaDesign[\"ChipVariant\"] | \"normal\")[] = [\"normal\", \"elevated\"];\n\nconst meta: Meta = {\n title: \"Material You/Chip\",\n component: (props: ChipStoryProps) => ,\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n variant: {\n control: \"radio\",\n options: variantOptions,\n },\n children: { table: { disable: true } },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\nexport const Basic: Story = {\n args: {\n ...defaultProps,\n },\n argTypes: {\n variant: {\n control: \"radio\",\n mapping: {\n normal: undefined,\n elevated: \"elevated\",\n },\n defaultValue: undefined,\n options: variantOptions,\n },\n avatar: {\n if: { arg: \"leadingIcon\", eq: false },\n },\n },\n};\n"}]},{"name":"demos/material-you/chip/trailing-icon","files":[{"name":"page.tsx","code":"import { BakaChip, BakaIcon, BakaText } from \"baka-ui\";\n\nexport default async function Chip() {\n return (\n \n Label\n close\n \n );\n}\n"}]},{"name":"demos/material-you/design/color-system","files":[{"name":"page.tsx","code":"export default async function Page() {\n return (\n
\n {['primary', 'secondary', 'tertiary', 'error'].map((color) => (\n
\n {color}\n
\n ))}\n
\n )\n}"}]},{"name":"demos/material-you/dialog/full-screen","files":[{"name":"page.tsx","code":"import { BakaButton, BakaDialog, BakaIcon, BakaText } from \"baka-ui\";\n\nexport default function DialogDemo() {\n return (\n \n
\n mobile_friendly\n \n Dialog Title\n \n \n A dialog is a type of modal window that appears in front of app content to provide\n critical information, or prompt for a decision to be made.\n \n
\n
\n Action 2\n Action 1\n
\n \n );\n}\n"}]},{"name":"demos/material-you/dialog/stories","files":[{"name":"page.tsx","code":"import {\n BakaDialog,\n BakaIcon,\n BakaText,\n BakaListItem,\n BakaAvatar,\n BakaCheckbox,\n BakaButton,\n BakaDialogProps,\n} from \"baka-ui\";\n\nexport type DialogStoryProps = BakaDialogProps & {\n icon?: boolean;\n menu?: boolean;\n items?: boolean;\n itemsCount?: number;\n scrollable?: boolean;\n};\n\nexport const defaultProps: DialogStoryProps = {\n variant: \"basic\",\n icon: false,\n items: true,\n itemsCount: 3,\n};\n\nexport default function DialogStory(props: DialogStoryProps) {\n const args = { ...defaultProps, ...props };\n\n return (\n \n
\n {args.icon && mobile_friendly}\n \n Dialog Title\n \n \n A dialog is a type of modal window that appears in front of app content to provide\n critical information, or prompt for a decision to be made.\n \n
\n {args.items && (\n \n {new Array(args.itemsCount ?? 0).fill(null).map((_, index) => (\n \n A\n \n List item\n \n 100+\n \n \n ))}\n \n )}\n
\n Action 2\n Action 1\n
\n \n );\n}\n"},{"name":"dialog.stories.tsx","code":"import React from \"react\";\nimport type { BakaDesign } from \"baka-core\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport DialogStory, { DialogStoryProps, defaultProps } from \"./page\";\n\nconst variantOptions: BakaDesign[\"DialogVariant\"][] = [\"basic\", \"full-screen\"];\n\nconst meta: Meta = {\n title: \"Material You/Dialog\",\n component: (props: DialogStoryProps) => ,\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n variant: {\n control: \"radio\",\n options: variantOptions,\n },\n children: { table: { disable: true } },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\nexport const Basic: Story = {\n args: {\n ...defaultProps,\n itemsCount: 3,\n },\n argTypes: {\n variant: {\n control: \"radio\",\n defaultValue: undefined,\n options: variantOptions,\n },\n itemsCount: {\n control: {\n type: \"range\",\n min: 3,\n max: 5,\n },\n if: { arg: \"items\", eq: true },\n },\n },\n};\n"}]},{"name":"demos/material-you/divider/stories","files":[{"name":"page.tsx","code":"import { BakaDivider, BakaDividerProps } from \"baka-ui\";\n\nexport type DividerStoryProps = BakaDividerProps & {\n orientation?: \"horizontal\" | \"vertical\";\n};\n\nexport const defaultProps: DividerStoryProps = {\n orientation: \"horizontal\",\n};\n\nexport default function DividerStoryDemo(props: DividerStoryProps) {\n const args = { ...defaultProps, ...props };\n\n return args.orientation === \"horizontal\" ? (\n \n ) : (\n \n );\n}\n"},{"name":"divider.stories.tsx","code":"import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport DividerStory, { DividerStoryProps, defaultProps } from \"./page\";\n\nconst meta: Meta = {\n title: \"Material You/Divider\",\n component: (props: DividerStoryProps) => ,\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n children: { table: { disable: true } },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\nexport const Basic: Story = {\n args: {\n ...defaultProps,\n },\n argTypes: {\n orientation: {\n control: \"radio\",\n options: [\"horizontal\", \"vertical\"],\n },\n },\n};\n"}]},{"name":"demos/material-you/divider/vertical","files":[{"name":"page.tsx","code":"import { BakaDivider } from \"baka-ui\";\n\nexport default function DividerDemo() {\n return ;\n}\n"}]},{"name":"demos/material-you/navigation/bottom","files":[{"name":"page.tsx","code":"import { BakaBadge, BakaNavigation, BakaNavigationItem, BakaIcon, BakaText } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n \n \n fiber_manual_record\n \n \n fiber_manual_record\n \n\n \n \n fiber_manual_record\n \n \n \n \n );\n}\n"}]},{"name":"demos/material-you/navigation/rail","files":[{"name":"page.tsx","code":"import { BakaNavigation, BakaButton, BakaIcon, BakaNavigationItem, BakaText } from \"baka-ui\";\n\nexport default function Navigation() {\n return (\n \n \n \n menu\n \n {\n \n mode_edit\n \n }\n \n
\n \n fiber_manual_record\n Label\n \n \n fiber_manual_record\n \n \n fiber_manual_record\n \n \n fiber_manual_record\n \n
\n \n );\n}\n"}]},{"name":"demos/material-you/navigation/side","files":[{"name":"page.tsx","code":"import {\n BakaNavigation,\n BakaNavigationItem,\n BakaIcon,\n BakaText,\n BakaDivider,\n} from \"baka-ui\";\n\nexport default async function () {\n return (\n \n
\n Title\n
\n
\n Section header\n
\n \n fiber_manual_record\n Label\n 100+\n \n \n fiber_manual_record\n Label\n 100+\n \n \n fiber_manual_record\n Label\n 100+\n \n \n
\n Section header\n
\n \n fiber_manual_record\n Label\n \n \n fiber_manual_record\n Label\n \n \n fiber_manual_record\n Label\n \n \n );\n}\n"}]},{"name":"demos/material-you/navigation/stories","files":[{"name":"page.tsx","code":"import {\n BakaBadge,\n BakaButton,\n BakaDivider,\n BakaIcon,\n BakaNavigation,\n BakaNavigationItem,\n BakaNavigationProps,\n BakaText,\n} from \"baka-ui\";\n\nexport type NavigationStoryProps = BakaNavigationProps & {\n type: \"side\" | \"bottom\" | \"rail\";\n labels: boolean;\n items: number;\n icons: boolean;\n align: \"top\" | \"center\" | \"bottom\";\n};\nexport const defaultProps: NavigationStoryProps = {\n type: \"bottom\",\n labels: true,\n icons: true,\n items: 3,\n align: \"top\",\n};\nexport default function NavigationStory(props: NavigationStoryProps) {\n const { type, labels, items, icons, align, ...other } = props;\n\n switch (type) {\n case \"side\":\n return (\n \n
\n Title\n
\n
\n Section header\n
\n \n {icons ? fiber_manual_record : null}\n Label\n 100+\n \n \n {icons ? fiber_manual_record : null}\n Label\n 100+\n \n \n {icons ? fiber_manual_record : null}\n Label\n 100+\n \n \n
\n Section header\n
\n \n {icons ? fiber_manual_record : null}\n Label\n \n \n {icons ? fiber_manual_record : null}\n Label\n \n \n {icons ? fiber_manual_record : null}\n Label\n \n \n );\n case \"bottom\":\n default:\n return (\n \n \n fiber_manual_record\n {labels ? Label : null}\n \n {Array.from({ length: items - 2 }, (_, i) => (\n \n fiber_manual_record\n {labels ? Label : null}\n \n ))}\n \n \n fiber_manual_record\n {labels ? (\n \n 3\n \n ) : (\n \n )}\n \n {labels ? Label : null}\n \n \n );\n case \"rail\":\n return (\n \n \n \n menu\n \n {\n \n mode_edit\n \n }\n \n \n \n fiber_manual_record\n {labels ? BakaText : null}\n \n \n fiber_manual_record\n \n \n fiber_manual_record\n \n \n fiber_manual_record\n \n \n \n );\n }\n}\n"},{"name":"navigation.stories.tsx","code":"import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport NavigationStory, { NavigationStoryProps, defaultProps } from \"./page\";\n\nconst meta: Meta = {\n title: \"Material You/Navigation\",\n component: (props: NavigationStoryProps) => ,\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n type: { table: { disable: true } },\n children: { table: { disable: true } },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\nexport const Bottom: Story = {\n args: {\n labels: true,\n items: 3,\n type: \"bottom\",\n },\n argTypes: {\n items: {\n control: {\n type: \"range\",\n min: 3,\n max: 5,\n },\n if: { arg: \"type\", eq: \"bottom\" },\n },\n labels: {\n control: \"boolean\",\n if: { arg: \"type\", eq: \"bottom\" },\n },\n },\n};\n\nexport const Side: Story = {\n args: {\n type: \"side\",\n icons: true,\n },\n argTypes: {\n icons: {\n control: \"boolean\",\n },\n },\n};\n\nexport const Rail: Story = {\n args: {\n type: \"rail\",\n labels: true,\n align: \"top\",\n },\n argTypes: {\n labels: {\n control: \"boolean\",\n },\n align: {\n control: \"radio\",\n options: [\"top\", \"center\", \"bottom\"],\n if: { arg: \"type\", eq: \"rail\" },\n },\n },\n};\n"}]},{"name":"demos/material-you/text-field/filled","files":[{"name":"page.tsx","code":"import { BakaTextField, BakaIcon, BakaText, BakaInput, BakaButton } from \"baka-ui\";\n\nexport default function FilledTextFieldDemo() {\n return (\n
\n \n search\n Label\n \n \n clear\n \n \n \n search\n Label\n \n \n clear\n \n \n \n search\n Label\n \n \n clear\n \n \n \n search\n Label\n \n \n clear\n \n \n \n search\n Label\n \n \n clear\n \n \n
\n );\n}\n"}]},{"name":"demos/material-you/text-field/outlined","files":[{"name":"page.tsx","code":"import { BakaTextField, BakaIcon, BakaText, BakaInput, BakaButton } from \"baka-ui\";\n\nexport default function FilledTextFieldDemo() {\n return (\n
\n \n search\n Label\n \n \n clear\n \n \n \n search\n Label\n \n \n clear\n \n \n \n search\n Label\n \n \n clear\n \n \n \n search\n Label\n \n \n clear\n \n \n
\n );\n}\n"}]},{"name":"demos/material-you/text-field/stories","files":[{"name":"page.tsx","code":"import {\n BakaButton,\n BakaIcon,\n BakaInput,\n BakaText,\n BakaTextField,\n BakaTextFieldProps,\n} from \"baka-ui\";\n\nexport type TextFieldStoryProps = BakaTextFieldProps & {\n value: string;\n placeholder: boolean;\n label: boolean;\n leadingIcon: boolean;\n trailingIcon: boolean;\n state: \"\" | \"hovered\" | \"focused\" | \"invalid\" | \"disabled\";\n};\nexport const defaultProps = {\n value: \"\",\n placeholder: true,\n label: true,\n leadingIcon: true,\n trailingIcon: true,\n state: \"\",\n};\n\nexport default function TextFieldStory(props: TextFieldStoryProps) {\n const { value, placeholder, label, leadingIcon, trailingIcon, state, ...other } = props;\n\n return (\n \n {leadingIcon && search}\n {label && Label}\n \n {trailingIcon &&\n (state === \"invalid\" ? (\n \n error\n \n ) : (\n \n cancel\n \n ))}\n \n );\n}\n"},{"name":"text-field.stories.tsx","code":"/// \n\nimport React from \"react\";\nimport type { BakaDesign } from \"baka-core\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport TextFieldStory, { TextFieldStoryProps, defaultProps } from \"./page\";\n\nconst variantOptions: BakaDesign[\"TextFieldVariant\"][] = [\"filled\", \"outlined\"];\n\nconst meta: Meta = {\n title: \"Material You/TextField\",\n component: (props: TextFieldStoryProps) => ,\n parameters: {\n layout: \"centered\",\n },\n argTypes: {\n variant: {\n control: \"radio\",\n options: variantOptions,\n },\n children: { table: { disable: true } },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\nexport const Basic: Story = {\n args: {\n variant: \"filled\",\n state: \"\",\n value: defaultProps.value,\n placeholder: defaultProps.placeholder,\n label: defaultProps.label,\n leadingIcon: defaultProps.leadingIcon,\n trailingIcon: defaultProps.trailingIcon,\n },\n argTypes: {\n value: {\n control: \"text\",\n },\n state: {\n control: \"radio\",\n map: {\n idle: \"\",\n hovered: \"hovered\",\n focused: \"focused\",\n invalid: \"invalid\",\n disabled: \"disabled\",\n },\n options: [\"\", \"hovered\", \"focused\", \"invalid\", \"disabled\"],\n },\n variant: {\n control: \"radio\",\n options: [\"filled\", \"outlined\"],\n },\n },\n};\n"}]},{"name":"demos/material-you/bars/top/elevated","files":[{"name":"page.tsx","code":"import { BakaButton, BakaBar, BakaIcon, BakaText } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n \n
\n
\n \n arrow_back\n \n
\n \n attach_file\n \n \n today\n \n \n more_vert\n \n
\n
\n \n Title\n \n
\n \n );\n}\n"}]},{"name":"demos/material-you/bars/top/large","files":[{"name":"page.tsx","code":"import { BakaButton, BakaBar, BakaIcon, BakaText } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n \n
\n
\n \n arrow_back\n \n
\n \n attach_file\n \n \n today\n \n \n more_vert\n \n
\n
\n \n Title\n \n
\n \n );\n}\n"}]},{"name":"demos/material-you/bars/top/medium","files":[{"name":"page.tsx","code":"import { BakaButton, BakaBar, BakaIcon, BakaText } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n \n
\n
\n \n arrow_back\n \n
\n \n attach_file\n \n \n today\n \n \n more_vert\n \n
\n
\n \n Title\n \n
\n \n );\n}\n"}]},{"name":"demos/material-you/navigation/bottom/labels","files":[{"name":"page.tsx","code":"import { BakaBadge, BakaNavigation, BakaNavigationItem, BakaIcon, BakaText } from \"baka-ui\";\n\nexport default async function Demo() {\n return (\n \n \n fiber_manual_record\n {true ? BakaText : null}\n \n \n fiber_manual_record\n {true ? BakaText : null}\n \n\n \n \n fiber_manual_record\n {true ? (\n \n 3\n \n ) : (\n \n )}\n \n {true ? BakaText : null}\n \n \n );\n}\n"}]}] \ No newline at end of file diff --git a/apps/docs/src/app/demos/material-you/divider/page.tsx b/apps/docs/src/app/demos/material-you/divider/page.tsx new file mode 100644 index 0000000..f96a823 --- /dev/null +++ b/apps/docs/src/app/demos/material-you/divider/page.tsx @@ -0,0 +1,5 @@ +import { BakaDivider } from "baka-ui"; + +export default function DividerDemo() { + return ; +} diff --git a/apps/docs/src/app/demos/material-you/divider/stories/divider.stories.tsx b/apps/docs/src/app/demos/material-you/divider/stories/divider.stories.tsx new file mode 100644 index 0000000..586648b --- /dev/null +++ b/apps/docs/src/app/demos/material-you/divider/stories/divider.stories.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import type { Meta, StoryObj } from "@storybook/react"; +import DividerStory, { DividerStoryProps, defaultProps } from "./page"; + +const meta: Meta = { + title: "Material You/Divider", + component: (props: DividerStoryProps) => , + parameters: { + layout: "centered", + }, + argTypes: { + children: { table: { disable: true } }, + }, +}; + +export default meta; + +type Story = StoryObj; +export const Basic: Story = { + args: { + ...defaultProps, + }, + argTypes: { + orientation: { + control: "radio", + options: ["horizontal", "vertical"], + }, + }, +}; diff --git a/apps/docs/src/app/demos/material-you/divider/stories/page.tsx b/apps/docs/src/app/demos/material-you/divider/stories/page.tsx new file mode 100644 index 0000000..b01020d --- /dev/null +++ b/apps/docs/src/app/demos/material-you/divider/stories/page.tsx @@ -0,0 +1,19 @@ +import { BakaDivider, BakaDividerProps } from "baka-ui"; + +export type DividerStoryProps = BakaDividerProps & { + orientation?: "horizontal" | "vertical"; +}; + +export const defaultProps: DividerStoryProps = { + orientation: "horizontal", +}; + +export default function DividerStoryDemo(props: DividerStoryProps) { + const args = { ...defaultProps, ...props }; + + return args.orientation === "horizontal" ? ( + + ) : ( + + ); +} diff --git a/apps/docs/src/app/demos/material-you/divider/vertical/page.tsx b/apps/docs/src/app/demos/material-you/divider/vertical/page.tsx new file mode 100644 index 0000000..3c56808 --- /dev/null +++ b/apps/docs/src/app/demos/material-you/divider/vertical/page.tsx @@ -0,0 +1,5 @@ +import { BakaDivider } from "baka-ui"; + +export default function DividerDemo() { + return ; +}