@techsio/ui-kit 0.3.2 → 0.4.0

package/dist/molecules/dialog.js

@@ -7,78 +7,78 @@ import { Button } from "../atoms/button.js";
 const dialogVariants = tv({
     slots: {
         backdrop: [
-            'inset-0 z-(--z-dialog-backdrop)'
+            "inset-0 z-(--z-dialog-backdrop)"
         ],
         positioner: [
-            'inset-0 z-(--z-dialog-positioner) flex'
+            "inset-0 z-(--z-dialog-positioner) flex"
         ],
         content: [
-            'relative flex flex-col p-dialog-content gap-dialog-content',
-            'bg-dialog-content-bg text-dialog-content-fg',
-            'border-(length:--border-width-dialog) border-dialog-content-border',
-            'shadow-dialog-content',
-            'overflow-y-auto',
-            'focus-visible:outline-none',
-            'focus-visible:ring',
-            'focus-visible:ring-dialog-ring'
+            "relative flex flex-col gap-dialog-content p-dialog-content",
+            "bg-dialog-content-bg text-dialog-content-fg",
+            "border-(length:--border-width-dialog) border-dialog-content-border",
+            "shadow-dialog-content",
+            "overflow-y-auto",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-dialog-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)"
         ],
         title: [
-            'text-dialog-title-size font-dialog-title text-dialog-title-fg'
+            "font-dialog-title text-dialog-title-fg text-dialog-title-size"
         ],
         description: [
-            "text-dialog-description-size text-dialog-description-fg"
+            "text-dialog-description-fg text-dialog-description-size"
         ],
         trigger: [],
         closeTrigger: [
-            'absolute top-dialog-close-trigger-offset right-dialog-close-trigger-offset',
-            'flex items-center justify-center',
-            'p-dialog-close-trigger-padding rounded-dialog-close-trigger',
-            'text-dialog-close-trigger-fg',
-            'focus-visible:outline-none',
-            'focus-visible:ring',
-            'focus-visible:ring-dialog-ring'
+            "absolute top-dialog-close-trigger-offset right-dialog-close-trigger-offset",
+            "flex items-center justify-center",
+            "rounded-dialog-close-trigger p-dialog-close-trigger-padding",
+            "text-dialog-close-trigger-fg",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-dialog-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)"
         ],
-        actions: 'mt-auto flex shrink-0 justify-end gap-dialog-actions pt-dialog-actions'
+        actions: "mt-auto flex shrink-0 justify-end gap-dialog-actions pt-dialog-actions"
     },
     variants: {
         placement: {
             center: {
-                positioner: 'items-center justify-center',
-                content: 'max-w-dialog-center-w-max max-h-dialog-center-h-max rounded-dialog-center'
+                positioner: "items-center justify-center",
+                content: "max-h-dialog-center-h-max max-w-dialog-center-w-max rounded-dialog-center"
             },
             left: {
-                positioner: 'items-stretch justify-start',
-                content: 'h-full rounded-dialog-left border-l-0'
+                positioner: "items-stretch justify-start",
+                content: "h-full rounded-dialog-left border-l-0"
             },
             right: {
-                positioner: 'items-stretch justify-end',
-                content: 'h-full rounded-dialog-right border-r-0'
+                positioner: "items-stretch justify-end",
+                content: "h-full rounded-dialog-right border-r-0"
             },
             top: {
-                positioner: 'items-start justify-stretch',
-                content: 'w-full rounded-dialog-top border-t-0'
+                positioner: "items-start justify-stretch",
+                content: "w-full rounded-dialog-top border-t-0"
             },
             bottom: {
-                positioner: 'items-end justify-stretch',
-                content: 'w-full rounded-dialog-bottom border-b-0'
+                positioner: "items-end justify-stretch",
+                content: "w-full rounded-dialog-bottom border-b-0"
             }
         },
         position: {
             fixed: {
-                backdrop: 'fixed',
-                positioner: 'fixed'
+                backdrop: "fixed",
+                positioner: "fixed"
             },
             absolute: {
-                backdrop: 'absolute',
-                positioner: 'absolute'
+                backdrop: "absolute",
+                positioner: "absolute"
             },
             sticky: {
-                backdrop: 'sticky',
-                positioner: 'sticky'
+                backdrop: "sticky",
+                positioner: "sticky"
             },
             relative: {
-                backdrop: 'relative',
-                positioner: 'relative'
+                backdrop: "relative",
+                positioner: "relative"
             }
         },
         size: {
@@ -91,145 +91,145 @@ const dialogVariants = tv({
         },
         behavior: {
             modal: {
-                backdrop: 'bg-dialog-backdrop-bg'
+                backdrop: "bg-dialog-backdrop-bg"
             },
             modeless: {
-                backdrop: 'bg-transparent',
-                positioner: 'pointer-events-none',
-                content: 'pointer-events-auto'
+                backdrop: "bg-transparent",
+                positioner: "pointer-events-none",
+                content: "pointer-events-auto"
             }
         }
     },
     compoundVariants: [
         {
             placement: [
-                'left',
-                'right'
+                "left",
+                "right"
             ],
-            size: 'xs',
+            size: "xs",
             class: {
-                content: 'w-dialog-xs'
+                content: "w-dialog-xs"
             }
         },
         {
             placement: [
-                'left',
-                'right'
+                "left",
+                "right"
             ],
-            size: 'sm',
+            size: "sm",
             class: {
-                content: 'w-dialog-sm'
+                content: "w-dialog-sm"
             }
         },
         {
             placement: [
-                'left',
-                'right'
+                "left",
+                "right"
             ],
-            size: 'md',
+            size: "md",
             class: {
-                content: 'w-dialog-md'
+                content: "w-dialog-md"
             }
         },
         {
             placement: [
-                'left',
-                'right'
+                "left",
+                "right"
             ],
-            size: 'lg',
+            size: "lg",
             class: {
-                content: 'w-dialog-lg'
+                content: "w-dialog-lg"
             }
         },
         {
             placement: [
-                'left',
-                'right'
+                "left",
+                "right"
             ],
-            size: 'xl',
+            size: "xl",
             class: {
-                content: 'w-dialog-xl'
+                content: "w-dialog-xl"
             }
         },
         {
             placement: [
-                'left',
-                'right'
+                "left",
+                "right"
             ],
-            size: 'full',
+            size: "full",
             class: {
-                content: 'w-full'
+                content: "w-full"
             }
         },
         {
             placement: [
-                'top',
-                'bottom'
+                "top",
+                "bottom"
             ],
-            size: 'xs',
+            size: "xs",
             class: {
-                content: 'h-dialog-xs'
+                content: "h-dialog-xs"
             }
         },
         {
             placement: [
-                'top',
-                'bottom'
+                "top",
+                "bottom"
             ],
-            size: 'sm',
+            size: "sm",
             class: {
-                content: 'h-dialog-sm'
+                content: "h-dialog-sm"
             }
         },
         {
             placement: [
-                'top',
-                'bottom'
+                "top",
+                "bottom"
             ],
-            size: 'md',
+            size: "md",
             class: {
-                content: 'h-dialog-md'
+                content: "h-dialog-md"
             }
         },
         {
             placement: [
-                'top',
-                'bottom'
+                "top",
+                "bottom"
             ],
-            size: 'lg',
+            size: "lg",
             class: {
-                content: 'h-dialog-lg'
+                content: "h-dialog-lg"
             }
         },
         {
             placement: [
-                'top',
-                'bottom'
+                "top",
+                "bottom"
             ],
-            size: 'xl',
+            size: "xl",
             class: {
-                content: 'h-dialog-xl'
+                content: "h-dialog-xl"
             }
         },
         {
             placement: [
-                'top',
-                'bottom'
+                "top",
+                "bottom"
             ],
-            size: 'full',
+            size: "full",
             class: {
-                content: 'h-full'
+                content: "h-full"
             }
         }
     ],
     defaultVariants: {
-        placement: 'center',
-        behavior: 'modal',
-        size: 'md',
-        position: 'fixed'
+        placement: "center",
+        behavior: "modal",
+        size: "md",
+        position: "fixed"
     }
 });
