@techsio/ui-kit 0.3.2 → 0.4.0

package/dist/atoms/button.js

@@ -1,256 +1,257 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { tv } from "../utils.js";
 import { Icon } from "./icon.js";
 const buttonVariants = tv({
     base: [
-        'relative',
-        'inline-flex items-baseline justify-center cursor-pointer',
-        'font-medium',
-        'transition-all duration-200',
-        'focus:outline-none',
-        'focus-visible:ring',
-        'focus-visible:ring-button-ring',
-        'disabled:text-button-fg-disabled disabled:pointer-events-none'
+        "relative",
+        "inline-flex cursor-pointer items-center justify-center",
+        "font-medium",
+        "transition-all duration-200 motion-reduce:transition-none",
+        "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+        "focus-visible:outline-button-ring",
+        "focus-visible:outline-offset-(length:--default-ring-offset)",
+        "disabled:cursor-not-allowed disabled:text-button-fg-disabled"
     ],
     variants: {
         variant: {
-            primary: '',
-            secondary: '',
-            tertiary: '',
-            danger: '',
-            warning: ''
+            primary: "",
+            secondary: "",
+            tertiary: "",
+            danger: "",
+            warning: ""
         },
         theme: {
-            solid: 'disabled:bg-button-bg-disabled',
-            light: 'disabled:bg-button-bg-disabled',
-            borderless: 'bg-button-bg-borderless hover:bg-button-bg-borderless-hover active:bg-button-bg-borderless-active',
-            outlined: 'border disabled:border-button-border-disabled',
-            unstyled: ''
+            solid: "disabled:bg-button-bg-disabled",
+            light: "disabled:bg-button-bg-disabled",
+            borderless: "bg-button-bg-borderless hover:bg-button-bg-borderless-hover active:bg-button-bg-borderless-active disabled:hover:bg-button-bg-borderless",
+            outlined: "border bg-button-bg-outlined disabled:border-button-border-disabled disabled:hover:bg-button-bg-outlined",
+            unstyled: ""
         },
         uppercase: {
-            true: 'uppercase'
+            true: "uppercase"
         },
         size: {
-            sm: 'p-button-sm text-button-sm rounded-button-sm gap-button-sm',
-            md: 'p-button-md text-button-md rounded-button-md gap-button-md',
-            lg: 'p-button-lg text-button-lg rounded-button-lg gap-button-lg',
-            current: 'text-inherit gap-button-md'
+            sm: "h-form-control-sm gap-button-sm rounded-button-sm p-button-sm text-button-sm",
+            md: "h-form-control-md gap-button-md rounded-button-md p-button-md text-button-md",
+            lg: "gap-button-lg rounded-button-lg p-button-lg text-button-lg",
+            current: "gap-button-md text-inherit"
         },
         block: {
-            true: 'w-full'
+            true: "w-full"
         }
     },
     compoundVariants: [
         {
-            variant: 'primary',
-            theme: 'solid',
+            variant: "primary",
+            theme: "solid",
             className: [
-                'bg-button-bg-primary',
-                'hover:bg-button-bg-primary-hover',
-                'active:bg-button-bg-primary-active',
-                'text-button-fg-primary'
+                "bg-button-bg-primary",
+                "hover:bg-button-bg-primary-hover",
+                "active:bg-button-bg-primary-active",
+                "text-button-fg-primary"
             ]
         },
         {
-            variant: 'secondary',
-            theme: 'solid',
+            variant: "secondary",
+            theme: "solid",
             className: [
-                'bg-button-bg-secondary',
-                'hover:bg-button-bg-secondary-hover',
-                'active:bg-button-bg-secondary-active',
-                'text-button-fg-secondary'
+                "bg-button-bg-secondary",
+                "hover:bg-button-bg-secondary-hover",
+                "active:bg-button-bg-secondary-active",
+                "text-button-fg-secondary"
             ]
         },
         {
-            variant: 'tertiary',
-            theme: 'solid',
+            variant: "tertiary",
+            theme: "solid",
             className: [
-                'bg-button-bg-tertiary',
-                'hover:bg-button-bg-tertiary-hover',
-                'active:bg-button-bg-tertiary-active',
-                'text-button-fg-tertiary'
+                "bg-button-bg-tertiary",
+                "hover:bg-button-bg-tertiary-hover",
+                "active:bg-button-bg-tertiary-active",
+                "text-button-fg-tertiary"
             ]
         },
         {
-            variant: 'warning',
-            theme: 'solid',
+            variant: "warning",
+            theme: "solid",
             className: [
-                'bg-button-bg-warning',
-                'hover:bg-button-bg-warning-hover',
-                'active:bg-button-bg-warning-active',
-                'text-button-fg-warning'
+                "bg-button-bg-warning",
+                "hover:bg-button-bg-warning-hover",
+                "active:bg-button-bg-warning-active",
+                "text-button-fg-warning"
             ]
         },
         {
-            variant: 'danger',
-            theme: 'solid',
+            variant: "danger",
+            theme: "solid",
             className: [
-                'bg-button-bg-danger',
-                'hover:bg-button-bg-danger-hover',
-                'active:bg-button-bg-danger-active',
-                'text-button-fg-danger'
+                "bg-button-bg-danger",
+                "hover:bg-button-bg-danger-hover",
+                "active:bg-button-bg-danger-active",
+                "text-button-fg-danger"
             ]
         },
         {
-            variant: 'primary',
-            theme: 'light',
+            variant: "primary",
+            theme: "light",
             className: [
-                'bg-button-bg-primary-light',
-                'hover:bg-button-bg-primary-light-hover',
-                'active:bg-button-bg-primary-light-active',
-                'text-button-fg-primary-light'
+                "bg-button-bg-primary-light",
+                "hover:bg-button-bg-primary-light-hover",
+                "active:bg-button-bg-primary-light-active",
+                "text-button-fg-primary-light"
             ]
         },
         {
-            variant: 'secondary',
-            theme: 'light',
+            variant: "secondary",
+            theme: "light",
             className: [
-                'bg-button-bg-secondary-light',
-                'hover:bg-button-bg-secondary-light-hover',
-                'active:bg-button-bg-secondary-light-active',
-                'text-button-fg-secondary-light'
+                "bg-button-bg-secondary-light",
+                "hover:bg-button-bg-secondary-light-hover",
+                "active:bg-button-bg-secondary-light-active",
+                "text-button-fg-secondary-light"
             ]
         },
         {
-            variant: 'tertiary',
-            theme: 'light',
+            variant: "tertiary",
+            theme: "light",
             className: [
-                'bg-button-bg-tertiary-light',
-                'hover:bg-button-bg-tertiary-light-hover',
-                'active:bg-button-bg-tertiary-light-active',
-                'text-button-fg-tertiary-light'
+                "bg-button-bg-tertiary-light",
+                "hover:bg-button-bg-tertiary-light-hover",
+                "active:bg-button-bg-tertiary-light-active",
+                "text-button-fg-tertiary-light"
             ]
         },
         {
-            variant: 'warning',
-            theme: 'light',
+            variant: "warning",
+            theme: "light",
             className: [
-                'bg-button-bg-warning-light',
-                'hover:bg-button-bg-warning-light-hover',
-                'active:bg-button-bg-warning-light-active',
-                'text-button-fg-warning-light'
+                "bg-button-bg-warning-light",
+                "hover:bg-button-bg-warning-light-hover",
+                "active:bg-button-bg-warning-light-active",
+                "text-button-fg-warning-light"
             ]
         },
         {
-            variant: 'danger',
-            theme: 'light',
+            variant: "danger",
+            theme: "light",
             className: [
-                'bg-button-bg-danger-light',
-                'hover:bg-button-bg-danger-light-hover',
-                'active:bg-button-bg-danger-light-active',
-                'text-button-fg-danger-light'
+                "bg-button-bg-danger-light",
+                "hover:bg-button-bg-danger-light-hover",
+                "active:bg-button-bg-danger-light-active",
+                "text-button-fg-danger-light"
             ]
         },
         {
-            variant: 'primary',
-            theme: 'outlined',
+            variant: "primary",
+            theme: "outlined",
             className: [
-                'border-button-border-primary',
-                'hover:bg-button-bg-outlined-primary-hover',
-                'active:bg-button-bg-outlined-primary-active',
-                'text-button-fg-outlined-primary'
+                "border-button-border-primary",
+                "hover:bg-button-bg-outlined-primary-hover",
+                "active:bg-button-bg-outlined-primary-active",
+                "text-button-fg-outlined-primary"
             ]
         },
         {
-            variant: 'secondary',
-            theme: 'outlined',
+            variant: "secondary",
+            theme: "outlined",
             className: [
-                'border-button-border-secondary',
-                'hover:bg-button-bg-outlined-secondary-hover',
-                'active:bg-button-bg-outlined-secondary-active',
-                'text-button-fg-outlined-secondary'
+                "border-button-border-secondary",
+                "hover:bg-button-bg-outlined-secondary-hover",
+                "active:bg-button-bg-outlined-secondary-active",
+                "text-button-fg-outlined-secondary"
             ]
         },
         {
-            variant: 'tertiary',
-            theme: 'outlined',
+            variant: "tertiary",
+            theme: "outlined",
             className: [
-                'border-button-border-tertiary',
-                'hover:bg-button-bg-outlined-tertiary-hover',
-                'active:bg-button-bg-outlined-tertiary-active',
-                'text-button-fg-outlined-tertiary'
+                "border-button-border-tertiary",
+                "hover:bg-button-bg-outlined-tertiary-hover",
+                "active:bg-button-bg-outlined-tertiary-active",
+                "text-button-fg-outlined-tertiary"
             ]
         },
         {
-            variant: 'warning',
-            theme: 'outlined',
+            variant: "warning",
+            theme: "outlined",
             className: [
-                'border-button-border-warning',
-                'hover:bg-button-bg-outlined-warning-hover',
-                'active:bg-button-bg-outlined-warning-active',
-                'text-button-fg-outlined-warning'
+                "border-button-border-warning",
+                "hover:bg-button-bg-outlined-warning-hover",
+                "active:bg-button-bg-outlined-warning-active",
+                "text-button-fg-outlined-warning"
             ]
         },
         {
-            variant: 'danger',
-            theme: 'outlined',
+            variant: "danger",
+            theme: "outlined",
             className: [
-                'border-button-border-danger',
-                'hover:bg-button-bg-outlined-danger-hover',
-                'active:bg-button-bg-outlined-danger-active',
-                'text-button-fg-outlined-danger'
+                "border-button-border-danger",
+                "hover:bg-button-bg-outlined-danger-hover",
+                "active:bg-button-bg-outlined-danger-active",
+                "text-button-fg-outlined-danger"
             ]
         },
         {
-            variant: 'primary',
-            theme: 'borderless',
+            variant: "primary",
+            theme: "borderless",
             className: [
-                'text-button-fg-primary-borderless'
+                "text-button-fg-primary-borderless"
             ]
         },
         {
-            variant: 'secondary',
-            theme: 'borderless',
+            variant: "secondary",
+            theme: "borderless",
             className: [
-                'text-button-fg-secondary-borderless'
+                "text-button-fg-secondary-borderless"
             ]
         },
         {
-            variant: 'tertiary',
-            theme: 'borderless',
+            variant: "tertiary",
+            theme: "borderless",
             className: [
-                'text-button-fg-tertiary-borderless'
+                "text-button-fg-tertiary-borderless"
             ]
         },
         {
-            variant: 'warning',
-            theme: 'borderless',
+            variant: "warning",
+            theme: "borderless",
             className: [
-                'text-button-fg-warning-borderless'
+                "text-button-fg-warning-borderless"
             ]
         },
         {
-            variant: 'danger',
-            theme: 'borderless',
+            variant: "danger",
+            theme: "borderless",
             className: [
-                'text-button-fg-danger-borderless'
+                "text-button-fg-danger-borderless"
             ]
         },
         {
-            theme: 'outlined',
-            size: 'sm',
-            className: 'border-(length:--border-button-width-sm)'
+            theme: "outlined",
+            size: "sm",
+            className: "border-(length:--border-button-width-sm)"
         },
         {
-            theme: 'outlined',
-            size: 'md',
-            className: 'border-(length:--border-button-width-md)'
+            theme: "outlined",
+            size: "md",
+            className: "border-(length:--border-button-width-md)"
         },
         {
-            theme: 'outlined',
-            size: 'lg',
-            className: 'border-(length:--border-button-width-lg)'
+            theme: "outlined",
+            size: "lg",
+            className: "border-(length:--border-button-width-lg)"
         }
     ],
     defaultVariants: {
-        variant: 'primary',
-        theme: 'solid',
-        size: 'md',
+        variant: "primary",
+        theme: "solid",
+        size: "md",
         light: false
     }
 });
