get-elementa-ui 1.12.0 → 1.14.0

package/dist/index.esm.js

@@ -6167,7 +6167,7 @@ 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 }));
+    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 rounded-full border-[1.5px] 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}
@@ -6220,14 +6220,14 @@ const buttonVariants = cva("focus-visible:border-ring py-1 cursor-pointer active
             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',
+            destructive: 'bg-bg-fill-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',
+            default: 'h-10 gap-1.5 text-sm 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',
+            sm: "h-9 gap-1 px-3 text-sm 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 text-base 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',
@@ -9597,65 +9597,45 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$2 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$2);
-
-/**
- * @license lucide-react v0.575.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$1 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$1);
-
-/**
- * @license lucide-react v0.575.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode);
+const __iconNode = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode);
 
 function Checkbox({ className, ...props }) {
     return (jsx(Checkbox$1, { "data-slot": "checkbox", className: cn('border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: jsx(CheckboxIndicator, { "data-slot": "checkbox-indicator", className: "[&>svg]:size-3.5 grid place-content-center text-current transition-none", children: jsx(Check, {}) }) }));
 }
 
+const h=({color:c="#000000",height:l="1em",strokeWidth:e=1,width:t="1em"})=>jsx("svg",{xmlns:"http://www.w3.org/2000/svg",xmlSpace:"preserve",style:{fillRule:"evenodd",clipRule:"evenodd",strokeLinejoin:"round",strokeMiterlimit:2},viewBox:"0 0 33 13",height:l,width:t,stroke:c,strokeWidth:e,fill:c,children:jsx("path",{d:"M32.121.435s-3.57 2.356-7.379 4.954a359 359 0 0 0-4.38 3.035c-1.105.778-2.095 1.501-2.886 2.068a2.03 2.03 0 0 1-1.209.388 2.03 2.03 0 0 1-1.21-.385c-1.46-1.026-3.594-2.557-5.812-4.087C4.95 3.445.414.435.414.435a.243.243 0 1 0-.292.39S4.28 4.337 8.328 7.632c2.09 1.7 4.157 3.321 5.55 4.433a3.94 3.94 0 0 0 2.39.815 3.94 3.94 0 0 0 2.39-.812c.766-.6 1.737-1.349 2.793-2.192a344 344 0 0 0 4.14-3.355A658 658 0 0 0 32.413.825a.244.244 0 0 0-.292-.39"})}),d=({color:c="#000000",height:l="1em",strokeWidth:e=1,width:t="1em"})=>jsx("svg",{xmlns:"http://www.w3.org/2000/svg",xmlSpace:"preserve",style:{fillRule:"evenodd",clipRule:"evenodd",strokeLinejoin:"round",strokeMiterlimit:2},viewBox:"0 0 34 13",height:l,width:t,stroke:c,strokeWidth:e,fill:c,children:jsx("path",{d:"M.93 12.828s3.57-2.356 7.378-4.954a359 359 0 0 0 4.38-3.035c1.105-.778 2.095-1.5 2.886-2.068a2.03 2.03 0 0 1 1.21-.388c.424 0 .851.121 1.21.385 1.46 1.026 3.593 2.557 5.811 4.087a687 687 0 0 0 8.832 5.973.243.243 0 1 0 .292-.39s-4.159-3.512-8.207-6.807c-2.089-1.7-4.157-3.32-5.55-4.433a3.94 3.94 0 0 0-2.389-.815 3.94 3.94 0 0 0-2.39.812c-.767.601-1.738 1.35-2.794 2.192a344 344 0 0 0-4.14 3.355C3.9 9.672.637 12.438.637 12.438a.244.244 0 0 0 .292.39"})}),yl=({color:c="#000000",height:l="1em",strokeWidth:e=1,width:t="1em"})=>jsx("svg",{xmlns:"http://www.w3.org/2000/svg",xmlSpace:"preserve",style:{fillRule:"evenodd",clipRule:"evenodd",strokeLinejoin:"round",strokeMiterlimit:2},viewBox:"0 0 33 24",height:l,width:t,stroke:c,strokeWidth:e,fill:c,children:jsx("path",{d:"M.323 12.132s3.41 4.214 6.18 7.543c1.081 1.3 2.073 2.454 2.694 3.19a1.87 1.87 0 0 0 1.347.634 1.9 1.9 0 0 0 1.403-.554c.697-.691 1.853-1.802 3.233-3.208.96-.978 2.03-2.094 3.146-3.293a443 443 0 0 0 5.721-6.295C28.564 5.106 32.495.577 32.495.577a.037.037 0 0 0 0-.052.037.037 0 0 0-.053 0s-4.42 4.053-9.34 8.704a446 446 0 0 0-6.139 5.888 179 179 0 0 0-3.207 3.234c-1.369 1.417-2.448 2.602-3.12 3.318l-.063.05-.099-.018c-.674-.687-1.73-1.781-2.925-2.98a841 841 0 0 0-6.936-6.854.197.197 0 0 0-.277-.013.197.197 0 0 0-.013.278"})});
+
 function Select({ ...props }) {
     return jsx(Root2, { "data-slot": "select", ...props });
 }
 function SelectGroup({ className, ...props }) {
-    return (jsx(Group, { "data-slot": "select-group", className: cn('scroll-my-1 p-1', className), ...props }));
+    return (jsx(Group, { "data-slot": "select-group", className: cn$1('scroll-my-1 p-1', className), ...props }));
 }
 function SelectValue({ ...props }) {
     return jsx(Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({ className, size = 'default', children, ...props }) {
-    return (jsxs(Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 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 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [children, jsx(Icon$1, { asChild: true, children: jsx(ChevronDown, { className: "text-muted-foreground size-4 pointer-events-none" }) })] }));
+    return (jsxs(Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn$1("border-stroke-flat-secondary font-body data-placeholder:text-text-tertiary bg-bg-flat-primary flex w-fit items-center justify-between gap-1.5 rounded-lg border py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", 'aria-invalid:border-stroke-destructive aria-invalid:ring-bg-fill-destructive aria-invalid:ring-3', 'focus-visible:border-stroke-active-primary focus-visible:ring-bg-fill-active-primary focus-visible:ring-3', 'cursor-pointer', className), ...props, children: [children, jsx(Icon$1, { asChild: true, children: jsx(h, { className: "text-text-primary pointer-events-none size-4" }) })] }));
 }
 function SelectContent({ className, children, position = 'item-aligned', align = 'center', ...props }) {
-    return (jsx(Portal, { children: jsxs(Content2, { "data-slot": "select-content", "data-align-trigger": position === 'item-aligned', className: cn('bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none', position === 'popper' &&
-                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, align: align, ...props, children: [jsx(SelectScrollUpButton, {}), jsx(Viewport, { "data-position": position, className: cn('data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)', position === 'popper' && ''), children: children }), jsx(SelectScrollDownButton, {})] }) }));
+    return (jsx(Portal, { children: jsxs(Content2, { "data-slot": "select-content", "data-align-trigger": position === 'item-aligned', className: cn$1('bg-bg-flat-primary text-text-primary ring-stroke-flat-secondary/30 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none', position === 'popper' &&
+                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, align: align, ...props, children: [jsx(SelectScrollUpButton, {}), jsx(Viewport, { "data-position": position, className: cn$1('data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)', position === 'popper' && ''), children: children }), jsx(SelectScrollDownButton, {})] }) }));
 }
 function SelectLabel({ className, ...props }) {
-    return (jsx(Label, { "data-slot": "select-label", className: cn('text-muted-foreground px-1.5 py-1 text-xs', className), ...props }));
+    return (jsx(Label, { "data-slot": "select-label", className: cn$1('text-text-primary font-body px-1.5 py-1 text-xs', className), ...props }));
 }
 function SelectItem({ className, children, ...props }) {
-    return (jsxs(Item, { "data-slot": "select-item", className: cn("focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: jsx(ItemIndicator, { children: jsx(Check, { className: "pointer-events-none" }) }) }), jsx(ItemText, { children: children })] }));
+    return (jsxs(Item, { "data-slot": "select-item", className: cn$1('relative flex w-full items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5', "focus:bg-bg-base-selected-primary focus:text-text-primary not-data-[variant=destructive]:focus:**:text-text-primary text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", 'cursor-pointer', className), ...props, children: [jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: jsx(ItemIndicator, { children: jsx(yl, { className: "pointer-events-none" }) }) }), jsx(ItemText, { children: children })] }));
 }
 function SelectSeparator({ className, ...props }) {
-    return (jsx(Separator$2, { "data-slot": "select-separator", className: cn('bg-border -mx-1 my-1 h-px pointer-events-none', className), ...props }));
+    return (jsx(Separator$2, { "data-slot": "select-separator", className: cn$1('bg-stroke-flat-primary pointer-events-none -mx-1 my-1 h-px', className), ...props }));
 }
 function SelectScrollUpButton({ className, ...props }) {
-    return (jsx(ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: jsx(ChevronUp, {}) }));
+    return (jsx(ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn$1("bg-bg-flat-primary z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: jsx(d, {}) }));
 }
 function SelectScrollDownButton({ className, ...props }) {
-    return (jsx(ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: jsx(ChevronDown, {}) }));
+    return (jsx(ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn$1("bg-bg-flat-primary z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: jsx(h, {}) }));
 }
 
 function Separator({ className, orientation = 'horizontal', decorative = true, ...props }) {
@@ -9684,11 +9664,12 @@ var TextVariant;
 /**
  * This function renders the Text component for the library.
  */
