get-elementa-ui 1.11.6 → 1.12.0

package/dist/index.esm.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cn as cn$1 } from '@/lib/utils';
 import * as React from 'react';
 import React__default, { useState, useLayoutEffect, forwardRef, createElement, useEffect } from 'react';
 import * as ReactDOM from 'react-dom';
@@ -65,7 +66,6 @@ function createSlot(ownerName) {
   Slot2.displayName = `${ownerName}.Slot`;
   return Slot2;
 }
-var Slot$1 = /* @__PURE__ */ createSlot("Slot");
 // @__NO_SIDE_EFFECTS__
 function createSlotClone(ownerName) {
   const SlotClone = React.forwardRef((props, forwardedRef) => {
@@ -6166,8 +6166,83 @@ function isValidOrientation(orientation) {
 }
 var Root = Separator$1;
 
+function Avatar({ className, size = 'default', ...props }) {
+    return (jsx(Root$2, { "data-slot": "avatar", "data-size": size, className: cn$1('group/avatar border-stroke-active-primary relative flex size-8 shrink-0 overflow-hidden rounded-full border-2 select-none data-[size=lg]:size-10 data-[size=sm]:size-6', className), ...props }));
+}
+
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
+const falsyToString = (value)=>typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+const cx = clsx;
+const cva = (base, config)=>(props)=>{
+        var _config_compoundVariants;
+        if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+        const { variants, defaultVariants } = config;
+        const getVariantClassNames = Object.keys(variants).map((variant)=>{
+            const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+            const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+            if (variantProp === null) return null;
+            const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+            return variants[variant][variantKey];
+        });
+        const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param)=>{
+            let [key, value] = param;
+            if (value === undefined) {
+                return acc;
+            }
+            acc[key] = value;
+            return acc;
+        }, {});
+        const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param)=>{
+            let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
+            return Object.entries(compoundVariantOptions).every((param)=>{
+                let [key, value] = param;
+                return Array.isArray(value) ? value.includes({
+                    ...defaultVariants,
+                    ...propsWithoutUndefined
+                }[key]) : ({
+                    ...defaultVariants,
+                    ...propsWithoutUndefined
+                })[key] === value;
+            }) ? [
+                ...acc,
+                cvClass,
+                cvClassName
+            ] : acc;
+        }, []);
+        return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+    };
+
+const buttonVariants = cva("focus-visible:border-ring py-1 cursor-pointer active:scale-95 focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive rounded-[8px] border border-transparent font-body font-bold focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variants: {
+        variant: {
+            default: 'bg-bg-active-primary text-text-primary hover:bg-bg-active-hover-primary [a]:hover:bg-primary/80',
+            outline: 'border-stroke-base-primary bg-bg-base-primary hover:bg-muted aria-expanded:bg-muted text-text-primary',
+            secondary: 'bg-bg-active-secondary text-text-primary hover:bg-bg-active-hover-secondary aria-expanded:bg-secondary aria-expanded:text-text-primary',
+            ghost: 'hover:bg-muted text-text-primary aria-expanded:bg-muted',
+            destructive: 'bg-bg-destructive hover:bg-bg-hover-destructive focus-visible:ring-destructive/20 text-text-destructive focus-visible:border-destructive/40 border-stroke-destructive',
+            link: 'text-text-info underline-offset-4 hover:underline'
+        },
+        size: {
+            default: 'h-10 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+            xs: "h-8 gap-1 px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-9 gap-1 px-3 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+            lg: 'h-11 gap-1.5 px-3 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
+            icon: 'size-8',
+            'icon-xs': "size-6 [&_svg:not([class*='size-'])]:size-3",
+            'icon-sm': 'size-7',
+            'icon-lg': 'size-9'
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default'
+    }
+});
+function Button({ className, variant = 'default', size = 'default', asChild = false, ...props }) {
+    return (jsx("button", { "data-slot": "button", "data-variant": variant, "data-size": size, className: cn$1(buttonVariants({ variant, size, className })), ...props }));
+}
+
 /**
  * Concatenates two arrays faster than the array spread operator.
  */
@@ -9371,82 +9446,6 @@ function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
 