-function Button({ variant, theme, size, block, isLoading, icon, iconPosition = 'left', uppercase = false, children, className, ...props }) {
-    return /*#__PURE__*/ jsxs("button", {
+function Button({ variant, theme, size, block, isLoading, loadingText, icon, iconPosition = "left", iconSize, uppercase = false, children, className, disabled: disabledProp, ...props }) {
+    const disabled = isLoading || disabledProp;
+    return /*#__PURE__*/ jsx("button", {
         className: buttonVariants({
             variant,
             theme,
@@ -259,17 +260,29 @@ function Button({ variant, theme, size, block, isLoading, icon, iconPosition = '
             uppercase,
             className
         }),
-        disabled: isLoading,
+        disabled: disabled,
         ...props,
-        children: [
-            icon && 'left' === iconPosition && /*#__PURE__*/ jsx(Icon, {
-                icon: icon
-            }),
-            children,
-            icon && 'right' === iconPosition && /*#__PURE__*/ jsx(Icon, {
-                icon: icon
-            })
-        ]
+        children: isLoading ? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(Icon, {
+                    className: "mr-2",
+                    icon: "token-icon-button-spinner"
+                }),
+                loadingText || children
+            ]
+        }) : /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                icon && "left" === iconPosition && /*#__PURE__*/ jsx(Icon, {
+                    icon: icon,
+                    size: iconSize
+                }),
+                children,
+                icon && "right" === iconPosition && /*#__PURE__*/ jsx(Icon, {
+                    icon: icon,
+                    size: iconSize
+                })
+            ]
+        })
     });
 }
 export { Button, buttonVariants };

