@sigx/lynx-daisyui 0.4.1 → 0.4.3

package/dist/theme/registry.js

@@ -0,0 +1,185 @@
+// Shared status palette — identical across the original built-ins, hoisted to
+// avoid repetition. (Themes are free to override any of these.)
+const STATUS_LIGHT = {
+    'info': '#00b4fa', 'info-content': '#000000',
+    'success': '#00a96e', 'success-content': '#000000',
+    'warning': '#ffc100', 'warning-content': '#000000',
+    'error': '#ff676a', 'error-content': '#000000',
+};
+const registry = [
+    {
+        name: 'daisy-light', variant: 'light', pair: 'daisy-dark',
+        colors: {
+            'primary': '#491dff', 'primary-content': '#d3dbff',
+            'secondary': '#ff20cc', 'secondary-content': '#fff8fc',
+            'accent': '#00cfbd', 'accent-content': '#00100d',
+            'neutral': '#2b3440', 'neutral-content': '#d7dde4',
+            'base-100': '#ffffff', 'base-200': '#f2f2f2', 'base-300': '#e5e6e6',
+            'base-content': '#1f2937',
+            ...STATUS_LIGHT,
+        },
+    },
+    {
+        name: 'daisy-cupcake', variant: 'light', pair: 'daisy-synthwave',
+        colors: {
+            'primary': '#65c3c8', 'primary-content': '#052124',
+            'secondary': '#ef9fbc', 'secondary-content': '#2d0a16',
+            'accent': '#eeaf3a', 'accent-content': '#2d1c00',
+            'neutral': '#291334', 'neutral-content': '#f5f1f8',
+            'base-100': '#faf7f5', 'base-200': '#efeae6', 'base-300': '#e7e2df',
+            'base-content': '#291334',
+            ...STATUS_LIGHT,
+        },
+    },
+    {
+        name: 'daisy-emerald', variant: 'light', pair: 'daisy-dracula',
+        colors: {
+            'primary': '#66cc8a', 'primary-content': '#06200f',
+            'secondary': '#377cfb', 'secondary-content': '#02112d',
+            'accent': '#f68067', 'accent-content': '#2d0a02',
+            'neutral': '#333c4d', 'neutral-content': '#e9eaed',
+            'base-100': '#ffffff', 'base-200': '#f3f4f6', 'base-300': '#e5e7eb',
+            'base-content': '#333c4d',
+            'info': '#1c92f2', 'info-content': '#000a14',
+            'success': '#00a96e', 'success-content': '#000a05',
+            'warning': '#ff9900', 'warning-content': '#261600',
+            'error': '#ff5724', 'error-content': '#000000',
+        },
+    },
+    {
+        name: 'daisy-dark', variant: 'dark', pair: 'daisy-light',
+        colors: {
+            'primary': '#7582ff', 'primary-content': '#050617',
+            'secondary': '#ff71cf', 'secondary-content': '#190211',
+            'accent': '#00e7d0', 'accent-content': '#001210',
+            'neutral': '#2a323c', 'neutral-content': '#a6adbb',
+            'base-100': '#1d232a', 'base-200': '#191e24', 'base-300': '#343b46',
+            'base-content': '#a6adbb',
+            ...STATUS_LIGHT,
+        },
+    },
+    {
+        name: 'daisy-synthwave', variant: 'dark', pair: 'daisy-cupcake',
+        colors: {
+            'primary': '#e779c1', 'primary-content': '#2a0a1f',
+            'secondary': '#58c7f3', 'secondary-content': '#02141d',
+            'accent': '#f3cc30', 'accent-content': '#2a1f00',
+            'neutral': '#20134e', 'neutral-content': '#e3e0f5',
+            'base-100': '#2d1b69', 'base-200': '#261159', 'base-300': '#1f0f4a',
+            'base-content': '#f9f7fd',
+            'info': '#53c0f3', 'info-content': '#02151e',
+            'success': '#71ead2', 'success-content': '#002721',
+            'warning': '#f3cc30', 'warning-content': '#2a1f00',
+            'error': '#e24056', 'error-content': '#ffffff',
+        },
+    },
+    {
+        name: 'daisy-dracula', variant: 'dark', pair: 'daisy-emerald',
+        colors: {
+            'primary': '#ff79c6', 'primary-content': '#2d0414',
+            'secondary': '#bd93f9', 'secondary-content': '#160226',
+            'accent': '#50fa7b', 'accent-content': '#002a0e',
+            'neutral': '#414558', 'neutral-content': '#f8f8f2',
+            'base-100': '#282a36', 'base-200': '#21222c', 'base-300': '#181920',
+            'base-content': '#f8f8f2',
+            'info': '#8be9fd', 'info-content': '#002a31',
+            'success': '#50fa7b', 'success-content': '#002a0e',
+            'warning': '#f1fa8c', 'warning-content': '#2a2900',
+            'error': '#ff5555', 'error-content': '#2a0000',
+        },
+    },
+];
+/**
+ * Resolve a `theme.name` to its registered `Theme`. Supports multi-class names
+ * like `'daisy-light daisy-rounded'` by matching the first registered id found.
+ */
+function findTheme(name) {
+    if (!name)
+        return undefined;
+    for (const part of name.split(/\s+/)) {
+        const hit = registry.find((t) => t.name === part);
+        if (hit)
+            return hit;
+    }
+    return undefined;
+}
+/**
+ * All registered themes in insertion order. Returns a shallow copy so callers
+ * can't mutate the internal registry — re-registration goes through
+ * `registerTheme()`. Each entry is a full `Theme` (name, variant, palette),
+ * so consumers can render swatches in a picker.
+ */
+export function listThemes() {
+    return registry.slice();
+}
+/**
+ * Register (or replace, by `name`) a theme. Call at module-load time before
+ * mounting `<ThemeProvider>` so it shows up in `listThemes()` / `pickThemeFor()`.
+ */
+export function registerTheme(theme) {
+    const i = registry.findIndex((t) => t.name === theme.name);
+    if (i >= 0)
+        registry[i] = theme;
+    else
+        registry.push(theme);
+}
+/**
+ * Derive a new theme from a registered base, overriding any colors / roundness.
+ * Ergonomic for "tenant tweaks a few tokens": the result is a full `Theme` you
+ * pass to `registerTheme()`. Throws if `base` isn't registered.
+ *
+ * ```ts
+ * registerTheme(extendTheme('daisy-dark', {
+ *   name: 'acme-dark',
+ *   colors: { primary: '#fb7185' },
+ * }));
+ * ```
+ */
+export function extendTheme(base, patch) {
+    const src = findTheme(base);
+    if (!src) {
+        throw new Error(`[lynx-daisyui] extendTheme: unknown base theme "${base}". `
+            + `Register it first, or extend a built-in (e.g. 'daisy-light').`);
+    }
+    return {
+        name: patch.name,
+        variant: patch.variant ?? src.variant,
+        pair: patch.pair ?? src.pair,
+        colors: { ...src.colors, ...patch.colors },
+        radius: patch.radius ?? src.radius,
+    };
+}
+/** The variant of a registered theme, or `undefined` if not registered. */
+export function variantOf(name) {
+    return findTheme(name)?.variant;
+}
+/** The color palette of a registered theme, or `undefined` if not registered. */
+export function colorsOf(name) {
+    return findTheme(name)?.colors;
+}
+/** The roundness overrides of a registered theme, if any. */
+export function radiusOf(name) {
+    return findTheme(name)?.radius;
+}
+/**
+ * Pick a default theme for a given system color scheme — the first registered
+ * theme of that variant (`daisy-light` / `daisy-dark` under the seeded
+ * registry). Falls back to `'daisy-light'` if none of that variant exists.
+ */
+export function pickThemeFor(scheme) {
+    const hit = registry.find((t) => t.variant === scheme);
+    return hit?.name ?? 'daisy-light';
+}
+/**
+ * Resolve the paired theme of a given name — used by `theme.toggle()`. Follows
+ * `pair` if set, otherwise the first theme of the opposite variant. Returns the
+ * input unchanged when the theme isn't registered.
+ */
+export function pairOf(name) {
+    const hit = findTheme(name);
+    if (!hit)
+        return name;
+    if (hit.pair)
+        return hit.pair;
+    return pickThemeFor(hit.variant === 'light' ? 'dark' : 'light');
+}

