@artemdev04/design-system 0.9.0 โ†’ 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -11,6 +11,7 @@ A modern, accessible, and strongly typed React Design System built with **Vite**
11
11
  - ๐Ÿ“˜ **TypeScript** first approach with full type definitions.
12
12
  - โšก **Vite** powered build for blazing fast performance.
13
13
  - ๐ŸŽจ **Storybook** included for component isolation and documentation.
14
+ - ๐Ÿงช **Vitest** integrated through Storybook also with Playwright.
14
15
  - ๐ŸŒณ **Tree-shakable** exports (ESM & UMD support).
15
16
 
16
17
  ### ๐Ÿ“ฆ Installation
@@ -70,6 +71,23 @@ export default {
70
71
  };
71
72
  ```
72
73
 
74
+ **Tailwind v4.0** imports:
75
+
76
+ ```js
77
+ //Your index.css
78
+ @import "tailwindcss";
79
+
80
+ @import "@artemdev04/design-system/style.css";
81
+ @config "@artemdev04/design-system/tailwind.preset";
82
+ @source "@artemdev04/design-system/dist";
83
+
84
+ //The rest of your styles
85
+ ```
86
+
87
+ > [!CAUTION]
88
+ > Border styles are for now quite buggy - I didn't manage how to change the default border color
89
+ > in Tailwind v4.0 projects, so it will fallback to the gray and override any color.
90
+
73
91
  ### ๐Ÿ›  Development
74
92
 
75
93
  Clone the repository and install dependencies:
@@ -1 +1 @@
1
- *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}body{background-color:var(--app-background);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:var(--border-strong);border-radius:9999px;border:3px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background-color:var(--text-secondary);border:2px solid transparent}::-webkit-scrollbar-corner{background:transparent}.container{width:100%}@media(min-width:640px){.container{max-width:640px}}@media(min-width:768px){.container{max-width:768px}}@media(min-width:1024px){.container{max-width:1024px}}@media(min-width:1280px){.container{max-width:1280px}}@media(min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{top:0;right:0;bottom:0;left:0}.inset-y-0{top:0;bottom:0}.bottom-0{bottom:0}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.right-2{right:.5rem}.right-4{right:1rem}.top-0{top:0}.top-2{top:.5rem}.top-4{top:1rem}.z-10{z-index:10}.z-30{z-index:30}.z-50{z-index:50}.col-span-3{grid-column:span 3 / span 3}.m-0{margin:0}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-1{margin-bottom:.25rem}.mb-3{margin-bottom:.75rem}.mb-6{margin-bottom:1.5rem}.ml-1{margin-left:.25rem}.mr-0{margin-right:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-auto{margin-top:auto}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.size-5{width:1.25rem;height:1.25rem}.size-8{width:2rem;height:2rem}.h-3\/4{height:75%}.h-96{height:24rem}.h-\[1px\]{height:1px}.h-\[2px\]{height:2px}.h-\[90\%\]{height:90%}.h-full{height:100%}.h-screen{height:100vh}.min-h-0{min-height:0px}.w-\[400px\]{width:400px}.w-\[500px\]{width:500px}.w-\[85\%\]{width:85%}.w-\[90\%\]{width:90%}.w-full{width:100%}.max-w-\[400px\]{max-width:400px}.max-w-\[500px\]{max-width:500px}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-b-lg{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.rounded-l-lg{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.rounded-r-lg{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.border{border-width:1px}.border-0{border-width:0px}.border-2{border-width:2px}.border-y-2{border-top-width:2px;border-bottom-width:2px}.border-b-2{border-bottom-width:2px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-r-2{border-right-width:2px}.border-t{border-top-width:1px}.border-t-2{border-top-width:2px}.border-dashed{border-style:dashed}.border-border{border-color:var(--border-main)}.border-border-strong{border-color:var(--border-strong)}.border-error{border-color:var(--error-main)}.border-error-border{border-color:var(--error-border)}.border-info{border-color:var(--info-main)}.border-info-border{border-color:var(--info-border)}.border-slate-300{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity, 1))}.border-success-border{border-color:var(--success-border)}.border-text{border-color:var(--text-main)}.border-text-secondary{border-color:var(--text-secondary)}.border-transparent{border-color:transparent}.border-warning-border{border-color:var(--warning-border)}.bg-background{background-color:var(--app-background)}.bg-black\/70{background-color:#000000b3}.bg-border{background-color:var(--border-main)}.bg-border-strong{background-color:var(--border-strong)}.bg-border-subtle{background-color:var(--border-subtle)}.bg-disabled-surface{background-color:var(--disabled-surface)}.bg-error{background-color:var(--error-main)}.bg-error-surface{background-color:var(--error-surface)}.bg-info-surface{background-color:var(--info-surface)}.bg-input-background{background-color:var(--input-background)}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.bg-success{background-color:var(--success-main)}.bg-success-surface{background-color:var(--success-surface)}.bg-surface{background-color:var(--surface)}.bg-transparent{background-color:transparent}.bg-warning-surface{background-color:var(--warning-surface)}.p-0{padding:0}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-1{padding-bottom:.25rem}.pb-3{padding-bottom:.75rem}.pr-1{padding-right:.25rem}.pr-10{padding-right:2.5rem}.pr-12{padding-right:3rem}.pt-0{padding-top:0}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.font-sans{font-family:Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-none{line-height:1}.leading-normal{line-height:1.5}.tracking-tight{letter-spacing:-.025em}.tracking-widest{letter-spacing:.1em}.text-error-text{color:var(--error-text)}.text-info{color:var(--info-main)}.text-info-text{color:var(--info-text)}.text-on-primary{color:var(--on-primary)}.text-primary{color:var(--primary)}.text-success-text{color:var(--success-text)}.text-text{color:var(--text-main)}.text-text-secondary{color:var(--text-secondary)}.text-warning-text{color:var(--warning-text)}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-100{opacity:1}.opacity-50{opacity:.5}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-none{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[width\]{transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}:root{--app-background: #f8fafc;--surface: #ffffff;--surface-secondary: #f1f5f9;--primary: #0ea5e9;--primary-focus: #0284c7;--secondary: #6366f1;--secondary-focus: #4f46e5;--text-main: #0f172a;--text-secondary: #64748b;--border-main: #e2e8f0;--border-subtle: #f1f5f9;--border-strong: #cbd5e1;--input-background: #ffffff;--accent: #0d9488;--overlay: #0f172a;--on-primary: #ffffff;--on-secondary: #ffffff;--on-surface: #0f172a;--disabled-surface: #e2e8f0;--disabled-text: #94a3b8;--disabled-border: #cbd5e1;--info-surface: #f0f9ff;--info-border: #bae6fd;--info-text: #075985;--info-main: #0ea5e9;--success-surface: #ecfdf5;--success-border: #a7f3d0;--success-text: #065f46;--success-main: #10b981;--warning-surface: #fffbeb;--warning-border: #fde68a;--warning-text: #92400e;--warning-main: #f59e0b;--error-surface: #fef2f2;--error-border: #fecaca;--error-text: #991b1b;--error-main: #ef4444}.dark{--app-background: #0b1120;--surface: #1e293b;--surface-secondary: #334155;--primary: #38bdf8;--primary-focus: #7dd3fc;--secondary: #818cf8;--secondary-focus: #a5b4fc;--text-main: #f8fafc;--text-secondary: #94a3b8;--border-main: #334155;--border-subtle: #1e293b;--border-strong: #475569;--input-background: #0f172a;--accent: #5eead4;--overlay: #0f172a;--on-primary: #0f172a;--on-secondary: #0f172a;--on-surface: #f8fafc;--disabled-surface: #1e293b;--disabled-text: #475569;--disabled-border: #334155;--info-surface: #082f49;--info-border: #075985;--info-text: #bae6fd;--info-main: #38bdf8;--success-surface: #064e3b;--success-border: #065f46;--success-text: #a7f3d0;--success-main: #34d399;--warning-surface: #451a03;--warning-border: #92400e;--warning-text: #fde68a;--warning-main: #fbbf24;--error-surface: #450a0a;--error-border: #991b1b;--error-text: #fecaca;--error-main: #f87171}.file\:border-0::file-selector-button{border-width:0px}.file\:bg-transparent::file-selector-button{background-color:transparent}.file\:text-sm::file-selector-button{font-size:.875rem;line-height:1.25rem}.file\:font-medium::file-selector-button{font-weight:500}.placeholder\:text-text-secondary::-moz-placeholder{color:var(--text-secondary)}.placeholder\:text-text-secondary::placeholder{color:var(--text-secondary)}.focus-within\:outline-none:focus-within{outline:2px solid transparent;outline-offset:2px}.focus-within\:ring-2:focus-within{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-within\:ring-error:focus-within{--tw-ring-color: var(--error-main)}.focus-within\:ring-primary-focus:focus-within{--tw-ring-color: var(--primary-focus)}.focus-within\:ring-offset-1:focus-within{--tw-ring-offset-width: 1px}.focus-within\:ring-offset-background:focus-within{--tw-ring-offset-color: var(--app-background)}.hover\:scale-105:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-\[1\.10\]:hover{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-border:hover{background-color:var(--border-main)}.hover\:bg-info-surface:hover{background-color:var(--info-surface)}.hover\:bg-primary-focus:hover{background-color:var(--primary-focus)}.hover\:bg-red-600\/30:hover{background-color:#dc26264d}.hover\:bg-secondary-focus:hover{background-color:var(--secondary-focus)}.hover\:bg-transparent:hover{background-color:transparent}.hover\:text-primary:hover{color:var(--primary)}.hover\:text-text:hover{color:var(--text-main)}.hover\:underline:hover{text-decoration-line:underline}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.active\:scale-\[0\.95\]:active{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\:cursor-default:disabled{cursor:default}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-none:disabled{border-style:none}.disabled\:border-disabled-border:disabled{border-color:var(--disabled-border)}.disabled\:bg-disabled-surface:disabled{background-color:var(--disabled-surface)}.disabled\:bg-transparent:disabled{background-color:transparent}.disabled\:text-disabled-text:disabled{color:var(--disabled-text)}.disabled\:hover\:scale-100:hover:disabled{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\:active\:scale-100:active:disabled{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group\/sidebar[data-collapsed=true] .group-data-\[collapsed\=true\]\/sidebar\:block{display:block}.group\/sidebar[data-collapsed=true] .group-data-\[collapsed\=true\]\/sidebar\:hidden{display:none}.group\/sidebar[data-collapsed=true] .group-data-\[collapsed\=true\]\/sidebar\:justify-center{justify-content:center}.group\/sidebar[data-collapsed=true] .group-data-\[collapsed\=true\]\/sidebar\:opacity-0{opacity:0}.dark\:border-2:is(.dark *){border-width:2px}.dark\:border-error:is(.dark *){border-color:var(--error-main)}.dark\:bg-transparent:is(.dark *){background-color:transparent}.dark\:font-bold:is(.dark *){font-weight:700}.dark\:text-error:is(.dark *){color:var(--error-main)}.dark\:text-slate-400:is(.dark *){--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.dark\:disabled\:border-disabled-border:disabled:is(.dark *){border-color:var(--disabled-border)}.dark\:disabled\:text-disabled-text:disabled:is(.dark *){color:var(--disabled-text)}@media(min-width:640px){.sm\:w-auto{width:auto}.sm\:max-w-\[500px\]{max-width:500px}}@media(min-width:768px){.md\:h-1\/3{height:33.333333%}.md\:w-1\/2{width:50%}.md\:w-1\/3{width:33.333333%}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}}@property --angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}._animatedButton_10ydq_7{position:relative;isolation:isolate;background:transparent}._animatedButton_10ydq_7:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;z-index:-2;background:conic-gradient(from var(--angle),blue,red,blue);animation:3s _spin_10ydq_1 linear infinite;border-radius:inherit;filter:blur(.2rem)}._animatedButton_10ydq_7:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:var(--surface);border-radius:inherit}._animatedButton_10ydq_7:hover:after{background:var(--surface-secondary)}._animatedButton_10ydq_7:disabled:before,._animatedButton_10ydq_7:disabled:after{display:none}._animatedButton_10ydq_7:disabled{background:var(--disabled-surface);color:var(--disabled-text);border:2px solid var(--disabled-border, transparent);transform:none}@keyframes _spin_10ydq_1{0%{--angle: 0deg}to{--angle: 360deg}}
1
+ *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}body{background-color:var(--app-background);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:var(--border-strong);border-radius:9999px;border:3px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background-color:var(--text-secondary);border:2px solid transparent}::-webkit-scrollbar-corner{background:transparent}.container{width:100%}@media(min-width:640px){.container{max-width:640px}}@media(min-width:768px){.container{max-width:768px}}@media(min-width:1024px){.container{max-width:1024px}}@media(min-width:1280px){.container{max-width:1280px}}@media(min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{top:0;right:0;bottom:0;left:0}.inset-y-0{top:0;bottom:0}.bottom-0{bottom:0}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.right-2{right:.5rem}.right-4{right:1rem}.top-0{top:0}.top-2{top:.5rem}.top-4{top:1rem}.z-10{z-index:10}.z-30{z-index:30}.z-50{z-index:50}.col-span-3{grid-column:span 3 / span 3}.m-0{margin:0}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-1{margin-bottom:.25rem}.mb-3{margin-bottom:.75rem}.mb-6{margin-bottom:1.5rem}.ml-1{margin-left:.25rem}.mr-0{margin-right:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-auto{margin-top:auto}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.size-5{width:1.25rem;height:1.25rem}.size-8{width:2rem;height:2rem}.h-28{height:7rem}.h-3\/4{height:75%}.h-96{height:24rem}.h-\[1px\]{height:1px}.h-\[2px\]{height:2px}.h-fit{height:-moz-fit-content;height:fit-content}.h-full{height:100%}.h-screen{height:100vh}.max-h-\[95vh\]{max-height:95vh}.min-h-0{min-height:0px}.w-\[1500px\]{width:1500px}.w-\[400px\]{width:400px}.w-\[500px\]{width:500px}.w-\[85\%\]{width:85%}.w-\[90\%\]{width:90%}.w-full{width:100%}.max-w-\[400px\]{max-width:400px}.max-w-\[500px\]{max-width:500px}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-b-lg{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}.rounded-l-lg{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.rounded-r-lg{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.border{border-width:1px}.border-0{border-width:0px}.border-2{border-width:2px}.border-y-2{border-top-width:2px;border-bottom-width:2px}.border-b-2{border-bottom-width:2px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-r-2{border-right-width:2px}.border-t{border-top-width:1px}.border-t-2{border-top-width:2px}.border-dashed{border-style:dashed}.border-border{border-color:var(--border-main)}.border-border-strong{border-color:var(--border-strong)}.border-error{border-color:var(--error-main)}.border-error-border{border-color:var(--error-border)}.border-info{border-color:var(--info-main)}.border-info-border{border-color:var(--info-border)}.border-slate-300{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity, 1))}.border-success-border{border-color:var(--success-border)}.border-text{border-color:var(--text-main)}.border-text-secondary{border-color:var(--text-secondary)}.border-transparent{border-color:transparent}.border-warning-border{border-color:var(--warning-border)}.bg-background{background-color:var(--app-background)}.bg-black\/70{background-color:#000000b3}.bg-border{background-color:var(--border-main)}.bg-border-strong{background-color:var(--border-strong)}.bg-border-subtle{background-color:var(--border-subtle)}.bg-disabled-surface{background-color:var(--disabled-surface)}.bg-error{background-color:var(--error-main)}.bg-error-surface{background-color:var(--error-surface)}.bg-info-surface{background-color:var(--info-surface)}.bg-input-background{background-color:var(--input-background)}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.bg-success{background-color:var(--success-main)}.bg-success-surface{background-color:var(--success-surface)}.bg-surface{background-color:var(--surface)}.bg-transparent{background-color:transparent}.bg-warning-surface{background-color:var(--warning-surface)}.p-0{padding:0}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-1{padding-bottom:.25rem}.pb-3{padding-bottom:.75rem}.pr-1{padding-right:.25rem}.pr-10{padding-right:2.5rem}.pr-12{padding-right:3rem}.pt-0{padding-top:0}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.font-sans{font-family:Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-none{line-height:1}.leading-normal{line-height:1.5}.tracking-tight{letter-spacing:-.025em}.tracking-widest{letter-spacing:.1em}.text-error-text{color:var(--error-text)}.text-info{color:var(--info-main)}.text-info-text{color:var(--info-text)}.text-on-primary{color:var(--on-primary)}.text-primary{color:var(--primary)}.text-success-text{color:var(--success-text)}.text-text{color:var(--text-main)}.text-text-secondary{color:var(--text-secondary)}.text-warning-text{color:var(--warning-text)}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-100{opacity:1}.opacity-50{opacity:.5}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-none{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[width\]{transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}:root{--app-background: #f8fafc;--surface: #ffffff;--surface-secondary: #f1f5f9;--primary: #0ea5e9;--primary-focus: #0284c7;--secondary: #6366f1;--secondary-focus: #4f46e5;--text-main: #0f172a;--text-secondary: #64748b;--border-main: #e2e8f0;--border-subtle: #f1f5f9;--border-strong: #cbd5e1;--input-background: #ffffff;--accent: #0d9488;--overlay: #0f172a;--on-primary: #ffffff;--on-secondary: #ffffff;--on-surface: #0f172a;--disabled-surface: #e2e8f0;--disabled-text: #94a3b8;--disabled-border: #cbd5e1;--info-surface: #f0f9ff;--info-border: #bae6fd;--info-text: #075985;--info-main: #0ea5e9;--success-surface: #ecfdf5;--success-border: #a7f3d0;--success-text: #065f46;--success-main: #10b981;--warning-surface: #fffbeb;--warning-border: #fde68a;--warning-text: #92400e;--warning-main: #f59e0b;--error-surface: #fef2f2;--error-border: #fecaca;--error-text: #991b1b;--error-main: #ef4444}.dark{--app-background: #0b1120;--surface: #1e293b;--surface-secondary: #334155;--primary: #38bdf8;--primary-focus: #7dd3fc;--secondary: #818cf8;--secondary-focus: #a5b4fc;--text-main: #f8fafc;--text-secondary: #94a3b8;--border-main: #334155;--border-subtle: #1e293b;--border-strong: #475569;--input-background: #0f172a;--accent: #5eead4;--overlay: #0f172a;--on-primary: #0f172a;--on-secondary: #0f172a;--on-surface: #f8fafc;--disabled-surface: #1e293b;--disabled-text: #475569;--disabled-border: #334155;--info-surface: #082f49;--info-border: #075985;--info-text: #bae6fd;--info-main: #38bdf8;--success-surface: #064e3b;--success-border: #065f46;--success-text: #a7f3d0;--success-main: #34d399;--warning-surface: #451a03;--warning-border: #92400e;--warning-text: #fde68a;--warning-main: #fbbf24;--error-surface: #450a0a;--error-border: #991b1b;--error-text: #fecaca;--error-main: #f87171}.file\:border-0::file-selector-button{border-width:0px}.file\:bg-transparent::file-selector-button{background-color:transparent}.file\:text-sm::file-selector-button{font-size:.875rem;line-height:1.25rem}.file\:font-medium::file-selector-button{font-weight:500}.placeholder\:text-text-secondary::-moz-placeholder{color:var(--text-secondary)}.placeholder\:text-text-secondary::placeholder{color:var(--text-secondary)}.focus-within\:outline-none:focus-within{outline:2px solid transparent;outline-offset:2px}.focus-within\:ring-2:focus-within{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-within\:ring-error:focus-within{--tw-ring-color: var(--error-main)}.focus-within\:ring-primary-focus:focus-within{--tw-ring-color: var(--primary-focus)}.focus-within\:ring-offset-1:focus-within{--tw-ring-offset-width: 1px}.focus-within\:ring-offset-background:focus-within{--tw-ring-offset-color: var(--app-background)}.hover\:scale-105:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-\[1\.10\]:hover{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-border:hover{background-color:var(--border-main)}.hover\:bg-info-surface:hover{background-color:var(--info-surface)}.hover\:bg-primary-focus:hover{background-color:var(--primary-focus)}.hover\:bg-red-600\/30:hover{background-color:#dc26264d}.hover\:bg-secondary-focus:hover{background-color:var(--secondary-focus)}.hover\:bg-transparent:hover{background-color:transparent}.hover\:text-primary:hover{color:var(--primary)}.hover\:text-text:hover{color:var(--text-main)}.hover\:underline:hover{text-decoration-line:underline}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.active\:scale-\[0\.95\]:active{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\:cursor-default:disabled{cursor:default}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-none:disabled{border-style:none}.disabled\:border-disabled-border:disabled{border-color:var(--disabled-border)}.disabled\:bg-disabled-surface:disabled{background-color:var(--disabled-surface)}.disabled\:bg-transparent:disabled{background-color:transparent}.disabled\:text-disabled-text:disabled{color:var(--disabled-text)}.disabled\:hover\:scale-100:hover:disabled{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\:active\:scale-100:active:disabled{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group\/sidebar[data-collapsed=true] .group-data-\[collapsed\=true\]\/sidebar\:block{display:block}.group\/sidebar[data-collapsed=true] .group-data-\[collapsed\=true\]\/sidebar\:hidden{display:none}.group\/sidebar[data-collapsed=true] .group-data-\[collapsed\=true\]\/sidebar\:justify-center{justify-content:center}.group\/sidebar[data-collapsed=true] .group-data-\[collapsed\=true\]\/sidebar\:opacity-0{opacity:0}.dark\:border-2:is(.dark *){border-width:2px}.dark\:border-error:is(.dark *){border-color:var(--error-main)}.dark\:bg-transparent:is(.dark *){background-color:transparent}.dark\:font-bold:is(.dark *){font-weight:700}.dark\:text-error:is(.dark *){color:var(--error-main)}.dark\:text-slate-400:is(.dark *){--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.dark\:disabled\:border-disabled-border:disabled:is(.dark *){border-color:var(--disabled-border)}.dark\:disabled\:text-disabled-text:disabled:is(.dark *){color:var(--disabled-text)}@media(min-width:640px){.sm\:w-auto{width:auto}.sm\:max-w-\[500px\]{max-width:500px}}@media(min-width:768px){.md\:h-1\/3{height:33.333333%}.md\:h-3\/4{height:75%}.md\:w-1\/2{width:50%}.md\:w-1\/3{width:33.333333%}.md\:w-2\/3{width:66.666667%}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}}@property --angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}._animatedButton_10ydq_7{position:relative;isolation:isolate;background:transparent}._animatedButton_10ydq_7:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;z-index:-2;background:conic-gradient(from var(--angle),blue,red,blue);animation:3s _spin_10ydq_1 linear infinite;border-radius:inherit;filter:blur(.2rem)}._animatedButton_10ydq_7:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:var(--surface);border-radius:inherit}._animatedButton_10ydq_7:hover:after{background:var(--surface-secondary)}._animatedButton_10ydq_7:disabled:before,._animatedButton_10ydq_7:disabled:after{display:none}._animatedButton_10ydq_7:disabled{background:var(--disabled-surface);color:var(--disabled-text);border:2px solid var(--disabled-border, transparent);transform:none}@keyframes _spin_10ydq_1{0%{--angle: 0deg}to{--angle: 360deg}}
package/dist/index.d.ts CHANGED
@@ -1,26 +1,24 @@
1
1
  import { ClassProp } from 'class-variance-authority/types';
2
2
  import { default as default_2 } from 'react';
3
- import { ForwardRefExoticComponent } from 'react';
4
3
  import { HTMLMotionProps } from 'framer-motion';
5
4
  import { JSX } from 'react/jsx-runtime';
6
5
  import * as React_2 from 'react';
7
6
  import { ReactPortal } from 'react';
8
- import { RefAttributes } from 'react';
9
7
  import { VariantProps } from 'class-variance-authority';
10
8
 
11
- export declare function Alert({ className, ref, variant, children, icon, showIcon, ...props }: AlertProps): JSX.Element;
9
+ export declare function Alert({ children, className, icon, ref, showIcon, variant, ...props }: AlertProps): JSX.Element;
12
10
 
13
- export declare function AlertMessage({ className, children, ...props }: AlertMessageProps): JSX.Element;
11
+ export declare function AlertMessage({ children, className, ...props }: AlertMessageProps): JSX.Element;
14
12
 
15
13
  export declare interface AlertMessageProps extends React.ComponentProps<"div"> {
16
- /**
17
- * Additional classes for styling the message.
18
- */
19
- className?: string;
20
14
  /**
21
15
  * Content of the description.
22
16
  */
23
17
  children?: React.ReactNode;
18
+ /**
19
+ * Additional classes for styling the message.
20
+ */
21
+ className?: string;
24
22
  }
25
23
 
26
24
  export declare interface AlertProps extends React.ComponentProps<"div">, AlertVariantsProps {
@@ -28,26 +26,26 @@ export declare interface AlertProps extends React.ComponentProps<"div">, AlertVa
28
26
  showIcon?: boolean;
29
27
  }
30
28
 
31
- export declare function AlertTitle({ className, children, ...props }: AlertTitleProps): JSX.Element;
29
+ export declare function AlertTitle({ children, className, ...props }: AlertTitleProps): JSX.Element;
32
30
 
33
31
  export declare interface AlertTitleProps extends React.ComponentProps<"h5"> {
34
- /**
35
- * Additional classes for styling the title.
36
- */
37
- className?: string;
38
32
  /**
39
33
  * Content of the description.
40
34
  */
41
35
  children?: React.ReactNode;
36
+ /**
37
+ * Additional classes for styling the title.
38
+ */
39
+ className?: string;
42
40
  }
43
41
 
44
42
  declare const alertVariants: (props?: ({
45
- variant?: "info" | "success" | "error" | "warning" | "noData" | null | undefined;
43
+ variant?: "error" | "info" | "noData" | "success" | "warning" | null | undefined;
46
44
  } & ClassProp) | undefined) => string;
47
45
 
48
46
  declare type AlertVariantsProps = VariantProps<typeof alertVariants>;
49
47
 
50
- export declare const Button: ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & RefAttributes<HTMLButtonElement>>;
48
+ export declare function Button({ children, className, ref, variant, ...props }: ButtonProps): JSX.Element;
51
49
 
52
50
  export declare interface ButtonProps extends React.ComponentProps<"button">, ButtonVariants {
53
51
  }
@@ -55,58 +53,58 @@ export declare interface ButtonProps extends React.ComponentProps<"button">, But
55
53
  export declare type ButtonVariants = VariantProps<typeof buttonVariants>;
56
54
 
57
55
  declare const buttonVariants: (props?: ({
58
- variant?: "primary" | "secondary" | "danger" | "confirm" | "info" | "ghost" | "animated" | null | undefined;
56
+ variant?: "info" | "primary" | "animated" | "confirm" | "danger" | "ghost" | "secondary" | null | undefined;
59
57
  } & ClassProp) | undefined) => string;
60
58
 
61
- export declare const Card: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;
59
+ export declare function Card({ children, className, ref, ...props }: React_2.ComponentProps<"div">): JSX.Element;
62
60
 
63
- export declare const CardContent: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;
61
+ export declare function CardContent({ children, className, ref, ...props }: React_2.ComponentProps<"div">): JSX.Element;
64
62
 
65
- export declare const CardDescription: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLParagraphElement> & React_2.RefAttributes<HTMLParagraphElement>>;
63
+ export declare function CardDescription({ children, className, ref, ...props }: React_2.ComponentProps<"p">): JSX.Element;
66
64
 
67
- export declare const CardFooter: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;
65
+ export declare function CardFooter({ children, className, ref, ...props }: React_2.ComponentProps<"div">): JSX.Element;
68
66
 
69
- export declare const CardHeader: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;
67
+ export declare function CardHeader({ children, className, ref, ...props }: React_2.ComponentProps<"div">): JSX.Element;
70
68
 
71
- export declare const CardTitle: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLHeadingElement> & React_2.RefAttributes<HTMLParagraphElement>>;
69
+ export declare function CardTitle({ children, className, ref, ...props }: React_2.ComponentProps<"h3">): JSX.Element;
72
70
 
73
- export declare function Dialog({ children, open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, }: DialogProps): JSX.Element;
71
+ export declare function Dialog({ children, defaultOpen, onOpenChange: controlledOnOpenChange, open: controlledOpen, }: DialogProps): JSX.Element;
74
72
 
75
- export declare function DialogBody({ className, children, ...props }: React.ComponentProps<"div">): JSX.Element;
73
+ export declare function DialogBody({ children, className, ...props }: React.ComponentProps<"div">): JSX.Element;
76
74
 
77
- export declare function DialogButtons({ className, children, ref, ...props }: React.ComponentProps<"div">): JSX.Element;
75
+ export declare function DialogButtons({ children, className, ref, ...props }: React.ComponentProps<"div">): JSX.Element;
78
76
 
79
- export declare function DialogContent({ className, ref, children, position, closeButton, ...props }: DialogContentProps): ReactPortal;
77
+ export declare function DialogContent({ children, className, closeButton, position, ref, ...props }: DialogContentProps): ReactPortal;
80
78
 
81
79
  export declare interface DialogContentProps extends Omit<HTMLMotionProps<"div">, "children">, DialogContentVariantsType {
82
- closeButton?: boolean;
83
80
  children?: React.ReactNode;
81
+ closeButton?: boolean;
84
82
  }
85
83
 
86
84
  declare const dialogContentVariants: (props?: ({
87
- position?: "center" | "left" | "right" | "bottom" | "top" | null | undefined;
85
+ position?: "center" | "bottom" | "left" | "right" | "top" | null | undefined;
88
86
  } & ClassProp) | undefined) => string;
89
87
 
90
88
  export declare type DialogContentVariantsType = VariantProps<typeof dialogContentVariants>;
91
89
 
92
- export declare function DialogFooter({ className, children, ref, text, ...props }: DialogFooterProps): JSX.Element;
90
+ export declare function DialogFooter({ children, className, ref, text, ...props }: DialogFooterProps): JSX.Element;
93
91
 
94
92
  export declare interface DialogFooterProps extends React.ComponentProps<"div"> {
95
93
  text?: string;
96
94
  }
97
95
 
98
- export declare function DialogHeader({ className, children, ref, title, subtitle, ...props }: DialogHeaderProps): JSX.Element;
96
+ export declare function DialogHeader({ children, className, ref, subtitle, title, ...props }: DialogHeaderProps): JSX.Element;
99
97
 
100
98
  export declare interface DialogHeaderProps extends React.ComponentProps<"div"> {
101
- title?: string;
102
99
  subtitle?: string;
100
+ title?: string;
103
101
  }
104
102
 
105
103
  export declare interface DialogProps {
106
104
  children: React.ReactNode;
107
- open?: boolean;
108
- onOpenChange?: (open: boolean) => void;
109
105
  defaultOpen?: boolean;
106
+ onOpenChange?: (open: boolean) => void;
107
+ open?: boolean;
110
108
  }
111
109
 
112
110
  export declare function DialogTrigger({ children, ref, variant, ...props }: DialogTriggerProps): JSX.Element;
@@ -127,101 +125,101 @@ export declare interface DotsProps extends React.HTMLAttributes<HTMLDivElement>
127
125
  size?: number;
128
126
  }
129
127
 
130
- export declare function Input({ className, icon, errorText, suffix, disabled, ref, id, ...props }: InputProps): JSX.Element;
128
+ export declare function Input({ className, disabled, errorText, icon, id, ref, suffix, ...props }: InputProps): JSX.Element;
131
129
 
132
130
  export declare interface InputProps extends React.ComponentProps<"input"> {
133
- icon?: React.ReactNode;
134
131
  errorText?: string;
132
+ icon?: React.ReactNode;
135
133
  suffix?: React.ReactNode;
136
134
  }
137
135
 
138
136
  export declare function Orbital({ className, primaryColor, primaryDuration, secondaryColor, secondaryDuration, size, ...props }: OrbitalProps): JSX.Element;
139
137
 
140
138
  export declare interface OrbitalProps extends React.HTMLAttributes<HTMLDivElement> {
141
- size?: number;
142
139
  primaryColor?: string;
143
140
  primaryDuration?: number;
144
141
  secondaryColor?: string;
145
142
  secondaryDuration?: number;
143
+ size?: number;
146
144
  }
147
145
 
148
- export declare function ScreenLoader({ className, barHeight, barWidth, color, duration, barCount, itemStagger, ...props }: ScreenLoaderProps): JSX.Element;
146
+ export declare function ScreenLoader({ barCount, barHeight, barWidth, className, color, duration, itemStagger, ...props }: ScreenLoaderProps): JSX.Element;
149
147
 
150
148
  export declare interface ScreenLoaderProps extends React.HTMLAttributes<HTMLDivElement> {
149
+ barCount?: number;
151
150
  barHeight: number;
152
151
  barWidth?: number;
153
152
  color?: string;
154
153
  duration?: number;
155
- barCount?: number;
156
154
  itemStagger?: number;
157
155
  }
158
156
 
159
- export declare function Sidebar({ children, collapsed: controlledCollapsed, onCollapsedChange: controlledOnCollapsedChange, defaultCollapsed, mobileOpen: controlledMobileOpen, onMobileOpenChange: controlledOnMobileOpenChange, }: SidebarProps): JSX.Element;
157
+ export declare function Sidebar({ children, collapsed: controlledCollapsed, defaultCollapsed, mobileOpen: controlledMobileOpen, onCollapsedChange: controlledOnCollapsedChange, onMobileOpenChange: controlledOnMobileOpenChange, }: SidebarProps): JSX.Element;
160
158
 
161
- export declare function SidebarBody({ className, ref, children, ...props }: default_2.ComponentProps<"div">): JSX.Element;
159
+ export declare function SidebarBody({ children, className, ref, ...props }: default_2.ComponentProps<"div">): JSX.Element;
162
160
 
163
- export declare function SidebarContent({ children, className, side, width, collapsedWidth, dialogProps, ref, style, ...props }: SidebarContentProps): JSX.Element;
161
+ export declare function SidebarContent({ children, className, collapsedWidth, dialogProps, ref, side, style, width, ...props }: SidebarContentProps): JSX.Element;
164
162
 
165
- declare interface SidebarContentProps extends default_2.ComponentProps<"aside"> {
166
- side?: "left" | "right";
167
- width?: string;
163
+ export declare interface SidebarContentProps extends default_2.ComponentProps<"aside"> {
168
164
  collapsedWidth?: string;
169
165
  dialogProps?: Partial<default_2.ComponentProps<typeof DialogContent>>;
166
+ side?: "left" | "right";
167
+ width?: string;
170
168
  }
171
169
 
172
- export declare function SidebarFooter({ className, children, ...props }: default_2.ComponentProps<"div">): JSX.Element;
170
+ export declare function SidebarFooter({ children, className, ...props }: default_2.ComponentProps<"div">): JSX.Element;
173
171
 
174
- export declare function SidebarHeader({ className, children, ...props }: default_2.ComponentProps<"div">): JSX.Element;
172
+ export declare function SidebarHeader({ children, className, ...props }: default_2.ComponentProps<"div">): JSX.Element;
175
173
 
176
- export declare function SidebarItem({ className, children, categoryTitle, icon, ...props }: SidebarItemProps): JSX.Element;
174
+ export declare function SidebarItem({ categoryTitle, children, className, icon, ...props }: SidebarItemProps): JSX.Element;
177
175
 
178
176
  declare interface SidebarItemProps extends default_2.ComponentProps<"div"> {
179
- icon?: default_2.ReactNode;
180
177
  categoryTitle?: boolean;
178
+ icon?: default_2.ReactNode;
181
179
  }
182
180
 
183
181
  export declare interface SidebarProps {
184
182
  children: default_2.ReactNode;
185
183
  collapsed?: boolean;
186
- onCollapsedChange?: (collapsed: boolean) => void;
187
184
  defaultCollapsed?: boolean;
188
185
  mobileOpen?: boolean;
186
+ onCollapsedChange?: (collapsed: boolean) => void;
189
187
  onMobileOpenChange?: (open: boolean) => void;
190
188
  }
191
189
 
192
- export declare function SidebarTrigger({ className, children, ...props }: default_2.ComponentProps<"button">): JSX.Element;
190
+ export declare function SidebarTrigger({ children, className, ...props }: default_2.ComponentProps<"button">): JSX.Element;
193
191
 
194
- export declare function Spinner({ className, size, duration, primaryColor, secondaryColor, rotationsCount, thickness, ease, ...props }: SpinnerProps): JSX.Element;
192
+ export declare function Spinner({ className, duration, ease, primaryColor, rotationsCount, secondaryColor, size, thickness, ...props }: SpinnerProps): JSX.Element;
195
193
 
196
194
  export declare interface SpinnerProps extends default_2.HTMLAttributes<HTMLDivElement> {
197
- size?: number;
198
195
  duration?: number;
196
+ ease?: "linear" | "easeInOut";
199
197
  primaryColor?: string;
200
- secondaryColor?: string;
201
198
  rotationsCount?: number;
199
+ secondaryColor?: string;
200
+ size?: number;
202
201
  thickness?: number;
203
- ease?: "linear" | "easeInOut";
204
202
  }
205
203
 
206
- declare const Text_2: default_2.ForwardRefExoticComponent<Omit<TextProps<default_2.ElementType<any, keyof default_2.JSX.IntrinsicElements>>, "ref"> & default_2.RefAttributes<any>>;
204
+ declare function Text_2<C extends default_2.ElementType = "p">({ align, as, children, className, color, italic, ref, size, underline, weight, ...props }: TextProps<C>): JSX.Element;
207
205
  export { Text_2 as Text }
208
206
 
209
207
  export declare type TextProps<C extends default_2.ElementType> = {
210
208
  as?: C;
211
209
  className?: string;
212
210
  children?: default_2.ReactNode;
213
- } & TextVariantsProps & //extends props of the CVA Variants, so developer cant use unsupported variants
214
- default_2.ComponentPropsWithoutRef<C>;
211
+ ref?: default_2.ComponentPropsWithRef<C>["ref"];
212
+ } & TextVariantsProps & default_2.ComponentPropsWithoutRef<C>;
215
213
 
216
214
  declare const textVariants: (props?: ({
217
- size?: "base" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | null | undefined;
218
- weight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
219
- color?: "info" | "default" | "muted" | "success" | "error" | "warning" | null | undefined;
220
215
  align?: "center" | "left" | "right" | "justify" | null | undefined;
216
+ color?: "error" | "info" | "success" | "warning" | "default" | "muted" | null | undefined;
221
217
  italic?: boolean | null | undefined;
222
- unfrtline?: boolean | "ture" | null | undefined;
218
+ size?: "base" | "2xl" | "3xl" | "4xl" | "lg" | "sm" | "xl" | "xs" | null | undefined;
219
+ underline?: boolean | null | undefined;
220
+ weight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
223
221
  } & ClassProp) | undefined) => string;
224
222
 
225
- declare type TextVariantsProps = VariantProps<typeof textVariants>;
223
+ export declare type TextVariantsProps = VariantProps<typeof textVariants>;
226
224
 
227
225
  export { }