@techsio/ui-kit 0.3.1 → 0.4.0

package/dist/atoms/skeleton.js

@@ -4,72 +4,72 @@ import { tv } from "../utils.js";
 const skeletonVariants = tv({
     slots: {
         root: [
-            'relative overflow-hidden'
+            "relative overflow-hidden"
         ],
-        rectangle: 'w-full',
+        rectangle: "w-full",
         circle: [
-            'rounded-full',
-            'shrink-0'
+            "rounded-full",
+            "shrink-0"
         ],
         textContainer: [
-            'flex',
-            'flex-col'
+            "flex",
+            "flex-col"
         ],
         textLine: [
-            'h-skeleton-text-line',
-            'rounded-skeleton-text',
-            'w-full'
+            "h-skeleton-text-line",
+            "rounded-skeleton-text",
+            "w-full"
         ]
     },
     variants: {
         variant: {
             primary: {
-                root: '',
-                circle: 'bg-skeleton-bg-primary',
-                rectangle: 'bg-skeleton-bg-primary',
-                textLine: 'bg-skeleton-bg-primary'
+                root: "",
+                circle: "bg-skeleton-bg-primary",
+                rectangle: "bg-skeleton-bg-primary",
+                textLine: "bg-skeleton-bg-primary"
             },
             secondary: {
-                root: '',
-                circle: 'bg-skeleton-bg-secondary',
-                rectangle: 'bg-skeleton-bg-secondary',
-                textLine: 'bg-skeleton-bg-secondary'
+                root: "",
+                circle: "bg-skeleton-bg-secondary",
+                rectangle: "bg-skeleton-bg-secondary",
+                textLine: "bg-skeleton-bg-secondary"
             }
         },
         size: {
             sm: {
-                circle: 'size-skeleton-circle-sm',
-                textContainer: 'gap-skeleton-text-sm'
+                circle: "size-skeleton-circle-sm",
+                textContainer: "gap-skeleton-text-sm"
             },
             md: {
-                circle: 'size-skeleton-circle-md',
-                textContainer: 'gap-skeleton-text-md'
+                circle: "size-skeleton-circle-md",
+                textContainer: "gap-skeleton-text-md"
             },
             lg: {
-                circle: 'size-skeleton-circle-lg',
-                textContainer: 'gap-skeleton-text-lg'
+                circle: "size-skeleton-circle-lg",
+                textContainer: "gap-skeleton-text-lg"
             },
             xl: {
-                circle: 'size-skeleton-circle-xl',
-                textContainer: 'gap-skeleton-text-xl'
+                circle: "size-skeleton-circle-xl",
+                textContainer: "gap-skeleton-text-xl"
             }
         },
         speed: {
             slow: {
-                root: 'animate-skeleton-pulse-slow'
+                root: "animate-skeleton-pulse-slow"
             },
             normal: {
-                root: 'animate-skeleton-pulse-normal'
+                root: "animate-skeleton-pulse-normal"
             },
             fast: {
-                root: 'animate-skeleton-pulse-fast'
+                root: "animate-skeleton-pulse-fast"
             }
         }
     },
     defaultVariants: {
-        variant: 'primary',
-        size: 'md',
-        speed: 'normal'
+        variant: "primary",
+        size: "md",
+        speed: "normal"
     }
 });
 const SkeletonContext = /*#__PURE__*/ createContext(null);
@@ -96,18 +96,18 @@ function Skeleton({ isLoaded = false, variant, children, speed, className, ref,
         children: isLoaded ? /*#__PURE__*/ jsx(Fragment, {
             children: children
         }) : /*#__PURE__*/ jsx("div", {
-            ref: ref,
+            "aria-busy": "true",
+            "aria-label": "Loading content",
             className: styles.root({
                 className
             }),
-            "aria-busy": "true",
-            "aria-label": "Loading content",
+            ref: ref,
             ...props,
             children: children
         })
     });
 }
