@techsio/ui-kit 0.3.1 → 0.4.0

package/dist/molecules/switch.js

@@ -2,51 +2,51 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { normalizeProps, useMachine } from "@zag-js/react";
 import { connect, machine } from "@zag-js/switch";
 import { useId } from "react";
-import { ErrorText } from "../atoms/error-text.js";
-import { ExtraText } from "../atoms/extra-text.js";
 import { Label } from "../atoms/label.js";
+import { StatusText } from "../atoms/status-text.js";
 import { tv } from "../utils.js";
 const switchVariants = tv({
     slots: {
         root: [
-            'cursor-pointer',
-            'data-[disabled]:cursor-not-allowed',
-            'flex items-center'
+            "cursor-pointer",
+            "data-[disabled]:cursor-not-allowed",
+            "flex items-center"
         ],
         control: [
-            'me-switch-root p-switch-control',
-            'relative inline-flex shrink-0 items-center justify-start',
-            'bg-switch-bg hover:bg-switch-bg-hover',
-            'w-switch-track-width h-switch-track-height',
-            'rounded-switch',
-            'transition-colors duration-200',
-            'ring-offset-transparent outline-none',
-            'border-(length:--border-width-switch) border-switch-border',
-            'data-[state=checked]:bg-switch-bg-checked',
-            'data-[state=checked]:hover:bg-switch-bg-checked-hover',
-            'data-[disabled]:bg-switch-bg-disabled',
-            'data-[disabled]:border-switch-border-disabled',
-            'data-[disabled]:data-[state=checked]:bg-switch-bg-disabled',
-            'data-[focus]:outline-none',
-            'data-[focus]:ring',
-            'data-[focus]:ring-switch-ring',
-            'data-[invalid]:bg-switch-bg-invalid data-[invalid]:ring-switch-ring-invalid'
+            "me-switch-root p-switch-control",
+            "relative inline-flex shrink-0 items-center justify-start",
+            "bg-switch-bg hover:bg-switch-bg-hover",
+            "h-switch-track-height w-switch-track-width",
+            "rounded-switch",
+            "transition-colors duration-200 motion-reduce:transition-none",
+            "border-(length:--border-width-switch) border-switch-border",
+            "data-[state=checked]:bg-switch-bg-checked",
+            "data-[state=checked]:hover:bg-switch-bg-checked-hover",
+            "data-[disabled]:bg-switch-bg-disabled",
+            "data-[disabled]:border-switch-border-disabled",
+            "data-[disabled]:data-[state=checked]:bg-switch-bg-disabled",
+            "data-[focus]:outline-(style:--default-ring-style) data-[focus]:outline-(length:--default-ring-width)",
+            "data-[focus]:outline-switch-ring",
+            "data-[focus]:outline-offset-(length:--default-ring-offset)",
+            "data-[invalid]:bg-switch-bg-invalid data-[invalid]:outline-switch-invalid",
+            "data-[invalid]:outline-(style:--default-ring-style) data-[invalid]:outline-(length:--default-ring-width)",
+            "data-[invalid]:outline-offset-(length:--default-ring-offset)"
         ],
         thumb: [
-            'block rounded-full h-switch-thumb-height aspect-square bg-switch-thumb-bg',
-            'transform transition-transform duration-200',
-            'data-[disabled]:bg-switch-thumb-bg-disabled',
-            'data-[state=checked]:translate-x-switch-translate-track'
+            "block aspect-square h-switch-thumb-height rounded-full bg-switch-thumb-bg",
+            "transform transition-transform duration-200 motion-reduce:transition-none",
+            "data-[disabled]:bg-switch-thumb-bg-disabled",
+            "data-[state=checked]:translate-x-switch-translate-track"
         ],
         label: [
-            'select-none',
-            'text-switch-label-fg',
-            'data-[disabled]:text-switch-label-fg-disabled'
+            "select-none",
+            "text-switch-label-fg",
+            "data-[disabled]:text-switch-label-fg-disabled"
         ],
-        hiddenInput: 'sr-only'
+        hiddenInput: "sr-only"
     }
 });
