@lumiastream/ui 0.2.2 → 0.2.4

package/README.md

@@ -1,6 +1,6 @@
 # Lumia UI Kit
 
-A modern, Tailwind‑powered component library used across the Lumia Stream ecosystem. It provides production‑ready React components, design tokens, and Storybook documentation—all published as `@lumiastream/ui`.
+A modern component library used across the Lumia Stream ecosystem. It provides production‑ready React components, design tokens, and Storybook documentation—all published as `@lumiastream/ui`.
 
 ---
 
@@ -9,7 +9,6 @@ A modern, Tailwind‑powered component library used across the Lumia Stream eco
 | Feature               | Details                                               |
 | --------------------- | ----------------------------------------------------- |
 | **React 18 → 19**     | Built and typed for the latest React majors.          |
-| **Tailwind CSS 4**    | Utility‑first styling with full theme access.         |
 | **TypeScript first**  | 100 % typed public API (`.d.ts` included).            |
 | **Storybook 9**       | Live docs with interactive playgrounds & a11y checks. |
 | **ESM + CJS bundles** | Works in every modern build tool.                     |
@@ -25,7 +24,6 @@ npm i @lumiastream/ui
 > **Peer dependencies**
 >
 > - React ≥ 18.0 < 20 (`^18 || ^19`)
-> - Tailwind CSS is _already compiled_—you do **not** need Tailwind in the host app unless you want to extend the theme.
 
 ---
 
@@ -36,7 +34,7 @@ npm i @lumiastream/ui
 import { LSButton } from "@lumiastream/ui";
 
 export default function App() {
-	return <LSButton variant="primary" label="Click Me" />;
+  return <LSButton variant="primary" label="Click Me" />;
 }
 ```
 
@@ -61,7 +59,7 @@ The public Storybook for the latest release lives at [https://ui.lumiastream.com
 # clone & bootstrap
 pnpm install
 
-# compile library (ESM + CJS + types) and Tailwind sheet
+# compile library (ESM + CJS + types)
 pnpm build
 ```
 

package/dist/index.d.ts

@@ -55,9 +55,9 @@ declare const LSInput: React.ForwardRefExoticComponent<Omit<LSInputProps$1, "ref
 
 interface LSInputPropsChild {
     name?: string;
-    value?: number;
+    value?: number | string | null;
     autoFocus?: boolean;
-    defaultValue?: number;
+    defaultValue?: number | string | null;
     label?: React.ReactNode;
     inline?: boolean;
     hasInfo?: boolean;

package/dist/index.js

@@ -20,8 +20,8 @@ function styleInject(css, { insertAt } = {}) {
   }
 }
 