package/dist/theme/theme-state.d.ts

@@ -0,0 +1,28 @@
+import type { DaisyTheme, ThemeController } from './ThemeProvider.js';
+/** The mutable selection a `ThemeController` reads from and writes to. */
+export interface ThemeState {
+    name: DaisyTheme;
+    following: boolean;
+}
+/**
+ * Build a `ThemeController` over a given state object. Used for both the global
+ * singleton (below) and each nested `<ThemeProvider>`'s local state — same
+ * behaviour, different backing store. `followSystem()` only flips the flag; the
+ * owning provider's follow effect performs the re-apply.
+ */
+export declare function makeThemeController(state: ThemeState): ThemeController;
+/**
+ * The backing signal for the global theme. Read/written by the root
+ * `<ThemeProvider>` and shared with `themeController`; not part of the public
+ * API.
+ * @internal
+ */
+export declare const globalThemeState: import("@sigx/reactivity").Signal<ThemeState>;
+/**
+ * The global theme controller — the headless handle for issue #113. Import and
+ * call from anywhere (no `<ThemeProvider>` ancestor required); `useTheme()`'s
+ * default factory returns this same instance, and the root `<ThemeProvider>`
+ * provides it to its subtree. `StatusBarSync` binds to it so the OS bars always
+ * follow the global/screen theme, never a content sub-scope.
+ */
+export declare const themeController: ThemeController;

