@minimalstuff/ui 1.0.0-6 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +47 -5
  2. package/dist/minimalstuff-ui.css +1 -1
  3. package/dist/{index.d.ts → minimalstuff-ui.d.ts} +38 -2
  4. package/dist/minimalstuff-ui.js +294 -154
  5. package/dist/uno-config.d.ts +6 -0
  6. package/dist/uno-config.js +9 -0
  7. package/package.json +34 -25
package/README.md CHANGED
@@ -5,24 +5,66 @@ 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 unocss
9
9
  ```
10
10
 
11
- Peer dependencies: React 18 or 19.
11
+ Peer dependencies: React 18 or 19, UnoCSS (same major as the lib, e.g. ^66.0.0).
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
+
15
54
  ```tsx
16
- import { Button } from '@minimalstuff/ui';
17
55
  import '@minimalstuff/ui/style.css';
56
+ ```
57
+
58
+ **Example**
59
+
60
+ ```tsx
61
+ import { Button } from '@minimalstuff/ui';
18
62
 
19
63
  export function App() {
20
64
  return <Button variant="primary">Click me</Button>;
21
65
  }
22
66
  ```
23
67
 
24
- The `@minimalstuff/ui/style.css` import is required for styles and icons to render.
25
-
26
68
  ## Development
27
69
 
28
70
  ```bash
package/dist/minimalstuff-ui.css CHANGED
@@ -1,2 +1,2 @@
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-border-opacity:100%;--un-text-opacity:100%;--un-ring-opacity:100%;--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-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%}:root,:host{--radius-md:.375rem;--default-transition-timingFunction:cubic-bezier(.4, 0, .2, 1);--default-transition-duration:.15s;--fontWeight-medium:500;--spacing:.25rem;--radius-lg:.5rem;--radius-DEFAULT:.25rem;--container-md:28rem;--container-lg:32rem;--container-2xl:42rem;--container-4xl:56rem;--colors-black:#000;--fontWeight-semibold:600;--colors-gray-300:#d1d5dc;--colors-white:#fff;--colors-gray-900:#101828;--colors-gray-700:#364153;--colors-red-500:#fb2c36;--colors-red-600:#e40014;--colors-yellow-500:#edb200;--colors-blue-500:#3080ff;--colors-gray-100:#f3f4f6;--colors-gray-200:#e5e7eb;--colors-gray-400:#99a1af;--colors-blue-600:#155dfc;--colors-gray-600:#4a5565;--colors-gray-500:#6a7282;--colors-amber-600:#dd7400;--text-sm-fontSize:.875rem;--text-sm-lineHeight:1.25rem;--text-xs-fontSize:.75rem;--text-xs-lineHeight:1rem;--text-lg-fontSize:1.125rem;--text-lg-lineHeight:1.75rem;--text-base-fontSize:1rem;--text-base-lineHeight:1.5rem;--colors-red-50:#fef2f2;--colors-blue-700:#1447e6;--colors-gray-50:#f9fafb;--colors-red-700:#bf000f;--colors-gray-800:#1e2939;--colors-red-400:#ff6568;--colors-blue-400:#54a2ff;--colors-amber-400:#fcbb00;--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-gray-300:lab(85.1236% -.612259 -3.7138);--colors-gray-900:lab(8.11897% .811279 -12.254);--colors-gray-700:lab(27.1134% -.956401 -12.3224);--colors-red-500:lab(55.4814% 75.0732 48.8528);--colors-red-600:lab(48.4493% 77.4328 61.5452);--colors-yellow-500:lab(76.3898% 14.5258 98.4589);--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-blue-600:lab(44.0605% 29.0279 -86.0352);--colors-gray-600:lab(35.6337% -1.58697 -10.8425);--colors-gray-500:lab(47.7841% -.393182 -10.0268);--colors-amber-600:lab(60.3514% 40.5624 87.1228);--colors-red-50:lab(96.5005% 4.18508 1.52328);--colors-blue-700:lab(36.9089% 35.0961 -85.6872);--colors-gray-50:lab(98.2596% -.247031 -.706708);--colors-red-700:lab(40.4273% 67.2623 53.7441);--colors-gray-800:lab(16.1051% -1.18239 -11.7533);--colors-red-400:lab(63.7053% 60.745 31.3109);--colors-blue-400:lab(65.0361% -1.42065 -56.9802);--colors-amber-400:lab(80.1641% 16.6016 99.2089);--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-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-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-500{color:color-mix(in srgb, var(--colors-gray-500) 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-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-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)}.mr-1{margin-right:calc(var(--spacing) * 1)}.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)}.text-right{text-align:right}.outline{outline-style:var(--un-outline-style);outline-width:1px}.focus\:outline-none:focus{--un-outline-style:none;outline-style:none}.border{border-width:1px}.border-b{border-bottom-width:1px}.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-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-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.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\/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-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)}.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-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}.hidden{display:none}.cursor-pointer{cursor:pointer}.cursor-not-allowed,.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.resize-y{resize:vertical}.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)}.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\: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\:ring-offset-gray-900:focus{--un-ring-offset-color:color-mix(in srgb, var(--colors-gray-900) var(--un-ring-offset-opacity), transparent) }.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-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)}.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}.items-center{align-items:center}.inset-0{inset:calc(var(--spacing) * 0)}.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}.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) }@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-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-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-900:hover{color:color-mix(in oklab, var(--colors-gray-900) var(--un-text-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-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\/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-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) }.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\: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}
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}
2
2
  /*$vite$:1*/
