@sigx/lynx-daisyui 0.4.1 → 0.4.2

package/dist/navigation/SwiperIndicator.js

@@ -0,0 +1,232 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@sigx/lynx/jsx-runtime";
+import { component, effect, signal, } from '@sigx/lynx';
+import { useSwiperDotProgress, useSwiperDotScale, useSwiperDotGrowX, useSwiperDotTranslate, } from '@sigx/lynx-gestures';
+import { resolveDaisyColor } from '../shared/styles.js';
+const SIZE_TABLE = {
+    xs: { dot: 4, gap: 4, barHeight: 3, fontSize: 11 },
+    sm: { dot: 6, gap: 6, barHeight: 4, fontSize: 12 },
+    md: { dot: 8, gap: 8, barHeight: 5, fontSize: 14 },
+    lg: { dot: 12, gap: 10, barHeight: 6, fontSize: 16 },
+};
+/**
+ * Themed swiper page indicator with five preset variants. Each variant
+ * is a thin shell over a headless hook from `@sigx/lynx-gestures` (see
+ * `useSwiperDotProgress`, `useSwiperDotScale`, `useSwiperDotGrowX`,
+ * `useSwiperDotTranslate`). For a fully custom indicator, compose the
+ * hooks yourself rather than forking this file.
+ *
+ * @example
+ * ```tsx
+ * const offset = useSharedValue(0);
+ * const idx = signal({ value: 0 });
+ * <Swiper offset={offset} index={idx} width={W}>…</Swiper>
+ * <SwiperIndicator
+ *   variant="pill"
+ *   offset={offset}
+ *   pageWidth={W}
+ *   count={photos.length}
+ *   index={idx}
+ *   color="primary"
+ *   onDotPress={(i) => { idx.value = i; }}
+ * />
+ * ```
+ */
+export const SwiperIndicator = component(({ props }) => {
+    return () => {
+        const variant = props.variant ?? 'dots';
+        const size = SIZE_TABLE[props.size ?? 'md'];
+        const activeColor = resolveDaisyColor(props.color ?? 'primary');
+        const inactiveColor = resolveDaisyColor(props.inactiveColor ?? 'base-content');
+        if (variant === 'numbered') {
+            return (_jsx(NumberedIndicator, { count: props.count, index: props.index ?? FALLBACK_INDEX, color: activeColor, fontSize: size.fontSize, class: props.class, style: props.style }));
+        }
+        if (variant === 'bar') {
+            if (props.offset == null || props.pageWidth == null)
+                return null;
+            return (_jsx(BarIndicator, { offset: props.offset, pageWidth: props.pageWidth, count: props.count, activeColor: activeColor, inactiveColor: inactiveColor, barHeight: size.barHeight, dotSize: size.dot, gap: size.gap, onDotPress: props.onDotPress, class: props.class, style: props.style }));
+        }
+        if (props.offset == null || props.pageWidth == null)
+            return null;
+        return (_jsx("view", { class: props.class, style: {
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: size.gap + 'px',
+                ...(props.style || {}),
+            }, children: Array.from({ length: props.count }, (_, i) => (_jsx(Dot, { index: i, offset: props.offset, pageWidth: props.pageWidth, variant: variant, size: size, activeColor: activeColor, inactiveColor: inactiveColor, onPress: props.onDotPress }, i))) }));
+    };
+});
+// ─────────────────────────────────────────────────────────────────────
+// Per-variant pieces. Each owns a single `useAnimatedStyle` call-site
+// (per-iteration call inside `.map()` is fine — call-sites are stable).
+const FALLBACK_INDEX = signal({ value: 0 });
+const Dot = component(({ props }) => {
+    // Each branch picks a different headless hook. Variants that need
+    // *two* simultaneous channels (opacity AND scale, or scale AND scaleX)
+    // need two refs — one per element — because `useAnimatedStyle` is
+    // one-binding-per-element.
+    if (props.variant === 'dots') {
+        return DotsBody(props);
+    }
+    if (props.variant === 'pill') {
+        return PillBody(props);
+    }
+    // scale-pulse
+    return ScalePulseBody(props);
+});
+function DotsBody(props) {
+    const overlayRef = useSwiperDotProgress({
+        offset: props.offset,
+        pageWidth: props.pageWidth,
+        index: props.index,
+    });
+    return () => (_jsx("view", { catchtap: props.onPress ? () => props.onPress?.(props.index) : undefined, style: {
+            width: props.size.dot + 'px',
+            height: props.size.dot + 'px',
+            borderRadius: (props.size.dot / 2) + 'px',
+            backgroundColor: withAlpha(props.inactiveColor, 0.4),
+            position: 'relative',
+            overflow: 'hidden',
+        }, children: _jsx("view", { "main-thread:ref": overlayRef, style: {
+                position: 'absolute',
+                left: '0',
+                top: '0',
+                right: '0',
+                bottom: '0',
+                backgroundColor: props.activeColor,
+                opacity: '0',
+            } }) }));
+}
+function PillBody(props) {
+    // Pill stretches horizontally via scaleX (no layout cost) and brightens
+    // via opacity on the active-colour overlay. Both channels target the
+    // same dot — but each needs its own bound element, so we wrap the
+    // overlay inside a scaling shell.
+    const shellRef = useSwiperDotGrowX({
+        offset: props.offset,
+        pageWidth: props.pageWidth,
+        index: props.index,
+        inactive: 1,
+        active: 3,
+    });
+    const overlayRef = useSwiperDotProgress({
+        offset: props.offset,
+        pageWidth: props.pageWidth,
+        index: props.index,
+    });
+    return () => (_jsx("view", { catchtap: props.onPress ? () => props.onPress?.(props.index) : undefined, "main-thread:ref": shellRef, style: {
+            width: props.size.dot + 'px',
+            height: props.size.dot + 'px',
+            borderRadius: (props.size.dot / 2) + 'px',
+            backgroundColor: withAlpha(props.inactiveColor, 0.4),
+            position: 'relative',
+            overflow: 'hidden',
+            transformOrigin: 'center center',
+        }, children: _jsx("view", { "main-thread:ref": overlayRef, style: {
+                position: 'absolute',
+                left: '0',
+                top: '0',
+                right: '0',
+                bottom: '0',
+                backgroundColor: props.activeColor,
+                opacity: '0',
+            } }) }));
+}
+function ScalePulseBody(props) {
+    // No colour crossfade — pure scale. Active dot uses `activeColor`,
+    // inactive uses `inactiveColor` at low alpha. Visual is monochrome
+    // friendly.
+    const scaleRef = useSwiperDotScale({
+        offset: props.offset,
+        pageWidth: props.pageWidth,
+        index: props.index,
+        inactive: 1,
+        active: 1.6,
+    });
+    const opacityRef = useSwiperDotProgress({
+        offset: props.offset,
+        pageWidth: props.pageWidth,
+        index: props.index,
+    });
+    return () => (_jsx("view", { catchtap: props.onPress ? () => props.onPress?.(props.index) : undefined, "main-thread:ref": scaleRef, style: {
+            width: props.size.dot + 'px',
+            height: props.size.dot + 'px',
+            borderRadius: (props.size.dot / 2) + 'px',
+            backgroundColor: withAlpha(props.inactiveColor, 0.4),
+            position: 'relative',
+            overflow: 'hidden',
+        }, children: _jsx("view", { "main-thread:ref": opacityRef, style: {
+                position: 'absolute',
+                left: '0',
+                top: '0',
+                right: '0',
+                bottom: '0',
+                backgroundColor: props.activeColor,
+                opacity: '0',
+            } }) }));
+}
+const BarIndicator = component(({ props }) => {
+    // The thumb advances by (dot + gap) per page. We use the headless
+    // translate hook — a single MT binding regardless of page count.
+    const step = props.dotSize + props.gap;
+    const thumbRef = useSwiperDotTranslate({
+        offset: props.offset,
+        pageWidth: props.pageWidth,
+        step,
+    });
+    return () => {
+        const trackWidth = props.count * props.dotSize + Math.max(0, props.count - 1) * props.gap;
+        return (_jsxs("view", { class: props.class, style: {
+                position: 'relative',
+                width: trackWidth + 'px',
+                height: props.barHeight + 'px',
+                borderRadius: (props.barHeight / 2) + 'px',
+                backgroundColor: withAlpha(props.inactiveColor, 0.25),
+                overflow: 'visible',
+                ...(props.style || {}),
+            }, children: [props.onDotPress
+                    ? (_jsx("view", { style: {
+                            position: 'absolute',
+                            inset: '0',
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                        }, children: Array.from({ length: props.count }, (_, i) => (_jsx("view", { catchtap: () => props.onDotPress?.(i), style: {
+                                width: (props.dotSize + props.gap) + 'px',
+                                height: '100%',
+                            } }, i))) }))
+                    : null, _jsx("view", { "main-thread:ref": thumbRef, style: {
+                        position: 'absolute',
+                        left: '0',
+                        top: '0',
+                        width: props.dotSize + 'px',
+                        height: '100%',
+                        borderRadius: (props.barHeight / 2) + 'px',
+                        backgroundColor: props.activeColor,
+                    } })] }));
+    };
+});
+const NumberedIndicator = component(({ props }) => {
+    const label = signal({ value: '' });
+    effect(() => {
+        label.value = `${(props.index.value | 0) + 1} / ${props.count}`;
+    });
+    return () => (_jsx("text", { class: props.class, style: {
+            color: props.color,
+            fontSize: props.fontSize + 'px',
+            fontWeight: '600',
+            ...(props.style || {}),
+        }, children: label.value }));
+});
+// ─────────────────────────────────────────────────────────────────────
+// Helpers
+/**
+ * Apply an alpha to a CSS colour value. Works for `var(--color-*)`
+ * (uses `color-mix`) and for raw rgb/hex strings (uses `color-mix`
+ * too — broadly supported on the platforms Lynx targets).
+ */
+function withAlpha(color, alpha) {
+    const pct = Math.round(Math.max(0, Math.min(1, alpha)) * 100);
+    return `color-mix(in srgb, ${color} ${pct}%, transparent)`;
+}

