@sigx/lynx-daisyui 0.4.0 → 0.4.2

package/dist/layout/Card.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component, compound } from '@sigx/lynx';
+const _Card = component(({ props, slots }) => {
+    const getClasses = () => {
+        const c = ['card'];
+        if (props.bordered)
+            c.push('card-bordered');
+        if (props.compact)
+            c.push('card-compact');
+        if (props.shadow === true)
+            c.push('shadow-md');
+        else if (props.shadow === 'sm')
+            c.push('shadow-sm');
+        else if (props.shadow === 'md')
+            c.push('shadow-md');
+        else if (props.shadow === 'lg')
+            c.push('shadow-lg');
+        else if (props.shadow === undefined)
+            c.push('shadow-md');
+        if (props.class)
+            c.push(props.class);
+        return c.join(' ');
+    };
+    return () => _jsx("view", { class: getClasses(), children: slots.default?.() });
+});
+const CardBody = component(({ props, slots }) => {
+    return () => (_jsx("view", { class: `card-body${props.class ? ' ' + props.class : ''}`, children: slots.default?.() }));
+});
+const CardTitle = component(({ props, slots }) => {
+    return () => (_jsx("text", { class: `card-title${props.class ? ' ' + props.class : ''}`, children: slots.default?.() }));
+});
+const CardActions = component(({ props, slots }) => {
+    return () => (_jsx("view", { class: `card-actions${props.class ? ' ' + props.class : ''}`, children: slots.default?.() }));
+});
+export const Card = compound(_Card, {
+    Body: CardBody,
+    Title: CardTitle,
+    Actions: CardActions,
+});

package/dist/layout/Center.d.ts

@@ -1,5 +1,6 @@
 import { type Define } from '@sigx/lynx';
-export type CenterProps = Define.Prop<'width', number | string, false> & Define.Prop<'height', number | string, false> & Define.Prop<'flex', number, false> & Define.Prop<'background', string, false> & Define.Prop<'borderRadius', number, false> & Define.Prop<'class', string, false> & Define.Slot<'default'>;
+import { type BackgroundValue } from '../shared/styles.js';
+export type CenterProps = Define.Prop<'width', number | string, false> & Define.Prop<'height', number | string, false> & Define.Prop<'flex', number, false> & Define.Prop<'background', BackgroundValue, false> & Define.Prop<'borderRadius', number, false> & Define.Prop<'class', string, false> & Define.Slot<'default'>;
 export declare const Center: import("@sigx/runtime-core").ComponentFactory<CenterProps, void, {
     default: () => import("@sigx/runtime-core").JSXElement | import("@sigx/runtime-core").JSXElement[] | null;
 }>;

package/dist/layout/Center.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component } from '@sigx/lynx';
+import { resolveBoxStyle } from '../shared/styles.js';
+export const Center = component(({ props, slots }) => {
+    const getStyle = () => {
+        const style = {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+        };
+        const box = resolveBoxStyle({
+            width: props.width,
+            height: props.height,
+            flex: props.flex,
+            background: props.background,
+            borderRadius: props.borderRadius,
+        });
+        for (const key in box) {
+            style[key] = box[key];
+        }
+        return style;
+    };
+    return () => (_jsx("view", { class: props.class, style: getStyle(), children: slots.default?.() }));
+});

package/dist/layout/Col.d.ts

@@ -1,6 +1,6 @@
 import { type Define } from '@sigx/lynx';
-import { type SpacingValue } from '../shared/styles';
-export type ColProps = Define.Prop<'gap', number, false> & Define.Prop<'align', 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline', false> & Define.Prop<'justify', 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly', false> & Define.Prop<'wrap', boolean, false> & Define.Prop<'padding', SpacingValue, false> & Define.Prop<'margin', SpacingValue, false> & Define.Prop<'width', number | string, false> & Define.Prop<'height', number | string, false> & Define.Prop<'flex', number, false> & Define.Prop<'background', string, false> & Define.Prop<'borderRadius', number, false> & Define.Prop<'class', string, false> & Define.Slot<'default'>;
+import { type SpacingValue, type BackgroundValue } from '../shared/styles.js';
+export type ColProps = Define.Prop<'gap', number, false> & Define.Prop<'align', 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline', false> & Define.Prop<'justify', 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly', false> & Define.Prop<'wrap', boolean, false> & Define.Prop<'padding', SpacingValue, false> & Define.Prop<'margin', SpacingValue, false> & Define.Prop<'width', number | string, false> & Define.Prop<'height', number | string, false> & Define.Prop<'flex', number, false> & Define.Prop<'background', BackgroundValue, false> & Define.Prop<'borderRadius', number, false> & Define.Prop<'class', string, false> & Define.Slot<'default'>;
 export declare const Col: import("@sigx/runtime-core").ComponentFactory<ColProps, void, {
     default: () => import("@sigx/runtime-core").JSXElement | import("@sigx/runtime-core").JSXElement[] | null;
 }>;