package/dist/{index.d.ts → minimalstuff-ui.d.ts} RENAMED
@@ -7,13 +7,14 @@ import { JSXElementConstructor } from 'react';
7
7
  import { ReactElement } from 'react';
8
8
  import { ReactNode } from 'react';
9
9
  import { ReactPortal } from 'react';
10
+ import { SelectHTMLAttributes } from 'react';
10
11
  import { TextareaHTMLAttributes } from 'react';
11
12
 
12
13
  export declare function applyTheme(newTheme: Theme_2): void;
13
14
 
14
15
  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";
15
16
 
16
- export declare const Button: ({ variant, size, children, className, fullWidth, disabled, ...props }: ButtonProps) => JSX.Element;
17
+ export declare const Button: ({ variant, size, children, className, fullWidth, loading, disabled, ...props }: ButtonProps) => JSX.Element;
17
18
 
18
19
  declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
19
20
  variant?: ButtonVariant;
@@ -21,6 +22,7 @@ declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
21
22
  children: ReactNode;
22
23
  className?: string;
23
24
  fullWidth?: boolean;
25
+ loading?: boolean;
24
26
  }
25
27
 
26
28
  declare type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
@@ -37,6 +39,15 @@ declare interface CharacterCountProps {
37
39
  showMax?: boolean;
38
40
  }
39
41
 
42
+ export declare function Checkbox({ label, error, className, wrapperClassName, checked, defaultChecked, onChange, id, ...props }: CheckboxProps): JSX.Element;
43
+
44
+ declare interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className'> {
45
+ label?: string;
46
+ error?: string;
47
+ className?: string;
48
+ wrapperClassName?: string;
49
+ }
50
+
40
51
  export declare function ClientOnly({ children, fallback }: ClientOnlyProps): string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | ReactPortal | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | FunctionComponentElement<FragmentProps> | null;
41
52
 
42
53
  declare interface ClientOnlyProps extends React.PropsWithChildren {
@@ -48,7 +59,7 @@ export declare const IconButton: ({ icon, "aria-label": ariaLabel, variant, size
48
59
  declare interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
49
60
  icon: string;
50
61
  'aria-label': string;
51
- variant?: 'default' | 'ghost' | 'danger' | 'outline';
62
+ variant?: 'default' | 'ghost' | 'danger' | 'outline' | 'subtle';
52
63
  size?: 'sm' | 'md' | 'lg';
53
64
  children?: ReactNode;
54
65
  ref?: React.Ref<HTMLButtonElement>;
@@ -77,6 +88,31 @@ declare interface ModalProps {
77
88
  className?: string;
78
89
  }
79
90
 
91
+ export declare function Select({ options, label, error, placeholder, className, wrapperClassName, value, defaultValue, onChange, id, ...props }: SelectProps): JSX.Element;
92
+
93
+ export declare interface SelectOption {
94
+ value: string;
95
+ label: string;
96
+ }
97
+
98
+ declare interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
99
+ options: SelectOption[];
100
+ label?: string;
101
+ error?: string;
102
+ placeholder?: string;
103
+ className?: string;
104
+ wrapperClassName?: string;
105
+ }
106
+
107
+ export declare function Switch({ label, error, className, wrapperClassName, checked, defaultChecked, onChange, id, ...props }: SwitchProps): JSX.Element;
108
+
109
+ declare interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className'> {
110
+ label?: string;
111
+ error?: string;
112
+ className?: string;
113
+ wrapperClassName?: string;
114
+ }
115
+
80
116
  export declare interface TabItem {
81
117
  title: string;
82
118
  content: ReactNode;
package/dist/minimalstuff-ui.js CHANGED
@@ -2,17 +2,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { Fragment, createElement, useCallback, useEffect, useId, useState } from "react";
3
3
  import { createPortal } from "react-dom";
4
4
  function r(e) {
5
- var g, _, v = "";
6
- if (typeof e == "string" || typeof e == "number") v += e;
5
+ var y, b, x = "";
6
+ if (typeof e == "string" || typeof e == "number") x += e;
7
7
  else if (typeof e == "object") if (Array.isArray(e)) {
8
- var y = e.length;
9
- for (g = 0; g < y; g++) e[g] && (_ = r(e[g])) && (v && (v += " "), v += _);
10
- } else for (_ in e) e[_] && (v && (v += " "), v += _);
11
- return v;
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;
12
12
  }
13
13
  function clsx() {
14
- for (var e, g, _ = 0, v = "", y = arguments.length; _ < y; _++) (e = arguments[_]) && (g = r(e)) && (v && (v += " "), v += g);
15
- return v;
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;
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,74 +27,128 @@ 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: g = "primary", size: _ = "md", children: v, className: y, fullWidth: b = !1, disabled: x, ...S }) => /* @__PURE__ */ jsx("button", {
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", {
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[g], SIZE_CLASSES$2[_], b && "w-full", y),
33
- disabled: x,
34
- ...S,
35
- children: v
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", {
36
+ className: "i-svg-spinners-3-dots-fade w-4 h-4",
37
+ "aria-hidden": "true"
38
+ }), S]
36
39
  });