-function Switch({ id, name, value, checked, defaultChecked, disabled = false, invalid = false, readOnly = false, required = false, dir = 'ltr', children, className, onCheckedChange, helperText, errorText }) {
+function Switch({ id, name, value, checked, defaultChecked, disabled = false, readOnly = false, required = false, dir = "ltr", children, className, onCheckedChange, validateStatus, helpText, showHelpTextIcon = true }) {
     const generatedId = useId();
     const uniqueId = id || generatedId;
     const service = useMachine(machine, {
@@ -57,7 +57,7 @@ function Switch({ id, name, value, checked, defaultChecked, disabled = false, in
         defaultChecked,
         dir,
         disabled,
-        invalid,
+        invalid: "error" === validateStatus,
         readOnly,
         required,
         onCheckedChange: ({ checked })=>onCheckedChange?.(checked)
@@ -93,17 +93,11 @@ function Switch({ id, name, value, checked, defaultChecked, disabled = false, in
                     })
                 ]
             }),
-            (errorText || helperText) && /*#__PURE__*/ jsxs("div", {
-                children: [
-                    invalid && errorText && /*#__PURE__*/ jsx(ErrorText, {
-                        size: "sm",
-                        children: errorText
-                    }),
-                    !invalid && helperText && /*#__PURE__*/ jsx(ExtraText, {
-                        size: "sm",
-                        children: helperText
-                    })
-                ]
+            helpText && /*#__PURE__*/ jsx(StatusText, {
+                status: validateStatus,
+                showIcon: showHelpTextIcon,
+                size: "sm",
+                children: helpText
             })
         ]
     });

package/dist/molecules/tabs.js

@@ -7,111 +7,113 @@ import { tv } from "../utils.js";
 const tabsVariants = tv({
     slots: {
         root: [
-            'flex w-full',
-            'data-[orientation=horizontal]:flex-col',
-            'data-[orientation=vertical]:flex-row',
-            'bg-tabs-bg',
-            'rounded-tabs'
+            "flex w-full",
+            "data-[orientation=horizontal]:flex-col",
+            "data-[orientation=vertical]:flex-row",
+            "bg-tabs-bg",
+            "rounded-tabs"
         ],
         list: [
-            'relative flex',
-            'bg-tabs-list-bg',
-            'data-[orientation=horizontal]:flex-row',
-            'data-[orientation=vertical]:flex-col'
+            "relative flex",
+            "bg-tabs-list-bg",
+            "data-[orientation=horizontal]:flex-row",
+            "data-[orientation=vertical]:flex-col"
         ],
         trigger: [
-            'relative flex items-center justify-center',
-            'text-tabs-trigger-fg',
-            'rounded-tabs-trigger',
-            'cursor-pointer',
-            'hover:bg-tabs-trigger-bg-hover',
-            'focus-visible:outline-none',
-            'focus-visible:ring',
-            'focus-visible:ring-tabs-ring',
-            'data-[selected]:text-tabs-trigger-fg-selected',
-            'data-[disabled]:text-tabs-fg-disabled data-[disabled]:cursor-not-allowed'
+            "relative flex items-center justify-center",
+            "text-tabs-trigger-fg",
+            "rounded-tabs-trigger",
+            "cursor-pointer",
+            "hover:bg-tabs-trigger-bg-hover",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-tabs-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)",
+            "data-[selected]:text-tabs-trigger-fg-selected",
+            "data-[disabled]:cursor-not-allowed data-[disabled]:text-tabs-fg-disabled",
+            "transition-colors duration-200 motion-reduce:transition-none"
         ],
         indicator: [
-            'absolute bg-tabs-indicator-bg rounded-tabs-indicator',
-            'data-[orientation=vertical]:h-(--height) data-[orientation=horizontal]:w-(--width)',
-            'data-[orientation=vertical]:w-tabs-indicator data-[orientation=horizontal]:h-tabs-indicator',
-            'data-[orientation=vertical]:start-0 data-[orientation=horizontal]:bottom-0'
+            "absolute rounded-tabs-indicator bg-tabs-indicator-bg",
+            "data-[orientation=vertical]:h-(--height) data-[orientation=horizontal]:w-(--width)",
+            "data-[orientation=horizontal]:h-tabs-indicator data-[orientation=vertical]:w-tabs-indicator",
+            "data-[orientation=vertical]:start-0 data-[orientation=horizontal]:bottom-0"
         ],
         content: [
-            'text-tabs-content-fg',
-            'outline-none',
-            'focus-visible:ring',
-            'focus-visible:ring-tabs-ring'
+            "text-tabs-content-fg",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-tabs-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)"
         ]
     },
     variants: {
         variant: {
             default: {
-                list: '',
-                indicator: 'hidden'
+                list: "",
+                indicator: "hidden"
             },
             line: {
-                list: 'border-b-(length:--border-width-tabs) border-tabs-border',
-                indicator: 'data-[orientation=horizontal]:-bottom-(--border-width-tabs)'
+                list: "border-b-(length:--border-width-tabs) border-tabs-border",
+                indicator: "data-[orientation=horizontal]:-bottom-(--border-width-tabs)"
             },
             solid: {
-                trigger: 'data-[selected]:bg-tabs-trigger-bg-selected data-[selected]:text-tabs-trigger-solid-fg',
-                indicator: 'hidden'
+                trigger: "data-[selected]:bg-tabs-trigger-bg-selected data-[selected]:text-tabs-trigger-solid-fg",
+                indicator: "hidden"
             },
             outline: {
                 trigger: [
-                    'border-(length:--border-width-tabs) border-transparent',
-                    'data-[selected]:border-tabs-border-selected',
-                    'data-[selected]:bg-tabs-trigger-bg-outline-selected'
+                    "border-(length:--border-width-tabs) border-transparent",
+                    "data-[selected]:border-tabs-border-selected",
+                    "data-[selected]:bg-tabs-trigger-bg-outline-selected"
                 ],
-                indicator: 'hidden'
+                indicator: "hidden"
             }
         },
         size: {
             sm: {
-                trigger: 'text-tabs-trigger-sm p-tabs-trigger-sm',
-                content: 'p-tabs-content-sm text-tabs-content-sm'
+                trigger: "p-tabs-trigger-sm text-tabs-trigger-sm",
+                content: "p-tabs-content-sm text-tabs-content-sm"
             },
             md: {
-                trigger: 'text-tabs-trigger-md p-tabs-trigger-md',
-                content: 'p-tabs-content-md text-tabs-content-md'
+                trigger: "p-tabs-trigger-md text-tabs-trigger-md",
+                content: "p-tabs-content-md text-tabs-content-md"
             },
             lg: {
-                trigger: 'text-tabs-trigger-lg p-tabs-trigger-lg',
-                content: 'p-tabs-content-lg text-tabs-content-lg'
+                trigger: "p-tabs-trigger-lg text-tabs-trigger-lg",
+                content: "p-tabs-content-lg text-tabs-content-lg"
             }
         },
         fitted: {
             true: {
-                list: 'w-full',
-                trigger: 'flex-1'
+                list: "w-full",
+                trigger: "flex-1"
             }
         },
         justify: {
             start: {
-                list: 'justify-start'
+                list: "justify-start"
             },
             center: {
-                list: 'justify-center'
+                list: "justify-center"
             },
             end: {
-                list: 'justify-end'
+                list: "justify-end"
             }
         }
     },
     defaultVariants: {
-        variant: 'default',
-        size: 'md',
-        fitted: false
+        variant: "default",
+        size: "md",
+        fitted: false,
+        justify: "start"
     }
 });
 const TabsContext = /*#__PURE__*/ createContext(null);
 function useTabsContext() {
     const context = useContext(TabsContext);
-    if (!context) throw new Error('Tabs components must be used within Tabs');
+    if (!context) throw new Error("Tabs components must be used within Tabs");
     return context;
 }
