@rovula/ui 0.1.2 → 0.1.3

package/dist/components/Button/Button.js

@@ -15,8 +15,15 @@ import { buttonVariants } from "./Button.styles";
 import { cn } from "@/utils/cn";
 import Loading from "../Loading/Loading";
 const Button = forwardRef((_a, ref) => {
-    var { size = "md", color = "primary", variant = "solid", title, children, startIcon, endIcon, disabled = false, fullwidth = false, isLoading = false, className } = _a, props = __rest(_a, ["size", "color", "variant", "title", "children", "startIcon", "endIcon", "disabled", "fullwidth", "isLoading", "className"]);
+    var { size = "md", shape = "round", color = "primary", variant = "solid", title, children, startIcon, endIcon, disabled = false, fullwidth = false, isLoading = false, className } = _a, props = __rest(_a, ["size", "shape", "color", "variant", "title", "children", "startIcon", "endIcon", "disabled", "fullwidth", "isLoading", "className"]);
     const isDisabled = disabled || isLoading;
-    return (_jsx("button", Object.assign({ type: "button" }, props, { ref: ref, "aria-disabled": isDisabled || undefined, "data-loading": isLoading || undefined, tabIndex: isDisabled ? -1 : 0, className: cn(buttonVariants({ size, color, variant, disabled, fullwidth }), className), disabled: isDisabled, children: _jsxs(_Fragment, { children: [isLoading && _jsx(Loading, {}), startIcon, children || title, endIcon] }) })));
+    return (_jsx("button", Object.assign({ type: "button" }, props, { ref: ref, "aria-disabled": isDisabled || undefined, "data-loading": isLoading || undefined, tabIndex: isDisabled ? -1 : 0, className: cn(buttonVariants({
+            size,
+            shape,
+            color,
+            variant,
+            disabled,
+            fullwidth,
+        }), className), disabled: isDisabled, children: _jsxs(_Fragment, { children: [isLoading && _jsx(Loading, {}), startIcon, children || title, endIcon] }) })));
 });
 export default Button;

package/dist/components/Button/Button.styles.js

