@lumiastream/ui 0.2.4-beta.1 → 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +3 -5
  2. package/dist/index.js +52 -85
  3. package/package.json +1 -4
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Lumia UI Kit
2
2
 
3
- 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`.
3
+ 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`.
4
4
 
5
5
  ---
6
6
 
@@ -9,7 +9,6 @@ A modern, Tailwind‑powered component library used across the Lumia Stream eco
9
9
  | Feature | Details |
10
10
  | --------------------- | ----------------------------------------------------- |
11
11
  | **React 18 → 19** | Built and typed for the latest React majors. |
12
- | **Tailwind CSS 4** | Utility‑first styling with full theme access. |
13
12
  | **TypeScript first** | 100 % typed public API (`.d.ts` included). |
14
13
  | **Storybook 9** | Live docs with interactive playgrounds & a11y checks. |
15
14
  | **ESM + CJS bundles** | Works in every modern build tool. |
@@ -25,7 +24,6 @@ npm i @lumiastream/ui
25
24
  > **Peer dependencies**
26
25
  >
27
26
  > - React ≥ 18.0 < 20 (`^18 || ^19`)
28
- > - Tailwind CSS is _already compiled_—you do **not** need Tailwind in the host app unless you want to extend the theme.
29
27
 
30
28
  ---
31
29
 
@@ -36,7 +34,7 @@ npm i @lumiastream/ui
36
34
  import { LSButton } from "@lumiastream/ui";
37
35
 
38
36
  export default function App() {
39
- return <LSButton variant="primary" label="Click Me" />;
37
+ return <LSButton variant="primary" label="Click Me" />;
40
38
  }
41
39
  ```
42
40
 
@@ -61,7 +59,7 @@ The public Storybook for the latest release lives at [https://ui.lumiastream.com
61
59
  # clone & bootstrap
62
60
  pnpm install
63
61
 
64
- # compile library (ESM + CJS + types) and Tailwind sheet
62
+ # compile library (ESM + CJS + types)
65
63
  pnpm build
66
64
  ```
67
65
 
package/dist/index.js CHANGED
@@ -20,8 +20,8 @@ function styleInject(css, { insertAt } = {}) {
20
20
  }
21
21
  }
22
22
 
