@sigx/lynx-daisyui 0.4.0 → 0.4.1

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/NavHeader.js

@@ -0,0 +1,62 @@
+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 { useScreenChrome } from '@sigx/lynx-navigation';
+import { PRESSED_SCALE, PRESSED_OPACITY } from '../shared/press.js';
+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(' ');
+        const left = chrome.headerLeft?.()
+            ?? (chrome.canGoBack
+                ? (props.renderBack
+                    ? props.renderBack({ pop: 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" }) }));
+});

package/dist/navigation/NavTabBar.js

@@ -0,0 +1,58 @@
+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 { useTabs } from '@sigx/lynx-navigation';
+import { PRESSED_SCALE, PRESSED_OPACITY } from '../shared/press.js';
+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 }));
+            }) }));
+    };
+});
+const DefaultNavTab = component(({ props }) => {
+    return () => {
+        const label = props.info.label ?? props.info.name;
+        const a11y = props.info.accessibilityLabel ?? label;
+        const textColor = props.active ? 'text-primary font-semibold' : 'text-base-content opacity-60';
+        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: [props.info.icon ?? null, _jsx("text", { class: `text-sm ${textColor}`, children: label })] }));
+    };
+});

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;
+}