@health-samurai/react-components 0.0.0-alpha.2 → 0.0.0-alpha.21

package/dist/src/shadcn/components/ui/tabs.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/shadcn/components/ui/tabs.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { action } from \"storybook/internal/actions\";\nimport { Button } from \"#shadcn/components/ui/button\";\nimport {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardFooter,\n\tCardHeader,\n\tCardTitle,\n} from \"#shadcn/components/ui/card\";\nimport { Input } from \"#shadcn/components/ui/input\";\nimport { Label } from \"#shadcn/components/ui/label\";\nimport {\n\tTabs,\n\tTabsAddButton,\n\tTabsContent,\n\tTabsList,\n\tTabsTrigger,\n} from \"#shadcn/components/ui/tabs\";\n\nconst meta = {\n\ttitle: \"Component/Tabs\",\n\targTypes: {\n\t\tvariant: {\n\t\t\toptions: [\"button\", \"dashed\"],\n\t\t\tcontrol: { type: \"select\" },\n\t\t},\n\t},\n} satisfies Meta;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Demo = {\n\trender: (props) => (\n\t\t<div className=\"flex w-full max-w-sm flex-col gap-6\">\n\t\t\t<Tabs defaultValue=\"account\" {...props}>\n\t\t\t\t<TabsList>\n\t\t\t\t\t<TabsTrigger value=\"account\">Account</TabsTrigger>\n\t\t\t\t\t<TabsTrigger value=\"password\">Password</TabsTrigger>\n\t\t\t\t</TabsList>\n\t\t\t\t<TabsContent value=\"account\">\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t<CardTitle>Account</CardTitle>\n\t\t\t\t\t\t\t<CardDescription>\n\t\t\t\t\t\t\t\tMake changes to your account here. Click save when you&apos;re\n\t\t\t\t\t\t\t\tdone.\n\t\t\t\t\t\t\t</CardDescription>\n\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t<CardContent className=\"grid gap-6\">\n\t\t\t\t\t\t\t<div className=\"grid gap-3\">\n\t\t\t\t\t\t\t\t<Label htmlFor=\"tabs-demo-name\">Name</Label>\n\t\t\t\t\t\t\t\t<Input id=\"tabs-demo-name\" defaultValue=\"Pedro Duarte\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"grid gap-3\">\n\t\t\t\t\t\t\t\t<Label htmlFor=\"tabs-demo-username\">Username</Label>\n\t\t\t\t\t\t\t\t<Input id=\"tabs-demo-username\" defaultValue=\"@peduarte\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t<CardFooter>\n\t\t\t\t\t\t\t<Button>Save changes</Button>\n\t\t\t\t\t\t</CardFooter>\n\t\t\t\t\t</Card>\n\t\t\t\t</TabsContent>\n\t\t\t\t<TabsContent value=\"password\">\n\t\t\t\t\t<Card>\n\t\t\t\t\t\t<CardHeader>\n\t\t\t\t\t\t\t<CardTitle>Password</CardTitle>\n\t\t\t\t\t\t\t<CardDescription>\n\t\t\t\t\t\t\t\tChange your password here. After saving, you&apos;ll be logged\n\t\t\t\t\t\t\t\tout.\n\t\t\t\t\t\t\t</CardDescription>\n\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t<CardContent className=\"grid gap-6\">\n\t\t\t\t\t\t\t<div className=\"grid gap-3\">\n\t\t\t\t\t\t\t\t<Label htmlFor=\"tabs-demo-current\">Current password</Label>\n\t\t\t\t\t\t\t\t<Input id=\"tabs-demo-current\" type=\"password\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"grid gap-3\">\n\t\t\t\t\t\t\t\t<Label htmlFor=\"tabs-demo-new\">New password</Label>\n\t\t\t\t\t\t\t\t<Input id=\"tabs-demo-new\" type=\"password\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</CardContent>\n\t\t\t\t\t\t<CardFooter>\n\t\t\t\t\t\t\t<Button>Save password</Button>\n\t\t\t\t\t\t</CardFooter>\n\t\t\t\t\t</Card>\n\t\t\t\t</TabsContent>\n\t\t\t</Tabs>\n\t\t</div>\n\t),\n} satisfies Story;\n\nfunction BrowserTabOnClose(value: string) {\n\taction(\"onClose\")(value);\n}\n\nfunction BrowserTabOnClick() {\n\taction(\"onClick\")();\n}\n\nfunction BrowserTabOnAdd() {\n\taction(\"onAdd\")();\n}\n\nexport const Browser = {\n\tparameters: {\n\t\tlayout: \"fullscreen\",\n\t},\n\trender: () => (\n\t\t<Tabs defaultValue=\"first\" variant=\"browser\">\n\t\t\t<TabsList>\n\t\t\t\t<TabsTrigger\n\t\t\t\t\tvalue=\"first\"\n\t\t\t\t\tonClick={BrowserTabOnClick}\n\t\t\t\t\tonClose={BrowserTabOnClose}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"flex items-center gap-1\">\n\t\t\t\t\t\t<span className=\"text-utility-green\">GET</span>\n\t\t\t\t\t\t<span>/fhir/Patient</span>\n\t\t\t\t\t</span>\n\t\t\t\t</TabsTrigger>\n\t\t\t\t<TabsTrigger\n\t\t\t\t\tvalue=\"second\"\n\t\t\t\t\tonClick={BrowserTabOnClick}\n\t\t\t\t\tonClose={BrowserTabOnClose}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"flex items-center gap-1\">\n\t\t\t\t\t\t<span className=\"text-utility-yellow\">POST</span>\n\t\t\t\t\t\t<span>/fhir</span>\n\t\t\t\t\t</span>\n\t\t\t\t</TabsTrigger>\n\t\t\t\t<TabsTrigger\n\t\t\t\t\tvalue=\"third\"\n\t\t\t\t\tonClick={BrowserTabOnClick}\n\t\t\t\t\tonClose={BrowserTabOnClose}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"flex items-center gap-1\">\n\t\t\t\t\t\t<span className=\"text-utility-yellow\">POST</span>\n\t\t\t\t\t\t<span>/$graphql</span>\n\t\t\t\t\t</span>\n\t\t\t\t</TabsTrigger>\n\t\t\t</TabsList>\n\t\t\t<TabsAddButton onClick={BrowserTabOnAdd} />\n\t\t</Tabs>\n\t),\n} satisfies Story;\n"],"names":["action","Button","Card","CardContent","CardDescription","CardFooter","CardHeader","CardTitle","Input","Label","Tabs","TabsAddButton","TabsContent","TabsList","TabsTrigger","meta","title","argTypes","variant","options","control","type","Demo","render","props","div","className","defaultValue","value","htmlFor","id","BrowserTabOnClose","BrowserTabOnClick","BrowserTabOnAdd","Browser","parameters","layout","onClick","onClose","span"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/tabs.stories.tsx"],"sourcesContent":["import { Controls, Primary, Title } from \"@storybook/addon-docs/blocks\";\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { action } from \"storybook/actions\";\nimport {\n\tTabs,\n\tTabsAddButton,\n\tTabsContent,\n\tTabsList,\n\tTabsListDropdown,\n\tTabsTrigger,\n} from \"#shadcn/components/ui/tabs\";\n\ninterface TabsWrapperProps {\n\tvariant?: \"default\" | \"browser\" | \"secondary\" | \"tertiary\";\n}\n\nfunction TabsWrapper({ variant = \"default\" }: TabsWrapperProps) {\n\tif (variant === \"browser\") {\n\t\treturn (\n\t\t\t<Tabs defaultValue=\"first\" variant=\"browser\">\n\t\t\t\t<TabsList>\n\t\t\t\t\t<TabsTrigger\n\t\t\t\t\t\tvalue=\"first\"\n\t\t\t\t\t\tonClick={() => action(\"onClick\")()}\n\t\t\t\t\t\tonClose={(v) => action(\"onClose\")(v)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"flex items-center gap-1\">\n\t\t\t\t\t\t\t<span className=\"text-utility-green\">GET</span>\n\t\t\t\t\t\t\t<span>/fhir/Patient</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</TabsTrigger>\n\t\t\t\t\t<TabsTrigger\n\t\t\t\t\t\tvalue=\"second\"\n\t\t\t\t\t\tonClick={() => action(\"onClick\")()}\n\t\t\t\t\t\tonClose={(v) => action(\"onClose\")(v)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"flex items-center gap-1\">\n\t\t\t\t\t\t\t<span className=\"text-utility-yellow\">POST</span>\n\t\t\t\t\t\t\t<span>/fhir</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</TabsTrigger>\n\t\t\t\t</TabsList>\n\t\t\t\t<TabsAddButton onClick={() => action(\"onAdd\")()} />\n\t\t\t\t<TabsContent value=\"first\">\n\t\t\t\t\t<div className=\"p-4\">GET /fhir/Patient content</div>\n\t\t\t\t</TabsContent>\n\t\t\t\t<TabsContent value=\"second\">\n\t\t\t\t\t<div className=\"p-4\">POST /fhir content</div>\n\t\t\t\t</TabsContent>\n\t\t\t</Tabs>\n\t\t);\n\t}\n\n\tif (variant === \"secondary\") {\n\t\treturn (\n\t\t\t<Tabs defaultValue=\"tab1\" variant=\"secondary\">\n\t\t\t\t<TabsList>\n\t\t\t\t\t<TabsTrigger value=\"tab1\">Tab 1</TabsTrigger>\n\t\t\t\t\t<TabsTrigger value=\"tab2\">Tab 2</TabsTrigger>\n\t\t\t\t\t<TabsTrigger value=\"tab3\">Tab 3</TabsTrigger>\n\t\t\t\t</TabsList>\n\t\t\t\t<TabsContent value=\"tab1\">\n\t\t\t\t\t<div className=\"p-4\">Tab 1 content</div>\n\t\t\t\t</TabsContent>\n\t\t\t\t<TabsContent value=\"tab2\">\n\t\t\t\t\t<div className=\"p-4\">Tab 2 content</div>\n\t\t\t\t</TabsContent>\n\t\t\t\t<TabsContent value=\"tab3\">\n\t\t\t\t\t<div className=\"p-4\">Tab 3 content</div>\n\t\t\t\t</TabsContent>\n\t\t\t</Tabs>\n\t\t);\n\t}\n\n\tif (variant === \"tertiary\") {\n\t\treturn (\n\t\t\t<Tabs defaultValue=\"tab1\" variant=\"tertiary\">\n\t\t\t\t<TabsList>\n\t\t\t\t\t<TabsTrigger value=\"tab1\">Tab 1</TabsTrigger>\n\t\t\t\t\t<TabsTrigger value=\"tab2\">Tab 2</TabsTrigger>\n\t\t\t\t\t<TabsTrigger value=\"tab3\">Tab 3</TabsTrigger>\n\t\t\t\t</TabsList>\n\t\t\t\t<TabsContent value=\"tab1\">\n\t\t\t\t\t<div className=\"p-4\">Tab 1 content</div>\n\t\t\t\t</TabsContent>\n\t\t\t\t<TabsContent value=\"tab2\">\n\t\t\t\t\t<div className=\"p-4\">Tab 2 content</div>\n\t\t\t\t</TabsContent>\n\t\t\t\t<TabsContent value=\"tab3\">\n\t\t\t\t\t<div className=\"p-4\">Tab 3 content</div>\n\t\t\t\t</TabsContent>\n\t\t\t</Tabs>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Tabs defaultValue=\"tab1\">\n\t\t\t<TabsList>\n\t\t\t\t<TabsTrigger value=\"tab1\">Tab 1</TabsTrigger>\n\t\t\t\t<TabsTrigger value=\"tab2\">Tab 2</TabsTrigger>\n\t\t\t\t<TabsTrigger value=\"tab3\">Tab 3</TabsTrigger>\n\t\t\t</TabsList>\n\t\t\t<TabsContent value=\"tab1\">\n\t\t\t\t<div className=\"p-4\">Tab 1 content</div>\n\t\t\t</TabsContent>\n\t\t\t<TabsContent value=\"tab2\">\n\t\t\t\t<div className=\"p-4\">Tab 2 content</div>\n\t\t\t</TabsContent>\n\t\t\t<TabsContent value=\"tab3\">\n\t\t\t\t<div className=\"p-4\">Tab 3 content</div>\n\t\t\t</TabsContent>\n\t\t</Tabs>\n\t);\n}\n\nconst meta = {\n\ttitle: \"Component/Tabs\",\n\tcomponent: TabsWrapper,\n\tparameters: {\n\t\tdocs: {\n\t\t\tpage: () => (\n\t\t\t\t<>\n\t\t\t\t\t<Title />\n\t\t\t\t\t<Primary />\n\t\t\t\t\t<Controls />\n\t\t\t\t</>\n\t\t\t),\n\t\t},\n\t},\n\targTypes: {\n\t\tvariant: {\n\t\t\tcontrol: \"select\",\n\t\t\toptions: [\"default\", \"browser\", \"secondary\", \"tertiary\"],\n\t\t},\n\t},\n\targs: {\n\t\tvariant: \"default\",\n\t},\n} satisfies Meta<typeof TabsWrapper>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default = {\n\ttags: [\"!dev\"],\n\trender: ({ variant = \"default\" }) => <TabsWrapper variant={variant} />,\n} satisfies Story;\n\nexport const Demo = {\n\ttags: [\"!autodocs\"],\n\trender: () => (\n\t\t<div className=\"space-y-8\">\n\t\t\t{/* Default variant */}\n\t\t\t<div>\n\t\t\t\t<h3 className=\"typo-label mb-4\">Default</h3>\n\t\t\t\t<Tabs defaultValue=\"tab1\">\n\t\t\t\t\t<TabsList>\n\t\t\t\t\t\t<TabsTrigger value=\"tab1\">Tab 1</TabsTrigger>\n\t\t\t\t\t\t<TabsTrigger value=\"tab2\">Tab 2</TabsTrigger>\n\t\t\t\t\t\t<TabsTrigger value=\"tab3\">Tab 3</TabsTrigger>\n\t\t\t\t\t</TabsList>\n\t\t\t\t</Tabs>\n\t\t\t</div>\n\n\t\t\t{/* Secondary variant */}\n\t\t\t<div>\n\t\t\t\t<h3 className=\"typo-label mb-4\">Secondary</h3>\n\t\t\t\t<Tabs defaultValue=\"tab1\" variant=\"secondary\">\n\t\t\t\t\t<TabsList>\n\t\t\t\t\t\t<TabsTrigger value=\"tab1\">Tab 1</TabsTrigger>\n\t\t\t\t\t\t<TabsTrigger value=\"tab2\">Tab 2</TabsTrigger>\n\t\t\t\t\t\t<TabsTrigger value=\"tab3\">Tab 3</TabsTrigger>\n\t\t\t\t\t</TabsList>\n\t\t\t\t</Tabs>\n\t\t\t</div>\n\n\t\t\t{/* Tertiary variant */}\n\t\t\t<div>\n\t\t\t\t<h3 className=\"typo-label mb-4\">Tertiary</h3>\n\t\t\t\t<Tabs defaultValue=\"tab1\" variant=\"tertiary\">\n\t\t\t\t\t<TabsList>\n\t\t\t\t\t\t<TabsTrigger value=\"tab1\">Tab 1</TabsTrigger>\n\t\t\t\t\t\t<TabsTrigger value=\"tab2\">Tab 2</TabsTrigger>\n\t\t\t\t\t\t<TabsTrigger value=\"tab3\">Tab 3</TabsTrigger>\n\t\t\t\t\t</TabsList>\n\t\t\t\t</Tabs>\n\t\t\t</div>\n\n\t\t\t{/* Browser variant */}\n\t\t\t<div>\n\t\t\t\t<h3 className=\"typo-label mb-4\">Browser</h3>\n\t\t\t\t<Tabs defaultValue=\"first\" variant=\"browser\">\n\t\t\t\t\t<TabsList>\n\t\t\t\t\t\t<TabsTrigger\n\t\t\t\t\t\t\tvalue=\"first\"\n\t\t\t\t\t\t\tonClick={() => action(\"onClick\")()}\n\t\t\t\t\t\t\tonClose={(v) => action(\"onClose\")(v)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span className=\"flex items-center gap-1\">\n\t\t\t\t\t\t\t\t<span className=\"text-utility-green\">GET</span>\n\t\t\t\t\t\t\t\t<span>/fhir/Patient</span>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</TabsTrigger>\n\t\t\t\t\t\t<TabsTrigger\n\t\t\t\t\t\t\tvalue=\"second\"\n\t\t\t\t\t\t\tonClick={() => action(\"onClick\")()}\n\t\t\t\t\t\t\tonClose={(v) => action(\"onClose\")(v)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span className=\"flex items-center gap-1\">\n\t\t\t\t\t\t\t\t<span className=\"text-utility-yellow\">POST</span>\n\t\t\t\t\t\t\t\t<span>/fhir</span>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</TabsTrigger>\n\t\t\t\t\t\t<TabsTrigger\n\t\t\t\t\t\t\tvalue=\"third\"\n\t\t\t\t\t\t\tonClick={() => action(\"onClick\")()}\n\t\t\t\t\t\t\tonClose={(v) => action(\"onClose\")(v)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span className=\"flex items-center gap-1\">\n\t\t\t\t\t\t\t\t<span className=\"text-utility-yellow\">POST</span>\n\t\t\t\t\t\t\t\t<span>/$graphql</span>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</TabsTrigger>\n\t\t\t\t\t</TabsList>\n\t\t\t\t\t<TabsAddButton onClick={() => action(\"onAdd\")()} />\n\t\t\t\t\t<TabsListDropdown\n\t\t\t\t\t\ttabs={[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: \"first\",\n\t\t\t\t\t\t\t\tcontent: (\n\t\t\t\t\t\t\t\t\t<span className=\"flex items-center gap-1\">\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-utility-green\">GET</span>\n\t\t\t\t\t\t\t\t\t\t<span>/fhir/Patient</span>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: \"second\",\n\t\t\t\t\t\t\t\tcontent: (\n\t\t\t\t\t\t\t\t\t<span className=\"flex items-center gap-1\">\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-utility-yellow\">POST</span>\n\t\t\t\t\t\t\t\t\t\t<span>/fhir</span>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: \"third\",\n\t\t\t\t\t\t\t\tcontent: (\n\t\t\t\t\t\t\t\t\t<span className=\"flex items-center gap-1\">\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-utility-yellow\">POST</span>\n\t\t\t\t\t\t\t\t\t\t<span>/$graphql</span>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t]}\n\t\t\t\t\t/>\n\t\t\t\t</Tabs>\n\t\t\t</div>\n\t\t</div>\n\t),\n} satisfies Story;\n"],"names":["Controls","Primary","Title","action","Tabs","TabsAddButton","TabsContent","TabsList","TabsListDropdown","TabsTrigger","TabsWrapper","variant","defaultValue","value","onClick","onClose","v","span","className","div","meta","title","component","parameters","docs","page","argTypes","control","options","args","Default","tags","render","Demo","h3","tabs","id","content"],"mappings":"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"}

