@minimalstuff/ui 1.1.0 → 1.1.2
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/README.md +5 -47
- package/dist/{minimalstuff-ui.d.ts → index.d.ts} +63 -0
- package/dist/minimalstuff-ui.css +1 -1
- package/dist/minimalstuff-ui.js +377 -241
- package/package.json +4 -10
- package/dist/uno-config.d.ts +0 -6
- package/dist/uno-config.js +0 -9
package/README.md
CHANGED
|
@@ -5,66 +5,24 @@ React UI component library.
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
pnpm add @minimalstuff/ui react react-dom
|
|
8
|
+
pnpm add @minimalstuff/ui react react-dom
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
Peer dependencies: React 18 or 19
|
|
11
|
+
Peer dependencies: React 18 or 19.
|
|
12
12
|
|
|
13
13
|
## Usage
|
|
14
14
|
|
|
15
|
-
Styles are generated on demand by your app's UnoCSS build (no heavy prebuilt CSS in the lib). In both cases you must **include the lib in UnoCSS content** so its classes are scanned and generated.
|
|
16
|
-
|
|
17
|
-
**Option A — Base your config on the lib's** (recommended): use `@minimalstuff/ui/uno-config` so presets (Wind, icons, web fonts, `dark: 'class'`) match the lib exactly.
|
|
18
|
-
|
|
19
|
-
```ts
|
|
20
|
-
// uno.config.ts
|
|
21
|
-
import libUno from '@minimalstuff/ui/uno-config';
|
|
22
|
-
import { defineConfig } from 'unocss';
|
|
23
|
-
|
|
24
|
-
export default defineConfig({
|
|
25
|
-
...libUno,
|
|
26
|
-
content: {
|
|
27
|
-
pipeline: {
|
|
28
|
-
include: [
|
|
29
|
-
/\.(vue|svelte|[jt]sx|mdx?|html)($|\?)/,
|
|
30
|
-
'node_modules/@minimalstuff/ui/dist/**/*.js',
|
|
31
|
-
],
|
|
32
|
-
},
|
|
33
|
-
},
|
|
34
|
-
});
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
**Option B — Keep your own config**: do not use the lib's config; only add the lib's dist to `content` so UnoCSS scans it. Your presets must be compatible (e.g. same Wind / icons / `dark: 'class'`), or some lib classes may not be generated.
|
|
38
|
-
|
|
39
|
-
```ts
|
|
40
|
-
content: {
|
|
41
|
-
pipeline: {
|
|
42
|
-
include: [
|
|
43
|
-
// your existing patterns
|
|
44
|
-
'node_modules/@minimalstuff/ui/dist/**/*.js',
|
|
45
|
-
],
|
|
46
|
-
},
|
|
47
|
-
},
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
**3. Optional: Tabs animation**
|
|
51
|
-
|
|
52
|
-
If you use the `Tabs` component and want its panel animation, import the small CSS once:
|
|
53
|
-
|
|
54
|
-
```tsx
|
|
55
|
-
import '@minimalstuff/ui/style.css';
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
**Example**
|
|
59
|
-
|
|
60
15
|
```tsx
|
|
61
16
|
import { Button } from '@minimalstuff/ui';
|
|
17
|
+
import '@minimalstuff/ui/style.css';
|
|
62
18
|
|
|
63
19
|
export function App() {
|
|
64
20
|
return <Button variant="primary">Click me</Button>;
|
|
65
21
|
}
|
|
66
22
|
```
|
|
67
23
|
|
|
24
|
+
The `@minimalstuff/ui/style.css` import is required for styles and icons to render.
|
|
25
|
+
|
|
68
26
|
## Development
|
|
69
27
|
|
|
70
28
|
```bash
|
|
@@ -8,12 +8,20 @@ import { ReactElement } from 'react';
|
|
|
8
8
|
import { ReactNode } from 'react';
|
|
9
9
|
import { ReactPortal } from 'react';
|
|
10
10
|
import { SelectHTMLAttributes } from 'react';
|
|
11
|
+
import { StoreApi } from 'zustand';
|
|
11
12
|
import { TextareaHTMLAttributes } from 'react';
|
|
13
|
+
import { UseBoundStore } from 'zustand';
|
|
12
14
|
|
|
13
15
|
export declare function applyTheme(newTheme: Theme_2): void;
|
|
14
16
|
|
|
15
17
|
export declare const BASE_INPUT_STYLES = "w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed";
|
|
16
18
|
|
|
19
|
+
export declare interface BaseModalConfig {
|
|
20
|
+
id: string;
|
|
21
|
+
title?: ReactNode;
|
|
22
|
+
size?: ModalSize;
|
|
23
|
+
}
|
|
24
|
+
|
|
17
25
|
export declare const Button: ({ variant, size, children, className, fullWidth, loading, disabled, ...props }: ButtonProps) => JSX.Element;
|
|
18
26
|
|
|
19
27
|
declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
@@ -54,6 +62,36 @@ declare interface ClientOnlyProps extends React.PropsWithChildren {
|
|
|
54
62
|
fallback?: React.ReactNode;
|
|
55
63
|
}
|
|
56
64
|
|
|
65
|
+
export declare function ConfirmModal({ isOpen, onClose, onConfirm, title, children, confirmLabel: propConfirmLabel, cancelLabel: propCancelLabel, confirmColor: propConfirmColor, loading, }: ConfirmModalProps): JSX.Element;
|
|
66
|
+
|
|
67
|
+
export declare type ConfirmModalColor = 'red' | 'blue' | 'green';
|
|
68
|
+
|
|
69
|
+
export declare interface ConfirmModalConfig extends BaseModalConfig {
|
|
70
|
+
type: 'confirm';
|
|
71
|
+
children?: ReactNode;
|
|
72
|
+
onConfirm: () => void | Promise<void>;
|
|
73
|
+
confirmLabel?: ReactNode;
|
|
74
|
+
cancelLabel?: ReactNode;
|
|
75
|
+
confirmColor?: ConfirmModalColor;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
declare interface ConfirmModalProps {
|
|
79
|
+
isOpen: boolean;
|
|
80
|
+
onClose: () => void;
|
|
81
|
+
onConfirm: () => void | Promise<void>;
|
|
82
|
+
title: ReactNode;
|
|
83
|
+
children?: ReactNode;
|
|
84
|
+
confirmLabel?: ReactNode;
|
|
85
|
+
cancelLabel?: ReactNode;
|
|
86
|
+
confirmColor?: 'red' | 'blue' | 'green';
|
|
87
|
+
loading?: boolean;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
declare interface GlobalHotkeysStore {
|
|
91
|
+
globalHotkeysEnabled: boolean;
|
|
92
|
+
setGlobalHotkeysEnabled: (value: boolean) => void;
|
|
93
|
+
}
|
|
94
|
+
|
|
57
95
|
export declare const IconButton: ({ icon, "aria-label": ariaLabel, variant, size, className, children, ref, ...props }: IconButtonProps) => JSX.Element;
|
|
58
96
|
|
|
59
97
|
declare interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
@@ -79,6 +117,8 @@ declare interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
|
79
117
|
|
|
80
118
|
export declare function Modal({ isOpen, onClose, title, children, size, className, }: ModalProps): ReactPortal | null;
|
|
81
119
|
|
|
120
|
+
export declare type ModalConfig = StandardModalConfig | ConfirmModalConfig;
|
|
121
|
+
|
|
82
122
|
declare interface ModalProps {
|
|
83
123
|
isOpen?: boolean;
|
|
84
124
|
onClose?: () => void;
|
|
@@ -88,6 +128,20 @@ declare interface ModalProps {
|
|
|
88
128
|
className?: string;
|
|
89
129
|
}
|
|
90
130
|
|
|
131
|
+
export declare function ModalProvider(): JSX.Element;
|
|
132
|
+
|
|
133
|
+
export declare type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
134
|
+
|
|
135
|
+
declare interface ModalStore {
|
|
136
|
+
modals: ModalConfig[];
|
|
137
|
+
closingIds: Set<string>;
|
|
138
|
+
open: (config: Omit<StandardModalConfig, 'id' | 'type'>) => string;
|
|
139
|
+
openConfirm: (config: Omit<ConfirmModalConfig, 'id' | 'type'>) => string;
|
|
140
|
+
close: (id: string) => void;
|
|
141
|
+
closeAll: () => void;
|
|
142
|
+
isOpen: (id: string) => boolean;
|
|
143
|
+
}
|
|
144
|
+
|
|
91
145
|
export declare function Select({ options, label, error, placeholder, className, wrapperClassName, value, defaultValue, onChange, id, ...props }: SelectProps): JSX.Element;
|
|
92
146
|
|
|
93
147
|
export declare interface SelectOption {
|
|
@@ -104,6 +158,11 @@ declare interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElemen
|
|
|
104
158
|
wrapperClassName?: string;
|
|
105
159
|
}
|
|
106
160
|
|
|
161
|
+
export declare interface StandardModalConfig extends BaseModalConfig {
|
|
162
|
+
type: 'standard';
|
|
163
|
+
children: ReactNode;
|
|
164
|
+
}
|
|
165
|
+
|
|
107
166
|
export declare function Switch({ label, error, className, wrapperClassName, checked, defaultChecked, onChange, id, ...props }: SwitchProps): JSX.Element;
|
|
108
167
|
|
|
109
168
|
declare interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className'> {
|
|
@@ -152,8 +211,12 @@ export declare function ThemeToggle(): JSX.Element;
|
|
|
152
211
|
/** React hook that returns true if the component has mounted client-side */
|
|
153
212
|
export declare const useClientOnly: () => boolean;
|
|
154
213
|
|
|
214
|
+
export declare const useGlobalHotkeysStore: UseBoundStore<StoreApi<GlobalHotkeysStore>>;
|
|
215
|
+
|
|
155
216
|
export declare const useIsClient: () => boolean;
|
|
156
217
|
|
|
218
|
+
export declare const useModalStore: UseBoundStore<StoreApi<ModalStore>>;
|
|
219
|
+
|
|
157
220
|
export declare function useRunAfterAnimation(durationMs: number): (callback: () => void) => () => void;
|
|
158
221
|
|
|
159
222
|
export declare const withClientOnly: <T extends object>(Component: React.ComponentType<T>) => React.ComponentType<T>;
|
package/dist/minimalstuff-ui.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@keyframes tabs-panel-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.tabs-panel-inner{animation:.25s ease-out tabs-panel-in}
|
|
1
|
+
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--un-bg-opacity:100%;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-translate-x:initial;--un-translate-y:initial;--un-translate-z:initial;--un-ease:initial;--un-ring-opacity:100%;--un-text-opacity:100%;--un-border-opacity:100%;--un-space-y-reverse:initial;--un-ring-offset-opacity:100%;--un-placeholder-opacity:100%}}@property --un-text-opacity{syntax:"<percentage>";inherits:false;initial-value:100%}@property --un-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --un-border-opacity{syntax:"<percentage>";inherits:false;initial-value:100%}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%}@property --un-ring-opacity{syntax:"<percentage>";inherits:false;initial-value:100%}@property --un-ring-offset-opacity{syntax:"<percentage>";inherits:false;initial-value:100%}@property --un-inset-ring-color{syntax:"*";inherits:false}@property --un-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --un-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --un-inset-shadow-color{syntax:"*";inherits:false}@property --un-ring-color{syntax:"*";inherits:false}@property --un-ring-inset{syntax:"*";inherits:false}@property --un-ring-offset-color{syntax:"*";inherits:false}@property --un-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --un-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --un-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --un-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --un-shadow-color{syntax:"*";inherits:false}@property --un-translate-x{syntax:"*";inherits:false;initial-value:0}@property --un-translate-y{syntax:"*";inherits:false;initial-value:0}@property --un-translate-z{syntax:"*";inherits:false;initial-value:0}@property --un-scale-x{syntax:"*";inherits:false;initial-value:1}@property --un-scale-y{syntax:"*";inherits:false;initial-value:1}@property --un-scale-z{syntax:"*";inherits:false;initial-value:1}@property --un-ease{syntax:"*";inherits:false}@property --un-backdrop-blur{syntax:"*";inherits:false}@property --un-backdrop-brightness{syntax:"*";inherits:false}@property --un-backdrop-contrast{syntax:"*";inherits:false}@property --un-backdrop-grayscale{syntax:"*";inherits:false}@property --un-backdrop-hue-rotate{syntax:"*";inherits:false}@property --un-backdrop-invert{syntax:"*";inherits:false}@property --un-backdrop-opacity{syntax:"*";inherits:false}@property --un-backdrop-saturate{syntax:"*";inherits:false}@property --un-backdrop-sepia{syntax:"*";inherits:false}@property --un-placeholder-opacity{syntax:"<percentage>";inherits:false;initial-value:100%}@property --un-space-y-reverse{syntax:"*";inherits:false;initial-value:0}:root,:host{--spacing:.25rem;--radius-lg:.5rem;--default-transition-timingFunction:cubic-bezier(.4, 0, .2, 1);--default-transition-duration:.15s;--radius-DEFAULT:.25rem;--fontWeight-medium:500;--radius-md:.375rem;--container-md:28rem;--container-lg:32rem;--container-2xl:42rem;--container-4xl:56rem;--colors-black:#000;--fontWeight-semibold:600;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--colors-red-500:#fb2c36;--colors-yellow-500:#edb200;--colors-gray-700:#364153;--colors-blue-500:#3080ff;--colors-gray-100:#f3f4f6;--colors-gray-200:#e5e7eb;--colors-gray-400:#99a1af;--colors-gray-500:#6a7282;--colors-amber-600:#dd7400;--colors-red-600:#e40014;--colors-blue-600:#155dfc;--colors-gray-300:#d1d5dc;--colors-white:#fff;--colors-gray-900:#101828;--colors-gray-600:#4a5565;--text-xs-fontSize:.75rem;--text-xs-lineHeight:1rem;--text-sm-fontSize:.875rem;--text-sm-lineHeight:1.25rem;--text-base-fontSize:1rem;--text-base-lineHeight:1.5rem;--text-lg-fontSize:1.125rem;--text-lg-lineHeight:1.75rem;--colors-gray-50:#f9fafb;--colors-blue-700:#1447e6;--colors-red-700:#bf000f;--colors-red-50:#fef2f2;--colors-red-400:#ff6568;--colors-gray-800:#1e2939;--colors-amber-400:#fcbb00;--colors-blue-400:#54a2ff;--colors-red-900:#82181a;--font-sans:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--default-font-family:var(--font-sans);--default-monoFont-family:var(--font-mono)}@supports (color:lab(0% 0 0)){:root,:host{--colors-red-500:lab(55.4814% 75.0732 48.8528);--colors-yellow-500:lab(76.3898% 14.5258 98.4589);--colors-gray-700:lab(27.1134% -.956401 -12.3224);--colors-blue-500:lab(54.1736% 13.3369 -74.6839);--colors-gray-100:lab(96.1596% -.0823438 -1.13575);--colors-gray-200:lab(91.6229% -.159115 -2.26791);--colors-gray-400:lab(65.9269% -.832707 -8.17473);--colors-gray-500:lab(47.7841% -.393182 -10.0268);--colors-amber-600:lab(60.3514% 40.5624 87.1228);--colors-red-600:lab(48.4493% 77.4328 61.5452);--colors-blue-600:lab(44.0605% 29.0279 -86.0352);--colors-gray-300:lab(85.1236% -.612259 -3.7138);--colors-gray-900:lab(8.11897% .811279 -12.254);--colors-gray-600:lab(35.6337% -1.58697 -10.8425);--colors-gray-50:lab(98.2596% -.247031 -.706708);--colors-blue-700:lab(36.9089% 35.0961 -85.6872);--colors-red-700:lab(40.4273% 67.2623 53.7441);--colors-red-50:lab(96.5005% 4.18508 1.52328);--colors-red-400:lab(63.7053% 60.745 31.3109);--colors-gray-800:lab(16.1051% -1.18239 -11.7533);--colors-amber-400:lab(80.1641% 16.6016 99.2089);--colors-blue-400:lab(65.0361% -1.42065 -56.9802);--colors-red-900:lab(28.5139% 44.5539 29.0463)}}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-featureSettings,normal);font-variation-settings:var(--default-font-variationSettings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-monoFont-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-monoFont-featureSettings,normal);font-variation-settings:var(--default-monoFont-variationSettings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden~=until-found])){display:none!important}.i-mdi-close{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;-webkit-mask-size:100% 100%;mask-size:100% 100%}.i-svg-spinners-3-dots-fade{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Ccircle cx='4' cy='12' r='3' fill='currentColor'%3E%3Canimate id='SVG7x14Dcom' fill='freeze' attributeName='opacity' begin='0;SVGqSjG0dUp.end-0.25s' dur='0.75s' values='1;.2'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3' fill='currentColor' opacity='.4'%3E%3Canimate fill='freeze' attributeName='opacity' begin='SVG7x14Dcom.begin+0.15s' dur='0.75s' values='1;.2'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3' fill='currentColor' opacity='.3'%3E%3Canimate id='SVGqSjG0dUp' fill='freeze' attributeName='opacity' begin='SVG7x14Dcom.begin+0.3s' dur='0.75s' values='1;.2'/%3E%3C/circle%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;-webkit-mask-size:100% 100%;mask-size:100% 100%}.i-tabler-device-desktop{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm4 15h10m-8-4v4m6-4v4'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;-webkit-mask-size:100% 100%;mask-size:100% 100%}.i-tabler-moon-stars{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992zm5 1a2 2 0 0 0 2 2a2 2 0 0 0-2 2a2 2 0 0 0-2-2a2 2 0 0 0 2-2m2 7h2m-1-1v2'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;-webkit-mask-size:100% 100%;mask-size:100% 100%}.i-tabler-sun{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0m-5 0h1m8-9v1m8 8h1m-9 8v1M5.6 5.6l.7.7m12.1-.7l-.7.7m0 11.4l.7.7m-12.1-.7l-.7.7'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;color:inherit;background-color:currentColor;width:1em;height:1em;-webkit-mask-size:100% 100%;mask-size:100% 100%}.text-base{font-size:var(--text-base-fontSize);line-height:var(--un-leading,var(--text-base-lineHeight))}.text-lg{font-size:var(--text-lg-fontSize);line-height:var(--un-leading,var(--text-lg-lineHeight))}.text-sm{font-size:var(--text-sm-fontSize);line-height:var(--un-leading,var(--text-sm-lineHeight))}.text-xs{font-size:var(--text-xs-fontSize);line-height:var(--un-leading,var(--text-xs-lineHeight))}.dark .dark\:text-amber-400{color:color-mix(in srgb, var(--colors-amber-400) var(--un-text-opacity), transparent) }.dark .dark\:text-blue-400{color:color-mix(in srgb, var(--colors-blue-400) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-100{color:color-mix(in srgb, var(--colors-gray-100) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-300{color:color-mix(in srgb, var(--colors-gray-300) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-400,.text-gray-400{color:color-mix(in srgb, var(--colors-gray-400) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-500,.text-gray-500{color:color-mix(in srgb, var(--colors-gray-500) var(--un-text-opacity), transparent) }.dark .dark\:text-red-400{color:color-mix(in srgb, var(--colors-red-400) var(--un-text-opacity), transparent) }.dark .dark\:text-yellow-500,.text-yellow-500{color:color-mix(in srgb, var(--colors-yellow-500) var(--un-text-opacity), transparent) }.text-amber-600{color:color-mix(in srgb, var(--colors-amber-600) var(--un-text-opacity), transparent) }.text-blue-500{color:color-mix(in srgb, var(--colors-blue-500) var(--un-text-opacity), transparent) }.text-blue-600{color:color-mix(in srgb, var(--colors-blue-600) var(--un-text-opacity), transparent) }.text-gray-600{color:color-mix(in srgb, var(--colors-gray-600) var(--un-text-opacity), transparent) }.text-gray-700{color:color-mix(in srgb, var(--colors-gray-700) var(--un-text-opacity), transparent) }.text-gray-900{color:color-mix(in srgb, var(--colors-gray-900) var(--un-text-opacity), transparent) }.text-red-500{color:color-mix(in srgb, var(--colors-red-500) var(--un-text-opacity), transparent) }.text-red-600{color:color-mix(in srgb, var(--colors-red-600) var(--un-text-opacity), transparent) }.text-white{color:color-mix(in srgb, var(--colors-white) var(--un-text-opacity), transparent) }.dark .dark\:hover\:text-gray-200:hover{color:color-mix(in srgb, var(--colors-gray-200) var(--un-text-opacity), transparent) }.dark .dark\:hover\:text-gray-300:hover{color:color-mix(in srgb, var(--colors-gray-300) var(--un-text-opacity), transparent) }.hover\:text-gray-600:hover{color:color-mix(in srgb, var(--colors-gray-600) var(--un-text-opacity), transparent) }.hover\:text-gray-700:hover{color:color-mix(in srgb, var(--colors-gray-700) var(--un-text-opacity), transparent) }.hover\:text-gray-900:hover{color:color-mix(in srgb, var(--colors-gray-900) var(--un-text-opacity), transparent) }.font-medium{--un-font-weight:var(--fontWeight-medium);font-weight:var(--fontWeight-medium)}.font-semibold{--un-font-weight:var(--fontWeight-semibold);font-weight:var(--fontWeight-semibold)}.tab{tab-size:4}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-14{margin-left:calc(var(--spacing) * 14)}.ml-8{margin-left:calc(var(--spacing) * 8)}.mr-1{margin-right:calc(var(--spacing) * 1)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-32{margin-top:calc(var(--spacing) * 32)}.p-1{padding:calc(var(--spacing) * 1)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pr-8{padding-right:calc(var(--spacing) * 8)}.text-right{text-align:right}.appearance-none{appearance:none}.outline{outline-style:var(--un-outline-style);outline-width:1px}.focus-within\:outline-none:focus-within,.focus\:outline-none:focus{--un-outline-style:none;outline-style:none}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-blue-600{border-color:color-mix(in srgb, var(--colors-blue-600) var(--un-border-opacity), transparent) }.border-gray-200{border-color:color-mix(in srgb, var(--colors-gray-200) var(--un-border-opacity), transparent) }.border-gray-300{border-color:color-mix(in srgb, var(--colors-gray-300) var(--un-border-opacity), transparent) }.border-red-500{border-color:color-mix(in srgb, var(--colors-red-500) var(--un-border-opacity), transparent) }.border-transparent{border-color:#0000}.dark .dark\:border-blue-500{border-color:color-mix(in srgb, var(--colors-blue-500) var(--un-border-opacity), transparent) }.dark .dark\:border-gray-600{border-color:color-mix(in srgb, var(--colors-gray-600) var(--un-border-opacity), transparent) }.dark .dark\:border-gray-700{border-color:color-mix(in srgb, var(--colors-gray-700) var(--un-border-opacity), transparent) }.dark .dark\:border-red-400{border-color:color-mix(in srgb, var(--colors-red-400) var(--un-border-opacity), transparent) }.focus\:border-transparent:focus{border-color:#0000}.rounded{border-radius:var(--radius-DEFAULT)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.bg-\[length\:1rem_1rem\]{background-size:1rem 1rem}.bg-\[position\:right_0\.5rem_center\]{background-position:right .5rem center}.bg-\[url\(\"data\:image\/svg\+xml\,\%3csvg\ xmlns\=\%27http\:\/\/www\.w3\.org\/2000\/svg\%27\ fill\=\%27none\%27\ viewBox\=\%270\ 0\ 20\ 20\%27\%3e\%3cpath\ stroke\=\%27\%236b7280\%27\ stroke-linecap\=\%27round\%27\ stroke-linejoin\=\%27round\%27\ stroke-width\=\%271\.5\%27\ d\=\%27M6\ 8l4\ 4\ 4-4\%27\/\%3e\%3c\/svg\%3e\"\)\]{--un-url:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%236b7280%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3e%3c/svg%3e");background-image:var(--un-url)}.bg-black\/50{background-color:color-mix(in srgb, var(--colors-black) 50%, transparent) }.bg-blue-600{background-color:color-mix(in srgb, var(--colors-blue-600) var(--un-bg-opacity), transparent) }.bg-gray-100{background-color:color-mix(in srgb, var(--colors-gray-100) var(--un-bg-opacity), transparent) }.bg-gray-200{background-color:color-mix(in srgb, var(--colors-gray-200) var(--un-bg-opacity), transparent) }.bg-red-600{background-color:color-mix(in srgb, var(--colors-red-600) var(--un-bg-opacity), transparent) }.bg-transparent{background-color:#0000}.bg-white{background-color:color-mix(in srgb, var(--colors-white) var(--un-bg-opacity), transparent) }.dark .dark\:bg-blue-500{background-color:color-mix(in srgb, var(--colors-blue-500) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-600{background-color:color-mix(in srgb, var(--colors-gray-600) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-700{background-color:color-mix(in srgb, var(--colors-gray-700) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-700\/50{background-color:color-mix(in srgb, var(--colors-gray-700) 50%, transparent) }.dark .dark\:bg-gray-800{background-color:color-mix(in srgb, var(--colors-gray-800) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-800\/50{background-color:color-mix(in srgb, var(--colors-gray-800) 50%, transparent) }.dark .dark\:bg-red-500{background-color:color-mix(in srgb, var(--colors-red-500) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-blue-600:hover{background-color:color-mix(in srgb, var(--colors-blue-600) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-500:hover{background-color:color-mix(in srgb, var(--colors-gray-500) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-600:hover{background-color:color-mix(in srgb, var(--colors-gray-600) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-600\/50:hover{background-color:color-mix(in srgb, var(--colors-gray-600) 50%, transparent) }.dark .dark\:hover\:bg-gray-700\/50:hover{background-color:color-mix(in srgb, var(--colors-gray-700) 50%, transparent) }.dark .dark\:hover\:bg-gray-800:hover{background-color:color-mix(in srgb, var(--colors-gray-800) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-800\/30:hover{background-color:color-mix(in srgb, var(--colors-gray-800) 30%, transparent) }.dark .dark\:hover\:bg-gray-800\/50:hover{background-color:color-mix(in srgb, var(--colors-gray-800) 50%, transparent) }.dark .dark\:hover\:bg-red-600:hover{background-color:color-mix(in srgb, var(--colors-red-600) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-red-900\/20:hover{background-color:color-mix(in srgb, var(--colors-red-900) 20%, transparent) }.hover\:bg-blue-700:hover{background-color:color-mix(in srgb, var(--colors-blue-700) var(--un-bg-opacity), transparent) }.hover\:bg-gray-100:hover{background-color:color-mix(in srgb, var(--colors-gray-100) var(--un-bg-opacity), transparent) }.hover\:bg-gray-200:hover{background-color:color-mix(in srgb, var(--colors-gray-200) var(--un-bg-opacity), transparent) }.hover\:bg-gray-200\/50:hover{background-color:color-mix(in srgb, var(--colors-gray-200) 50%, transparent) }.hover\:bg-gray-300:hover{background-color:color-mix(in srgb, var(--colors-gray-300) var(--un-bg-opacity), transparent) }.hover\:bg-gray-50:hover{background-color:color-mix(in srgb, var(--colors-gray-50) var(--un-bg-opacity), transparent) }.hover\:bg-gray-50\/50:hover{background-color:color-mix(in srgb, var(--colors-gray-50) 50%, transparent) }.hover\:bg-red-50:hover{background-color:color-mix(in srgb, var(--colors-red-50) var(--un-bg-opacity), transparent) }.hover\:bg-red-700:hover{background-color:color-mix(in srgb, var(--colors-red-700) var(--un-bg-opacity), transparent) }.hover\:bg-white\/50:hover{background-color:color-mix(in srgb, var(--colors-white) 50%, transparent) }.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-50,.disabled\:opacity-50:disabled{opacity:.5}.flex{display:flex}.inline-flex{display:inline-flex}.flex-1{flex:1}.shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.gap-1{gap:calc(var(--spacing) * 1)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-fit{height:fit-content}.max-h-\[90vh\]{max-height:90vh}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.min-h-\[80px\]{min-height:80px}.w-11{width:calc(var(--spacing) * 11)}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-full{width:100%}.block{display:block}.inline-block{display:inline-block}.hidden{display:none}.cursor-pointer{cursor:pointer}.cursor-not-allowed,.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.pointer-events-none{pointer-events:none}.resize-y{resize:vertical}.select-none{-webkit-user-select:none;user-select:none}.ring-0{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(0px + var(--un-ring-offset-width)) var(--un-ring-color,currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.ring-2,.focus-within\:ring-2:focus-within,.focus\:ring-2:focus{--un-ring-shadow:var(--un-ring-inset,) 0 0 0 calc(2px + var(--un-ring-offset-width)) var(--un-ring-color,currentColor);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.dark .dark\:ring-red-400{--un-ring-color:color-mix(in srgb, var(--colors-red-400) var(--un-ring-opacity), transparent) }.ring-red-500{--un-ring-color:color-mix(in srgb, var(--colors-red-500) var(--un-ring-opacity), transparent) }.focus-within\:ring-blue-500:focus-within{--un-ring-color:color-mix(in srgb, var(--colors-blue-500) var(--un-ring-opacity), transparent) }.focus-within\:ring-red-500:focus-within{--un-ring-color:color-mix(in srgb, var(--colors-red-500) var(--un-ring-opacity), transparent) }.focus\:ring-blue-500:focus{--un-ring-color:color-mix(in srgb, var(--colors-blue-500) var(--un-ring-opacity), transparent) }.focus\:ring-red-500:focus{--un-ring-color:color-mix(in srgb, var(--colors-red-500) var(--un-ring-opacity), transparent) }.focus-within\:ring-offset-2:focus-within,.focus\:ring-offset-2:focus{--un-ring-offset-width:2px;--un-ring-offset-shadow:var(--un-ring-inset,) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color)}.dark .dark\:focus-within\:ring-offset-gray-900:focus-within{--un-ring-offset-color:color-mix(in srgb, var(--colors-gray-900) var(--un-ring-offset-opacity), transparent) }.focus-within\:ring-offset-white:focus-within{--un-ring-offset-color:color-mix(in srgb, var(--colors-white) var(--un-ring-offset-opacity), transparent) }.dark .dark\:focus\:ring-offset-gray-900:focus{--un-ring-offset-color:color-mix(in srgb, var(--colors-gray-900) var(--un-ring-offset-opacity), transparent) }.shadow,.shadow-sm{--un-shadow:0 1px 3px 0 var(--un-shadow-color,#0000001a),0 1px 2px -1px var(--un-shadow-color,#0000001a);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.shadow-xl{--un-shadow:0 20px 25px -5px var(--un-shadow-color,#0000001a),0 8px 10px -6px var(--un-shadow-color,#0000001a);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)}.translate-x-0{--un-translate-x:calc(var(--spacing) * 0);translate:var(--un-translate-x) var(--un-translate-y)}.translate-x-5\.25{--un-translate-x:calc(var(--spacing) * 5.25);translate:var(--un-translate-x) var(--un-translate-y)}.translate-y-0{--un-translate-y:calc(var(--spacing) * 0);translate:var(--un-translate-x) var(--un-translate-y)}.translate-y-2{--un-translate-y:calc(var(--spacing) * 2);translate:var(--un-translate-x) var(--un-translate-y)}.scale-100{--un-scale-x:100%;--un-scale-y:100%;scale:var(--un-scale-x) var(--un-scale-y)}.scale-95{--un-scale-x:95%;--un-scale-y:95%;scale:var(--un-scale-x) var(--un-scale-y)}.transform{transform:var(--un-rotate-x) var(--un-rotate-y) var(--un-rotate-z) var(--un-skew-x) var(--un-skew-y)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--un-gradient-from,--un-gradient-via,--un-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--un-ease,var(--default-transition-timingFunction));transition-duration:var(--un-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--un-ease,var(--default-transition-timingFunction));transition-duration:var(--un-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,--un-gradient-from,--un-gradient-via,--un-gradient-to;transition-timing-function:var(--un-ease,var(--default-transition-timingFunction));transition-duration:var(--un-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--un-ease,var(--default-transition-timingFunction));transition-duration:var(--un-duration,var(--default-transition-duration))}.duration-200{--un-duration:.2s;transition-duration:.2s}.ease-in-out{--un-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.items-start{align-items:flex-start}.items-center{align-items:center}.inset-0{inset:calc(var(--spacing) * 0)}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.fixed{position:fixed}.relative{position:relative}.z-50{z-index:50}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.bg-no-repeat{background-repeat:no-repeat}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.backdrop-blur-sm{--un-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--un-backdrop-blur,) var(--un-backdrop-brightness,) var(--un-backdrop-contrast,) var(--un-backdrop-grayscale,) var(--un-backdrop-hue-rotate,) var(--un-backdrop-invert,) var(--un-backdrop-opacity,) var(--un-backdrop-saturate,) var(--un-backdrop-sepia,);backdrop-filter:var(--un-backdrop-blur,) var(--un-backdrop-brightness,) var(--un-backdrop-contrast,) var(--un-backdrop-grayscale,) var(--un-backdrop-hue-rotate,) var(--un-backdrop-invert,) var(--un-backdrop-opacity,) var(--un-backdrop-saturate,) var(--un-backdrop-sepia,)}.dark .dark\:placeholder-gray-400::placeholder{color:color-mix(in srgb, var(--colors-gray-400) var(--un-placeholder-opacity), transparent) }.placeholder-gray-500::placeholder{color:color-mix(in srgb, var(--colors-gray-500) var(--un-placeholder-opacity), transparent) }:where(.space-y-4>:not(:last-child)){--un-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--un-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--un-space-y-reverse)))}@supports (color:color-mix(in lab, red, red)){.dark .dark\:text-amber-400{color:color-mix(in oklab, var(--colors-amber-400) var(--un-text-opacity), transparent) }.dark .dark\:text-blue-400{color:color-mix(in oklab, var(--colors-blue-400) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-100{color:color-mix(in oklab, var(--colors-gray-100) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-300{color:color-mix(in oklab, var(--colors-gray-300) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-400{color:color-mix(in oklab, var(--colors-gray-400) var(--un-text-opacity), transparent) }.dark .dark\:text-gray-500{color:color-mix(in oklab, var(--colors-gray-500) var(--un-text-opacity), transparent) }.dark .dark\:text-red-400{color:color-mix(in oklab, var(--colors-red-400) var(--un-text-opacity), transparent) }.dark .dark\:text-yellow-500{color:color-mix(in oklab, var(--colors-yellow-500) var(--un-text-opacity), transparent) }.text-amber-600{color:color-mix(in oklab, var(--colors-amber-600) var(--un-text-opacity), transparent) }.text-blue-500{color:color-mix(in oklab, var(--colors-blue-500) var(--un-text-opacity), transparent) }.text-blue-600{color:color-mix(in oklab, var(--colors-blue-600) var(--un-text-opacity), transparent) }.text-gray-400{color:color-mix(in oklab, var(--colors-gray-400) var(--un-text-opacity), transparent) }.text-gray-500{color:color-mix(in oklab, var(--colors-gray-500) var(--un-text-opacity), transparent) }.text-gray-600{color:color-mix(in oklab, var(--colors-gray-600) var(--un-text-opacity), transparent) }.text-gray-700{color:color-mix(in oklab, var(--colors-gray-700) var(--un-text-opacity), transparent) }.text-gray-900{color:color-mix(in oklab, var(--colors-gray-900) var(--un-text-opacity), transparent) }.text-red-500{color:color-mix(in oklab, var(--colors-red-500) var(--un-text-opacity), transparent) }.text-red-600{color:color-mix(in oklab, var(--colors-red-600) var(--un-text-opacity), transparent) }.text-white{color:color-mix(in oklab, var(--colors-white) var(--un-text-opacity), transparent) }.text-yellow-500{color:color-mix(in oklab, var(--colors-yellow-500) var(--un-text-opacity), transparent) }.dark .dark\:hover\:text-gray-200:hover{color:color-mix(in oklab, var(--colors-gray-200) var(--un-text-opacity), transparent) }.dark .dark\:hover\:text-gray-300:hover{color:color-mix(in oklab, var(--colors-gray-300) var(--un-text-opacity), transparent) }.hover\:text-gray-600:hover{color:color-mix(in oklab, var(--colors-gray-600) var(--un-text-opacity), transparent) }.hover\:text-gray-700:hover{color:color-mix(in oklab, var(--colors-gray-700) var(--un-text-opacity), transparent) }.hover\:text-gray-900:hover{color:color-mix(in oklab, var(--colors-gray-900) var(--un-text-opacity), transparent) }.border-blue-600{border-color:color-mix(in oklab, var(--colors-blue-600) var(--un-border-opacity), transparent) }.border-gray-200{border-color:color-mix(in oklab, var(--colors-gray-200) var(--un-border-opacity), transparent) }.border-gray-300{border-color:color-mix(in oklab, var(--colors-gray-300) var(--un-border-opacity), transparent) }.border-red-500{border-color:color-mix(in oklab, var(--colors-red-500) var(--un-border-opacity), transparent) }.dark .dark\:border-blue-500{border-color:color-mix(in oklab, var(--colors-blue-500) var(--un-border-opacity), transparent) }.dark .dark\:border-gray-600{border-color:color-mix(in oklab, var(--colors-gray-600) var(--un-border-opacity), transparent) }.dark .dark\:border-gray-700{border-color:color-mix(in oklab, var(--colors-gray-700) var(--un-border-opacity), transparent) }.dark .dark\:border-red-400{border-color:color-mix(in oklab, var(--colors-red-400) var(--un-border-opacity), transparent) }.bg-black\/50{background-color:color-mix(in oklab, var(--colors-black) 50%, transparent) }.bg-blue-600{background-color:color-mix(in oklab, var(--colors-blue-600) var(--un-bg-opacity), transparent) }.bg-gray-100{background-color:color-mix(in oklab, var(--colors-gray-100) var(--un-bg-opacity), transparent) }.bg-gray-200{background-color:color-mix(in oklab, var(--colors-gray-200) var(--un-bg-opacity), transparent) }.bg-red-600{background-color:color-mix(in oklab, var(--colors-red-600) var(--un-bg-opacity), transparent) }.bg-white{background-color:color-mix(in oklab, var(--colors-white) var(--un-bg-opacity), transparent) }.dark .dark\:bg-blue-500{background-color:color-mix(in oklab, var(--colors-blue-500) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-600{background-color:color-mix(in oklab, var(--colors-gray-600) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-700{background-color:color-mix(in oklab, var(--colors-gray-700) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-700\/50{background-color:color-mix(in oklab, var(--colors-gray-700) 50%, transparent) }.dark .dark\:bg-gray-800{background-color:color-mix(in oklab, var(--colors-gray-800) var(--un-bg-opacity), transparent) }.dark .dark\:bg-gray-800\/50{background-color:color-mix(in oklab, var(--colors-gray-800) 50%, transparent) }.dark .dark\:bg-red-500{background-color:color-mix(in oklab, var(--colors-red-500) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-blue-600:hover{background-color:color-mix(in oklab, var(--colors-blue-600) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-500:hover{background-color:color-mix(in oklab, var(--colors-gray-500) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-600:hover{background-color:color-mix(in oklab, var(--colors-gray-600) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-600\/50:hover{background-color:color-mix(in oklab, var(--colors-gray-600) 50%, transparent) }.dark .dark\:hover\:bg-gray-700\/50:hover{background-color:color-mix(in oklab, var(--colors-gray-700) 50%, transparent) }.dark .dark\:hover\:bg-gray-800:hover{background-color:color-mix(in oklab, var(--colors-gray-800) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-gray-800\/30:hover{background-color:color-mix(in oklab, var(--colors-gray-800) 30%, transparent) }.dark .dark\:hover\:bg-gray-800\/50:hover{background-color:color-mix(in oklab, var(--colors-gray-800) 50%, transparent) }.dark .dark\:hover\:bg-red-600:hover{background-color:color-mix(in oklab, var(--colors-red-600) var(--un-bg-opacity), transparent) }.dark .dark\:hover\:bg-red-900\/20:hover{background-color:color-mix(in oklab, var(--colors-red-900) 20%, transparent) }.hover\:bg-blue-700:hover{background-color:color-mix(in oklab, var(--colors-blue-700) var(--un-bg-opacity), transparent) }.hover\:bg-gray-100:hover{background-color:color-mix(in oklab, var(--colors-gray-100) var(--un-bg-opacity), transparent) }.hover\:bg-gray-200:hover{background-color:color-mix(in oklab, var(--colors-gray-200) var(--un-bg-opacity), transparent) }.hover\:bg-gray-200\/50:hover{background-color:color-mix(in oklab, var(--colors-gray-200) 50%, transparent) }.hover\:bg-gray-300:hover{background-color:color-mix(in oklab, var(--colors-gray-300) var(--un-bg-opacity), transparent) }.hover\:bg-gray-50:hover{background-color:color-mix(in oklab, var(--colors-gray-50) var(--un-bg-opacity), transparent) }.hover\:bg-gray-50\/50:hover{background-color:color-mix(in oklab, var(--colors-gray-50) 50%, transparent) }.hover\:bg-red-50:hover{background-color:color-mix(in oklab, var(--colors-red-50) var(--un-bg-opacity), transparent) }.hover\:bg-red-700:hover{background-color:color-mix(in oklab, var(--colors-red-700) var(--un-bg-opacity), transparent) }.hover\:bg-white\/50:hover{background-color:color-mix(in oklab, var(--colors-white) 50%, transparent) }.dark .dark\:ring-red-400{--un-ring-color:color-mix(in oklab, var(--colors-red-400) var(--un-ring-opacity), transparent) }.ring-red-500{--un-ring-color:color-mix(in oklab, var(--colors-red-500) var(--un-ring-opacity), transparent) }.focus-within\:ring-blue-500:focus-within{--un-ring-color:color-mix(in oklab, var(--colors-blue-500) var(--un-ring-opacity), transparent) }.focus-within\:ring-red-500:focus-within{--un-ring-color:color-mix(in oklab, var(--colors-red-500) var(--un-ring-opacity), transparent) }.focus\:ring-blue-500:focus{--un-ring-color:color-mix(in oklab, var(--colors-blue-500) var(--un-ring-opacity), transparent) }.focus\:ring-red-500:focus{--un-ring-color:color-mix(in oklab, var(--colors-red-500) var(--un-ring-opacity), transparent) }.dark .dark\:focus-within\:ring-offset-gray-900:focus-within{--un-ring-offset-color:color-mix(in oklab, var(--colors-gray-900) var(--un-ring-offset-opacity), transparent) }.focus-within\:ring-offset-white:focus-within{--un-ring-offset-color:color-mix(in oklab, var(--colors-white) var(--un-ring-offset-opacity), transparent) }.dark .dark\:focus\:ring-offset-gray-900:focus{--un-ring-offset-color:color-mix(in oklab, var(--colors-gray-900) var(--un-ring-offset-opacity), transparent) }.dark .dark\:placeholder-gray-400::placeholder{color:color-mix(in oklab, var(--colors-gray-400) var(--un-placeholder-opacity), transparent) }.placeholder-gray-500::placeholder{color:color-mix(in oklab, var(--colors-gray-500) var(--un-placeholder-opacity), transparent) }}@keyframes tabs-panel-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.tabs-panel-inner{animation:.25s ease-out tabs-panel-in}
|
|
2
2
|
/*$vite$:1*/
|
package/dist/minimalstuff-ui.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Fragment, createElement, useCallback, useEffect, useId, useState } from "react";
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import React, { Fragment as Fragment$1, createElement, useCallback, useEffect, useId, useState } from "react";
|
|
3
3
|
import { createPortal } from "react-dom";
|
|
4
|
-
function r(
|
|
5
|
-
var
|
|
6
|
-
if (typeof
|
|
7
|
-
else if (typeof
|
|
8
|
-
var
|
|
9
|
-
for (
|
|
10
|
-
} else for (
|
|
11
|
-
return
|
|
4
|
+
function r(i) {
|
|
5
|
+
var M, N, P = "";
|
|
6
|
+
if (typeof i == "string" || typeof i == "number") P += i;
|
|
7
|
+
else if (typeof i == "object") if (Array.isArray(i)) {
|
|
8
|
+
var F = i.length;
|
|
9
|
+
for (M = 0; M < F; M++) i[M] && (N = r(i[M])) && (P && (P += " "), P += N);
|
|
10
|
+
} else for (N in i) i[N] && (P && (P += " "), P += N);
|
|
11
|
+
return P;
|
|
12
12
|
}
|
|
13
13
|
function clsx() {
|
|
14
|
-
for (var
|
|
15
|
-
return
|
|
14
|
+
for (var i, M, N = 0, P = "", F = arguments.length; N < F; N++) (i = arguments[N]) && (M = r(i)) && (P && (P += " "), P += M);
|
|
15
|
+
return P;
|
|
16
16
|
}
|
|
17
17
|
var clsx_default = clsx, VARIANT_CLASSES$1 = {
|
|
18
18
|
primary: "bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 border-transparent",
|
|
@@ -27,86 +27,86 @@ var clsx_default = clsx, VARIANT_CLASSES$1 = {
|
|
|
27
27
|
md: "px-4 py-2 text-sm",
|
|
28
28
|
lg: "px-4 py-3 text-base"
|
|
29
29
|
};
|
|
30
|
-
const Button = ({ variant:
|
|
30
|
+
const Button = ({ variant: i = "primary", size: P = "md", children: F, className: I, fullWidth: L = !1, loading: R = !1, disabled: z, ...B }) => /* @__PURE__ */ jsxs("button", {
|
|
31
31
|
type: "button",
|
|
32
|
-
className: clsx_default("cursor-pointer inline-flex items-center justify-center gap-2 rounded-md font-medium transition-all duration-200 border focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed", VARIANT_CLASSES$1[
|
|
33
|
-
disabled:
|
|
34
|
-
...
|
|
35
|
-
children: [
|
|
32
|
+
className: clsx_default("cursor-pointer inline-flex items-center justify-center gap-2 rounded-md font-medium transition-all duration-200 border focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed", VARIANT_CLASSES$1[i], SIZE_CLASSES$2[P], L && "w-full", I),
|
|
33
|
+
disabled: z ?? R,
|
|
34
|
+
...B,
|
|
35
|
+
children: [R && /* @__PURE__ */ jsx("span", {
|
|
36
36
|
className: "i-svg-spinners-3-dots-fade w-4 h-4",
|
|
37
37
|
"aria-hidden": "true"
|
|
38
|
-
}),
|
|
38
|
+
}), F]
|
|
39
39
|
});
|
|
40
40
|
var CHARACTER_COUNT_STYLES = "text-xs text-gray-500 dark:text-gray-400 mt-1 text-right";
|
|
41
|
-
function CharacterCount({ current:
|
|
42
|
-
let
|
|
41
|
+
function CharacterCount({ current: i, min: M, max: P, showMin: F, showMax: I }) {
|
|
42
|
+
let L = M !== void 0 && i <= M, R = P !== void 0 && i >= P, z = P !== void 0 && i > P;
|
|
43
43
|
return /* @__PURE__ */ jsxs("div", {
|
|
44
44
|
className: CHARACTER_COUNT_STYLES,
|
|
45
45
|
children: [
|
|
46
|
-
|
|
47
|
-
className:
|
|
46
|
+
F && M !== void 0 && /* @__PURE__ */ jsxs("span", {
|
|
47
|
+
className: L ? "text-amber-600 dark:text-amber-400" : "",
|
|
48
48
|
children: [
|
|
49
|
-
|
|
49
|
+
i,
|
|
50
50
|
"/",
|
|
51
|
-
|
|
51
|
+
M,
|
|
52
52
|
" min"
|
|
53
53
|
]
|
|
54
54
|
}),
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
className:
|
|
55
|
+
F && I && " · ",
|
|
56
|
+
I && P !== void 0 && /* @__PURE__ */ jsxs("span", {
|
|
57
|
+
className: z ? "text-red-600 dark:text-red-400" : R ? "text-amber-600 dark:text-amber-400" : "",
|
|
58
58
|
children: [
|
|
59
|
-
|
|
59
|
+
i,
|
|
60
60
|
"/",
|
|
61
|
-
|
|
61
|
+
P,
|
|
62
62
|
" max"
|
|
63
63
|
]
|
|
64
64
|
}),
|
|
65
|
-
!
|
|
66
|
-
className:
|
|
65
|
+
!F && !I && P !== void 0 && /* @__PURE__ */ jsxs("span", {
|
|
66
|
+
className: z ? "text-red-600 dark:text-red-400" : R ? "text-amber-600 dark:text-amber-400" : "",
|
|
67
67
|
children: [
|
|
68
|
-
|
|
68
|
+
i,
|
|
69
69
|
"/",
|
|
70
|
-
|
|
70
|
+
P
|
|
71
71
|
]
|
|
72
72
|
}),
|
|
73
|
-
!
|
|
74
|
-
className:
|
|
73
|
+
!F && !I && M !== void 0 && P === void 0 && /* @__PURE__ */ jsxs("span", {
|
|
74
|
+
className: L ? "text-amber-600 dark:text-amber-400" : "",
|
|
75
75
|
children: [
|
|
76
|
-
|
|
76
|
+
i,
|
|
77
77
|
" (min ",
|
|
78
|
-
|
|
78
|
+
M,
|
|
79
79
|
")"
|
|
80
80
|
]
|
|
81
81
|
})
|
|
82
82
|
]
|
|
83
83
|
});
|
|
84
84
|
}
|
|
85
|
-
function Checkbox({ label:
|
|
86
|
-
let
|
|
85
|
+
function Checkbox({ label: i, error: P, className: F, wrapperClassName: I, checked: L, defaultChecked: R = !1, onChange: V, id: H = "checkbox", ...U }) {
|
|
86
|
+
let G = `${H}-${useId()}`, [K, q] = useState(R), J = L !== void 0, Y = J ? L : K;
|
|
87
87
|
return /* @__PURE__ */ jsxs("div", {
|
|
88
|
-
className: clsx_default("w-full",
|
|
88
|
+
className: clsx_default("w-full", I),
|
|
89
89
|
children: [/* @__PURE__ */ jsxs("label", {
|
|
90
|
-
htmlFor:
|
|
91
|
-
className: clsx_default("flex items-start gap-3 cursor-pointer",
|
|
90
|
+
htmlFor: G,
|
|
91
|
+
className: clsx_default("flex items-start gap-3 cursor-pointer", U.disabled && "cursor-not-allowed opacity-50"),
|
|
92
92
|
children: [/* @__PURE__ */ jsxs("span", {
|
|
93
|
-
className: clsx_default("relative mt-0.5 shrink-0 rounded", "focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-white dark:focus-within:ring-offset-gray-900",
|
|
93
|
+
className: clsx_default("relative mt-0.5 shrink-0 rounded", "focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-white dark:focus-within:ring-offset-gray-900", P ? "focus-within:ring-red-500" : "focus-within:ring-blue-500"),
|
|
94
94
|
children: [/* @__PURE__ */ jsx("input", {
|
|
95
95
|
type: "checkbox",
|
|
96
|
-
id:
|
|
96
|
+
id: G,
|
|
97
97
|
className: "sr-only",
|
|
98
|
-
checked:
|
|
99
|
-
defaultChecked:
|
|
100
|
-
onChange: (
|
|
101
|
-
|
|
98
|
+
checked: L,
|
|
99
|
+
defaultChecked: R,
|
|
100
|
+
onChange: (i) => {
|
|
101
|
+
J || q(i.target.checked), V?.(i);
|
|
102
102
|
},
|
|
103
|
-
"aria-invalid": !!
|
|
104
|
-
"aria-describedby":
|
|
105
|
-
...
|
|
103
|
+
"aria-invalid": !!P,
|
|
104
|
+
"aria-describedby": P ? `${G}-error` : void 0,
|
|
105
|
+
...U
|
|
106
106
|
}), /* @__PURE__ */ jsx("span", {
|
|
107
|
-
className: clsx_default("flex h-5 w-5 items-center justify-center rounded border-2 transition-all duration-200",
|
|
107
|
+
className: clsx_default("flex h-5 w-5 items-center justify-center rounded border-2 transition-all duration-200", Y ? "border-blue-600 bg-blue-600 dark:border-blue-500 dark:bg-blue-500" : "border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800", P && "border-red-500 dark:border-red-400", F),
|
|
108
108
|
"aria-hidden": !0,
|
|
109
|
-
children:
|
|
109
|
+
children: Y && /* @__PURE__ */ jsx("svg", {
|
|
110
110
|
className: "h-3 w-3 text-white",
|
|
111
111
|
viewBox: "0 0 12 12",
|
|
112
112
|
fill: "none",
|
|
@@ -117,31 +117,31 @@ function Checkbox({ label: b, error: x, className: S, wrapperClassName: C, check
|
|
|
117
117
|
children: /* @__PURE__ */ jsx("polyline", { points: "2 6 5 9 10 3" })
|
|
118
118
|
})
|
|
119
119
|
})]
|
|
120
|
-
}),
|
|
120
|
+
}), i && /* @__PURE__ */ jsxs("span", {
|
|
121
121
|
className: "text-sm font-medium text-gray-700 dark:text-gray-300 select-none",
|
|
122
|
-
children: [
|
|
122
|
+
children: [i, U.required && /* @__PURE__ */ jsx("span", {
|
|
123
123
|
className: "text-red-500 dark:text-red-400 ml-1",
|
|
124
124
|
children: "*"
|
|
125
125
|
})]
|
|
126
126
|
})]
|
|
127
|
-
}),
|
|
128
|
-
id: `${
|
|
127
|
+
}), P && /* @__PURE__ */ jsx("p", {
|
|
128
|
+
id: `${G}-error`,
|
|
129
129
|
className: "text-xs text-red-600 dark:text-red-400 mt-1 ml-8",
|
|
130
130
|
role: "alert",
|
|
131
|
-
children:
|
|
131
|
+
children: P
|
|
132
132
|
})]
|
|
133
133
|
});
|
|
134
134
|
}
|
|
135
135
|
const useClientOnly = () => {
|
|
136
|
-
let [
|
|
136
|
+
let [i, M] = useState(!1);
|
|
137
137
|
return useEffect(() => {
|
|
138
138
|
requestAnimationFrame(() => {
|
|
139
|
-
|
|
139
|
+
M(!0);
|
|
140
140
|
});
|
|
141
|
-
}, []),
|
|
142
|
-
}, withClientOnly = (
|
|
143
|
-
function ClientOnly({ children:
|
|
144
|
-
return useClientOnly() ? createElement(Fragment, { children:
|
|
141
|
+
}, []), i;
|
|
142
|
+
}, withClientOnly = (i) => (N) => useClientOnly() ? /* @__PURE__ */ jsx(i, { ...N }) : null;
|
|
143
|
+
function ClientOnly({ children: i, fallback: M }) {
|
|
144
|
+
return useClientOnly() ? createElement(Fragment$1, { children: i }) : M ?? null;
|
|
145
145
|
}
|
|
146
146
|
var VARIANT_CLASSES = {
|
|
147
147
|
default: "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800",
|
|
@@ -158,302 +158,438 @@ var VARIANT_CLASSES = {
|
|
|
158
158
|
md: "w-5 h-5",
|
|
159
159
|
lg: "w-6 h-6"
|
|
160
160
|
};
|
|
161
|
-
const IconButton = ({ icon:
|
|
162
|
-
ref:
|
|
161
|
+
const IconButton = ({ icon: i, "aria-label": P, variant: F = "default", size: I = "md", className: L, children: R, ref: z, ...B }) => /* @__PURE__ */ jsxs("button", {
|
|
162
|
+
ref: z,
|
|
163
163
|
type: "button",
|
|
164
|
-
"aria-label":
|
|
165
|
-
className: clsx_default("cursor-pointer inline-flex items-center justify-center rounded transition-colors", "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", VARIANT_CLASSES[
|
|
166
|
-
...
|
|
167
|
-
children: [/* @__PURE__ */ jsx("div", { className: clsx_default(
|
|
164
|
+
"aria-label": P,
|
|
165
|
+
className: clsx_default("cursor-pointer inline-flex items-center justify-center rounded transition-colors", "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", VARIANT_CLASSES[F], SIZE_CLASSES$1[I], L),
|
|
166
|
+
...B,
|
|
167
|
+
children: [/* @__PURE__ */ jsx("div", { className: clsx_default(i, ICON_SIZE_CLASSES[I], R && "mr-1") }), R]
|
|
168
168
|
}), BASE_INPUT_STYLES = "w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed";
|
|
169
|
-
function Input({ label:
|
|
170
|
-
let
|
|
169
|
+
function Input({ label: i, error: P, showCharCount: F = !1, minLength: I, maxLength: L, className: R, wrapperClassName: V, value: H, defaultValue: U, onChange: G, id: K = "input", ...q }) {
|
|
170
|
+
let J = `${K}-${useId()}`, [X, Z] = useState(typeof U == "string" ? U.length : 0), Q = typeof H == "string" ? H.length : H === void 0 ? X : 0, $ = F && (I !== void 0 || L !== void 0);
|
|
171
171
|
return /* @__PURE__ */ jsxs("div", {
|
|
172
|
-
className: clsx_default("w-full",
|
|
172
|
+
className: clsx_default("w-full", V),
|
|
173
173
|
children: [
|
|
174
|
-
|
|
174
|
+
i && /* @__PURE__ */ jsxs("label", {
|
|
175
175
|
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
|
|
176
|
-
htmlFor:
|
|
177
|
-
children: [
|
|
176
|
+
htmlFor: J,
|
|
177
|
+
children: [i, q.required && /* @__PURE__ */ jsx("span", {
|
|
178
178
|
className: "text-red-500 dark:text-red-400 ml-1",
|
|
179
179
|
children: "*"
|
|
180
180
|
})]
|
|
181
181
|
}),
|
|
182
182
|
/* @__PURE__ */ jsx("input", {
|
|
183
|
-
id:
|
|
184
|
-
className: clsx_default(BASE_INPUT_STYLES, "px-3 py-2 text-sm",
|
|
185
|
-
value:
|
|
186
|
-
defaultValue:
|
|
187
|
-
minLength:
|
|
188
|
-
maxLength:
|
|
189
|
-
onChange: (
|
|
190
|
-
|
|
183
|
+
id: J,
|
|
184
|
+
className: clsx_default(BASE_INPUT_STYLES, "px-3 py-2 text-sm", P && "border-red-500 dark:border-red-400 focus:ring-red-500", R),
|
|
185
|
+
value: H,
|
|
186
|
+
defaultValue: U,
|
|
187
|
+
minLength: I,
|
|
188
|
+
maxLength: L,
|
|
189
|
+
onChange: (i) => {
|
|
190
|
+
H === void 0 && Z(i.target.value.length), G?.(i);
|
|
191
191
|
},
|
|
192
|
-
...
|
|
192
|
+
...q
|
|
193
193
|
}),
|
|
194
|
-
|
|
195
|
-
current:
|
|
196
|
-
min:
|
|
197
|
-
max:
|
|
198
|
-
showMin:
|
|
199
|
-
showMax:
|
|
194
|
+
$ && /* @__PURE__ */ jsx(CharacterCount, {
|
|
195
|
+
current: Q,
|
|
196
|
+
min: I,
|
|
197
|
+
max: L,
|
|
198
|
+
showMin: I !== void 0,
|
|
199
|
+
showMax: L !== void 0
|
|
200
200
|
}),
|
|
201
|
-
|
|
201
|
+
P && /* @__PURE__ */ jsx("p", {
|
|
202
202
|
className: "text-xs text-red-600 dark:text-red-400 mt-1",
|
|
203
|
-
children:
|
|
203
|
+
children: P
|
|
204
204
|
})
|
|
205
205
|
]
|
|
206
206
|
});
|
|
207
207
|
}
|
|
208
|
-
function useRunAfterAnimation(
|
|
209
|
-
return useCallback((
|
|
210
|
-
let
|
|
211
|
-
return () => clearTimeout(
|
|
212
|
-
}, [
|
|
208
|
+
function useRunAfterAnimation(i) {
|
|
209
|
+
return useCallback((M) => {
|
|
210
|
+
let N = setTimeout(M, i);
|
|
211
|
+
return () => clearTimeout(N);
|
|
212
|
+
}, [i]);
|
|
213
213
|
}
|
|
214
|
-
var ANIMATION_DURATION_MS = 200, SIZE_CLASSES = {
|
|
214
|
+
var ANIMATION_DURATION_MS$1 = 200, SIZE_CLASSES = {
|
|
215
215
|
sm: "max-w-md",
|
|
216
216
|
md: "max-w-lg",
|
|
217
217
|
lg: "max-w-2xl",
|
|
218
218
|
xl: "max-w-4xl"
|
|
219
219
|
};
|
|
220
|
-
function Modal({ isOpen:
|
|
221
|
-
let [
|
|
220
|
+
function Modal({ isOpen: i = !1, onClose: P, title: F, children: I, size: L = "md", className: z }) {
|
|
221
|
+
let [H, U] = useState(!1), [G, K] = useState(!1), [q, J] = useState(!1), Y = useRunAfterAnimation(ANIMATION_DURATION_MS$1);
|
|
222
222
|
useEffect(() => {
|
|
223
|
-
if (
|
|
223
|
+
if (i && !G) {
|
|
224
224
|
document.body.style.overflow = "hidden";
|
|
225
|
-
let
|
|
226
|
-
|
|
227
|
-
requestAnimationFrame(() =>
|
|
225
|
+
let i = setTimeout(() => {
|
|
226
|
+
K(!0), U(!1), requestAnimationFrame(() => {
|
|
227
|
+
requestAnimationFrame(() => J(!0));
|
|
228
228
|
});
|
|
229
229
|
}, 0);
|
|
230
|
-
return () => clearTimeout(
|
|
230
|
+
return () => clearTimeout(i);
|
|
231
231
|
}
|
|
232
|
-
if (!
|
|
233
|
-
let
|
|
234
|
-
|
|
235
|
-
}, 0),
|
|
236
|
-
|
|
232
|
+
if (!i && G) {
|
|
233
|
+
let i = setTimeout(() => {
|
|
234
|
+
U(!0), J(!1);
|
|
235
|
+
}, 0), M = Y(() => {
|
|
236
|
+
K(!1), U(!1), document.body.style.overflow = "";
|
|
237
237
|
});
|
|
238
238
|
return () => {
|
|
239
|
-
clearTimeout(
|
|
239
|
+
clearTimeout(i), M();
|
|
240
240
|
};
|
|
241
241
|
}
|
|
242
242
|
}, [
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
243
|
+
i,
|
|
244
|
+
G,
|
|
245
|
+
Y
|
|
246
246
|
]), useEffect(() => {
|
|
247
|
-
if (!
|
|
248
|
-
let
|
|
249
|
-
|
|
247
|
+
if (!i || H) return;
|
|
248
|
+
let M = (i) => {
|
|
249
|
+
i.key === "Escape" && P?.();
|
|
250
250
|
};
|
|
251
|
-
return document.addEventListener("keydown",
|
|
251
|
+
return document.addEventListener("keydown", M), () => document.removeEventListener("keydown", M);
|
|
252
252
|
}, [
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
253
|
+
i,
|
|
254
|
+
H,
|
|
255
|
+
P
|
|
256
256
|
]);
|
|
257
|
-
let
|
|
258
|
-
|
|
257
|
+
let X = () => {
|
|
258
|
+
H || P?.();
|
|
259
259
|
};
|
|
260
|
-
if (!
|
|
261
|
-
let
|
|
260
|
+
if (!G) return null;
|
|
261
|
+
let Z = q && !H;
|
|
262
262
|
return createPortal(/* @__PURE__ */ jsxs("div", {
|
|
263
|
-
className: clsx_default("fixed inset-0 z-50 h-fit flex justify-center p-4 mt-32", "transition-opacity duration-200",
|
|
264
|
-
onClick:
|
|
263
|
+
className: clsx_default("fixed inset-0 z-50 h-fit flex justify-center p-4 mt-32", "transition-opacity duration-200", Z ? "opacity-100" : "opacity-0"),
|
|
264
|
+
onClick: X,
|
|
265
265
|
children: [/* @__PURE__ */ jsx("div", {
|
|
266
|
-
className: clsx_default("fixed inset-0 bg-black/50 backdrop-blur-sm", "transition-opacity duration-200",
|
|
266
|
+
className: clsx_default("fixed inset-0 bg-black/50 backdrop-blur-sm", "transition-opacity duration-200", Z ? "opacity-100" : "opacity-0"),
|
|
267
267
|
"aria-hidden": "true"
|
|
268
268
|
}), /* @__PURE__ */ jsxs("div", {
|
|
269
|
-
className: clsx_default("relative w-full", SIZE_CLASSES[
|
|
270
|
-
onClick: (
|
|
271
|
-
children: [
|
|
269
|
+
className: clsx_default("relative w-full", SIZE_CLASSES[L], "bg-white dark:bg-gray-800 rounded-lg shadow-xl", "max-h-[90vh] overflow-hidden flex flex-col", "transition-all duration-200", Z ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 translate-y-2"),
|
|
270
|
+
onClick: (i) => i.stopPropagation(),
|
|
271
|
+
children: [F && /* @__PURE__ */ jsxs("div", {
|
|
272
272
|
className: "flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700",
|
|
273
273
|
children: [/* @__PURE__ */ jsx("h2", {
|
|
274
274
|
className: "text-lg font-semibold text-gray-900 dark:text-gray-100",
|
|
275
|
-
children:
|
|
275
|
+
children: F
|
|
276
276
|
}), /* @__PURE__ */ jsx(IconButton, {
|
|
277
277
|
icon: "i-mdi-close",
|
|
278
|
-
onClick:
|
|
278
|
+
onClick: P?.bind(null),
|
|
279
279
|
"aria-label": "Close",
|
|
280
280
|
variant: "ghost",
|
|
281
281
|
className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
|
282
282
|
})]
|
|
283
283
|
}), /* @__PURE__ */ jsx("div", {
|
|
284
|
-
className: clsx_default("flex-1 overflow-y-auto px-6 py-4 text-gray-600 dark:text-gray-400",
|
|
285
|
-
children:
|
|
284
|
+
className: clsx_default("flex-1 overflow-y-auto px-6 py-4 text-gray-600 dark:text-gray-400", z),
|
|
285
|
+
children: I
|
|
286
286
|
})]
|
|
287
287
|
})]
|
|
288
288
|
}), document.body);
|
|
289
289
|
}
|
|
290
|
-
function
|
|
291
|
-
let
|
|
290
|
+
function ConfirmModal({ isOpen: i, onClose: P, onConfirm: F, title: I, children: L, confirmLabel: R, cancelLabel: z, confirmColor: V, loading: H = !1 }) {
|
|
291
|
+
let [U, W] = useState(!1), G = async () => {
|
|
292
|
+
W(!0);
|
|
293
|
+
try {
|
|
294
|
+
await F();
|
|
295
|
+
} finally {
|
|
296
|
+
W(!1);
|
|
297
|
+
}
|
|
298
|
+
}, K = H || U;
|
|
299
|
+
return /* @__PURE__ */ jsx(Modal, {
|
|
300
|
+
isOpen: i,
|
|
301
|
+
onClose: P,
|
|
302
|
+
title: I,
|
|
303
|
+
size: "sm",
|
|
304
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
305
|
+
className: "space-y-4",
|
|
306
|
+
children: [L && /* @__PURE__ */ jsx("div", {
|
|
307
|
+
className: "text-sm text-gray-600 dark:text-gray-300",
|
|
308
|
+
children: L
|
|
309
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
310
|
+
className: "flex justify-end gap-3",
|
|
311
|
+
children: [/* @__PURE__ */ jsx(Button, {
|
|
312
|
+
variant: "secondary",
|
|
313
|
+
onClick: P,
|
|
314
|
+
disabled: K,
|
|
315
|
+
size: "sm",
|
|
316
|
+
children: z ?? "Cancel"
|
|
317
|
+
}), /* @__PURE__ */ jsx(Button, {
|
|
318
|
+
variant: (V ?? "blue") === "red" ? "danger" : "primary",
|
|
319
|
+
onClick: G,
|
|
320
|
+
loading: K,
|
|
321
|
+
disabled: K,
|
|
322
|
+
size: "sm",
|
|
323
|
+
children: R ?? "Confirm"
|
|
324
|
+
})]
|
|
325
|
+
})]
|
|
326
|
+
})
|
|
327
|
+
});
|
|
328
|
+
}
|
|
329
|
+
var createStoreImpl = (i) => {
|
|
330
|
+
let M, N = /* @__PURE__ */ new Set(), P = (i, P) => {
|
|
331
|
+
let F = typeof i == "function" ? i(M) : i;
|
|
332
|
+
if (!Object.is(F, M)) {
|
|
333
|
+
let i = M;
|
|
334
|
+
M = P ?? (typeof F != "object" || !F) ? F : Object.assign({}, M, F), N.forEach((N) => N(M, i));
|
|
335
|
+
}
|
|
336
|
+
}, F = () => M, I = {
|
|
337
|
+
setState: P,
|
|
338
|
+
getState: F,
|
|
339
|
+
getInitialState: () => L,
|
|
340
|
+
subscribe: (i) => (N.add(i), () => N.delete(i))
|
|
341
|
+
}, L = M = i(P, F, I);
|
|
342
|
+
return I;
|
|
343
|
+
}, createStore = ((i) => i ? createStoreImpl(i) : createStoreImpl), identity = (i) => i;
|
|
344
|
+
function useStore(i, M = identity) {
|
|
345
|
+
let N = React.useSyncExternalStore(i.subscribe, React.useCallback(() => M(i.getState()), [i, M]), React.useCallback(() => M(i.getInitialState()), [i, M]));
|
|
346
|
+
return React.useDebugValue(N), N;
|
|
347
|
+
}
|
|
348
|
+
var createImpl = (i) => {
|
|
349
|
+
let M = createStore(i), N = (i) => useStore(M, i);
|
|
350
|
+
return Object.assign(N, M), N;
|
|
351
|
+
}, create = ((i) => i ? createImpl(i) : createImpl);
|
|
352
|
+
const useGlobalHotkeysStore = create((i) => ({
|
|
353
|
+
globalHotkeysEnabled: !0,
|
|
354
|
+
setGlobalHotkeysEnabled: (M) => i({ globalHotkeysEnabled: M })
|
|
355
|
+
}));
|
|
356
|
+
var ANIMATION_DURATION_MS = 200, generateId = () => Math.random().toString(36).substring(7);
|
|
357
|
+
const useModalStore = create((i, M) => ({
|
|
358
|
+
modals: [],
|
|
359
|
+
closingIds: /* @__PURE__ */ new Set(),
|
|
360
|
+
open: (N) => {
|
|
361
|
+
let P = generateId(), F = M(), I = F.modals.length === 0;
|
|
362
|
+
return i({ modals: [...F.modals, {
|
|
363
|
+
...N,
|
|
364
|
+
id: P,
|
|
365
|
+
type: "standard"
|
|
366
|
+
}] }), I && useGlobalHotkeysStore.getState().setGlobalHotkeysEnabled(!1), P;
|
|
367
|
+
},
|
|
368
|
+
openConfirm: (N) => {
|
|
369
|
+
let P = generateId(), F = M(), I = F.modals.length === 0;
|
|
370
|
+
return i({ modals: [...F.modals, {
|
|
371
|
+
...N,
|
|
372
|
+
id: P,
|
|
373
|
+
type: "confirm"
|
|
374
|
+
}] }), I && useGlobalHotkeysStore.getState().setGlobalHotkeysEnabled(!1), P;
|
|
375
|
+
},
|
|
376
|
+
close: (N) => {
|
|
377
|
+
if (!M().modals.find((i) => i.id === N)) return;
|
|
378
|
+
let P = M().modals.length === 1;
|
|
379
|
+
i((i) => ({ closingIds: new Set(i.closingIds).add(N) })), setTimeout(() => {
|
|
380
|
+
i((i) => {
|
|
381
|
+
let M = new Set(i.closingIds);
|
|
382
|
+
M.delete(N);
|
|
383
|
+
let F = i.modals.filter((i) => i.id !== N);
|
|
384
|
+
return P && F.length === 0 && useGlobalHotkeysStore.getState().setGlobalHotkeysEnabled(!0), {
|
|
385
|
+
modals: F,
|
|
386
|
+
closingIds: M
|
|
387
|
+
};
|
|
388
|
+
});
|
|
389
|
+
}, ANIMATION_DURATION_MS);
|
|
390
|
+
},
|
|
391
|
+
closeAll: () => {
|
|
392
|
+
let N = M().modals;
|
|
393
|
+
N.length !== 0 && (i({ closingIds: new Set(N.map((i) => i.id)) }), setTimeout(() => {
|
|
394
|
+
i({
|
|
395
|
+
modals: [],
|
|
396
|
+
closingIds: /* @__PURE__ */ new Set()
|
|
397
|
+
}), useGlobalHotkeysStore.getState().setGlobalHotkeysEnabled(!0);
|
|
398
|
+
}, ANIMATION_DURATION_MS));
|
|
399
|
+
},
|
|
400
|
+
isOpen: (i) => M().modals.some((M) => M.id === i)
|
|
401
|
+
}));
|
|
402
|
+
function ModalProvider() {
|
|
403
|
+
let N = useModalStore((i) => i.modals), P = useModalStore((i) => i.closingIds), F = useModalStore((i) => i.isOpen), I = useModalStore((i) => i.close);
|
|
404
|
+
return /* @__PURE__ */ jsx(Fragment, { children: N.map((i) => {
|
|
405
|
+
let N = F(i.id) && !P.has(i.id);
|
|
406
|
+
return i.type === "confirm" ? /* @__PURE__ */ jsx(ConfirmModal, {
|
|
407
|
+
isOpen: N,
|
|
408
|
+
onClose: () => I(i.id),
|
|
409
|
+
onConfirm: async () => {
|
|
410
|
+
await i.onConfirm(), I(i.id);
|
|
411
|
+
},
|
|
412
|
+
title: i.title,
|
|
413
|
+
confirmLabel: i.confirmLabel,
|
|
414
|
+
cancelLabel: i.cancelLabel,
|
|
415
|
+
confirmColor: i.confirmColor,
|
|
416
|
+
children: i.children
|
|
417
|
+
}, i.id) : /* @__PURE__ */ jsx(Modal, {
|
|
418
|
+
isOpen: N,
|
|
419
|
+
onClose: () => I(i.id),
|
|
420
|
+
title: i.title,
|
|
421
|
+
size: i.size,
|
|
422
|
+
children: i.children
|
|
423
|
+
}, i.id);
|
|
424
|
+
}) });
|
|
425
|
+
}
|
|
426
|
+
function Select({ options: i, label: P, error: F, placeholder: I, className: L, wrapperClassName: R, value: B, defaultValue: V, onChange: H, id: U = "select", ...G }) {
|
|
427
|
+
let K = `${U}-${useId()}`;
|
|
292
428
|
return /* @__PURE__ */ jsxs("div", {
|
|
293
|
-
className: clsx_default("w-full",
|
|
429
|
+
className: clsx_default("w-full", R),
|
|
294
430
|
children: [
|
|
295
|
-
|
|
431
|
+
P && /* @__PURE__ */ jsxs("label", {
|
|
296
432
|
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
|
|
297
|
-
htmlFor:
|
|
298
|
-
children: [
|
|
433
|
+
htmlFor: K,
|
|
434
|
+
children: [P, G.required && /* @__PURE__ */ jsx("span", {
|
|
299
435
|
className: "text-red-500 dark:text-red-400 ml-1",
|
|
300
436
|
children: "*"
|
|
301
437
|
})]
|
|
302
438
|
}),
|
|
303
439
|
/* @__PURE__ */ jsxs("select", {
|
|
304
|
-
id:
|
|
305
|
-
className: clsx_default(BASE_INPUT_STYLES, "pl-3 pr-8 py-2 text-sm appearance-none bg-[length:1rem_1rem] bg-[position:right_0.5rem_center] bg-no-repeat", "bg-[url(\"data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%236b7280%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3e%3c/svg%3e\")]",
|
|
306
|
-
value:
|
|
307
|
-
defaultValue:
|
|
308
|
-
onChange:
|
|
309
|
-
"aria-invalid": !!
|
|
310
|
-
"aria-describedby":
|
|
311
|
-
...
|
|
312
|
-
children: [
|
|
440
|
+
id: K,
|
|
441
|
+
className: clsx_default(BASE_INPUT_STYLES, "pl-3 pr-8 py-2 text-sm appearance-none bg-[length:1rem_1rem] bg-[position:right_0.5rem_center] bg-no-repeat", "bg-[url(\"data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%236b7280%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3e%3c/svg%3e\")]", F && "border-red-500 dark:border-red-400 focus:ring-red-500", L),
|
|
442
|
+
value: B,
|
|
443
|
+
defaultValue: V,
|
|
444
|
+
onChange: H,
|
|
445
|
+
"aria-invalid": !!F,
|
|
446
|
+
"aria-describedby": F ? `${K}-error` : void 0,
|
|
447
|
+
...G,
|
|
448
|
+
children: [I !== void 0 && /* @__PURE__ */ jsx("option", {
|
|
313
449
|
value: "",
|
|
314
|
-
children:
|
|
315
|
-
}),
|
|
316
|
-
value:
|
|
317
|
-
children:
|
|
318
|
-
},
|
|
450
|
+
children: I
|
|
451
|
+
}), i.map((i) => /* @__PURE__ */ jsx("option", {
|
|
452
|
+
value: i.value,
|
|
453
|
+
children: i.label
|
|
454
|
+
}, i.value))]
|
|
319
455
|
}),
|
|
320
|
-
|
|
321
|
-
id: `${
|
|
456
|
+
F && /* @__PURE__ */ jsx("p", {
|
|
457
|
+
id: `${K}-error`,
|
|
322
458
|
className: "text-xs text-red-600 dark:text-red-400 mt-1",
|
|
323
459
|
role: "alert",
|
|
324
|
-
children:
|
|
460
|
+
children: F
|
|
325
461
|
})
|
|
326
462
|
]
|
|
327
463
|
});
|
|
328
464
|
}
|
|
329
|
-
function Switch({ label:
|
|
330
|
-
let
|
|
465
|
+
function Switch({ label: i, error: P, className: F, wrapperClassName: I, checked: L, defaultChecked: R = !1, onChange: V, id: H = "switch", ...U }) {
|
|
466
|
+
let G = `${H}-${useId()}`, [K, q] = useState(R), J = L !== void 0, Y = J ? L : K;
|
|
331
467
|
return /* @__PURE__ */ jsxs("div", {
|
|
332
|
-
className: clsx_default("w-full",
|
|
468
|
+
className: clsx_default("w-full", I),
|
|
333
469
|
children: [/* @__PURE__ */ jsxs("label", {
|
|
334
|
-
htmlFor:
|
|
335
|
-
className: clsx_default("flex items-center gap-3 cursor-pointer",
|
|
470
|
+
htmlFor: G,
|
|
471
|
+
className: clsx_default("flex items-center gap-3 cursor-pointer", U.disabled && "cursor-not-allowed opacity-50"),
|
|
336
472
|
children: [/* @__PURE__ */ jsxs("span", {
|
|
337
|
-
className: clsx_default("relative inline-flex w-11 shrink-0 rounded-full border-2 border-transparent", "transition-colors duration-200 ease-in-out", "focus-within:outline-none focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2", "disabled:opacity-50",
|
|
473
|
+
className: clsx_default("relative inline-flex w-11 shrink-0 rounded-full border-2 border-transparent", "transition-colors duration-200 ease-in-out", "focus-within:outline-none focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2", "disabled:opacity-50", Y ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-200 dark:bg-gray-600", P && "ring-2 ring-red-500 dark:ring-red-400", F),
|
|
338
474
|
children: [/* @__PURE__ */ jsx("input", {
|
|
339
475
|
type: "checkbox",
|
|
340
476
|
role: "switch",
|
|
341
|
-
id:
|
|
477
|
+
id: G,
|
|
342
478
|
className: "sr-only",
|
|
343
|
-
checked:
|
|
344
|
-
defaultChecked:
|
|
345
|
-
onChange: (
|
|
346
|
-
|
|
479
|
+
checked: L,
|
|
480
|
+
defaultChecked: R,
|
|
481
|
+
onChange: (i) => {
|
|
482
|
+
J || q(i.target.checked), V?.(i);
|
|
347
483
|
},
|
|
348
|
-
"aria-invalid": !!
|
|
349
|
-
"aria-describedby":
|
|
350
|
-
...
|
|
484
|
+
"aria-invalid": !!P,
|
|
485
|
+
"aria-describedby": P ? `${G}-error` : void 0,
|
|
486
|
+
...U
|
|
351
487
|
}), /* @__PURE__ */ jsx("span", {
|
|
352
|
-
className: clsx_default("pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0", "transition duration-200 ease-in-out",
|
|
488
|
+
className: clsx_default("pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0", "transition duration-200 ease-in-out", Y ? "translate-x-5.25" : "translate-x-0"),
|
|
353
489
|
"aria-hidden": !0
|
|
354
490
|
})]
|
|
355
|
-
}),
|
|
491
|
+
}), i && /* @__PURE__ */ jsxs("span", {
|
|
356
492
|
className: "text-sm font-medium text-gray-700 dark:text-gray-300 select-none",
|
|
357
|
-
children: [
|
|
493
|
+
children: [i, U.required && /* @__PURE__ */ jsx("span", {
|
|
358
494
|
className: "text-red-500 dark:text-red-400 ml-1",
|
|
359
495
|
children: "*"
|
|
360
496
|
})]
|
|
361
497
|
})]
|
|
362
|
-
}),
|
|
363
|
-
id: `${
|
|
498
|
+
}), P && /* @__PURE__ */ jsx("p", {
|
|
499
|
+
id: `${G}-error`,
|
|
364
500
|
className: "text-xs text-red-600 dark:text-red-400 mt-1 ml-14",
|
|
365
501
|
role: "alert",
|
|
366
|
-
children:
|
|
502
|
+
children: P
|
|
367
503
|
})]
|
|
368
504
|
});
|
|
369
505
|
}
|
|
370
|
-
function Tabs({ items:
|
|
371
|
-
let [
|
|
372
|
-
|
|
373
|
-
},
|
|
506
|
+
function Tabs({ items: i, defaultIndex: P = 0, className: F, tabListClassName: I, panelClassName: L, onChange: R }) {
|
|
507
|
+
let [z, V] = useState(P), H = (M) => {
|
|
508
|
+
i[M]?.disabled || (V(M), R?.(M));
|
|
509
|
+
}, U = i[z];
|
|
374
510
|
return /* @__PURE__ */ jsxs("div", {
|
|
375
|
-
className: clsx_default("w-full",
|
|
511
|
+
className: clsx_default("w-full", F),
|
|
376
512
|
children: [/* @__PURE__ */ jsx("div", {
|
|
377
513
|
role: "tablist",
|
|
378
|
-
className: clsx_default("flex gap-1 p-1 rounded-md bg-gray-100 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700",
|
|
379
|
-
children:
|
|
514
|
+
className: clsx_default("flex gap-1 p-1 rounded-md bg-gray-100 dark:bg-gray-800/50 border border-gray-200 dark:border-gray-700", I),
|
|
515
|
+
children: i.map((i, P) => /* @__PURE__ */ jsxs("button", {
|
|
380
516
|
role: "tab",
|
|
381
517
|
type: "button",
|
|
382
|
-
"aria-selected":
|
|
383
|
-
"aria-disabled":
|
|
384
|
-
disabled:
|
|
385
|
-
onClick: () =>
|
|
386
|
-
className: clsx_default("flex items-center gap-2 px-4 py-2.5 rounded-md text-sm font-medium",
|
|
387
|
-
children: [
|
|
388
|
-
},
|
|
518
|
+
"aria-selected": z === P,
|
|
519
|
+
"aria-disabled": i.disabled,
|
|
520
|
+
disabled: i.disabled,
|
|
521
|
+
onClick: () => H(P),
|
|
522
|
+
className: clsx_default("flex items-center gap-2 px-4 py-2.5 rounded-md text-sm font-medium", z === P ? "bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm border border-gray-200 dark:border-gray-600" : clsx_default("text-gray-600 dark:text-gray-400 border border-transparent", i.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-200/50 dark:hover:bg-gray-700/50")),
|
|
523
|
+
children: [i.icon && /* @__PURE__ */ jsx("span", { className: clsx_default("w-4 h-4 block shrink-0", i.icon, z === P ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400") }), i.title]
|
|
524
|
+
}, P))
|
|
389
525
|
}), /* @__PURE__ */ jsx("div", {
|
|
390
526
|
role: "tabpanel",
|
|
391
|
-
className: clsx_default("mt-3 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/50 p-4 overflow-hidden",
|
|
527
|
+
className: clsx_default("mt-3 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/50 p-4 overflow-hidden", L),
|
|
392
528
|
children: /* @__PURE__ */ jsx("div", {
|
|
393
529
|
className: "tabs-panel-inner",
|
|
394
|
-
children:
|
|
395
|
-
},
|
|
530
|
+
children: U?.content
|
|
531
|
+
}, z)
|
|
396
532
|
})]
|
|
397
533
|
});
|
|
398
534
|
}
|
|
399
|
-
function Textarea({ label:
|
|
400
|
-
let
|
|
535
|
+
function Textarea({ label: i, error: P, showCharCount: F = !1, minLength: I, maxLength: L, className: R, wrapperClassName: V, value: H, defaultValue: U, onChange: G, id: K = "textarea", ...q }) {
|
|
536
|
+
let J = `${K}-${useId()}`, [X, Z] = useState(typeof U == "string" ? U.length : 0), Q = typeof H == "string" ? H.length : H === void 0 ? X : 0, $ = F && (I !== void 0 || L !== void 0);
|
|
401
537
|
return /* @__PURE__ */ jsxs("div", {
|
|
402
|
-
className: clsx_default("w-full",
|
|
538
|
+
className: clsx_default("w-full", V),
|
|
403
539
|
children: [
|
|
404
|
-
|
|
540
|
+
i && /* @__PURE__ */ jsxs("label", {
|
|
405
541
|
className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
|
|
406
|
-
htmlFor:
|
|
407
|
-
children: [
|
|
542
|
+
htmlFor: J,
|
|
543
|
+
children: [i, q.required && /* @__PURE__ */ jsx("span", {
|
|
408
544
|
className: "text-red-500 dark:text-red-400 ml-1",
|
|
409
545
|
children: "*"
|
|
410
546
|
})]
|
|
411
547
|
}),
|
|
412
548
|
/* @__PURE__ */ jsx("textarea", {
|
|
413
|
-
id:
|
|
414
|
-
className: clsx_default(BASE_INPUT_STYLES, "px-3 py-2 text-sm min-h-[80px] resize-y",
|
|
415
|
-
value:
|
|
416
|
-
defaultValue:
|
|
417
|
-
minLength:
|
|
418
|
-
maxLength:
|
|
419
|
-
onChange: (
|
|
420
|
-
|
|
549
|
+
id: J,
|
|
550
|
+
className: clsx_default(BASE_INPUT_STYLES, "px-3 py-2 text-sm min-h-[80px] resize-y", P && "border-red-500 dark:border-red-400 focus:ring-red-500", R),
|
|
551
|
+
value: H,
|
|
552
|
+
defaultValue: U,
|
|
553
|
+
minLength: I,
|
|
554
|
+
maxLength: L,
|
|
555
|
+
onChange: (i) => {
|
|
556
|
+
H === void 0 && Z(i.target.value.length), G?.(i);
|
|
421
557
|
},
|
|
422
|
-
...
|
|
558
|
+
...q
|
|
423
559
|
}),
|
|
424
|
-
|
|
425
|
-
current:
|
|
426
|
-
min:
|
|
427
|
-
max:
|
|
428
|
-
showMin:
|
|
429
|
-
showMax:
|
|
560
|
+
$ && /* @__PURE__ */ jsx(CharacterCount, {
|
|
561
|
+
current: Q,
|
|
562
|
+
min: I,
|
|
563
|
+
max: L,
|
|
564
|
+
showMin: I !== void 0,
|
|
565
|
+
showMax: L !== void 0
|
|
430
566
|
}),
|
|
431
|
-
|
|
567
|
+
P && /* @__PURE__ */ jsx("p", {
|
|
432
568
|
className: "text-xs text-red-600 dark:text-red-400 mt-1",
|
|
433
|
-
children:
|
|
569
|
+
children: P
|
|
434
570
|
})
|
|
435
571
|
]
|
|
436
572
|
});
|
|
437
573
|
}
|
|
438
574
|
const useIsClient = () => {
|
|
439
|
-
let [
|
|
575
|
+
let [i, M] = useState(!1);
|
|
440
576
|
return useEffect(() => {
|
|
441
577
|
requestAnimationFrame(() => {
|
|
442
|
-
|
|
578
|
+
M(!0);
|
|
443
579
|
});
|
|
444
|
-
}, []),
|
|
580
|
+
}, []), i;
|
|
445
581
|
};
|
|
446
|
-
function applyTheme(
|
|
447
|
-
let
|
|
448
|
-
|
|
582
|
+
function applyTheme(i) {
|
|
583
|
+
let M = document.documentElement;
|
|
584
|
+
i === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? M.classList.add("dark") : M.classList.remove("dark") : i === "dark" ? M.classList.add("dark") : M.classList.remove("dark");
|
|
449
585
|
}
|
|
450
|
-
function getIcon(
|
|
586
|
+
function getIcon(i) {
|
|
451
587
|
return /* @__PURE__ */ jsx("div", {
|
|
452
588
|
className: clsx_default({
|
|
453
589
|
light: "i-tabler-sun text-yellow-500",
|
|
454
590
|
dark: "i-tabler-moon-stars text-gray-700 dark:text-yellow-500",
|
|
455
591
|
system: "i-tabler-device-desktop text-blue-500"
|
|
456
|
-
}[
|
|
592
|
+
}[i], "w-5 h-5"),
|
|
457
593
|
style: {
|
|
458
594
|
width: 20,
|
|
459
595
|
height: 20
|
|
@@ -461,29 +597,29 @@ function getIcon(y) {
|
|
|
461
597
|
});
|
|
462
598
|
}
|
|
463
599
|
function ThemeToggle() {
|
|
464
|
-
let [
|
|
600
|
+
let [i, N] = useState("system"), P = useIsClient();
|
|
465
601
|
return useEffect(() => {
|
|
466
|
-
let
|
|
602
|
+
let i = localStorage.getItem("theme");
|
|
467
603
|
requestAnimationFrame(() => {
|
|
468
|
-
|
|
604
|
+
i ? (N(i), applyTheme(i)) : (N("system"), applyTheme("system"));
|
|
469
605
|
});
|
|
470
606
|
}, []), useEffect(() => {
|
|
471
|
-
let
|
|
472
|
-
|
|
607
|
+
let M = window.matchMedia("(prefers-color-scheme: dark)"), N = () => {
|
|
608
|
+
i === "system" && applyTheme("system");
|
|
473
609
|
};
|
|
474
|
-
return
|
|
475
|
-
|
|
610
|
+
return M.addEventListener("change", N), () => {
|
|
611
|
+
M.removeEventListener("change", N);
|
|
476
612
|
};
|
|
477
|
-
}, [
|
|
613
|
+
}, [i]), /* @__PURE__ */ jsx("button", {
|
|
478
614
|
onClick: useCallback(() => {
|
|
479
|
-
|
|
480
|
-
let
|
|
481
|
-
return
|
|
615
|
+
N((i) => {
|
|
616
|
+
let M;
|
|
617
|
+
return M = i === "light" ? "dark" : i === "dark" ? "system" : "light", applyTheme(M), localStorage.setItem("theme", M), M;
|
|
482
618
|
});
|
|
483
619
|
}, []),
|
|
484
620
|
className: "p-2.5 rounded-lg bg-gray-100 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer",
|
|
485
|
-
"aria-label": `Thème actuel: ${
|
|
486
|
-
children:
|
|
621
|
+
"aria-label": `Thème actuel: ${i}`,
|
|
622
|
+
children: P ? getIcon(i) : /* @__PURE__ */ jsx("div", {
|
|
487
623
|
className: "i-tabler-device-desktop w-5 h-5 text-gray-400",
|
|
488
624
|
style: {
|
|
489
625
|
width: "20px",
|
|
@@ -492,4 +628,4 @@ function ThemeToggle() {
|
|
|
492
628
|
})
|
|
493
629
|
});
|
|
494
630
|
}
|
|
495
|
-
export { BASE_INPUT_STYLES, Button, CharacterCount, Checkbox, ClientOnly, IconButton, Input, Modal, Select, Switch, Tabs, Textarea, ThemeToggle, applyTheme, useClientOnly, useIsClient, useRunAfterAnimation, withClientOnly };
|
|
631
|
+
export { BASE_INPUT_STYLES, Button, CharacterCount, Checkbox, ClientOnly, ConfirmModal, IconButton, Input, Modal, ModalProvider, Select, Switch, Tabs, Textarea, ThemeToggle, applyTheme, useClientOnly, useGlobalHotkeysStore, useIsClient, useModalStore, useRunAfterAnimation, withClientOnly };
|
package/package.json
CHANGED
|
@@ -1,21 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@minimalstuff/ui",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/minimalstuff-ui.js",
|
|
6
6
|
"module": "./dist/minimalstuff-ui.js",
|
|
7
|
-
"types": "./dist/
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
8
|
"exports": {
|
|
9
9
|
".": {
|
|
10
|
-
"types": "./dist/
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
11
|
"import": "./dist/minimalstuff-ui.js",
|
|
12
12
|
"default": "./dist/minimalstuff-ui.js"
|
|
13
13
|
},
|
|
14
|
-
"./uno-config": {
|
|
15
|
-
"types": "./dist/uno-config.d.ts",
|
|
16
|
-
"import": "./dist/uno-config.js",
|
|
17
|
-
"default": "./dist/uno-config.js"
|
|
18
|
-
},
|
|
19
14
|
"./style.css": "./dist/minimalstuff-ui.css"
|
|
20
15
|
},
|
|
21
16
|
"files": [
|
|
@@ -49,8 +44,7 @@
|
|
|
49
44
|
},
|
|
50
45
|
"peerDependencies": {
|
|
51
46
|
"react": "^18.0.0 || ^19.0.0",
|
|
52
|
-
"react-dom": "^18.0.0 || ^19.0.0"
|
|
53
|
-
"unocss": "^66.0.0"
|
|
47
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
54
48
|
},
|
|
55
49
|
"dependencies": {
|
|
56
50
|
"clsx": "^2.1.1",
|
package/dist/uno-config.d.ts
DELETED
package/dist/uno-config.js
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import presetIcons from "@unocss/preset-icons";
|
|
2
|
-
import presetWebFonts from "@unocss/preset-web-fonts";
|
|
3
|
-
import { defineConfig, presetWind4 } from "unocss";
|
|
4
|
-
var uno_config_default = defineConfig({ presets: [
|
|
5
|
-
presetWind4({ dark: "class" }),
|
|
6
|
-
presetIcons({ cdn: "https://esm.sh/" }),
|
|
7
|
-
presetWebFonts({ provider: "bunny" })
|
|
8
|
-
] });
|
|
9
|
-
export { uno_config_default as default };
|