-function Dialog({ id, open, onOpenChange, initialFocusEl, finalFocusEl, role = 'dialog', placement = 'center', position = 'fixed', size = 'md', behavior = 'modal', closeOnEscape = true, closeOnInteractOutside = true, preventScroll = true, trapFocus = true, customTrigger = false, triggerText = 'Open', title, description, children, hideCloseButton = false, actions, className, modal = true, portal = true }) {
+function Dialog({ id, open, onOpenChange, initialFocusEl, finalFocusEl, role = "dialog", placement = "center", position = "fixed", size = "md", behavior = "modal", closeOnEscape = true, closeOnInteractOutside = true, preventScroll = true, trapFocus = true, customTrigger = false, triggerText = "Open", title, description, children, hideCloseButton = false, actions, className, modal = true, portal = true }) {
     const generatedId = useId();
     const uniqueId = id || generatedId;
     const service = useMachine(machine, {
@@ -270,8 +270,8 @@ function Dialog({ id, open, onOpenChange, initialFocusEl, finalFocusEl, role = '
                         ...api.getContentProps(),
                         children: [
                             !hideCloseButton && /*#__PURE__*/ jsx(Button, {
-                                theme: "borderless",
                                 className: closeTrigger(),
+                                theme: "borderless",
                                 ...api.getCloseTriggerProps(),
                                 icon: "token-icon-dialog-close"
                             }),
@@ -298,9 +298,9 @@ function Dialog({ id, open, onOpenChange, initialFocusEl, finalFocusEl, role = '
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             !customTrigger && /*#__PURE__*/ jsx(Button, {
+                className: triggerSlot(),
                 size: "sm",
                 variant: "primary",
-                className: triggerSlot(),
                 ...api.getTriggerProps(),
                 children: triggerText
             }),

package/dist/molecules/figma/accordion.figma.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Accordion } from "../accordion.js";
+code_connect.connect(Accordion, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=993-936", {
+    imports: [
+        'import { Accordion } from "@libs/ui/molecules/accordion"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        variant: code_connect["enum"]("variant", {
+            default: "default",
+            borderless: "borderless",
+            child: "child"
+        }),
+        shadow: code_connect["enum"]("shadow", {
+            none: "none",
+            sm: "sm",
+            md: "md"
+        })
+    },
+    example: ({ size, variant, shadow })=>/*#__PURE__*/ jsx(Accordion, {
+            shadow: shadow,
+            size: size,
+            variant: variant,
+            children: /*#__PURE__*/ jsxs(Accordion.Item, {
+                value: "item-1",
+                children: [
+                    /*#__PURE__*/ jsx(Accordion.Header, {
+                        children: "Title"
+                    }),
+                    /*#__PURE__*/ jsx(Accordion.Content, {
+                        children: "Content"
+                    })
+                ]
+            })
+        })
+});

package/dist/molecules/figma/breadcrumb.figma.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Breadcrumb } from "../breadcrumb.js";
+code_connect.connect(Breadcrumb, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=828-162", {
+    imports: [
+        'import { Breadcrumb } from "@libs/ui/molecules/breadcrumb"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        })
+    },
+    example: ({ size })=>/*#__PURE__*/ jsxs(Breadcrumb, {
+            size: size,
+            children: [
+                /*#__PURE__*/ jsx(Breadcrumb.Item, {
+                    children: /*#__PURE__*/ jsx(Breadcrumb.Link, {
+                        href: "/",
+                        children: "Home"
+                    })
+                }),
+                /*#__PURE__*/ jsx(Breadcrumb.Item, {
+                    children: /*#__PURE__*/ jsx(Breadcrumb.CurrentLink, {
+                        children: "Current"
+                    })
+                })
+            ]
+        })
+});

package/dist/molecules/figma/carousel.figma.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Carousel } from "../carousel.js";
+code_connect.connect(Carousel, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1190-50", {
+    imports: [
+        'import { Carousel } from "@libs/ui/molecules/carousel"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        orientation: code_connect["enum"]("orientation", {
+            horizontal: "horizontal",
+            vertical: "vertical"
+        })
+    },
+    example: ({ size, orientation })=>/*#__PURE__*/ jsxs(Carousel, {
+            orientation: orientation,
+            size: size,
+            slideCount: 2,
+            children: [
+                /*#__PURE__*/ jsx(Carousel.Slide, {
+                    index: 0,
+                    children: "Slide 1"
+                }),
+                /*#__PURE__*/ jsx(Carousel.Slide, {
+                    index: 1,
+                    children: "Slide 2"
+                })
+            ]
+        })
+});

