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

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

@@ -0,0 +1,21 @@
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+declare const radioButtonGroupStyles: (props?: ({
+    variant?: "wrapped" | "unwrapped" | null | undefined;
+    vertical?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface RadioButtonGroupOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+export interface RadioButtonGroupProps extends Omit<React.ComponentProps<typeof RadioGroupPrimitive.Root>, "children">, VariantProps<typeof radioButtonGroupStyles> {
+    title?: string;
+    description?: string;
+    options: RadioButtonGroupOption[];
+}
+declare function RadioButtonGroup({ className, variant, vertical, title, description, options, ...props }: RadioButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+export { RadioButtonGroup };
+//# sourceMappingURL=radio-button-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-button-group.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/radio-button-group.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,QAAA,MAAM,sBAAsB;;;8EAe1B,CAAC;AAoFH,MAAM,WAAW,sBAAsB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,qBAChB,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,EACrD,UAAU,CACV,EACD,YAAY,CAAC,OAAO,sBAAsB,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,sBAAsB,EAAE,CAAC;CAClC;AAED,iBAAS,gBAAgB,CAAC,EACzB,SAAS,EACT,OAAmB,EACnB,QAAgB,EAChB,KAAK,EACL,WAAW,EACX,OAAO,EACP,GAAG,KAAK,EACR,EAAE,qBAAqB,2CAmDvB;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/src/shadcn/components/ui/radio-button-group.js

@@ -0,0 +1,148 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+import { RadioGroupItem } from "./radio-group.js";
+// Radio Button Group container styles
+const radioButtonGroupStyles = cva("flex flex-col gap-2", {
+    variants: {
+        variant: {
+            wrapped: "",
+            unwrapped: ""
+        },
+        vertical: {
+            true: "",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        variant: "wrapped",
+        vertical: false
+    }
+});
+// Radio items container styles
+const radioItemsContainerStyles = cva("flex", {
+    variants: {
+        variant: {
+            wrapped: "",
+            unwrapped: ""
+        },
+        vertical: {
+            true: "flex-col",
+            false: "flex-row gap-3"
+        }
+    },
+    compoundVariants: [
+        {
+            variant: "unwrapped",
+            vertical: true,
+            class: "gap-2"
+        }
+    ],
+    defaultVariants: {
+        variant: "wrapped",
+        vertical: false
+    }
+});
+// Individual radio item wrapper styles
+const radioItemWrapperStyles = cva(cn("flex cursor-pointer transition-all"), {
+    variants: {
+        variant: {
+            wrapped: cn("items-start", "gap-3", "p-4", "border", "border-border-primary", "bg-bg-primary", "hover:bg-bg-secondary", "[&:has([data-state=checked])]:bg-bg-tertiary"),
+            unwrapped: "gap-2"
+        },
+        vertical: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            variant: "wrapped",
+            vertical: false,
+            class: "rounded-lg"
+        },
+        {
+            variant: "wrapped",
+            vertical: true,
+            class: cn("first:rounded-t-lg", "last:rounded-b-lg", "[&:not(:first-child)]:-mt-px")
+        }
+    ],
+    defaultVariants: {
+        variant: "wrapped",
+        vertical: false
+    }
+});
+// Title styles
+const titleStyles = cn("text-text-primary", "body16bold");
+// Description styles
+const descriptionStyles = cn("text-text-secondary", "body14");
+// Label styles
+const labelStyles = cn("text-text-primary", "body14", "cursor-pointer", "select-none");
+function RadioButtonGroup({ className, variant = "wrapped", vertical = false, title, description, options, ...props }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn(radioButtonGroupStyles({
+            variant,
+            vertical
+        }), className),
+        children: [
+            (title || description) && /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col gap-0.5 mb-2",
+                children: [
+                    title && /*#__PURE__*/ _jsx("span", {
+                        className: titleStyles,
+                        children: title
+                    }),
+                    description && /*#__PURE__*/ _jsx("span", {
+                        className: descriptionStyles,
+                        children: description
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(RadioGroupPrimitive.Root, {
+                "data-slot": "radio-button-group",
+                className: radioItemsContainerStyles({
+                    variant,
+                    vertical
+                }),
+                ...props,
+                children: options.map((option)=>{
+                    const radioId = `radio-${option.value}`;
+                    return /*#__PURE__*/ _jsxs("label", {
+                        htmlFor: radioId,
+                        className: cn(radioItemWrapperStyles({
+                            variant,
+                            vertical
+                        }), variant === "unwrapped" && (option.description ? "items-start" : "items-center")),
+                        children: [
+                            /*#__PURE__*/ _jsx(RadioGroupItem, {
+                                id: radioId,
+                                value: option.value,
+                                disabled: option.disabled,
+                                size: "small",
+                                className: variant === "wrapped" ? "mt-0.5" : ""
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col gap-0.5",
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: labelStyles,
+                                        children: option.label
+                                    }),
+                                    option.description && /*#__PURE__*/ _jsx("span", {
+                                        className: descriptionStyles,
+                                        children: option.description
+                                    })
+                                ]
+                            })
+                        ]
+                    }, option.value);
+                })
+            })
+        ]
+    });
+}
+export { RadioButtonGroup };
+
+//# sourceMappingURL=radio-button-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/radio-button-group.tsx"],"sourcesContent":["\"use client\";\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\nimport { RadioGroupItem } from \"./radio-group\";\n\n// Radio Button Group container styles\nconst radioButtonGroupStyles = cva(\"flex flex-col gap-2\", {\n\tvariants: {\n\t\tvariant: {\n\t\t\twrapped: \"\",\n\t\t\tunwrapped: \"\",\n\t\t},\n\t\tvertical: {\n\t\t\ttrue: \"\",\n\t\t\tfalse: \"\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"wrapped\",\n\t\tvertical: false,\n\t},\n});\n\n// Radio items container styles\nconst radioItemsContainerStyles = cva(\"flex\", {\n\tvariants: {\n\t\tvariant: {\n\t\t\twrapped: \"\",\n\t\t\tunwrapped: \"\",\n\t\t},\n\t\tvertical: {\n\t\t\ttrue: \"flex-col\",\n\t\t\tfalse: \"flex-row gap-3\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tvariant: \"unwrapped\",\n\t\t\tvertical: true,\n\t\t\tclass: \"gap-2\",\n\t\t},\n\t],\n\tdefaultVariants: {\n\t\tvariant: \"wrapped\",\n\t\tvertical: false,\n\t},\n});\n\n// Individual radio item wrapper styles\nconst radioItemWrapperStyles = cva(cn(\"flex cursor-pointer transition-all\"), {\n\tvariants: {\n\t\tvariant: {\n\t\t\twrapped: cn(\n\t\t\t\t\"items-start\",\n\t\t\t\t\"gap-3\",\n\t\t\t\t\"p-4\",\n\t\t\t\t\"border\",\n\t\t\t\t\"border-border-primary\",\n\t\t\t\t\"bg-bg-primary\",\n\t\t\t\t\"hover:bg-bg-secondary\",\n\t\t\t\t\"[&:has([data-state=checked])]:bg-bg-tertiary\",\n\t\t\t),\n\t\t\tunwrapped: \"gap-2\",\n\t\t},\n\t\tvertical: {\n\t\t\ttrue: \"\",\n\t\t\tfalse: \"\",\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t{\n\t\t\tvariant: \"wrapped\",\n\t\t\tvertical: false,\n\t\t\tclass: \"rounded-lg\",\n\t\t},\n\t\t{\n\t\t\tvariant: \"wrapped\",\n\t\t\tvertical: true,\n\t\t\tclass: cn(\n\t\t\t\t\"first:rounded-t-lg\",\n\t\t\t\t\"last:rounded-b-lg\",\n\t\t\t\t\"[&:not(:first-child)]:-mt-px\",\n\t\t\t),\n\t\t},\n\t],\n\tdefaultVariants: {\n\t\tvariant: \"wrapped\",\n\t\tvertical: false,\n\t},\n});\n\n// Title styles\nconst titleStyles = cn(\"text-text-primary\", \"body16bold\");\n\n// Description styles\nconst descriptionStyles = cn(\"text-text-secondary\", \"body14\");\n\n// Label styles\nconst labelStyles = cn(\n\t\"text-text-primary\",\n\t\"body14\",\n\t\"cursor-pointer\",\n\t\"select-none\",\n);\n\nexport interface RadioButtonGroupOption {\n\tvalue: string;\n\tlabel: string;\n\tdescription?: string;\n\tdisabled?: boolean;\n}\n\nexport interface RadioButtonGroupProps\n\textends Omit<\n\t\t\tReact.ComponentProps<typeof RadioGroupPrimitive.Root>,\n\t\t\t\"children\"\n\t\t>,\n\t\tVariantProps<typeof radioButtonGroupStyles> {\n\ttitle?: string;\n\tdescription?: string;\n\toptions: RadioButtonGroupOption[];\n}\n\nfunction RadioButtonGroup({\n\tclassName,\n\tvariant = \"wrapped\",\n\tvertical = false,\n\ttitle,\n\tdescription,\n\toptions,\n\t...props\n}: RadioButtonGroupProps) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(radioButtonGroupStyles({ variant, vertical }), className)}\n\t\t>\n\t\t\t{(title || description) && (\n\t\t\t\t<div className=\"flex flex-col gap-0.5 mb-2\">\n\t\t\t\t\t{title && <span className={titleStyles}>{title}</span>}\n\t\t\t\t\t{description && (\n\t\t\t\t\t\t<span className={descriptionStyles}>{description}</span>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<RadioGroupPrimitive.Root\n\t\t\t\tdata-slot=\"radio-button-group\"\n\t\t\t\tclassName={radioItemsContainerStyles({ variant, vertical })}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{options.map((option) => {\n\t\t\t\t\tconst radioId = `radio-${option.value}`;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tkey={option.value}\n\t\t\t\t\t\t\thtmlFor={radioId}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\tradioItemWrapperStyles({ variant, vertical }),\n\t\t\t\t\t\t\t\tvariant === \"unwrapped\" &&\n\t\t\t\t\t\t\t\t\t(option.description ? \"items-start\" : \"items-center\"),\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<RadioGroupItem\n\t\t\t\t\t\t\t\tid={radioId}\n\t\t\t\t\t\t\t\tvalue={option.value}\n\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tclassName={variant === \"wrapped\" ? \"mt-0.5\" : \"\"}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<div className=\"flex flex-col gap-0.5\">\n\t\t\t\t\t\t\t\t<span className={labelStyles}>{option.label}</span>\n\t\t\t\t\t\t\t\t{option.description && (\n\t\t\t\t\t\t\t\t\t<span className={descriptionStyles}>\n\t\t\t\t\t\t\t\t\t\t{option.description}\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</div>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</RadioGroupPrimitive.Root>\n\t\t</div>\n\t);\n}\n\nexport { RadioButtonGroup };\n"],"names":["RadioGroupPrimitive","cva","cn","RadioGroupItem","radioButtonGroupStyles","variants","variant","wrapped","unwrapped","vertical","true","false","defaultVariants","radioItemsContainerStyles","compoundVariants","class","radioItemWrapperStyles","titleStyles","descriptionStyles","labelStyles","RadioButtonGroup","className","title","description","options","props","div","span","Root","data-slot","map","option","radioId","value","label","htmlFor","id","disabled","size"],"mappings":"AAAA;;AACA,YAAYA,yBAAyB,8BAA8B;AACnE,SAASC,GAAG,QAA2B,2BAA2B;AAGlE,SAASC,EAAE,QAAQ,qBAAoB;AACvC,SAASC,cAAc,QAAQ,mBAAgB;AAE/C,sCAAsC;AACtC,MAAMC,yBAAyBH,IAAI,uBAAuB;IACzDI,UAAU;QACTC,SAAS;YACRC,SAAS;YACTC,WAAW;QACZ;QACAC,UAAU;YACTC,MAAM;YACNC,OAAO;QACR;IACD;IACAC,iBAAiB;QAChBN,SAAS;QACTG,UAAU;IACX;AACD;AAEA,+BAA+B;AAC/B,MAAMI,4BAA4BZ,IAAI,QAAQ;IAC7CI,UAAU;QACTC,SAAS;YACRC,SAAS;YACTC,WAAW;QACZ;QACAC,UAAU;YACTC,MAAM;YACNC,OAAO;QACR;IACD;IACAG,kBAAkB;QACjB;YACCR,SAAS;YACTG,UAAU;YACVM,OAAO;QACR;KACA;IACDH,iBAAiB;QAChBN,SAAS;QACTG,UAAU;IACX;AACD;AAEA,uCAAuC;AACvC,MAAMO,yBAAyBf,IAAIC,GAAG,uCAAuC;IAC5EG,UAAU;QACTC,SAAS;YACRC,SAASL,GACR,eACA,SACA,OACA,UACA,yBACA,iBACA,yBACA;YAEDM,WAAW;QACZ;QACAC,UAAU;YACTC,MAAM;YACNC,OAAO;QACR;IACD;IACAG,kBAAkB;QACjB;YACCR,SAAS;YACTG,UAAU;YACVM,OAAO;QACR;QACA;YACCT,SAAS;YACTG,UAAU;YACVM,OAAOb,GACN,sBACA,qBACA;QAEF;KACA;IACDU,iBAAiB;QAChBN,SAAS;QACTG,UAAU;IACX;AACD;AAEA,eAAe;AACf,MAAMQ,cAAcf,GAAG,qBAAqB;AAE5C,qBAAqB;AACrB,MAAMgB,oBAAoBhB,GAAG,uBAAuB;AAEpD,eAAe;AACf,MAAMiB,cAAcjB,GACnB,qBACA,UACA,kBACA;AAqBD,SAASkB,iBAAiB,EACzBC,SAAS,EACTf,UAAU,SAAS,EACnBG,WAAW,KAAK,EAChBa,KAAK,EACLC,WAAW,EACXC,OAAO,EACP,GAAGC,OACoB;IACvB,qBACC,MAACC;QACAL,WAAWnB,GAAGE,uBAAuB;YAAEE;YAASG;QAAS,IAAIY;;YAE3DC,CAAAA,SAASC,WAAU,mBACpB,MAACG;gBAAIL,WAAU;;oBACbC,uBAAS,KAACK;wBAAKN,WAAWJ;kCAAcK;;oBACxCC,6BACA,KAACI;wBAAKN,WAAWH;kCAAoBK;;;;0BAIxC,KAACvB,oBAAoB4B,IAAI;gBACxBC,aAAU;gBACVR,WAAWR,0BAA0B;oBAAEP;oBAASG;gBAAS;gBACxD,GAAGgB,KAAK;0BAERD,QAAQM,GAAG,CAAC,CAACC;oBACb,MAAMC,UAAU,CAAC,MAAM,EAAED,OAAOE,KAAK,EAAE;oBACvC,qBACC,MAACC;wBAEAC,SAASH;wBACTX,WAAWnB,GACVc,uBAAuB;4BAAEV;4BAASG;wBAAS,IAC3CH,YAAY,eACVyB,CAAAA,OAAOR,WAAW,GAAG,gBAAgB,cAAa;;0CAGrD,KAACpB;gCACAiC,IAAIJ;gCACJC,OAAOF,OAAOE,KAAK;gCACnBI,UAAUN,OAAOM,QAAQ;gCACzBC,MAAK;gCACLjB,WAAWf,YAAY,YAAY,WAAW;;0CAE/C,MAACoB;gCAAIL,WAAU;;kDACd,KAACM;wCAAKN,WAAWF;kDAAcY,OAAOG,KAAK;;oCAC1CH,OAAOR,WAAW,kBAClB,KAACI;wCAAKN,WAAWH;kDACfa,OAAOR,WAAW;;;;;uBAnBjBQ,OAAOE,KAAK;gBAyBpB;;;;AAIJ;AAEA,SAASb,gBAAgB,GAAG"}

package/dist/src/shadcn/components/ui/radio-button-group.stories.js

@@ -0,0 +1,283 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
+import { RadioButtonGroup } from "./radio-button-group.js";
+const optionsWithDescription = [
+    {
+        value: "option-1",
+        label: "First option",
+        description: "This is a helpful description for the first option"
+    },
+    {
+        value: "option-2",
+        label: "Second option",
+        description: "This is a helpful description for the second option"
+    }
+];
+const optionsWithoutDescription = [
+    {
+        value: "option-1",
+        label: "First option"
+    },
+    {
+        value: "option-2",
+        label: "Second option"
+    }
+];
+const threeOptionsWithDescription = [
+    {
+        value: "option-1",
+        label: "Basic plan",
+        description: "Perfect for individuals and small projects"
+    },
+    {
+        value: "option-2",
+        label: "Pro plan",
+        description: "Best for growing teams and businesses"
+    },
+    {
+        value: "option-3",
+        label: "Enterprise",
+        description: "Custom solutions for large organizations"
+    }
+];
+const threeOptionsWithoutDescription = [
+    {
+        value: "option-1",
+        label: "Basic plan"
+    },
+    {
+        value: "option-2",
+        label: "Pro plan"
+    },
+    {
+        value: "option-3",
+        label: "Enterprise"
+    }
+];
+function RadioButtonGroupWrapper({ variant = "wrapped", vertical = false, title, description, disabled = false, optionDescription = true, defaultValue = "option-1" }) {
+    const options = optionDescription ? optionsWithDescription : optionsWithoutDescription;
+    return /*#__PURE__*/ _jsx(RadioButtonGroup, {
+        variant: variant,
+        vertical: vertical,
+        ...title && {
+            title
+        },
+        ...description && {
+            description
+        },
+        disabled: disabled,
+        options: options,
+        defaultValue: defaultValue
+    });
+}
+const meta = {
+    title: "Component/Radio Button Group",
+    component: RadioButtonGroupWrapper,
+    parameters: {
+        docs: {
+            page: ()=>/*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Title, {}),
+                        /*#__PURE__*/ _jsx(Primary, {}),
+                        /*#__PURE__*/ _jsx(Controls, {})
+                    ]
+                })
+        }
+    },
+    argTypes: {
+        variant: {
+            control: "select",
+            options: [
+                "wrapped",
+                "unwrapped"
+            ]
+        },
+        vertical: {
+            control: "boolean"
+        },
+        disabled: {
+            control: "boolean"
+        },
+        optionDescription: {
+            control: "boolean"
+        },
+        title: {
+            control: "text"
+        },
+        description: {
+            control: "text"
+        }
+    },
+    args: {
+        variant: "wrapped",
+        vertical: false,
+        disabled: false,
+        optionDescription: true,
+        title: "Select an option",
+        description: "Choose the option that best fits your needs",
+        defaultValue: "option-1"
+    }
+};
+export default meta;
+export const Default = {
+    tags: [
+        "!dev"
+    ],
+    render: (args)=>/*#__PURE__*/ _jsx(RadioButtonGroupWrapper, {
+            ...args
+        })
+};
+export const Demo = {
+    tags: [
+        "!autodocs"
+    ],
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-12 p-6",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "space-y-8",
+                    children: [
+                        /*#__PURE__*/ _jsx("h2", {
+                            className: "text-lg font-semibold text-text-primary",
+                            children: "Style: Wrapped (with description)"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "space-y-4",
+                            children: [
+                                /*#__PURE__*/ _jsx("h3", {
+                                    className: "text-sm text-text-secondary",
+                                    children: "Horizontal"
+                                }),
+                                /*#__PURE__*/ _jsx(RadioButtonGroup, {
+                                    variant: "wrapped",
+                                    vertical: false,
+                                    title: "Select an option",
+                                    description: "Choose the option that best fits your needs",
+                                    options: optionsWithDescription,
+                                    defaultValue: "option-1"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "space-y-4",
+                            children: [
+                                /*#__PURE__*/ _jsx("h3", {
+                                    className: "text-sm text-text-secondary",
+                                    children: "Vertical"
+                                }),
+                                /*#__PURE__*/ _jsx(RadioButtonGroup, {
+                                    variant: "wrapped",
+                                    vertical: true,
+                                    title: "Select a plan",
+                                    description: "Choose the plan that best fits your needs",
+                                    options: threeOptionsWithDescription,
+                                    defaultValue: "option-1"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "space-y-8",
+                    children: [
+                        /*#__PURE__*/ _jsx("h2", {
+                            className: "text-lg font-semibold text-text-primary",
+                            children: "Style: Wrapped (without description)"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "space-y-4",
+                            children: [
+                                /*#__PURE__*/ _jsx("h3", {
+                                    className: "text-sm text-text-secondary",
+                                    children: "Horizontal"
+                                }),
+                                /*#__PURE__*/ _jsx(RadioButtonGroup, {
+                                    variant: "wrapped",
+                                    vertical: false,
+                                    title: "Select an option",
+                                    options: optionsWithoutDescription,
+                                    defaultValue: "option-1"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "space-y-4",
+                            children: [
+                                /*#__PURE__*/ _jsx("h3", {
+                                    className: "text-sm text-text-secondary",
+                                    children: "Vertical"
+                                }),
+                                /*#__PURE__*/ _jsx(RadioButtonGroup, {
+                                    variant: "wrapped",
+                                    vertical: true,
+                                    title: "Select a plan",
+                                    options: threeOptionsWithoutDescription,
+                                    defaultValue: "option-2"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "space-y-8",
+                    children: [
+                        /*#__PURE__*/ _jsx("h2", {
+                            className: "text-lg font-semibold text-text-primary",
+                            children: "Style: Unwrapped"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "space-y-4",
+                            children: [
+                                /*#__PURE__*/ _jsx("h3", {
+                                    className: "text-sm text-text-secondary",
+                                    children: "Horizontal"
+                                }),
+                                /*#__PURE__*/ _jsx(RadioButtonGroup, {
+                                    variant: "unwrapped",
+                                    vertical: false,
+                                    title: "Select an option",
+                                    options: optionsWithoutDescription,
+                                    defaultValue: "option-1"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "space-y-4",
+                            children: [
+                                /*#__PURE__*/ _jsx("h3", {
+                                    className: "text-sm text-text-secondary",
+                                    children: "Vertical"
+                                }),
+                                /*#__PURE__*/ _jsx(RadioButtonGroup, {
+                                    variant: "unwrapped",
+                                    vertical: true,
+                                    title: "Select a plan",
+                                    options: threeOptionsWithoutDescription,
+                                    defaultValue: "option-2"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "space-y-8",
+                    children: [
+                        /*#__PURE__*/ _jsx("h2", {
+                            className: "text-lg font-semibold text-text-primary",
+                            children: "Disabled"
+                        }),
+                        /*#__PURE__*/ _jsx(RadioButtonGroup, {
+                            variant: "wrapped",
+                            vertical: false,
+                            title: "Disabled group",
+                            options: optionsWithDescription,
+                            defaultValue: "option-1",
+                            disabled: true
+                        })
+                    ]
+                })
+            ]
+        })
+};
+
+//# sourceMappingURL=radio-button-group.stories.js.map

package/dist/src/shadcn/components/ui/radio-button-group.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/radio-button-group.stories.tsx"],"sourcesContent":["import { Controls, Primary, Title } from \"@storybook/addon-docs/blocks\";\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport {\n\tRadioButtonGroup,\n\ttype RadioButtonGroupOption,\n} from \"#shadcn/components/ui/radio-button-group\";\n\nconst optionsWithDescription: RadioButtonGroupOption[] = [\n\t{\n\t\tvalue: \"option-1\",\n\t\tlabel: \"First option\",\n\t\tdescription: \"This is a helpful description for the first option\",\n\t},\n\t{\n\t\tvalue: \"option-2\",\n\t\tlabel: \"Second option\",\n\t\tdescription: \"This is a helpful description for the second option\",\n\t},\n];\n\nconst optionsWithoutDescription: RadioButtonGroupOption[] = [\n\t{ value: \"option-1\", label: \"First option\" },\n\t{ value: \"option-2\", label: \"Second option\" },\n];\n\nconst threeOptionsWithDescription: RadioButtonGroupOption[] = [\n\t{\n\t\tvalue: \"option-1\",\n\t\tlabel: \"Basic plan\",\n\t\tdescription: \"Perfect for individuals and small projects\",\n\t},\n\t{\n\t\tvalue: \"option-2\",\n\t\tlabel: \"Pro plan\",\n\t\tdescription: \"Best for growing teams and businesses\",\n\t},\n\t{\n\t\tvalue: \"option-3\",\n\t\tlabel: \"Enterprise\",\n\t\tdescription: \"Custom solutions for large organizations\",\n\t},\n];\n\nconst threeOptionsWithoutDescription: RadioButtonGroupOption[] = [\n\t{ value: \"option-1\", label: \"Basic plan\" },\n\t{ value: \"option-2\", label: \"Pro plan\" },\n\t{ value: \"option-3\", label: \"Enterprise\" },\n];\n\ninterface RadioButtonGroupWrapperProps {\n\tvariant?: \"wrapped\" | \"unwrapped\";\n\tvertical?: boolean;\n\ttitle?: string;\n\tdescription?: string;\n\tdisabled?: boolean;\n\toptionDescription?: boolean;\n\tdefaultValue?: string;\n}\n\nfunction RadioButtonGroupWrapper({\n\tvariant = \"wrapped\",\n\tvertical = false,\n\ttitle,\n\tdescription,\n\tdisabled = false,\n\toptionDescription = true,\n\tdefaultValue = \"option-1\",\n}: RadioButtonGroupWrapperProps) {\n\tconst options = optionDescription\n\t\t? optionsWithDescription\n\t\t: optionsWithoutDescription;\n\n\treturn (\n\t\t<RadioButtonGroup\n\t\t\tvariant={variant}\n\t\t\tvertical={vertical}\n\t\t\t{...(title && { title })}\n\t\t\t{...(description && { description })}\n\t\t\tdisabled={disabled}\n\t\t\toptions={options}\n\t\t\tdefaultValue={defaultValue}\n\t\t/>\n\t);\n}\n\nconst meta = {\n\ttitle: \"Component/Radio Button Group\",\n\tcomponent: RadioButtonGroupWrapper,\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: [\"wrapped\", \"unwrapped\"],\n\t\t},\n\t\tvertical: {\n\t\t\tcontrol: \"boolean\",\n\t\t},\n\t\tdisabled: {\n\t\t\tcontrol: \"boolean\",\n\t\t},\n\t\toptionDescription: {\n\t\t\tcontrol: \"boolean\",\n\t\t},\n\t\ttitle: {\n\t\t\tcontrol: \"text\",\n\t\t},\n\t\tdescription: {\n\t\t\tcontrol: \"text\",\n\t\t},\n\t},\n\targs: {\n\t\tvariant: \"wrapped\",\n\t\tvertical: false,\n\t\tdisabled: false,\n\t\toptionDescription: true,\n\t\ttitle: \"Select an option\",\n\t\tdescription: \"Choose the option that best fits your needs\",\n\t\tdefaultValue: \"option-1\",\n\t},\n} satisfies Meta<typeof RadioButtonGroupWrapper>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default = {\n\ttags: [\"!dev\"],\n\trender: (args) => <RadioButtonGroupWrapper {...args} />,\n} satisfies Story;\n\nexport const Demo = {\n\ttags: [\"!autodocs\"],\n\trender: () => (\n\t\t<div className=\"flex flex-col gap-12 p-6\">\n\t\t\t{/* Wrapped Style with Description */}\n\t\t\t<div className=\"space-y-8\">\n\t\t\t\t<h2 className=\"text-lg font-semibold text-text-primary\">\n\t\t\t\t\tStyle: Wrapped (with description)\n\t\t\t\t</h2>\n\n\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t<h3 className=\"text-sm text-text-secondary\">Horizontal</h3>\n\t\t\t\t\t<RadioButtonGroup\n\t\t\t\t\t\tvariant=\"wrapped\"\n\t\t\t\t\t\tvertical={false}\n\t\t\t\t\t\ttitle=\"Select an option\"\n\t\t\t\t\t\tdescription=\"Choose the option that best fits your needs\"\n\t\t\t\t\t\toptions={optionsWithDescription}\n\t\t\t\t\t\tdefaultValue=\"option-1\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t<h3 className=\"text-sm text-text-secondary\">Vertical</h3>\n\t\t\t\t\t<RadioButtonGroup\n\t\t\t\t\t\tvariant=\"wrapped\"\n\t\t\t\t\t\tvertical={true}\n\t\t\t\t\t\ttitle=\"Select a plan\"\n\t\t\t\t\t\tdescription=\"Choose the plan that best fits your needs\"\n\t\t\t\t\t\toptions={threeOptionsWithDescription}\n\t\t\t\t\t\tdefaultValue=\"option-1\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{/* Wrapped Style without Description */}\n\t\t\t<div className=\"space-y-8\">\n\t\t\t\t<h2 className=\"text-lg font-semibold text-text-primary\">\n\t\t\t\t\tStyle: Wrapped (without description)\n\t\t\t\t</h2>\n\n\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t<h3 className=\"text-sm text-text-secondary\">Horizontal</h3>\n\t\t\t\t\t<RadioButtonGroup\n\t\t\t\t\t\tvariant=\"wrapped\"\n\t\t\t\t\t\tvertical={false}\n\t\t\t\t\t\ttitle=\"Select an option\"\n\t\t\t\t\t\toptions={optionsWithoutDescription}\n\t\t\t\t\t\tdefaultValue=\"option-1\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t<h3 className=\"text-sm text-text-secondary\">Vertical</h3>\n\t\t\t\t\t<RadioButtonGroup\n\t\t\t\t\t\tvariant=\"wrapped\"\n\t\t\t\t\t\tvertical={true}\n\t\t\t\t\t\ttitle=\"Select a plan\"\n\t\t\t\t\t\toptions={threeOptionsWithoutDescription}\n\t\t\t\t\t\tdefaultValue=\"option-2\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{/* Unwrapped Style */}\n\t\t\t<div className=\"space-y-8\">\n\t\t\t\t<h2 className=\"text-lg font-semibold text-text-primary\">\n\t\t\t\t\tStyle: Unwrapped\n\t\t\t\t</h2>\n\n\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t<h3 className=\"text-sm text-text-secondary\">Horizontal</h3>\n\t\t\t\t\t<RadioButtonGroup\n\t\t\t\t\t\tvariant=\"unwrapped\"\n\t\t\t\t\t\tvertical={false}\n\t\t\t\t\t\ttitle=\"Select an option\"\n\t\t\t\t\t\toptions={optionsWithoutDescription}\n\t\t\t\t\t\tdefaultValue=\"option-1\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t<h3 className=\"text-sm text-text-secondary\">Vertical</h3>\n\t\t\t\t\t<RadioButtonGroup\n\t\t\t\t\t\tvariant=\"unwrapped\"\n\t\t\t\t\t\tvertical={true}\n\t\t\t\t\t\ttitle=\"Select a plan\"\n\t\t\t\t\t\toptions={threeOptionsWithoutDescription}\n\t\t\t\t\t\tdefaultValue=\"option-2\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{/* Disabled */}\n\t\t\t<div className=\"space-y-8\">\n\t\t\t\t<h2 className=\"text-lg font-semibold text-text-primary\">Disabled</h2>\n\t\t\t\t<RadioButtonGroup\n\t\t\t\t\tvariant=\"wrapped\"\n\t\t\t\t\tvertical={false}\n\t\t\t\t\ttitle=\"Disabled group\"\n\t\t\t\t\toptions={optionsWithDescription}\n\t\t\t\t\tdefaultValue=\"option-1\"\n\t\t\t\t\tdisabled\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t),\n} satisfies Story;\n"],"names":["Controls","Primary","Title","RadioButtonGroup","optionsWithDescription","value","label","description","optionsWithoutDescription","threeOptionsWithDescription","threeOptionsWithoutDescription","RadioButtonGroupWrapper","variant","vertical","title","disabled","optionDescription","defaultValue","options","meta","component","parameters","docs","page","argTypes","control","args","Default","tags","render","Demo","div","className","h2","h3"],"mappings":"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"}

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

@@ -1,6 +1,10 @@
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { type VariantProps } from "class-variance-authority";
 import type * as React from "react";
+declare const radioGroupItemVariants: (props?: ({
+    size?: "small" | "regular" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function RadioGroupItem({ className, size, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item> & VariantProps<typeof radioGroupItemVariants>): import("react/jsx-runtime").JSX.Element;
 export { RadioGroup, RadioGroupItem };
 //# sourceMappingURL=radio-group.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AAEnE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,iBAAS,UAAU,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,2CAQvD;AAED,iBAAS,cAAc,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,2CAkBvD;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/radio-group.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAiDpC,QAAA,MAAM,sBAAsB;;8EAU1B,CAAC;AAYH,iBAAS,UAAU,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,2CAQvD;AAED,iBAAS,cAAc,CAAC,EACvB,SAAS,EACT,IAAI,EACJ,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,GACvD,YAAY,CAAC,OAAO,sBAAsB,CAAC,2CAwB3C;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}

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

@@ -1,24 +1,57 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { CircleIcon } from "lucide-react";
+import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
+// Radio group root styles
+const radioGroupStyles = cn(// Layout
+"grid", "gap-3");
+// Radio group item base styles
+const baseRadioGroupItemStyles = cn(// Layout
+"aspect-square", "shrink-0", "relative", // Shape
+"rounded-full", "overflow-hidden", // Interaction
+"outline-none", "cursor-pointer", // Animation
+"transition-all", "duration-200", "active:scale-90", "active:duration-75", // Default state
+"bg-bg-primary", "border-[1.5px]", "border-solid", "border-border-primary", // Checked state
+"data-[state=checked]:bg-bg-link", "data-[state=checked]:border-bg-link", // Disabled states
+"disabled:cursor-not-allowed", "disabled:active:scale-100", "disabled:bg-bg-primary", "disabled:border-border-secondary", "disabled:data-[state=checked]:bg-border-secondary", "disabled:data-[state=checked]:border-border-secondary", // Focus styles
+"focus-visible:ring-4", "focus-visible:ring-ring-blue", "focus-visible:data-[state=unchecked]:border-bg-link");
+const radioGroupItemVariants = cva(baseRadioGroupItemStyles, {
+    variants: {
+        size: {
+            regular: "size-5",
+            small: "size-4"
+        }
+    },
+    defaultVariants: {
+        size: "regular"
+    }
+});
+// Radio group indicator styles
+const radioGroupIndicatorStyles = cn(// Layout
+"absolute", "inset-0", "flex", "items-center", "justify-center");
 function RadioGroup({ className, ...props }) {
     return /*#__PURE__*/ _jsx(RadioGroupPrimitive.Root, {
         "data-slot": "radio-group",
-        className: cn("grid gap-3", className),
+        className: cn(radioGroupStyles, className),
         ...props
     });
 }
-function RadioGroupItem({ className, ...props }) {
+function RadioGroupItem({ className, size, ...props }) {
     return /*#__PURE__*/ _jsx(RadioGroupPrimitive.Item, {
         "data-slot": "radio-group-item",
-        className: cn("border-input text-primary 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 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className),
+        className: cn(radioGroupItemVariants({
+            size
+        }), className),
         ...props,
         children: /*#__PURE__*/ _jsx(RadioGroupPrimitive.Indicator, {
             "data-slot": "radio-group-indicator",
-            className: "relative flex items-center justify-center",
-            children: /*#__PURE__*/ _jsx(CircleIcon, {
-                className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2"
+            className: radioGroupIndicatorStyles,
+            children: /*#__PURE__*/ _jsx("div", {
+                className: cn(// Shape
+                "rounded-full", // Colors
+                "bg-white", // Size based on variant
+                size === "small" ? "size-1.5" : "size-2")
             })
         })
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/shadcn/components/ui/radio-group.tsx"],"sourcesContent":["import * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport { CircleIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\nfunction RadioGroup({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n\treturn (\n\t\t<RadioGroupPrimitive.Root\n\t\t\tdata-slot=\"radio-group\"\n\t\t\tclassName={cn(\"grid gap-3\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction RadioGroupItem({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n\treturn (\n\t\t<RadioGroupPrimitive.Item\n\t\t\tdata-slot=\"radio-group-item\"\n\t\t\tclassName={cn(\n\t\t\t\t\"border-input text-primary 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 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<RadioGroupPrimitive.Indicator\n\t\t\t\tdata-slot=\"radio-group-indicator\"\n\t\t\t\tclassName=\"relative flex items-center justify-center\"\n\t\t\t>\n\t\t\t\t<CircleIcon className=\"fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2\" />\n\t\t\t</RadioGroupPrimitive.Indicator>\n\t\t</RadioGroupPrimitive.Item>\n\t);\n}\n\nexport { RadioGroup, RadioGroupItem };\n"],"names":["RadioGroupPrimitive","CircleIcon","cn","RadioGroup","className","props","Root","data-slot","RadioGroupItem","Item","Indicator"],"mappings":";AAAA,YAAYA,yBAAyB,8BAA8B;AACnE,SAASC,UAAU,QAAQ,eAAe;AAG1C,SAASC,EAAE,QAAQ,qBAAoB;AAEvC,SAASC,WAAW,EACnBC,SAAS,EACT,GAAGC,OACoD;IACvD,qBACC,KAACL,oBAAoBM,IAAI;QACxBC,aAAU;QACVH,WAAWF,GAAG,cAAcE;QAC3B,GAAGC,KAAK;;AAGZ;AAEA,SAASG,eAAe,EACvBJ,SAAS,EACT,GAAGC,OACoD;IACvD,qBACC,KAACL,oBAAoBS,IAAI;QACxBF,aAAU;QACVH,WAAWF,GACV,0XACAE;QAEA,GAAGC,KAAK;kBAET,cAAA,KAACL,oBAAoBU,SAAS;YAC7BH,aAAU;YACVH,WAAU;sBAEV,cAAA,KAACH;gBAAWG,WAAU;;;;AAI1B;AAEA,SAASD,UAAU,EAAEK,cAAc,GAAG"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/radio-group.tsx"],"sourcesContent":["\"use client\";\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\n// Radio group root styles\nconst radioGroupStyles = cn(\n\t// Layout\n\t\"grid\",\n\t\"gap-3\",\n);\n\n// Radio group item base styles\nconst baseRadioGroupItemStyles = cn(\n\t// Layout\n\t\"aspect-square\",\n\t\"shrink-0\",\n\t\"relative\",\n\t// Shape\n\t\"rounded-full\",\n\t\"overflow-hidden\",\n\t// Interaction\n\t\"outline-none\",\n\t\"cursor-pointer\",\n\t// Animation\n\t\"transition-all\",\n\t\"duration-200\",\n\t\"active:scale-90\",\n\t\"active:duration-75\",\n\t// Default state\n\t\"bg-bg-primary\",\n\t\"border-[1.5px]\",\n\t\"border-solid\",\n\t\"border-border-primary\",\n\t// Checked state\n\t\"data-[state=checked]:bg-bg-link\",\n\t\"data-[state=checked]:border-bg-link\",\n\t// Disabled states\n\t\"disabled:cursor-not-allowed\",\n\t\"disabled:active:scale-100\",\n\t\"disabled:bg-bg-primary\",\n\t\"disabled:border-border-secondary\",\n\t\"disabled:data-[state=checked]:bg-border-secondary\",\n\t\"disabled:data-[state=checked]:border-border-secondary\",\n\t// Focus styles\n\t\"focus-visible:ring-4\",\n\t\"focus-visible:ring-ring-blue\",\n\t\"focus-visible:data-[state=unchecked]:border-bg-link\",\n);\n\nconst radioGroupItemVariants = cva(baseRadioGroupItemStyles, {\n\tvariants: {\n\t\tsize: {\n\t\t\tregular: \"size-5\",\n\t\t\tsmall: \"size-4\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"regular\",\n\t},\n});\n\n// Radio group indicator styles\nconst radioGroupIndicatorStyles = cn(\n\t// Layout\n\t\"absolute\",\n\t\"inset-0\",\n\t\"flex\",\n\t\"items-center\",\n\t\"justify-center\",\n);\n\nfunction RadioGroup({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n\treturn (\n\t\t<RadioGroupPrimitive.Root\n\t\t\tdata-slot=\"radio-group\"\n\t\t\tclassName={cn(radioGroupStyles, className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction RadioGroupItem({\n\tclassName,\n\tsize,\n\t...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item> &\n\tVariantProps<typeof radioGroupItemVariants>) {\n\treturn (\n\t\t<RadioGroupPrimitive.Item\n\t\t\tdata-slot=\"radio-group-item\"\n\t\t\tclassName={cn(radioGroupItemVariants({ size }), className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<RadioGroupPrimitive.Indicator\n\t\t\t\tdata-slot=\"radio-group-indicator\"\n\t\t\t\tclassName={radioGroupIndicatorStyles}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t// Shape\n\t\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\t// Colors\n\t\t\t\t\t\t\"bg-white\",\n\t\t\t\t\t\t// Size based on variant\n\t\t\t\t\t\tsize === \"small\" ? \"size-1.5\" : \"size-2\",\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t</RadioGroupPrimitive.Indicator>\n\t\t</RadioGroupPrimitive.Item>\n\t);\n}\n\nexport { RadioGroup, RadioGroupItem };\n"],"names":["RadioGroupPrimitive","cva","cn","radioGroupStyles","baseRadioGroupItemStyles","radioGroupItemVariants","variants","size","regular","small","defaultVariants","radioGroupIndicatorStyles","RadioGroup","className","props","Root","data-slot","RadioGroupItem","Item","Indicator","div"],"mappings":"AAAA;;AACA,YAAYA,yBAAyB,8BAA8B;AACnE,SAASC,GAAG,QAA2B,2BAA2B;AAGlE,SAASC,EAAE,QAAQ,qBAAoB;AAEvC,0BAA0B;AAC1B,MAAMC,mBAAmBD,GACxB,SAAS;AACT,QACA;AAGD,+BAA+B;AAC/B,MAAME,2BAA2BF,GAChC,SAAS;AACT,iBACA,YACA,YACA,QAAQ;AACR,gBACA,mBACA,cAAc;AACd,gBACA,kBACA,YAAY;AACZ,kBACA,gBACA,mBACA,sBACA,gBAAgB;AAChB,iBACA,kBACA,gBACA,yBACA,gBAAgB;AAChB,mCACA,uCACA,kBAAkB;AAClB,+BACA,6BACA,0BACA,oCACA,qDACA,yDACA,eAAe;AACf,wBACA,gCACA;AAGD,MAAMG,yBAAyBJ,IAAIG,0BAA0B;IAC5DE,UAAU;QACTC,MAAM;YACLC,SAAS;YACTC,OAAO;QACR;IACD;IACAC,iBAAiB;QAChBH,MAAM;IACP;AACD;AAEA,+BAA+B;AAC/B,MAAMI,4BAA4BT,GACjC,SAAS;AACT,YACA,WACA,QACA,gBACA;AAGD,SAASU,WAAW,EACnBC,SAAS,EACT,GAAGC,OACoD;IACvD,qBACC,KAACd,oBAAoBe,IAAI;QACxBC,aAAU;QACVH,WAAWX,GAAGC,kBAAkBU;QAC/B,GAAGC,KAAK;;AAGZ;AAEA,SAASG,eAAe,EACvBJ,SAAS,EACTN,IAAI,EACJ,GAAGO,OAEwC;IAC3C,qBACC,KAACd,oBAAoBkB,IAAI;QACxBF,aAAU;QACVH,WAAWX,GAAGG,uBAAuB;YAAEE;QAAK,IAAIM;QAC/C,GAAGC,KAAK;kBAET,cAAA,KAACd,oBAAoBmB,SAAS;YAC7BH,aAAU;YACVH,WAAWF;sBAEX,cAAA,KAACS;gBACAP,WAAWX,GACV,QAAQ;gBACR,gBACA,SAAS;gBACT,YACA,wBAAwB;gBACxBK,SAAS,UAAU,aAAa;;;;AAMtC;AAEA,SAASK,UAAU,EAAEK,cAAc,GAAG"}