@rovula/ui 0.1.2 → 0.1.4

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

@@ -3,10 +3,18 @@ declare const meta: {
     title: string;
     component: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-toast").ToastProps & React.RefAttributes<HTMLLIElement>, "ref"> & import("class-variance-authority").VariantProps<(props?: ({
         variant?: "default" | "success" | "info" | "warning" | "error" | null | undefined;
+        showBorder?: boolean | null | undefined;
     } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLLIElement>>;
     tags: string[];
     parameters: {
         layout: string;
+        backgrounds: {
+            default: string;
+            values: {
+                name: string;
+                value: string;
+            }[];
+        };
     };
     decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         suppressHydrationWarning?: boolean | undefined | undefined;
@@ -323,6 +331,7 @@ declare const meta: {
             };
         }>, "currentTarget">) => void) | undefined;
         variant?: "default" | "success" | "info" | "warning" | "error" | null | undefined;
+        showBorder?: boolean | null | undefined;
         ref?: React.LegacyRef<HTMLLIElement> | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
@@ -341,15 +350,20 @@ export declare const Simple: {
             control: "select";
             options: string[];
         };
+        showBorder: {
+            control: "boolean";
+        };
     };
     args: {
         variant: "default";
         contentMode: "horizontal";
         position: "top-center";
+        showBorder: false;
     };
     render: (args: {
         variant: "default" | "success" | "info" | "warning" | "error" | null | undefined;
         contentMode: "horizontal" | "vertical";
+        showBorder: boolean;
         position?: "top-center" | "top-left" | "top-right" | "bottom-center" | "bottom-left" | "bottom-right" | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -1,5 +1,6 @@
 export declare const toastVariants: (props?: ({
     variant?: "default" | "success" | "info" | "warning" | "error" | null | undefined;
+    showBorder?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const toastViewportVariants: (props?: ({
     position?: "top-center" | "top-left" | "top-right" | "bottom-center" | "bottom-left" | "bottom-right" | null | undefined;

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,
     },

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 };