@spear-ai/spectral 0.1.1 → 1.0.0

package/dist/index.css

@@ -0,0 +1,189 @@
+@import "tailwindcss";
+
+/* src/components/Card/main.css */
+.card-loading-overlay {
+  backdrop-filter: blur(2px);
+}
+
+/* node_modules/.pnpm/tw-animate-css@1.3.8/node_modules/tw-animate-css/dist/tw-animate.css */
+@property --tw-animation-delay { syntax:"*";inherits:false;initial-value:0s }
+@property --tw-animation-direction { syntax:"*";inherits:false;initial-value:normal }
+@property --tw-animation-duration { syntax:"*";inherits:false }
+@property --tw-animation-fill-mode { syntax:"*";inherits:false;initial-value:none }
+@property --tw-animation-iteration-count { syntax:"*";inherits:false;initial-value:1 }
+@property --tw-enter-blur { syntax:"*";inherits:false;initial-value:0 }
+@property --tw-enter-opacity { syntax:"*";inherits:false;initial-value:1 }
+@property --tw-enter-rotate { syntax:"*";inherits:false;initial-value:0 }
+@property --tw-enter-scale { syntax:"*";inherits:false;initial-value:1 }
+@property --tw-enter-translate-x { syntax:"*";inherits:false;initial-value:0 }
+@property --tw-enter-translate-y { syntax:"*";inherits:false;initial-value:0 }
+@property --tw-exit-blur { syntax:"*";inherits:false;initial-value:0 }
+@property --tw-exit-opacity { syntax:"*";inherits:false;initial-value:1 }
+@property --tw-exit-rotate { syntax:"*";inherits:false;initial-value:0 }
+@property --tw-exit-scale { syntax:"*";inherits:false;initial-value:1 }
+@property --tw-exit-translate-x { syntax:"*";inherits:false;initial-value:0 }
+@property --tw-exit-translate-y { syntax:"*";inherits:false;initial-value:0 }
+@theme inline { --animation-delay-0: 0s; --animation-delay-75: 75ms; --animation-delay-100: .1s; --animation-delay-150: .15s; --animation-delay-200: .2s; --animation-delay-300: .3s; --animation-delay-500: .5s; --animation-delay-700: .7s; --animation-delay-1000: 1s; --animation-repeat-0: 0; --animation-repeat-1: 1; --animation-repeat-infinite: infinite; --animation-direction-normal: normal; --animation-direction-reverse: reverse; --animation-direction-alternate: alternate; --animation-direction-alternate-reverse: alternate-reverse; --animation-fill-mode-none: none; --animation-fill-mode-forwards: forwards; --animation-fill-mode-backwards: backwards; --animation-fill-mode-both: both; --percentage-0: 0; --percentage-5: .05; --percentage-10: .1; --percentage-15: .15; --percentage-20: .2; --percentage-25: .25; --percentage-30: .3; --percentage-35: .35; --percentage-40: .4; --percentage-45: .45; --percentage-50: .5; --percentage-55: .55; --percentage-60: .6; --percentage-65: .65; --percentage-70: .7; --percentage-75: .75; --percentage-80: .8; --percentage-85: .85; --percentage-90: .9; --percentage-95: .95; --percentage-100: 1; --percentage-translate-full: 1; --animate-in: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-out: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); @keyframes enter { from { opacity: var(--tw-enter-opacity,1); transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0)); filter: blur(var(--tw-enter-blur,0)); }}@keyframes exit { to { opacity: var(--tw-exit-opacity,1); transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0)); filter: blur(var(--tw-exit-blur,0)); }}--animate-accordion-down: accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-accordion-up: accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-collapsible-down: collapsible-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-collapsible-up: collapsible-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); @keyframes accordion-down { from { height: 0; }to { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); }}@keyframes accordion-up { from { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); }to { height: 0; }}@keyframes collapsible-down { from { height: 0; }to { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); }}@keyframes collapsible-up { from { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); }to { height: 0; }}--animate-caret-blink: caret-blink 1.25s ease-out infinite; @keyframes caret-blink { 0%,70%,100% { opacity: 1; }20%,50% { opacity: 0; }} }
+@utility animation-duration-* { --tw-animation-duration: calc(--value(number)*1ms); --tw-animation-duration: --value(--animation-duration-*,[duration],"initial",[*]); animation-duration: calc(--value(number)*1ms); animation-duration: --value(--animation-duration-*,[duration],"initial",[*]); }
+@utility delay-* { animation-delay: calc(--value(number)*1ms); animation-delay: --value(--animation-delay-*, [duration], "initial", [*]); --tw-animation-delay: calc(--value(number)*1ms); --tw-animation-delay: --value(--animation-delay-*, [duration], "initial", [*]); }
+@utility repeat-* { animation-iteration-count: --value(--animation-repeat-*, number, "initial", [*]); --tw-animation-iteration-count: --value(--animation-repeat-*, number, "initial", [*]); }
+@utility direction-* { animation-direction: --value(--animation-direction-*, "initial", [*]); --tw-animation-direction: --value(--animation-direction-*, "initial", [*]); }
+@utility fill-mode-* { animation-fill-mode: --value(--animation-fill-mode-*, "initial", [*]); --tw-animation-fill-mode: --value(--animation-fill-mode-*, "initial", [*]); }
+@utility running { animation-play-state: running; }
+@utility paused { animation-play-state: paused; }
+@utility play-state-* { animation-play-state: --value("initial", [*]); }
+@utility blur-in { --tw-enter-blur: 20px; }
+@utility blur-in-* { --tw-enter-blur: calc(--value(number)*1px); --tw-enter-blur: --value(--blur-*,[*]); }
+@utility blur-out { --tw-exit-blur: 20px; }
+@utility blur-out-* { --tw-exit-blur: calc(--value(number)*1px); --tw-exit-blur: --value(--blur-*,[*]); }
+@utility fade-in { --tw-enter-opacity: 0; }
+@utility fade-in-* { --tw-enter-opacity: calc(--value(number)/100); --tw-enter-opacity: --value(--percentage-*,[*]); }
+@utility fade-out { --tw-exit-opacity: 0; }
+@utility fade-out-* { --tw-exit-opacity: calc(--value(number)/100); --tw-exit-opacity: --value(--percentage-*,[*]); }
+@utility zoom-in { --tw-enter-scale: 0; }
+@utility zoom-in-* { --tw-enter-scale: calc(--value(number)*1%); --tw-enter-scale: calc(--value(ratio)); --tw-enter-scale: --value(--percentage-*,[*]); }
+@utility -zoom-in-* { --tw-enter-scale: calc(--value(number)*-1%); --tw-enter-scale: calc(--value(ratio)*-1); --tw-enter-scale: --value(--percentage-*,[*]); }
+@utility zoom-out { --tw-exit-scale: 0; }
+@utility zoom-out-* { --tw-exit-scale: calc(--value(number)*1%); --tw-exit-scale: calc(--value(ratio)); --tw-exit-scale: --value(--percentage-*,[*]); }
+@utility -zoom-out-* { --tw-exit-scale: calc(--value(number)*-1%); --tw-exit-scale: calc(--value(ratio)*-1); --tw-exit-scale: --value(--percentage-*,[*]); }
+@utility spin-in { --tw-enter-rotate: 30deg; }
+@utility spin-in-* { --tw-enter-rotate: calc(--value(number)*1deg); --tw-enter-rotate: calc(--value(ratio)*360deg); --tw-enter-rotate: --value(--rotate-*,[*]); }
+@utility -spin-in { --tw-enter-rotate: -30deg; }
+@utility -spin-in-* { --tw-enter-rotate: calc(--value(number)*-1deg); --tw-enter-rotate: calc(--value(ratio)*-360deg); --tw-enter-rotate: --value(--rotate-*,[*]); }
+@utility spin-out { --tw-exit-rotate: 30deg; }
+@utility spin-out-* { --tw-exit-rotate: calc(--value(number)*1deg); --tw-exit-rotate: calc(--value(ratio)*360deg); --tw-exit-rotate: --value(--rotate-*,[*]); }
+@utility -spin-out { --tw-exit-rotate: -30deg; }
+@utility -spin-out-* { --tw-exit-rotate: calc(--value(number)*-1deg); --tw-exit-rotate: calc(--value(ratio)*-360deg); --tw-exit-rotate: --value(--rotate-*,[*]); }
+@utility slide-in-from-top { --tw-enter-translate-y: -100%; }
+@utility slide-in-from-top-* { --tw-enter-translate-y: --spacing(--value(integer)*-1); --tw-enter-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-y: calc(--value(ratio)*-100%); --tw-enter-translate-y: calc(--value(--translate-*,[percentage],[length])*-1); }
+@utility slide-in-from-bottom { --tw-enter-translate-y: 100%; }
+@utility slide-in-from-bottom-* { --tw-enter-translate-y: --spacing(--value(integer)); --tw-enter-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-y: calc(--value(ratio)*100%); --tw-enter-translate-y: --value(--translate-*,[percentage],[length]); }
+@utility slide-in-from-left { --tw-enter-translate-x: -100%; }
+@utility slide-in-from-left-* { --tw-enter-translate-x: --spacing(--value(integer)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-x: calc(--value(ratio)*-100%); --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }
+@utility slide-in-from-right { --tw-enter-translate-x: 100%; }
+@utility slide-in-from-right-* { --tw-enter-translate-x: --spacing(--value(integer)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-x: calc(--value(ratio)*100%); --tw-enter-translate-x: --value(--translate-*,[percentage],[length]); }
+@utility slide-in-from-start { &:dir(ltr){ --tw-enter-translate-x: -100%; }&:dir(rtl){ --tw-enter-translate-x: 100%; } }
+@utility slide-in-from-start-* { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"]*){ --tw-enter-translate-x: --spacing(--value(integer)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-x: calc(--value(ratio)*-100%); --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }&:where(:dir(rtl), [dir="rtl"], [dir="rtl"]*){ --tw-enter-translate-x: --spacing(--value(integer)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-x: calc(--value(ratio)*100%); --tw-enter-translate-x: --value(--translate-*,[percentage],[length]); } }
+@utility slide-in-from-end { &:dir(ltr){ --tw-enter-translate-x: 100%; }&:dir(rtl){ --tw-enter-translate-x: -100%; } }
+@utility slide-in-from-end-* { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"]*){ --tw-enter-translate-x: --spacing(--value(integer)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-enter-translate-x: calc(--value(ratio)*100%); --tw-enter-translate-x: --value(--translate-*,[percentage],[length]); }&:where(:dir(rtl), [dir="rtl"], [dir="rtl"]*){ --tw-enter-translate-x: --spacing(--value(integer)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-enter-translate-x: calc(--value(ratio)*-100%); --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); } }
+@utility slide-out-to-top { --tw-exit-translate-y: -100%; }
+@utility slide-out-to-top-* { --tw-exit-translate-y: --spacing(--value(integer)*-1); --tw-exit-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-y: calc(--value(ratio)*-100%); --tw-exit-translate-y: calc(--value(--translate-*,[percentage],[length])*-1); }
+@utility slide-out-to-bottom { --tw-exit-translate-y: 100%; }
+@utility slide-out-to-bottom-* { --tw-exit-translate-y: --spacing(--value(integer)); --tw-exit-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-y: calc(--value(ratio)*100%); --tw-exit-translate-y: --value(--translate-*,[percentage],[length]); }
+@utility slide-out-to-left { --tw-exit-translate-x: -100%; }
+@utility slide-out-to-left-* { --tw-exit-translate-x: --spacing(--value(integer)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-x: calc(--value(ratio)*-100%); --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }
+@utility slide-out-to-right { --tw-exit-translate-x: 100%; }
+@utility slide-out-to-right-* { --tw-exit-translate-x: --spacing(--value(integer)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-x: calc(--value(ratio)*100%); --tw-exit-translate-x: --value(--translate-*,[percentage],[length]); }
+@utility slide-out-to-start { &:dir(ltr){ --tw-exit-translate-x: -100%; }&:dir(rtl){ --tw-exit-translate-x: 100%; } }
+@utility slide-out-to-start-* { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"]*){ --tw-exit-translate-x: --spacing(--value(integer)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-x: calc(--value(ratio)*-100%); --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); }&:where(:dir(rtl), [dir="rtl"], [dir="rtl"]*){ --tw-exit-translate-x: --spacing(--value(integer)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-x: calc(--value(ratio)*100%); --tw-exit-translate-x: --value(--translate-*,[percentage],[length]); } }
+@utility slide-out-to-end { &:dir(ltr){ --tw-exit-translate-x: 100%; }&:dir(rtl){ --tw-exit-translate-x: -100%; } }
+@utility slide-out-to-end-* { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"]*){ --tw-exit-translate-x: --spacing(--value(integer)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%); --tw-exit-translate-x: calc(--value(ratio)*100%); --tw-exit-translate-x: --value(--translate-*,[percentage],[length]); }&:where(:dir(rtl), [dir="rtl"], [dir="rtl"]*){ --tw-exit-translate-x: --spacing(--value(integer)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%); --tw-exit-translate-x: calc(--value(ratio)*-100%); --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1); } }
+
+/* src/styles/partials/_horizon-colors.css */
+@theme { --color-background: var(--color-neutral-950); --color-ring-offset: var(--color-neutral-950); --color-text-primary: var(--color-neutral-50); --color-text-secondary: var(--color-neutral-300); --color-button-danger: var(--color-danger); --color-button-danger--hover: color-mix(in oklab, var(--color-danger) 80%, transparent); --color-button-primary-bg: var(--color-neutral-50); --color-button-primary-bg--disabled: var(--color-neutral-500); --color-button-primary-border: var(--color-neutral-900); --color-button-primary-border--disabled: var(--color-neutral-500); --color-button-primary-text: var(--color-neutral-900); --color-button-primary-text--disabled: var(--color-neutral-200); --color-button-secondary-bg: var(--color-level-two); --color-button-secondary-bg--disabled: var(--color-neutral-500); --color-button-secondary-text: var(--color-neutral-50); --color-button-secondary-text--disabled: var(--color-neutral-200); --color-button-secondary-border: var(--color-neutral-900); --color-button-secondary-border--disabled: var(--color-neutral-500); --color-button-outline-bg: var(--color-transparent); --color-button-outline-text: var(--color-neutral-50); --color-button-outline-text--disabled: var(--color-neutral-400); --color-button-outline-border: var(--color-neutral-50); --color-button-outline-border--disabled: var(--color-neutral-400); --color-card-bg: var(--color-neutral-900-40a); --color-card-bg: color-mix(in oklab, var(--color-neutral-900) 40%, transparent); --color-card-text: var(--color-neutral-50); --color-drawer-bg: var(--color-level-one); --color-slider-track: var(--color-neutral-700); --color-slider-range: var(--color-neutral-50); --color-slider-thumb-border: var(--color-neutral-50); --color-slider-thumb-bg: var(--color-neutral-50); --color-slider-thumb-ring: var(--color-neutral-50); }
+:root[data-theme=light] {
+  --color-background: var(--color-neutral-50);
+  --color-ring-offset: var(--color-neutral-50);
+  --color-button-secondary-text: var(--color-neutral-900);
+  --color-button-secondary-text--hover: var(--color-neutral-900);
+  --color-button-secondary-text--active: var(--color-neutral-900);
+  --color-button-secondary-text--disabled: var(--color-neutral-400);
+  --color-button-secondary-border: 1px solid var(--color-neutral-900);
+  --color-button-secondary-border--hover: 1px solid var(--color-neutral-200);
+  --color-button-secondary-border--active: 1px solid var(--color-neutral-200);
+  --color-button-secondary-border--disabled: 1px solid var(--color-neutral-400);
+}
+
+/* src/styles/partials/_horizon-base-colors.css */
+:root {
+  --color-black: oklch(0 0 0);
+  --color-white: oklch(1 0 0);
+  --color-transparent: oklch(0 0 0 / 0%);
+  --color-accent: oklch(92.53% 0.1976 123.38);
+  --color-danger: oklch(62.39% 0.2536 28.3);
+  --color-success: oklch(75.9% 0.2424 144.72);
+  --color-warning: oklch(74.58% 0.1806 56.91);
+  --color-neutral-50: oklch(98.51% 0 0);
+  --color-neutral-100: oklch(92.19% 0 0);
+  --color-neutral-200: oklch(86.99% 0 0);
+  --color-neutral-300: oklch(71.55% 0 0);
+  --color-neutral-400: oklch(55.55% 0 0);
+  --color-neutral-500: oklch(43.86% 0 0);
+  --color-neutral-600: oklch(37.15% 0 0);
+  --color-neutral-700: oklch(32.11% 0 0);
+  --color-neutral-800: oklch(26.86% 0 0);
+  --color-neutral-900: oklch(25.2% 0 0);
+  --color-neutral-950: oklch(23.95% 0.0059 271.17);
+  --color-level-zero: hsl(232, 11%, 14%);
+  --color-level-one: hsl(223, 9%, 16%);
+  --color-level-two: hsl(213, 9%, 19%);
+  --color-level-three: hsl(213, 8%, 21%);
+  --color-level-four: hsl(213, 7%, 24%);
+  --color-primary-50: oklch(97.05% 0.0142 254.6);
+  --color-primary-100: oklch(93.19% 0.0316 255.59);
+  --color-primary-200: oklch(88.41% 0.0581 252.44);
+  --color-primary-300: oklch(80.75% 0.0958 253.19);
+  --color-primary-400: oklch(71.27% 0.1469 255.61);
+  --color-primary-500: oklch(62.31% 0.1862 260.06);
+  --color-primary-600: oklch(54.34% 0.2151 263.01);
+  --color-primary-700: oklch(49.14% 0.2189 264.03);
+  --color-primary-800: oklch(42.75% 0.1828 265.08);
+  --color-primary-900: oklch(37.78% 0.1366 265.11);
+  --color-primary-950: oklch(28.37% 0.0887 268.75);
+}
+
+/* src/styles/partials/_horizon-theme.css */
+@theme { --font-body: "Work Sans", sans-serif; --font-serif: "Bitter", serif; --font-mono: "Source Code Pro", monospace; --animate-fade-in-scale: fade-in-scale 0.3s ease-out; --animate-slide-from-bottom: slide-from-bottom; --animate-slide-to-bottom: slide-to-bottom; @keyframes fade-in-scale { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } @keyframes slide-from-bottom { from { transform: translate3d(0, 100%, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes slide-to-bottom { to { transform: translate3d(0, 100%, 0); } } }
+@layer base {
+  :root {
+    --sidebar: hsl(240, 7%, 97%);
+    --sidebar-foreground: hsl(240, 17%, 18%);
+    --sidebar-primary: hsl(240, 17%, 18%);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: hsl(240, 7%, 97%);
+    --sidebar-ring: oklch(0.708 0 0);
+    --ring: oklch(0.708 0 0);
+  }
+  .dark {
+    --sidebar: hsl(240, 17%, 18%);
+    --sidebar-foreground: hsl(240, 7%, 97%);
+    --sidebar-primary: hsl(240, 7%, 97%);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: hsl(240, 17%, 18%);
+    --sidebar-ring: oklch(0.439 0 0);
+    --color-ring-offset: var(--color-neutral-950);
+    --ring-offset-width: 2px;
+  }
+}
+
+/* src/styles/main.css */
+@keyframes slide-up {
+  0% {
+    transform: translateY(50%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes slide-down {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(50%);
+    opacity: 0;
+  }
+}
+.slide-up {
+  animation: slide-up 0.3s ease-in-out;
+}
+.slide-down {
+  animation: slide-down 0.3s ease-in-out;
+}

package/dist/index.d.ts

@@ -1,22 +1,75 @@
-export { Button } from './components/Button/Button';
-export type { ButtonProps } from './components/Button/Button';
-export { Card } from './components/Card/Card';
-export type { CardProps } from './components/Card/Card';
-export { Checkbox } from './components/Checkbox/Checkbox';
-export type { CheckboxProps } from './components/Checkbox/Checkbox';
-export { Input } from './components/Input/Input';
-export type { InputProps } from './components/Input/Input';
-export { Label } from './components/Label/Label';
-export { RadioGroup } from './components/RadioGroup/RadioGroup';
-export type { RadioGroupProps } from './components/RadioGroup/RadioGroup';
-export { Select } from './components/Select/Select';
-export type { SelectProps } from './components/Select/Select';
-export { Sidebar } from './components/Sidebar/Sidebar';
-export { Skeleton } from './components/Skeleton/Skeleton';
-export { Slider } from './components/Slider/Slider';
-export type { SliderProps } from './components/Slider/Slider';
-export { Switch } from './components/Switch/Switch';
-export { Textarea } from './components/Textarea/Textarea';
-export type { TextareaProps } from './components/Textarea/Textarea';
-export { useTheme } from './hooks/useTheme';
-export { cn } from './utils/twUtils';
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, MouseEvent, HTMLAttributes, ComponentProps } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { ClassValue } from 'clsx';
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "outline" | null | undefined;
+    state?: "default" | "error" | "loading" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, VariantProps<typeof buttonVariants> {
+    errorMessage?: string | ReactNode;
+    endIcon?: ReactNode;
+    label: string;
+    disabled?: boolean;
+    startIcon?: ReactNode;
+    type?: 'button' | 'submit' | 'reset';
+    state?: 'loading' | 'error' | 'default';
+    dataTestId?: string;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    isFullWidth?: boolean;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    title?: string;
+    icon?: ReactNode;
+    width?: 'full' | 'fit';
+    isLoading?: boolean;
+    children?: ReactNode;
+}
+declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
+
+type DrawerProps = {
+    title?: string;
+    trigger: ReactNode;
+    description?: string;
+    children?: ReactNode;
+    direction?: 'left' | 'right' | 'top' | 'bottom';
+    size?: string;
+};
+declare const Drawer: ({ trigger, title, description, children, direction, size }: DrawerProps) => react_jsx_runtime.JSX.Element;
+
+declare function Skeleton({ className, ...props }: ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+
+type SliderProps = ComponentProps<typeof SliderPrimitive.Root> & {
+    className?: string;
+    defaultValue?: number[];
+    value?: number[];
+    min?: number;
+    max?: number;
+    step?: number;
+    minStepsBetweenThumbs?: number;
+    onValueChange?: (value: number[]) => void;
+    orientation?: 'horizontal' | 'vertical';
+    onValueCommit?: (value: number[]) => void;
+    disabled?: boolean;
+    name?: string;
+};
+declare function Slider({ className, defaultValue, value, min, max, step, minStepsBetweenThumbs, onValueChange, orientation, onValueCommit, disabled, name, ...props }: SliderProps): react_jsx_runtime.JSX.Element;
+
+type Theme = 'light' | 'dark';
+interface UseThemeReturn {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    toggleTheme: () => void;
+}
+declare const useTheme: (defaultTheme?: Theme) => UseThemeReturn;
+
+declare function cn(...inputs: ClassValue[]): string;
+declare function pxToRem(px: number): string;
+
+export { Button, type ButtonProps, Card, type CardProps, Drawer, type DrawerProps, Skeleton, Slider, type SliderProps, cn, pxToRem, useTheme };

package/dist/index.js

@@ -0,0 +1,276 @@
+"use client"
+
+// src/utils/twUtils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function pxToRem(px) {
+  return `${px / 16}rem`;
+}
+
+// src/components/Button/Button.tsx
+import { cva } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var buttonVariants = cva(
+  `
+    flex relative items-center justify-center gap-2 whitespace-nowrap transition-colors cursor-pointer py-2 px-6 rounded-lg border font-semibold
+    focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus:ring-2 focus:ring-ring focus:ring-offset-2
+    focus-visible:ring-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0
+  `,
+  {
+    variants: {
+      variant: {
+        primary: "bg-button-primary-bg text-button-primary-text border-button-primary-border disabled:bg-button-primary-bg--disabled disabled:text-button-primary-text--disabled disabled:border-button-primary-border--disabled",
+        secondary: "bg-button-secondary-bg border-button-secondary-border text-button-secondary-text disabled:bg-button-secondary-bg--disabled disabled:text-button-secondary-text--disabled disabled:border-button-secondary-border--disabled",
+        outline: "bg-button-outline-bg border-button-outline-border text-button-outline-text disabled:text-button-outline-text--disabled disabled:border-button-outline-border--disabled"
+      },
+      state: {
+        default: "",
+        error: "bg-button-danger text-button-primary-text transition pointer-events-none",
+        loading: "cursor-wait pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      state: "default"
+    }
+  }
+);
+var Button = forwardRef(
+  ({
+    className,
+    variant,
+    label,
+    endIcon,
+    state,
+    errorMessage,
+    startIcon,
+    disabled,
+    type = "button",
+    dataTestId = `button-${variant}`,
+    isFullWidth,
+    ...props
+  }, ref) => {
+    const stateStyles = {
+      error: {
+        primary: "bg-button-danger border-button-danger text-button-primary-text pointer-events-none",
+        secondary: "bg-button-danger border-button-danger text-button-secondary-text pointer-events-none",
+        outline: "bg-transparent border-button-danger text-button-danger pointer-events-none"
+      },
+      loading: {
+        primary: "bg-button-primary-bg--disabled border-button-primary-border--disabled text-button-primary-text--disabled pointer-events-none",
+        secondary: "bg-button-secondary-bg--disabled border-button-secondary-border--disabled text-button-secondary-text--disabled pointer-events-none",
+        outline: "bg-button-outline-bg--disabled border-button-outline-border--disabled text-button-outline-text--disabled pointer-events-none"
+      }
+    };
+    const widthClass = isFullWidth ? "w-full" : "w-auto";
+    const classes = cn(
+      buttonVariants({ variant, state }),
+      state === "error" && stateStyles.error[variant || "primary"],
+      state === "loading" && stateStyles.loading[variant || "primary"],
+      widthClass,
+      className
+    );
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex justify-items-center", widthClass), children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: classes,
+          ref,
+          type,
+          "aria-disabled": disabled,
+          disabled,
+          "data-testid": dataTestId,
+          ...props,
+          "data-state": state,
+          children: [
+            startIcon && /* @__PURE__ */ jsx("span", { className: "flex pr-2", "aria-hidden": true, children: startIcon }),
+            label,
+            state === "loading" && /* @__PURE__ */ jsx(Loader2, { className: "ml-2 animate-spin", size: 16 }),
+            endIcon && state !== "loading" && /* @__PURE__ */ jsx("span", { className: "flex pl-2", "aria-hidden": true, children: endIcon })
+          ]
+        }
+      ),
+      state === "error" && errorMessage && /* @__PURE__ */ jsx("p", { className: "text-danger text-xs", role: "alert", "aria-live": "polite", children: errorMessage })
+    ] });
+  }
+);
+Button.displayName = "Button";
+
+// src/components/Card/Card.tsx
+import { Loader2 as Loader22 } from "lucide-react";
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Card = forwardRef2(
+  ({ className, title, icon, width = "full", isLoading = false, children, ...props }, ref) => {
+    const hasHeader = title || icon;
+    const cardClasses = cn(
+      "relative bg-card-bg rounded-2xl p-4 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      width === "full" ? "w-full" : "w-fit",
+      className
+    );
+    return /* @__PURE__ */ jsxs2("div", { ref, className: cardClasses, ...props, children: [
+      isLoading && /* @__PURE__ */ jsx2("div", { className: "bg-card-bg/50 absolute inset-0 z-10 flex items-center justify-center", children: /* @__PURE__ */ jsx2(Loader22, { className: "text-muted-foreground animate-spin", size: 24 }) }),
+      hasHeader && /* @__PURE__ */ jsxs2("div", { className: cn("flex items-center pb-4", title ? "justify-between" : "justify-end"), children: [
+        title && /* @__PURE__ */ jsx2("h3", { className: "text-card-text truncate text-base font-semibold", children: title }),
+        icon && /* @__PURE__ */ jsx2("div", { className: "flex-shrink-0", "aria-hidden": "true", children: icon })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: cn("min-h-40 p-4", hasHeader && "pt-0"), children })
+    ] });
+  }
+);
+Card.displayName = "Card";
+
+// src/components/Drawer/Drawer.tsx
+import { Drawer as DrawerBase } from "vaul";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var Drawer = ({ trigger, title, description, children, direction = "right", size = "320px" }) => {
+  const baseStyles = "fixed";
+  const directionStyles = {
+    left: {
+      className: `${baseStyles} top-0 bottom-0 left-0 shadow-[20px_0_20px_rgba(0,0,0,0.4)]`,
+      style: { width: size }
+    },
+    right: {
+      className: `${baseStyles} top-0 bottom-0 right-0 shadow-[-20px_0_20px_rgba(0,0,0,0.4)]`,
+      style: { width: size }
+    },
+    top: {
+      className: `${baseStyles} top-0 left-0 right-0 shadow-[0_20px_20px_rgba(0,0,0,0.4)]`,
+      style: { height: size }
+    },
+    bottom: {
+      className: `${baseStyles} bottom-0 left-0 right-0 shadow-[0_-20px_20px_rgba(0,0,0,0.4)]`,
+      style: { height: size }
+    }
+  };
+  const { className, style } = directionStyles[direction];
+  return /* @__PURE__ */ jsxs3(DrawerBase.Root, { direction, children: [
+    /* @__PURE__ */ jsx3(DrawerBase.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs3(DrawerBase.Portal, { children: [
+      /* @__PURE__ */ jsx3(DrawerBase.Overlay, { className: "fixed inset-0 bg-transparent" }),
+      /* @__PURE__ */ jsxs3(DrawerBase.Content, { className: `bg-drawer-bg z-10 flex flex-col p-4 outline-none ${className}`, style, children: [
+        /* @__PURE__ */ jsx3(DrawerBase.Close, {}),
+        /* @__PURE__ */ jsx3(DrawerBase.Title, { className: "text-text-primary mb-2 text-lg font-semibold", children: title }),
+        /* @__PURE__ */ jsx3(DrawerBase.Description, { className: "!text-text-secondary mb-2 !text-xs uppercase", children: description }),
+        /* @__PURE__ */ jsx3("div", { className: "pt-2", children })
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/Skeleton/Skeleton.tsx
+import "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx4("div", { "data-slot": "skeleton", className: cn("bg-accent animate-pulse rounded-md", className), ...props });
+}
+
+// src/components/Slider/Slider.tsx
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  minStepsBetweenThumbs = 1,
+  onValueChange,
+  orientation = "horizontal",
+  onValueCommit,
+  disabled,
+  name,
+  ...props
+}) {
+  const _values = value || defaultValue || [min];
+  return /* @__PURE__ */ jsxs4(
+    SliderPrimitive.Root,
+    {
+      "data-slot": "slider",
+      defaultValue,
+      value,
+      min,
+      max,
+      step,
+      minStepsBetweenThumbs,
+      onValueChange,
+      orientation,
+      onValueCommit,
+      disabled,
+      name,
+      className: cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx5(
+          SliderPrimitive.Track,
+          {
+            "data-slot": "slider-track",
+            className: cn(
+              "bg-slider-track relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+            ),
+            children: /* @__PURE__ */ jsx5(
+              SliderPrimitive.Range,
+              {
+                "data-slot": "slider-range",
+                className: cn(
+                  "bg-slider-range absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+                )
+              }
+            )
+          }
+        ),
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx5(
+          SliderPrimitive.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            className: "border-slider-thumb-border bg-slider-thumb-bg ring-slider-thumb-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          },
+          index
+        ))
+      ]
+    }
+  );
+}
+
+// src/hooks/useTheme.ts
+import { useEffect, useState } from "react";
+var useTheme = (defaultTheme = "dark") => {
+  const [theme, setThemeState] = useState(() => {
+    if (typeof window === "undefined") return defaultTheme;
+    const stored = localStorage.getItem("theme");
+    if (stored === "light" || stored === "dark") return stored;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  });
+  const setTheme = (newTheme) => {
+    setThemeState(newTheme);
+  };
+  const toggleTheme = () => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  };
+  useEffect(() => {
+    const root = document.documentElement;
+    root.setAttribute("data-theme", theme);
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+  return { theme, setTheme, toggleTheme };
+};
+export {
+  Button,
+  Card,
+  Drawer,
+  Skeleton,
+  Slider,
+  cn,
+  pxToRem,
+  useTheme
+};