-// src/tailwind.css
-styleInject('/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n@layer properties;\n:root,\n:host {\n  --color-white: #fff;\n  --spacing: 0.25rem;\n  --text-sm: 0.875rem;\n  --text-sm--line-height: calc(1.25 / 0.875);\n  --text-base: 1rem;\n  --text-base--line-height: calc(1.5 / 1);\n  --text-lg: 1.125rem;\n  --text-lg--line-height: calc(1.75 / 1.125);\n  --font-weight-medium: 500;\n  --font-weight-semibold: 600;\n  --radius-md: 0.375rem;\n  --default-transition-duration: 150ms;\n  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.visible {\n  visibility: visible;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.static {\n  position: static;\n}\n.start {\n  inset-inline-start: var(--spacing);\n}\n.end {\n  inset-inline-end: var(--spacing);\n}\n.mb-1 {\n  margin-bottom: calc(var(--spacing) * 1);\n}\n.mb-4 {\n  margin-bottom: calc(var(--spacing) * 4);\n}\n.ml-2 {\n  margin-left: calc(var(--spacing) * 2);\n}\n.block {\n  display: block;\n}\n.contents {\n  display: contents;\n}\n.flex {\n  display: flex;\n}\n.grid {\n  display: grid;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.h-6 {\n  height: calc(var(--spacing) * 6);\n}\n.h-full {\n  height: 100%;\n}\n.max-h-\\[55vh\\] {\n  max-height: 55vh;\n}\n.min-h-\\[50vh\\] {\n  min-height: 50vh;\n}\n.min-h-screen {\n  min-height: 100vh;\n}\n.w-6 {\n  width: calc(var(--spacing) * 6);\n}\n.w-\\[92vw\\] {\n  width: 92vw;\n}\n.w-full {\n  width: 100%;\n}\n.max-w-\\[600px\\] {\n  max-width: 600px;\n}\n.max-w-\\[1100px\\] {\n  max-width: 1100px;\n}\n.min-w-0 {\n  min-width: calc(var(--spacing) * 0);\n}\n.flex-1 {\n  flex: 1;\n}\n.shrink {\n  flex-shrink: 1;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.transform {\n  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.grid-cols-\\[minmax\\(300px\\,1\\.5fr\\)_2fr\\] {\n  grid-template-columns: minmax(300px, 1.5fr) 2fr;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-nowrap {\n  flex-wrap: nowrap;\n}\n.items-center {\n  align-items: center;\n}\n.items-start {\n  align-items: flex-start;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-2 {\n  gap: calc(var(--spacing) * 2);\n}\n.gap-8 {\n  gap: calc(var(--spacing) * 8);\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-md {\n  border-radius: var(--radius-md);\n}\n.border {\n  border-style: var(--tw-border-style);\n  border-width: 1px;\n}\n.border-b {\n  border-bottom-style: var(--tw-border-style);\n  border-bottom-width: 1px;\n}\n.border-current {\n  border-color: currentcolor;\n}\n.border-white\\/10 {\n  border-color: color-mix(in srgb, #fff 10%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    border-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n  }\n}\n.border-white\\/25 {\n  border-color: color-mix(in srgb, #fff 25%, transparent);\n  @supports (color: color-mix(in lab, red, red)) {\n    border-color: color-mix(in oklab, var(--color-white) 25%, transparent);\n  }\n}\n.bg-\\[\\#1b1a28\\] {\n  background-color: #1b1a28;\n}\n.bg-cover {\n  background-size: cover;\n}\n.bg-center {\n  background-position: center;\n}\n.bg-no-repeat {\n  background-repeat: no-repeat;\n}\n.p-0 {\n  padding: calc(var(--spacing) * 0);\n}\n.p-6 {\n  padding: calc(var(--spacing) * 6);\n}\n.px-1 {\n  padding-inline: calc(var(--spacing) * 1);\n}\n.px-3 {\n  padding-inline: calc(var(--spacing) * 3);\n}\n.px-4 {\n  padding-inline: calc(var(--spacing) * 4);\n}\n.px-6 {\n  padding-inline: calc(var(--spacing) * 6);\n}\n.py-0 {\n  padding-block: calc(var(--spacing) * 0);\n}\n.py-1 {\n  padding-block: calc(var(--spacing) * 1);\n}\n.py-2 {\n  padding-block: calc(var(--spacing) * 2);\n}\n.py-3 {\n  padding-block: calc(var(--spacing) * 3);\n}\n.py-4 {\n  padding-block: calc(var(--spacing) * 4);\n}\n.pr-4 {\n  padding-right: calc(var(--spacing) * 4);\n}\n.text-base {\n  font-size: var(--text-base);\n  line-height: var(--tw-leading, var(--text-base--line-height));\n}\n.text-lg {\n  font-size: var(--text-lg);\n  line-height: var(--tw-leading, var(--text-lg--line-height));\n}\n.text-sm {\n  font-size: var(--text-sm);\n  line-height: var(--tw-leading, var(--text-sm--line-height));\n}\n.text-\\[10px\\] {\n  font-size: 10px;\n}\n.leading-\\[1\\.25\\] {\n  --tw-leading: 1.25;\n  line-height: 1.25;\n}\n.leading-none {\n  --tw-leading: 1;\n  line-height: 1;\n}\n.font-medium {\n  --tw-font-weight: var(--font-weight-medium);\n  font-weight: var(--font-weight-medium);\n}\n.font-semibold {\n  --tw-font-weight: var(--font-weight-semibold);\n  font-weight: var(--font-weight-semibold);\n}\n.break-words {\n  overflow-wrap: break-word;\n}\n.break-all {\n  word-break: break-all;\n}\n.text-ellipsis {\n  text-overflow: ellipsis;\n}\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n.text-\\[\\#f4f3ff\\] {\n  color: #f4f3ff;\n}\n.text-\\[var\\(--customVariables\\,\\#69ffd2\\)\\] {\n  color: var(--customVariables,#69ffd2);\n}\n.text-\\[var\\(--functionVariables\\,var\\(--semanticPurple\\,\\#b489ff\\)\\)\\] {\n  color: var(--functionVariables,var(--semanticPurple,#b489ff));\n}\n.text-\\[var\\(--neutralLight1\\,\\#f4f3ff\\)\\] {\n  color: var(--neutralLight1,#f4f3ff);\n}\n.text-\\[var\\(--neutralLight2\\,\\#cac9d5\\)\\] {\n  color: var(--neutralLight2,#cac9d5);\n}\n.text-\\[var\\(--neutralLight3\\,\\#9392a1\\)\\] {\n  color: var(--neutralLight3,#9392a1);\n}\n.text-\\[var\\(--normalVariables\\,var\\(--semanticBlue\\,\\#65b8ff\\)\\)\\] {\n  color: var(--normalVariables,var(--semanticBlue,#65b8ff));\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.shadow-\\[0_0_0_1px_rgba\\(0\\,0\\,0\\,0\\.25\\)\\] {\n  --tw-shadow: 0 0 0 1px var(--tw-shadow-color, rgba(0,0,0,0.25));\n  box-shadow:\n    var(--tw-inset-shadow),\n    var(--tw-inset-ring-shadow),\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow);\n}\n.shadow-\\[0_8px_18px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\] {\n  --tw-shadow: 0 8px 18px var(--tw-shadow-color, rgba(0,0,0,0.18));\n  box-shadow:\n    var(--tw-inset-shadow),\n    var(--tw-inset-ring-shadow),\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow);\n}\n.filter {\n  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n}\n.transition {\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    outline-color,\n    text-decoration-color,\n    fill,\n    stroke,\n    --tw-gradient-from,\n    --tw-gradient-via,\n    --tw-gradient-to,\n    opacity,\n    box-shadow,\n    transform,\n    translate,\n    scale,\n    rotate,\n    filter,\n    -webkit-backdrop-filter,\n    backdrop-filter,\n    display,\n    content-visibility,\n    overlay,\n    pointer-events;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n}\n.\\[--neutralDark1\\:\\#1b1a28\\] {\n  --neutralDark1: #1b1a28;\n}\n.\\[--neutralDark2\\:\\#252338\\] {\n  --neutralDark2: #252338;\n}\n.\\[--neutralDark3\\:\\#312f47\\] {\n  --neutralDark3: #312f47;\n}\n.\\[--neutralDark4\\:\\#46435f\\] {\n  --neutralDark4: #46435f;\n}\n.\\[--neutralLight1\\:\\#f4f3ff\\] {\n  --neutralLight1: #f4f3ff;\n}\n.\\[--neutralLight2\\:\\#cac9d5\\] {\n  --neutralLight2: #cac9d5;\n}\n.\\[--neutralLight3\\:\\#9f9eb2\\] {\n  --neutralLight3: #9f9eb2;\n}\n.\\[--primary\\:\\#ff4076\\] {\n  --primary: #ff4076;\n}\n.\\[--radiusContainer\\:12px\\] {\n  --radiusContainer: 12px;\n}\n.\\[--radiusContainerSm\\:10px\\] {\n  --radiusContainerSm: 10px;\n}\n.\\[--secondary\\:\\#5f5dff\\] {\n  --secondary: #5f5dff;\n}\n.\\[--variable-custom-color\\:var\\(--customVariables\\,\\#69ffd2\\)\\] {\n  --variable-custom-color: var(--customVariables,#69ffd2);\n}\n.\\[--variable-function-color\\:var\\(--functionVariables\\,var\\(--semanticPurple\\,\\#b489ff\\)\\)\\] {\n  --variable-function-color: var(--functionVariables,var(--semanticPurple,#b489ff));\n}\n.\\[--variable-normal-color\\:var\\(--normalVariables\\,var\\(--semanticBlue\\,\\#65b8ff\\)\\)\\] {\n  --variable-normal-color: var(--normalVariables,var(--semanticBlue,#65b8ff));\n}\n.hover\\:brightness-110 {\n  &:hover {\n    @media (hover: hover) {\n      --tw-brightness: brightness(110%);\n      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n    }\n  }\n}\n.focus\\:ring-2 {\n  &:focus {\n    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow:\n      var(--tw-inset-shadow),\n      var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow),\n      var(--tw-ring-shadow),\n      var(--tw-shadow);\n  }\n}\n.focus\\:ring-\\[var\\(--primary\\,\\#ff4076\\)\\] {\n  &:focus {\n    --tw-ring-color: var(--primary,#ff4076);\n  }\n}\n.focus\\:ring-offset-2 {\n  &:focus {\n    --tw-ring-offset-width: 2px;\n    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  }\n}\n.focus\\:ring-offset-\\[var\\(--neutralDark1\\,\\#1b1a28\\)\\] {\n  &:focus {\n    --tw-ring-offset-color: var(--neutralDark1,#1b1a28);\n  }\n}\n.focus\\:outline-none {\n  &:focus {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n}\n.active\\:opacity-80 {\n  &:active {\n    opacity: 80%;\n  }\n}\n.active\\:brightness-95 {\n  &:active {\n    --tw-brightness: brightness(95%);\n    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n  }\n}\n.disabled\\:cursor-not-allowed {\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n.disabled\\:opacity-50 {\n  &:disabled {\n    opacity: 50%;\n  }\n}\n.\\[\\&_circle\\]\\:stroke-white {\n  & circle {\n    stroke: var(--color-white);\n  }\n}\n.\\[\\&_polyline\\]\\:stroke-white {\n  & polyline {\n    stroke: var(--color-white);\n  }\n}\n@property --tw-rotate-x { syntax: "*"; inherits: false; }\n@property --tw-rotate-y { syntax: "*"; inherits: false; }\n@property --tw-rotate-z { syntax: "*"; inherits: false; }\n@property --tw-skew-x { syntax: "*"; inherits: false; }\n@property --tw-skew-y { syntax: "*"; inherits: false; }\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-leading { syntax: "*"; inherits: false; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-blur { syntax: "*"; inherits: false; }\n@property --tw-brightness { syntax: "*"; inherits: false; }\n@property --tw-contrast { syntax: "*"; inherits: false; }\n@property --tw-grayscale { syntax: "*"; inherits: false; }\n@property --tw-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-invert { syntax: "*"; inherits: false; }\n@property --tw-opacity { syntax: "*"; inherits: false; }\n@property --tw-saturate { syntax: "*"; inherits: false; }\n@property --tw-sepia { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *,\n    ::before,\n    ::after,\n    ::backdrop {\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n    }\n  }\n}\n');
+// src/lumia-ui.css
+styleInject(".ls-button,\n.ls-button *,\n.ls-color-picker,\n.ls-color-picker *,\n.mui-multi-select,\n.mui-multi-select *,\n.ls-multi-select-value,\n.ls-multi-select-value *,\n.ls-variable-picker,\n.ls-variable-picker *,\n.ls-variable-token,\n.ls-variable-token *,\n.ls-font-picker,\n.ls-font-picker *,\n.mui-ls-input,\n.mui-ls-input * {\n  box-sizing: border-box;\n}\n.ls-button,\n.ls-color-picker button,\n.mui-multi-select button {\n  font: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n}\n.ls-button,\n.ls-color-picker__preview {\n  appearance: none;\n  -webkit-appearance: none;\n  background-color: transparent;\n  background-image: none;\n  cursor: pointer;\n  text-transform: none;\n  user-select: none;\n}\n.ls-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  border-radius: var(--radiusContainerSm, 0.375rem);\n  border: 1px solid color-mix(in srgb, #fff 10%, transparent);\n  color: var(--neutralLight1, #f4f3ff);\n  font-weight: 500;\n  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);\n  transition:\n    filter 150ms cubic-bezier(0.4, 0, 0.2, 1),\n    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),\n    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  white-space: nowrap;\n}\n.ls-button--small {\n  padding-inline: 0.75rem;\n  padding-block: 0.25rem;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.ls-button--medium {\n  padding-inline: 1rem;\n  padding-block: 0.5rem;\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.ls-button--large {\n  padding-inline: 1.5rem;\n  padding-block: 0.75rem;\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.ls-button:hover {\n  filter: brightness(1.1);\n}\n.ls-button:focus {\n  outline: none;\n}\n.ls-button:focus-visible {\n  box-shadow:\n    0 0 0 2px var(--primary, #ff4076),\n    0 0 0 4px var(--neutralDark1, #1b1a28),\n    0 8px 18px rgba(0, 0, 0, 0.18);\n}\n.ls-button:active {\n  filter: brightness(0.95);\n}\n.ls-button:disabled,\n.ls-button[aria-disabled=true] {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ls-button:disabled:hover,\n.ls-button[aria-disabled=true]:hover {\n  filter: none;\n}\n.mui-ls-input,\n.ls-font-picker,\n.ls-color-picker__input {\n  width: 100%;\n}\n.mui-multi-select .MuiSelect-select {\n  min-width: 0;\n}\n.ls-multi-select-value {\n  display: flex;\n  width: 100%;\n  min-width: 0;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.ls-multi-select-value__label {\n  min-width: 0;\n  flex: 1 1 0%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ls-multi-select-value__count {\n  flex-shrink: 0;\n  white-space: nowrap;\n}\n.ls-color-picker__preview {\n  position: relative;\n  display: inline-block;\n  width: 1.5rem;\n  height: 1.5rem;\n  flex-shrink: 0;\n  padding: 0;\n  border: 1px solid color-mix(in srgb, #fff 25%, transparent);\n  border-radius: var(--radiusContainerSm, 0.375rem);\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n  color: transparent;\n  line-height: 0;\n}\n.ls-color-picker__preview:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ls-color-picker__preview:focus {\n  outline: none;\n}\n.ls-color-picker__preview:focus-visible {\n  box-shadow:\n    0 0 0 2px var(--primary, #ff4076),\n    0 0 0 4px var(--neutralDark1, #1b1a28),\n    0 0 0 1px rgba(0, 0, 0, 0.25);\n}\n.ls-color-picker__gradient circle,\n.ls-color-picker__gradient polyline {\n  stroke: #fff;\n}\n.ls-variable-picker {\n  --variable-custom-color: var(--customVariables, #69ffd2);\n  --variable-function-color: var(--functionVariables, var(--semanticPurple, #b489ff));\n  --variable-normal-color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n  display: flex;\n  width: 92vw;\n  max-width: 1100px;\n  min-height: 50vh;\n  max-height: 55vh;\n  flex-direction: column;\n  overflow: hidden;\n}\n.ls-variable-picker__intro {\n  margin-bottom: 1rem;\n  color: var(--neutralLight2, #cac9d5);\n}\n.ls-variable-picker__header,\n.ls-variable-picker__row {\n  display: grid;\n  grid-template-columns: minmax(300px, 1.5fr) 2fr;\n  gap: 2rem;\n}\n.ls-variable-picker__header {\n  margin-bottom: 0.25rem;\n  padding-inline: 0.25rem;\n  color: var(--neutralLight3, #9392a1);\n}\n.ls-variable-picker__list {\n  height: 100%;\n  overflow: auto;\n  padding-right: 1rem;\n}\n.ls-variable-picker__row {\n  cursor: pointer;\n  align-items: start;\n  border-bottom: 1px solid color-mix(in srgb, #fff 10%, transparent);\n  padding: 1rem 0.25rem;\n}\n.ls-variable-picker__row:active {\n  opacity: 0.8;\n}\n.ls-variable-picker__description {\n  max-width: 600px;\n  overflow-wrap: break-word;\n  line-height: 1.25;\n}\n.ls-variable-token {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n}\n.ls-variable-token--custom {\n  color: var(--customVariables, #69ffd2);\n}\n.ls-variable-token--function {\n  color: var(--functionVariables, var(--semanticPurple, #b489ff));\n}\n.ls-variable-token--system {\n  color: var(--normalVariables, var(--semanticBlue, #65b8ff));\n}\n.ls-variable-token__name {\n  min-width: 0;\n  word-break: break-all;\n}\n.ls-variable-token__badge {\n  display: inline-flex;\n  margin-left: 0.5rem;\n  flex-shrink: 0;\n  align-items: center;\n  border: 1px solid currentcolor;\n  border-radius: 0.25rem;\n  padding-inline: 0.25rem;\n  padding-block: 0;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 1;\n  text-transform: uppercase;\n}\n");
 
 // src/components/LSButton/LSButton.tsx
 import { jsx } from "react/jsx-runtime";
