kaleido-ui 0.1.123 → 0.1.129

package/README.md

@@ -15,13 +15,19 @@ npm install kaleido-ui
 | `kaleido-ui` | Web components (Tailwind CSS + Radix UI) |
 | `kaleido-ui/tokens` | Platform-agnostic design tokens (zero deps) |
 | `kaleido-ui/native` | React Native components (WDK + custom) |
-| `kaleido-ui/css` | Tailwind v4 `@theme` tokens, CSS variables, keyframes, utilities, Material Symbols |
+| `kaleido-ui/css` | CSS variables (light + dark), keyframes, utilities, and the Tailwind v4 `@theme` tokens |
 | `kaleido-ui/css/brand` | Opt-in brand theme: AA-safe light primary, lifted dark danger/info, coloured page wash (import after `kaleido-ui/css`) |
+| `kaleido-ui/tailwind` | Tailwind **v3** preset built from the tokens |
 | `kaleido-ui/brand/*.svg` | Logo files: `kaleidoswap-pictogram.svg`, `kaleidoswap-fullogo-{horizontal,vertical}.svg` (white wordmark) and `-on-light.svg` variants |
 
-> **Tailwind v4 only.** `kaleido-ui/css` ships the full theme as Tailwind v4
-> `@theme` blocks, so there is no separate Tailwind preset to configure —
-> importing the CSS registers every token and generates the utilities.
+> **Tailwind v4 and v3 are both supported.** The library is built with v4.
+> On v4, `kaleido-ui/css` carries the whole theme as `@theme` blocks — no
+> preset. On v3, which ignores `@theme` and only generates the opacity steps in
+> its own scale, use the `kaleido-ui/tailwind` preset *and* import
+> `kaleido-ui/css` for the variables it points at. Either way, scan the
+> package's `dist` so the components' classes are generated.
+> `tests/tailwind-v3-preset.test.tsx` compiles the components with both and
+> fails if v3 misses a class v4 generates.
 
 ## Quick Start — Web (Tailwind v4)
 
@@ -30,12 +36,36 @@ npm install kaleido-ui
 ```css
 /* styles.css */
 @import "tailwindcss";
+@import "tw-animate-css";   /* Dialog/Select/Toast enter-exit classes */
 @import "kaleido-ui/css";
 
-/* Tell Tailwind which files to scan for classes */
+/* Tell Tailwind which files to scan for classes: yours and the components' */
 @source "./src/**/*.{ts,tsx}";
+@source "../node_modules/kaleido-ui/dist/web";
 ```
 
+### Tailwind v3
+
+```js
+// tailwind.config.js
+module.exports = {
+  presets: [require('kaleido-ui/tailwind')],
+  content: ['./src/**/*.{ts,tsx}', './node_modules/kaleido-ui/dist/web/*.js'],
+  plugins: [require('tailwindcss-animate')],
+}
+```
+
+```css
+/* index.css — kaleido-ui/css first: the preset's colours are its variables */
+@import 'kaleido-ui/css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+The preset's colours are the theme's custom properties (opacity modifiers work
+through `color-mix`), so light and dark switch at runtime exactly as on v4.
+
 ```ts
 // main.tsx
 import './styles.css'

package/dist/css/kaleido-ui.css

@@ -3,7 +3,11 @@
  * Regenerate: npm run generate:css
  */
 
-/* ── Material Symbols ──────────────────────────────────────────────────── */
+/* ── Material Symbols (opt-in) ────────────────────────────────────────────
+   No kaleido-ui component renders this class: every glyph is an inline SVG
+   (the Icon primitive), and tests/no-font-ligatures.test.tsx keeps it so.
+   These rules serve a consumer that self-hosts the Material Symbols font and
+   writes its own ligature spans. */
 .material-symbols-outlined {
   font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
   /*
@@ -49,6 +53,13 @@
   --chart-3:              #F7931A;
   --chart-4:              #7C3AED;
   --chart-5:              #DD352E;
+  /* Chart series, in slot order — from src/tokens/chart.ts */
+  --series-1:             #0b764d;
+  --series-2:             #4e40a0;
+  --series-3:             #0f9cd0;
+  --series-4:             #dea805;
+  --series-5:             #c34189;
+  --series-6:             #fe904d;
 }
 
 /* ── Semantic colors (dark mode) — from src/tokens/colors.ts ───────────── */
@@ -76,6 +87,13 @@
   --chart-3:              #F7931A;
   --chart-4:              #7C3AED;
   --chart-5:              #DD352E;