@@ -1,6 +1,7 @@
 import { cva } from "class-variance-authority";
 export const buttonVariants = cva([
-    "gap-2 font-bold inline-flex items-center justify-center outline-none transition ease-in-out duration-45",
+    "relative gap-2 font-bold inline-flex items-center justify-center outline-none transition ease-in-out duration-45",
+    "before:content-[''] before:absolute before:inset-0 before:rounded-[inherit] before:pointer-events-none before:border-0 before:border-inherit",
 ], {
     variants: {
         color: {
@@ -55,14 +56,19 @@ export const buttonVariants = cva([
             ],
         },
         size: {
-            sm: "px-md py-1 [&_svg]:size-[18px] typography-buttonMS rounded-sm gap-1",
-            md: "px-lg py-2 [&_svg]:size-5 typography-buttonMS rounded-md",
-            lg: "px-xl py-4 [&_svg]:size-6 typography-buttonL rounded-md",
+            sm: "px-[12px] py-[4px] [&_svg]:size-[18px] typography-buttonMS gap-1",
+            md: "px-[16px] py-[8px] [&_svg]:size-5 typography-buttonMS",
+            lg: "px-[24px] py-[16px] [&_svg]:size-6 typography-buttonL",
+        },
+        shape: {
+            round: "",
+            capsule: "",
         },
         variant: {
-            solid: "border",
-            outline: "border bg-transparent",
+            solid: "before:border",
+            outline: "before:border bg-transparent",
             flat: "bg-transparent",
+            text: "bg-transparent",
             link: "bg-transparent underline underline-offset-4",
         },
         disabled: {
@@ -78,6 +84,36 @@ export const buttonVariants = cva([
         },
     },
     compoundVariants: [
+        {
+            size: "sm",
+            shape: "round",
+            className: "rounded-[var(--button-s-round)]",
+        },
+        {
+            size: "md",
+            shape: "round",
+            className: "rounded-[var(--button-m-round)]",
+        },
+        {
+            size: "lg",
+            shape: "round",
+            className: "rounded-[var(--button-l-round)]",
+        },
+        {
+            size: "sm",
+            shape: "capsule",
+            className: "rounded-[var(--button-s-capsule)]",
+        },
+        {
+            size: "md",
+            shape: "capsule",
+            className: "rounded-[var(--button-m-capsule)]",
+        },
+        {
+            size: "lg",
+            shape: "capsule",
+            className: "rounded-[var(--button-l-capsule)]",
+        },
         {
             variant: "outline",
             color: "primary",
@@ -90,7 +126,7 @@ export const buttonVariants = cva([
             ],
         },
         {
-            variant: ["flat", "link"],
+            variant: ["flat", "text", "link"],
             color: "primary",
             className: [
                 "bg-button-primary-flat-default border-button-primary-flat-default text-button-primary-flat-default fill-button-primary-flat-default",
@@ -112,7 +148,7 @@ export const buttonVariants = cva([
             ],
         },
         {
-            variant: ["flat", "link"],
+            variant: ["flat", "text", "link"],
             color: "secondary",
             className: [
                 "bg-button-secondary-flat-default border-button-secondary-flat-default text-button-secondary-flat-default fill-button-secondary-flat-default",
@@ -134,7 +170,7 @@ export const buttonVariants = cva([
             ],
         },
         {
-            variant: ["flat", "link"],
+            variant: ["flat", "text", "link"],
             color: "tertiary",
             className: [
                 "bg-button-tertiary-flat-default border-button-tertiary-flat-default text-button-tertiary-flat-default fill-button-tertiary-flat-default",
@@ -156,7 +192,7 @@ export const buttonVariants = cva([
             ],
         },
         {
-            variant: ["flat", "link"],
+            variant: ["flat", "text", "link"],
             color: "info",
             className: [
                 "bg-button-info-flat-default border-button-info-flat-default text-button-info-flat-default fill-button-info-flat-default",
@@ -178,7 +214,7 @@ export const buttonVariants = cva([
             ],
         },
         {
-            variant: ["flat", "link"],
+            variant: ["flat", "text", "link"],
             color: "success",
             className: [
                 "bg-button-success-flat-default border-button-success-flat-default text-button-success-flat-default fill-button-success-flat-default",
@@ -200,7 +236,7 @@ export const buttonVariants = cva([
             ],
         },
         {
-            variant: ["flat", "link"],
+            variant: ["flat", "text", "link"],
             color: "warning",
             className: [
                 "bg-button-warning-flat-default border-button-warning-flat-default text-button-warning-flat-default fill-button-warning-flat-default",
@@ -222,7 +258,7 @@ export const buttonVariants = cva([
             ],
         },
         {
-            variant: ["flat", "link"],
+            variant: ["flat", "text", "link"],
             color: "error",
             className: [
                 "bg-button-error-flat-default border-button-error-flat-default text-button-error-flat-default fill-button-error-flat-default",
@@ -234,7 +270,7 @@ export const buttonVariants = cva([
         },
         // --- Disabled --
         {
-            variant: ["outline", "flat", "link"],
+            variant: ["outline", "flat", "text", "link"],
             disabled: true,
             className: [
                 "bg-transparent border-disabled-outline text-disable-outline fill-disable-outline",
@@ -243,6 +279,7 @@ export const buttonVariants = cva([
     ],
     defaultVariants: {
         size: "md",
+        shape: "round",
         color: "primary",
         variant: "solid",
         fullwidth: true,

package/dist/components/Button/Buttons.stories.js

@@ -1,10 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowsUpDownIcon } from "@heroicons/react/16/solid";
 import Button from "./Button";
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {
     title: "Components/Button",
     component: Button,
     tags: ["autodocs"],
+    argTypes: {
+        shape: {
+            control: { type: "inline-radio" },
+            options: ["round", "capsule"],
+        },
+    },
     parameters: {
         // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
         layout: "fullscreen",
@@ -19,6 +26,7 @@ export const Solid = {
         title: "Button",
         disabled: false,
         isLoading: false,
+        shape: "round",
     },
     render: (args) => {
         const props = Object.assign(Object.assign({}, args), { className: "capitalize" });
@@ -31,6 +39,7 @@ export const Outline = {
         variant: "outline",
         disabled: false,
         isLoading: false,
+        shape: "round",
     },
     render: (args) => {
         const props = Object.assign(Object.assign({}, args), { className: "capitalize" });
@@ -43,6 +52,20 @@ export const Flat = {
         variant: "flat",
         disabled: false,
         isLoading: false,
+        shape: "round",
+    },
+    render: (args) => {
+        const props = Object.assign(Object.assign({}, args), { className: "capitalize" });
+        return (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, Object.assign({ color: "primary" }, props, { title: "primary" })), _jsx(Button, Object.assign({ color: "secondary" }, props, { title: "secondary" })), _jsx(Button, Object.assign({ color: "tertiary" }, props, { title: "tertiary" })), _jsx(Button, Object.assign({ color: "info" }, props, { title: "info" })), _jsx(Button, Object.assign({ color: "success" }, props, { title: "success" })), _jsx(Button, Object.assign({ color: "warning" }, props, { title: "warning" })), _jsx(Button, Object.assign({ color: "error" }, props, { title: "error" }))] }));
+    },
+};
+export const Text = {
+    args: {
+        title: "Button",
+        variant: "text",
+        disabled: false,
+        isLoading: false,
+        shape: "round",
     },
     render: (args) => {
         const props = Object.assign(Object.assign({}, args), { className: "capitalize" });
@@ -55,9 +78,41 @@ export const Link = {
         variant: "link",
         disabled: false,
         isLoading: false,
+        shape: "round",
     },
     render: (args) => {
         const props = Object.assign(Object.assign({}, args), { className: "capitalize" });
         return (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, Object.assign({ color: "primary" }, props, { title: "primary" })), _jsx(Button, Object.assign({ color: "secondary" }, props, { title: "secondary" })), _jsx(Button, Object.assign({ color: "tertiary" }, props, { title: "tertiary" })), _jsx(Button, Object.assign({ color: "info" }, props, { title: "info" })), _jsx(Button, Object.assign({ color: "success" }, props, { title: "success" })), _jsx(Button, Object.assign({ color: "warning" }, props, { title: "warning" })), _jsx(Button, Object.assign({ color: "error" }, props, { title: "error" }))] }));
     },
 };
+export const ShapePreview = {
+    args: {
+        variant: "solid",
+        color: "primary",
+    },
+    render: (args) => (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "w-20 typography-subtitile4", children: "Round" }), _jsx(Button, Object.assign({}, args, { shape: "round", size: "lg", title: "Large" })), _jsx(Button, Object.assign({}, args, { shape: "round", size: "md", title: "Medium" })), _jsx(Button, Object.assign({}, args, { shape: "round", size: "sm", title: "Small" }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "w-20 typography-subtitile4", children: "Capsule" }), _jsx(Button, Object.assign({}, args, { shape: "capsule", size: "lg", title: "Large" })), _jsx(Button, Object.assign({}, args, { shape: "capsule", size: "md", title: "Medium" })), _jsx(Button, Object.assign({}, args, { shape: "capsule", size: "sm", title: "Small" }))] })] })),
+};
+const previewColors = ["primary", "secondary", "tertiary", "info", "success", "warning", "error"];
+const previewSizes = ["lg", "md", "sm"];
+const previewSizeLabel = {
+    lg: "Large",
+    md: "Medium",
+    sm: "Small",
+};
+const previewStyles = [
+    { label: "Solid", variant: "solid" },
+    { label: "Outline", variant: "outline" },
+    { label: "Text", variant: "text" },
+];
+const icon = _jsx(ArrowsUpDownIcon, {});
+const previewStates = [
+    { label: "Default", isLoading: false, disabled: false },
+    { label: "Loading", isLoading: true, disabled: false },
+    { label: "Disable", isLoading: false, disabled: true },
+];
+export const FigmaPreview = {
+    render: () => (_jsx("div", { className: "bg-base-bg2 p-8 min-h-screen", children: _jsx("div", { className: "flex flex-col gap-10", children: previewColors.map((color) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("h3", { className: "text-xl font-semibold tracking-wide text-text-white capitalize", children: [color, " btn"] }), previewStates.map((state) => (_jsx("div", { className: "grid grid-cols-[repeat(3,minmax(0,1fr))] items-stretch gap-2", children: previewStyles.map((style) => (_jsxs("div", { className: "h-full rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-3", children: [_jsxs("span", { className: "text-xs font-semibold tracking-wide text-text-white uppercase", children: [style.label, " (", state.label, ")"] }), _jsx("div", { className: "mt-3 flex flex-col gap-2", children: previewSizes.map((size) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { color: color, variant: style.variant, size: size, title: previewSizeLabel[size], startIcon: icon, isLoading: state.isLoading, disabled: state.disabled, fullwidth: false }), _jsx(Button, { color: color, variant: style.variant, size: size, title: previewSizeLabel[size], isLoading: state.isLoading, disabled: state.disabled, fullwidth: false }), _jsx(Button, { color: color, variant: style.variant, size: size, title: previewSizeLabel[size], endIcon: icon, isLoading: state.isLoading, disabled: state.disabled, fullwidth: false })] }, size))) })] }, style.label))) }, state.label)))] }, color))) }) })),
+};
+export const FigmaPreviewCapsule = {
+    render: () => (_jsx("div", { className: "bg-base-bg2 p-8 min-h-screen", children: _jsx("div", { className: "flex flex-col gap-10", children: previewColors.map((color) => (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("h3", { className: "text-xl font-semibold tracking-wide text-text-white capitalize", children: [color, " btn"] }), previewStates.map((state) => (_jsx("div", { className: "grid grid-cols-[repeat(3,minmax(0,1fr))] items-stretch gap-4", children: previewStyles.map((style) => (_jsxs("div", { className: "h-full rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-3", children: [_jsxs("span", { className: "text-xs font-semibold tracking-wide text-text-white uppercase", children: [style.label, " (", state.label, ")"] }), _jsx("div", { className: "mt-3 flex flex-col gap-2", children: previewSizes.map((size) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { color: color, variant: style.variant, size: size, shape: "capsule", title: previewSizeLabel[size], startIcon: icon, isLoading: state.isLoading, disabled: state.disabled, fullwidth: false }), _jsx(Button, { color: color, variant: style.variant, size: size, shape: "capsule", title: previewSizeLabel[size], isLoading: state.isLoading, disabled: state.disabled, fullwidth: false }), _jsx(Button, { color: color, variant: style.variant, size: size, shape: "capsule", title: previewSizeLabel[size], endIcon: icon, isLoading: state.isLoading, disabled: state.disabled, fullwidth: false })] }, size))) })] }, style.label))) }, state.label)))] }, color))) }) })),
+};