37
40
  var CHARACTER_COUNT_STYLES = "text-xs text-gray-500 dark:text-gray-400 mt-1 text-right";
38
- function CharacterCount({ current: e, min: _, max: v, showMin: y, showMax: b }) {
39
- let x = _ !== void 0 && e <= _, S = v !== void 0 && e >= v, C = v !== void 0 && e > v;
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;
40
43
  return /* @__PURE__ */ jsxs("div", {
41
44
  className: CHARACTER_COUNT_STYLES,
42
45
  children: [
43
- y && _ !== void 0 && /* @__PURE__ */ jsxs("span", {
44
- className: x ? "text-amber-600 dark:text-amber-400" : "",
46
+ S && b !== void 0 && /* @__PURE__ */ jsxs("span", {
47
+ className: w ? "text-amber-600 dark:text-amber-400" : "",
45
48
  children: [
46
49
  e,
47
50
  "/",
48
- _,
51
+ b,
49
52
  " min"
50
53
  ]
51
54
  }),
52
- y && b && " · ",
53
- b && v !== void 0 && /* @__PURE__ */ jsxs("span", {
54
- className: C ? "text-red-600 dark:text-red-400" : S ? "text-amber-600 dark:text-amber-400" : "",
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
58
  children: [
56
59
  e,
57
60
  "/",
58
- v,
61
+ x,
59
62
  " max"
60
63
  ]
61
64
  }),
62
- !y && !b && v !== void 0 && /* @__PURE__ */ jsxs("span", {
63
- className: C ? "text-red-600 dark:text-red-400" : S ? "text-amber-600 dark:text-amber-400" : "",
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" : "",
64
67
  children: [
65
68
  e,
66
69
  "/",
67
- v
70
+ x
68
71
  ]
69
72
  }),
70
- !y && !b && _ !== void 0 && v === void 0 && /* @__PURE__ */ jsxs("span", {
71
- className: x ? "text-amber-600 dark:text-amber-400" : "",
73
+ !S && !C && b !== void 0 && x === void 0 && /* @__PURE__ */ jsxs("span", {
74
+ className: w ? "text-amber-600 dark:text-amber-400" : "",
72
75
  children: [
73
76
  e,
74
77
  " (min ",
75
- _,
78
+ b,
76
79
  ")"
77
80
  ]
78
81
  })
79
82
  ]
80
83
  });
81
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;
87
+ return /* @__PURE__ */ jsxs("div", {
88
+ className: clsx_default("w-full", C),
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"),
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"),
94
+ children: [/* @__PURE__ */ jsx("input", {
95
+ type: "checkbox",
96
+ id: j,
97
+ className: "sr-only",
98
+ checked: E,
99
+ defaultChecked: D,
100
+ onChange: (e) => {
101
+ P || N(e.target.checked), O?.(e);
102
+ },
103
+ "aria-invalid": !!x,
104
+ "aria-describedby": x ? `${j}-error` : void 0,
105
+ ...A
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),
108
+ "aria-hidden": !0,
109
+ children: F && /* @__PURE__ */ jsx("svg", {
110
+ className: "h-3 w-3 text-white",
111
+ viewBox: "0 0 12 12",
112
+ fill: "none",
113
+ stroke: "currentColor",
114
+ strokeWidth: "2.5",
115
+ strokeLinecap: "round",
116
+ strokeLinejoin: "round",
117
+ children: /* @__PURE__ */ jsx("polyline", { points: "2 6 5 9 10 3" })
118
+ })
119
+ })]
120
+ }), b && /* @__PURE__ */ jsxs("span", {
121
+ className: "text-sm font-medium text-gray-700 dark:text-gray-300 select-none",
122
+ children: [b, A.required && /* @__PURE__ */ jsx("span", {
123
+ className: "text-red-500 dark:text-red-400 ml-1",
124
+ children: "*"
125
+ })]
126
+ })]
127
+ }), x && /* @__PURE__ */ jsx("p", {
128
+ id: `${j}-error`,
129
+ className: "text-xs text-red-600 dark:text-red-400 mt-1 ml-8",
130
+ role: "alert",
131
+ children: x
132
+ })]
133
+ });
134
+ }
82
135
  const useClientOnly = () => {
83
- let [e, g] = useState(!1);
136
+ let [e, y] = useState(!1);
84
137
  return useEffect(() => {
85
138
  requestAnimationFrame(() => {
86
- g(!0);
139
+ y(!0);
87
140
  });
88
141
  }, []), e;
89
- }, withClientOnly = (g) => (_) => useClientOnly() ? /* @__PURE__ */ jsx(g, { ..._ }) : null;
90
- function ClientOnly({ children: e, fallback: g }) {
91
- return useClientOnly() ? createElement(Fragment, { children: e }) : g ?? null;
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;
92
145
  }
