get-elementa-ui 1.8.0 → 1.10.0

package/dist/components/avatar.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar as AvatarPrimitive } from 'radix-ui';
+import { cn } from '@/src/lib/utils';
+function Avatar({ className, size = 'default', ...props }) {
+    return (_jsx(AvatarPrimitive.Root, { "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 }));
+}
+function AvatarImage({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn('aspect-square size-full', className), ...props }));
+}
+function AvatarFallback({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn('bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs', className), ...props }));
+}
+function AvatarBadge({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "avatar-badge", className: cn('bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none', 'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden', 'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2', 'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2', className), ...props }));
+}
+function AvatarGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group", className: cn('*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2', className), ...props }));
+}
+function AvatarGroupCount({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group-count", className: cn('bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3', className), ...props }));
+}
+export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount };

package/dist/components/text.js

@@ -6,7 +6,7 @@ import { TextVariant } from '@/src/lib/types';
 /**
  * This function renders the Text component for the library.
  */
-function Text({ variant = TextVariant.Body, color, children }) {
+function Text({ variant = TextVariant.Body, color, children, customClassName }) {
     // SECTION: Constants and Variables
     const [className, setClassName] = useState('');
     // !SECTION: Constants and Variables
@@ -46,8 +46,8 @@ function Text({ variant = TextVariant.Body, color, children }) {
     // !SECTION: Event Handlers
     // SECTION: Side Effects
     useEffect(() => {
-        setClassName(cn(getVariantClass(variant), color));
-    }, [variant, color]);
+        setClassName(cn(getVariantClass(variant), color, customClassName));
+    }, [variant, color, customClassName]);
     // !SECTION: Side Effects
     // SECTION: UI
     return _jsx("p", { className: className, children: children });

package/dist/index.esm.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{cva as a}from"class-variance-authority";import{Slot as r,Checkbox as i,Select as n,Separator as o}from"radix-ui";import{clsx as s}from"clsx";import{twMerge as d}from"tailwind-merge";import{CheckIcon as l,ChevronDownIcon as c,ChevronUpIcon as u}from"lucide-react";import{useState as p,useEffect as g}from"react";function m(...e){return d(s(e))}const v=a("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 f({className:t,variant:a="default",size:i="default",asChild:n=!1,...o}){const s=n?r.Root:"button";return e(s,{"data-slot":"button","data-variant":a,"data-size":i,className:m(v({variant:a,size:i,className:t})),...o})}function b({className:t,...a}){return e(i.Root,{"data-slot":"checkbox",className:m("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",t),...a,children:e(i.Indicator,{"data-slot":"checkbox-indicator",className:"[&>svg]:size-3.5 grid place-content-center text-current transition-none",children:e(l,{})})})}function h({...t}){return e(n.Root,{"data-slot":"select",...t})}function x({className:t,...a}){return e(n.Group,{"data-slot":"select-group",className:m("scroll-my-1 p-1",t),...a})}function y({...t}){return e(n.Value,{"data-slot":"select-value",...t})}function z({className:a,size:r="default",children:i,...o}){return t(n.Trigger,{"data-slot":"select-trigger","data-size":r,className:m("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",a),...o,children:[i,e(n.Icon,{asChild:!0,children:e(c,{className:"text-muted-foreground size-4 pointer-events-none"})})]})}function k({className:a,children:r,position:i="item-aligned",align:o="center",...s}){return e(n.Portal,{children:t(n.Content,{"data-slot":"select-content","data-align-trigger":"item-aligned"===i,className:m("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","popper"===i&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",a),position:i,align:o,...s,children:[e(_,{}),e(n.Viewport,{"data-position":i,className:m("data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)","popper"===i&&""),children:r}),e(B,{})]})})}function N({className:t,...a}){return e(n.Label,{"data-slot":"select-label",className:m("text-muted-foreground px-1.5 py-1 text-xs",t),...a})}function w({className:a,children:r,...i}){return t(n.Item,{"data-slot":"select-item",className:m("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",a),...i,children:[e("span",{className:"pointer-events-none absolute right-2 flex size-4 items-center justify-center",children:e(n.ItemIndicator,{children:e(l,{className:"pointer-events-none"})})}),e(n.ItemText,{children:r})]})}function H({className:t,...a}){return e(n.Separator,{"data-slot":"select-separator",className:m("bg-border -mx-1 my-1 h-px pointer-events-none",t),...a})}function _({className:t,...a}){return e(n.ScrollUpButton,{"data-slot":"select-scroll-up-button",className:m("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",t),...a,children:e(u,{})})}function B({className:t,...a}){return e(n.ScrollDownButton,{"data-slot":"select-scroll-down-button",className:m("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",t),...a,children:e(c,{})})}function S({className:t,orientation:a="horizontal",decorative:r=!0,...i}){return e(o.Root,{"data-slot":"separator",decorative:r,orientation:a,className:m("bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",t),...i})}function C({className:t,...a}){return e("div",{"data-slot":"skeleton",className:m("bg-muted rounded-md animate-pulse",t),...a})}var j;function I({variant:t=j.Body,color:a,children:r}){const[i,n]=p("");return g(()=>{n(m((e=>{switch(e){case j.H1:return"text-[61px] font-heading";case j.H2:return"text-[48px] font-heading";case j.H3:return"text-[39px] font-heading";case j.H4:return"text-[31px] font-bold font-heading";case j.H5:return"text-[25px] font-bold font-heading";case j.H6:return"text-[20px] font-bold font-heading";case j.Body:return"text-[16px] font-body";case j.Button:return"text-[16px] font-bold font-body";default:return"text-[16px] font-body"}})(t),a))},[t,a]),e("p",{className:i,children:r})}!function(e){e[e.H1=0]="H1",e[e.H2=1]="H2",e[e.H3=2]="H3",e[e.H4=3]="H4",e[e.H5=4]="H5",e[e.H6=5]="H6",e[e.Body=6]="Body",e[e.Button=7]="Button",e[e.Subtitle1=8]="Subtitle1",e[e.Subtitle2=9]="Subtitle2",e[e.Caption=10]="Caption",e[e.Custom=11]="Custom"}(j||(j={}));export{f as Button,b as Checkbox,h as Select,k as SelectContent,x as SelectGroup,w as SelectItem,N as SelectLabel,B as SelectScrollDownButton,_ as SelectScrollUpButton,H as SelectSeparator,z as SelectTrigger,y as SelectValue,S as Separator,C as Skeleton,I as Text};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Avatar as a,Slot as r,Checkbox as i,Select as n,Separator as o}from"radix-ui";import{clsx as s}from"clsx";import{twMerge as d}from"tailwind-merge";import{cva as l}from"class-variance-authority";import{CheckIcon as c,ChevronDownIcon as u,ChevronUpIcon as p}from"lucide-react";import{useState as g,useEffect as m}from"react";function v(...e){return d(s(e))}function f({className:t,size:r="default",...i}){return e(a.Root,{"data-slot":"avatar","data-size":r,className:v("group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",t),...i})}const b=l("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 h({className:t,variant:a="default",size:i="default",asChild:n=!1,...o}){const s=n?r.Root:"button";return e(s,{"data-slot":"button","data-variant":a,"data-size":i,className:v(b({variant:a,size:i,className:t})),...o})}function x({className:t,...a}){return e(i.Root,{"data-slot":"checkbox",className:v("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",t),...a,children:e(i.Indicator,{"data-slot":"checkbox-indicator",className:"[&>svg]:size-3.5 grid place-content-center text-current transition-none",children:e(c,{})})})}function z({...t}){return e(n.Root,{"data-slot":"select",...t})}function y({className:t,...a}){return e(n.Group,{"data-slot":"select-group",className:v("scroll-my-1 p-1",t),...a})}function k({...t}){return e(n.Value,{"data-slot":"select-value",...t})}function N({className:a,size:r="default",children:i,...o}){return t(n.Trigger,{"data-slot":"select-trigger","data-size":r,className:v("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",a),...o,children:[i,e(n.Icon,{asChild:!0,children:e(u,{className:"text-muted-foreground size-4 pointer-events-none"})})]})}function w({className:a,children:r,position:i="item-aligned",align:o="center",...s}){return e(n.Portal,{children:t(n.Content,{"data-slot":"select-content","data-align-trigger":"item-aligned"===i,className:v("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","popper"===i&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",a),position:i,align:o,...s,children:[e(C,{}),e(n.Viewport,{"data-position":i,className:v("data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)","popper"===i&&""),children:r}),e(S,{})]})})}function H({className:t,...a}){return e(n.Label,{"data-slot":"select-label",className:v("text-muted-foreground px-1.5 py-1 text-xs",t),...a})}function _({className:a,children:r,...i}){return t(n.Item,{"data-slot":"select-item",className:v("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",a),...i,children:[e("span",{className:"pointer-events-none absolute right-2 flex size-4 items-center justify-center",children:e(n.ItemIndicator,{children:e(c,{className:"pointer-events-none"})})}),e(n.ItemText,{children:r})]})}function B({className:t,...a}){return e(n.Separator,{"data-slot":"select-separator",className:v("bg-border -mx-1 my-1 h-px pointer-events-none",t),...a})}function C({className:t,...a}){return e(n.ScrollUpButton,{"data-slot":"select-scroll-up-button",className:v("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",t),...a,children:e(p,{})})}function S({className:t,...a}){return e(n.ScrollDownButton,{"data-slot":"select-scroll-down-button",className:v("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",t),...a,children:e(u,{})})}function j({className:t,orientation:a="horizontal",decorative:r=!0,...i}){return e(o.Root,{"data-slot":"separator",decorative:r,orientation:a,className:v("bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",t),...i})}function I({className:t,...a}){return e("div",{"data-slot":"skeleton",className:v("bg-muted rounded-md animate-pulse",t),...a})}var R;function V({variant:t=R.Body,color:a,children:r,customClassName:i}){const[n,o]=g("");return m(()=>{o(v((e=>{switch(e){case R.H1:return"text-[61px] font-heading";case R.H2:return"text-[48px] font-heading";case R.H3:return"text-[39px] font-heading";case R.H4:return"text-[31px] font-bold font-heading";case R.H5:return"text-[25px] font-bold font-heading";case R.H6:return"text-[20px] font-bold font-heading";case R.Body:return"text-[16px] font-body";case R.Button:return"text-[16px] font-bold font-body";default:return"text-[16px] font-body"}})(t),a,i))},[t,a,i]),e("p",{className:n,children:r})}!function(e){e[e.H1=0]="H1",e[e.H2=1]="H2",e[e.H3=2]="H3",e[e.H4=3]="H4",e[e.H5=4]="H5",e[e.H6=5]="H6",e[e.Body=6]="Body",e[e.Button=7]="Button",e[e.Subtitle1=8]="Subtitle1",e[e.Subtitle2=9]="Subtitle2",e[e.Caption=10]="Caption",e[e.Custom=11]="Custom"}(R||(R={}));export{f as Avatar,h as Button,x as Checkbox,z as Select,w as SelectContent,y as SelectGroup,_ as SelectItem,H as SelectLabel,S as SelectScrollDownButton,C as SelectScrollUpButton,B as SelectSeparator,N as SelectTrigger,k as SelectValue,j as Separator,I as Skeleton,V as Text};

