@sigx/lynx-daisyui 0.4.0 → 0.4.2

package/dist/navigation/NavTabBar.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@sigx/lynx/jsx-runtime";
+/**
+ * `<NavTabBar>` — daisy-themed tab bar for `@sigx/lynx-navigation`.
+ *
+ * Pairs with `<Tabs>` + `<Tabs.Screen>` from `@sigx/lynx-navigation`:
+ * subscribes to `useTabs()` for the active tab + tab list, dispatches
+ * tab changes via `setActive`. Pure UI / styling; the navigation
+ * package owns state.
+ *
+ * Default visual treatment: bottom navigation bar — base-200 background,
+ * top separator line, active label in primary color.
+ *
+ * Use the standalone daisy `<Tabs>` / `<Tab>` (also exported from this
+ * package) instead when you want generic tab UI not driven by navigation
+ * state (e.g. segmented controls inside a settings panel).
+ */
+import { component } from '@sigx/lynx';
+import { Pressable } from '@sigx/lynx-gestures';
+import { Icon } from '@sigx/lynx-icons';
+import { useTabs } from '@sigx/lynx-navigation';
+import { PRESSED_SCALE, PRESSED_OPACITY } from '../shared/press.js';
+/** Narrow `TabInfo.icon` to its `IconSpec` variant — the bar renders `<Icon>` for these. */
+const isIconSpec = (v) => typeof v === 'object' && v !== null && 'set' in v && 'name' in v
+    && typeof v.set === 'string'
+    && typeof v.name === 'string';
+const backgroundClass = {
+    'base-100': 'bg-base-100',
+    'base-200': 'bg-base-200',
+    'base-300': 'bg-base-300',
+    'transparent': '',
+};
+export const NavTabBar = component(({ props }) => {
+    const nav = useTabs();
+    return () => {
+        const tabs = nav.tabs;
+        const active = nav.active;
+        const renderer = props.renderTab;
+        const position = props.position ?? 'bottom';
+        const bg = backgroundClass[props.background ?? 'base-200'];
+        const bordered = props.bordered ?? true;
+        // Bottom tab bar → top border. Top tab bar → bottom border.
+        const borderClass = bordered
+            ? (position === 'bottom' ? 'border-t border-base-300' : 'border-b border-base-300')
+            : '';
+        const containerClass = ['flex flex-row', bg, borderClass].filter(Boolean).join(' ');
+        return (_jsx("view", { "accessibility-element": false, class: containerClass, children: tabs.map((info) => {
+                const isActive = info.name === active;
+                const onPress = () => nav.setActive(info.name);
+                if (renderer) {
+                    return renderer(info, { active: isActive, onPress });
+                }
+                return (_jsx(DefaultNavTab, { info: info, active: isActive, onPress: onPress }));
+            }) }));
+    };
+});
+/**
+ * Pixel size the bar uses when rendering `<Icon>` from an `IconSpec`.
+ * Matches the default tab-row height visually.
+ */
+const TAB_ICON_SIZE = 22;
+const DefaultNavTab = component(({ props }) => {
+    return () => {
+        const label = props.info.label ?? props.info.name;
+        const a11y = props.info.accessibilityLabel ?? label;
+        // Label uses native CSS color via daisy `text-*` classes — Lynx's
+        // `<text>` honors color inheritance normally. The icon path below
+        // can't rely on the same trick (see comment there for why).
+        const labelTone = props.active ? 'text-primary' : 'text-base-content opacity-60';
+        const weight = props.active ? 'font-semibold' : '';
+        const icon = props.info.icon;
+        // For an `IconSpec`, render `<Icon>` with the matching daisy
+        // variant. `<ThemeProvider>`'s color resolver maps `'primary'` /
+        // `'base-content'` (etc.) to the current theme's hex value, which
+        // `<Icon>` substitutes directly into the SVG `fill=` attribute —
+        // Lynx's `<svg content=…>` parses inline SVG in isolation and
+        // doesn't inherit host `color`, so class-based theming doesn't
+        // reach the SVG content. Inactive layers `opacity-60` as a class
+        // on the outer element (opacity does propagate to the raster).
+        //
+        // For a `JSXElement`, the consumer is in charge of styling — we
+        // leave it untouched. They can opt into the same theming by
+        // passing `variant="primary"` themselves.
+        const iconVariant = props.active ? 'primary' : 'base-content';
+        const iconClass = props.active ? undefined : 'opacity-60';
+        const renderedIcon = isIconSpec(icon)
+            ? _jsx(Icon, { set: icon.set, name: icon.name, size: TAB_ICON_SIZE, variant: iconVariant, class: iconClass })
+            : (icon ?? null);
+        return (_jsxs(Pressable, { class: "flex-1 items-center justify-center py-3", pressedScale: PRESSED_SCALE, pressedOpacity: PRESSED_OPACITY, longPressDuration: 0, "accessibility-element": true, "accessibility-label": a11y, "accessibility-trait": "button", "accessibility-status": props.active ? 'selected' : undefined, onPress: () => props.onPress(), children: [renderedIcon, _jsx("text", { class: `text-sm ${labelTone} ${weight}`, children: label })] }));
+    };
+});