-Skeleton.Circle = function({ size = 'md', speed, isLoaded, variant, children, className, ref, ...props }) {
+Skeleton.Circle = function({ size = "md", speed, isLoaded, variant, children, className, ref, ...props }) {
     const resolved = useResolvedSkeletonProps({
         isLoaded,
         variant,
@@ -122,18 +122,18 @@ Skeleton.Circle = function({ size = 'md', speed, isLoaded, variant, children, cl
         children: children
     });
     return /*#__PURE__*/ jsx("div", {
-        ref: ref,
+        "aria-busy": "true",
+        "aria-label": "Loading content",
         className: styles.root({
             className: styles.circle({
                 className
             })
         }),
-        "aria-busy": "true",
-        "aria-label": "Loading content",
+        ref: ref,
         ...props
     });
 };
-Skeleton.Text = function({ noOfLines = 3, size = 'md', speed, lastLineWidth = '80%', isLoaded, variant, children, containerClassName, className, ref, ...props }) {
+Skeleton.Text = function({ noOfLines = 3, size = "md", speed, lastLineWidth = "80%", isLoaded, variant, children, containerClassName, className, ref, ...props }) {
     const resolved = useResolvedSkeletonProps({
         isLoaded,
         variant,
@@ -149,18 +149,18 @@ Skeleton.Text = function({ noOfLines = 3, size = 'md', speed, lastLineWidth = '8
     });
     const lineCount = Number.isFinite(noOfLines) ? Math.max(1, noOfLines) : 1;
     return /*#__PURE__*/ jsx("div", {
-        ref: ref,
+        "aria-busy": "true",
+        "aria-label": "Loading content",
         className: styles.textContainer({
             className: containerClassName
         }),
-        "aria-busy": "true",
-        "aria-label": "Loading content",
+        ref: ref,
         ...props,
         children: Array.from({
             length: lineCount
         }).map((_, index)=>{
             const isLastLine = index === lineCount - 1;
-            const width = isLastLine && lineCount > 1 ? lastLineWidth : '100%';
+            const width = isLastLine && lineCount > 1 ? lastLineWidth : "100%";
             return /*#__PURE__*/ jsx("div", {
                 className: styles.root({
                     className: styles.textLine({
@@ -170,7 +170,7 @@ Skeleton.Text = function({ noOfLines = 3, size = 'md', speed, lastLineWidth = '8
                 style: {
                     width
                 }
-            }, index);
+            }, `skeleton-text-${index}`);
         })
     });
 };
@@ -188,14 +188,14 @@ Skeleton.Rectangle = function({ speed, isLoaded, variant, children, className, r
         children: children
     });
     return /*#__PURE__*/ jsx("div", {
-        ref: ref,
+        "aria-busy": "true",
+        "aria-label": "Loading content",
         className: styles.root({
             className: styles.rectangle({
                 className
             })
         }),
-        "aria-busy": "true",
-        "aria-label": "Loading content",
+        ref: ref,
         ...props,
         children: children
     });

package/dist/atoms/status-text.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { tv } from "../utils.js";
+import { Icon } from "./icon.js";
+const statusTextVariants = tv({
+    slots: {
+        base: "flex items-center",
+        icon: ""
+    },
+    variants: {
+        status: {
+            error: "text-status-text-fg-error",
+            success: "text-status-text-fg-success",
+            warning: "text-status-text-fg-warning",
+            default: "text-status-text-fg-default"
+        },
+        align: {
+            start: {
+                icon: "mt-status-text-icon-long-text self-start"
+            },
+            center: {}
+        },
+        size: {
+            sm: {
+                base: "gap-status-text-icon-gap-sm text-status-text-sm"
+            },
+            md: {
+                base: "gap-status-text-icon-gap-md text-status-text-md"
+            },
+            lg: {
+                base: "items-start gap-status-text-icon-gap-lg text-status-text-lg",
+                icon: "mt-status-text-icon"
+            }
+        }
+    },
+    defaultVariants: {
+        status: "default",
+        size: "md",
+        align: "center"
+    }
+});
+const ICON_MAP = {
+    error: "token-icon-status-text-error",
+    success: "token-icon-status-text-success",
+    warning: "token-icon-status-text-warning",
+    default: void 0
+};
+function StatusText({ className, showIcon = false, status = "default", size = "md", align = "center", icon, children, ref, ...props }) {
+    const resolvedIcon = icon ?? ICON_MAP[status];
+    const { base, icon: iconSlot } = statusTextVariants({
+        status,
+        size,
+        align,
+        className
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: base({
+            status,
+            size,
+            className
+        }),
+        ref: ref,
+        ...props,
+        children: [
+            showIcon && resolvedIcon && /*#__PURE__*/ jsx(Icon, {
+                className: iconSlot(),
+                icon: resolvedIcon,
+                size: size
+            }),
+            /*#__PURE__*/ jsx("span", {
+                children: children
+            })
+        ]
+    });
+}
+export { StatusText };

package/dist/atoms/textarea.js

@@ -2,71 +2,75 @@ import { jsx } from "react/jsx-runtime";
 import { tv } from "../utils.js";
 const textareaVariants = tv({
     base: [
-        'block w-full',
-        'bg-textarea-bg',
-        'text-textarea-fg',
-        'placeholder:text-textarea-placeholder',
-        'border-(length:--border-textarea-width) border-textarea-border',
-        'rounded-textarea',
-        'transition-all duration-200',
-        'hover:bg-textarea-bg-hover hover:border-textarea-border-hover',
-        'focus:outline-none focus:bg-textarea-bg-focus focus:border-textarea-border-focus',
-        'focus-visible:ring',
-        'focus-visible:ring-textarea-ring',
-        'disabled:pointer-events-none disabled:bg-textarea-bg-disabled disabled:border-textarea-border-disabled disabled:text-textarea-fg-disabled'
+        "block w-full",
+        "font-normal",
+        "bg-textarea-bg",
+        "text-textarea-fg",
+        "placeholder:font-normal",
+        "placeholder:text-textarea-placeholder",
+        "border-(length:--border-textarea-width) border-textarea-border",
+        "rounded-textarea",
+        "transition-all duration-200 motion-reduce:transition-none",
+        "hover:border-textarea-border-hover hover:bg-textarea-bg-hover",
+        "focus:border-textarea-border-focus focus:bg-textarea-bg-focus",
+        "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+        "focus-visible:outline-textarea-ring",
+        "focus-visible:outline-offset-(length:--default-ring-offset)",
+        "disabled:pointer-events-none disabled:border-textarea-border-disabled disabled:bg-textarea-bg-disabled disabled:text-textarea-fg-disabled"
     ],
     variants: {
         variant: {
-            default: '',
+            default: "",
             error: [
-                'border-textarea-border-danger',
-                'hover:border-textarea-border-danger-hover',
-                'focus:border-textarea-border-danger-focus',
-                'placeholder:text-textarea-placeholder-danger'
+                "border-(length:--border-width-validation)",
+                "border-textarea-border-danger",
+                "hover:border-textarea-border-danger-hover",
+                "focus:border-textarea-border-danger-focus",
+                "placeholder:text-textarea-placeholder-danger"
             ],
             success: [
-                'border-textarea-border-success',
-                'hover:border-textarea-border-success-hover',
-                'focus:border-textarea-border-success-focus'
+                "border-(length:--border-width-validation)",
+                "border-textarea-border-success",
+                "hover:border-textarea-border-success-hover",
+                "focus:border-textarea-border-success-focus"
             ],
             warning: [
-                'border-textarea-border-warning',
-                'hover:border-textarea-border-warning-hover',
-                'focus:border-textarea-border-warning-focus'
+                "border-(length:--border-width-validation)",
+                "border-textarea-border-warning",
+                "hover:border-textarea-border-warning-hover",
+                "focus:border-textarea-border-warning-focus"
             ],
             borderless: [
-                'border-transparent',
-                'bg-textarea-bg-borderless',
-                'hover:bg-textarea-bg-borderless-hover',
-                'focus:bg-textarea-bg-borderless-focus'
+                "border-transparent",
+                "bg-textarea-bg-borderless",
+                "hover:bg-textarea-bg-borderless-hover",
+                "focus:bg-textarea-bg-borderless-focus"
             ]
         },
         size: {
-            sm: 'p-textarea-sm text-textarea-sm',
-            md: 'p-textarea-md text-textarea-md',
-            lg: 'p-textarea-lg text-textarea-lg'
+            sm: "rounded-textarea-sm p-textarea-sm text-textarea-sm",
+            md: "rounded-textarea-md p-textarea-md text-textarea-md",
+            lg: "p-textarea-lg text-textarea-lg"
         },
         resize: {
-            none: 'resize-none',
-            y: 'resize-y',
-            x: 'resize-x',
-            both: 'resize',
-            auto: 'resize-none field-sizing-content'
+            none: "resize-none",
+            y: "resize-y",
+            x: "resize-x",
+            both: "resize",
+            auto: "field-sizing-content resize-none"
         },
         readonly: {
-            true: 'bg-textarea-bg-disabled cursor-default text-textarea-fg-disabled border-textarea-border-disabled'
+            true: "cursor-default border-textarea-border-disabled bg-textarea-bg-disabled text-textarea-fg-disabled"
         }
     },
     defaultVariants: {
-        size: 'md',
-        resize: 'y',
-        variant: 'default'
+        size: "md",
+        resize: "y",
+        variant: "default"
     }
 });
 function Textarea({ size, resize, variant, readonly, className, ref, ...props }) {
     return /*#__PURE__*/ jsx("textarea", {
-        ref: ref,
-        readOnly: readonly,
         className: textareaVariants({
             size,
             resize,
@@ -74,8 +78,10 @@ function Textarea({ size, resize, variant, readonly, className, ref, ...props })
             readonly,
             className
         }),
+        readOnly: readonly,
+        ref: ref,
         ...props
     });
 }
-Textarea.displayName = 'Textarea';
+Textarea.displayName = "Textarea";
 export { Textarea };

package/dist/atoms/tooltip.js

@@ -6,45 +6,45 @@ import { tv } from "tailwind-variants";
 const tooltipVariants = tv({
     slots: {
         trigger: [
-            'inline-flex'
+            "inline-flex"
         ],
         content: [
-            '[--arrow-size:var(--tooltip-arrow-size)]',
-            '[--arrow-background:var(--tooltip-arrow-background)]',
-            'bg-tooltip-bg',
-            'rounded-tooltip shadow-tooltip'
+            "[--arrow-size:var(--tooltip-arrow-size)]",
+            "[--arrow-background:var(--tooltip-arrow-background)]",
+            "bg-tooltip-bg",
+            "rounded-tooltip shadow-tooltip"
         ],
         positioner: [
-            'relative'
+            "relative"
         ],
-        arrow: ''
+        arrow: ""
     },
     variants: {
         variant: {
             default: {},
             outline: {
-                content: 'border border-tooltip-border',
-                arrow: 'border-t border-s border-tooltip-border'
+                content: "border border-tooltip-border",
+                arrow: "border-tooltip-border border-s border-t"
             }
         },
         size: {
             sm: {
-                content: 'text-tooltip-sm p-tooltip-sm'
+                content: "p-tooltip-sm text-tooltip-sm"
             },
             md: {
-                content: 'text-tooltip-md p-tooltip-md'
+                content: "p-tooltip-md text-tooltip-md"
             },
             lg: {
-                content: 'text-tooltip-lg p-tooltip-lg'
+                content: "p-tooltip-lg text-tooltip-lg"
             }
         }
     },
     defaultVariants: {
-        size: 'md',
-        variant: 'default'
+        size: "md",
+        variant: "default"
     }
 });
-function Tooltip({ content, children, className, ref, size, variant, id: MRAId, dir = 'ltr', openDelay = 200, closeDelay = 200, interactive = true, defaultOpen, open, onOpenChange, disabled, closeOnEscape = true, closeOnPointerDown, closeOnScroll, closeOnClick, placement, offset = {
+function Tooltip({ content, children, className, ref, size, variant, id: MRAId, dir = "ltr", openDelay = 200, closeDelay = 200, interactive = true, defaultOpen, open, onOpenChange, disabled, closeOnEscape = true, closeOnPointerDown, closeOnScroll, closeOnClick, placement, offset = {
     mainAxis: 16,
     crossAxis: 0
 }, gutter, flip, sameWidth, boundary, listeners, strategy }) {
@@ -86,8 +86,8 @@ function Tooltip({ content, children, className, ref, size, variant, id: MRAId,
         children: [
             /*#__PURE__*/ jsx("span", {
                 ...spanCompatibleProps,
-                ref: ref,
                 className: trigger(),
+                ref: ref,
                 children: children
             }),
             /*#__PURE__*/ jsx(Portal, {
@@ -115,5 +115,5 @@ function Tooltip({ content, children, className, ref, size, variant, id: MRAId,
         ]
     });
 }
-Tooltip.displayName = 'Tooltip';
+Tooltip.displayName = "Tooltip";
 export { Tooltip };