package/dist/components/Checkbox/Checkbox.js

@@ -10,18 +10,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "@heroicons/react/16/solid";
+import { CheckIcon, MinusIcon } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
 const Checkbox = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(CheckboxPrimitive.Root, Object.assign({ ref: ref, className: cn("peer size-4 shrink-0 rounded-[var(--spacing-spacing-xxs,2px)] border border-function-default-solid ring-offset-background", "hover:border-function-default-hover", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:border-state-disable-solid disabled:text-state-disable-outline", {
-            "data-[state=checked]:border-function-active-solid data-[state=checked]:bg-function-active-solid data-[state=checked]:text-function-active-icon": !props.disabled,
-            "hover:data-[state=checked]:border-function-active-hover hover:data-[state=checked]:bg-function-active-hover": !props.disabled,
-            "bg-state-disable-solid": props.checked && props.disabled,
-        }, className) }, props, { children: _jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: _jsx(CheckIcon, { className: "size-4" }) }) })));
+    return (_jsx(CheckboxPrimitive.Root, Object.assign({ ref: ref, className: cn("peer size-4 shrink-0 cursor-pointer rounded-[var(--spacing-spacing-xxs,2px)] border border-function-default-solid ring-offset-background", "hover:border-function-default-hover", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:border-state-disable-solid disabled:text-state-disable-outline disabled:data-[state=checked]:bg-state-disable-solid disabled:data-[state=indeterminate]:bg-state-disable-solid", {
+            "data-[state=checked]:border-function-active-solid data-[state=checked]:bg-function-active-solid data-[state=checked]:text-function-active-icon data-[state=indeterminate]:border-function-active-solid data-[state=indeterminate]:bg-function-active-solid data-[state=indeterminate]:text-function-active-icon": !props.disabled,
+            "hover:data-[state=checked]:border-function-active-hover hover:data-[state=checked]:bg-function-active-hover hover:data-[state=indeterminate]:border-function-active-hover hover:data-[state=indeterminate]:bg-function-active-hover": !props.disabled,
+        }, className) }, props, { children: _jsxs(CheckboxPrimitive.Indicator, { className: cn("flex size-[14px] items-center justify-center text-current", "[&[data-state=checked]_.checkbox-check-icon]:block", "[&[data-state=indeterminate]_.checkbox-minus-icon]:block"), children: [_jsx(CheckIcon, { className: "checkbox-check-icon hidden size-[14px]" }), _jsx(MinusIcon, { className: "checkbox-minus-icon hidden size-[14px]" })] }) })));
 });
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 export { Checkbox };