package/dist/layout/Col.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component } from '@sigx/lynx';
+import { resolveBoxStyle } from '../shared/styles.js';
+export const Col = component(({ props, slots }) => {
+    const getStyle = () => {
+        const style = {
+            display: 'flex',
+            flexDirection: 'column',
+        };
+        if (props.gap !== undefined)
+            style.gap = props.gap;
+        if (props.align)
+            style.alignItems = props.align;
+        if (props.justify)
+            style.justifyContent = props.justify;
+        if (props.wrap)
+            style.flexWrap = 'wrap';
+        const box = resolveBoxStyle({
+            width: props.width,
+            height: props.height,
+            flex: props.flex,
+            background: props.background,
+            borderRadius: props.borderRadius,
+            padding: props.padding,
+            margin: props.margin,
+        });
+        for (const key in box) {
+            style[key] = box[key];
+        }
+        return style;
+    };
+    return () => (_jsx("view", { class: props.class, style: getStyle(), children: slots.default?.() }));
+});

package/dist/layout/Divider.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component } from '@sigx/lynx';
+export const Divider = component(({ props }) => {
+    const getClasses = () => {
+        const c = [props.vertical ? 'divider-vertical' : 'divider'];
+        if (props.class)
+            c.push(props.class);
+        return c.join(' ');
+    };
+    const getStyle = () => {
+        const style = {};
+        if (props.color)
+            style.backgroundColor = props.color;
+        if (props.margin !== undefined) {
+            if (props.vertical) {
+                style.marginLeft = props.margin;
+                style.marginRight = props.margin;
+            }
+            else {
+                style.marginTop = props.margin;
+                style.marginBottom = props.margin;
+            }
+        }
+        return style;
+    };
+    return () => (_jsx("view", { class: getClasses(), style: getStyle() }));
+});

package/dist/layout/Row.d.ts

@@ -1,6 +1,6 @@
 import { type Define } from '@sigx/lynx';
-import { type SpacingValue } from '../shared/styles';
-export type RowProps = Define.Prop<'gap', number, false> & Define.Prop<'align', 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline', false> & Define.Prop<'justify', 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly', false> & Define.Prop<'wrap', boolean, false> & Define.Prop<'padding', SpacingValue, false> & Define.Prop<'margin', SpacingValue, false> & Define.Prop<'width', number | string, false> & Define.Prop<'height', number | string, false> & Define.Prop<'flex', number, false> & Define.Prop<'background', string, false> & Define.Prop<'borderRadius', number, false> & Define.Prop<'class', string, false> & Define.Slot<'default'>;
+import { type SpacingValue, type BackgroundValue } from '../shared/styles.js';
+export type RowProps = Define.Prop<'gap', number, false> & Define.Prop<'align', 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline', false> & Define.Prop<'justify', 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly', false> & Define.Prop<'wrap', boolean, false> & Define.Prop<'padding', SpacingValue, false> & Define.Prop<'margin', SpacingValue, false> & Define.Prop<'width', number | string, false> & Define.Prop<'height', number | string, false> & Define.Prop<'flex', number, false> & Define.Prop<'background', BackgroundValue, false> & Define.Prop<'borderRadius', number, false> & Define.Prop<'class', string, false> & Define.Slot<'default'>;
 export declare const Row: import("@sigx/runtime-core").ComponentFactory<RowProps, void, {
     default: () => import("@sigx/runtime-core").JSXElement | import("@sigx/runtime-core").JSXElement[] | null;
 }>;