package/dist/src/shadcn/components/ui/textarea.d.ts

@@ -1,4 +1,11 @@
+import { type VariantProps } from "class-variance-authority";
 import type * as React from "react";
-declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
+declare const textareaVariants: (props?: ({
+    invalid?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface TextareaProps extends React.ComponentProps<"textarea">, VariantProps<typeof textareaVariants> {
+    invalid?: boolean;
+}
+declare function Textarea({ className, invalid, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
 export { Textarea };
 //# sourceMappingURL=textarea.d.ts.map

package/dist/src/shadcn/components/ui/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,2CAW1E;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,QAAA,MAAM,gBAAgB;;8EA0DrB,CAAC;AAEF,UAAU,aACT,SAAQ,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,EACvC,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAShE;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/src/shadcn/components/ui/textarea.js

@@ -1,9 +1,37 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
-function Textarea({ className, ...props }) {
+const textareaVariants = cva(cn(// Layout
+"flex", "w-full", "min-h-16", "field-sizing-content", // Shape
+"rounded-md", // Borders
+"border", "border-border-primary", // Background & Colors
+"bg-transparent", "text-base", // Spacing
+"px-3", "py-2", // Typography
+"md:text-sm", // Placeholder
+"placeholder:text-text-tertiary", // Transitions
+"transition-all", "duration-300", "outline-none", // Hover
+"hover:border-border-primary_hover", // Focus
+"focus-visible:border-border-link", // Disabled
+"disabled:cursor-not-allowed", "disabled:bg-bg-secondary", "disabled:border-border-primary", "disabled:text-text-disabled", "disabled:placeholder:text-text-disabled"), {
+    variants: {
+        invalid: {
+            true: cn(// Invalid border colors
+            "border-border-error", "hover:border-border-error_inverse", // Invalid focus states
+            "focus-visible:ring-4", "focus-visible:ring-ring-red", "focus-visible:border-border-error", // Transitions
+            "transition-all", "duration-300")
+        }
+    },
+    defaultVariants: {
+        invalid: false
+    }
+});
+function Textarea({ className, invalid, ...props }) {
     return /*#__PURE__*/ _jsx("textarea", {
         "data-slot": "textarea",
-        className: cn("border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className),
+        className: cn(textareaVariants({
+            invalid
+        }), className),
+        "aria-invalid": invalid,
         ...props
     });
 }

package/dist/src/shadcn/components/ui/textarea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/shadcn/components/ui/textarea.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n\treturn (\n\t\t<textarea\n\t\t\tdata-slot=\"textarea\"\n\t\t\tclassName={cn(\n\t\t\t\t\"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Textarea };\n"],"names":["cn","Textarea","className","props","textarea","data-slot"],"mappings":";AAEA,SAASA,EAAE,QAAQ,qBAAoB;AAEvC,SAASC,SAAS,EAAEC,SAAS,EAAE,GAAGC,OAAyC;IAC1E,qBACC,KAACC;QACAC,aAAU;QACVH,WAAWF,GACV,ucACAE;QAEA,GAAGC,KAAK;;AAGZ;AAEA,SAASF,QAAQ,GAAG"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/textarea.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\nconst textareaVariants = cva(\n\tcn(\n\t\t// Layout\n\t\t\"flex\",\n\t\t\"w-full\",\n\t\t\"min-h-16\",\n\t\t\"field-sizing-content\",\n\t\t// Shape\n\t\t\"rounded-md\",\n\t\t// Borders\n\t\t\"border\",\n\t\t\"border-border-primary\",\n\t\t// Background & Colors\n\t\t\"bg-transparent\",\n\t\t\"text-base\",\n\t\t// Spacing\n\t\t\"px-3\",\n\t\t\"py-2\",\n\t\t// Typography\n\t\t\"md:text-sm\",\n\t\t// Placeholder\n\t\t\"placeholder:text-text-tertiary\",\n\t\t// Transitions\n\t\t\"transition-all\",\n\t\t\"duration-300\",\n\t\t\"outline-none\",\n\t\t// Hover\n\t\t\"hover:border-border-primary_hover\",\n\t\t// Focus\n\t\t\"focus-visible:border-border-link\",\n\t\t// Disabled\n\t\t\"disabled:cursor-not-allowed\",\n\t\t\"disabled:bg-bg-secondary\",\n\t\t\"disabled:border-border-primary\",\n\t\t\"disabled:text-text-disabled\",\n\t\t\"disabled:placeholder:text-text-disabled\",\n\t),\n\t{\n\t\tvariants: {\n\t\t\tinvalid: {\n\t\t\t\ttrue: cn(\n\t\t\t\t\t// Invalid border colors\n\t\t\t\t\t\"border-border-error\",\n\t\t\t\t\t\"hover:border-border-error_inverse\",\n\t\t\t\t\t// Invalid focus states\n\t\t\t\t\t\"focus-visible:ring-4\",\n\t\t\t\t\t\"focus-visible:ring-ring-red\",\n\t\t\t\t\t\"focus-visible:border-border-error\",\n\t\t\t\t\t// Transitions\n\t\t\t\t\t\"transition-all\",\n\t\t\t\t\t\"duration-300\",\n\t\t\t\t),\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tinvalid: false,\n\t\t},\n\t},\n);\n\ninterface TextareaProps\n\textends React.ComponentProps<\"textarea\">,\n\t\tVariantProps<typeof textareaVariants> {\n\tinvalid?: boolean;\n}\n\nfunction Textarea({ className, invalid, ...props }: TextareaProps) {\n\treturn (\n\t\t<textarea\n\t\t\tdata-slot=\"textarea\"\n\t\t\tclassName={cn(textareaVariants({ invalid }), className)}\n\t\t\taria-invalid={invalid}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Textarea };\n"],"names":["cva","cn","textareaVariants","variants","invalid","true","defaultVariants","Textarea","className","props","textarea","data-slot","aria-invalid"],"mappings":";AAAA,SAASA,GAAG,QAA2B,2BAA2B;AAGlE,SAASC,EAAE,QAAQ,qBAAoB;AAEvC,MAAMC,mBAAmBF,IACxBC,GACC,SAAS;AACT,QACA,UACA,YACA,wBACA,QAAQ;AACR,cACA,UAAU;AACV,UACA,yBACA,sBAAsB;AACtB,kBACA,aACA,UAAU;AACV,QACA,QACA,aAAa;AACb,cACA,cAAc;AACd,kCACA,cAAc;AACd,kBACA,gBACA,gBACA,QAAQ;AACR,qCACA,QAAQ;AACR,oCACA,WAAW;AACX,+BACA,4BACA,kCACA,+BACA,4CAED;IACCE,UAAU;QACTC,SAAS;YACRC,MAAMJ,GACL,wBAAwB;YACxB,uBACA,qCACA,uBAAuB;YACvB,wBACA,+BACA,qCACA,cAAc;YACd,kBACA;QAEF;IACD;IACAK,iBAAiB;QAChBF,SAAS;IACV;AACD;AASD,SAASG,SAAS,EAAEC,SAAS,EAAEJ,OAAO,EAAE,GAAGK,OAAsB;IAChE,qBACC,KAACC;QACAC,aAAU;QACVH,WAAWP,GAAGC,iBAAiB;YAAEE;QAAQ,IAAII;QAC7CI,gBAAcR;QACb,GAAGK,KAAK;;AAGZ;AAEA,SAASF,QAAQ,GAAG"}

package/dist/src/shadcn/components/ui/textarea.stories.js

@@ -1,12 +1,93 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
+import { Label } from "./label.js";
 import { Textarea } from "./textarea.js";
+function TextareaWithLabel({ label = "Description", description = "This is a hint text to help user.", invalid = false, disabled = false, placeholder = "Enter a description...", focused = false }) {
+    const descriptionColor = invalid ? "text-text-error-primary" : disabled ? "text-text-disabled" : "text-text-secondary";
+    return /*#__PURE__*/ _jsx("div", {
+        className: "flex w-full",
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "space-y-2 w-full",
+            children: [
+                /*#__PURE__*/ _jsx(Label, {
+                    children: label
+                }),
+                /*#__PURE__*/ _jsx(Textarea, {
+                    placeholder: placeholder,
+                    invalid: invalid,
+                    disabled: disabled,
+                    autoFocus: focused
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    className: `typo-body-xs ${descriptionColor}`,
+                    children: description
+                })
+            ]
+        })
+    });
+}
 const meta = {
-    title: "Component/Textarea"
+    title: "Component/Textarea",
+    component: Textarea,
+    parameters: {
+        docs: {
+            page: ()=>/*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Title, {}),
+                        /*#__PURE__*/ _jsx(Primary, {}),
+                        /*#__PURE__*/ _jsx(Controls, {})
+                    ]
+                })
+        }
+    },
+    argTypes: {
+        placeholder: {
+            control: "text"
+        },
+        invalid: {
+            control: "boolean"
+        },
+        disabled: {
+            control: "boolean"
+        }
+    },
+    args: {
+        placeholder: "Enter a description...",
+        invalid: false,
+        disabled: false
+    }
 };
 export default meta;
+export const Default = {
+    tags: [
+        "!dev"
+    ],
+    render: (args)=>/*#__PURE__*/ _jsx(Textarea, {
+            ...args
+        })
+};
 export const Demo = {
-    render: ()=>/*#__PURE__*/ _jsx(Textarea, {
-            placeholder: "Type your message here."
+    tags: [
+        "!autodocs"
+    ],
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "p-6 space-y-6",
+            children: [
+                /*#__PURE__*/ _jsx(TextareaWithLabel, {}),
+                /*#__PURE__*/ _jsx(TextareaWithLabel, {
+                    focused: true
+                }),
+                /*#__PURE__*/ _jsx(TextareaWithLabel, {
+                    disabled: true
+                }),
+                /*#__PURE__*/ _jsx(TextareaWithLabel, {
+                    invalid: true
+                }),
+                /*#__PURE__*/ _jsx(TextareaWithLabel, {
+                    invalid: true,
+                    focused: true
+                })
+            ]
         })
 };
 

package/dist/src/shadcn/components/ui/textarea.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/shadcn/components/ui/textarea.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { Textarea } from \"#shadcn/components/ui/textarea\";\n\nconst meta = {\n\ttitle: \"Component/Textarea\",\n} satisfies Meta;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Demo = {\n\trender: () => <Textarea placeholder=\"Type your message here.\" />,\n} satisfies Story;\n"],"names":["Textarea","meta","title","Demo","render","placeholder"],"mappings":";AACA,SAASA,QAAQ,QAAQ,gBAAiC;AAE1D,MAAMC,OAAO;IACZC,OAAO;AACR;AACA,eAAeD,KAAK;AAIpB,OAAO,MAAME,OAAO;IACnBC,QAAQ,kBAAM,KAACJ;YAASK,aAAY;;AACrC,EAAkB"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/textarea.stories.tsx"],"sourcesContent":["import { Controls, Primary, Title } from \"@storybook/addon-docs/blocks\";\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { Label } from \"#shadcn/components/ui/label\";\nimport { Textarea } from \"#shadcn/components/ui/textarea\";\n\ninterface TextareaWithLabelProps {\n\tlabel?: string;\n\tdescription?: string;\n\tinvalid?: boolean;\n\tdisabled?: boolean;\n\tplaceholder?: string;\n\tfocused?: boolean;\n}\n\nfunction TextareaWithLabel({\n\tlabel = \"Description\",\n\tdescription = \"This is a hint text to help user.\",\n\tinvalid = false,\n\tdisabled = false,\n\tplaceholder = \"Enter a description...\",\n\tfocused = false,\n}: TextareaWithLabelProps) {\n\tconst descriptionColor = invalid\n\t\t? \"text-text-error-primary\"\n\t\t: disabled\n\t\t\t? \"text-text-disabled\"\n\t\t\t: \"text-text-secondary\";\n\n\treturn (\n\t\t<div className=\"flex w-full\">\n\t\t\t<div className=\"space-y-2 w-full\">\n\t\t\t\t<Label>{label}</Label>\n\t\t\t\t<Textarea\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tinvalid={invalid}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tautoFocus={focused}\n\t\t\t\t/>\n\t\t\t\t<p className={`typo-body-xs ${descriptionColor}`}>{description}</p>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nconst meta = {\n\ttitle: \"Component/Textarea\",\n\tcomponent: Textarea,\n\tparameters: {\n\t\tdocs: {\n\t\t\tpage: () => (\n\t\t\t\t<>\n\t\t\t\t\t<Title />\n\t\t\t\t\t<Primary />\n\t\t\t\t\t<Controls />\n\t\t\t\t</>\n\t\t\t),\n\t\t},\n\t},\n\targTypes: {\n\t\tplaceholder: {\n\t\t\tcontrol: \"text\",\n\t\t},\n\t\tinvalid: {\n\t\t\tcontrol: \"boolean\",\n\t\t},\n\t\tdisabled: {\n\t\t\tcontrol: \"boolean\",\n\t\t},\n\t},\n\targs: {\n\t\tplaceholder: \"Enter a description...\",\n\t\tinvalid: false,\n\t\tdisabled: false,\n\t},\n} satisfies Meta<typeof Textarea>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default = {\n\ttags: [\"!dev\"],\n\trender: (args) => <Textarea {...args} />,\n} satisfies Story;\n\nexport const Demo = {\n\ttags: [\"!autodocs\"],\n\trender: () => (\n\t\t<div className=\"p-6 space-y-6\">\n\t\t\t{/* Default */}\n\t\t\t<TextareaWithLabel />\n\n\t\t\t{/* Focused */}\n\t\t\t<TextareaWithLabel focused />\n\n\t\t\t{/* Disabled */}\n\t\t\t<TextareaWithLabel disabled />\n\n\t\t\t{/* Error */}\n\t\t\t<TextareaWithLabel invalid />\n\n\t\t\t{/* Error + Focused */}\n\t\t\t<TextareaWithLabel invalid focused />\n\t\t</div>\n\t),\n} satisfies Story;\n"],"names":["Controls","Primary","Title","Label","Textarea","TextareaWithLabel","label","description","invalid","disabled","placeholder","focused","descriptionColor","div","className","autoFocus","p","meta","title","component","parameters","docs","page","argTypes","control","args","Default","tags","render","Demo"],"mappings":";AAAA,SAASA,QAAQ,EAAEC,OAAO,EAAEC,KAAK,QAAQ,+BAA+B;AAExE,SAASC,KAAK,QAAQ,aAA8B;AACpD,SAASC,QAAQ,QAAQ,gBAAiC;AAW1D,SAASC,kBAAkB,EAC1BC,QAAQ,aAAa,EACrBC,cAAc,mCAAmC,EACjDC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,cAAc,wBAAwB,EACtCC,UAAU,KAAK,EACS;IACxB,MAAMC,mBAAmBJ,UACtB,4BACAC,WACC,uBACA;IAEJ,qBACC,KAACI;QAAIC,WAAU;kBACd,cAAA,MAACD;YAAIC,WAAU;;8BACd,KAACX;8BAAOG;;8BACR,KAACF;oBACAM,aAAaA;oBACbF,SAASA;oBACTC,UAAUA;oBACVM,WAAWJ;;8BAEZ,KAACK;oBAAEF,WAAW,CAAC,aAAa,EAAEF,kBAAkB;8BAAGL;;;;;AAIvD;AAEA,MAAMU,OAAO;IACZC,OAAO;IACPC,WAAWf;IACXgB,YAAY;QACXC,MAAM;YACLC,MAAM,kBACL;;sCACC,KAACpB;sCACD,KAACD;sCACD,KAACD;;;QAGJ;IACD;IACAuB,UAAU;QACTb,aAAa;YACZc,SAAS;QACV;QACAhB,SAAS;YACRgB,SAAS;QACV;QACAf,UAAU;YACTe,SAAS;QACV;IACD;IACAC,MAAM;QACLf,aAAa;QACbF,SAAS;QACTC,UAAU;IACX;AACD;AACA,eAAeQ,KAAK;AAIpB,OAAO,MAAMS,UAAU;IACtBC,MAAM;QAAC;KAAO;IACdC,QAAQ,CAACH,qBAAS,KAACrB;YAAU,GAAGqB,IAAI;;AACrC,EAAkB;AAElB,OAAO,MAAMI,OAAO;IACnBF,MAAM;QAAC;KAAY;IACnBC,QAAQ,kBACP,MAACf;YAAIC,WAAU;;8BAEd,KAACT;8BAGD,KAACA;oBAAkBM,OAAO;;8BAG1B,KAACN;oBAAkBI,QAAQ;;8BAG3B,KAACJ;oBAAkBG,OAAO;;8BAG1B,KAACH;oBAAkBG,OAAO;oBAACG,OAAO;;;;AAGrC,EAAkB"}

package/dist/src/shadcn/components/ui/toggle-group.d.ts

@@ -1,8 +1,8 @@
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import type { VariantProps } from "class-variance-authority";
 import * as React from "react";
-import { toggleVariants } from "#shadcn/components/ui/toggle";
-declare function ToggleGroup({ className, variant, size, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
-declare function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
+import { toggleVariants } from "../../components/ui/toggle";
+declare function ToggleGroup({ className, variant, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
+declare function ToggleGroupItem({ className, children, variant, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
 export { ToggleGroup, ToggleGroupItem };
 //# sourceMappingURL=toggle-group.d.ts.map

package/dist/src/shadcn/components/ui/toggle-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/toggle-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AACrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAU9D,iBAAS,WAAW,CAAC,EACpB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GACxD,YAAY,CAAC,OAAO,cAAc,CAAC,2CAiBnC;AAED,iBAAS,eAAe,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GACxD,YAAY,CAAC,OAAO,cAAc,CAAC,2CAqBnC;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/toggle-group.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AACrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAuC9D,iBAAS,WAAW,CAAC,EACpB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GACxD,YAAY,CAAC,OAAO,cAAc,CAAC,2CAanC;AAED,iBAAS,eAAe,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GACxD,YAAY,CAAC,OAAO,cAAc,CAAC,2CAmBnC;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC"}

package/dist/src/shadcn/components/ui/toggle-group.js

@@ -1,38 +1,40 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import * as React from "react";
 import { toggleVariants } from "./toggle.js";
 import { cn } from "../../lib/utils.js";
+// Toggle group styles
+const toggleGroupStyles = cn("group/toggle-group", "flex", "w-fit", "items-center", "rounded-md", "bg-bg-primary", "border", "border-border-primary");
+// Toggle group item styles
+const toggleGroupItemStyles = cn("min-w-0", "flex-1", "shrink-0", "rounded-none", "shadow-none", "first:rounded-l-md", "last:rounded-r-md", "focus:z-10", "focus-visible:z-10", // Убираем все границы у элементов внутри группы
+"data-[variant=outline]:border-0", // Добавляем правую границу как разделитель (кроме последнего элемента)
+"data-[variant=outline]:[&:not(:last-child)]:border-r", "data-[variant=outline]:[&:not(:last-child)]:border-r-border-primary");
 const ToggleGroupContext = /*#__PURE__*/ React.createContext({
-    size: "default",
-    variant: "default"
+    variant: "filled"
 });
-function ToggleGroup({ className, variant, size, children, ...props }) {
+function ToggleGroup({ className, variant, children, ...props }) {
     return /*#__PURE__*/ _jsx(ToggleGroupPrimitive.Root, {
         "data-slot": "toggle-group",
         "data-variant": variant,
-        "data-size": size,
-        className: cn("group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs", className),
+        className: cn(toggleGroupStyles, className),
         ...props,
         children: /*#__PURE__*/ _jsx(ToggleGroupContext.Provider, {
             value: {
-                variant,
-                size
+                variant
             },
             children: children
         })
     });
 }
-function ToggleGroupItem({ className, children, variant, size, ...props }) {
+function ToggleGroupItem({ className, children, variant, ...props }) {
     const context = React.useContext(ToggleGroupContext);
     return /*#__PURE__*/ _jsx(ToggleGroupPrimitive.Item, {
         "data-slot": "toggle-group-item",
         "data-variant": context.variant || variant,
-        "data-size": context.size || size,
         className: cn(toggleVariants({
-            variant: context.variant || variant,
-            size: context.size || size
-        }), "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l", className),
+            variant: context.variant || variant
+        }), toggleGroupItemStyles, className),
         ...props,
         children: children
     });

package/dist/src/shadcn/components/ui/toggle-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/shadcn/components/ui/toggle-group.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { toggleVariants } from \"#shadcn/components/ui/toggle\";\nimport { cn } from \"#shadcn/lib/utils\";\n\nconst ToggleGroupContext = React.createContext<\n\tVariantProps<typeof toggleVariants>\n>({\n\tsize: \"default\",\n\tvariant: \"default\",\n});\n\nfunction ToggleGroup({\n\tclassName,\n\tvariant,\n\tsize,\n\tchildren,\n\t...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n\tVariantProps<typeof toggleVariants>) {\n\treturn (\n\t\t<ToggleGroupPrimitive.Root\n\t\t\tdata-slot=\"toggle-group\"\n\t\t\tdata-variant={variant}\n\t\t\tdata-size={size}\n\t\t\tclassName={cn(\n\t\t\t\t\"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<ToggleGroupContext.Provider value={{ variant, size }}>\n\t\t\t\t{children}\n\t\t\t</ToggleGroupContext.Provider>\n\t\t</ToggleGroupPrimitive.Root>\n\t);\n}\n\nfunction ToggleGroupItem({\n\tclassName,\n\tchildren,\n\tvariant,\n\tsize,\n\t...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n\tVariantProps<typeof toggleVariants>) {\n\tconst context = React.useContext(ToggleGroupContext);\n\n\treturn (\n\t\t<ToggleGroupPrimitive.Item\n\t\t\tdata-slot=\"toggle-group-item\"\n\t\t\tdata-variant={context.variant || variant}\n\t\t\tdata-size={context.size || size}\n\t\t\tclassName={cn(\n\t\t\t\ttoggleVariants({\n\t\t\t\t\tvariant: context.variant || variant,\n\t\t\t\t\tsize: context.size || size,\n\t\t\t\t}),\n\t\t\t\t\"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</ToggleGroupPrimitive.Item>\n\t);\n}\n\nexport { ToggleGroup, ToggleGroupItem };\n"],"names":["ToggleGroupPrimitive","React","toggleVariants","cn","ToggleGroupContext","createContext","size","variant","ToggleGroup","className","children","props","Root","data-slot","data-variant","data-size","Provider","value","ToggleGroupItem","context","useContext","Item"],"mappings":";AAAA,YAAYA,0BAA0B,+BAA+B;AAErE,YAAYC,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,cAA+B;AAC9D,SAASC,EAAE,QAAQ,qBAAoB;AAEvC,MAAMC,mCAAqBH,MAAMI,aAAa,CAE5C;IACDC,MAAM;IACNC,SAAS;AACV;AAEA,SAASC,YAAY,EACpBC,SAAS,EACTF,OAAO,EACPD,IAAI,EACJI,QAAQ,EACR,GAAGC,OAEgC;IACnC,qBACC,KAACX,qBAAqBY,IAAI;QACzBC,aAAU;QACVC,gBAAcP;QACdQ,aAAWT;QACXG,WAAWN,GACV,0FACAM;QAEA,GAAGE,KAAK;kBAET,cAAA,KAACP,mBAAmBY,QAAQ;YAACC,OAAO;gBAAEV;gBAASD;YAAK;sBAClDI;;;AAIL;AAEA,SAASQ,gBAAgB,EACxBT,SAAS,EACTC,QAAQ,EACRH,OAAO,EACPD,IAAI,EACJ,GAAGK,OAEgC;IACnC,MAAMQ,UAAUlB,MAAMmB,UAAU,CAAChB;IAEjC,qBACC,KAACJ,qBAAqBqB,IAAI;QACzBR,aAAU;QACVC,gBAAcK,QAAQZ,OAAO,IAAIA;QACjCQ,aAAWI,QAAQb,IAAI,IAAIA;QAC3BG,WAAWN,GACVD,eAAe;YACdK,SAASY,QAAQZ,OAAO,IAAIA;YAC5BD,MAAMa,QAAQb,IAAI,IAAIA;QACvB,IACA,+LACAG;QAEA,GAAGE,KAAK;kBAERD;;AAGJ;AAEA,SAASF,WAAW,EAAEU,eAAe,GAAG"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/toggle-group.tsx"],"sourcesContent":["\"use client\";\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { toggleVariants } from \"#shadcn/components/ui/toggle\";\nimport { cn } from \"#shadcn/lib/utils\";\n\n// Toggle group styles\nconst toggleGroupStyles = cn(\n\t\"group/toggle-group\",\n\t\"flex\",\n\t\"w-fit\",\n\t\"items-center\",\n\t\"rounded-md\",\n\t\"bg-bg-primary\",\n\t\"border\",\n\t\"border-border-primary\",\n);\n\n// Toggle group item styles\nconst toggleGroupItemStyles = cn(\n\t\"min-w-0\",\n\t\"flex-1\",\n\t\"shrink-0\",\n\t\"rounded-none\",\n\t\"shadow-none\",\n\t\"first:rounded-l-md\",\n\t\"last:rounded-r-md\",\n\t\"focus:z-10\",\n\t\"focus-visible:z-10\",\n\t// Убираем все границы у элементов внутри группы\n\t\"data-[variant=outline]:border-0\",\n\t// Добавляем правую границу как разделитель (кроме последнего элемента)\n\t\"data-[variant=outline]:[&:not(:last-child)]:border-r\",\n\t\"data-[variant=outline]:[&:not(:last-child)]:border-r-border-primary\",\n);\n\nconst ToggleGroupContext = React.createContext<\n\tVariantProps<typeof toggleVariants>\n>({\n\tvariant: \"filled\",\n});\n\nfunction ToggleGroup({\n\tclassName,\n\tvariant,\n\tchildren,\n\t...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n\tVariantProps<typeof toggleVariants>) {\n\treturn (\n\t\t<ToggleGroupPrimitive.Root\n\t\t\tdata-slot=\"toggle-group\"\n\t\t\tdata-variant={variant}\n\t\t\tclassName={cn(toggleGroupStyles, className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<ToggleGroupContext.Provider value={{ variant }}>\n\t\t\t\t{children}\n\t\t\t</ToggleGroupContext.Provider>\n\t\t</ToggleGroupPrimitive.Root>\n\t);\n}\n\nfunction ToggleGroupItem({\n\tclassName,\n\tchildren,\n\tvariant,\n\t...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n\tVariantProps<typeof toggleVariants>) {\n\tconst context = React.useContext(ToggleGroupContext);\n\n\treturn (\n\t\t<ToggleGroupPrimitive.Item\n\t\t\tdata-slot=\"toggle-group-item\"\n\t\t\tdata-variant={context.variant || variant}\n\t\t\tclassName={cn(\n\t\t\t\ttoggleVariants({\n\t\t\t\t\tvariant: context.variant || variant,\n\t\t\t\t}),\n\t\t\t\ttoggleGroupItemStyles,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</ToggleGroupPrimitive.Item>\n\t);\n}\n\nexport { ToggleGroup, ToggleGroupItem };\n"],"names":["ToggleGroupPrimitive","React","toggleVariants","cn","toggleGroupStyles","toggleGroupItemStyles","ToggleGroupContext","createContext","variant","ToggleGroup","className","children","props","Root","data-slot","data-variant","Provider","value","ToggleGroupItem","context","useContext","Item"],"mappings":"AAAA;;AACA,YAAYA,0BAA0B,+BAA+B;AAErE,YAAYC,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,cAA+B;AAC9D,SAASC,EAAE,QAAQ,qBAAoB;AAEvC,sBAAsB;AACtB,MAAMC,oBAAoBD,GACzB,sBACA,QACA,SACA,gBACA,cACA,iBACA,UACA;AAGD,2BAA2B;AAC3B,MAAME,wBAAwBF,GAC7B,WACA,UACA,YACA,gBACA,eACA,sBACA,qBACA,cACA,sBACA,gDAAgD;AAChD,mCACA,uEAAuE;AACvE,wDACA;AAGD,MAAMG,mCAAqBL,MAAMM,aAAa,CAE5C;IACDC,SAAS;AACV;AAEA,SAASC,YAAY,EACpBC,SAAS,EACTF,OAAO,EACPG,QAAQ,EACR,GAAGC,OAEgC;IACnC,qBACC,KAACZ,qBAAqBa,IAAI;QACzBC,aAAU;QACVC,gBAAcP;QACdE,WAAWP,GAAGC,mBAAmBM;QAChC,GAAGE,KAAK;kBAET,cAAA,KAACN,mBAAmBU,QAAQ;YAACC,OAAO;gBAAET;YAAQ;sBAC5CG;;;AAIL;AAEA,SAASO,gBAAgB,EACxBR,SAAS,EACTC,QAAQ,EACRH,OAAO,EACP,GAAGI,OAEgC;IACnC,MAAMO,UAAUlB,MAAMmB,UAAU,CAACd;IAEjC,qBACC,KAACN,qBAAqBqB,IAAI;QACzBP,aAAU;QACVC,gBAAcI,QAAQX,OAAO,IAAIA;QACjCE,WAAWP,GACVD,eAAe;YACdM,SAASW,QAAQX,OAAO,IAAIA;QAC7B,IACAH,uBACAK;QAEA,GAAGE,KAAK;kBAERD;;AAGJ;AAEA,SAASF,WAAW,EAAES,eAAe,GAAG"}

package/dist/src/shadcn/components/ui/toggle.d.ts

@@ -1,10 +1,9 @@
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { type VariantProps } from "class-variance-authority";
-import type * as React from "react";
+import * as React from "react";
 declare const toggleVariants: (props?: ({
-    variant?: "outline" | "default" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    variant?: "outline" | "filled" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
+declare function Toggle({ className, variant, children, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): import("react/jsx-runtime").JSX.Element;
 export { Toggle, toggleVariants };
 //# sourceMappingURL=toggle.d.ts.map

package/dist/src/shadcn/components/ui/toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,QAAA,MAAM,cAAc;;;8EAoBnB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACf,SAAS,EACT,OAAO,EACP,IAAI,EACJ,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GACnD,YAAY,CAAC,OAAO,cAAc,CAAC,2CAQnC;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA8C/B,QAAA,MAAM,cAAc;;8EAalB,CAAC;AA+BH,iBAAS,MAAM,CAAC,EACf,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GACnD,YAAY,CAAC,OAAO,cAAc,CAAC,2CAiBnC;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/src/shadcn/components/ui/toggle.js

@@ -1,33 +1,61 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva } from "class-variance-authority";
+import * as React from "react";
 import { cn } from "../../lib/utils.js";
-const toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap", {
+// Base toggle styles
+const baseToggleStyles = cn(// Layout
+"inline-flex", "items-center", "justify-center", "gap-2", "whitespace-nowrap", // Shape
+"rounded", "h-6", "px-2", "border", "border-transparent", // Typography
+"typo-body", // Colors
+"bg-bg-primary", "text-text-secondary", // Interaction
+"outline-none", "transition-colors", "cursor-pointer", // Hover
+"hover:bg-bg-secondary", // SVG icons
+"[&_svg]:pointer-events-none", "[&_svg:not([class*='size-'])]:size-4", "[&_svg]:shrink-0", "[&_svg]:text-text-secondary", "data-[state=on]:[&_svg]:text-text-primary", // Disabled
+"disabled:pointer-events-none", "disabled:opacity-50", // Focus
+"focus-visible:ring-2", "focus-visible:ring-utility-blue/70", // Invalid
+"aria-invalid:ring-2", "aria-invalid:ring-utility-red/70");
+const toggleVariants = cva(baseToggleStyles, {
     variants: {
         variant: {
-            default: "bg-transparent",
-            outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
-        },
-        size: {
-            default: "h-9 px-2 min-w-9",
-            sm: "h-8 px-1.5 min-w-8",
-            lg: "h-10 px-2.5 min-w-10"
+            filled: cn("data-[state=on]:bg-bg-tertiary"),
+            outline: cn("data-[state=on]:border-border-separator", "data-[state=on]:bg-bg-secondary")
         }
     },
     defaultVariants: {
-        variant: "default",
-        size: "default"
+        variant: "filled"
     }
 });
-function Toggle({ className, variant, size, ...props }) {
+// Рекурсивно проверяем наличие текста в children
+function hasTextContent(children) {
+    const childArray = React.Children.toArray(children);
+    for (const child of childArray){
+        // Проверяем строки и числа
+        if (typeof child === "string" || typeof child === "number") {
+            // Игнорируем пустые строки и пробелы
+            if (String(child).trim()) {
+                return true;
+            }
+        }
+        // Проверяем React элементы (включая фрагменты)
+        if (/*#__PURE__*/ React.isValidElement(child) && child.props && typeof child.props === "object" && "children" in child.props) {
+            if (hasTextContent(child.props.children)) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+function Toggle({ className, variant, children, ...props }) {
+    // Автоматически определяем, есть ли текст помимо иконки
+    const hasText = hasTextContent(children);
     return /*#__PURE__*/ _jsx(TogglePrimitive.Root, {
         "data-slot": "toggle",
         className: cn(toggleVariants({
-            variant,
-            size,
-            className
-        })),
-        ...props
+            variant
+        }), !hasText && "w-6 p-1", className),
+        ...props,
+        children: children
     });
 }
 export { Toggle, toggleVariants };

package/dist/src/shadcn/components/ui/toggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/shadcn/components/ui/toggle.tsx"],"sourcesContent":["import * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\nconst toggleVariants = cva(\n\t\"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-transparent\",\n\t\t\t\toutline:\n\t\t\t\t\t\"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-9 px-2 min-w-9\",\n\t\t\t\tsm: \"h-8 px-1.5 min-w-8\",\n\t\t\t\tlg: \"h-10 px-2.5 min-w-10\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t},\n\t},\n);\n\nfunction Toggle({\n\tclassName,\n\tvariant,\n\tsize,\n\t...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n\tVariantProps<typeof toggleVariants>) {\n\treturn (\n\t\t<TogglePrimitive.Root\n\t\t\tdata-slot=\"toggle\"\n\t\t\tclassName={cn(toggleVariants({ variant, size, className }))}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Toggle, toggleVariants };\n"],"names":["TogglePrimitive","cva","cn","toggleVariants","variants","variant","default","outline","size","sm","lg","defaultVariants","Toggle","className","props","Root","data-slot"],"mappings":";AAAA,YAAYA,qBAAqB,yBAAyB;AAC1D,SAASC,GAAG,QAA2B,2BAA2B;AAGlE,SAASC,EAAE,QAAQ,qBAAoB;AAEvC,MAAMC,iBAAiBF,IACtB,ijBACA;IACCG,UAAU;QACTC,SAAS;YACRC,SAAS;YACTC,SACC;QACF;QACAC,MAAM;YACLF,SAAS;YACTG,IAAI;YACJC,IAAI;QACL;IACD;IACAC,iBAAiB;QAChBN,SAAS;QACTG,MAAM;IACP;AACD;AAGD,SAASI,OAAO,EACfC,SAAS,EACTR,OAAO,EACPG,IAAI,EACJ,GAAGM,OAEgC;IACnC,qBACC,KAACd,gBAAgBe,IAAI;QACpBC,aAAU;QACVH,WAAWX,GAAGC,eAAe;YAAEE;YAASG;YAAMK;QAAU;QACvD,GAAGC,KAAK;;AAGZ;AAEA,SAASF,MAAM,EAAET,cAAc,GAAG"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/toggle.tsx"],"sourcesContent":["import * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\n// Base toggle styles\nconst baseToggleStyles = cn(\n\t// Layout\n\t\"inline-flex\",\n\t\"items-center\",\n\t\"justify-center\",\n\t\"gap-2\",\n\t\"whitespace-nowrap\",\n\t// Shape\n\t\"rounded\",\n\t\"h-6\",\n\t\"px-2\",\n\t\"border\",\n\t\"border-transparent\",\n\t// Typography\n\t\"typo-body\",\n\t// Colors\n\t\"bg-bg-primary\",\n\t\"text-text-secondary\",\n\t// Interaction\n\t\"outline-none\",\n\t\"transition-colors\",\n\t\"cursor-pointer\",\n\t// Hover\n\t\"hover:bg-bg-secondary\",\n\t// SVG icons\n\t\"[&_svg]:pointer-events-none\",\n\t\"[&_svg:not([class*='size-'])]:size-4\",\n\t\"[&_svg]:shrink-0\",\n\t\"[&_svg]:text-text-secondary\",\n\t\"data-[state=on]:[&_svg]:text-text-primary\",\n\t// Disabled\n\t\"disabled:pointer-events-none\",\n\t\"disabled:opacity-50\",\n\t// Focus\n\t\"focus-visible:ring-2\",\n\t\"focus-visible:ring-utility-blue/70\",\n\t// Invalid\n\t\"aria-invalid:ring-2\",\n\t\"aria-invalid:ring-utility-red/70\",\n);\n\nconst toggleVariants = cva(baseToggleStyles, {\n\tvariants: {\n\t\tvariant: {\n\t\t\tfilled: cn(\"data-[state=on]:bg-bg-tertiary\"),\n\t\t\toutline: cn(\n\t\t\t\t\"data-[state=on]:border-border-separator\",\n\t\t\t\t\"data-[state=on]:bg-bg-secondary\",\n\t\t\t),\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"filled\",\n\t},\n});\n\n// Рекурсивно проверяем наличие текста в children\nfunction hasTextContent(children: React.ReactNode): boolean {\n\tconst childArray = React.Children.toArray(children);\n\n\tfor (const child of childArray) {\n\t\t// Проверяем строки и числа\n\t\tif (typeof child === \"string\" || typeof child === \"number\") {\n\t\t\t// Игнорируем пустые строки и пробелы\n\t\t\tif (String(child).trim()) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t}\n\n\t\t// Проверяем React элементы (включая фрагменты)\n\t\tif (\n\t\t\tReact.isValidElement(child) &&\n\t\t\tchild.props &&\n\t\t\ttypeof child.props === \"object\" &&\n\t\t\t\"children\" in child.props\n\t\t) {\n\t\t\tif (hasTextContent(child.props.children as React.ReactNode)) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t}\n\t}\n\n\treturn false;\n}\n\nfunction Toggle({\n\tclassName,\n\tvariant,\n\tchildren,\n\t...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n\tVariantProps<typeof toggleVariants>) {\n\t// Автоматически определяем, есть ли текст помимо иконки\n\tconst hasText = hasTextContent(children);\n\n\treturn (\n\t\t<TogglePrimitive.Root\n\t\t\tdata-slot=\"toggle\"\n\t\t\tclassName={cn(\n\t\t\t\ttoggleVariants({ variant }),\n\t\t\t\t!hasText && \"w-6 p-1\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</TogglePrimitive.Root>\n\t);\n}\n\nexport { Toggle, toggleVariants };\n"],"names":["TogglePrimitive","cva","React","cn","baseToggleStyles","toggleVariants","variants","variant","filled","outline","defaultVariants","hasTextContent","children","childArray","Children","toArray","child","String","trim","isValidElement","props","Toggle","className","hasText","Root","data-slot"],"mappings":";AAAA,YAAYA,qBAAqB,yBAAyB;AAC1D,SAASC,GAAG,QAA2B,2BAA2B;AAClE,YAAYC,WAAW,QAAQ;AAE/B,SAASC,EAAE,QAAQ,qBAAoB;AAEvC,qBAAqB;AACrB,MAAMC,mBAAmBD,GACxB,SAAS;AACT,eACA,gBACA,kBACA,SACA,qBACA,QAAQ;AACR,WACA,OACA,QACA,UACA,sBACA,aAAa;AACb,aACA,SAAS;AACT,iBACA,uBACA,cAAc;AACd,gBACA,qBACA,kBACA,QAAQ;AACR,yBACA,YAAY;AACZ,+BACA,wCACA,oBACA,+BACA,6CACA,WAAW;AACX,gCACA,uBACA,QAAQ;AACR,wBACA,sCACA,UAAU;AACV,uBACA;AAGD,MAAME,iBAAiBJ,IAAIG,kBAAkB;IAC5CE,UAAU;QACTC,SAAS;YACRC,QAAQL,GAAG;YACXM,SAASN,GACR,2CACA;QAEF;IACD;IACAO,iBAAiB;QAChBH,SAAS;IACV;AACD;AAEA,iDAAiD;AACjD,SAASI,eAAeC,QAAyB;IAChD,MAAMC,aAAaX,MAAMY,QAAQ,CAACC,OAAO,CAACH;IAE1C,KAAK,MAAMI,SAASH,WAAY;QAC/B,2BAA2B;QAC3B,IAAI,OAAOG,UAAU,YAAY,OAAOA,UAAU,UAAU;YAC3D,qCAAqC;YACrC,IAAIC,OAAOD,OAAOE,IAAI,IAAI;gBACzB,OAAO;YACR;QACD;QAEA,+CAA+C;QAC/C,kBACChB,MAAMiB,cAAc,CAACH,UACrBA,MAAMI,KAAK,IACX,OAAOJ,MAAMI,KAAK,KAAK,YACvB,cAAcJ,MAAMI,KAAK,EACxB;YACD,IAAIT,eAAeK,MAAMI,KAAK,CAACR,QAAQ,GAAsB;gBAC5D,OAAO;YACR;QACD;IACD;IAEA,OAAO;AACR;AAEA,SAASS,OAAO,EACfC,SAAS,EACTf,OAAO,EACPK,QAAQ,EACR,GAAGQ,OAEgC;IACnC,wDAAwD;IACxD,MAAMG,UAAUZ,eAAeC;IAE/B,qBACC,KAACZ,gBAAgBwB,IAAI;QACpBC,aAAU;QACVH,WAAWnB,GACVE,eAAe;YAAEE;QAAQ,IACzB,CAACgB,WAAW,WACZD;QAEA,GAAGF,KAAK;kBAERR;;AAGJ;AAEA,SAASS,MAAM,EAAEhB,cAAc,GAAG"}