package/dist/theme/theme-state.js

@@ -0,0 +1,72 @@
+/**
+ * Global theme state — the headless DI singleton behind `useTheme()`.
+ *
+ * The active selection (current theme name + follow-system flag) lives here as
+ * a module-level signal, mirroring how `./registry.ts` is already a global
+ * module singleton. This is what makes theme control reachable from *headless*
+ * code — a store, a service, app-boot logic, an effect — not just from a
+ * component mounted under `<ThemeProvider>`.
+ *
+ * The root `<ThemeProvider>` (depth 0) binds to this state: it renders its host
+ * view from it, owns the system-color-scheme follow effect that writes to it
+ * while `following`, and seeds an `initial` prop into it. Nested providers
+ * (depth >= 1) build their own local state via `makeThemeController` so a
+ * subtree can be overridden without touching the global — see
+ * `./ThemeProvider.tsx`.
+ *
+ * `followSystem()` here only flips the flag; the actual re-apply on an OS color
+ * scheme change is driven by the root provider's follow effect (which has the
+ * appearance signal in scope).
+ */
+import { signal } from '@sigx/lynx';
+import { pairOf, pickThemeFor } from './registry.js';
+/**
+ * Build a `ThemeController` over a given state object. Used for both the global
+ * singleton (below) and each nested `<ThemeProvider>`'s local state — same
+ * behaviour, different backing store. `followSystem()` only flips the flag; the
+ * owning provider's follow effect performs the re-apply.
+ */
+export function makeThemeController(state) {
+    return {
+        get name() {
+            return state.name;
+        },
+        get followingSystem() {
+            return state.following;
+        },
+        set(next) {
+            state.name = next;
+            state.following = false;
+        },
+        toggle() {
+            state.name = pairOf(state.name);
+            state.following = false;
+        },
+        followSystem() {
+            state.following = true;
+        },
+    };
+}
+// Object signal (not primitive) so the `DaisyTheme` literal union survives —
+// `signal<T>` widens primitive literals to plain `string` via `Widen<T>`.
+// Seeded to a sane default; the root <ThemeProvider> re-seeds from the system
+// color scheme + its props on mount.
+const state = signal({
+    name: pickThemeFor('light'),
+    following: true,
+});
+/**
+ * The backing signal for the global theme. Read/written by the root
+ * `<ThemeProvider>` and shared with `themeController`; not part of the public
+ * API.
+ * @internal
+ */
+export const globalThemeState = state;
+/**
+ * The global theme controller — the headless handle for issue #113. Import and
+ * call from anywhere (no `<ThemeProvider>` ancestor required); `useTheme()`'s
+ * default factory returns this same instance, and the root `<ThemeProvider>`
+ * provides it to its subtree. `StatusBarSync` binds to it so the OS bars always
+ * follow the global/screen theme, never a content sub-scope.
+ */
+export const themeController = makeThemeController(state);