package/dist/layout/Row.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component } from '@sigx/lynx';
+import { resolveBoxStyle } from '../shared/styles.js';
+export const Row = component(({ props, slots }) => {
+    const getStyle = () => {
+        const style = {
+            display: 'flex',
+            flexDirection: 'row',
+        };
+        if (props.gap !== undefined)
+            style.gap = props.gap;
+        if (props.align)
+            style.alignItems = props.align;
+        if (props.justify)
+            style.justifyContent = props.justify;
+        if (props.wrap)
+            style.flexWrap = 'wrap';
+        const box = resolveBoxStyle({
+            width: props.width,
+            height: props.height,
+            flex: props.flex,
+            background: props.background,
+            borderRadius: props.borderRadius,
+            padding: props.padding,
+            margin: props.margin,
+        });
+        for (const key in box) {
+            style[key] = box[key];
+        }
+        return style;
+    };
+    return () => (_jsx("view", { class: props.class, style: getStyle(), children: slots.default?.() }));
+});

package/dist/layout/ScrollView.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component } from '@sigx/lynx';
+export const ScrollView = component(({ props, slots }) => {
+    const getStyle = () => {
+        const style = {};
+        if (props.height !== undefined)
+            style.height = props.height;
+        if (props.width !== undefined)
+            style.width = props.width;
+        if (props.flex !== undefined)
+            style.flex = props.flex;
+        return style;
+    };
+    return () => {
+        const dir = props.direction ?? 'vertical';
+        return (_jsx("scroll-view", { class: props.class, style: getStyle(), "scroll-orientation": dir, "scroll-y": dir === 'vertical' ? true : undefined, "scroll-x": dir === 'horizontal' ? true : undefined, "show-scrollbar": props.showScrollbar, bounces: props.bounces, children: slots.default?.() }));
+    };
+});

package/dist/layout/Spacer.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component } from '@sigx/lynx';
+export const Spacer = component(({ props }) => {
+    const getStyle = () => {
+        if (props.size !== undefined) {
+            return { width: props.size, height: props.size };
+        }
+        return { flex: 1 };
+    };
+    return () => (_jsx("view", { class: props.class, style: getStyle() }));
+});

package/dist/navigation/NavDrawer.d.ts

@@ -0,0 +1,62 @@
+/**
+ * `<NavDrawer>` — daisy-themed off-canvas drawer for `@sigx/lynx-navigation`.
+ *
+ * Composes the primitive `<Drawer>` purely as the state provider (so
+ * `useDrawer()` resolves for descendants) and drives its own
+ * `SharedValue`-backed slide + fade transition via `@sigx/lynx-motion`.
+ *
+ * Behavior:
+ *  - Panel translates from off-screen on the configured `side` to `0`
+ *    on open (and back on close). Default side is `'left'`.
+ *  - Backdrop fades 0 → 0.3 in tandem.
+ *  - Chrome mounts on open and unmounts after the exit animation completes,
+ *    so the closed-state drawer doesn't intercept taps to underlying tabs.
+ *  - Backdrop is a plain `<view bindtap>` — no Pressable scale/opacity
+ *    feedback (which flickers an opaque scrim).
+ *
+ * Usage:
+ *
+ * ```tsx
+ * <NavigationRoot routes={routes}>
+ *   <NavDrawer slots={{ sidebar: () => <MyMenu /> }}>
+ *     <Stack />
+ *   </NavDrawer>
+ * </NavigationRoot>
+ * ```
+ *
+ * Inside descendants, `useDrawer()` from `@sigx/lynx-navigation` returns
+ * `{ isOpen, open, close, toggle }`.
+ *
+ * The primitive's own `<Drawer />` is intentionally minimal (state +
+ * `display: none` overlay only); this component is the
+ * batteries-included variant for daisyui consumers.
+ */
+import { type Define, type JSXElement } from '@sigx/lynx';
+import { type BackgroundValue } from '../shared/styles.js';
+export type NavDrawerSide = 'left' | 'right';
+export type NavDrawerProps = 
+/** Which edge the panel slides in from. Default 'left'. */
+Define.Prop<'side', NavDrawerSide, false>
+/** Panel surface color. Accepts daisy tokens ('base-100', 'primary', …)
+ *  — applied as a `bg-<token>` Tailwind class so the daisy preset's
+ *  CSS-pipeline rule resolves the `var(--color-<token>)`. Also accepts
+ *  raw CSS color strings ('#facc15', 'rgb(...)') — applied as inline
+ *  `backgroundColor`. Default 'base-100'. */
+ & Define.Prop<'background', BackgroundValue, false>
+/** Show a separator line on the panel's inner edge. Default true. */
+ & Define.Prop<'bordered', boolean, false>
+/** Render a dismiss-on-tap scrim over the main content when open. Default true. */
+ & Define.Prop<'backdrop', boolean, false>
+/** Panel width in pixels. Default 280. */
+ & Define.Prop<'width', number, false>
+/** Open the drawer at mount. Default false. Passthrough to primitive `<Drawer>`. */
+ & Define.Prop<'initialOpen', boolean, false>
+/** Drawer panel contents — your menu UI. */
+ & Define.Slot<'sidebar'>
+/** Main content — usually a `<Stack>` or `<Tabs>`. */
+ & Define.Slot<'default'>;
+export declare const NavDrawer: import("@sigx/runtime-core").ComponentFactory<NavDrawerProps, void, {
+    sidebar: () => JSXElement | JSXElement[] | null;
+} & {
+    default: () => JSXElement | JSXElement[] | null;
+}>;