package/dist/index.js

@@ -1,12 +1,18 @@
+// SECTION: Imports
+import { Avatar } from '@/src/components/avatar';
 import { Button } from '@/src/components/button';
 import { Checkbox } from '@/src/components/checkbox';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from '@/src/components/select';
 import { Separator } from '@/src/components/separator';
 import { Skeleton } from '@/src/components/skeleton';
 import { Text } from '@/src/components/text';
+// !SECTION: Imports
+// SECTION: Exports
+export { Avatar };
 export { Button };
 export { Checkbox };
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
 export { Separator };
 export { Skeleton };
 export { Text };
+// !SECTION: Exports

package/dist/types/components/avatar.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Avatar as AvatarPrimitive } from 'radix-ui';
+declare function Avatar({ className, size, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+    size?: 'default' | 'sm' | 'lg';
+}): import("react/jsx-runtime").JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount };

package/dist/types/components/button.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "default" | "sm" | "lg" | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;

package/dist/types/components/text.d.ts

@@ -2,5 +2,5 @@ import { TextProps } from '@/src/lib/types';
 /**
  * This function renders the Text component for the library.
  */
-declare function Text({ variant, color, children }: TextProps): import("react/jsx-runtime").JSX.Element;
+declare function Text({ variant, color, children, customClassName }: TextProps): import("react/jsx-runtime").JSX.Element;
 export { Text };