package/dist/molecules/figma/combobox.figma.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Combobox } from "../combobox.js";
+code_connect.connect(Combobox, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1189-153", {
+    imports: [
+        'import { Combobox } from "@techsio/ui-kit/molecules/combobox"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        validateStatus: code_connect["enum"]("state", {
+            default: "default",
+            error: "error",
+            success: "success",
+            warning: "warning",
+            disabled: "default"
+        }),
+        disabled: code_connect["enum"]("state", {
+            default: false,
+            error: false,
+            success: false,
+            warning: false,
+            disabled: true
+        }),
+        required: code_connect.boolean("required")
+    },
+    example: ({ size, validateStatus, disabled, required })=>/*#__PURE__*/ jsx(Combobox, {
+            size: size,
+            validateStatus: validateStatus,
+            disabled: disabled,
+            required: required,
+            items: [],
+            label: "Label"
+        })
+});

package/dist/molecules/figma/dialog.figma.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Dialog } from "../dialog.js";
+code_connect.connect(Dialog, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1034-67", {
+    imports: [
+        'import { Dialog } from "@techsio/ui-kit/molecules/dialog"'
+    ],
+    props: {
+        placement: code_connect["enum"]("placement", {
+            center: "center",
+            left: "left",
+            right: "right",
+            top: "top",
+            bottom: "bottom"
+        })
+    },
+    example: ({ placement })=>/*#__PURE__*/ jsx(Dialog, {
+            placement: placement,
+            title: "Title",
+            description: "Description",
+            triggerText: "Open",
+            children: "Content"
+        })
+});

