get-elementa-ui 1.10.4 → 1.11.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/index.d.ts +7 -0
- package/dist/index.esm.js +9738 -1
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +9773 -18
- package/dist/index.js.map +1 -0
- package/dist/style.css +7 -0
- package/package.json +7 -8
- package/dist/components/avatar.js +0 -23
- package/dist/components/button.js +0 -35
- package/dist/components/checkbox.js +0 -9
- package/dist/components/select.js +0 -37
- package/dist/components/separator.js +0 -8
- package/dist/components/skeleton.js +0 -6
- package/dist/components/text.js +0 -56
- package/dist/hooks/use-mobile.js +0 -15
- package/dist/lib/types.js +0 -16
- package/dist/lib/utils.js +0 -5
- package/src/index.ts +0 -41
- package/src/styles/globals.css +0 -425
- /package/{src → dist}/assets/fonts/fraunces/Fraunces-Bold.ttf +0 -0
- /package/{src → dist}/assets/fonts/fraunces/Fraunces-Regular.ttf +0 -0
- /package/{src → dist}/assets/fonts/satoshi/Satoshi-Black.otf +0 -0
- /package/{src → dist}/assets/fonts/satoshi/Satoshi-Bold.otf +0 -0
- /package/{src → dist}/assets/fonts/satoshi/Satoshi-Light.otf +0 -0
- /package/{src → dist}/assets/fonts/satoshi/Satoshi-Medium.otf +0 -0
- /package/{src → dist}/assets/fonts/satoshi/Satoshi-Regular.otf +0 -0
package/dist/style.css
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@font-face{font-display:swap;font-family:Fraunces;font-style:normal;font-weight:400;src:url(../assets/fonts/fraunces/Fraunces-Regular.ttf) format("truetype")}@font-face{font-display:swap;font-family:Fraunces;font-style:normal;font-weight:700;src:url(../assets/fonts/fraunces/Fraunces-Bold.ttf) format("truetype")}@font-face{font-display:swap;font-family:Satoshi;font-style:normal;font-weight:300;src:url(../assets/fonts/satoshi/Satoshi-Light.otf) format("opentype")}@font-face{font-display:swap;font-family:Satoshi;font-style:normal;font-weight:400;src:url(../assets/fonts/satoshi/Satoshi-Regular.otf) format("opentype")}@font-face{font-display:swap;font-family:Satoshi;font-style:normal;font-weight:500;src:url(../assets/fonts/satoshi/Satoshi-Medium.otf) format("opentype")}@font-face{font-display:swap;font-family:Satoshi;font-style:normal;font-weight:700;src:url(../assets/fonts/satoshi/Satoshi-Bold.otf) format("opentype")}@font-face{font-display:swap;font-family:Satoshi;font-style:normal;font-weight:900;src:url(../assets/fonts/satoshi/Satoshi-Black.otf) format("opentype")}:host,:root{--color-electric-violet-100:oklch(0.963 0.0193 302.21);--color-electric-violet-400:oklch(0.7474 0.1344 298.96);--color-electric-violet-600:oklch(0.6436 0.1922 296.58);--color-electric-violet-900:oklch(0.3963 0.1087 297.27);--color-hot-pink-600:oklch(0.6958 0.197 357.35);--color-acid-lime-100:oklch(0.9902 0.0225 114.93);--color-acid-lime-900:oklch(0.5474 0.1072 118.39);--color-aqua-mint-100:oklch(0.984 0.0136 174.18);--color-aqua-mint-400:oklch(0.8986 0.0924 171.55);--color-aqua-mint-900:oklch(0.5218 0.0724 170);--color-gun-metal-900:oklch(0.2189 0.0197 232.69);--color-gun-metal-1100:oklch(0.1458 0.0083 227.73);--color-amber-white-100:oklch(0.9913 0.0013 286.38)}@layer base{:root{--background:var(--color-amber-white-100);--foreground:var(--color-gun-metal-1100)}.dark{--background:var(--color-gun-metal-1100);--foreground:var(--color-amber-white-100)}
|
|
2
|
+
/*!SECTION: Base Styles*/[data-energy=vaporwave]{--primary:var(--color-electric-violet-600);--primary-foreground:#fff;--secondary:var(--color-electric-violet-100);--secondary-foreground:var(--color-electric-violet-900)}.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)}
|
|
3
|
+
/*!SECTION: ENERGY 1: VAPORWAVE (Electric Violet + Hot Pink)*/[data-energy=electric-shock]{--primary:var(--color-electric-violet-600);--primary-foreground:#fff;--secondary:var(--color-acid-lime-100);--secondary-foreground:var(--color-acid-lime-900)}.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)}
|
|
4
|
+
/*!SECTION: ENERGY 2: ELECTRIC SHOCK (Electric Violet + Acid Lime)*/[data-energy=cyber-mist]{--primary:var(--color-electric-violet-600);--primary-foreground:#fff;--secondary:var(--color-aqua-mint-100);--secondary-foreground:var(--color-aqua-mint-900)}
|
|
5
|
+
/*!SECTION: ENERGY 3: CYBER MIST (Electric Violet + Aqua Mint)*/[data-energy=summer-fruit]{--primary:var(--color-hot-pink-600);--primary-foreground:#fff;--secondary:var(--color-acid-lime-100);--secondary-foreground:var(--color-acid-lime-900)}
|
|
6
|
+
/*!SECTION: ENERGY 4: SUMMER FRUIT (Hot Pink + Acid Lime)*/[data-energy=bubblegum-ice]{--primary:var(--color-hot-pink-600);--primary-foreground:#fff;--secondary:var(--color-aqua-mint-100);--secondary-foreground:var(--color-aqua-mint-900)}.dark[data-energy=bubblegum-ice]{--primary:var(--color-hot-pink-600);--primary-foreground:#fff;--secondary:var(--color-gun-metal-900);--secondary-foreground:var(--color-aqua-mint-400)}
|
|
7
|
+
/*!SECTION: ENERGY 5: BUBBLEGUM ICE (Hot Pink + Aqua Mint)*/}@layer utilities{.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none}}}
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "get-elementa-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.11.0",
|
|
4
4
|
"description": "Elementa UI components library.",
|
|
5
5
|
"homepage": "https://deriva.xyz/branding",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.esm.js",
|
|
8
8
|
"types": "dist/types/index.d.ts",
|
|
9
|
+
"style": "dist/style.css",
|
|
9
10
|
"repository": {
|
|
10
11
|
"type": "git",
|
|
11
12
|
"url": "git+https://github.com/deriva-inc/elementa-ui.git"
|
|
@@ -17,12 +18,7 @@
|
|
|
17
18
|
"access": "public"
|
|
18
19
|
},
|
|
19
20
|
"files": [
|
|
20
|
-
"dist
|
|
21
|
-
"src/styles/globals.css",
|
|
22
|
-
"src/assets/fonts/**/*",
|
|
23
|
-
"src/index.ts",
|
|
24
|
-
"README.md",
|
|
25
|
-
"LICENSE"
|
|
21
|
+
"dist"
|
|
26
22
|
],
|
|
27
23
|
"keywords": [
|
|
28
24
|
"react",
|
|
@@ -37,7 +33,7 @@
|
|
|
37
33
|
"elementa-ui"
|
|
38
34
|
],
|
|
39
35
|
"scripts": {
|
|
40
|
-
"build": "rollup -c
|
|
36
|
+
"build": "rollup -c",
|
|
41
37
|
"build:watch": "rollup -c -w",
|
|
42
38
|
"prepublishOnly": "npm run build",
|
|
43
39
|
"publish:npm": "npm publish --access public"
|
|
@@ -76,15 +72,18 @@
|
|
|
76
72
|
"prettier-plugin-tailwindcss": "^0.6.14",
|
|
77
73
|
"rollup": "^4.44.0",
|
|
78
74
|
"rollup-plugin-dts": "^6.2.1",
|
|
75
|
+
"rollup-plugin-postcss": "^4.0.2",
|
|
79
76
|
"rollup-plugin-terser": "^7.0.2",
|
|
80
77
|
"tailwindcss": "^4.2.1",
|
|
81
78
|
"tslib": "^2.8.1",
|
|
82
79
|
"typescript": "^5.8.3"
|
|
83
80
|
},
|
|
84
81
|
"dependencies": {
|
|
82
|
+
"@tailwindcss/postcss": "^4.2.1",
|
|
85
83
|
"class-variance-authority": "^0.7.1",
|
|
86
84
|
"clsx": "^2.1.1",
|
|
87
85
|
"lucide-react": "^0.575.0",
|
|
86
|
+
"postcss": "^8.5.8",
|
|
88
87
|
"radix-ui": "^1.4.3",
|
|
89
88
|
"rollup-plugin-copy": "^3.5.0",
|
|
90
89
|
"shadcn": "^3.8.5",
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { Avatar as AvatarPrimitive } from 'radix-ui';
|
|
4
|
-
import { cn } from '@/src/lib/utils';
|
|
5
|
-
function Avatar({ className, size = 'default', ...props }) {
|
|
6
|
-
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 }));
|
|
7
|
-
}
|
|
8
|
-
function AvatarImage({ className, ...props }) {
|
|
9
|
-
return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn('aspect-square size-full', className), ...props }));
|
|
10
|
-
}
|
|
11
|
-
function AvatarFallback({ className, ...props }) {
|
|
12
|
-
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 }));
|
|
13
|
-
}
|
|
14
|
-
function AvatarBadge({ className, ...props }) {
|
|
15
|
-
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 }));
|
|
16
|
-
}
|
|
17
|
-
function AvatarGroup({ className, ...props }) {
|
|
18
|
-
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 }));
|
|
19
|
-
}
|
|
20
|
-
function AvatarGroupCount({ className, ...props }) {
|
|
21
|
-
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 }));
|
|
22
|
-
}
|
|
23
|
-
export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount };
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { cva } from 'class-variance-authority';
|
|
3
|
-
import { Slot } from 'radix-ui';
|
|
4
|
-
import { cn } from '@/src/lib/utils';
|
|
5
|
-
const buttonVariants = cva("focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none", {
|
|
6
|
-
variants: {
|
|
7
|
-
variant: {
|
|
8
|
-
default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
|
|
9
|
-
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',
|
|
10
|
-
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
|
|
11
|
-
ghost: 'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
|
|
12
|
-
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',
|
|
13
|
-
link: 'text-primary underline-offset-4 hover:underline'
|
|
14
|
-
},
|
|
15
|
-
size: {
|
|
16
|
-
default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
|
|
17
|
-
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",
|
|
18
|
-
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",
|
|
19
|
-
lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
|
|
20
|
-
icon: 'size-8',
|
|
21
|
-
'icon-xs': "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
|
22
|
-
'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
|
|
23
|
-
'icon-lg': 'size-9'
|
|
24
|
-
}
|
|
25
|
-
},
|
|
26
|
-
defaultVariants: {
|
|
27
|
-
variant: 'default',
|
|
28
|
-
size: 'default'
|
|
29
|
-
}
|
|
30
|
-
});
|
|
31
|
-
function Button({ className, variant = 'default', size = 'default', asChild = false, ...props }) {
|
|
32
|
-
const Comp = asChild ? Slot.Root : 'button';
|
|
33
|
-
return (_jsx(Comp, { "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), ...props }));
|
|
34
|
-
}
|
|
35
|
-
export { Button, buttonVariants };
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { Checkbox as CheckboxPrimitive } from 'radix-ui';
|
|
4
|
-
import { cn } from '@/src/lib/utils';
|
|
5
|
-
import { CheckIcon } from 'lucide-react';
|
|
6
|
-
function Checkbox({ className, ...props }) {
|
|
7
|
-
return (_jsx(CheckboxPrimitive.Root, { "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(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "[&>svg]:size-3.5 grid place-content-center text-current transition-none", children: _jsx(CheckIcon, {}) }) }));
|
|
8
|
-
}
|
|
9
|
-
export { Checkbox };
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { Select as SelectPrimitive } from 'radix-ui';
|
|
4
|
-
import { cn } from '@/src/lib/utils';
|
|
5
|
-
import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from 'lucide-react';
|
|
6
|
-
function Select({ ...props }) {
|
|
7
|
-
return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
|
|
8
|
-
}
|
|
9
|
-
function SelectGroup({ className, ...props }) {
|
|
10
|
-
return (_jsx(SelectPrimitive.Group, { "data-slot": "select-group", className: cn('scroll-my-1 p-1', className), ...props }));
|
|
11
|
-
}
|
|
12
|
-
function SelectValue({ ...props }) {
|
|
13
|
-
return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
|
|
14
|
-
}
|
|
15
|
-
function SelectTrigger({ className, size = 'default', children, ...props }) {
|
|
16
|
-
return (_jsxs(SelectPrimitive.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(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "text-muted-foreground size-4 pointer-events-none" }) })] }));
|
|
17
|
-
}
|
|
18
|
-
function SelectContent({ className, children, position = 'item-aligned', align = 'center', ...props }) {
|
|
19
|
-
return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "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' &&
|
|
20
|
-
'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(SelectPrimitive.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, {})] }) }));
|
|
21
|
-
}
|
|
22
|
-
function SelectLabel({ className, ...props }) {
|
|
23
|
-
return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn('text-muted-foreground px-1.5 py-1 text-xs', className), ...props }));
|
|
24
|
-
}
|
|
25
|
-
function SelectItem({ className, children, ...props }) {
|
|
26
|
-
return (_jsxs(SelectPrimitive.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(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "pointer-events-none" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
|
|
27
|
-
}
|
|
28
|
-
function SelectSeparator({ className, ...props }) {
|
|
29
|
-
return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn('bg-border -mx-1 my-1 h-px pointer-events-none', className), ...props }));
|
|
30
|
-
}
|
|
31
|
-
function SelectScrollUpButton({ className, ...props }) {
|
|
32
|
-
return (_jsx(SelectPrimitive.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(ChevronUpIcon, {}) }));
|
|
33
|
-
}
|
|
34
|
-
function SelectScrollDownButton({ className, ...props }) {
|
|
35
|
-
return (_jsx(SelectPrimitive.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(ChevronDownIcon, {}) }));
|
|
36
|
-
}
|
|
37
|
-
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
|
|
@@ -1,8 +0,0 @@
|
|
|
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 };
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { cn } from '@/src/lib/utils';
|
|
3
|
-
function Skeleton({ className, ...props }) {
|
|
4
|
-
return (_jsx("div", { "data-slot": "skeleton", className: cn('bg-muted rounded-md animate-pulse', className), ...props }));
|
|
5
|
-
}
|
|
6
|
-
export { Skeleton };
|
package/dist/components/text.js
DELETED
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useEffect, useState } from 'react';
|
|
4
|
-
import { cn } from '@/src/lib/utils';
|
|
5
|
-
import { TextVariant } from '@/src/lib/types';
|
|
6
|
-
/**
|
|
7
|
-
* This function renders the Text component for the library.
|
|
8
|
-
*/
|
|
9
|
-
function Text({ variant = TextVariant.Body, color, children, customClassName }) {
|
|
10
|
-
// SECTION: Constants and Variables
|
|
11
|
-
const [className, setClassName] = useState('');
|
|
12
|
-
// !SECTION: Constants and Variables
|
|
13
|
-
// SECTION: States
|
|
14
|
-
// !SECTION: States
|
|
15
|
-
// SECTION: Functions
|
|
16
|
-
/**
|
|
17
|
-
* This function returns the class name for the given variant.
|
|
18
|
-
*
|
|
19
|
-
* @param variant - The variant of the text component.
|
|
20
|
-
* @returns The class name for the given variant.
|
|
21
|
-
*/
|
|
22
|
-
const getVariantClass = (variant) => {
|
|
23
|
-
switch (variant) {
|
|
24
|
-
case TextVariant.H1:
|
|
25
|
-
return 'text-[61px] font-heading';
|
|
26
|
-
case TextVariant.H2:
|
|
27
|
-
return 'text-[48px] font-heading';
|
|
28
|
-
case TextVariant.H3:
|
|
29
|
-
return 'text-[39px] font-heading';
|
|
30
|
-
case TextVariant.H4:
|
|
31
|
-
return 'text-[31px] font-bold font-heading';
|
|
32
|
-
case TextVariant.H5:
|
|
33
|
-
return 'text-[25px] font-bold font-heading';
|
|
34
|
-
case TextVariant.H6:
|
|
35
|
-
return 'text-[20px] font-bold font-heading';
|
|
36
|
-
case TextVariant.Body:
|
|
37
|
-
return 'text-[16px] font-body';
|
|
38
|
-
case TextVariant.Button:
|
|
39
|
-
return 'text-[16px] font-bold font-body';
|
|
40
|
-
default:
|
|
41
|
-
return 'text-[16px] font-body';
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
// !SECTION Functions
|
|
45
|
-
// SECTION: Event Handlers
|
|
46
|
-
// !SECTION: Event Handlers
|
|
47
|
-
// SECTION: Side Effects
|
|
48
|
-
useEffect(() => {
|
|
49
|
-
setClassName(cn(getVariantClass(variant), color, customClassName));
|
|
50
|
-
}, [variant, color, customClassName]);
|
|
51
|
-
// !SECTION: Side Effects
|
|
52
|
-
// SECTION: UI
|
|
53
|
-
return _jsx("p", { className: className, children: children });
|
|
54
|
-
// !SECTION: UI
|
|
55
|
-
}
|
|
56
|
-
export { Text };
|
package/dist/hooks/use-mobile.js
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
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/lib/types.js
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
var TextVariant;
|
|
2
|
-
(function (TextVariant) {
|
|
3
|
-
TextVariant[TextVariant["H1"] = 0] = "H1";
|
|
4
|
-
TextVariant[TextVariant["H2"] = 1] = "H2";
|
|
5
|
-
TextVariant[TextVariant["H3"] = 2] = "H3";
|
|
6
|
-
TextVariant[TextVariant["H4"] = 3] = "H4";
|
|
7
|
-
TextVariant[TextVariant["H5"] = 4] = "H5";
|
|
8
|
-
TextVariant[TextVariant["H6"] = 5] = "H6";
|
|
9
|
-
TextVariant[TextVariant["Body"] = 6] = "Body";
|
|
10
|
-
TextVariant[TextVariant["Button"] = 7] = "Button";
|
|
11
|
-
TextVariant[TextVariant["Subtitle1"] = 8] = "Subtitle1";
|
|
12
|
-
TextVariant[TextVariant["Subtitle2"] = 9] = "Subtitle2";
|
|
13
|
-
TextVariant[TextVariant["Caption"] = 10] = "Caption";
|
|
14
|
-
TextVariant[TextVariant["Custom"] = 11] = "Custom";
|
|
15
|
-
})(TextVariant || (TextVariant = {}));
|
|
16
|
-
export { TextVariant };
|
package/dist/lib/utils.js
DELETED
package/src/index.ts
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
// SECTION: Imports
|
|
2
|
-
import { Avatar } from '@/src/components/avatar';
|
|
3
|
-
import { Button } from '@/src/components/button';
|
|
4
|
-
import { Checkbox } from '@/src/components/checkbox';
|
|
5
|
-
import {
|
|
6
|
-
Select,
|
|
7
|
-
SelectContent,
|
|
8
|
-
SelectGroup,
|
|
9
|
-
SelectItem,
|
|
10
|
-
SelectLabel,
|
|
11
|
-
SelectScrollDownButton,
|
|
12
|
-
SelectScrollUpButton,
|
|
13
|
-
SelectSeparator,
|
|
14
|
-
SelectTrigger,
|
|
15
|
-
SelectValue
|
|
16
|
-
} from '@/src/components/select';
|
|
17
|
-
import { Separator } from '@/src/components/separator';
|
|
18
|
-
import { Skeleton } from '@/src/components/skeleton';
|
|
19
|
-
import { Text } from '@/src/components/text';
|
|
20
|
-
// !SECTION: Imports
|
|
21
|
-
|
|
22
|
-
// SECTION: Exports
|
|
23
|
-
export { Avatar };
|
|
24
|
-
export { Button };
|
|
25
|
-
export { Checkbox };
|
|
26
|
-
export {
|
|
27
|
-
Select,
|
|
28
|
-
SelectContent,
|
|
29
|
-
SelectGroup,
|
|
30
|
-
SelectItem,
|
|
31
|
-
SelectLabel,
|
|
32
|
-
SelectScrollDownButton,
|
|
33
|
-
SelectScrollUpButton,
|
|
34
|
-
SelectSeparator,
|
|
35
|
-
SelectTrigger,
|
|
36
|
-
SelectValue
|
|
37
|
-
};
|
|
38
|
-
export { Separator };
|
|
39
|
-
export { Skeleton };
|
|
40
|
-
export { Text };
|
|
41
|
-
// !SECTION: Exports
|