-function Avatar({ className, size = 'default', ...props }) {
-    return (jsx(Root$2, { "data-slot": "avatar", "data-size": size, className: cn('group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6', className), ...props }));
-}
-
-const falsyToString = (value)=>typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
-const cx = clsx;
-const cva = (base, config)=>(props)=>{
-        var _config_compoundVariants;
-        if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-        const { variants, defaultVariants } = config;
-        const getVariantClassNames = Object.keys(variants).map((variant)=>{
-            const variantProp = props === null || props === void 0 ? void 0 : props[variant];
-            const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
-            if (variantProp === null) return null;
-            const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
-            return variants[variant][variantKey];
-        });
-        const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param)=>{
-            let [key, value] = param;
-            if (value === undefined) {
-                return acc;
-            }
-            acc[key] = value;
-            return acc;
-        }, {});
-        const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param)=>{
-            let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
-            return Object.entries(compoundVariantOptions).every((param)=>{
-                let [key, value] = param;
-                return Array.isArray(value) ? value.includes({
-                    ...defaultVariants,
-                    ...propsWithoutUndefined
-                }[key]) : ({
-                    ...defaultVariants,
-                    ...propsWithoutUndefined
-                })[key] === value;
-            }) ? [
-                ...acc,
-                cvClass,
-                cvClassName
-            ] : acc;
-        }, []);
-        return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-    };
-
-const buttonVariants = cva("focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none", {
-    variants: {
-        variant: {
-            default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
-            outline: 'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
-            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
-            ghost: 'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
-            destructive: 'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
-            link: 'text-primary underline-offset-4 hover:underline'
-        },
-        size: {
-            default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-            xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-            sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-            lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
-            icon: 'size-8',
-            'icon-xs': "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-            'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
-            'icon-lg': 'size-9'
-        }
-    },
-    defaultVariants: {
-        variant: 'default',
-        size: 'default'
-    }
-});
-function Button({ className, variant = 'default', size = 'default', asChild = false, ...props }) {
-    const Comp = asChild ? Slot$1 : 'button';
-    return (jsx(Comp, { "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), ...props }));
-}
-
 /**
  * @license lucide-react v0.575.0 - ISC
  *
@@ -9660,11 +9659,11 @@ function SelectScrollDownButton({ className, ...props }) {
 }
 
 function Separator({ className, orientation = 'horizontal', decorative = true, ...props }) {
-    return (jsx(Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn('bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch', className), ...props }));
+    return (jsx(Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn$1('bg-stroke-base-primary shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch', className), ...props }));
 }
 
 function Skeleton({ className, ...props }) {
-    return (jsx("div", { "data-slot": "skeleton", className: cn('bg-muted rounded-md animate-pulse', className), ...props }));
+    return (jsx("div", { "data-slot": "skeleton", className: cn$1('bg-bg-modal-primary animate-pulse rounded-md', className), ...props }));
 }
 
 var TextVariant;
@@ -9682,13 +9681,12 @@ var TextVariant;
     TextVariant[TextVariant["Caption"] = 10] = "Caption";
     TextVariant[TextVariant["Custom"] = 11] = "Custom";
 })(TextVariant || (TextVariant = {}));
-
 /**
  * This function renders the Text component for the library.
  */
-function Text({ variant = TextVariant.Body, color, children, customClassName }) {
+function Text({ variant = TextVariant.Body, color = 'text-primary', children, className }) {
     // SECTION: Constants and Variables
-    const [className, setClassName] = useState('');
+    const [internalClassName, setInternalClassName] = useState('');
     // !SECTION: Constants and Variables
     // SECTION: States
     // !SECTION: States
@@ -9702,23 +9700,25 @@ function Text({ variant = TextVariant.Body, color, children, customClassName })
     const getVariantClass = (variant) => {
         switch (variant) {
             case TextVariant.H1:
-                return 'text-[61px] font-heading';
+                return '';
             case TextVariant.H2:
-                return 'text-[48px] font-heading';
+                return '';
             case TextVariant.H3:
-                return 'text-[39px] font-heading';
+                return '';
             case TextVariant.H4:
-                return 'text-[31px] font-bold font-heading';
+                return '';
             case TextVariant.H5:
-                return 'text-[25px] font-bold font-heading';
+                return '';
             case TextVariant.H6:
-                return 'text-[20px] font-bold font-heading';
+                return '';
             case TextVariant.Body:
-                return 'text-[16px] font-body';
+                return 'text-sm font-body';
             case TextVariant.Button:
-                return 'text-[16px] font-bold font-body';
+                return 'text-sm font-body';
+            case TextVariant.Caption:
+                return 'text-xs font-body';
             default:
-                return 'text-[16px] font-body';
+                return 'text-sm font-body';
         }
     };
     // !SECTION Functions
@@ -9726,11 +9726,30 @@ function Text({ variant = TextVariant.Body, color, children, customClassName })
     // !SECTION: Event Handlers
     // SECTION: Side Effects
     useEffect(() => {
-        setClassName(cn(getVariantClass(variant), color, customClassName));
-    }, [variant, color, customClassName]);
+        setInternalClassName(cn$1(getVariantClass(variant), color, className));
+    }, [variant, color, className]);
     // !SECTION: Side Effects
     // SECTION: UI
-    return jsx("p", { className: className, children: children });
+    switch (variant) {
+        case TextVariant.H1:
+            return jsx("h1", { className: internalClassName, children: children });
+        case TextVariant.H2:
+            return jsx("h2", { className: internalClassName, children: children });
+        case TextVariant.H3:
+            return jsx("h3", { className: internalClassName, children: children });
+        case TextVariant.H4:
+            return jsx("h4", { className: internalClassName, children: children });
+        case TextVariant.H5:
+            return jsx("h5", { className: internalClassName, children: children });
+        case TextVariant.H6:
+            return jsx("h6", { className: internalClassName, children: children });
+        case TextVariant.Button:
+            return jsx("span", { className: internalClassName, children: children });
+        case TextVariant.Caption:
+            return jsx("span", { className: internalClassName, children: children });
+        default:
+            return jsx("p", { className: className, children: children });
+    }
     // !SECTION: UI
 }