@rovula/ui 0.1.2 → 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/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/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"),
 };

package/dist/components/ActionButton/ActionButton.styles.js

@@ -8,24 +8,28 @@ export const actionButtonVariants = cva(["box-border flex items-center justify-c
                 "active:bg-action-button-solid-pressed active:border-action-button-solid-pressed active:text-action-button-solid-pressed active:fill-action-button-solid-pressed",
             ],
             outline: [
-                "border",
-                "bg-action-button-outline-default border-action-button-outline-default text-action-button-outline-default fill-action-button-outline-default",
-                "hover:bg-action-button-outline-hover hover:border-action-button-outline-hover hover:text-action-button-outline-hover hover:fill-action-button-outline-hover",
-                "active:bg-action-button-outline-pressed active:border-action-button-outline-pressed active:text-action-button-outline-pressed active:fill-action-button-outline-pressed",
+                "ring-1 ring-inset",
+                "bg-action-button-outline-default text-action-button-outline-default fill-action-button-outline-default ring-[var(--action-button-outline-default-border)]",
+                "hover:bg-action-button-outline-hover hover:text-action-button-outline-hover hover:fill-action-button-outline-hover hover:ring-[var(--action-button-outline-hover-border)]",
+                "active:bg-action-button-outline-pressed active:text-action-button-outline-pressed active:fill-action-button-outline-pressed active:ring-[var(--action-button-outline-pressed-border)]",
             ],
             icon: [
-                "rounded-full",
                 "bg-action-button-icon-default border-action-button-icon-default text-action-button-icon-default fill-action-button-icon-default",
                 "hover:bg-action-button-icon-hover hover:border-action-button-icon-hover hover:text-action-button-icon-hover hover:fill-action-button-icon-hover",
                 "active:bg-action-button-icon-pressed active:border-action-button-icon-pressed active:text-action-button-icon-pressed active:fill-action-button-icon-pressed",
             ],
         },
         size: {
+            xxs: "",
             xs: "",
             sm: "",
             md: "",
             lg: "",
         },
+        shape: {
+            round: "",
+            capsule: "",
+        },
         disabled: {
             false: "",
         },
@@ -47,9 +51,9 @@ export const actionButtonVariants = cva(["box-border flex items-center justify-c
             variant: "outline",
             active: true,
             className: [
-                "bg-action-button-outline-active border-action-button-outline-active text-action-button-outline-active fill-action-button-outline-active",
-                "hover:bg-action-button-outline-active-hover hover:border-action-button-outline-active-hover hover:text-action-button-outline-active-hover hover:fill-action-button-outline-active-hover",
-                "active:bg-action-button-outline-active-pressed active:border-action-button-outline-active-pressed active:text-action-button-outline-active-pressed active:fill-action-button-outline-active-pressed",
+                "bg-action-button-outline-active text-action-button-outline-active fill-action-button-outline-active ring-[var(--action-button-outline-active-border)]",
+                "hover:bg-action-button-outline-active-hover hover:text-action-button-outline-active-hover hover:fill-action-button-outline-active-hover hover:ring-[var(--action-button-outline-active-hover-border)]",
+                "active:bg-action-button-outline-active-pressed active:text-action-button-outline-active-pressed active:fill-action-button-outline-active-pressed active:ring-[var(--action-button-outline-active-pressed-border)]",
             ],
         },
         {
@@ -64,42 +68,97 @@ export const actionButtonVariants = cva(["box-border flex items-center justify-c
         {
             size: "lg",
             variant: ["solid", "outline"],
-            className: "px-lg py-md [&_svg]:size-[32px] rounded-md",
+            className: "px-[12px] py-[12px] [&_svg]:size-[32px]",
         },
         {
             size: "md",
             variant: ["solid", "outline"],
-            className: "px-md py-sm [&_svg]:size-[22px] rounded-md",
+            className: "px-[8px] py-[8px] [&_svg]:size-[22px]",
         },
         {
             size: "sm",
             variant: ["solid", "outline"],
-            className: "px-sm py-xs [&_svg]:size-[22px] rounded-sm",
+            className: "px-[4px] py-[4px] [&_svg]:size-[22px]",
         },
         {
             size: "xs",
             variant: ["solid", "outline"],
-            className: "px-xs py-xxs [&_svg]:size-[14px] rounded-xs",
+            className: "px-[2px] py-[2px] [&_svg]:size-[14px]",
         },
         {
             size: "lg",
             variant: "icon",
-            className: "px-lg py-lg [&_svg]:size-[32px] rounded-full",
+            className: "px-[12px] py-[12px] [&_svg]:size-[32px]",
         },
         {
             size: "md",
             variant: "icon",
-            className: "px-md py-md [&_svg]:size-[22px] rounded-full",
+            className: "px-[8px] py-[8px] [&_svg]:size-[22px]",
         },
         {
             size: "sm",
             variant: "icon",
-            className: "px-xs py-xs [&_svg]:size-[22px] rounded-full",
+            className: "px-[4px] py-[4px] [&_svg]:size-[22px]",
+        },
+        {
+            size: "xxs",
+            variant: "icon",
+            className: "px-[1px] py-[1px] [&_svg]:size-[12px]",
         },
         {
             size: "xs",
             variant: "icon",
-            className: "px-xxs py-xxs [&_svg]:size-[14px] rounded-full",
+            className: "px-[2px] py-[2px] [&_svg]:size-[14px]",
+        },
+        {
+            size: "lg",
+            shape: "round",
+            className: "rounded-[var(--function-button-l-round)]",
+        },
+        {
+            size: "md",
+            shape: "round",
+            className: "rounded-[var(--function-button-m-round)]",
+        },
+        {
+            size: "sm",
+            shape: "round",
+            className: "rounded-[var(--function-button-s-round)]",
+        },
+        {
+            size: "xs",
+            shape: "round",
+            className: "rounded-[var(--function-button-xs-round)]",
+        },
+        {
+            size: "xxs",
+            shape: "round",
+            className: "rounded-[var(--function-button-xxs-round)]",
+        },
+        {
+            size: "lg",
+            shape: "capsule",
+            className: "rounded-[var(--function-button-l-capsule)]",
+        },
+        {
+            size: "md",
+            shape: "capsule",
+            className: "rounded-[var(--function-button-m-capsule)]",
+        },
+        {
+            size: "sm",
+            shape: "capsule",
+            className: "rounded-[var(--function-button-s-capsule)]",
+        },
+        {
+            size: "xxs",
+            shape: "capsule",
+            className: "rounded-[var(--function-button-xxs-capsule)]",
+        },
+        {
+            size: "xs",
+            shape: "capsule",
+            className: "rounded-[var(--function-button-xs-capsule)]",
         },
         {
             variant: "solid",
@@ -114,7 +173,7 @@ export const actionButtonVariants = cva(["box-border flex items-center justify-c
             disabled: true,
             className: [
                 "pointer-events-none",
-                "bg-action-button-outline-disabled border-action-button-outline-disabled text-action-button-outline-disabled fill-action-button-outline-disabled",
+                "bg-action-button-outline-disabled text-action-button-outline-disabled fill-action-button-outline-disabled ring-[var(--action-button-outline-disabled-border)]",
             ],
         },
         {
@@ -129,6 +188,7 @@ export const actionButtonVariants = cva(["box-border flex items-center justify-c
     defaultVariants: {
         size: "md",
         variant: "solid",
+        shape: "round",
         disabled: false,
         active: false,
     },