package/dist/navigation/NavDrawer.js

@@ -0,0 +1,205 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@sigx/lynx/jsx-runtime";
+/**
+ * `<NavDrawer>` — daisy-themed off-canvas drawer for `@sigx/lynx-navigation`.
+ *
+ * Composes the primitive `<Drawer>` purely as the state provider (so
+ * `useDrawer()` resolves for descendants) and drives its own
+ * `SharedValue`-backed slide + fade transition via `@sigx/lynx-motion`.
+ *
+ * Behavior:
+ *  - Panel translates from off-screen on the configured `side` to `0`
+ *    on open (and back on close). Default side is `'left'`.
+ *  - Backdrop fades 0 → 0.3 in tandem.
+ *  - Chrome mounts on open and unmounts after the exit animation completes,
+ *    so the closed-state drawer doesn't intercept taps to underlying tabs.
+ *  - Backdrop is a plain `<view bindtap>` — no Pressable scale/opacity
+ *    feedback (which flickers an opaque scrim).
+ *
+ * Usage:
+ *
+ * ```tsx
+ * <NavigationRoot routes={routes}>
+ *   <NavDrawer slots={{ sidebar: () => <MyMenu /> }}>
+ *     <Stack />
+ *   </NavDrawer>
+ * </NavigationRoot>
+ * ```
+ *
+ * Inside descendants, `useDrawer()` from `@sigx/lynx-navigation` returns
+ * `{ isOpen, open, close, toggle }`.
+ *
+ * The primitive's own `<Drawer />` is intentionally minimal (state +
+ * `display: none` overlay only); this component is the
+ * batteries-included variant for daisyui consumers.
+ */
+import { component, effect, onUnmounted, runOnMainThread, signal, untrack, useAnimatedStyle, useMainThreadRef, useSharedValue, } from '@sigx/lynx';
+import { withTiming } from '@sigx/lynx-motion';
+import { Drawer, useDrawer } from '@sigx/lynx-navigation';
+import { resolveDaisyColor } from '../shared/styles.js';
+/**
+ * Slide-in / fade-in timing. Slightly longer than the slide-out so the
+ * drawer feels deliberate on open and snappy on dismiss — matches the
+ * convention used by Stack's push/pop transitions in `lynx-navigation`.
+ */
+const ENTER_DURATION_SEC = 0.28;
+const EXIT_DURATION_SEC = 0.22;
+const EXIT_DURATION_MS = Math.round(EXIT_DURATION_SEC * 1000);
+const BACKDROP_OPACITY = 0.3;
+export const NavDrawer = component(({ props, slots }) => {
+    return () => (_jsx(Drawer, { initialOpen: props.initialOpen, children: _jsx(NavDrawerShell, { side: props.side ?? 'left', background: props.background ?? 'base-100', bordered: props.bordered ?? true, backdrop: props.backdrop ?? true, width: props.width ?? 280, renderSidebar: slots.sidebar, children: slots.default?.() }) }));
+});
+const NavDrawerShell = component(({ props, slots }) => {
+    const drawer = useDrawer();
+    // Seed progress from current open state so `initialOpen=true` mounts
+    // already-open without a slide-in flash.
+    const progress = useSharedValue(drawer.isOpen ? 1 : 0);
+    const shouldRender = signal(drawer.isOpen);
+    // Track whether the chrome is currently mounted (or animating out) so the
+    // initial effect tick on a closed drawer doesn't kick a no-op close
+    // animation + unmount timer.
+    let chromeMounted = drawer.isOpen;
+    let exitTimer = null;
+    // Pre-register the worklets at setup so the SWC main-thread transform
+    // captures `progress` once. Re-registering on every effect tick would
+    // re-ship the worklet body across the bridge unnecessarily.
+    const openAnim = runOnMainThread(() => {
+        'main thread';
+        withTiming(progress, 1, { duration: ENTER_DURATION_SEC });
+    });
+    const closeAnim = runOnMainThread(() => {
+        'main thread';
+        withTiming(progress, 0, { duration: EXIT_DURATION_SEC });
+    });
+    const animRunner = effect(() => {
+        const open = drawer.isOpen;
+        if (open) {
+            if (exitTimer != null) {
+                clearTimeout(exitTimer);
+                exitTimer = null;
+            }
+            chromeMounted = true;
+            untrack(() => {
+                shouldRender.value = true;
+            });
+            openAnim();
+        }
+        else if (chromeMounted) {
+            chromeMounted = false;
+            closeAnim();
+            // Wait for the exit animation to finish before unmounting the
+            // chrome — otherwise the panel pops out instead of sliding,
+            // and the backdrop's bindtap area disappears mid-fade.
+            exitTimer = setTimeout(() => {
+                untrack(() => {
+                    shouldRender.value = false;
+                });
+                exitTimer = null;
+            }, EXIT_DURATION_MS);
+        }
+        // else: drawer is closed and the chrome was never mounted (the
+        // common initial-mount case) — nothing to animate or schedule.
+    });
+    onUnmounted(() => {
+        animRunner.stop();
+        if (exitTimer != null)
+            clearTimeout(exitTimer);
+    });
+    return () => {
+        return (_jsxs("view", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                position: 'relative',
+                width: '100%',
+                height: '100%',
+            }, children: [slots.default?.(), shouldRender.value
+                    ? (_jsx(DrawerChrome
+                    // Key by side+width — `useAnimatedStyle`
+                    // snapshots `outputRange` at setup, so a
+                    // runtime change to either (panel slide
+                    // distance is signed by side, magnitude by
+                    // width) needs a remount + rebind. Width
+                    // changes mid-open are vanishingly rare;
+                    // toggling `side` likewise. The explicit
+                    // remount keeps the binding consistent if
+                    // a consumer wires either to a reactive
+                    // value.
+                    , { side: props.side, progress: progress, width: props.width, background: props.background, bordered: props.bordered, backdrop: props.backdrop, renderSidebar: props.renderSidebar, onBackdropPress: () => drawer.close() }, `drawer-chrome-${props.side}-${props.width}`))
+                    : null] }));
+    };
+});
+const DrawerChrome = component(({ props }) => {
+    const panelRef = useMainThreadRef(null);
+    const backdropRef = useMainThreadRef(null);
+    // Slide range mirrors `side`: left-side starts at `-width` (off-screen
+    // left) and lands at `0`; right-side starts at `+width` and lands at `0`.
+    // Capture once — NavDrawerShell remounts on side/width change to rebind.
+    const closedTx = props.side === 'right' ? props.width : -props.width;
+    // Bind once at setup. `useAnimatedStyle` snapshots its mapper/range
+    // params at registration time; NavDrawerShell keys DrawerChrome by
+    // side+width so a change to either forces a remount + rebind here.
+    useAnimatedStyle(panelRef, props.progress, 'translateX', {
+        inputRange: [0, 1],
+        outputRange: [closedTx, 0],
+    });
+    // Register unconditionally so a runtime `backdrop` toggle works
+    // both directions. `useAnimatedStyle` only binds once at setup; if
+    // this lived inside `if (props.backdrop)` a false→true toggle would
+    // mount a backdrop view with no opacity binding, leaving it stuck
+    // at the inline `opacity: 0` seed. When the backdrop view isn't
+    // rendered, `backdropRef.current` is null and the MT bridge's
+    // `setStyleProperties` apply silently skips — no harm.
+    useAnimatedStyle(backdropRef, props.progress, 'opacity', {
+        inputRange: [0, 1],
+        outputRange: [0, BACKDROP_OPACITY],
+    });
+    return () => {
+        const isRight = props.side === 'right';
+        // Lynx resolves `var(--color-*)` inside CSS-pipeline rules (Tailwind
+        // classes, stylesheet imports) but NOT inside inline `style.backgroundColor`
+        // — an inline `'var(--color-base-100)'` paints transparent. So for known
+        // daisy tokens we apply the surface via the Tailwind class `bg-<token>`
+        // (which the daisy preset compiles to a `var()` rule that DOES resolve);
+        // raw CSS strings ('#facc15', 'rgb(...)', 'var(--my-custom)') fall through
+        // to inline because there's no compiled class to use for them.
+        const resolved = resolveDaisyColor(props.background);
+        const isDaisyToken = resolved !== props.background;
+        const bgClass = isDaisyToken ? `bg-${props.background}` : '';
+        // Border lives on the panel's *inner* edge (the one facing the
+        // main content). Daisy class names are still the cleanest way to
+        // pick up `--color-base-300` for the separator hairline.
+        const borderClass = props.bordered
+            ? (isRight ? 'border-l border-base-300' : 'border-r border-base-300')
+            : '';
+        const panelClass = [bgClass, borderClass].filter(Boolean).join(' ');
+        const panelStyle = {
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            width: props.width,
+        };
+        if (!isDaisyToken)
+            panelStyle.backgroundColor = props.background;
+        // Only the side-relevant inset is set; omitting the other lets
+        // the panel size to `width` rather than stretching edge-to-edge.
+        if (isRight)
+            panelStyle.right = 0;
+        else
+            panelStyle.left = 0;
+        return (_jsxs("view", { style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+            }, children: [props.backdrop
+                    ? (_jsx("view", { "main-thread:ref": backdropRef, bindtap: () => props.onBackdropPress(), class: "bg-base-content", style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            opacity: 0,
+                        }, "accessibility-element": true, "accessibility-label": "Close drawer", "accessibility-trait": "button" }))
+                    : null, _jsx("view", { "main-thread:ref": panelRef, class: panelClass, style: panelStyle, children: props.renderSidebar?.() })] }));
+    };
+});