package/dist/shared/styles.d.ts

@@ -12,7 +12,7 @@
  * removing a token in one place is impossible.
  */
 declare const DAISY_COLOR_TOKEN_LIST: readonly ['primary', 'primary-content', 'secondary', 'secondary-content', 'accent', 'accent-content', 'neutral', 'neutral-content', 'base-100', 'base-200', 'base-300', 'base-content', 'info', 'info-content', 'success', 'success-content', 'warning', 'warning-content', 'error', 'error-content'];
-export type DaisyColor = (typeof DAISY_COLOR_TOKEN_LIST)[number];
+export type DaisyColor = typeof DAISY_COLOR_TOKEN_LIST[number];
 /**
  * Resolve a `background` prop value to a CSS color string.
  *

package/dist/styles/components/typography.css

@@ -1,5 +1,30 @@
-/* Typography — text color utilities for semantic colors */
+/*
+ * Daisy semantic color utilities.
+ *
+ *   bg-<token>:   every token in DAISY_COLOR_TOKEN_LIST (semantics +
+ *                 their -content variants, plus the three base surfaces
+ *                 and base-content).
+ *   text-<token>: semantic tokens + their -content variants, plus
+ *                 base-content. The three base surface tokens
+ *                 (base-100/200/300) are deliberately omitted — text the
+ *                 colour of the surface it sits on is never useful, and
+ *                 keeping the class out prevents accidental "invisible
+ *                 text" footguns.
+ *
+ * Hand-written rules rather than Tailwind-generated utilities, so they
+ * survive purge regardless of whether a consumer's source statically
+ * references the class. This matters for daisy components that compose
+ * the class dynamically — e.g. `class={`bg-${props.background}`}` in
+ * `<NavDrawer>` — which Tailwind's source scanner can't see. Without
+ * these always-on rules, `<NavDrawer background="primary">` paints
+ * transparent because `bg-primary` got purged.
+ *
+ * Lynx specifics: `var(--color-*)` resolves only from CSS-pipeline rules
+ * (this file, daisy themes), never from inline `style.backgroundColor`.
+ * Keep daisy surface tokens flowing through a class.
+ */
 