package/dist/atoms/checkbox.js

@@ -0,0 +1,52 @@
+import { jsx } from "react/jsx-runtime";
+import { tv } from "../utils.js";
+const checkboxVariants = tv({
+    base: [
+        "relative shrink-0 cursor-pointer appearance-none",
+        "size-checkbox",
+        "rounded-checkbox border border-checkbox-border",
+        "bg-checkbox-bg",
+        "after:-translate-x-1/2 after:-translate-y-1/2 after:absolute after:top-1/2 after:left-1/2",
+        "checked:bg-checkbox-bg-checked",
+        "checked:border-checkbox-border-checked",
+        "checked:after:token-icon-checkbox",
+        "checked:text-checkbox-fg-checked",
+        "indeterminate:bg-checkbox-bg-indeterminate",
+        "indeterminate:border-checkbox-border-indeterminate",
+        "indeterminate:after:size-checkbox-indeterminate-icon",
+        "indeterminate:after:rounded-full",
+        "indeterminate:after:bg-checkbox-fg-indeterminate",
+        "disabled:cursor-not-allowed",
+        "disabled:bg-checkbox-bg-disabled",
+        "disabled:text-checkbox-fg-disabled",
+        "disabled:border-checkbox-border-disabled",
+        "disabled:checked:bg-checkbox-bg-disabled",
+        "disabled:checked:text-checkbox-fg-disabled",
+        "disabled:checked:border-checkbox-border-disabled",
+        "transition-all duration-200 motion-reduce:transition-none",
+        "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+        "focus-visible:outline-checkbox-ring-focus",
+        "focus-visible:outline-offset-(length:--default-ring-offset)",
+        "data-invalid:border-(length:--border-width-validation)",
+        "data-invalid:border-checkbox-border-error"
+    ]
+});
+function Checkbox({ className, indeterminate, invalid, ref, ...props }) {
+    const setIndeterminate = (node)=>{
+        if (node) node.indeterminate = indeterminate ?? false;
+        if ("function" == typeof ref) ref(node);
+        else if (ref) ref.current = node;
+    };
+    return /*#__PURE__*/ jsx("input", {
+        "aria-invalid": invalid || void 0,
+        className: checkboxVariants({
+            className
+        }),
+        "data-invalid": invalid || void 0,
+        ref: setIndeterminate,
+        type: "checkbox",
+        ...props
+    });
+}
+Checkbox.displayName = "Checkbox";
+export { Checkbox };