package/dist/navigation/NavHeader.d.ts

@@ -19,13 +19,24 @@
  * for daisyui consumers.
  */
 import { type Define, type JSXElement } from '@sigx/lynx';
+import { type IconSpec } from '@sigx/lynx-icons';
 export type NavHeaderBackground = 'base-100' | 'base-200' | 'base-300' | 'transparent';
 export type NavHeaderProps = 
 /** Surface color token. Default 'base-200'. */
 Define.Prop<'background', NavHeaderBackground, false>
 /** Show a separator line at the bottom. Default true. */
  & Define.Prop<'bordered', boolean, false>
-/** Replace the back button entirely. Receives `pop` so the custom node can wire its own tap handler. */
+/**
+ * Render the back chevron from an `IconSpec` (e.g. `{ set: 'lucide',
+ * name: 'chevron-left' }`). The icon is rendered with
+ * `variant="primary"`, which `<ThemeProvider>`'s color resolver maps
+ * to the daisy primary hex and substitutes into the SVG `fill=`.
+ * Wrapped in a Pressable wired to the stack's pop. Falls back to the
+ * default "‹ Back" text when not provided. Ignored when `renderBack`
+ * or `<Screen.HeaderLeft>` is also supplied — those win.
+ */
+ & Define.Prop<'backIcon', IconSpec, false>
+/** Full override: render any JSX for the back button. Takes priority over `backIcon`. */
  & Define.Prop<'renderBack', (ctx: {
     pop: () => void;
 }) => JSXElement, false>;