+/* Text */
 .text-primary { color: var(--color-primary); }
 .text-primary-content { color: var(--color-primary-content); }
 .text-secondary { color: var(--color-secondary); }
@@ -18,15 +43,24 @@
 .text-error { color: var(--color-error); }
 .text-error-content { color: var(--color-error-content); }
 
-/* Background color utilities for semantic colors */
+/* Background */
 .bg-primary { background-color: var(--color-primary); }
+.bg-primary-content { background-color: var(--color-primary-content); }
 .bg-secondary { background-color: var(--color-secondary); }
+.bg-secondary-content { background-color: var(--color-secondary-content); }
 .bg-accent { background-color: var(--color-accent); }
+.bg-accent-content { background-color: var(--color-accent-content); }
 .bg-neutral { background-color: var(--color-neutral); }
+.bg-neutral-content { background-color: var(--color-neutral-content); }
 .bg-base-100 { background-color: var(--color-base-100); }
 .bg-base-200 { background-color: var(--color-base-200); }
 .bg-base-300 { background-color: var(--color-base-300); }
+.bg-base-content { background-color: var(--color-base-content); }
 .bg-info { background-color: var(--color-info); }
+.bg-info-content { background-color: var(--color-info-content); }
 .bg-success { background-color: var(--color-success); }
