@rovula/ui 0.1.1 → 0.1.3

package/dist/cjs/types/components/ActionButton/ActionButton.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 export type ActionButtonProps = {
     title?: string;
-    size?: "xs" | "sm" | "md" | "lg";
+    size?: "xxs" | "xs" | "sm" | "md" | "lg";
+    shape?: "round" | "capsule";
     variant?: "solid" | "outline" | "icon";
     disabled?: boolean;
     active?: boolean;
@@ -10,7 +11,8 @@ export type ActionButtonProps = {
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 declare const ActionButton: React.ForwardRefExoticComponent<{
     title?: string;
-    size?: "xs" | "sm" | "md" | "lg";
+    size?: "xxs" | "xs" | "sm" | "md" | "lg";
+    shape?: "round" | "capsule";
     variant?: "solid" | "outline" | "icon";
     disabled?: boolean;
     active?: boolean;

package/dist/cjs/types/components/ActionButton/ActionButton.stories.d.ts

@@ -3,7 +3,8 @@ declare const meta: {
     title: string;
     component: React.ForwardRefExoticComponent<{
         title?: string;
-        size?: "xs" | "sm" | "md" | "lg";
+        size?: "xxs" | "xs" | "sm" | "md" | "lg";
+        shape?: "round" | "capsule";
         variant?: "solid" | "outline" | "icon";
         disabled?: boolean;
         active?: boolean;
@@ -11,12 +12,21 @@ declare const meta: {
         className?: string;
     } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
     tags: string[];
+    argTypes: {
+        shape: {
+            control: {
+                type: "inline-radio";
+            };
+            options: string[];
+        };
+    };
     parameters: {
         layout: string;
     };
     decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         title?: string | undefined;
-        size?: "xs" | "sm" | "md" | "lg" | undefined;
+        size?: "xxs" | "xs" | "sm" | "md" | "lg" | undefined;
+        shape?: "round" | "capsule" | undefined;
         variant?: "solid" | "outline" | "icon" | undefined;
         disabled?: boolean | undefined;
         active?: boolean | undefined;
@@ -301,12 +311,24 @@ declare const meta: {
 export default meta;
 export declare const Default: {
     args: {
-        variant: string;
-        size: string;
+        variant: "solid";
+        size: "md";
+        shape: "round";
     };
-    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+    render: (args: {
+        title?: string;
+        size?: "xxs" | "xs" | "sm" | "md" | "lg";
+        shape?: "round" | "capsule";
+        variant?: "solid" | "outline" | "icon";
+        disabled?: boolean;
+        active?: boolean;
+        children?: React.ReactNode;
+        className?: string;
+    } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const FigmaPreview: {
+    render: () => import("react/jsx-runtime").JSX.Element;
 };
-export declare const Preview: {
-    args: {};
-    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+export declare const FigmaPreviewCapsule: {
+    render: () => import("react/jsx-runtime").JSX.Element;
 };

package/dist/cjs/types/components/ActionButton/ActionButton.styles.d.ts

@@ -1,6 +1,7 @@
 export declare const actionButtonVariants: (props?: ({
     variant?: "solid" | "outline" | "icon" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xxs" | "xs" | null | undefined;
+    shape?: "round" | "capsule" | null | undefined;
     disabled?: boolean | null | undefined;
     active?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/cjs/types/components/Avatar/Avatar.styles.d.ts

@@ -1,4 +1,4 @@
 export declare const avatarVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xs" | "xxs" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xxs" | "xs" | null | undefined;
     rounded?: "none" | "normal" | "full" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/cjs/types/components/Button/Button.d.ts

@@ -2,8 +2,9 @@ import React, { ReactElement } from "react";
 export type ButtonProps = {
     title?: string;
     size?: "sm" | "md" | "lg";
+    shape?: "round" | "capsule";
     color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error";
-    variant?: "solid" | "outline" | "flat" | "link";
+    variant?: "solid" | "outline" | "flat" | "text" | "link";
     disabled?: boolean;
     isLoading?: boolean;
     fullwidth?: boolean;
@@ -14,8 +15,9 @@ export type ButtonProps = {
 declare const Button: React.ForwardRefExoticComponent<{
     title?: string;
     size?: "sm" | "md" | "lg";
+    shape?: "round" | "capsule";
     color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error";
-    variant?: "solid" | "outline" | "flat" | "link";
+    variant?: "solid" | "outline" | "flat" | "text" | "link";
     disabled?: boolean;
     isLoading?: boolean;
     fullwidth?: boolean;

package/dist/cjs/types/components/Button/Button.styles.d.ts

@@ -1,7 +1,8 @@
 export declare const buttonVariants: (props?: ({
     color?: "primary" | "secondary" | "tertiary" | "success" | "info" | "warning" | "error" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
-    variant?: "solid" | "outline" | "link" | "flat" | null | undefined;
+    shape?: "round" | "capsule" | null | undefined;
+    variant?: "solid" | "outline" | "link" | "text" | "flat" | null | undefined;
     disabled?: boolean | null | undefined;
     fullwidth?: boolean | null | undefined;
     icon?: "sm" | "md" | "lg" | null | undefined;

package/dist/cjs/types/components/Button/Buttons.stories.d.ts

@@ -4,8 +4,9 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<{
         title?: string;
         size?: "sm" | "md" | "lg";
+        shape?: "round" | "capsule";
         color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error";
-        variant?: "solid" | "outline" | "flat" | "link";
+        variant?: "solid" | "outline" | "flat" | "text" | "link";
         disabled?: boolean;
         isLoading?: boolean;
         fullwidth?: boolean;
@@ -14,14 +15,23 @@ declare const meta: {
         endIcon?: React.ReactElement;
     } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
     tags: string[];
+    argTypes: {
+        shape: {
+            control: {
+                type: "inline-radio";
+            };
+            options: string[];
+        };
+    };
     parameters: {
         layout: string;
     };
     decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         title?: string | undefined;
         size?: "sm" | "md" | "lg" | undefined;
+        shape?: "round" | "capsule" | undefined;
         color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error" | undefined;
-        variant?: "solid" | "outline" | "flat" | "link" | undefined;
+        variant?: "solid" | "outline" | "flat" | "text" | "link" | undefined;
         disabled?: boolean | undefined;
         isLoading?: boolean | undefined;
         fullwidth?: boolean | undefined;
@@ -310,12 +320,14 @@ export declare const Solid: {
         title: string;
         disabled: false;
         isLoading: false;
+        shape: "round";
     };
     render: (args: {
         title?: string;
         size?: "sm" | "md" | "lg";
+        shape?: "round" | "capsule";
         color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error";
-        variant?: "solid" | "outline" | "flat" | "link";
+        variant?: "solid" | "outline" | "flat" | "text" | "link";
         disabled?: boolean;
         isLoading?: boolean;
         fullwidth?: boolean;
@@ -330,12 +342,14 @@ export declare const Outline: {
         variant: "outline";
         disabled: false;
         isLoading: false;
+        shape: "round";
     };
     render: (args: {
         title?: string;
         size?: "sm" | "md" | "lg";
+        shape?: "round" | "capsule";
         color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error";
-        variant?: "solid" | "outline" | "flat" | "link";
+        variant?: "solid" | "outline" | "flat" | "text" | "link";
         disabled?: boolean;
         isLoading?: boolean;
         fullwidth?: boolean;
@@ -350,12 +364,36 @@ export declare const Flat: {
         variant: "flat";
         disabled: false;
         isLoading: false;
+        shape: "round";
+    };
+    render: (args: {
+        title?: string;
+        size?: "sm" | "md" | "lg";
+        shape?: "round" | "capsule";
+        color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error";
+        variant?: "solid" | "outline" | "flat" | "text" | "link";
+        disabled?: boolean;
+        isLoading?: boolean;
+        fullwidth?: boolean;
+        children?: React.ReactNode;
+        startIcon?: React.ReactElement;
+        endIcon?: React.ReactElement;
+    } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Text: {
+    args: {
+        title: string;
+        variant: "text";
+        disabled: false;
+        isLoading: false;
+        shape: "round";
     };
     render: (args: {
         title?: string;
         size?: "sm" | "md" | "lg";
+        shape?: "round" | "capsule";
         color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error";
-        variant?: "solid" | "outline" | "flat" | "link";
+        variant?: "solid" | "outline" | "flat" | "text" | "link";
         disabled?: boolean;
         isLoading?: boolean;
         fullwidth?: boolean;
@@ -370,12 +408,14 @@ export declare const Link: {
         variant: "link";
         disabled: false;
         isLoading: false;
+        shape: "round";
     };
     render: (args: {
         title?: string;
         size?: "sm" | "md" | "lg";
+        shape?: "round" | "capsule";
         color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error";
-        variant?: "solid" | "outline" | "flat" | "link";
+        variant?: "solid" | "outline" | "flat" | "text" | "link";
         disabled?: boolean;
         isLoading?: boolean;
         fullwidth?: boolean;
@@ -384,3 +424,28 @@ export declare const Link: {
         endIcon?: React.ReactElement;
     } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const ShapePreview: {
+    args: {
+        variant: "solid";
+        color: "primary";
+    };
+    render: (args: {
+        title?: string;
+        size?: "sm" | "md" | "lg";
+        shape?: "round" | "capsule";
+        color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error";
+        variant?: "solid" | "outline" | "flat" | "text" | "link";
+        disabled?: boolean;
+        isLoading?: boolean;
+        fullwidth?: boolean;
+        children?: React.ReactNode;
+        startIcon?: React.ReactElement;
+        endIcon?: React.ReactElement;
+    } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const FigmaPreview: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const FigmaPreviewCapsule: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/Checkbox/Checkbox.stories.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import type { CheckedState } from "@radix-ui/react-checkbox";
 declare const meta: {
     title: string;
     component: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-checkbox").CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
@@ -244,7 +245,7 @@ declare const meta: {
         formNoValidate?: boolean | undefined | undefined;
         formTarget?: string | undefined | undefined;
         value?: string | number | readonly string[] | undefined;
-        defaultChecked?: import("@radix-ui/react-checkbox").CheckedState | undefined;
+        defaultChecked?: CheckedState | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
         accessKey?: string | undefined | undefined;
@@ -284,26 +285,29 @@ declare const meta: {
         unselectable?: "on" | "off" | undefined | undefined;
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
-        checked?: import("@radix-ui/react-checkbox").CheckedState | undefined;
+        checked?: CheckedState | undefined;
         required?: boolean | undefined;
         asChild?: boolean | undefined;
-        onCheckedChange?: ((checked: import("@radix-ui/react-checkbox").CheckedState) => void) | undefined;
+        onCheckedChange?: ((checked: CheckedState) => void) | undefined;
         ref?: React.LegacyRef<HTMLButtonElement> | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;
 export declare const Default: {
     args: {
-        checked: boolean;
-        disabled: boolean;
+        checked: false;
+        disabled: false;
     };
-    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+    render: (args: Omit<import("@radix-ui/react-checkbox").CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
 };
 export declare const WithText: {
     args: {};
-    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+    render: (args: Omit<import("@radix-ui/react-checkbox").CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
 };
-export declare const Diabled: {
+export declare const Disabled: {
     args: {};
-    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+    render: (args: Omit<import("@radix-ui/react-checkbox").CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const FigmaPreview: {
+    render: () => import("react/jsx-runtime").JSX.Element;
 };

package/dist/cjs/types/components/Dropdown/Dropdown.stories.d.ts

@@ -364,6 +364,7 @@ declare const meta: {
         src?: string | undefined | undefined;
         iconMode?: "flat" | "solid" | undefined;
         keepCloseIconOnValue?: boolean | undefined;
+        keepFooterSpace?: boolean | undefined;
         labelClassName?: string | undefined;
         classes?: {
             iconWrapper?: string;

package/dist/cjs/types/components/InputFilter/InputFilter.stories.d.ts

@@ -351,6 +351,7 @@ declare const meta: {
         src?: string | undefined | undefined;
         iconMode?: "flat" | "solid" | undefined;
         keepCloseIconOnValue?: boolean | undefined;
+        keepFooterSpace?: boolean | undefined;
         labelClassName?: string | undefined;
         classes?: {
             iconWrapper?: string;

package/dist/cjs/types/components/MaskedTextInput/MaskedTextInput.d.ts

@@ -46,6 +46,7 @@ export declare const MaskedTextInput: React.ForwardRefExoticComponent<{
     required?: boolean;
     isFloatingLabel?: boolean;
     keepCloseIconOnValue?: boolean;
+    keepFooterSpace?: boolean;
     hasClearIcon?: boolean;
     hasSearchIcon?: boolean;
     startIcon?: React.ReactNode;

package/dist/cjs/types/components/MaskedTextInput/MaskedTextInput.stories.d.ts

@@ -17,6 +17,7 @@ declare const meta: {
         required?: boolean;
         isFloatingLabel?: boolean;
         keepCloseIconOnValue?: boolean;
+        keepFooterSpace?: boolean;
         hasClearIcon?: boolean;
         hasSearchIcon?: boolean;
         startIcon?: React.ReactNode;
@@ -63,6 +64,7 @@ declare const meta: {
         required?: boolean | undefined;
         isFloatingLabel?: boolean | undefined;
         keepCloseIconOnValue?: boolean | undefined;
+        keepFooterSpace?: boolean | undefined;
         hasClearIcon?: boolean | undefined;
         hasSearchIcon?: boolean | undefined;
         startIcon?: React.ReactNode;

package/dist/cjs/types/components/PasswordInput/PasswordInput.stories.d.ts

@@ -320,6 +320,7 @@ declare const meta: {
         helperText?: string | undefined;
         errorMessage?: string | undefined;
         keepCloseIconOnValue?: boolean | undefined;
+        keepFooterSpace?: boolean | undefined;
         labelClassName?: string | undefined;
         classes?: {
             iconWrapper?: string;

package/dist/cjs/types/components/RadioGroup/RadioGroup.stories.d.ts

@@ -288,19 +288,22 @@ declare const meta: {
 export default meta;
 export declare const Default: {
     args: {
-        disabled: boolean;
+        disabled: false;
     };
-    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+    render: (args: Omit<import("@radix-ui/react-radio-group").RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 };
-export declare const Diabled: {
+export declare const Disabled: {
     args: {
-        disabled: boolean;
+        disabled: true;
     };
-    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+    render: (args: Omit<import("@radix-ui/react-radio-group").RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 };
 export declare const Horizontal: {
     args: {
-        disabled: boolean;
+        disabled: true;
     };
-    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+    render: (args: Omit<import("@radix-ui/react-radio-group").RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const FigmaPreview: {
+    render: () => import("react/jsx-runtime").JSX.Element;
 };

package/dist/cjs/types/components/Search/Search.stories.d.ts

@@ -345,6 +345,7 @@ declare const meta: {
         src?: string | undefined | undefined;
         iconMode?: "flat" | "solid" | undefined;
         keepCloseIconOnValue?: boolean | undefined;
+        keepFooterSpace?: boolean | undefined;
         labelClassName?: string | undefined;
         classes?: {
             iconWrapper?: string;

package/dist/cjs/types/components/TextInput/TextInput.d.ts

@@ -15,6 +15,7 @@ export type InputProps = {
     required?: boolean;
     isFloatingLabel?: boolean;
     keepCloseIconOnValue?: boolean;
+    keepFooterSpace?: boolean;
     hasClearIcon?: boolean;
     hasSearchIcon?: boolean;
     startIcon?: ReactNode;
@@ -49,6 +50,7 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     required?: boolean;
     isFloatingLabel?: boolean;
     keepCloseIconOnValue?: boolean;
+    keepFooterSpace?: boolean;
     hasClearIcon?: boolean;
     hasSearchIcon?: boolean;
     startIcon?: ReactNode;

package/dist/cjs/types/components/TextInput/TextInput.stories.d.ts

@@ -17,6 +17,7 @@ declare const meta: {
         required?: boolean;
         isFloatingLabel?: boolean;
         keepCloseIconOnValue?: boolean;
+        keepFooterSpace?: boolean;
         hasClearIcon?: boolean;
         hasSearchIcon?: boolean;
         startIcon?: React.ReactNode;
@@ -55,6 +56,7 @@ declare const meta: {
         required?: boolean | undefined;
         isFloatingLabel?: boolean | undefined;
         keepCloseIconOnValue?: boolean | undefined;
+        keepFooterSpace?: boolean | undefined;
         hasClearIcon?: boolean | undefined;
         hasSearchIcon?: boolean | undefined;
         startIcon?: React.ReactNode;
@@ -396,3 +398,11 @@ export declare const CustomIcon: {
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const KeepFooterSpace: {
+    args: {
+        label: string;
+        fullwidth: boolean;
+        keepFooterSpace: boolean;
+    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/TextInput/TextInput.styles.d.ts

@@ -23,6 +23,21 @@ export declare const helperTextVariant: (props?: ({
     disabled?: boolean | null | undefined;
     error?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const inlineEndIconWrapperVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const inlineStartIconWrapperVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const iconActionVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const segmentedIconWrapperVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    rounded?: "none" | "normal" | "full" | null | undefined;
+    error?: boolean | null | undefined;
+    position?: "end" | "start" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const iconWrapperVariant: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/components/ActionButton/ActionButton.js

@@ -14,9 +14,10 @@ import { cn } from "@/utils/cn";
 import { forwardRef } from "react";
 import { actionButtonVariants } from "./ActionButton.styles";
 const ActionButton = forwardRef((_a, ref) => {
-    var { children, disabled, active, className, size, variant } = _a, props = __rest(_a, ["children", "disabled", "active", "className", "size", "variant"]);
+    var { children, disabled, active, className, size, shape, variant } = _a, props = __rest(_a, ["children", "disabled", "active", "className", "size", "shape", "variant"]);
     const actionButtonClassname = actionButtonVariants({
         size,
+        shape,
         variant,
         active,
         disabled,

package/dist/components/ActionButton/ActionButton.stories.js

@@ -6,6 +6,12 @@ const meta = {
     title: "Components/ActionButton",
     component: ActionButton,
     tags: ["autodocs"],
+    argTypes: {
+        shape: {
+            control: { type: "inline-radio" },
+            options: ["round", "capsule"],
+        },
+    },
     parameters: {
         layout: "fullscreen",
     },
@@ -18,18 +24,45 @@ export const Default = {
     args: {
         variant: "solid",
         size: "md",
+        shape: "round",
     },
     render: (args) => {
-        console.log("args ", args);
         const props = Object.assign({}, args);
         return (_jsx("div", { className: "flex flex-row gap-2 items-start", children: _jsx(ActionButton, Object.assign({}, props, { children: _jsx(Icon, { type: "heroicons", name: "arrow-left" }) })) }));
     },
 };
-export const Preview = {
-    args: {},
-    render: (args) => {
-        console.log("args ", args);
-        const props = Object.assign({}, args);
-        return (_jsxs("div", { className: "flex flex-col gap-2 w-full  p-20", children: [_jsxs("div", { className: "flex flex-row justify-between items-center", children: [_jsx("h6", { className: "w-[20px] text-white", children: "Default:" }), _jsxs("div", { className: "flex flex-row gap-2 items-start ", children: [_jsx(ActionButton, { variant: "solid", size: "lg", children: _jsx(Icon, { type: "heroicons", name: "arrows-up-down" }) }), _jsx(ActionButton, { variant: "solid", size: "md", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "sm", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "xs", children: _jsx(ArrowsUpDownIcon, {}) })] }), _jsxs("div", { className: "flex flex-row gap-2 items-start", children: [_jsx(ActionButton, { variant: "outline", size: "lg", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "md", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "sm", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "xs", children: _jsx(ArrowsUpDownIcon, {}) })] }), _jsxs("div", { className: "flex flex-row gap-2 items-start", children: [_jsx(ActionButton, { variant: "icon", size: "lg", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "md", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "sm", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "xs", children: _jsx(ArrowsUpDownIcon, {}) })] })] }), _jsxs("div", { className: "flex flex-row justify-between", children: [_jsx("h6", { className: "w-[20px] text-white", children: "Active:" }), _jsxs("div", { className: "flex flex-row gap-2 items-start", children: [_jsx(ActionButton, { variant: "solid", size: "lg", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "md", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "sm", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "xs", active: true, children: _jsx(ArrowsUpDownIcon, {}) })] }), _jsxs("div", { className: "flex flex-row gap-2 items-start", children: [_jsx(ActionButton, { variant: "outline", size: "lg", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "md", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "sm", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "xs", active: true, children: _jsx(ArrowsUpDownIcon, {}) })] }), _jsxs("div", { className: "flex flex-row gap-2 items-start", children: [_jsx(ActionButton, { variant: "icon", size: "lg", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "md", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "sm", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "xs", active: true, children: _jsx(ArrowsUpDownIcon, {}) })] })] }), _jsxs("div", { className: "flex flex-row justify-between", children: [_jsx("h6", { className: "w-[20px] text-white", children: "Disabled:" }), _jsxs("div", { className: "flex flex-row gap-2 items-start", children: [_jsx(ActionButton, { variant: "solid", size: "lg", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "md", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "sm", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "xs", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) })] }), _jsxs("div", { className: "flex flex-row gap-2 items-start", children: [_jsx(ActionButton, { variant: "outline", size: "lg", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "md", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "sm", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "xs", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) })] }), _jsxs("div", { className: "flex flex-row gap-2 items-start", children: [_jsx(ActionButton, { variant: "icon", size: "lg", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "md", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "sm", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "xs", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) })] })] })] }));
+const previewVariants = [
+    { label: "Solid", variant: "solid", sizes: ["lg", "md", "sm"] },
+    { label: "Outline", variant: "outline", sizes: ["lg", "md", "sm"] },
+    { label: "Icon", variant: "icon", sizes: ["lg", "md", "sm", "xs", "xxs"] },
+];
+const previewStates = [
+    { label: "Default", key: "default" },
+    { label: "Hover", key: "hover" },
+    { label: "Active", key: "active" },
+    { label: "Active - Hover", key: "active-hover" },
+    { label: "Disable", key: "disable" },
+];
+const forcedStateClassName = {
+    default: {},
+    hover: {
+        solid: "!bg-action-button-solid-hover !border-action-button-solid-hover !text-action-button-solid-hover !fill-action-button-solid-hover",
+        outline: "!bg-action-button-outline-hover !ring-[var(--action-button-outline-hover-border)] !text-action-button-outline-hover !fill-action-button-outline-hover",
+        icon: "!bg-action-button-icon-hover !text-action-button-icon-hover !fill-action-button-icon-hover",
     },
+    active: {},
+    "active-hover": {
+        solid: "!bg-action-button-solid-active-hover !border-action-button-solid-active-hover !text-action-button-solid-active-hover !fill-action-button-solid-active-hover",
+        outline: "!bg-action-button-outline-active-hover !ring-[var(--action-button-outline-active-hover-border)] !text-action-button-outline-active-hover !fill-action-button-outline-active-hover",
+        icon: "!bg-action-button-icon-active-hover !text-action-button-icon-active-hover !fill-action-button-icon-active-hover",
+    },
+    disable: {},
+};
+const icon = _jsx(ArrowsUpDownIcon, {});
+const renderPreview = (shape) => (_jsx("div", { className: "bg-base-bg2 p-8 min-h-screen", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("h3", { className: "text-xl font-semibold tracking-wide text-text-white", children: "Function button" }), previewStates.map((state) => (_jsxs("div", { className: "grid grid-cols-[120px_repeat(3,minmax(0,1fr))] items-stretch gap-4", children: [_jsx("span", { className: "pt-3 text-sm font-semibold text-text-white", children: state.label }), previewVariants.map((previewVariant) => (_jsxs("div", { className: "h-full rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-3", children: [_jsx("span", { className: "text-xs font-semibold tracking-wide text-text-white uppercase", children: previewVariant.label }), _jsx("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: previewVariant.sizes.map((size) => (_jsx(ActionButton, { variant: previewVariant.variant, size: size, shape: shape, active: state.key === "active" || state.key === "active-hover", disabled: state.key === "disable", className: forcedStateClassName[state.key][previewVariant.variant], children: icon }, `${previewVariant.variant}-${size}-${state.key}`))) })] }, previewVariant.variant)))] }, state.key)))] }) }));
+export const FigmaPreview = {
+    render: () => renderPreview("round"),
+};
+export const FigmaPreviewCapsule = {
+    render: () => renderPreview("capsule"),
 };