@lumiastream/ui 0.2.3 → 0.2.4

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 +29 -29
  3. package/package.json +59 -62
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-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');
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: {
@@ -1170,14 +1170,14 @@ var LSVariableInputField = forwardRef4((props, ref) => {
1170
1170
  appendValue(`{{${variable}}}`);
1171
1171
  };
1172
1172
  const getVariableColorClass = (variableType, isSuggested = false) => {
1173
- if (isSuggested && variableType !== "func") return "text-[var(--customVariables,#69ffd2)]";
1174
- if (variableType === "func") return "text-[var(--functionVariables,var(--semanticPurple,#b489ff))]";
1175
- if (variableType === "system") return "text-[var(--normalVariables,var(--semanticBlue,#65b8ff))]";
1176
- return "text-[var(--customVariables,#69ffd2)]";
1173
+ if (isSuggested && variableType !== "func") return "ls-variable-token--custom";
1174
+ if (variableType === "func") return "ls-variable-token--function";
1175
+ if (variableType === "system") return "ls-variable-token--system";
1176
+ return "ls-variable-token--custom";
1177
1177
  };
1178
- const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs5("div", { className: `flex min-w-0 items-center ${getVariableColorClass(variableType, isSuggested)}`, children: [
1179
- /* @__PURE__ */ jsx11("span", { className: "min-w-0 break-all", children: `{{${variableName}}}` }),
1180
- 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" })
1178
+ const renderVariableToken = (variableName, variableType, isSuggested = false) => /* @__PURE__ */ jsxs5("div", { className: `ls-variable-token ${getVariableColorClass(variableType, isSuggested)}`, children: [
1179
+ /* @__PURE__ */ jsx11("span", { className: "ls-variable-token__name", children: `{{${variableName}}}` }),
1180
+ variableType === "func" && /* @__PURE__ */ jsx11("span", { className: "ls-variable-token__badge", title: t("variables.functionvariables", "Function variables"), children: "fx" })
1181
1181
  ] });
1182
1182
  const handleFilterOptions = (options, params) => {
1183
1183
  const filtered = filter(options, params);
@@ -1226,8 +1226,8 @@ var LSVariableInputField = forwardRef4((props, ref) => {
1226
1226
  }
1227
1227
  }
1228
1228
  },
1229
- 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: [
1230
- /* @__PURE__ */ jsxs5("div", { className: "mb-4 text-[var(--neutralLight2,#cac9d5)]", children: [
1229
+ children: /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker", children: [
1230
+ /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__intro", children: [
1231
1231
  /* @__PURE__ */ jsx11("div", { children: t("overlay-variables.variables-description", "Use variables that will automatically be replaced before sending out the text") }),
1232
1232
  /* @__PURE__ */ jsx11(
1233
1233
  LSInput,
@@ -1242,18 +1242,18 @@ var LSVariableInputField = forwardRef4((props, ref) => {
1242
1242
  }
1243
1243
  )
1244
1244
  ] }),
1245
- /* @__PURE__ */ jsxs5("div", { className: "mb-1 grid grid-cols-[minmax(300px,1.5fr)_2fr] gap-8 px-1 text-[var(--neutralLight3,#9392a1)]", children: [
1245
+ /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__header", children: [
1246
1246
  /* @__PURE__ */ jsx11("div", { children: t("overlay-variables.variable", "Variable") }),
1247
1247
  /* @__PURE__ */ jsx11("div", { children: t("overlay-variables.description", "Description") })
1248
1248
  ] }),
1249
- /* @__PURE__ */ jsxs5("div", { className: "h-full overflow-auto pr-4", children: [
1250
- 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: [
1249
+ /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__list", children: [
1250
+ allowedVariableNames.length > 0 && filteredAllowedVariables?.map((variableName) => /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__row", onClick: () => insertVariable(variableName), children: [
1251
1251
  renderVariableToken(variableName, getVariableVisualType(variableName), true),
1252
- /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] break-words leading-[1.25]", children: getAllowedVariableDescription(variableName) })
1252
+ /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__description", children: getAllowedVariableDescription(variableName) })
1253
1253
  ] }, variableName)),
1254
- 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: [
1254
+ filteredSystemVariables?.map((variableKey) => /* @__PURE__ */ jsxs5("div", { className: "ls-variable-picker__row", onClick: () => insertVariable(variableKey), children: [
1255
1255
  renderVariableToken(variableKey, getVariableVisualType(variableKey)),
1256
- /* @__PURE__ */ jsx11("div", { className: "max-w-[600px] break-words leading-[1.25]", children: t(`variables.${variableKey}`, "-", { example: systemVariables?.[variableKey], interpolation: { escapeValue: false, prefix: "{{{", suffix: "}}}" } }) })
1256
+ /* @__PURE__ */ jsx11("div", { className: "ls-variable-picker__description", children: t(`variables.${variableKey}`, "-", { example: systemVariables?.[variableKey], interpolation: { escapeValue: false, prefix: "{{{", suffix: "}}}" } }) })
1257
1257
  ] }, variableKey))
1258
1258
  ] })
1259
1259
  ] })
@@ -1317,7 +1317,7 @@ var VariableInputTextField = forwardRef4(
1317
1317
  position: "end",
1318
1318
  onClick: clickedVariableIcon,
1319
1319
  ref: containerRef,
1320
- className: "cursor-pointer",
1320
+ className: "ls-variable-input-adornment",
1321
1321
  sx: {
1322
1322
  cursor: "pointer",
1323
1323
  background: "var(--primary)",
package/package.json CHANGED
@@ -1,64 +1,61 @@
1
1
  {
2
- "name": "@lumiastream/ui",
3
- "version": "0.2.3",
4
- "author": "Lumia Stream",
5
- "license": "ISC",
6
- "description": "Lumia UI Kit",
7
- "packageManager": "pnpm@10.32.1",
8
- "type": "module",
9
- "main": "dist/index.js",
10
- "module": "dist/index.js",
11
- "types": "dist/index.d.ts",
12
- "files": [
13
- "dist"
14
- ],
15
- "exports": {
16
- ".": {
17
- "types": "./dist/index.d.ts",
18
- "import": "./dist/index.js"
19
- }
20
- },
21
- "scripts": {
22
- "start": "storybook dev -p 6006",
23
- "build": "tsup src/index.ts",
24
- "build-storybook": "storybook build",
25
- "watch": "tsup src/index.ts --watch",
26
- "release": "changeset && changeset tag && pnpm build && pnpm publish",
27
- "prepublishOnly": "pnpm build",
28
- "postpublish": "pnpm store prune && node ./scripts/postpublish-install.mjs"
29
- },
30
- "peerDependencies": {
31
- "@codemirror/autocomplete": "^6.0.0",
32
- "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
33
- "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
34
- },
35
- "devDependencies": {
36
- "@codemirror/autocomplete": "^6.20.1",
37
- "@storybook/builder-vite": "^10.2.17",
38
- "@storybook/react-vite": "^10.2.17",
39
- "@tailwindcss/postcss": "^4.2.1",
40
- "@tailwindcss/vite": "^4.2.1",
41
- "@types/node": "^25.5.0",
42
- "@types/react": "^19.2.14",
43
- "@types/react-dom": "19.2.3",
44
- "postcss": "^8.5.8",
45
- "sass-embedded": "^1.99.0",
46
- "storybook": "^10.2.17",
47
- "tailwindcss": "^4.2.1",
48
- "tsup": "^8.5.1",
49
- "typescript": "^5.9.3",
50
- "vite": "^8.0.8"
51
- },
52
- "dependencies": {
53
- "@emotion/react": "^11.14.0",
54
- "@emotion/styled": "^11.14.1",
55
- "@lumiastream/lumia-translations": "1.15.3",
56
- "@lumiastream/lumia-types": "^3.2.7",
57
- "@mui/icons-material": "^9.0.0",
58
- "@mui/material": "^9.0.0",
59
- "classnames": "^2.5.1",
60
- "globals": "^17.4.0",
61
- "react-best-gradient-color-picker": "^3.0.14",
62
- "react-hook-form": "^7.73.1"
63
- }
2
+ "name": "@lumiastream/ui",
3
+ "version": "0.2.4",
4
+ "author": "Lumia Stream",
5
+ "license": "ISC",
6
+ "description": "Lumia UI Kit",
7
+ "packageManager": "pnpm@10.32.1",
8
+ "type": "module",
9
+ "main": "dist/index.js",
10
+ "module": "dist/index.js",
11
+ "types": "dist/index.d.ts",
12
+ "files": [
13
+ "dist"
14
+ ],
15
+ "exports": {
16
+ ".": {
17
+ "types": "./dist/index.d.ts",
18
+ "import": "./dist/index.js"
19
+ }
20
+ },
21
+ "scripts": {
22
+ "start": "storybook dev -p 6006",
23
+ "build": "tsup src/index.ts",
24
+ "build-storybook": "storybook build",
25
+ "watch": "tsup src/index.ts --watch",
26
+ "release": "changeset && changeset tag && pnpm build && pnpm publish",
27
+ "prepublishOnly": "pnpm build",
28
+ "postpublish": "pnpm store prune && node ./scripts/postpublish-install.mjs"
29
+ },
30
+ "peerDependencies": {
31
+ "@codemirror/autocomplete": "^6.0.0",
32
+ "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
33
+ "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
34
+ },
35
+ "devDependencies": {
36
+ "@codemirror/autocomplete": "^6.20.1",
37
+ "@storybook/builder-vite": "^10.2.17",
38
+ "@storybook/react-vite": "^10.2.17",
39
+ "@types/node": "^25.5.0",
40
+ "@types/react": "^19.2.14",
41
+ "@types/react-dom": "19.2.3",
42
+ "postcss": "^8.5.8",
43
+ "sass-embedded": "^1.99.0",
44
+ "storybook": "^10.2.17",
45
+ "tsup": "^8.5.1",
46
+ "typescript": "^5.9.3",
47
+ "vite": "^8.0.8"
48
+ },
49
+ "dependencies": {
50
+ "@emotion/react": "^11.14.0",
51
+ "@emotion/styled": "^11.14.1",
52
+ "@lumiastream/lumia-translations": "1.15.4",
53
+ "@lumiastream/lumia-types": "^3.2.7",
54
+ "@mui/icons-material": "^9.0.0",
55
+ "@mui/material": "^9.0.0",
56
+ "classnames": "^2.5.1",
57
+ "globals": "^17.4.0",
58
+ "react-best-gradient-color-picker": "^3.0.14",
59
+ "react-hook-form": "^7.73.1"
60
+ }
64
61
  }