package/dist/molecules/figma/form-checkbox.figma.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { FormCheckbox } from "../form-checkbox.js";
+code_connect.connect(FormCheckbox, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=916-487", {
+    imports: [
+        'import { FormCheckbox } from "@techsio/ui-kit/molecules/form-checkbox"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        checked: code_connect["enum"]("state", {
+            unchecked: false,
+            checked: true,
+            indeterminate: false,
+            disabled: false
+        }),
+        indeterminate: code_connect["enum"]("state", {
+            unchecked: false,
+            checked: false,
+            indeterminate: true,
+            disabled: false
+        }),
+        disabled: code_connect["enum"]("state", {
+            unchecked: false,
+            checked: false,
+            indeterminate: false,
+            disabled: true
+        }),
+        children: code_connect.string("label")
+    },
+    example: ({ size, checked, indeterminate, disabled, children })=>/*#__PURE__*/ jsx(FormCheckbox, {
+            checked: checked,
+            disabled: disabled,
+            indeterminate: indeterminate,
+            size: size,
+            children: children
+        })
+});

package/dist/molecules/figma/form-input.figma.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { FormInput } from "../form-input.js";
+code_connect.connect(FormInput, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=306-266", {
+    imports: [
+        'import { FormInput } from "@techsio/ui-kit/molecules/form-input"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        validateStatus: code_connect["enum"]("state", {
+            default: "default",
+            error: "error",
+            success: "success",
+            warning: "warning",
+            disabled: "default"
+        }),
+        disabled: code_connect["enum"]("state", {
+            default: false,
+            error: false,
+            success: false,
+            warning: false,
+            disabled: true
+        }),
+        required: code_connect.boolean("required")
+    },
+    example: ({ size, validateStatus, disabled, required })=>/*#__PURE__*/ jsx(FormInput, {
+            id: "field",
+            label: "Label",
+            size: size,
+            validateStatus: validateStatus,
+            disabled: disabled,
+            required: required
+        })
+});

package/dist/molecules/figma/form-numeric-input.figma.js

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { NumericInput } from "../../atoms/numeric-input.js";
+import { FormNumericInput } from "../form-numeric-input.js";
+code_connect.connect(FormNumericInput, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=603-143", {
+    imports: [
+        'import { NumericInput } from "@techsio/ui-kit/atoms/numeric-input"',
+        'import { FormNumericInput } from "@techsio/ui-kit/molecules/form-numeric-input"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        validateStatus: code_connect["enum"]("state", {
+            default: "default",
+            error: "error",
+            success: "success",
+            warning: "warning",
+            disabled: "default",
+            readonly: "default"
+        }),
+        required: code_connect["enum"]("required", {
+            true: true,
+            false: false
+        }),
+        disabled: code_connect["enum"]("state", {
+            default: false,
+            error: false,
+            success: false,
+            warning: false,
+            disabled: true,
+            readonly: false
+        }),
+        readOnly: code_connect["enum"]("state", {
+            default: false,
+            error: false,
+            success: false,
+            warning: false,
+            disabled: false,
+            readonly: true
+        })
+    },
+    example: ({ disabled, readOnly, required, size, validateStatus })=>/*#__PURE__*/ jsx(FormNumericInput, {
+            id: "quantity",
+            helpText: "Enter value between 0-100",
+            label: "Quantity",
+            defaultValue: 42,
+            disabled: disabled,
+            readOnly: readOnly,
+            required: required,
+            size: size,
+            validateStatus: validateStatus,
+            children: /*#__PURE__*/ jsxs(NumericInput.Control, {
+                children: [
+                    /*#__PURE__*/ jsx(NumericInput.Input, {}),
+                    /*#__PURE__*/ jsxs(NumericInput.TriggerContainer, {
+                        children: [
+                            /*#__PURE__*/ jsx(NumericInput.IncrementTrigger, {}),
+                            /*#__PURE__*/ jsx(NumericInput.DecrementTrigger, {})
+                        ]
+                    })
+                ]
+            })
+        })
+});