package/dist/navigation/SwiperIndicator.d.ts

@@ -0,0 +1,59 @@
+import { type Define, type PrimitiveSignal, type SharedValue } from '@sigx/lynx';
+import { type DaisyColor } from '../shared/styles.js';
+/**
+ * Visual style for the swiper page indicator.
+ *
+ * - `dots` — equally-spaced circles, the active one fades in via opacity.
+ *   Today's default. Cheap (opacity-only MT mapper, no layout each frame).
+ * - `bar` — fixed track with a single sliding thumb. Single MT binding
+ *   regardless of page count, so cheapest for very long carousels.
+ * - `pill` — the active dot stretches horizontally into a pill while
+ *   neighbours stay circular. Uses `scaleX` so siblings don't reflow.
+ * - `numbered` — text counter like `2 / 5`. Pure BG-thread, no animation.
+ * - `scale-pulse` — circles where the active one scales up. No colour
+ *   crossfade — pairs well with monochrome palettes.
+ */
+export type SwiperIndicatorVariant = 'dots' | 'bar' | 'pill' | 'numbered' | 'scale-pulse';
+export type SwiperIndicatorSize = 'xs' | 'sm' | 'md' | 'lg';
+export type SwiperIndicatorProps = Define.Prop<'variant', SwiperIndicatorVariant, false>
+/** Live MT pixel offset from the parent `<Swiper>`. Required for all animated variants. */
+ & Define.Prop<'offset', SharedValue<number>, false>
+/** Page width in CSS px. Must match the Swiper's effective page width. */
+ & Define.Prop<'pageWidth', number, false>
+/** Total page count. */
+ & Define.Prop<'count', number, true>
+/**
+ * Current page (whole-units). Required for `numbered`, used by `bar`
+ * as fallback when `offset` isn't wired, and consumed by all variants
+ * for tap-to-jump.
+ */
+ & Define.Prop<'index', PrimitiveSignal<number>, false> & Define.Prop<'color', DaisyColor, false> & Define.Prop<'inactiveColor', DaisyColor, false> & Define.Prop<'size', SwiperIndicatorSize, false>
+/**
+ * Tap-to-jump handler. The receiver should typically write
+ * `index.value = i` to glide the swiper to that page.
+ */
+ & Define.Prop<'onDotPress', (index: number) => void, false> & Define.Prop<'class', string, false> & Define.Prop<'style', Record<string, string | number>, false>;
+/**
+ * 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 declare const SwiperIndicator: import("@sigx/runtime-core").ComponentFactory<SwiperIndicatorProps, void, {}>;

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/navigation/Tabs.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@sigx/lynx/jsx-runtime";
+import { component, compound } from '@sigx/lynx';
+import { Pressable } from '@sigx/lynx-gestures';
+import { PRESSED_SCALE, PRESSED_OPACITY } from '../shared/press.js';
+const _Tabs = component(({ props, slots }) => {
+    return () => (_jsx("view", { class: `tabs${props.class ? ' ' + props.class : ''}`, children: slots.default?.() }));
+});
+const Tab = component(({ props, slots }) => {
+    return () => {
+        const isActive = props.active ?? false;
+        return (_jsxs(Pressable, { class: `tab${isActive ? ' tab-active' : ''}${props.class ? ' ' + props.class : ''}`, pressedScale: PRESSED_SCALE, pressedOpacity: PRESSED_OPACITY, longPressDuration: 0, onPress: () => {
+                props.onPress?.();
+            }, children: [slots.default?.(), props.label ? _jsx("text", { children: props.label }) : null] }));
+    };
+});
+export const Tabs = compound(_Tabs, {
+    Tab,
+});

package/dist/preset/index.js

@@ -1,40 +1,66 @@
-import e from "tailwindcss/plugin";
-//#region src/preset/index.ts
-var t = {
-	primary: "var(--color-primary)",
-	"primary-content": "var(--color-primary-content)",
-	secondary: "var(--color-secondary)",
-	"secondary-content": "var(--color-secondary-content)",
-	accent: "var(--color-accent)",
-	"accent-content": "var(--color-accent-content)",
-	neutral: "var(--color-neutral)",
-	"neutral-content": "var(--color-neutral-content)",
-	"base-100": "var(--color-base-100)",
-	"base-200": "var(--color-base-200)",
-	"base-300": "var(--color-base-300)",
-	"base-content": "var(--color-base-content)",
-	info: "var(--color-info)",
-	"info-content": "var(--color-info-content)",
-	success: "var(--color-success)",
-	"success-content": "var(--color-success-content)",
-	warning: "var(--color-warning)",
-	"warning-content": "var(--color-warning-content)",
-	error: "var(--color-error)",
-	"error-content": "var(--color-error-content)"
-}, n = e(({ addUtilities: e }) => {
-	e({ ".flex-fill": {
-		flexGrow: "1",
-		flexShrink: "1",
-		flexBasis: "0",
-		minHeight: "0",
-		display: "flex",
-		flexDirection: "column"
-	} });
-}), r = {
-	theme: { extend: { colors: t } },
-	plugins: [n]
-}, i = r;
-//#endregion
-export { r as DaisyLynxPreset, i as daisyuiPreset };
-
-//# sourceMappingURL=index.js.map
+import plugin from 'tailwindcss/plugin';
+/**
+ * DaisyUI Lynx Tailwind Preset
+ *
+ * Maps DaisyUI semantic color tokens to CSS custom properties
+ * defined in @sigx/lynx-daisyui/styles. Consumers add this
+ * preset to their tailwind.config.ts so utilities like
+ * `bg-primary` and `text-base-content` resolve to our tokens.
+ *
+ * Also ships a `flex-fill` utility — the Lynx-correct "fill remaining
+ * space" class. Why this is in our preset rather than baked into Lynx's
+ * own tailwind preset: in Lynx (like React Native) `flex: 1` shorthand
+ * expands to `flex: 1 1 auto`, where `flexBasis: 'auto'` sizes the box
+ * to its content first, collapsing the layout chain. The browser-CSS
+ * intuition that `flex-1` = "fill remaining space" is wrong here, and
+ * Tailwind's own `flex-1` class expands to the same broken shorthand.
+ * `flex-fill` writes the long-form properties directly so the result
+ * actually fills.
+ */
+const daisyColors = {
+    'primary': 'var(--color-primary)',
+    'primary-content': 'var(--color-primary-content)',
+    'secondary': 'var(--color-secondary)',
+    'secondary-content': 'var(--color-secondary-content)',
+    'accent': 'var(--color-accent)',
+    'accent-content': 'var(--color-accent-content)',
+    'neutral': 'var(--color-neutral)',
+    'neutral-content': 'var(--color-neutral-content)',
+    'base-100': 'var(--color-base-100)',
+    'base-200': 'var(--color-base-200)',
+    'base-300': 'var(--color-base-300)',
+    'base-content': 'var(--color-base-content)',
+    'info': 'var(--color-info)',
+    'info-content': 'var(--color-info-content)',
+    'success': 'var(--color-success)',
+    'success-content': 'var(--color-success-content)',
+    'warning': 'var(--color-warning)',
+    'warning-content': 'var(--color-warning-content)',
+    'error': 'var(--color-error)',
+    'error-content': 'var(--color-error-content)',
+};
+const lynxLayoutPlugin = plugin(({ addUtilities }) => {
+    addUtilities({
+        // Long-form flex-fill — the Lynx-correct "take remaining space along
+        // the main axis" utility. Default flex direction column; consumers
+        // who want a horizontal fill compose with `flex-row` on the parent.
+        '.flex-fill': {
+            flexGrow: '1',
+            flexShrink: '1',
+            flexBasis: '0',
+            minHeight: '0',
+            display: 'flex',
+            flexDirection: 'column',
+        },
+    });
+});
+export const DaisyLynxPreset = {
+    theme: {
+        extend: {
+            colors: daisyColors,
+        },
+    },
+    plugins: [lynxLayoutPlugin],
+};
+/** Alias — preferred consumer name. */
+export const daisyuiPreset = DaisyLynxPreset;