93
146
  var VARIANT_CLASSES = {
94
147
  default: "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800",
95
148
  ghost: "text-gray-600 dark:text-gray-400 hover:bg-white/50 dark:hover:bg-gray-800/50",
96
149
  danger: "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20",
97
- outline: "text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-600 hover:bg-white/50 dark:hover:bg-gray-800/50"
150
+ outline: "text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-600 hover:bg-white/50 dark:hover:bg-gray-800/50",
151
+ subtle: "text-gray-500 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-50/50 dark:hover:bg-gray-800/30"
98
152
  }, SIZE_CLASSES$1 = {
99
153
  sm: "p-1",
100
154
  md: "p-2",
@@ -104,54 +158,57 @@ var VARIANT_CLASSES = {
104
158
  md: "w-5 h-5",
105
159
  lg: "w-6 h-6"
106
160
  };
107
- const IconButton = ({ icon: _, "aria-label": v, variant: y = "default", size: b = "md", className: x, children: S, ref: C, ...w }) => /* @__PURE__ */ jsxs("button", {
108
- ref: C,
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,
109
163
  type: "button",
110
- "aria-label": v,
111
- 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[y], SIZE_CLASSES$1[b], x),
112
- ...w,
113
- children: [/* @__PURE__ */ jsx("div", { className: clsx_default(_, ICON_SIZE_CLASSES[b], S && "mr-1") }), S]
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]
114
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";
115
- function Input({ label: _, error: v, showCharCount: y = !1, minLength: b, maxLength: C, className: w, wrapperClassName: T, value: E, defaultValue: D, onChange: O, id: k = "input", ...j }) {
116
- let M = `${k}-${useId()}`, [N, P] = useState(typeof D == "string" ? D.length : 0), F = typeof E == "string" ? E.length : E === void 0 ? N : 0, I = y && (b !== void 0 || C !== void 0);
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);
117
171
  return /* @__PURE__ */ jsxs("div", {
118
- className: clsx_default("w-full", T),
172
+ className: clsx_default("w-full", O),
119
173
  children: [
120
- _ && /* @__PURE__ */ jsx("label", {
174
+ b && /* @__PURE__ */ jsxs("label", {
121
175
  className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
122
- htmlFor: M,
123
- children: _
176
+ htmlFor: F,
177
+ children: [b, P.required && /* @__PURE__ */ jsx("span", {
178
+ className: "text-red-500 dark:text-red-400 ml-1",
179
+ children: "*"
180
+ })]
124
181
  }),
125
182
  /* @__PURE__ */ jsx("input", {
126
- id: M,
127
- className: clsx_default(BASE_INPUT_STYLES, "px-3 py-2 text-sm", v && "border-red-500 dark:border-red-400 focus:ring-red-500", w),
128
- value: E,
129
- defaultValue: D,
130
- minLength: b,
131
- maxLength: C,
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,
132
189
  onChange: (e) => {
133
- E === void 0 && P(e.target.value.length), O?.(e);
190
+ k === void 0 && L(e.target.value.length), j?.(e);
134
191
  },
135
- ...j
192
+ ...P
136
193
  }),
137
- I && /* @__PURE__ */ jsx(CharacterCount, {
138
- current: F,
139
- min: b,
140
- max: C,
141
- showMin: b !== void 0,
142
- showMax: C !== void 0
194
+ z && /* @__PURE__ */ jsx(CharacterCount, {
195
+ current: R,
196
+ min: C,
197
+ max: E,
198
+ showMin: C !== void 0,
199
+ showMax: E !== void 0
143
200
  }),
144
- v && /* @__PURE__ */ jsx("p", {
201
+ x && /* @__PURE__ */ jsx("p", {
145
202
  className: "text-xs text-red-600 dark:text-red-400 mt-1",
146
- children: v
203
+ children: x
147
204
  })
148
205
  ]
149
206
  });
150
207
  }
151
208
  function useRunAfterAnimation(e) {
152
- return useCallback((g) => {
153
- let _ = setTimeout(g, e);
154
- return () => clearTimeout(_);
209
+ return useCallback((y) => {
210
+ let b = setTimeout(y, e);
211
+ return () => clearTimeout(b);
155
212
  }, [e]);
156
213
  }
157
214
  var ANIMATION_DURATION_MS = 200, SIZE_CLASSES = {
@@ -160,160 +217,243 @@ var ANIMATION_DURATION_MS = 200, SIZE_CLASSES = {
160
217
  lg: "max-w-2xl",
161
218
  xl: "max-w-4xl"
162
219
  };
163
- function Modal({ isOpen: _ = !1, onClose: v, title: y, children: x, size: w = "md", className: T }) {
164
- let [E, D] = useState(!1), [O, k] = useState(!1), [A, j] = useState(!1), M = useRunAfterAnimation(ANIMATION_DURATION_MS);
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);
165
222
  useEffect(() => {
166
- if (_ && !O) {
223
+ if (b && !j) {
167
224
  document.body.style.overflow = "hidden";
168
225
  let e = setTimeout(() => {
169
- k(!0), D(!1), requestAnimationFrame(() => {
170
- requestAnimationFrame(() => j(!0));
226
+ M(!0), A(!1), requestAnimationFrame(() => {
227
+ requestAnimationFrame(() => P(!0));
171
228
  });
172
229
  }, 0);
173
230
  return () => clearTimeout(e);
174
231
  }
175
- if (!_ && O) {
232
+ if (!b && j) {
176
233
  let e = setTimeout(() => {
177
- D(!0), j(!1);
178
- }, 0), g = M(() => {
179
- k(!1), D(!1), document.body.style.overflow = "";
234
+ A(!0), P(!1);
235
+ }, 0), y = F(() => {
236
+ M(!1), A(!1), document.body.style.overflow = "";
180
237
  });
181
238
  return () => {
182
- clearTimeout(e), g();
239
+ clearTimeout(e), y();
183
240
  };
184
241
  }
185
242
  }, [
186
- _,
187
- O,
188
- M
243
+ b,
244
+ j,
245
+ F
189
246
  ]), useEffect(() => {
190
- if (!_ || E) return;
247
+ if (!b || k) return;
191
248
  let e = (e) => {
192
- e.key === "Escape" && v?.();
249
+ e.key === "Escape" && x?.();
193
250
  };
194
251
  return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
195
252
  }, [
196
- _,
197
- E,
198
- v
253
+ b,
254
+ k,
255
+ x
199
256
  ]);
200
- let N = () => {
201
- E || v?.();
257
+ let I = () => {
258
+ k || x?.();
202
259
  };
203
- if (!O) return null;
204
- let P = A && !E;
260
+ if (!j) return null;
261
+ let L = N && !k;
205
262
  return createPortal(/* @__PURE__ */ jsxs("div", {
206
- className: clsx_default("fixed inset-0 z-50 h-fit flex justify-center p-4 mt-32", "transition-opacity duration-200", P ? "opacity-100" : "opacity-0"),
207
- onClick: N,
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,
208
265
  children: [/* @__PURE__ */ jsx("div", {
209
- className: clsx_default("fixed inset-0 bg-black/50 backdrop-blur-sm", "transition-opacity duration-200", P ? "opacity-100" : "opacity-0"),
266
+ className: clsx_default("fixed inset-0 bg-black/50 backdrop-blur-sm", "transition-opacity duration-200", L ? "opacity-100" : "opacity-0"),
210
267
  "aria-hidden": "true"
211
268
  }), /* @__PURE__ */ jsxs("div", {
212
- className: clsx_default("relative w-full", SIZE_CLASSES[w], "bg-white dark:bg-gray-800 rounded-lg shadow-xl", "max-h-[90vh] overflow-hidden flex flex-col", "transition-all duration-200", P ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 translate-y-2"),
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"),
213
270
  onClick: (e) => e.stopPropagation(),
214
- children: [y && /* @__PURE__ */ jsxs("div", {
271
+ children: [S && /* @__PURE__ */ jsxs("div", {
215
272
  className: "flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700",
216
273
  children: [/* @__PURE__ */ jsx("h2", {
217
274
  className: "text-lg font-semibold text-gray-900 dark:text-gray-100",
218
- children: y
275
+ children: S
219
276
  }), /* @__PURE__ */ jsx(IconButton, {
220
277
  icon: "i-mdi-close",
221
- onClick: v?.bind(null),
278
+ onClick: x?.bind(null),
222
279
  "aria-label": "Close",
223
280
  variant: "ghost",
224
281
  className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
225
282
  })]
226
283
  }), /* @__PURE__ */ jsx("div", {
227
- className: clsx_default("flex-1 overflow-y-auto px-6 py-4 text-gray-600 dark:text-gray-400", T),
228
- children: x
284
+ className: clsx_default("flex-1 overflow-y-auto px-6 py-4 text-gray-600 dark:text-gray-400", O),
285
+ children: w
229
286
  })]
230
287
  })]
231
288
  }), document.body);
232
289
  }
233
- function Tabs({ items: _, defaultIndex: v = 0, className: y, tabListClassName: b, panelClassName: x, onChange: C }) {
234
- let [w, T] = useState(v), E = (e) => {
235
- _[e]?.disabled || (T(e), C?.(e));
236
- }, D = _[w];
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()}`;
292
+ return /* @__PURE__ */ jsxs("div", {
293
+ className: clsx_default("w-full", E),
294
+ children: [
295
+ x && /* @__PURE__ */ jsxs("label", {
296
+ 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", {
299
+ className: "text-red-500 dark:text-red-400 ml-1",
300
+ children: "*"
301
+ })]
302
+ }),
303
+ /* @__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", {
313
+ value: "",
314
+ children: C
315
+ }), b.map((y) => /* @__PURE__ */ jsx("option", {
316
+ value: y.value,
317
+ children: y.label
318
+ }, y.value))]
319
+ }),
320
+ S && /* @__PURE__ */ jsx("p", {
321
+ id: `${M}-error`,
322
+ className: "text-xs text-red-600 dark:text-red-400 mt-1",
323
+ role: "alert",
324
+ children: S
325
+ })
326
+ ]
327
+ });
328
+ }
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;
331
+ return /* @__PURE__ */ jsxs("div", {
332
+ className: clsx_default("w-full", C),
333
+ 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"),
336
+ 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),
338
+ children: [/* @__PURE__ */ jsx("input", {
339
+ type: "checkbox",
340
+ role: "switch",
341
+ id: j,
342
+ className: "sr-only",
343
+ checked: E,
344
+ defaultChecked: D,
345
+ onChange: (e) => {
346
+ P || N(e.target.checked), O?.(e);
347
+ },
348
+ "aria-invalid": !!x,
349
+ "aria-describedby": x ? `${j}-error` : void 0,
350
+ ...A
351
+ }), /* @__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"),
353
+ "aria-hidden": !0
354
+ })]
355
+ }), b && /* @__PURE__ */ jsxs("span", {
356
+ className: "text-sm font-medium text-gray-700 dark:text-gray-300 select-none",
357
+ children: [b, A.required && /* @__PURE__ */ jsx("span", {
358
+ className: "text-red-500 dark:text-red-400 ml-1",
359
+ children: "*"
360
+ })]
361
+ })]
362
+ }), x && /* @__PURE__ */ jsx("p", {
363
+ id: `${j}-error`,
364
+ className: "text-xs text-red-600 dark:text-red-400 mt-1 ml-14",
365
+ role: "alert",
366
+ children: x
367
+ })]
368
+ });
369
+ }
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];
237
374
  return /* @__PURE__ */ jsxs("div", {
238
- className: clsx_default("w-full", y),
375
+ className: clsx_default("w-full", S),
239
376
  children: [/* @__PURE__ */ jsx("div", {
240
377
  role: "tablist",
241
- 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", b),
242
- children: _.map((_, v) => /* @__PURE__ */ jsxs("button", {
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", {
243
380
  role: "tab",
244
381
  type: "button",
245
- "aria-selected": w === v,
246
- "aria-disabled": _.disabled,
247
- disabled: _.disabled,
248
- onClick: () => E(v),
249
- className: clsx_default("flex items-center gap-2 px-4 py-2.5 rounded-md text-sm font-medium", w === v ? "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", _.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")),
250
- children: [_.icon && /* @__PURE__ */ jsx("span", { className: clsx_default("w-4 h-4 block shrink-0", _.icon, w === v ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400") }), _.title]
251
- }, v))
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))
252
389
  }), /* @__PURE__ */ jsx("div", {
253
390
  role: "tabpanel",
254
- 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", x),
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),
255
392
  children: /* @__PURE__ */ jsx("div", {
256
393
  className: "tabs-panel-inner",
257
- children: D?.content
258
- }, w)
394
+ children: A?.content
395
+ }, D)
259
396
  })]
260
397
  });
261
398
  }
262
- function Textarea({ label: _, error: v, showCharCount: y = !1, minLength: b, maxLength: C, className: w, wrapperClassName: T, value: E, defaultValue: D, onChange: O, id: k = "textarea", ...j }) {
263
- let M = `${k}-${useId()}`, [N, P] = useState(typeof D == "string" ? D.length : 0), F = typeof E == "string" ? E.length : E === void 0 ? N : 0, I = y && (b !== void 0 || C !== void 0);
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);
264
401
  return /* @__PURE__ */ jsxs("div", {
265
- className: clsx_default("w-full", T),
402
+ className: clsx_default("w-full", O),
266
403
  children: [
267
- _ && /* @__PURE__ */ jsx("label", {
404
+ b && /* @__PURE__ */ jsxs("label", {
268
405
  className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",
269
- htmlFor: M,
270
- children: _
406
+ htmlFor: F,
407
+ children: [b, P.required && /* @__PURE__ */ jsx("span", {
408
+ className: "text-red-500 dark:text-red-400 ml-1",
409
+ children: "*"
410
+ })]
271
411
  }),
272
412
  /* @__PURE__ */ jsx("textarea", {
273
- id: M,
274
- className: clsx_default(BASE_INPUT_STYLES, "px-3 py-2 text-sm min-h-[80px] resize-y", v && "border-red-500 dark:border-red-400 focus:ring-red-500", w),
275
- value: E,
276
- defaultValue: D,
277
- minLength: b,
278
- maxLength: C,
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,
279
419
  onChange: (e) => {
280
- E === void 0 && P(e.target.value.length), O?.(e);
420
+ k === void 0 && L(e.target.value.length), j?.(e);
281
421
  },
282
- ...j
422
+ ...P
283
423
  }),
284
- I && /* @__PURE__ */ jsx(CharacterCount, {
285
- current: F,
286
- min: b,
287
- max: C,
288
- showMin: b !== void 0,
289
- showMax: C !== void 0
424
+ z && /* @__PURE__ */ jsx(CharacterCount, {
425
+ current: R,
426
+ min: C,
427
+ max: E,
428
+ showMin: C !== void 0,
429
+ showMax: E !== void 0
290
430
  }),
291
- v && /* @__PURE__ */ jsx("p", {
431
+ x && /* @__PURE__ */ jsx("p", {
292
432
  className: "text-xs text-red-600 dark:text-red-400 mt-1",
293
- children: v
433
+ children: x
294
434
  })
295
435
  ]
296
436
  });
297
437
  }
298
438
  const useIsClient = () => {
299
- let [e, g] = useState(!1);
439
+ let [e, y] = useState(!1);
300
440
  return useEffect(() => {
301
441
  requestAnimationFrame(() => {
302
- g(!0);
442
+ y(!0);
303
443
  });
304
444
  }, []), e;
305
445
  };
306
446
  function applyTheme(e) {
307
- let g = document.documentElement;
308
- e === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? g.classList.add("dark") : g.classList.remove("dark") : e === "dark" ? g.classList.add("dark") : g.classList.remove("dark");
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");
309
449
  }
310
- function getIcon(g) {
450
+ function getIcon(y) {
311
451
  return /* @__PURE__ */ jsx("div", {
312
452
  className: clsx_default({
313
453
  light: "i-tabler-sun text-yellow-500",
314
454
  dark: "i-tabler-moon-stars text-gray-700 dark:text-yellow-500",
315
455
  system: "i-tabler-device-desktop text-blue-500"
316
- }[g], "w-5 h-5"),
456
+ }[y], "w-5 h-5"),
317
457
  style: {
318
458
  width: 20,
319
459
  height: 20
@@ -321,29 +461,29 @@ function getIcon(g) {
321
461
  });
322
462
  }
323
463
  function ThemeToggle() {
324
- let [g, _] = useState("system"), v = useIsClient();
464
+ let [y, b] = useState("system"), x = useIsClient();
325
465
  return useEffect(() => {
326
466
  let e = localStorage.getItem("theme");
327
467
  requestAnimationFrame(() => {
328
- e ? (_(e), applyTheme(e)) : (_("system"), applyTheme("system"));
468
+ e ? (b(e), applyTheme(e)) : (b("system"), applyTheme("system"));
329
469
  });
330
470
  }, []), useEffect(() => {
331
- let e = window.matchMedia("(prefers-color-scheme: dark)"), _ = () => {
332
- g === "system" && applyTheme("system");
471
+ let e = window.matchMedia("(prefers-color-scheme: dark)"), b = () => {
472
+ y === "system" && applyTheme("system");
333
473
  };
334
- return e.addEventListener("change", _), () => {
335
- e.removeEventListener("change", _);
474
+ return e.addEventListener("change", b), () => {
475
+ e.removeEventListener("change", b);
336
476
  };
337
- }, [g]), /* @__PURE__ */ jsx("button", {
477
+ }, [y]), /* @__PURE__ */ jsx("button", {
338
478
  onClick: useCallback(() => {
339
- _((e) => {
340
- let g;
341
- return g = e === "light" ? "dark" : e === "dark" ? "system" : "light", applyTheme(g), localStorage.setItem("theme", g), g;
479
+ b((e) => {
480
+ let y;
481
+ return y = e === "light" ? "dark" : e === "dark" ? "system" : "light", applyTheme(y), localStorage.setItem("theme", y), y;
342
482
  });
343
483
  }, []),
344
484
  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",
345
- "aria-label": `Thème actuel: ${g}`,
346
- children: v ? getIcon(g) : /* @__PURE__ */ jsx("div", {
485
+ "aria-label": `Thème actuel: ${y}`,
486
+ children: x ? getIcon(y) : /* @__PURE__ */ jsx("div", {
347
487
  className: "i-tabler-device-desktop w-5 h-5 text-gray-400",
348
488
  style: {
349
489
  width: "20px",
@@ -352,4 +492,4 @@ function ThemeToggle() {
352
492
  })
353
493
  });
354
494
  }
355
- export { BASE_INPUT_STYLES, Button, CharacterCount, ClientOnly, IconButton, Input, Modal, Tabs, Textarea, ThemeToggle, applyTheme, useClientOnly, useIsClient, useRunAfterAnimation, withClientOnly };
495
+ export { BASE_INPUT_STYLES, Button, CharacterCount, Checkbox, ClientOnly, IconButton, Input, Modal, Select, Switch, Tabs, Textarea, ThemeToggle, applyTheme, useClientOnly, useIsClient, useRunAfterAnimation, withClientOnly };
package/dist/uno-config.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { UserConfig } from 'unocss';
2
+
3
+ declare const _default: UserConfig<any>;
4
+ export default _default;
5
+
6
+ export { }
package/dist/uno-config.js ADDED
@@ -0,0 +1,9 @@
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 };
package/package.json CHANGED
@@ -1,16 +1,21 @@
1
1
  {
2
2
  "name": "@minimalstuff/ui",
3
- "version": "1.0.0-6",
3
+ "version": "1.1.0",
4
4
  "type": "module",
5
5
  "main": "./dist/minimalstuff-ui.js",
6
6
  "module": "./dist/minimalstuff-ui.js",
7
- "types": "./dist/index.d.ts",
7
+ "types": "./dist/minimalstuff-ui.d.ts",
8
8
  "exports": {
9
9
  ".": {
10
- "types": "./dist/index.d.ts",
10
+ "types": "./dist/minimalstuff-ui.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
+ },
14
19
  "./style.css": "./dist/minimalstuff-ui.css"
15
20
  },
16
21
  "files": [
@@ -39,58 +44,62 @@
39
44
  "#components/*": "./src/components/*.js",
40
45
  "#hooks/*": "./src/hooks/*.js",
41
46
  "#types/*": "./src/types/*.js",
42
- "#utils/*": "./src/utils/*.js"
47
+ "#utils/*": "./src/utils/*.js",
48
+ "#stores/*": "./src/stores/*.js"
43
49
  },
44
50
  "peerDependencies": {
45
51
  "react": "^18.0.0 || ^19.0.0",
46
- "react-dom": "^18.0.0 || ^19.0.0"
52
+ "react-dom": "^18.0.0 || ^19.0.0",
53
+ "unocss": "^66.0.0"
47
54
  },
48
55
  "dependencies": {
49
- "clsx": "^2.1.1"
56
+ "clsx": "^2.1.1",
57
+ "zustand": "^5.0.11"
50
58
  },
51
59
  "devDependencies": {
52
60
  "@chromatic-com/storybook": "^5.0.0",
53
- "@eslint/js": "^9.39.1",
54
- "@storybook/addon-a11y": "^10.2.3",
55
- "@storybook/addon-docs": "^10.2.3",
56
- "@storybook/addon-onboarding": "^10.2.3",
57
- "@storybook/addon-vitest": "^10.2.3",
58
- "@storybook/react-vite": "^10.2.3",
61
+ "@eslint/js": "^9.39.2",
62
+ "@storybook/addon-a11y": "^10.2.4",
63
+ "@storybook/addon-docs": "^10.2.4",
64
+ "@storybook/addon-onboarding": "^10.2.4",
65
+ "@storybook/addon-vitest": "^10.2.4",
66
+ "@storybook/react-vite": "^10.2.4",
59
67
  "@testing-library/jest-dom": "^6.9.1",
60
68
  "@testing-library/react": "^16.3.2",
61
69
  "@types/node": "^24.10.1",
62
- "@types/react": "^19.2.5",
70
+ "@types/react": "^19.2.10",
63
71
  "@types/react-dom": "^19.2.3",
64
72
  "@unocss/preset-icons": "^66.6.0",
65
73
  "@unocss/preset-web-fonts": "^66.6.0",
66
- "@vitejs/plugin-react-swc": "^4.2.2",
74
+ "@vitejs/plugin-react-swc": "^4.2.3",
67
75
  "@vitest/browser-playwright": "^4.0.18",
68
76
  "@vitest/coverage-v8": "^4.0.18",
69
- "eslint": "^9.39.1",
77
+ "eslint": "^9.39.2",
70
78
  "eslint-plugin-react-hooks": "^7.0.1",
71
- "eslint-plugin-react-refresh": "^0.4.24",
72
- "eslint-plugin-storybook": "^10.2.3",
79
+ "eslint-plugin-react-refresh": "^0.5.0",
80
+ "eslint-plugin-storybook": "^10.2.4",
73
81
  "globals": "^16.5.0",
74
82
  "happy-dom": "^20.4.0",
75
- "playwright": "^1.58.0",
83
+ "playwright": "^1.58.1",
76
84
  "prettier": "3.8.1",
77
- "react": "^19.2.0",
78
- "react-dom": "^19.2.0",
85
+ "react": "^19.2.4",
86
+ "react-dom": "^19.2.4",
79
87
  "release-it": "^19.2.4",
80
- "storybook": "^10.2.3",
88
+ "storybook": "^10.2.4",
81
89
  "typescript": "~5.9.3",
82
- "typescript-eslint": "^8.46.4",
90
+ "typescript-eslint": "^8.54.0",
83
91
  "unocss": "^66.6.0",
84
- "vite": "npm:rolldown-vite@7.2.5",
92
+ "vite": "npm:rolldown-vite@7.3.1",
85
93
  "vite-plugin-dts": "^4.5.4",
86
94
  "vitest": "^4.0.18"
87
95
  },
88
96
  "pnpm": {
89
97
  "overrides": {
90
- "vite": "npm:rolldown-vite@7.2.5"
98
+ "vite": "npm:rolldown-vite@7.3.1"
91
99
  },
92
100
  "onlyBuiltDependencies": [
93
- "@swc/core"
101
+ "@swc/core",
102
+ "esbuild"
94
103
  ]
95
104
  },
96
105
  "prettier": {