package/dist/components/Checkbox/Checkbox.stories.js

@@ -29,10 +29,32 @@ export const WithText = {
         return (_jsxs("div", { className: "items-top flex space-x-2", children: [_jsx(Checkbox, { id: "terms1" }), _jsxs("div", { className: "grid gap-1.5 leading-none", children: [_jsx("label", { htmlFor: "terms1", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Accept terms and conditions" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "You agree to our Terms of Service and Privacy Policy." })] })] }));
     },
 };
-export const Diabled = {
+export const Disabled = {
     args: {},
     render: (args) => {
         const props = Object.assign({}, args);
         return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: "terms2", disabled: true }), _jsx("label", { htmlFor: "terms2", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Accept terms and conditions" })] }));
     },
 };
+const checkboxPreviewRows = [
+    { label: "Default", checked: false },
+    { label: "Hover", checked: false, className: "!border-function-default-hover" },
+    { label: "Disable", checked: false, disabled: true },
+    { label: "Checked", checked: true },
+    {
+        label: "Checked - Hover",
+        checked: true,
+        className: "!data-[state=checked]:border-function-active-hover !data-[state=checked]:bg-function-active-hover",
+    },
+    { label: "Checked - Disable", checked: true, disabled: true },
+    { label: "Indeterminate", checked: "indeterminate" },
+    {
+        label: "Indeterminate - Hover",
+        checked: "indeterminate",
+        className: "!data-[state=indeterminate]:border-function-active-hover !data-[state=indeterminate]:bg-function-active-hover",
+    },
+    { label: "Indeterminate - Disable", checked: "indeterminate", disabled: true },
+];
+export const FigmaPreview = {
+    render: () => (_jsx("div", { className: "bg-base-bg2 p-8 min-h-screen", children: _jsx("div", { className: "mx-auto flex w-full max-w-[360px] flex-col gap-4 rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-6", children: checkboxPreviewRows.map((row) => (_jsxs("div", { className: "grid grid-cols-[160px_16px] items-center gap-4", children: [_jsx("span", { className: "text-sm font-medium text-text-white", children: row.label }), _jsx(Checkbox, { checked: row.checked, disabled: row.disabled, className: row.className })] }, row.label))) }) })),
+};

package/dist/components/InputFilter/InputFilter.js

@@ -119,6 +119,6 @@ const InputFilter = forwardRef((_a, ref) => {
         active: !!values.length,
         disabled,
     });
-    return (_jsxs("div", { ref: containerRef, className: `relative ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx("div", { className: filterIconClassName, children: _jsx(Icon, { type: "heroicons", name: "adjustments-horizontal", variant: "outline", color: "inherit", stroke: "inherit", fill: "transparent" }) }) }, props, { ref: ref, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size }), onFocus: handleOnFocus, onKeyDown: handleOnKeyDown })), isFocused && renderOptions()] }));
+    return (_jsxs("div", { ref: containerRef, className: `relative ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx(Icon, { type: "heroicons", name: "adjustments-horizontal", variant: "outline", color: "inherit", stroke: "inherit", fill: "transparent" }), classes: { endIconWrapper: filterIconClassName } }, props, { ref: ref, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size }), onFocus: handleOnFocus, onKeyDown: handleOnKeyDown })), isFocused && renderOptions()] }));
 });
 export { InputFilter };

package/dist/components/InputFilter/InputFilter.styles.js

@@ -1,7 +1,7 @@
 import { cva } from "class-variance-authority";
 export const filterIconVariant = cva([
     // Base styles
-    "absolute contents items-center justify-center cursor-pointer",
+    "absolute flex items-center justify-center cursor-pointer",
     // Border styles
     "border-l border-l-input-default-stroke",
     "peer-hover:border-l-input-active-stroke",

package/dist/components/RadioGroup/RadioGroup.js

@@ -20,7 +20,7 @@ const RadioGroup = React.forwardRef((_a, ref) => {
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 const RadioGroupItem = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(RadioGroupPrimitive.Item, Object.assign({ ref: ref, className: cn("aspect-square box-border size-4 rounded-full border border-function-default-solid text-function-default-solid", "hover:border-function-default-hover", "focus:outline-none", 
+    return (_jsx(RadioGroupPrimitive.Item, Object.assign({ ref: ref, className: cn("aspect-square box-border size-4 cursor-pointer rounded-full border border-function-default-solid text-function-default-solid", "hover:border-function-default-hover", "focus:outline-none", 
         // Disabled state styles
         "data-[disabled]:!border-state-disable-solid data-[disabled]:!fill-state-disable-solid data-[disabled]:!cursor-not-allowed data-[disabled]:!pointer-events-none data-[disabled]:!text-state-disable-solid", 
         // Checked state styles

package/dist/components/RadioGroup/RadioGroup.stories.js

@@ -22,7 +22,7 @@ export const Default = {
         return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsxs(RadioGroup, Object.assign({ defaultValue: "option-one" }, props, { children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-one", id: "option-one" }), _jsx(Label, { htmlFor: "option-one", children: "Option One" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-two", id: "option-two" }), _jsx(Label, { htmlFor: "option-two", children: "Option Two" })] })] })) }));
     },
 };
-export const Diabled = {
+export const Disabled = {
     args: {
         disabled: true,
     },
@@ -40,3 +40,18 @@ export const Horizontal = {
         return (_jsxs(RadioGroup, { defaultValue: "option1", className: "flex flex-row space-x-4", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option1", id: "option1" }), _jsx(Label, { htmlFor: "option1", children: "Option 1" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option2", id: "option2" }), _jsx(Label, { htmlFor: "option2", children: "Option 2" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option3", id: "option3" }), _jsx(Label, { htmlFor: "option3", children: "Option 3" })] })] }));
     },
 };
+const radioPreviewRows = [
+    { label: "Default", checked: false },
+    { label: "Hover", checked: false, className: "!border-function-default-hover" },
+    { label: "Disable", checked: false, disabled: true },
+    { label: "Checked", checked: true },
+    {
+        label: "Checked - Hover",
+        checked: true,
+        className: "!data-[state=checked]:border-function-active-hover !data-[state=checked]:text-function-active-hover",
+    },
+    { label: "Checked - Disable", checked: true, disabled: true },
+];
+export const FigmaPreview = {
+    render: () => (_jsx("div", { className: "bg-base-bg2 p-8 min-h-screen", children: _jsx("div", { className: "mx-auto flex w-full max-w-[360px] flex-col gap-4 rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-6", children: radioPreviewRows.map((row) => (_jsxs("div", { className: "grid grid-cols-[160px_16px] items-center gap-4", children: [_jsx("span", { className: "text-sm font-medium text-text-white", children: row.label }), _jsx(RadioGroup, { defaultValue: row.checked ? "option" : undefined, disabled: row.disabled, children: _jsx(RadioGroupItem, { value: "option", className: row.className }) })] }, row.label))) }) })),
+};