package/dist/shared/press.d.ts

@@ -0,0 +1,2 @@
+export declare const PRESSED_SCALE = 0.97;
+export declare const PRESSED_OPACITY = 0.85;

package/dist/shared/press.js

@@ -0,0 +1,6 @@
+// Shared press-feedback defaults applied across all interactive daisyui
+// components. Lynx has no CSS `:active` support, so press feedback comes from
+// `<Pressable>` (in `@sigx/lynx-gestures`) flipping inline opacity/transform
+// on the main thread.
+export const PRESSED_SCALE = 0.97;
+export const PRESSED_OPACITY = 0.85;

package/dist/shared/styles.d.ts

@@ -1,3 +1,25 @@
+/**
+ * DaisyUI color tokens — the set of semantic colors exposed by the
+ * built-in themes (`daisy-light` / `daisy-dark`) as `--color-<token>`
+ * CSS custom properties.
+ *
+ * Used by layout components' `background` prop so consumers can write
+ * `<Col background="base-100">` instead of `<Col class="bg-base-100">`
+ * and still get autocomplete + type safety.
+ *
+ * Single source of truth: both the `DaisyColor` union and the runtime
+ * `DAISY_COLOR_TOKENS` Set are derived from this tuple, so adding /
+ * 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];
+/**
+ * Resolve a `background` prop value to a CSS color string.
+ *
+ * - Known daisyUI tokens (e.g. `'base-100'`) → `var(--color-base-100)`.
+ * - Anything else (`'#ffaa00'`, `'rgb(…)'`, `'var(--my-custom)'`) is passed through unchanged.
+ */
+export declare function resolveDaisyColor(value: string): string;
 export type SpacingValue = number | {
     x?: number;
     y?: number;
@@ -6,14 +28,20 @@ export type SpacingValue = number | {
     bottom?: number;
     left?: number;
 };
+/**
+ * Accepts a daisyUI color token (autocompleted) OR any raw CSS color
+ * string (`'#fff'`, `'rgb(…)'`, `'var(--foo)'`).
+ */
+export type BackgroundValue = DaisyColor | (string & {});
 export interface BoxProps {
     width?: number | string;
     height?: number | string;
     flex?: number;
-    background?: string;
+    background?: BackgroundValue;
     borderRadius?: number;
     padding?: SpacingValue;
     margin?: SpacingValue;
 }
 export declare function resolveSpacing(value: SpacingValue | undefined, prefix: 'padding' | 'margin'): Record<string, number>;
 export declare function resolveBoxStyle(props: BoxProps): Record<string, unknown>;
+export {};

package/dist/shared/styles.js

@@ -0,0 +1,90 @@
+/**
+ * DaisyUI color tokens — the set of semantic colors exposed by the
+ * built-in themes (`daisy-light` / `daisy-dark`) as `--color-<token>`
+ * CSS custom properties.
+ *
+ * Used by layout components' `background` prop so consumers can write
+ * `<Col background="base-100">` instead of `<Col class="bg-base-100">`
+ * and still get autocomplete + type safety.
+ *
+ * Single source of truth: both the `DaisyColor` union and the runtime
+ * `DAISY_COLOR_TOKENS` Set are derived from this tuple, so adding /
+ * removing a token in one place is impossible.
+ */
+const DAISY_COLOR_TOKEN_LIST = [
+    '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',
+];
+const DAISY_COLOR_TOKENS = new Set(DAISY_COLOR_TOKEN_LIST);
+/**
+ * Resolve a `background` prop value to a CSS color string.
+ *
+ * - Known daisyUI tokens (e.g. `'base-100'`) → `var(--color-base-100)`.
+ * - Anything else (`'#ffaa00'`, `'rgb(…)'`, `'var(--my-custom)'`) is passed through unchanged.
+ */
+export function resolveDaisyColor(value) {
+    return DAISY_COLOR_TOKENS.has(value)
+        ? `var(--color-${value})`
+        : value;
+}
+export function resolveSpacing(value, prefix) {
+    if (value === undefined)
+        return {};
+    if (typeof value === 'number') {
+        return {
+            [`${prefix}Top`]: value,
+            [`${prefix}Right`]: value,
+            [`${prefix}Bottom`]: value,
+            [`${prefix}Left`]: value,
+        };
+    }
+    const style = {};
+    if (value.top !== undefined)
+        style[`${prefix}Top`] = value.top;
+    else if (value.y !== undefined)
+        style[`${prefix}Top`] = value.y;
+    if (value.bottom !== undefined)
+        style[`${prefix}Bottom`] = value.bottom;
+    else if (value.y !== undefined)
+        style[`${prefix}Bottom`] = value.y;
+    if (value.right !== undefined)
+        style[`${prefix}Right`] = value.right;
+    else if (value.x !== undefined)
+        style[`${prefix}Right`] = value.x;
+    if (value.left !== undefined)
+        style[`${prefix}Left`] = value.left;
+    else if (value.x !== undefined)
+        style[`${prefix}Left`] = value.x;
+    return style;
+}
+export function resolveBoxStyle(props) {
+    const style = {};
+    if (props.width !== undefined)
+        style.width = props.width;
+    if (props.height !== undefined)
+        style.height = props.height;
+    if (props.flex !== undefined) {
+        // Lynx (like React Native) expands `flex: n` shorthand to
+        // `flex: n n auto`, where `flexBasis: 'auto'` means "size to content
+        // first" — which collapses the layout chain. Write the long-form so
+        // `<Center flex={1}>` etc. actually fill remaining space.
+        style.flexGrow = props.flex;
+        style.flexShrink = 1;
+        style.flexBasis = 0;
+        style.minHeight = 0;
+    }
+    if (props.background !== undefined)
+        style.backgroundColor = resolveDaisyColor(props.background);
+    if (props.borderRadius !== undefined)
+        style.borderRadius = props.borderRadius;
+    Object.assign(style, resolveSpacing(props.padding, 'padding'));
+    Object.assign(style, resolveSpacing(props.margin, 'margin'));
+    return style;
+}