get-elementa-ui 1.5.0 → 1.7.0

package/dist/components/separator.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Separator as SeparatorPrimitive } from 'radix-ui';
+import { cn } from '@/src/lib/utils';
+function Separator({ className, orientation = 'horizontal', decorative = true, ...props }) {
+    return (_jsx(SeparatorPrimitive.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 }));
+}
+export { Separator };

package/dist/components/skeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '@/src/lib/utils';
+function Skeleton({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "skeleton", className: cn('bg-muted rounded-md animate-pulse', className), ...props }));
+}
+export { Skeleton };

package/dist/hooks/use-mobile.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+const MOBILE_BREAKPOINT = 768;
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = React.useState(undefined);
+    React.useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        mql.addEventListener('change', onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        return () => mql.removeEventListener('change', onChange);
+    }, []);
+    return !!isMobile;
+}

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}from"radix-ui";import{clsx as o}from"clsx";import{twMerge as s}from"tailwind-merge";import{CheckIcon as d,ChevronDownIcon as l,ChevronUpIcon as c}from"lucide-react";import{useState as u,useEffect as p}from"react";function g(...e){return s(o(e))}const m=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 v({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:g(m({variant:a,size:i,className:t})),...o})}function f({className:t,...a}){return e(i.Root,{"data-slot":"checkbox",className:g("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(d,{})})})}function b({...t}){return e(n.Root,{"data-slot":"select",...t})}function x({className:t,...a}){return e(n.Group,{"data-slot":"select-group",className:g("scroll-my-1 p-1",t),...a})}function h({...t}){return e(n.Value,{"data-slot":"select-value",...t})}function y({className:a,size:r="default",children:i,...o}){return t(n.Trigger,{"data-slot":"select-trigger","data-size":r,className:g("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(l,{className:"text-muted-foreground size-4 pointer-events-none"})})]})}function z({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:g("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(H,{}),e(n.Viewport,{"data-position":i,className:g("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(_,{})]})})}function k({className:t,...a}){return e(n.Label,{"data-slot":"select-label",className:g("text-muted-foreground px-1.5 py-1 text-xs",t),...a})}function N({className:a,children:r,...i}){return t(n.Item,{"data-slot":"select-item",className:g("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(d,{className:"pointer-events-none"})})}),e(n.ItemText,{children:r})]})}function w({className:t,...a}){return e(n.Separator,{"data-slot":"select-separator",className:g("bg-border -mx-1 my-1 h-px pointer-events-none",t),...a})}function H({className:t,...a}){return e(n.ScrollUpButton,{"data-slot":"select-scroll-up-button",className:g("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 _({className:t,...a}){return e(n.ScrollDownButton,{"data-slot":"select-scroll-down-button",className:g("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",t),...a,children:e(l,{})})}var B;function C({variant:t=B.Body,color:a,children:r}){const[i,n]=u("");return p(()=>{n(g((e=>{switch(e){case B.H1:return"text-[61px] font-heading";case B.H2:return"text-[48px] font-heading";case B.H3:return"text-[39px] font-heading";case B.H4:return"text-[31px] font-bold font-heading";case B.H5:return"text-[25px] font-bold font-heading";case B.H6:return"text-[20px] font-bold font-heading";case B.Body:return"text-[16px] font-body";case B.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"}(B||(B={}));export{v as Button,f as Checkbox,b as Select,z as SelectContent,x as SelectGroup,N as SelectItem,k as SelectLabel,_ as SelectScrollDownButton,H as SelectScrollUpButton,w as SelectSeparator,y as SelectTrigger,h as SelectValue,C as Text};
+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};

package/dist/index.js

@@ -1,8 +1,12 @@
 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 { Button };
 export { Checkbox };
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
+export { Separator };
+export { Skeleton };
 export { Text };

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Separator as SeparatorPrimitive } from 'radix-ui';
+declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Separator };

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

@@ -0,0 +1,2 @@
+declare function Skeleton({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { Skeleton };

package/dist/types/hooks/use-mobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

package/dist/types/index.d.ts

@@ -1,8 +1,12 @@
 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 { Button };
 export { Checkbox };
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
+export { Separator };
+export { Skeleton };
 export { Text };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "get-elementa-ui",
-    "version": "1.5.0",
+    "version": "1.7.0",
     "description": "Elementa UI components library.",
     "homepage": "https://deriva.xyz/branding",
     "main": "dist/index.js",
@@ -18,6 +18,7 @@
     },
     "files": [
         "dist/**/*",
+        "./src/styles/globals.css",
         "src/index.ts",
         "README.md",
         "LICENSE"
@@ -90,9 +91,6 @@
         "ts-node": "^10.9.2",
         "tw-animate-css": "^1.4.0"
     },
-    "exports": {
-        "./theme.css": "./src/styles/globals.css"
-    },
     "resolutions": {
         "@types/minimatch": "5.1.2"
     }

package/src/index.ts

@@ -12,6 +12,8 @@ import {
     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 { Button };
@@ -28,4 +30,6 @@ export {
     SelectTrigger,
     SelectValue
 };
+export { Separator };
+export { Skeleton };
 export { Text };

package/src/styles/globals.css

@@ -0,0 +1,251 @@
+/* 1. Fraunces */
+@font-face {
+  font-family: 'Fraunces';
+  src: url('./../assets/fonts/fraunces/Fraunces-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Fraunces';
+  src: url('./../assets/fonts/fraunces/Fraunces-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* 2. Satoshi */
+@font-face {
+  font-family: 'Satoshi';
+  src: url('./../assets/fonts/satoshi/Satoshi-Light.otf') format('opentype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('./../assets/fonts/satoshi/Satoshi-Regular.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('./../assets/fonts/satoshi/Satoshi-Medium.otf') format('opentype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('./../assets/fonts/satoshi/Satoshi-Bold.otf') format('opentype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Satoshi';
+  src: url('./../assets/fonts/satoshi/Satoshi-Black.otf') format('opentype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --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;
+  --color-acid-lime-100: #FBFEED;
+  --color-acid-lime-200: #F2FBCA;
+  --color-acid-lime-300: #EAF8A6;
+  --color-acid-lime-400: #E2F582;
+  --color-acid-lime-500: #D9F25F;
+  --color-acid-lime-600: #D5F14D;
+  --color-acid-lime-700: #C0D945;
+  --color-acid-lime-800: #95A936;
+  --color-acid-lime-900: #6B7927;
+  --color-acid-lime-1000: #404817;
+  --color-acid-lime-1100: #151808;
+  --color-aqua-mint-100: #F1FDF9;
+  --color-aqua-mint-200: #D5FAEE;
+  --color-aqua-mint-300: #B9F6E2;
+  --color-aqua-mint-400: #9CF2D6;
+  --color-aqua-mint-500: #80EFCB;
+  --color-aqua-mint-600: #72EDC5;
+  --color-aqua-mint-700: #67D5B1;
+  --color-aqua-mint-800: #50A68A;
+  --color-aqua-mint-900: #397763;
+  --color-aqua-mint-1000: #22473B;
+  --color-aqua-mint-1100: #0B1814;
+  --color-gun-metal-100: #D3D7D9;
+  --color-gun-metal-200: #B5BDC0;
+  --color-gun-metal-300: #919CA1;
+  --color-gun-metal-400: #6C7A82;
+  --color-gun-metal-500: #475962;
+  --color-gun-metal-600: #223843;
+  --color-gun-metal-700: #1C2F38;
+  --color-gun-metal-800: #17252D;
+  --color-gun-metal-900: #111C22;
+  --color-gun-metal-1000: #0B1316;
+  --color-gun-metal-1100: #070B0D;
+  --color-amber-white-100: #FCFCFD;
+  --color-amber-white-200: #FAFAFB;
+  --color-amber-white-300: #F7F8F9;
+  --color-amber-white-400: #F4F6F7;
+  --color-amber-white-500: #F2F3F5;
+  --color-amber-white-600: #EFF1F3;
+  --color-amber-white-700: #C7C9CB;
+  --color-amber-white-800: #9FA1A2;
+  --color-amber-white-900: #78797A;
+  --color-amber-white-1000: #505051;
+  --color-amber-white-1100: #303031;
+  --font-heading: 'Fraunces', sans-serif;
+  --font-body: 'Satoshi', sans-serif;
+  --font-heading: var(--font-fraunces), serif;
+  --font-body: var(--font-satoshi), sans-serif;
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}