-function Tabs({ id, defaultValue, value, orientation = 'horizontal', dir = 'ltr', activationMode = 'automatic', loopFocus = true, onValueChange, variant, size, fitted, justify, children, ref, className, ...props }) {
+function Tabs({ id, defaultValue, value, orientation = "horizontal", dir = "ltr", activationMode = "automatic", loopFocus = true, onValueChange, variant, size, fitted, justify, children, ref, className, ...props }) {
     const generatedId = useId();
     const uniqueId = id || generatedId;
     const service = useMachine(machine, {
@@ -143,10 +145,10 @@ function Tabs({ id, defaultValue, value, orientation = 'horizontal', dir = 'ltr'
             styles
         },
         children: /*#__PURE__*/ jsx("div", {
-            ref: ref,
             className: styles.root({
                 className
             }),
+            ref: ref,
             ...api.getRootProps(),
             ...props,
             children: children
@@ -156,10 +158,10 @@ function Tabs({ id, defaultValue, value, orientation = 'horizontal', dir = 'ltr'
 Tabs.List = function({ children, ref, className, ...props }) {
     const { api, styles } = useTabsContext();
     return /*#__PURE__*/ jsx("div", {
-        ref: ref,
         className: styles.list({
             className
         }),
+        ref: ref,
         ...api.getListProps(),
         ...props,
         children: children
@@ -168,12 +170,12 @@ Tabs.List = function({ children, ref, className, ...props }) {
 Tabs.Trigger = function({ value, disabled, children, ref, className, ...props }) {
     const { api, styles } = useTabsContext();
     return /*#__PURE__*/ jsx(Button, {
-        ref: ref,
-        type: "button",
-        theme: "borderless",
         className: styles.trigger({
             className
         }),
+        ref: ref,
+        theme: "borderless",
+        type: "button",
         ...api.getTriggerProps({
             value,
             disabled
@@ -186,10 +188,10 @@ Tabs.Trigger = function({ value, disabled, children, ref, className, ...props })
 Tabs.Content = function({ value, children, ref, className, ...props }) {
     const { api, styles } = useTabsContext();
     return /*#__PURE__*/ jsx("div", {
-        ref: ref,
         className: styles.content({
             className
         }),
+        ref: ref,
         ...api.getContentProps({
             value
         }),
@@ -200,13 +202,13 @@ Tabs.Content = function({ value, children, ref, className, ...props }) {
 Tabs.Indicator = function({ ref, className, ...props }) {
     const { api, styles } = useTabsContext();
     return /*#__PURE__*/ jsx("div", {
-        ref: ref,
         className: styles.indicator({
             className
         }),
+        ref: ref,
         ...api.getIndicatorProps(),
         ...props
     });
 };
-Tabs.displayName = 'Tabs';
+Tabs.displayName = "Tabs";
 export { Tabs };

package/dist/molecules/toast.js

@@ -7,42 +7,42 @@ import { tv } from "../utils.js";
 const toastVariants = tv({
     slots: {
         root: [
-            'flex flex-col relative rounded-toast-root',
-            'border-(length:--border-width-toast) bg-toast-bg shadow-lg',
-            'w-toast-width overflow-hidden p-toast-root',
-            'data-[type=error]:bg-toast-error-bg data-[type=error]:border-toast-error-border',
-            'data-[type=success]:bg-toast-success-bg data-[type=success]:border-toast-success-border',
-            'data-[type=info]:bg-toast-info-bg data-[type=info]:border-toast-info-border',
-            'data-[type=warning]:bg-toast-warning-bg data-[type=warning]:border-toast-warning-border',
-            'translate-x-[var(--x)] translate-y-[var(--y)]',
-            'scale-[var(--scale)] opacity-[var(--opacity)]',
-            'z-[var(--z-index)] h-[var(--height)]',
-            'will-change-[translate,opacity,scale]',
-            'transition-[translate,scale,opacity] duration-400'
+            "relative flex flex-col rounded-toast-root",
+            "border-(length:--border-width-toast) bg-toast-bg shadow-lg",
+            "w-toast-width overflow-hidden p-toast-root",
+            "data-[type=error]:border-toast-error-border data-[type=error]:bg-toast-error-bg",
+            "data-[type=success]:border-toast-success-border data-[type=success]:bg-toast-success-bg",
+            "data-[type=info]:border-toast-info-border data-[type=info]:bg-toast-info-bg",
+            "data-[type=warning]:border-toast-warning-border data-[type=warning]:bg-toast-warning-bg",
+            "translate-x-(--x) translate-y-(--y)",
+            "scale-(--scale) opacity-(--opacity)",
+            "z-(--z-index) h-(--height)",
+            "will-change-[translate,opacity,scale]",
+            "transition-[translate,scale,opacity] duration-400 motion-reduce:transition-none"
         ],
-        group: 'flex flex-col relative',
-        header: 'flex relative items-center gap-toast-content',
+        group: "relative flex flex-col",
+        header: "relative flex items-center gap-toast-content",
         icon: [
-            'flex-shrink-0 text-toast-icon-size',
-            'data-[type=error]:text-toast-error-icon data-[type=error]:token-icon-toast-error',
-            'data-[type=success]:text-toast-success-icon data-[type=success]:token-icon-toast-success',
-            'data-[type=info]:text-toast-info-icon data-[type=info]:token-icon-toast-info',
-            'data-[type=warning]:text-toast-warning-icon data-[type=warning]:token-icon-toast-warning'
+            "flex-shrink-0 text-toast-icon-size",
+            "data-[type=error]:token-icon-toast-error data-[type=error]:text-toast-error-icon",
+            "data-[type=success]:token-icon-toast-success data-[type=success]:text-toast-success-icon",
+            "data-[type=info]:token-icon-toast-info data-[type=info]:text-toast-info-icon",
+            "data-[type=warning]:token-icon-toast-warning data-[type=warning]:text-toast-warning-icon"
         ],
         title: [
-            'font-toast-title text-toast-title-size text-toast-fg',
-            'data-[type=error]:text-toast-error-title',
-            'data-[type=success]:text-toast-success-title',
-            'data-[type=info]:text-toast-info-title',
-            'data-[type=warning]:text-toast-warning-title'
+            "font-toast-title text-toast-fg text-toast-title-size",
+            "data-[type=error]:text-toast-error-title",
+            "data-[type=success]:text-toast-success-title",
+            "data-[type=info]:text-toast-info-title",
+            "data-[type=warning]:text-toast-warning-title"
         ],
         description: [
-            "text-toast-description-size text-toast-fg mt-toast-description-gap"
+            "mt-toast-description-gap text-toast-description-size text-toast-fg"
         ],
         closeButton: [
-            'grid place-items-center flex-shrink-0 ms-auto py-0 px-0',
-            'cursor-pointer',
-            'text-toast-close-fg hover:text-toast-close-fg-hover'
+            "ms-auto grid flex-shrink-0 place-items-center px-0 py-0",
+            "cursor-pointer",
+            "text-toast-close-fg hover:text-toast-close-fg-hover"
         ]
     }
 });
@@ -74,11 +74,11 @@ function Toast({ actor, index, parent, placement }) {
                     /*#__PURE__*/ jsx("div", {
                         className: title(),
                         "data-type": api.type,
-                        children: 'loading' === api.type ? 'loading...' : api.title
+                        children: "loading" === api.type ? "loading..." : api.title
                     }),
                     /*#__PURE__*/ jsx(Button, {
-                        theme: "borderless",
                         className: closeButton(),
+                        theme: "borderless",
                         ...api.getCloseTriggerProps(),
                         icon: "token-icon-toast-close"
                     })
@@ -97,9 +97,9 @@ function Toast({ actor, index, parent, placement }) {
     });
 }
 const toaster = createStore({
-    placement: 'bottom-end',
+    placement: "bottom-end",
     gap: 16,
-    offsets: '24px'
+    offsets: "24px"
 });
 function Toaster() {
     const service = useMachine(toast_group.machine, {