get-elementa-ui 1.5.0 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/separator.js +8 -0
- package/dist/hooks/use-mobile.js +15 -0
- package/dist/index.esm.js +1 -1
- package/dist/index.js +2 -0
- package/dist/types/components/separator.d.ts +4 -0
- package/dist/types/hooks/use-mobile.d.ts +1 -0
- package/dist/types/index.d.ts +2 -0
- package/package.json +1 -1
- package/src/index.ts +2 -0
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Separator as SeparatorPrimitive } from 'radix-ui';
|
|
4
|
+
import { cn } from '@/src/lib/utils';
|
|
5
|
+
function Separator({ className, orientation = 'horizontal', decorative = true, ...props }) {
|
|
6
|
+
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 }));
|
|
7
|
+
}
|
|
8
|
+
export { Separator };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
const MOBILE_BREAKPOINT = 768;
|
|
3
|
+
export function useIsMobile() {
|
|
4
|
+
const [isMobile, setIsMobile] = React.useState(undefined);
|
|
5
|
+
React.useEffect(() => {
|
|
6
|
+
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
|
7
|
+
const onChange = () => {
|
|
8
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
9
|
+
};
|
|
10
|
+
mql.addEventListener('change', onChange);
|
|
11
|
+
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
|
12
|
+
return () => mql.removeEventListener('change', onChange);
|
|
13
|
+
}, []);
|
|
14
|
+
return !!isMobile;
|
|
15
|
+
}
|
package/dist/index.esm.js
CHANGED
|
@@ -1 +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
|
|
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})}var C;function j({variant:t=C.Body,color:a,children:r}){const[i,n]=p("");return g(()=>{n(m((e=>{switch(e){case C.H1:return"text-[61px] font-heading";case C.H2:return"text-[48px] font-heading";case C.H3:return"text-[39px] font-heading";case C.H4:return"text-[31px] font-bold font-heading";case C.H5:return"text-[25px] font-bold font-heading";case C.H6:return"text-[20px] font-bold font-heading";case C.Body:return"text-[16px] font-body";case C.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"}(C||(C={}));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,j as Text};
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { Button } from '@/src/components/button';
|
|
2
2
|
import { Checkbox } from '@/src/components/checkbox';
|
|
3
3
|
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from '@/src/components/select';
|
|
4
|
+
import { Separator } from '@/src/components/separator';
|
|
4
5
|
import { Text } from '@/src/components/text';
|
|
5
6
|
export { Button };
|
|
6
7
|
export { Checkbox };
|
|
7
8
|
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
|
|
9
|
+
export { Separator };
|
|
8
10
|
export { Text };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Separator as SeparatorPrimitive } from 'radix-ui';
|
|
3
|
+
declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export { Separator };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useIsMobile(): boolean;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { Button } from '@/src/components/button';
|
|
2
2
|
import { Checkbox } from '@/src/components/checkbox';
|
|
3
3
|
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from '@/src/components/select';
|
|
4
|
+
import { Separator } from '@/src/components/separator';
|
|
4
5
|
import { Text } from '@/src/components/text';
|
|
5
6
|
export { Button };
|
|
6
7
|
export { Checkbox };
|
|
7
8
|
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
|
|
9
|
+
export { Separator };
|
|
8
10
|
export { Text };
|
package/package.json
CHANGED
package/src/index.ts
CHANGED
|
@@ -12,6 +12,7 @@ import {
|
|
|
12
12
|
SelectTrigger,
|
|
13
13
|
SelectValue
|
|
14
14
|
} from '@/src/components/select';
|
|
15
|
+
import { Separator } from '@/src/components/separator';
|
|
15
16
|
import { Text } from '@/src/components/text';
|
|
16
17
|
|
|
17
18
|
export { Button };
|
|
@@ -28,4 +29,5 @@ export {
|
|
|
28
29
|
SelectTrigger,
|
|
29
30
|
SelectValue
|
|
30
31
|
};
|
|
32
|
+
export { Separator };
|
|
31
33
|
export { Text };
|