package/dist/atoms/figma/badge.figma.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Badge } from "../badge.js";
+code_connect.connect(Badge, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1-7735", {
+    imports: [
+        'import { Badge } from "@techsio/ui-kit/atoms/badge"'
+    ],
+    props: {
+        variant: code_connect["enum"]("variant", {
+            primary: "primary",
+            secondary: "secondary",
+            tertiary: "tertiary",
+            discount: "discount",
+            info: "info",
+            success: "success",
+            warning: "warning",
+            danger: "danger",
+            outline: "outline"
+        }),
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+            xl: "xl"
+        }),
+        children: code_connect.string("children")
+    },
+    example: ({ variant, size, children })=>/*#__PURE__*/ jsx(Badge, {
+            size: size,
+            variant: variant,
+            children: children
+        })
+});

package/dist/atoms/figma/button.figma.js

@@ -0,0 +1,76 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Button } from "../button.js";
+code_connect.connect(Button, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1-5627", {
+    imports: [
+        'import { Button } from "@techsio/ui-kit/atoms/button"'
+    ],
+    props: {
+        variant: code_connect["enum"]("variant", {
+            primary: "primary",
+            secondary: "secondary",
+            tertiary: "tertiary",
+            warning: "warning",
+            danger: "danger"
+        }),
+        theme: code_connect["enum"]("theme", {
+            solid: "solid",
+            light: "light",
+            outlined: "outlined",
+            borderless: "borderless"
+        }),
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        children: code_connect.string("children"),
+        loadingText: code_connect.string("loadingText"),
+        showLeftIcon: code_connect.boolean("showLeftIcon"),
+        iconLeft: code_connect.instance("iconLeft"),
+        showRightIcon: code_connect.boolean("showRightIcon"),
+        iconRight: code_connect.instance("iconRight"),
+        disabled: code_connect["enum"]("state", {
+            default: false,
+            hover: false,
+            active: false,
+            focus: false,
+            disabled: true,
+            loading: false
+        }),
+        isLoading: code_connect["enum"]("state", {
+            default: false,
+            hover: false,
+            active: false,
+            focus: false,
+            disabled: false,
+            loading: true
+        })
+    },
+    example: ({ children, disabled, iconLeft, iconRight, showLeftIcon, showRightIcon, isLoading, loadingText, size, theme, variant })=>{
+        const sharedProps = {
+            disabled,
+            isLoading,
+            loadingText,
+            size,
+            theme,
+            variant
+        };
+        if (showRightIcon) return /*#__PURE__*/ jsx(Button, {
+            ...sharedProps,
+            icon: iconRight,
+            iconPosition: "right",
+            children: children
+        });
+        if (showLeftIcon) return /*#__PURE__*/ jsx(Button, {
+            ...sharedProps,
+            icon: iconLeft,
+            iconPosition: "left",
+            children: children
+        });
+        return /*#__PURE__*/ jsx(Button, {
+            ...sharedProps,
+            children: children
+        });
+    }
+});

package/dist/atoms/figma/checkbox.figma.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Checkbox } from "../checkbox.js";
+code_connect.connect(Checkbox, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=428-9", {
+    imports: [
+        'import { Checkbox } from "@techsio/ui-kit/atoms/checkbox"'
+    ],
+    props: {
+        checked: code_connect["enum"]("state", {
+            unchecked: false,
+            checked: true,
+            indeterminate: false,
+            error: false
+        }),
+        indeterminate: code_connect["enum"]("state", {
+            unchecked: false,
+            checked: false,
+            indeterminate: true,
+            error: false
+        }),
+        disabled: code_connect.boolean("disabled"),
+        invalid: code_connect["enum"]("state", {
+            unchecked: false,
+            checked: false,
+            indeterminate: false,
+            error: true
+        })
+    },
+    example: ({ checked, indeterminate, disabled, invalid })=>/*#__PURE__*/ jsx(Checkbox, {
+            checked: checked,
+            disabled: disabled,
+            indeterminate: indeterminate,
+            invalid: invalid
+        })
+});