@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 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 unocss
8
+ pnpm add @minimalstuff/ui react react-dom
9
9
  ```
10
10
 
11
- Peer dependencies: React 18 or 19, UnoCSS (same major as the lib, e.g. ^66.0.0).
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>;
@@ -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*/
@@ -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(e) {
5
- var y, b, x = "";
6
- if (typeof e == "string" || typeof e == "number") x += e;
7
- else if (typeof e == "object") if (Array.isArray(e)) {
8
- var S = e.length;
9
- for (y = 0; y < S; y++) e[y] && (b = r(e[y])) && (x && (x += " "), x += b);
10
- } else for (b in e) e[b] && (x && (x += " "), x += b);
11
- return x;
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 e, y, b = 0, x = "", S = arguments.length; b < S; b++) (e = arguments[b]) && (y = r(e)) && (x && (x += " "), x += y);
15
- return x;
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: b = "primary", size: x = "md", children: S, className: C, fullWidth: w = !1, loading: T = !1, disabled: E, ...D }) => /* @__PURE__ */ jsxs("button", {
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[b], SIZE_CLASSES$2[x], w && "w-full", C),
33
- disabled: E ?? T,
34
- ...D,
35
- children: [T && /* @__PURE__ */ jsx("span", {
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
- }), S]
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: e, min: b, max: x, showMin: S, showMax: C }) {
42
- let w = b !== void 0 && e <= b, T = x !== void 0 && e >= x, E = x !== void 0 && e > x;
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
- S && b !== void 0 && /* @__PURE__ */ jsxs("span", {
47
- className: w ? "text-amber-600 dark:text-amber-400" : "",
46
+ F && M !== void 0 && /* @__PURE__ */ jsxs("span", {
47
+ className: L ? "text-amber-600 dark:text-amber-400" : "",
48
48
  children: [
49
- e,
49
+ i,
50
50
  "/",
51
- b,
51
+ M,
52
52
  " min"
53
53
  ]
54
54
  }),
55
- S && C && " · ",
56
- C && x !== void 0 && /* @__PURE__ */ jsxs("span", {
57
- className: E ? "text-red-600 dark:text-red-400" : T ? "text-amber-600 dark:text-amber-400" : "",
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
- e,
59
+ i,
60
60
  "/",
61
- x,
61
+ P,
62
62
  " max"
63
63
  ]
64
64
  }),
65
- !S && !C && x !== void 0 && /* @__PURE__ */ jsxs("span", {
66
- className: E ? "text-red-600 dark:text-red-400" : T ? "text-amber-600 dark:text-amber-400" : "",
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
- e,
68
+ i,
69
69
  "/",
70
- x
70
+ P
71
71
  ]
72
72
  }),
73
- !S && !C && b !== void 0 && x === void 0 && /* @__PURE__ */ jsxs("span", {
74
- className: w ? "text-amber-600 dark:text-amber-400" : "",
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
- e,
76
+ i,
77
77
  " (min ",
78
- b,
78
+ M,
79
79
  ")"
80
80
  ]
81
81
  })
82
82
  ]
83
83
  });
84
84
  }
85
- function Checkbox({ label: b, error: x, className: S, wrapperClassName: C, checked: E, defaultChecked: D = !1, onChange: O, id: k = "checkbox", ...A }) {
86
- let j = `${k}-${useId()}`, [M, N] = useState(D), P = E !== void 0, F = P ? E : M;
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", C),
88
+ className: clsx_default("w-full", I),
89
89
  children: [/* @__PURE__ */ jsxs("label", {
90
- htmlFor: j,
91
- className: clsx_default("flex items-start gap-3 cursor-pointer", A.disabled && "cursor-not-allowed opacity-50"),
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", x ? "focus-within:ring-red-500" : "focus-within:ring-blue-500"),
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: j,
96
+ id: G,
97
97
  className: "sr-only",
98
- checked: E,
99
- defaultChecked: D,
100
- onChange: (e) => {
101
- P || N(e.target.checked), O?.(e);
98
+ checked: L,
99
+ defaultChecked: R,
100
+ onChange: (i) => {
101
+ J || q(i.target.checked), V?.(i);
102
102
  },
103
- "aria-invalid": !!x,
104
- "aria-describedby": x ? `${j}-error` : void 0,
105
- ...A
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", F ? "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", x && "border-red-500 dark:border-red-400", S),
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: F && /* @__PURE__ */ jsx("svg", {
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
- }), b && /* @__PURE__ */ jsxs("span", {
120
+ }), i && /* @__PURE__ */ jsxs("span", {
121
121
  className: "text-sm font-medium text-gray-700 dark:text-gray-300 select-none",
122
- children: [b, A.required && /* @__PURE__ */ jsx("span", {
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
- }), x && /* @__PURE__ */ jsx("p", {
128
- id: `${j}-error`,
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: x
131
+ children: P
132
132
  })]
133
133
  });
134
134
  }
135
135
  const useClientOnly = () => {
136
- let [e, y] = useState(!1);
136
+ let [i, M] = useState(!1);
137
137
  return useEffect(() => {
138
138
  requestAnimationFrame(() => {
139
- y(!0);
139
+ M(!0);
140
140
  });
141
- }, []), e;
142
- }, withClientOnly = (y) => (b) => useClientOnly() ? /* @__PURE__ */ jsx(y, { ...b }) : null;
143
- function ClientOnly({ children: e, fallback: y }) {
144
- return useClientOnly() ? createElement(Fragment, { children: e }) : y ?? null;
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: b, "aria-label": x, variant: S = "default", size: C = "md", className: w, children: T, ref: E, ...D }) => /* @__PURE__ */ jsxs("button", {
162
- ref: E,
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": x,
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[S], SIZE_CLASSES$1[C], w),
166
- ...D,
167
- children: [/* @__PURE__ */ jsx("div", { className: clsx_default(b, ICON_SIZE_CLASSES[C], T && "mr-1") }), T]
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: b, error: x, showCharCount: S = !1, minLength: C, maxLength: E, className: D, wrapperClassName: O, value: k, defaultValue: A, onChange: j, id: M = "input", ...P }) {
170
- let F = `${M}-${useId()}`, [I, L] = useState(typeof A == "string" ? A.length : 0), R = typeof k == "string" ? k.length : k === void 0 ? I : 0, z = S && (C !== void 0 || E !== void 0);
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", O),
172
+ className: clsx_default("w-full", V),
173
173
  children: [
174
- b && /* @__PURE__ */ jsxs("label", {
174
+ i && /* @__PURE__ */ jsxs("label", {
175
175
  className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
176
- htmlFor: F,
177
- children: [b, P.required && /* @__PURE__ */ jsx("span", {
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: F,
184
- className: clsx_default(BASE_INPUT_STYLES, "px-3 py-2 text-sm", x && "border-red-500 dark:border-red-400 focus:ring-red-500", D),
185
- value: k,
186
- defaultValue: A,
187
- minLength: C,
188
- maxLength: E,
189
- onChange: (e) => {
190
- k === void 0 && L(e.target.value.length), j?.(e);
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
- ...P
192
+ ...q
193
193
  }),
194
- z && /* @__PURE__ */ jsx(CharacterCount, {
195
- current: R,
196
- min: C,
197
- max: E,
198
- showMin: C !== void 0,
199
- showMax: E !== void 0
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
- x && /* @__PURE__ */ jsx("p", {
201
+ P && /* @__PURE__ */ jsx("p", {
202
202
  className: "text-xs text-red-600 dark:text-red-400 mt-1",
203
- children: x
203
+ children: P
204
204
  })
205
205
  ]
206
206
  });
207
207
  }
208
- function useRunAfterAnimation(e) {
209
- return useCallback((y) => {
210
- let b = setTimeout(y, e);
211
- return () => clearTimeout(b);
212
- }, [e]);
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: b = !1, onClose: x, title: S, children: w, size: D = "md", className: O }) {
221
- let [k, A] = useState(!1), [j, M] = useState(!1), [N, P] = useState(!1), F = useRunAfterAnimation(ANIMATION_DURATION_MS);
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 (b && !j) {
223
+ if (i && !G) {
224
224
  document.body.style.overflow = "hidden";
225
- let e = setTimeout(() => {
226
- M(!0), A(!1), requestAnimationFrame(() => {
227
- requestAnimationFrame(() => P(!0));
225
+ let i = setTimeout(() => {
226
+ K(!0), U(!1), requestAnimationFrame(() => {
227
+ requestAnimationFrame(() => J(!0));
228
228
  });
229
229
  }, 0);
230
- return () => clearTimeout(e);
230
+ return () => clearTimeout(i);
231
231
  }
232
- if (!b && j) {
233
- let e = setTimeout(() => {
234
- A(!0), P(!1);
235
- }, 0), y = F(() => {
236
- M(!1), A(!1), document.body.style.overflow = "";
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(e), y();
239
+ clearTimeout(i), M();
240
240
  };
241
241
  }
242
242
  }, [
243
- b,
244
- j,
245
- F
243
+ i,
244
+ G,
245
+ Y
246
246
  ]), useEffect(() => {
247
- if (!b || k) return;
248
- let e = (e) => {
249
- e.key === "Escape" && x?.();
247
+ if (!i || H) return;
248
+ let M = (i) => {
249
+ i.key === "Escape" && P?.();
250
250
  };
251
- return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
251
+ return document.addEventListener("keydown", M), () => document.removeEventListener("keydown", M);
252
252
  }, [
253
- b,
254
- k,
255
- x
253
+ i,
254
+ H,
255
+ P
256
256
  ]);
257
- let I = () => {
258
- k || x?.();
257
+ let X = () => {
258
+ H || P?.();
259
259
  };
260
- if (!j) return null;
261
- let L = N && !k;
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", L ? "opacity-100" : "opacity-0"),
264
- onClick: I,
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", L ? "opacity-100" : "opacity-0"),
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[D], "bg-white dark:bg-gray-800 rounded-lg shadow-xl", "max-h-[90vh] overflow-hidden flex flex-col", "transition-all duration-200", L ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 translate-y-2"),
270
- onClick: (e) => e.stopPropagation(),
271
- children: [S && /* @__PURE__ */ jsxs("div", {
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: S
275
+ children: F
276
276
  }), /* @__PURE__ */ jsx(IconButton, {
277
277
  icon: "i-mdi-close",
278
- onClick: x?.bind(null),
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", O),
285
- children: w
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 Select({ options: b, label: x, error: S, placeholder: C, className: T, wrapperClassName: E, value: D, defaultValue: O, onChange: k, id: A = "select", ...j }) {
291
- let M = `${A}-${useId()}`;
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", E),
429
+ className: clsx_default("w-full", R),
294
430
  children: [
295
- x && /* @__PURE__ */ jsxs("label", {
431
+ P && /* @__PURE__ */ jsxs("label", {
296
432
  className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
297
- htmlFor: M,
298
- children: [x, j.required && /* @__PURE__ */ jsx("span", {
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: M,
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\")]", S && "border-red-500 dark:border-red-400 focus:ring-red-500", T),
306
- value: D,
307
- defaultValue: O,
308
- onChange: k,
309
- "aria-invalid": !!S,
310
- "aria-describedby": S ? `${M}-error` : void 0,
311
- ...j,
312
- children: [C !== void 0 && /* @__PURE__ */ jsx("option", {
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: C
315
- }), b.map((y) => /* @__PURE__ */ jsx("option", {
316
- value: y.value,
317
- children: y.label
318
- }, y.value))]
450
+ children: I
451
+ }), i.map((i) => /* @__PURE__ */ jsx("option", {
452
+ value: i.value,
453
+ children: i.label
454
+ }, i.value))]
319
455
  }),
320
- S && /* @__PURE__ */ jsx("p", {
321
- id: `${M}-error`,
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: S
460
+ children: F
325
461
  })
326
462
  ]
327
463
  });
328
464
  }
329
- function Switch({ label: b, error: x, className: S, wrapperClassName: C, checked: E, defaultChecked: D = !1, onChange: O, id: k = "switch", ...A }) {
330
- let j = `${k}-${useId()}`, [M, N] = useState(D), P = E !== void 0, F = P ? E : M;
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", C),
468
+ className: clsx_default("w-full", I),
333
469
  children: [/* @__PURE__ */ jsxs("label", {
334
- htmlFor: j,
335
- className: clsx_default("flex items-center gap-3 cursor-pointer", A.disabled && "cursor-not-allowed opacity-50"),
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", F ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-200 dark:bg-gray-600", x && "ring-2 ring-red-500 dark:ring-red-400", S),
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: j,
477
+ id: G,
342
478
  className: "sr-only",
343
- checked: E,
344
- defaultChecked: D,
345
- onChange: (e) => {
346
- P || N(e.target.checked), O?.(e);
479
+ checked: L,
480
+ defaultChecked: R,
481
+ onChange: (i) => {
482
+ J || q(i.target.checked), V?.(i);
347
483
  },
348
- "aria-invalid": !!x,
349
- "aria-describedby": x ? `${j}-error` : void 0,
350
- ...A
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", F ? "translate-x-5.25" : "translate-x-0"),
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
- }), b && /* @__PURE__ */ jsxs("span", {
491
+ }), i && /* @__PURE__ */ jsxs("span", {
356
492
  className: "text-sm font-medium text-gray-700 dark:text-gray-300 select-none",
357
- children: [b, A.required && /* @__PURE__ */ jsx("span", {
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
- }), x && /* @__PURE__ */ jsx("p", {
363
- id: `${j}-error`,
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: x
502
+ children: P
367
503
  })]
368
504
  });
369
505
  }
370
- function Tabs({ items: b, defaultIndex: x = 0, className: S, tabListClassName: C, panelClassName: w, onChange: E }) {
371
- let [D, O] = useState(x), k = (e) => {
372
- b[e]?.disabled || (O(e), E?.(e));
373
- }, A = b[D];
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", S),
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", C),
379
- children: b.map((b, x) => /* @__PURE__ */ jsxs("button", {
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": D === x,
383
- "aria-disabled": b.disabled,
384
- disabled: b.disabled,
385
- onClick: () => k(x),
386
- className: clsx_default("flex items-center gap-2 px-4 py-2.5 rounded-md text-sm font-medium", D === x ? "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", b.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")),
387
- children: [b.icon && /* @__PURE__ */ jsx("span", { className: clsx_default("w-4 h-4 block shrink-0", b.icon, D === x ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400") }), b.title]
388
- }, x))
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", w),
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: A?.content
395
- }, D)
530
+ children: U?.content
531
+ }, z)
396
532
  })]
397
533
  });
398
534
  }
399
- function Textarea({ label: b, error: x, showCharCount: S = !1, minLength: C, maxLength: E, className: D, wrapperClassName: O, value: k, defaultValue: A, onChange: j, id: M = "textarea", ...P }) {
400
- let F = `${M}-${useId()}`, [I, L] = useState(typeof A == "string" ? A.length : 0), R = typeof k == "string" ? k.length : k === void 0 ? I : 0, z = S && (C !== void 0 || E !== void 0);
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", O),
538
+ className: clsx_default("w-full", V),
403
539
  children: [
404
- b && /* @__PURE__ */ jsxs("label", {
540
+ i && /* @__PURE__ */ jsxs("label", {
405
541
  className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
406
- htmlFor: F,
407
- children: [b, P.required && /* @__PURE__ */ jsx("span", {
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: F,
414
- className: clsx_default(BASE_INPUT_STYLES, "px-3 py-2 text-sm min-h-[80px] resize-y", x && "border-red-500 dark:border-red-400 focus:ring-red-500", D),
415
- value: k,
416
- defaultValue: A,
417
- minLength: C,
418
- maxLength: E,
419
- onChange: (e) => {
420
- k === void 0 && L(e.target.value.length), j?.(e);
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
- ...P
558
+ ...q
423
559
  }),
424
- z && /* @__PURE__ */ jsx(CharacterCount, {
425
- current: R,
426
- min: C,
427
- max: E,
428
- showMin: C !== void 0,
429
- showMax: E !== void 0
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
- x && /* @__PURE__ */ jsx("p", {
567
+ P && /* @__PURE__ */ jsx("p", {
432
568
  className: "text-xs text-red-600 dark:text-red-400 mt-1",
433
- children: x
569
+ children: P
434
570
  })
435
571
  ]
436
572
  });
437
573
  }
438
574
  const useIsClient = () => {
439
- let [e, y] = useState(!1);
575
+ let [i, M] = useState(!1);
440
576
  return useEffect(() => {
441
577
  requestAnimationFrame(() => {
442
- y(!0);
578
+ M(!0);
443
579
  });
444
- }, []), e;
580
+ }, []), i;
445
581
  };
446
- function applyTheme(e) {
447
- let y = document.documentElement;
448
- e === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? y.classList.add("dark") : y.classList.remove("dark") : e === "dark" ? y.classList.add("dark") : y.classList.remove("dark");
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(y) {
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
- }[y], "w-5 h-5"),
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 [y, b] = useState("system"), x = useIsClient();
600
+ let [i, N] = useState("system"), P = useIsClient();
465
601
  return useEffect(() => {
466
- let e = localStorage.getItem("theme");
602
+ let i = localStorage.getItem("theme");
467
603
  requestAnimationFrame(() => {
468
- e ? (b(e), applyTheme(e)) : (b("system"), applyTheme("system"));
604
+ i ? (N(i), applyTheme(i)) : (N("system"), applyTheme("system"));
469
605
  });
470
606
  }, []), useEffect(() => {
471
- let e = window.matchMedia("(prefers-color-scheme: dark)"), b = () => {
472
- y === "system" && applyTheme("system");
607
+ let M = window.matchMedia("(prefers-color-scheme: dark)"), N = () => {
608
+ i === "system" && applyTheme("system");
473
609
  };
474
- return e.addEventListener("change", b), () => {
475
- e.removeEventListener("change", b);
610
+ return M.addEventListener("change", N), () => {
611
+ M.removeEventListener("change", N);
476
612
  };
477
- }, [y]), /* @__PURE__ */ jsx("button", {
613
+ }, [i]), /* @__PURE__ */ jsx("button", {
478
614
  onClick: useCallback(() => {
479
- b((e) => {
480
- let y;
481
- return y = e === "light" ? "dark" : e === "dark" ? "system" : "light", applyTheme(y), localStorage.setItem("theme", y), y;
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: ${y}`,
486
- children: x ? getIcon(y) : /* @__PURE__ */ jsx("div", {
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.0",
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/minimalstuff-ui.d.ts",
7
+ "types": "./dist/index.d.ts",
8
8
  "exports": {
9
9
  ".": {
10
- "types": "./dist/minimalstuff-ui.d.ts",
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",
@@ -1,6 +0,0 @@
1
- import { UserConfig } from 'unocss';
2
-
3
- declare const _default: UserConfig<any>;
4
- export default _default;
5
-
6
- export { }
@@ -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 };