23
- // src/tailwind.css
24
- 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-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\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 --font-weight-bold: 700;\n --radius-sm: 0.25rem;\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.m-0 {\n margin: calc(var(--spacing) * 0);\n}\n.mb-1 {\n margin-bottom: calc(var(--spacing) * 1);\n}\n.mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\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.hidden {\n display: none;\n}\n.inline-block {\n display: inline-block;\n}\n.inline-flex {\n display: inline-flex;\n}\n.h-5 {\n height: calc(var(--spacing) * 5);\n}\n.h-6 {\n height: calc(var(--spacing) * 6);\n}\n.h-8 {\n height: calc(var(--spacing) * 8);\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-5 {\n width: calc(var(--spacing) * 5);\n}\n.w-6 {\n width: calc(var(--spacing) * 6);\n}\n.w-8 {\n width: calc(var(--spacing) * 8);\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\\(260px\\,1\\.5fr\\)_2fr_minmax\\(140px\\,1fr\\)\\] {\n grid-template-columns: minmax(260px, 1.5fr) 2fr minmax(140px, 1fr);\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.justify-between {\n justify-content: space-between;\n}\n.justify-center {\n justify-content: center;\n}\n.gap-1 {\n gap: calc(var(--spacing) * 1);\n}\n.gap-2 {\n gap: calc(var(--spacing) * 2);\n}\n.gap-4 {\n gap: calc(var(--spacing) * 4);\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.rounded-sm {\n border-radius: var(--radius-sm);\n}\n.border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n}\n.border-0 {\n border-style: var(--tw-border-style);\n border-width: 0px;\n}\n.border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n}\n.border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n}\n.border-b-0 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0px;\n}\n.border-solid {\n --tw-border-style: solid;\n border-style: solid;\n}\n.border-\\[var\\(--neutralDark4\\,\\#393853\\)\\] {\n border-color: var(--neutralDark4,#393853);\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.border-b-\\[var\\(--neutralDark4\\,\\#393853\\)\\] {\n border-bottom-color: var(--neutralDark4,#393853);\n}\n.bg-\\[\\#1b1a28\\] {\n background-color: #1b1a28;\n}\n.bg-\\[var\\(--primary\\)\\]\\/10 {\n background-color: var(--primary);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--primary) 10%, transparent);\n }\n}\n.bg-transparent {\n background-color: transparent;\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.object-cover {\n object-fit: cover;\n}\n.p-0 {\n padding: calc(var(--spacing) * 0);\n}\n.p-2 {\n padding: calc(var(--spacing) * 2);\n}\n.p-6 {\n padding: calc(var(--spacing) * 6);\n}\n.px-1 {\n padding-inline: calc(var(--spacing) * 1);\n}\n.px-2 {\n padding-inline: calc(var(--spacing) * 2);\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-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-\\[1px\\] {\n padding-block: 1px;\n}\n.pt-0 {\n padding-top: calc(var(--spacing) * 0);\n}\n.pt-2 {\n padding-top: calc(var(--spacing) * 2);\n}\n.pr-4 {\n padding-right: calc(var(--spacing) * 4);\n}\n.pb-0 {\n padding-bottom: calc(var(--spacing) * 0);\n}\n.pb-2 {\n padding-bottom: calc(var(--spacing) * 2);\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-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n}\n.text-\\[10px\\] {\n font-size: 10px;\n}\n.leading-none {\n --tw-leading: 1;\n line-height: 1;\n}\n.font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\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\\(--childVariables\\,\\#ffa66e\\)\\] {\n color: var(--childVariables,#ffa66e);\n}\n.text-\\[var\\(--customVariables\\,\\#69ffd2\\)\\] {\n color: var(--customVariables,#69ffd2);\n}\n.text-\\[var\\(--functionVariables\\,\\#b47eea\\)\\] {\n color: var(--functionVariables,#b47eea);\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\\,\\#69a5ff\\)\\] {\n color: var(--normalVariables,#69a5ff);\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.last-of-type\\:border-b-0 {\n &:last-of-type {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 0px;\n }\n}\n.hover\\:bg-\\[var\\(--neutralDark2\\,\\#1f1d36\\)\\]\\/40 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--neutralDark2,#1f1d36);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--neutralDark2,#1f1d36) 40%, transparent);\n }\n }\n }\n}\n.hover\\:bg-\\[var\\(--neutralDark4\\,\\#393853\\)\\]\\/50 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--neutralDark4,#393853);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--neutralDark4,#393853) 50%, transparent);\n }\n }\n }\n}\n.hover\\:bg-\\[var\\(--primary\\)\\]\\/20 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--primary);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--primary) 20%, transparent);\n }\n }\n }\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');
23
+ // src/lumia-ui.css
24
+ 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");
25
25
 
26
26
  // src/components/LSButton/LSButton.tsx
27
27
  import { jsx } from "react/jsx-runtime";
@@ -38,8 +38,8 @@ var LSButton = ({
38
38
  {
39
39
  type: "button",
40
40
  className: [
41
- "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",
42
- size === "small" ? "px-3 py-1 text-sm" : size === "large" ? "px-6 py-3 text-lg" : "px-4 py-2 text-base"
41
+ "ls-button",
42
+ size === "small" ? "ls-button--small" : size === "large" ? "ls-button--large" : "ls-button--medium"
43
43
  ].join(" "),
44
44
  style: { background },
45
45
  ...props,
@@ -149,7 +149,7 @@ var LSInput = forwardRef(
149
149
  FormControl,
150
150
  {
151
151
  variant: "outlined",
152
- className: classNames("mui-ls-input w-full", className, {
152
+ className: classNames("mui-ls-input", className, {
153
153
  noMinHeight: $noMinHeight,
154
154
  bypassMuiColor: bypasscolor || bypasscolor === "default"
155
155
  }),
@@ -598,7 +598,7 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
598
598
  /* @__PURE__ */ jsx6(
599
599
  LSInput,
600
600
  {
601
- className: "w-full",
601
+ className: "ls-color-picker__input",
602
602
  name,
603
603
  label,
604
604
  helperText,
@@ -611,7 +611,7 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
611
611
  "button",
612
612
  {
613
613
  type: "button",
614
- 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",
614
+ className: "ls-color-picker__preview",
615
615
  style: { background: value },
616
616
  onClick: toggleOpen,
617
617
  "aria-label": isPopupMode ? "Open color picker" : "Color preview",
@@ -638,7 +638,7 @@ var LSColorPicker = ({ value = DEFAULT_COLOR, onChange, onBlur, className, name,
638
638
  hideColorTypeBtns: hideGradientControls,
639
639
  width: pickerWidth,
640
640
  height: pickerHeight,
641
- className: "[&_circle]:stroke-white [&_polyline]:stroke-white",
641
+ className: "ls-color-picker__gradient",
642
642
  value,
643
643
  onChange,
644
644
  style: {
@@ -706,7 +706,7 @@ var LSFontPicker = memo(function LSFontPicker2({ value, onChange, fonts = [], lo
706
706
  onLoadFontsRef.current?.([nextValue]);
707
707
  });
708
708
  };
709
- return /* @__PURE__ */ jsx7("div", { className: "w-full", children: /* @__PURE__ */ jsx7(
709
+ return /* @__PURE__ */ jsx7("div", { className: "ls-font-picker", children: /* @__PURE__ */ jsx7(
710
710
  AutocompleteComponent,
711
711
  {
712
712
  freeSolo: true,
@@ -783,7 +783,7 @@ var LSFontPicker = memo(function LSFontPicker2({ value, onChange, fonts = [], lo
783
783
  helperText,
784
784
  placeholder,
785
785
  fullWidth: true,
786
- className: "mui-ls-input noMinHeight w-full",
786
+ className: "mui-ls-input noMinHeight",
787
787
  variant: "outlined",
788
788
  sx: {
789
789
  "& .MuiOutlinedInput-root": {
@@ -820,9 +820,9 @@ var LSMultiSelect = ({ options, placeholder = "Select...", value, onChange, labe
820
820
  value: value ?? [],
821
821
  onChange: handleChange,
822
822
  displayEmpty: true,
823
- 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: [
824
- /* @__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 }),
825
- /* @__PURE__ */ jsx8("div", { className: "shrink-0 whitespace-nowrap", children: `(${selected.length})` })
823
+ renderValue: (selected) => /* @__PURE__ */ jsxs4("div", { className: "ls-multi-select-value", children: [
824
+ /* @__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 }),
825
+ /* @__PURE__ */ jsx8("div", { className: "ls-multi-select-value__count", children: `(${selected.length})` })
826
826
  ] }),
827
827
  MenuProps: {
828
828
  slotProps: {
@@ -1152,12 +1152,12 @@ var humanizeVariableName = (rawName) => {
1152
1152
  return rawName.replace(/^_+|_+$/g, "").replace(/_/g, " ").replace(/\s+/g, " ").trim().replace(/\b\w/g, (char) => char.toUpperCase());
1153
1153
  };
1154
1154
  var getVariableColorClass = (variableType, isSuggested) => {
1155
- if (isSuggested && variableType !== "func") return "text-[var(--customVariables,#69ffd2)]";
1156
- if (variableType === "func") return "text-[var(--functionVariables,#b47eea)]";
1157
- if (variableType === "system") return "text-[var(--normalVariables,#69a5ff)]";
1158
- return "text-[var(--customVariables,#69ffd2)]";
1155
+ if (isSuggested && variableType !== "func") return "ls-variable-token--custom";
1156
+ if (variableType === "func") return "ls-variable-token--function";
1157
+ if (variableType === "system") return "ls-variable-token--system";
1158
+ return "ls-variable-token--custom";
1159
1159
  };
1160
- var CHILD_VARIABLE_COLOR_CLASS = "text-[var(--childVariables,#ffa66e)]";
1160
+ var CHILD_VARIABLE_COLOR_CLASS = "ls-variable-token--child";
1161
1161
  var LSVariableInputField = forwardRef4((props, ref) => {
1162
1162
  const context = useContext(LSVariableInputContext);
1163
1163
  const {
@@ -1532,16 +1532,9 @@ var LSVariableInputField = forwardRef4((props, ref) => {
1532
1532
  afterFilter?.(filtered);
1533
1533
  return filtered;
1534
1534
  };
1535
- const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs5("div", { className: `flex min-w-0 items-center ${getVariableColorClass(variableType, isSuggested)}`, children: [
1536
- /* @__PURE__ */ jsx11("span", { className: "min-w-0 break-all", children: `{{${variableName}}}` }),
1537
- variableType === "func" && /* @__PURE__ */ jsx11(
1538
- "span",
1539
- {
1540
- className: "ml-2 inline-flex shrink-0 items-center rounded border border-current px-1 py-[1px] text-[10px] font-semibold leading-none uppercase",
1541
- title: t("variables.functionvariables", "Function variables"),
1542
- children: "fx"
1543
- }
1544
- )
1535
+ const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs5("div", { className: `ls-variable-token ${getVariableColorClass(variableType, isSuggested)}`, children: [
1536
+ /* @__PURE__ */ jsx11("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
1537
+ variableType === "func" && /* @__PURE__ */ jsx11("span", { className: "ls-variable-token__badge", title: t("variables.functionvariables", "Function variables"), children: "fx" })
1545
1538
  ] });
1546
1539
  const renderExpandToggle = (path, expanded) => /* @__PURE__ */ jsx11(
1547
1540
  "button",
@@ -1551,23 +1544,13 @@ var LSVariableInputField = forwardRef4((props, ref) => {
1551
1544
  e.stopPropagation();
1552
1545
  toggleExpand(path);
1553
1546
  },
1554
- className: "flex h-5 w-5 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 text-[var(--neutralLight2,#cac9d5)] hover:bg-[var(--neutralDark4,#393853)]/50",
1547
+ className: `ls-variable-picker__expand-toggle${expanded ? " ls-variable-picker__expand-toggle--expanded" : ""}`,
1555
1548
  "aria-label": expanded ? "Collapse" : "Expand",
1556
1549
  "aria-expanded": expanded,
1557
- children: /* @__PURE__ */ jsx11(
1558
- ArrowRight,
1559
- {
1560
- style: {
1561
- width: 14,
1562
- height: 14,
1563
- transform: expanded ? "rotate(90deg)" : "none",
1564
- transition: "transform 0.15s ease"
1565
- }
1566
- }
1567
- )
1550
+ children: /* @__PURE__ */ jsx11(ArrowRight, { style: { width: 14, height: 14 } })
1568
1551
  }
1569
1552
  );
1570
- const renderExpandSpacer = () => /* @__PURE__ */ jsx11("span", { className: "inline-block h-5 w-5 shrink-0", "aria-hidden": true });
1553
+ const renderExpandSpacer = () => /* @__PURE__ */ jsx11("span", { className: "ls-variable-picker__expand-spacer", "aria-hidden": true });
1571
1554
  const getVariableValuePreview = (variableValue) => {
1572
1555
  const { displayValue, fullValue } = getVariableValueDisplay(variableValue);
1573
1556
  return { displayValue, fullValue };
@@ -1580,18 +1563,18 @@ var LSVariableInputField = forwardRef4((props, ref) => {
1580
1563
  /* @__PURE__ */ jsxs5(
1581
1564
  "div",
1582
1565
  {
1583
- className: "grid min-w-0 cursor-pointer grid-cols-[minmax(260px,1.5fr)_2fr_minmax(140px,1fr)] gap-4 border-b border-[var(--neutralDark4,#393853)] pb-2 pt-2 last-of-type:border-b-0 active:opacity-80",
1566
+ className: "ls-variable-picker__row ls-variable-picker__row--child",
1584
1567
  onClick: () => {
1585
1568
  if (node.isExpandable && !expanded) toggleExpand(fullToken);
1586
1569
  else insertVariable(fullToken);
1587
1570
  },
1588
1571
  children: [
1589
- /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-center gap-1", style: { paddingLeft: `${node.depth * 1.25}rem` }, children: [
1572
+ /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__token-cell", style: { paddingLeft: `${node.depth * 1.25}rem` }, children: [
1590
1573
  node.isExpandable ? renderExpandToggle(fullToken, expanded) : renderExpandSpacer(),
1591
- /* @__PURE__ */ jsx11("div", { className: `flex min-w-0 items-center ${CHILD_VARIABLE_COLOR_CLASS}`, children: /* @__PURE__ */ jsx11("span", { className: "min-w-0 break-all", children: `{{${fullToken}}}` }) })
1574
+ /* @__PURE__ */ jsx11("div", { className: `ls-variable-token ${CHILD_VARIABLE_COLOR_CLASS}`, children: /* @__PURE__ */ jsx11("span", { className: "ls-variable-token__name", children: `{{${fullToken}}}` }) })
1592
1575
  ] }),
1593
- /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] min-w-0 break-words", children: node.displayKey }),
1594
- /* @__PURE__ */ jsx11("div", { className: "ellipse-1 min-w-0 text-[var(--neutralLight2,#cac9d5)]", title: fullValue, children: displayValue })
1576
+ /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__description", children: node.displayKey }),
1577
+ /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__value", title: fullValue, children: displayValue })
1595
1578
  ]
1596
1579
  }
1597
1580
  ),
@@ -1638,19 +1621,19 @@ var LSVariableInputField = forwardRef4((props, ref) => {
1638
1621
  {
1639
1622
  ...optionProps,
1640
1623
  key: String(opt?.label ?? opt?.value ?? ""),
1641
- className: `flex items-center gap-2 px-3 py-2 cursor-pointer ${isSelected ? "bg-[var(--primary)]/10 hover:bg-[var(--primary)]/20" : "hover:bg-[var(--neutralDark2,#1f1d36)]/40"}`
1624
+ className: `ls-variable-option${isSelected ? " ls-variable-option--selected" : ""}`
1642
1625
  },
1643
- thumb ? /* @__PURE__ */ jsx11("img", { src: thumb, className: "h-8 w-8 rounded object-cover shrink-0", alt: "" }) : /* @__PURE__ */ jsx11("span", { className: "inline-block h-8 w-8 shrink-0" }),
1644
- /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
1645
- /* @__PURE__ */ jsx11("div", { className: "ellipse-1", children: resolveOptionLabel(opt) }),
1646
- helperText ? /* @__PURE__ */ jsx11("div", { className: "ellipse-1 text-xs text-[var(--neutralLight3,#9392a1)]", children: helperText }) : null
1626
+ thumb ? /* @__PURE__ */ jsx11("img", { src: thumb, className: "ls-variable-option__thumb", alt: "" }) : /* @__PURE__ */ jsx11("span", { className: "ls-variable-option__thumb ls-variable-option__thumb--placeholder" }),
1627
+ /* @__PURE__ */ jsxs5("div", { className: "ls-variable-option__body", children: [
1628
+ /* @__PURE__ */ jsx11("div", { className: "ls-variable-option__label", children: resolveOptionLabel(opt) }),
1629
+ helperText ? /* @__PURE__ */ jsx11("div", { className: "ls-variable-option__helper", children: helperText }) : null
1647
1630
  ] })
1648
1631
  );
1649
1632
  };
1650
1633
  const showSuggestedSection = allowedVariableNames.length > 0 && filteredAllowedVariables.length > 0;
1651
- const pickerBody = /* @__PURE__ */ jsxs5("div", { className: "flex max-h-[55vh] min-h-[50vh] w-[92vw] max-w-[1100px] flex-col overflow-hidden p-2", children: [
1652
- /* @__PURE__ */ jsxs5("div", { className: "mb-2 text-[var(--neutralLight2,#cac9d5)]", children: [
1653
- /* @__PURE__ */ jsx11("div", { className: "text-sm", children: t("overlay-variables.variables-description", "Use variables that will automatically be replaced before sending out the text") }),
1634
+ const pickerBody = /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker ls-variable-picker--three-col", children: [
1635
+ /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__intro", children: [
1636
+ /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__intro-text", children: t("overlay-variables.variables-description", "Use variables that will automatically be replaced before sending out the text") }),
1654
1637
  /* @__PURE__ */ jsx11(
1655
1638
  LSInput,
1656
1639
  {
@@ -1664,14 +1647,14 @@ var LSVariableInputField = forwardRef4((props, ref) => {
1664
1647
  }
1665
1648
  )
1666
1649
  ] }),
1667
- /* @__PURE__ */ jsxs5("div", { className: "mb-1 grid grid-cols-[minmax(260px,1.5fr)_2fr_minmax(140px,1fr)] text-sm text-[var(--neutralLight3,#9392a1)]", children: [
1650
+ /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__header", children: [
1668
1651
  /* @__PURE__ */ jsx11("div", { children: t("commands.variable", "Variable") }),
1669
1652
  /* @__PURE__ */ jsx11("div", { children: t("commands.description", "Description") }),
1670
1653
  /* @__PURE__ */ jsx11("div", { children: t("common.value", "Value") })
1671
1654
  ] }),
1672
- /* @__PURE__ */ jsxs5("div", { className: "h-full overflow-auto pr-4", children: [
1673
- showSuggestedSection && /* @__PURE__ */ jsxs5("fieldset", { className: "m-0 mb-2 w-full rounded-sm border-2 border-solid border-[var(--neutralDark4,#393853)] px-2 pb-0 pt-0", children: [
1674
- /* @__PURE__ */ jsx11("legend", { className: "flex items-center justify-center gap-2 px-2 text-sm text-[var(--neutralLight2,#cac9d5)]", children: t("commands.suggested-variables", "Suggested Variables") }),
1655
+ /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__list", children: [
1656
+ showSuggestedSection && /* @__PURE__ */ jsxs5("fieldset", { className: "ls-variable-picker__field", children: [
1657
+ /* @__PURE__ */ jsx11("legend", { className: "ls-variable-picker__legend", children: t("commands.suggested-variables", "Suggested Variables") }),
1675
1658
  filteredAllowedVariables.map((definition, idx) => {
1676
1659
  const variableType = getAllowedVariableVisualType(definition.name);
1677
1660
  const tree = getAllowedVariableTree(definition);
@@ -1679,22 +1662,23 @@ var LSVariableInputField = forwardRef4((props, ref) => {
1679
1662
  const expandable = !!tree && tree.length > 0;
1680
1663
  const expanded = expandable && isPathExpanded(definition.name);
1681
1664
  const isLast = idx === filteredAllowedVariables.length - 1;
1665
+ const rowCls = `ls-variable-picker__row${isLast && !expanded ? " ls-variable-picker__row--no-border" : ""}`;
1682
1666
  return /* @__PURE__ */ jsxs5(Fragment, { children: [
1683
1667
  /* @__PURE__ */ jsxs5(
1684
1668
  "div",
1685
1669
  {
1686
- className: `grid min-w-0 cursor-pointer grid-cols-[minmax(260px,1.5fr)_2fr_minmax(140px,1fr)] gap-4 border-b ${isLast && !expanded ? "border-b-0" : "border-b-[var(--neutralDark4,#393853)]"} pb-2 pt-2 active:opacity-80`,
1670
+ className: rowCls,
1687
1671
  onClick: () => {
1688
1672
  if (expandable && !expanded) toggleExpand(definition.name);
1689
1673
  else insertVariable(definition.name);
1690
1674
  },
1691
1675
  children: [
1692
- /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-center gap-1", children: [
1676
+ /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__token-cell", children: [
1693
1677
  expandable ? renderExpandToggle(definition.name, expanded) : renderExpandSpacer(),
1694
1678
  renderVariableToken(definition.name, variableType, true)
1695
1679
  ] }),
1696
- /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] min-w-0 break-words", children: getAllowedVariableDescription(definition.name) }),
1697
- /* @__PURE__ */ jsx11("div", { className: "ellipse-1 min-w-0 text-[var(--neutralLight2,#cac9d5)]", title: fullValue, children: displayValue })
1680
+ /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__description", children: getAllowedVariableDescription(definition.name) }),
1681
+ /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__value", title: fullValue, children: displayValue })
1698
1682
  ]
1699
1683
  }
1700
1684
  ),
@@ -1713,18 +1697,18 @@ var LSVariableInputField = forwardRef4((props, ref) => {
1713
1697
  /* @__PURE__ */ jsxs5(
1714
1698
  "div",
1715
1699
  {
1716
- className: "grid min-w-0 cursor-pointer grid-cols-[minmax(260px,1.5fr)_2fr_minmax(140px,1fr)] gap-4 border-b border-[var(--neutralDark4,#393853)] pb-2 pt-2 last-of-type:border-b-0 active:opacity-80",
1700
+ className: "ls-variable-picker__row",
1717
1701
  onClick: () => {
1718
1702
  if (expandable && !expanded) toggleExpand(rootToken);
1719
1703
  else insertVariable(rootToken);
1720
1704
  },
1721
1705
  children: [
1722
- /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-center gap-1", children: [
1706
+ /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__token-cell", children: [
1723
1707
  expandable ? renderExpandToggle(rootToken, expanded) : renderExpandSpacer(),
1724
1708
  renderVariableToken(variable.name, variableType)
1725
1709
  ] }),
1726
- /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] min-w-0 break-words", children: getSystemVariableDescription(variable) }),
1727
- /* @__PURE__ */ jsx11("div", { className: "ellipse-1 min-w-0 text-[var(--neutralLight2,#cac9d5)]", title: fullValue, children: displayValue })
1710
+ /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__description", children: getSystemVariableDescription(variable) }),
1711
+ /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__value", title: fullValue, children: displayValue })
1728
1712
  ]
1729
1713
  }
1730
1714
  ),
@@ -1899,25 +1883,8 @@ var VariableInputTextField = forwardRef4(
1899
1883
  position: "end",
1900
1884
  onClick: clickedVariableIcon,
1901
1885
  ref: containerRef,
1902
- sx: {
1903
- cursor: "pointer",
1904
- background: "var(--primary)",
1905
- borderRadius: "50%",
1906
- display: "flex",
1907
- alignItems: "center",
1908
- justifyContent: "center",
1909
- padding: "4px",
1910
- minWidth: "22px",
1911
- minHeight: "22px",
1912
- width: "22px",
1913
- height: "22px",
1914
- color: "var(--neutralDark1)",
1915
- "& *": {
1916
- cursor: "pointer",
1917
- color: "var(--neutralDark1)"
1918
- }
1919
- },
1920
- children: /* @__PURE__ */ jsx11("span", { className: "font-bold", children: "{}" })
1886
+ className: "ls-variable-input-adornment",
1887
+ children: "{}"
1921
1888
  }
1922
1889
  ) }) : null
1923
1890
  ] })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lumiastream/ui",
3
- "version": "0.2.4-beta.1",
3
+ "version": "0.2.5",
4
4
  "author": "Lumia Stream",
5
5
  "license": "ISC",
6
6
  "description": "Lumia UI Kit",
@@ -36,15 +36,12 @@
36
36
  "@codemirror/autocomplete": "^6.20.1",
37
37
  "@storybook/builder-vite": "^10.2.17",
38
38
  "@storybook/react-vite": "^10.2.17",
39
- "@tailwindcss/postcss": "^4.2.1",
40
- "@tailwindcss/vite": "^4.2.1",
41
39
  "@types/node": "^25.5.0",
42
40
  "@types/react": "^19.2.14",
43
41
  "@types/react-dom": "19.2.3",
44
42
  "postcss": "^8.5.8",
45
43
  "sass-embedded": "^1.99.0",
46
44
  "storybook": "^10.2.17",
47
- "tailwindcss": "^4.2.1",
48
45
  "tsup": "^8.5.1",
49
46
  "typescript": "^5.9.3",
50
47
  "vite": "^8.0.8"