+  /* Chart series, in slot order — from src/tokens/chart.ts */
+  --series-1:             #098356;
+  --series-2:             #7061db;
+  --series-3:             #179fd4;
+  --series-4:             #b3880f;
+  --series-5:             #db589e;
+  --series-6:             #de6907;
 }
 
 /* ── App semantic colors (slate identity) — from src/tokens/app-semantic.ts ─
@@ -216,6 +234,12 @@
   --color-chart-3:              var(--chart-3);
   --color-chart-4:              var(--chart-4);
   --color-chart-5:              var(--chart-5);
+  --color-series-1:             var(--series-1);
+  --color-series-2:             var(--series-2);
+  --color-series-3:             var(--series-3);
+  --color-series-4:             var(--series-4);
+  --color-series-5:             var(--series-5);
+  --color-series-6:             var(--series-6);
 
   /* App semantic colors (slate identity) — channel-backed via the --app-* vars.
      These intentionally override the shadcn-style --color-primary / --color-secondary
@@ -444,6 +468,9 @@
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;
   --animate-fade-in: fade-in 0.3s ease-out;
+  --animate-fade-out: fade-out 0.2s ease-in;
+  --animate-drawer-in-left: drawer-in-left 0.3s ease-in-out;
+  --animate-drawer-out-left: drawer-out-left 0.2s ease-in;
   --animate-slide-up: slide-up 0.3s ease-out;
   --animate-slide-in-from-bottom: slide-in-from-bottom 0.4s ease-out;
   --animate-stagger-up: stagger-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
@@ -479,6 +506,33 @@
   }
 }
 
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes drawer-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes drawer-out-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
 @keyframes slide-up {
   from {
     opacity: 0;

package/dist/native/index.cjs

@@ -733,6 +733,10 @@ function KText({
 // src/native/components/k-screen.tsx
 var import_react_native7 = require("react-native");
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var legacyAndroidStatusBar = {
+  backgroundColor: "transparent",
+  translucent: true
+};
 function KScreen({ elevated = false, style, children, ...rest }) {
   const { theme, mode } = useKaleidoTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
@@ -745,8 +749,7 @@ function KScreen({ elevated = false, style, children, ...rest }) {
           import_react_native7.StatusBar,
           {
             barStyle: mode === "dark" ? "light-content" : "dark-content",
-            backgroundColor: "transparent",
-            translucent: true
+            ...legacyAndroidStatusBar
           }
         ),
         children
@@ -1421,6 +1424,14 @@ var transition = {
   default: "200ms ease-out",
   slow: "300ms ease-out"
 };
+
+// src/tokens/chart.ts
+var chartSeries = {
+  /** green, violet, azzurro, then yellow, magenta, orange */
+  dark: ["#098356", "#7061db", "#179fd4", "#b3880f", "#db589e", "#de6907"],
+  light: ["#0b764d", "#4e40a0", "#0f9cd0", "#dea805", "#c34189", "#fe904d"]
+};
+var chartSeriesLimit = chartSeries.dark.length;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,

package/dist/native/index.js

@@ -667,6 +667,10 @@ function KText({
 // src/native/components/k-screen.tsx
 import { StatusBar, View as View5 } from "react-native";
 import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var legacyAndroidStatusBar = {
+  backgroundColor: "transparent",
+  translucent: true
+};
 function KScreen({ elevated = false, style, children, ...rest }) {
   const { theme, mode } = useKaleidoTheme();
   return /* @__PURE__ */ jsxs2(
@@ -679,8 +683,7 @@ function KScreen({ elevated = false, style, children, ...rest }) {
           StatusBar,
           {
             barStyle: mode === "dark" ? "light-content" : "dark-content",
-            backgroundColor: "transparent",
-            translucent: true
+            ...legacyAndroidStatusBar
           }
         ),
         children
@@ -1359,6 +1362,14 @@ var transition = {
   default: "200ms ease-out",
   slow: "300ms ease-out"
 };
+
+// src/tokens/chart.ts
+var chartSeries = {
+  /** green, violet, azzurro, then yellow, magenta, orange */
+  dark: ["#098356", "#7061db", "#179fd4", "#b3880f", "#db589e", "#de6907"],
+  light: ["#0b764d", "#4e40a0", "#0f9cd0", "#dea805", "#c34189", "#fe904d"]
+};
+var chartSeriesLimit = chartSeries.dark.length;
 export {
   ActionButton,
   AlertBanner,