+.bg-success-content { background-color: var(--color-success-content); }
 .bg-warning { background-color: var(--color-warning); }
+.bg-warning-content { background-color: var(--color-warning-content); }
 .bg-error { background-color: var(--color-error); }
+.bg-error-content { background-color: var(--color-error-content); }

package/dist/styles/index.css

@@ -1,8 +1,12 @@
-/* @sigx/lynx-daisyui — all themes + component styles */
+/* @sigx/lynx-daisyui — base tokens + component styles.
+ *
+ * Theme COLORS live in the theme registry (src/theme/registry.ts) and are
+ * applied as inline CSS custom properties by <ThemeProvider>; only the
+ * theme-agnostic structural tokens ship as CSS, under the `.daisy` base
+ * class. */
 
-/* Themes */
-@import './themes/light.css';
-@import './themes/dark.css';
+/* Structural design tokens (.daisy) + composable shape modifiers */
+@import './themes/tokens.css';
 @import './themes/shapes.css';
 
 /* Base reset */

package/dist/styles/themes/shapes.css

@@ -1,5 +1,6 @@
 /* Shape variants — override roundness tokens */
-/* Combine with a color theme: class="daisy-light daisy-rounded" */
+/* Compose with the base via ThemeProvider's `class` prop, e.g.
+   <ThemeProvider class="daisy-rounded"> → host class="daisy daisy-rounded" */
 
 .daisy-flat {
   --rounded-box: 0px;

package/dist/styles/themes/{dark.css → tokens.css}

@@ -1,37 +1,13 @@
-/* DaisyUI Dark Theme — overrides only color tokens */
-/* Scoped under .daisy-dark; CSS inheritance propagates to descendants */
-
-.daisy-dark {
-  /* Apply base colors to the theme root */
-  background-color: #1d232a;
-  color: #a6adbb;
-
-  /* Semantic colors */
-  --color-primary: #7582ff;
-  --color-primary-content: #050617;
-  --color-secondary: #ff71cf;
-  --color-secondary-content: #190211;
-  --color-accent: #00e7d0;
-  --color-accent-content: #001210;
-  --color-neutral: #2a323c;
-  --color-neutral-content: #a6adbb;
-
-  /* Base colors */
-  --color-base-100: #1d232a;
-  --color-base-200: #191e24;
-  --color-base-300: #343b46;
-  --color-base-content: #a6adbb;
-
-  /* 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;
+/* Theme-agnostic structural design tokens.
+ *
+ * Theme COLORS come from the theme registry (src/theme/registry.ts) and are
+ * applied as inline CSS custom properties by <ThemeProvider>. These
+ * radius / sizing / component tokens are identical across themes, so they
+ * ship once here under the `.daisy` base class that <ThemeProvider> puts on
+ * its host view; CSS inheritance propagates them to every descendant. A theme
+ * may still override roundness via its `radius` field. */
 
+.daisy {
   /* ── Roundness ── */
   --rounded-box: 16px;
   --rounded-btn: 8px;

package/dist/theme/StatusBarSync.d.ts

@@ -0,0 +1,41 @@
+/**
+ * `<StatusBarSync />` — keeps the device status-bar (and Android's
+ * navigation-bar) tint legible against the active daisyui theme.
+ *
+ * Reads the current theme via `useTheme()`, looks up its variant in the
+ * theme registry, and pushes the appropriate tint to the OS via
+ * `@sigx/lynx-appearance`:
+ *
+ *   light theme → dark status-bar icons (legible against light bg)
+ *   dark  theme → light status-bar icons (legible against dark bg)
+ *
+ * Mount once, inside `<ThemeProvider>`:
+ *
+ * ```tsx
+ * <ThemeProvider>
+ *   <StatusBarSync />
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ *
+ * Renders nothing — it's a side-effect-only component that drives a
+ * reactive `effect()` reading `theme.name`. The `matchBackground` prop is
+ * reserved for a follow-up that pushes the active theme's
+ * `--color-base-100` as the Android system-bar background; today it's a
+ * declared no-op so the API surface is stable across the rev that wires
+ * CSS-var resolution.
+ */
+import { type Define } from '@sigx/lynx';
+export type StatusBarSyncProps = 
+/**
+ * Reserved — will (in a follow-up) push the active theme's
+ * `--color-base-100` as the Android status- and navigation-bar
+ * background. Currently a no-op; the prop ships so consumers can opt
+ * in without an API break later. iOS and Android 15+ ignore the
+ * background regardless (no equivalent on iOS; edge-to-edge on
+ * Android 15+).
+ */
+Define.Prop<'matchBackground', boolean, false>;
+export declare const StatusBarSync: import("@sigx/runtime-core").ComponentFactory<{
+    matchBackground?: boolean | undefined;
+}, void, {}>;

package/dist/theme/StatusBarSync.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+/**
+ * `<StatusBarSync />` — keeps the device status-bar (and Android's
+ * navigation-bar) tint legible against the active daisyui theme.
+ *
+ * Reads the current theme via `useTheme()`, looks up its variant in the
+ * theme registry, and pushes the appropriate tint to the OS via
+ * `@sigx/lynx-appearance`:
+ *
+ *   light theme → dark status-bar icons (legible against light bg)
+ *   dark  theme → light status-bar icons (legible against dark bg)
+ *
+ * Mount once, inside `<ThemeProvider>`:
+ *
+ * ```tsx
+ * <ThemeProvider>
+ *   <StatusBarSync />
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ *
+ * Renders nothing — it's a side-effect-only component that drives a
+ * reactive `effect()` reading `theme.name`. The `matchBackground` prop is
+ * reserved for a follow-up that pushes the active theme's
+ * `--color-base-100` as the Android system-bar background; today it's a
+ * declared no-op so the API surface is stable across the rev that wires
+ * CSS-var resolution.
+ */
+import { component, effect, onMounted, onUnmounted } from '@sigx/lynx';
+import { isAvailable, setSystemBarsStyle } from '@sigx/lynx-appearance';
+import { useTheme } from './ThemeProvider.js';
+import { variantOf } from './registry.js';
+export const StatusBarSync = component(({ props }) => {
+    const theme = useTheme();
+    let lastApplied = null;
+    let runner;
+    function apply(name) {
+        if (name === lastApplied)
+            return;
+        lastApplied = name;
+        const variant = variantOf(name);
+        // For unregistered themes we can't infer a variant — leave the
+        // system bars alone. Consumers can register their custom theme via
+        // `registerTheme()` to opt in.
+        if (!variant)
+            return;
+        const style = variant === 'dark' ? 'light' : 'dark';
+        // Fire-and-forget: `setSystemBarsStyle` is non-throwing (it
+        // resolves `{ ok: false, reason: 'unsupported' }` when the native
+        // module isn't registered, and silently filters per-leg
+        // `unsupported` results — e.g. nav-bar on iOS — so an aggregate
+        // `ok: true` is still reachable on partial platforms). Either way,
+        // void-discarding the promise here can't surface as an unhandled
+        // rejection.
+        void setSystemBarsStyle({
+            statusBar: style,
+            navigationBar: { style },
+        });
+    }
+    onMounted(() => {
+        if (!isAvailable())
+            return;
+        // A reactive effect that reads `theme.name` so the effect re-runs
+        // whenever the theme controller's underlying signal changes —
+        // including the live system-flip path inside ThemeProvider. No
+        // side effects in render; nothing to subscribe/unsubscribe by
+        // hand.
+        runner = effect(() => {
+            apply(theme.name);
+        });
+    });
+    onUnmounted(() => {
+        runner?.stop();
+        runner = undefined;
+    });
+    // Reference the prop so the type checker doesn't flag it as unused
+    // while it's still reserved. Drop this when the matchBackground
+    // implementation lands.
+    void props.matchBackground;
+    // Zero-size, out-of-flow placeholder. Avoids `display: none` —
+    // Lynx can leak unstyled text paint through display:none overlays in
+    // some builds (see lynx-display-none caveat); zero-size + absolute is
+    // the safer shape.
+    return () => (_jsx("view", { style: { position: 'absolute', width: '0px', height: '0px', opacity: 0 } }));
+});