@@ -38,8 +38,8 @@ var LSButton = ({
     {
       type: "button",
       className: [
-        "rounded-md border border-white/10 font-medium text-[var(--neutralLight1,#f4f3ff)] shadow-[0_8px_18px_rgba(0,0,0,0.18)] transition hover:brightness-110 focus:outline-none focus:ring-2 focus:ring-[var(--primary,#ff4076)] focus:ring-offset-2 focus:ring-offset-[var(--neutralDark1,#1b1a28)] active:brightness-95",
-        size === "small" ? "px-3 py-1 text-sm" : size === "large" ? "px-6 py-3 text-lg" : "px-4 py-2 text-base"
+        "ls-button",
+        size === "small" ? "ls-button--small" : size === "large" ? "ls-button--large" : "ls-button--medium"
       ].join(" "),
       style: { background },
       ...props,
@@ -149,7 +149,7 @@ var LSInput = forwardRef(
       FormControl,
       {
         variant: "outlined",
-        className: classNames("mui-ls-input w-full", className, {
+        className: classNames("mui-ls-input", className, {
           noMinHeight: $noMinHeight,
           bypassMuiColor: bypasscolor || bypasscolor === "default"
         }),
@@ -185,6 +185,20 @@ import Slider from "@mui/material/Slider";
 import classNames2 from "classnames";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var normalizeSliderValue = (rawValue) => {
+  if (typeof rawValue === "number") {
+    return Number.isFinite(rawValue) ? rawValue : 0;
+  }
+  if (typeof rawValue === "string") {
+    const trimmedValue = rawValue.trim();
+    if (!trimmedValue) {
+      return 0;
+    }
+    const numericValue = Number(trimmedValue);
+    return Number.isFinite(numericValue) ? numericValue : 0;
+  }
+  return 0;
+};
 var LSSliderInput = ({
   name,
   value,
@@ -214,13 +228,7 @@ var LSSliderInput = ({
   const isValueFloat = Boolean(isFloat || isFloatMiliseconds || isMiliseconds);
   const actualToDisplay = useCallback(
     (input) => {
-      if (input === void 0 || input === null) {
-        return input;
-      }
-      const numericValue = Number(input);
-      if (Number.isNaN(numericValue)) {
-        return 0;
-      }
+      const numericValue = normalizeSliderValue(input);
       if (!isValueFloat) {
         return numericValue;
       }
@@ -241,7 +249,7 @@ var LSSliderInput = ({
     return decimalIndex === -1 ? 0 : stepString.length - decimalIndex - 1;
   }, [displayStep]);
   useEffect(() => {
-    if (typeof value === "number" && Number.isNaN(value) === false) {
+    if (value !== void 0) {
       setDisplayValue(actualToDisplay(value));
     }
   }, [actualToDisplay, value]);
@@ -590,7 +598,7 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
         /* @__PURE__ */ jsx6(
           LSInput,
           {
-            className: "w-full",
+            className: "ls-color-picker__input",
             name,
             label,
             helperText,
@@ -603,7 +611,7 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
               "button",
               {
                 type: "button",
-                className: "relative h-6 w-6 shrink-0 rounded-md border border-white/25 bg-cover bg-center bg-no-repeat p-0 shadow-[0_0_0_1px_rgba(0,0,0,0.25)] disabled:cursor-not-allowed disabled:opacity-50",
+                className: "ls-color-picker__preview",
                 style: { background: value },
                 onClick: toggleOpen,
                 "aria-label": isPopupMode ? "Open color picker" : "Color preview",
@@ -630,7 +638,7 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
                 hideColorTypeBtns: hideGradientControls,
                 width: pickerWidth,
                 height: pickerHeight,
-                className: "[&_circle]:stroke-white [&_polyline]:stroke-white",
+                className: "ls-color-picker__gradient",
                 value,
                 onChange,
                 style: {
@@ -698,7 +706,7 @@ var LSFontPicker = memo(function LSFontPicker2({ value, onChange, fonts = [], lo
       onLoadFontsRef.current?.([nextValue]);
     });
   };
-  return /* @__PURE__ */ jsx7("div", { className: "w-full", children: /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx7("div", { className: "ls-font-picker", children: /* @__PURE__ */ jsx7(
     AutocompleteComponent,
     {
       freeSolo: true,
@@ -775,7 +783,7 @@ var LSFontPicker = memo(function LSFontPicker2({ value, onChange, fonts = [], lo
           helperText,
           placeholder,
           fullWidth: true,
-          className: "mui-ls-input noMinHeight w-full",
+          className: "mui-ls-input noMinHeight",
           variant: "outlined",
           sx: {
             "& .MuiOutlinedInput-root": {
@@ -812,9 +820,9 @@ var LSMultiSelect = ({ options, placeholder = "Select...", value, onChange, labe
       value: value ?? [],
       onChange: handleChange,
       displayEmpty: true,
-      renderValue: (selected) => /* @__PURE__ */ jsxs4("div", { className: "flex w-full min-w-0 flex-nowrap items-center justify-between gap-2 overflow-hidden whitespace-nowrap", children: [
-        /* @__PURE__ */ jsx8("div", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap", children: selected.length > 0 ? selected.map((val) => options.find((opt) => opt.value === val)?.label ?? val).join(", ") : placeholder }),
-        /* @__PURE__ */ jsx8("div", { className: "shrink-0 whitespace-nowrap", children: `(${selected.length})` })
+      renderValue: (selected) => /* @__PURE__ */ jsxs4("div", { className: "ls-multi-select-value", children: [
+        /* @__PURE__ */ jsx8("div", { className: "ls-multi-select-value__label", children: selected.length > 0 ? selected.map((val) => options.find((opt) => opt.value === val)?.label ?? val).join(", ") : placeholder }),
+        /* @__PURE__ */ jsx8("div", { className: "ls-multi-select-value__count", children: `(${selected.length})` })
       ] }),
       MenuProps: {
         slotProps: {
@@ -1162,14 +1170,14 @@ var LSVariableInputField = forwardRef4((props, ref) => {
     appendValue(`{{${variable}}}`);
   };
   const getVariableColorClass = (variableType, isSuggested = false) => {
-    if (isSuggested && variableType !== "func") return "text-[var(--customVariables,#69ffd2)]";
-    if (variableType === "func") return "text-[var(--functionVariables,var(--semanticPurple,#b489ff))]";
-    if (variableType === "system") return "text-[var(--normalVariables,var(--semanticBlue,#65b8ff))]";
-    return "text-[var(--customVariables,#69ffd2)]";
+    if (isSuggested && variableType !== "func") return "ls-variable-token--custom";
+    if (variableType === "func") return "ls-variable-token--function";
+    if (variableType === "system") return "ls-variable-token--system";
+    return "ls-variable-token--custom";
   };
-  const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs5("div", { className: `flex min-w-0 items-center ${getVariableColorClass(variableType, isSuggested)}`, children: [
-    /* @__PURE__ */ jsx11("span", { className: "min-w-0 break-all", children: `{{${variableName}}}` }),
-    variableType === "func" && /* @__PURE__ */ jsx11("span", { className: "ml-2 inline-flex shrink-0 items-center rounded border border-current px-1 py-0 text-[10px] font-semibold uppercase leading-none", title: t("variables.functionvariables", "Function variables"), children: "fx" })
+  const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs5("div", { className: `ls-variable-token ${getVariableColorClass(variableType, isSuggested)}`, children: [
+    /* @__PURE__ */ jsx11("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
+    variableType === "func" && /* @__PURE__ */ jsx11("span", { className: "ls-variable-token__badge", title: t("variables.functionvariables", "Function variables"), children: "fx" })
   ] });
   const handleFilterOptions = (options, params) => {
     const filtered = filter(options, params);
@@ -1218,8 +1226,8 @@ var LSVariableInputField = forwardRef4((props, ref) => {
             }
           }
         },
-        children: /* @__PURE__ */ jsxs5("div", { className: "flex max-h-[55vh] min-h-[50vh] w-[92vw] max-w-[1100px] flex-col overflow-hidden [--variable-custom-color:var(--customVariables,#69ffd2)] [--variable-function-color:var(--functionVariables,var(--semanticPurple,#b489ff))] [--variable-normal-color:var(--normalVariables,var(--semanticBlue,#65b8ff))]", children: [
-          /* @__PURE__ */ jsxs5("div", { className: "mb-4 text-[var(--neutralLight2,#cac9d5)]", children: [
+        children: /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__intro", children: [
             /* @__PURE__ */ jsx11("div", { children: t("overlay-variables.variables-description", "Use variables that will automatically be replaced before sending out the text") }),
             /* @__PURE__ */ jsx11(
               LSInput,
@@ -1234,18 +1242,18 @@ var LSVariableInputField = forwardRef4((props, ref) => {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs5("div", { className: "mb-1 grid grid-cols-[minmax(300px,1.5fr)_2fr] gap-8 px-1 text-[var(--neutralLight3,#9392a1)]", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__header", children: [
             /* @__PURE__ */ jsx11("div", { children: t("overlay-variables.variable", "Variable") }),
             /* @__PURE__ */ jsx11("div", { children: t("overlay-variables.description", "Description") })
           ] }),
-          /* @__PURE__ */ jsxs5("div", { className: "h-full overflow-auto pr-4", children: [
-            allowedVariableNames.length > 0 && filteredAllowedVariables?.map((variableName) => /* @__PURE__ */ jsxs5("div", { className: "grid cursor-pointer grid-cols-[minmax(300px,1.5fr)_2fr] items-start gap-8 border-b border-white/10 px-1 py-4 active:opacity-80", onClick: () => insertVariable(variableName), children: [
+          /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__list", children: [
+            allowedVariableNames.length > 0 && filteredAllowedVariables?.map((variableName) => /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__row", onClick: () => insertVariable(variableName), children: [
               renderVariableToken(variableName, getVariableVisualType(variableName), true),
-              /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] break-words leading-[1.25]", children: getAllowedVariableDescription(variableName) })
+              /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__description", children: getAllowedVariableDescription(variableName) })
             ] }, variableName)),
-            filteredSystemVariables?.map((variableKey) => /* @__PURE__ */ jsxs5("div", { className: "grid cursor-pointer grid-cols-[minmax(300px,1.5fr)_2fr] items-start gap-8 border-b border-white/10 px-1 py-4 active:opacity-80", onClick: () => insertVariable(variableKey), children: [
+            filteredSystemVariables?.map((variableKey) => /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__row", onClick: () => insertVariable(variableKey), children: [
               renderVariableToken(variableKey, getVariableVisualType(variableKey)),
-              /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] break-words leading-[1.25]", children: t(`variables.${variableKey}`, "-", { example: systemVariables?.[variableKey], interpolation: { escapeValue: false, prefix: "{{{", suffix: "}}}" } }) })
+              /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__description", children: t(`variables.${variableKey}`, "-", { example: systemVariables?.[variableKey], interpolation: { escapeValue: false, prefix: "{{{", suffix: "}}}" } }) })
             ] }, variableKey))
           ] })
         ] })
@@ -1309,7 +1317,7 @@ var VariableInputTextField = forwardRef4(
                 position: "end",
                 onClick: clickedVariableIcon,
                 ref: containerRef,
-                className: "cursor-pointer",
+                className: "ls-variable-input-adornment",
                 sx: {
                   cursor: "pointer",
                   background: "var(--primary)",

package/package.json

@@ -1,64 +1,61 @@
 {
-	"name": "@lumiastream/ui",
-	"version": "0.2.2",
-	"author": "Lumia Stream",
-	"license": "ISC",
-	"description": "Lumia UI Kit",
-	"packageManager": "pnpm@10.32.1",
-	"type": "module",
-	"main": "dist/index.js",
-	"module": "dist/index.js",
-	"types": "dist/index.d.ts",
-	"files": [
-		"dist"
-	],
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"import": "./dist/index.js"
-		}
-	},
-	"scripts": {
-		"start": "storybook dev -p 6006",
-		"build": "tsup src/index.ts",
-		"build-storybook": "storybook build",
-		"watch": "tsup src/index.ts --watch",
-		"release": "changeset && changeset tag && pnpm build && pnpm publish",
-		"prepublishOnly": "pnpm build",
-		"postpublish": "pnpm store prune && node ./scripts/postpublish-install.mjs"
-	},
-	"peerDependencies": {
-		"@codemirror/autocomplete": "^6.0.0",
-		"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-		"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
-	},
-	"devDependencies": {
-		"@codemirror/autocomplete": "^6.20.1",
-		"@storybook/builder-vite": "^10.2.17",
-		"@storybook/react-vite": "^10.2.17",
-		"@tailwindcss/postcss": "^4.2.1",
-		"@tailwindcss/vite": "^4.2.1",
-		"@types/node": "^25.5.0",
-		"@types/react": "^19.2.14",
-		"@types/react-dom": "19.2.3",
-		"postcss": "^8.5.8",
-		"sass-embedded": "^1.99.0",
-		"storybook": "^10.2.17",
-		"tailwindcss": "^4.2.1",
-		"tsup": "^8.5.1",
-		"typescript": "^5.9.3",
-		"vite": "^8.0.8"
-	},
-	"dependencies": {
-		"@emotion/react": "^11.14.0",
-		"@emotion/styled": "^11.14.1",
-		"@lumiastream/lumia-translations": "1.15.3",
-		"@lumiastream/lumia-types": "^3.2.7",
-		"@mui/icons-material": "^9.0.0",
-		"@mui/material": "^9.0.0",
-		"classnames": "^2.5.1",
-		"globals": "^17.4.0",
-		"react-best-gradient-color-picker": "^3.0.14",
-		"react-hook-form": "^7.73.1"
-	}
+  "name": "@lumiastream/ui",
+  "version": "0.2.4",
+  "author": "Lumia Stream",
+  "license": "ISC",
+  "description": "Lumia UI Kit",
+  "packageManager": "pnpm@10.32.1",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "start": "storybook dev -p 6006",
+    "build": "tsup src/index.ts",
+    "build-storybook": "storybook build",
+    "watch": "tsup src/index.ts --watch",
+    "release": "changeset && changeset tag && pnpm build && pnpm publish",
+    "prepublishOnly": "pnpm build",
+    "postpublish": "pnpm store prune && node ./scripts/postpublish-install.mjs"
+  },
+  "peerDependencies": {
+    "@codemirror/autocomplete": "^6.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@codemirror/autocomplete": "^6.20.1",
+    "@storybook/builder-vite": "^10.2.17",
+    "@storybook/react-vite": "^10.2.17",
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "19.2.3",
+    "postcss": "^8.5.8",
+    "sass-embedded": "^1.99.0",
+    "storybook": "^10.2.17",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.8"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@lumiastream/lumia-translations": "1.15.4",
+    "@lumiastream/lumia-types": "^3.2.7",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/material": "^9.0.0",
+    "classnames": "^2.5.1",
+    "globals": "^17.4.0",
+    "react-best-gradient-color-picker": "^3.0.14",
+    "react-hook-form": "^7.73.1"
+  }
 }