package/dist/navigation/NavHeader.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@sigx/lynx/jsx-runtime";
+/**
+ * `<NavHeader>` — daisy-themed header bar for `@sigx/lynx-navigation`.
+ *
+ * Pairs with `<Stack>` from `@sigx/lynx-navigation`:
+ *
+ * ```tsx
+ * <Stack initialRoute="tripsHome">
+ *   <NavHeader />
+ * </Stack>
+ * ```
+ *
+ * Reads the focused screen's options + slot fills via
+ * `useScreenChrome()`, applies daisy theming (base-200 surface, bottom
+ * separator, native-ish horizontal layout with centred title).
+ *
+ * The navigation package's own `<Header />` is intentionally headless —
+ * no flex-row, no padding, no theme — for consumers who want to do all
+ * styling themselves. This component is the batteries-included variant
+ * for daisyui consumers.
+ */
+import { component } from '@sigx/lynx';
+import { Pressable } from '@sigx/lynx-gestures';
+import { Icon } from '@sigx/lynx-icons';
+import { useScreenChrome } from '@sigx/lynx-navigation';
+import { PRESSED_SCALE, PRESSED_OPACITY } from '../shared/press.js';
+/** Pixel size used when rendering the back-button icon from an `IconSpec`. */
+const NAV_HEADER_ICON_SIZE = 22;
+const backgroundClass = {
+    'base-100': 'bg-base-100',
+    'base-200': 'bg-base-200',
+    'base-300': 'bg-base-300',
+    'transparent': '',
+};
+export const NavHeader = component(({ props }) => {
+    const chrome = useScreenChrome();
+    return () => {
+        if (!chrome.headerShown)
+            return null;
+        // Full override: <Screen.Header> rendered.
+        const override = chrome.header;
+        if (override)
+            return override();
+        const bg = backgroundClass[props.background ?? 'base-200'];
+        const bordered = props.bordered ?? true;
+        const borderClass = bordered ? 'border-b border-base-300' : '';
+        const containerClass = [
+            'flex flex-row items-center px-3',
+            'h-12', // ~48dp / standard nav bar height
+            bg,
+            borderClass,
+        ].filter(Boolean).join(' ');
+        // Resolution order: <Screen.HeaderLeft> slot fill → custom renderBack
+        // → backIcon spec → default text. The spec path renders `<Icon>`
+        // with `variant="primary"`, which the daisy resolver maps to the
+        // primary hex and substitutes into the SVG `fill=`.
+        const left = chrome.headerLeft?.()
+            ?? (chrome.canGoBack
+                ? (props.renderBack
+                    ? props.renderBack({ pop: chrome.pop })
+                    : (props.backIcon
+                        ? _jsx(BackIconButton, { spec: props.backIcon, onPress: chrome.pop })
+                        : _jsx(DefaultBackButton, { onPress: chrome.pop })))
+                : null);
+        const right = chrome.headerRight?.() ?? null;
+        return (_jsxs("view", { class: containerClass, children: [_jsx("view", { class: "flex flex-row items-center", style: { minWidth: 56 }, children: left }), _jsx("view", { class: "flex-1 items-center justify-center", children: _jsx("text", { class: "text-base-content text-base font-semibold", children: chrome.title }) }), _jsx("view", { class: "flex flex-row items-center justify-end", style: { minWidth: 56 }, children: right })] }));
+    };
+});
+const DefaultBackButton = component(({ props }) => {
+    return () => (_jsx(Pressable, { class: "px-2 py-2", pressedScale: PRESSED_SCALE, pressedOpacity: PRESSED_OPACITY, longPressDuration: 0, "accessibility-element": true, "accessibility-label": "Back", "accessibility-trait": "button", onPress: () => props.onPress(), children: _jsx("text", { class: "text-primary text-base", children: "\u2039 Back" }) }));
+});
+const BackIconButton = component(({ props }) => {
+    return () => (_jsx(Pressable, { class: "px-2 py-2", pressedScale: PRESSED_SCALE, pressedOpacity: PRESSED_OPACITY, longPressDuration: 0, "accessibility-element": true, "accessibility-label": "Back", "accessibility-trait": "button", onPress: () => props.onPress(), children: _jsx(Icon, { set: props.spec.set, name: props.spec.name, size: NAV_HEADER_ICON_SIZE, variant: "primary" }) }));
+});