package/dist/types/index.d.ts

@@ -1,9 +1,11 @@
+import { Avatar } from '@/src/components/avatar';
 import { Button } from '@/src/components/button';
 import { Checkbox } from '@/src/components/checkbox';
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from '@/src/components/select';
 import { Separator } from '@/src/components/separator';
 import { Skeleton } from '@/src/components/skeleton';
 import { Text } from '@/src/components/text';
+export { Avatar };
 export { Button };
 export { Checkbox };
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/types/lib/types.d.ts

@@ -16,6 +16,7 @@ interface TextProps {
     variant?: TextVariant;
     color?: string;
     children: React.ReactNode;
+    customClassName?: string;
 }
 export { TextVariant };
 export type { TextProps };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "get-elementa-ui",
-    "version": "1.8.0",
+    "version": "1.10.0",
     "description": "Elementa UI components library.",
     "homepage": "https://deriva.xyz/branding",
     "main": "dist/index.js",

package/src/index.ts

@@ -1,3 +1,5 @@
+// SECTION: Imports
+import { Avatar } from '@/src/components/avatar';
 import { Button } from '@/src/components/button';
 import { Checkbox } from '@/src/components/checkbox';
 import {
@@ -15,7 +17,10 @@ import {
 import { Separator } from '@/src/components/separator';
 import { Skeleton } from '@/src/components/skeleton';
 import { Text } from '@/src/components/text';
+// !SECTION: Imports
 
+// SECTION: Exports
+export { Avatar };
 export { Button };
 export { Checkbox };
 export {
@@ -33,3 +38,4 @@ export {
 export { Separator };
 export { Skeleton };
 export { Text };
+// !SECTION: Exports

package/src/styles/globals.css

@@ -60,9 +60,11 @@
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
 
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark (&:where(.dark, .dark *));
 
+/* GLOBAL PALETTE */
 @theme inline {
+  /* TODO: Again these are used by tailwind. Remove them gradually once our library is using the same variables and is stable. */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -100,28 +102,38 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
   --breakpoint-3xl: 1920px;
-  --color-electric-violet-100: #F5F0FE;
-  --color-electric-violet-200: #E1D3FB;
-  --color-electric-violet-300: #CDB6F9;
-  --color-electric-violet-400: #B999F6;
-  --color-electric-violet-500: #A57CF3;
-  --color-electric-violet-600: #9B6DF2;
-  --color-electric-violet-700: #8C62DA;
-  --color-electric-violet-800: #6D4CA9;
-  --color-electric-violet-900: #4E3779;
-  --color-electric-violet-1000: #2E2149;
-  --color-electric-violet-1100: #0F0B18;
-  --color-hot-pink-100: #FEEFF5;
-  --color-hot-pink-200: #FDCEE2;
-  --color-hot-pink-300: #FBAECF;
-  --color-hot-pink-400: #F98EBB;
-  --color-hot-pink-500: #F86DA8;
-  --color-hot-pink-600: #F75D9E;
-  --color-hot-pink-700: #DE548E;
-  --color-hot-pink-800: #AD416F;
-  --color-hot-pink-900: #7C2F4F;
-  --color-hot-pink-1000: #4A1C2F;
-  --color-hot-pink-1100: #190910;
+  
+  /* SECTION: Variables */
+  /* SECTION: Colors */
+  /* SECTION: Electric Violet */
+  --color-electric-violet-100: oklch(0.963 0.0193 302.21);
+  --color-electric-violet-200: oklch(0.8907 0.0562 301.22);
+  --color-electric-violet-300: oklch(0.8189 0.0956 300.04);
+  --color-electric-violet-400: oklch(0.7474 0.1344 298.96);
+  --color-electric-violet-500: oklch(0.6777 0.1726 297.5);
+  --color-electric-violet-600: oklch(0.6436 0.1922 296.58);
+  --color-electric-violet-700: oklch(0.5965 0.177 296.84);
+  --color-electric-violet-800: oklch(0.4977 0.144 297.26);
+  --color-electric-violet-900: oklch(0.3963 0.1087 297.27);
+  --color-electric-violet-1000: oklch(0.2849 0.0719 296.56);
+  --color-electric-violet-1100: oklch(0.162 0.0275 297.41);
+  /* !SECTION: Electric Violet */
+  
+  /* SECTION: Hot Pink */
+  --color-hot-pink-100: oklch(0.9656 0.0179 351.14);
+  --color-hot-pink-200: oklch(0.8976 0.0586 350.91);
+  --color-hot-pink-300: oklch(0.8335 0.0986 352.09);
+  --color-hot-pink-400: oklch(0.7732 0.1386 354.16);
+  --color-hot-pink-500: oklch(0.7195 0.1797 356.01);
+  --color-hot-pink-600: oklch(0.6958 0.197 357.35);
+  --color-hot-pink-700: oklch(0.6435 0.1802 357.35);
+  --color-hot-pink-800: oklch(0.5363 0.1483 356.85);
+  --color-hot-pink-900: oklch(0.4245 0.1124 357.09);
+  --color-hot-pink-1000: oklch(0.3017 0.0738 356.56);
+  --color-hot-pink-1100: oklch(0.3017 0.0738 356.56);
+  /* !SECTION: Hot Pink */
+  
+  /* SECTION: Acid Lime */
   --color-acid-lime-100: #FBFEED;
   --color-acid-lime-200: #F2FBCA;
   --color-acid-lime-300: #EAF8A6;
@@ -133,6 +145,9 @@
   --color-acid-lime-900: #6B7927;
   --color-acid-lime-1000: #404817;
   --color-acid-lime-1100: #151808;
+  /* !SECTION: Acid Lime */
+
+  /* SECTION: Aqua Mint */
   --color-aqua-mint-100: #F1FDF9;
   --color-aqua-mint-200: #D5FAEE;
   --color-aqua-mint-300: #B9F6E2;
@@ -144,6 +159,9 @@
   --color-aqua-mint-900: #397763;
   --color-aqua-mint-1000: #22473B;
   --color-aqua-mint-1100: #0B1814;
+  /* !SECTION: Aqua Mint */
+
+  /* SECTION: Gun Metal (Neutrals) */
   --color-gun-metal-100: #D3D7D9;
   --color-gun-metal-200: #B5BDC0;
   --color-gun-metal-300: #919CA1;
@@ -155,6 +173,9 @@
   --color-gun-metal-900: #111C22;
   --color-gun-metal-1000: #0B1316;
   --color-gun-metal-1100: #070B0D;
+  /* !SECTION: Gun Metal (Neutrals) */
+
+  /* SECTION: Amber White (Neutrals) */
   --color-amber-white-100: #FCFCFD;
   --color-amber-white-200: #FAFAFB;
   --color-amber-white-300: #F7F8F9;
@@ -166,12 +187,175 @@
   --color-amber-white-900: #78797A;
   --color-amber-white-1000: #505051;
   --color-amber-white-1100: #303031;
+  /* !SECTION: Amber White (Neutrals) */
+  /* !SECTION: Colors */
+
+  /* SECTION: Fonts */
   --font-heading: 'Fraunces', sans-serif;
   --font-body: 'Satoshi', sans-serif;
   --font-heading: var(--font-fraunces), serif;
   --font-body: var(--font-satoshi), sans-serif;
+  /* !SECTION: Fonts */
+  /* !SECTION: Variables */
+
+  /* SECTION: Semantics Mapping */
+  /* SECTION: Structure & Surfaces */
+  /* --background: The absolute bottom layer of the app (Page BG).
+--foreground: The default text color on top of background.
+--card: Background color for Cards, Modals, and Popovers.
+--card-foreground: Text color inside cards.
+--popover: Background for dropdowns, tooltips, and select menus.
+--popover-foreground: Text color inside popovers. */
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  
+/* 1. Structure & Surfaces  (6 Tokens) */
+
+
+
+/* 2. Brand Actions (8 Tokens)
+These handle your "Primary" (Brand) and "Secondary" (Alternative) interactions.
+
+--primary: High-emphasis actions (Solid Buttons, Active States).
+Example: Electric Violet 600
+--primary-foreground: Text color on top of primary.
+--secondary: Low-emphasis actions (Ghost buttons, Chips).
+Example: Electric Violet 100 (Light) / Violet 900 (Dark)
+--secondary-foreground: Text color on top of secondary.
+--accent: Interactive elements that are not buttons (Hover states, Selected rows).
+--accent-foreground: Text color on top of accent.
+--muted: Backgrounds for disabled states, skeletons, or subtle areas.
+--muted-foreground: Low-contrast text (subtitles, placeholders).
+3. Feedback & Borders (6 Tokens)
+--destructive: Critical actions (Delete, Error).
+--destructive-foreground: Text on top of destructive.
+--border: Hairline borders for inputs, cards, and dividers.
+--input: Background or border specifically for form inputs (often same as --border).
+--ring: Focus ring color for accessibility.
+--radius: Global border-radius (e.g., 0.5rem).
+4. Data Visualization (8 Tokens)
+For charts, graphs, and status badges. These are vital for dashboards (Deriva's core use case).
+
+--chart-1: Primary data series (usually matches Brand Primary).
+--chart-2: Secondary data series.
+--chart-3: Tertiary data series.
+--chart-4: Quaternary data series.
+--chart-5: Quinary data series.
+--success: Positive states (Green/Teal).
+--warning: Cautionary states (Yellow/Orange).
+--info: Neutral information (Blue/Gray). */
+  /* !SECTION: Semantics Mapping */
+}
+
+/* SECTION: TODO: rename */
+@layer base {
+  /* SECTION: Base Styles */
+  /* Light Theme */
+  :root {
+    --background: var(--color-amber-white-100);
+    --foreground: var(--color-gun-metal-1100);
+  }
+
+  /* Dark Theme */
+  .dark {
+    --background: var(--color-gun-metal-1100);
+    --foreground: var(--color-amber-white-100);
+  }
+  /* !SECTION: Base Styles */
+
+  /* SECTION: Energies */
+  /* SECTION: ENERGY 1: VAPORWAVE (Electric Violet + Hot Pink) */
+  /* Light Theme */
+  [data-energy="vaporwave"] {
+    --primary: var(--color-electric-violet-600);
+    --primary-foreground: #ffffff;
+    --secondary: var(--color-electric-violet-100);
+    --secondary-foreground: var(--color-electric-violet-900);
+  }
+
+  /* Dark Theme */
+  .dark[data-energy="vaporwave"] {    
+    --primary: var(--color-electric-violet-400); 
+    --primary-foreground: var(--color-gun-metal-1100);
+    --secondary: var(--color-electric-violet-900); 
+    --secondary-foreground: var(--color-electric-violet-100);
+  }
+  /* !SECTION: ENERGY 1: VAPORWAVE (Electric Violet + Hot Pink) */
+
+  /* SECTION: ENERGY 2: ELECTRIC SHOCK (Electric Violet + Acid Lime) */
+  /* Light Theme */
+  [data-energy="electric-shock"] {
+    --primary: var(--color-electric-violet-600);
+    --primary-foreground: #ffffff;
+    --secondary: var(--color-acid-lime-100);
+    --secondary-foreground: var(--color-acid-lime-900);
+  }
+
+  /* Dark Theme */
+  .dark[data-energy="electric-shock"] {
+    --primary: var(--color-electric-violet-400);
+    --primary-foreground: var(--color-gun-metal-1100);
+    --secondary: var(--color-electric-violet-900);
+    --secondary-foreground: var(--color-electric-violet-100);
+  }
+  /* !SECTION: ENERGY 2: ELECTRIC SHOCK (Electric Violet + Acid Lime) */
+
+  /* SECTION: ENERGY 3: CYBER MIST (Electric Violet + Aqua Mint) */
+  /* Light Theme */
+  [data-energy="cyber-mist"] {
+    --primary: var(--color-electric-violet-600);
+    --primary-foreground: #ffffff;
+    --secondary: var(--color-aqua-mint-100);
+    --secondary-foreground: var(--color-aqua-mint-900);
+  }
+
+  /* Dark Theme */
+  /* !SECTION: ENERGY 3: CYBER MIST (Electric Violet + Aqua Mint) */
+
+  /* SECTION: ENERGY 4: SUMMER FRUIT (Hot Pink + Acid Lime) */
+  /* Light Theme */
+  [data-energy="summer-fruit"] {
+    --primary: var(--color-hot-pink-600);
+    --primary-foreground: #ffffff;
+    --secondary: var(--color-acid-lime-100);
+    --secondary-foreground: var(--color-acid-lime-900);
+  }
+
+  /* Dark Theme */
+  /* !SECTION: ENERGY 4: SUMMER FRUIT (Hot Pink + Acid Lime) */
+
+  /* SECTION: ENERGY 5: BUBBLEGUM ICE (Hot Pink + Aqua Mint) */
+  /* Light Theme */
+  [data-energy="bubblegum-ice"] {
+    --primary: var(--color-hot-pink-600);
+    --primary-foreground: #ffffff;
+    --secondary: var(--color-aqua-mint-100);
+    --secondary-foreground: var(--color-aqua-mint-900);
+  }
+
+  /* Dark Theme */
+  .dark[data-energy="bubblegum-ice"] {
+    --primary: var(--color-hot-pink-600);
+    --primary-foreground: #ffffff;
+    
+    --secondary: var(--color-gun-metal-900);
+    --secondary-foreground: var(--color-aqua-mint-400);
+  }
+  /* !SECTION: ENERGY 5: BUBBLEGUM ICE (Hot Pink + Aqua Mint) */
 }
 
+
+/* TODO: Keeping this for now as shadcn might need it. Once our library is up and stable, starting removing this gradually. */
+/* Base Styles */
+/* @layer base {
+  * { @apply border-gray-200 dark:border-gray-800; }
+  body { @apply bg-background text-foreground transition-colors duration-300; }
+} */
+
 :root {
   --radius: 0.625rem;
   --background: oklch(1 0 0);