-function Text({ variant = TextVariant.Body, color = 'text-primary', children, className }) {
+function Text({ variant = TextVariant.Body, color = 'text-text-primary', children, className }) {
     // SECTION: Constants and Variables
-    const [internalClassName, setInternalClassName] = useState('');
+    const baseClassNames = 'w-fit';
     // !SECTION: Constants and Variables
     // SECTION: States
+    const [internalClassName, setInternalClassName] = useState('');
     // !SECTION: States
     // SECTION: Functions
     /**
@@ -9713,8 +9694,12 @@ function Text({ variant = TextVariant.Body, color = 'text-primary', children, cl
                 return '';
             case TextVariant.Body:
                 return 'text-sm font-body';
+            case TextVariant.Subtitle1:
+                return 'text-sm font-medium font-body';
+            case TextVariant.Subtitle2:
+                return 'text-xs font-medium font-body';
             case TextVariant.Button:
-                return 'text-sm font-body';
+                return 'text-sm font-medium font-body';
             case TextVariant.Caption:
                 return 'text-xs font-body';
             default:
@@ -9726,7 +9711,7 @@ function Text({ variant = TextVariant.Body, color = 'text-primary', children, cl
     // !SECTION: Event Handlers
     // SECTION: Side Effects
     useEffect(() => {
-        setInternalClassName(cn$1(getVariantClass(variant), color, className));
+        setInternalClassName(cn$1(baseClassNames, getVariantClass(variant), color, className));
     }, [variant, color, className]);
     // !SECTION: Side Effects
     // SECTION: UI
@@ -9744,11 +9729,15 @@ function Text({ variant = TextVariant.Body, color = 'text-primary', children, cl
         case TextVariant.H6:
             return jsx("h6", { className: internalClassName, children: children });
         case TextVariant.Button:
-            return jsx("span", { className: internalClassName, children: children });
+            return jsx("p", { className: internalClassName, children: children });
         case TextVariant.Caption:
-            return jsx("span", { className: internalClassName, children: children });
+            return jsx("p", { className: internalClassName, children: children });
+        case TextVariant.Subtitle1:
+            return jsx("p", { className: internalClassName, children: children });
+        case TextVariant.Subtitle2:
+            return jsx("p", { className: internalClassName, children: children });
         default:
-            return jsx("p", { className: className, children: children });
+            return jsx("p", { className: internalClassName, children: children });
     }
     // !SECTION: UI
 }