package/dist/theme/use-screen-theme.d.ts

@@ -0,0 +1,3 @@
+import type { DaisyTheme } from './ThemeProvider.js';
+/** Pin the global theme to `name` while this screen is focused; restore on blur. */
+export declare function useScreenTheme(name: DaisyTheme): void;

package/dist/theme/use-screen-theme.js

@@ -0,0 +1,42 @@
+/**
+ * `useScreenTheme(name)` — pin the **global** daisy theme while a navigation
+ * screen is focused, restoring the previous selection when it blurs.
+ *
+ * This is the right tool for *per-screen* theming — "this screen is dark, that
+ * one is light." Because it drives the global theme (not a content sub-scope),
+ * the OS status/navigation bars follow automatically via `<StatusBarSync>`, so
+ * the bar icons stay legible against each screen's background. For recoloring a
+ * *region within* a screen without touching the bars, nest a `<ThemeProvider>`
+ * instead.
+ *
+ * Built on `useFocusEffect` from `@sigx/lynx-navigation` (an optional peer
+ * dependency): it must be called from inside a component rendered as a route by
+ * `<Stack>` / `<Tabs>` — the same constraint as `useFocusEffect`/`useIsFocused`.
+ *
+ * Save/restore composes with the stack (LIFO focus/blur): pushing a themed
+ * screen saves whatever was live, applies its own theme, and restores on pop —
+ * including resuming follow-system if that's what was active.
+ *
+ * ```tsx
+ * const Gallery = component(() => {
+ *     useScreenTheme('daisy-dark'); // dark while this screen is on top
+ *     return () => <view>…</view>;
+ * });
+ * ```
+ */
+import { useFocusEffect } from '@sigx/lynx-navigation';
+import { themeController } from './theme-state.js';
+/** Pin the global theme to `name` while this screen is focused; restore on blur. */
+export function useScreenTheme(name) {
+    useFocusEffect(() => {
+        const prevName = themeController.name;
+        const prevFollowing = themeController.followingSystem;
+        themeController.set(name);
+        return () => {
+            if (prevFollowing)
+                themeController.followSystem();
+            else
+                themeController.set(prevName);
+        };
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigx/lynx-daisyui",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "DaisyUI integration for sigx-lynx",
   "type": "module",
   "main": "./dist/index.js",
@@ -37,12 +37,15 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@sigx/lynx": "^0.4.1",
-    "@sigx/lynx-gestures": "^0.4.1"
+    "@sigx/lynx": "^0.4.3",
+    "@sigx/lynx-gestures": "^0.4.3",
+    "@sigx/lynx-icons": "^0.4.3",
+    "@sigx/lynx-appearance": "^0.4.3",
+    "@sigx/lynx-motion": "^0.4.3"
   },
   "peerDependencies": {
     "tailwindcss": "^3.0.0 || ^4.0.0",
-    "@sigx/lynx-navigation": "^0.4.1"
+    "@sigx/lynx-navigation": "^0.4.3"
   },
   "peerDependenciesMeta": {
     "@sigx/lynx-navigation": {
@@ -50,10 +53,10 @@
     }
   },
   "devDependencies": {
-    "@typescript/native-preview": "7.0.0-dev.20260511.1",
+    "@typescript/native-preview": "7.0.0-dev.20260521.1",
     "tailwindcss": "^4.0.0",
     "typescript": "^6.0.3",
-    "@sigx/lynx-navigation": "^0.4.1"
+    "@sigx/lynx-navigation": "^0.4.3"
   },
   "publishConfig": {
     "access": "public"

package/dist/styles/themes/light.css

@@ -1,95 +0,0 @@
-/* DaisyUI Light Theme — design tokens as CSS custom properties */
-/* Scoped under .daisy-light; CSS inheritance propagates to descendants */
-
-.daisy-light {
-  /* Apply base colors to the theme root */
-  background-color: #ffffff;
-  color: #1f2937;
-
-  /* Semantic colors */
-  --color-primary: #491dff;
-  --color-primary-content: #d3dbff;
-  --color-secondary: #ff20cc;
-  --color-secondary-content: #fff8fc;
-  --color-accent: #00cfbd;
-  --color-accent-content: #00100d;
-  --color-neutral: #2b3440;
-  --color-neutral-content: #d7dde4;
-
-  /* Base colors */
-  --color-base-100: #ffffff;
-  --color-base-200: #f2f2f2;
-  --color-base-300: #e5e6e6;
-  --color-base-content: #1f2937;
-
-  /* Status colors */
-  --color-info: #00b4fa;
-  --color-info-content: #000000;
-  --color-success: #00a96e;
-  --color-success-content: #000000;
-  --color-warning: #ffc100;
-  --color-warning-content: #000000;
-  --color-error: #ff676a;
-  --color-error-content: #000000;
-
-  /* ── Roundness ── */
-  --rounded-box: 16px;
-  --rounded-btn: 8px;
-  --rounded-badge: 9999px;
-  --rounded-tab: 8px;
-  --rounded-selector: 8px;
-  --rounded-toggle: 9999px;
-
-  /* ── Sizing scale ── */
-  --size-xs: 24px;
-  --size-sm: 32px;
-  --size-md: 48px;
-  --size-lg: 64px;
-
-  /* ── Font sizes ── */
-  --font-xs: 12px;
-  --font-sm: 14px;
-  --font-md: 14px;
-  --font-lg: 18px;
-
-  /* ── Spacing ── */
-  --padding-btn-xs: 8px;
-  --padding-btn-sm: 12px;
-  --padding-btn-md: 16px;
-  --padding-btn-lg: 24px;
-  --padding-box: 16px;
-  --padding-box-compact: 8px;
-  --gap-box: 8px;
-
-  /* ── Borders ── */
-  --border-btn: 1px;
-  --border-card: 1px;
-
-  /* ── Component-specific sizes ── */
-  --checkbox-xs: 16px;
-  --checkbox-sm: 20px;
-  --checkbox-md: 24px;
-  --checkbox-lg: 32px;
-  --toggle-width-xs: 32px;
-  --toggle-width-sm: 40px;
-  --toggle-width-md: 48px;
-  --toggle-width-lg: 56px;
-  --toggle-height-xs: 22px;
-  --toggle-height-sm: 24px;
-  --toggle-height-md: 28px;
-  --toggle-height-lg: 32px;
-  --toggle-thumb-xs: 14px;
-  --toggle-thumb-sm: 16px;
-  --toggle-thumb-md: 20px;
-  --toggle-thumb-lg: 24px;
-  --badge-xs: 16px;
-  --badge-sm: 20px;
-  --badge-md: 24px;
-  --badge-lg: 32px;
-  --step-indicator: 32px;
-  --progress-height: 8px;
-  --modal-max-width: 400px;
-
-  /* ── Opacity ── */
-  --disabled-opacity: 0.5;
-}