@sigx/lynx-daisyui 0.1.3 → 0.4.1

package/README.md

@@ -42,6 +42,115 @@ import { daisyuiPreset } from '@sigx/lynx-daisyui/preset';
 export default { presets: [daisyuiPreset], /* … */ };
 ```
 
+The preset also publishes a `.flex-fill` utility class (long-form
+`flex-grow/shrink/basis: 0` + `display: flex; flexDirection: column`).
+Use it instead of `flex-1` when a Lynx parent's height comes from
+flex rather than an explicit percentage — `flex-1` expands to
+`flex: 1 1 auto`, which sizes to content and collapses the chain.
+
+## Theme switching
+
+The stylesheet ships two color themes (`daisy-light`, `daisy-dark`)
+plus style-modifier themes (`daisy-rounded`, `daisy-flat`). Each is a
+CSS class containing scoped `--color-*` / `--radius-*` variables; Lynx
+has `enableCSSInheritance: true` in its layout-pipeline defaults so
+the variables propagate to every descendant of an element with the
+theme class.
+
+`<ThemeProvider>` is a small wrapper that applies the active theme
+class to a host view and exposes a controller via `useTheme()`:
+
+```tsx
+import { ThemeProvider, useTheme } from '@sigx/lynx-daisyui';
+
+defineApp(() => () => (
+    <ThemeProvider initial="daisy-light">
+        <App />
+    </ThemeProvider>
+));
+
+// Anywhere inside:
+const theme = useTheme();
+theme.toggle();             // daisy-light ↔ daisy-dark
+theme.set('daisy-dark');    // explicit
+theme.name;                 // 'daisy-light' | 'daisy-dark' | custom string
+```
+
+The provider's host view defaults to flex-fill long-form so it doesn't
+collapse between a flex parent (`<SafeAreaProvider>`) and a flex child
+(`<SafeAreaView>`). Override via `style={…}` if you want a different
+layout role. For multi-class compositions (color + modifier),
+`theme.set('daisy-light daisy-rounded')` works — the class string is
+applied verbatim to the host view.
+
+## Navigation chrome
+
+Two daisy-themed components that pair with
+[`@sigx/lynx-navigation`](../lynx-navigation). Both read state via the
+navigation package's hooks (no internal-module imports), so swapping
+in custom designs later is a one-component change.
+
+### `<NavTabBar />`
+
+Themed bottom tab bar. Drop it inside `<Tabs>` and it picks up the
+active tab + tab list via `useTabs()`.
+
+```tsx
+import { Tabs } from '@sigx/lynx-navigation';
+import { NavTabBar } from '@sigx/lynx-daisyui';
+
+<Tabs initialTab="trips">
+    <Tabs.Screen name="trips" label="Trips">…</Tabs.Screen>
+    <Tabs.Screen name="map"   label="Map">…</Tabs.Screen>
+    <NavTabBar />
+</Tabs>
+```
+
+| Prop | Default | Notes |
+|---|---|---|
+| `position` | `'bottom'` | `'top'` flips the separator border to the bottom edge. |
+| `background` | `'base-200'` | `'base-100' / 'base-200' / 'base-300' / 'transparent'`. |
+| `bordered` | `true` | Show a 1px separator on the edge opposite `position`. |
+| `renderTab` | — | `(info, ctx) => JSX` — replace per-tab rendering entirely. |
+
+### `<NavHeader />`
+
+Themed header bar. Drop it inside a `<Stack>` (uses the Stack's
+default slot, introduced in `@sigx/lynx-navigation` 1.0) so its
+`useNav()` resolves to the per-stack nav:
+
+```tsx
+import { Stack } from '@sigx/lynx-navigation';
+import { NavHeader } from '@sigx/lynx-daisyui';
+
+<Stack initialRoute="tripsHome">
+    <NavHeader />
+</Stack>
+```
+
+Reads everything it needs via `useScreenChrome()` — title, header-
+shown, back-button visibility, and the screen's left/right slot fills.
+Renders an ~48dp horizontal bar with the title centred, a "‹ Back"
+button on the left when `canGoBack`, and the right slot flush-right.
+
+| Prop | Default | Notes |
+|---|---|---|
+| `background` | `'base-200'` | Same colour tokens as `NavTabBar`. |
+| `bordered` | `true` | Bottom separator line. |
+| `renderBack` | — | `({ pop }) => JSX` — replace the default back button. |
+
+For a fully-custom design, build directly on
+`useScreenChrome()` from `@sigx/lynx-navigation` — `NavHeader` is just
+one consumer of that hook.
+
+## Layout primitives
+
+Daisy's flex primitives (`Center`, `Col`, `Row`) accept a `flex={n}`
+prop. The preset rewrites that into the long-form `flex-grow/shrink/
+basis: 0` triple, so `flex={1}` actually fills available space instead
+of collapsing to content size — the standard Lynx `flex: 1` shorthand
+expands to `flex: 1 1 auto` which doesn't do what most people expect.
+
 ## Status
 
 Initial release — APIs may shift as the Lynx styling story evolves.

package/dist/buttons/Button.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component } from '@sigx/lynx';
+import { Pressable } from '@sigx/lynx-gestures';
+import { Loading } from '../feedback/Loading.js';
+import { PRESSED_SCALE, PRESSED_OPACITY } from '../shared/press.js';
+const variantClasses = {
+    primary: 'btn-primary', secondary: 'btn-secondary', accent: 'btn-accent',
+    info: 'btn-info', success: 'btn-success', warning: 'btn-warning',
+    error: 'btn-error', ghost: 'btn-ghost', link: 'btn-link', neutral: 'btn-neutral',
+};
+const sizeClasses = {
+    xs: 'btn-xs', sm: 'btn-sm', md: '', lg: 'btn-lg', xl: 'btn-xl',
+};
+export const Button = component(({ props, slots, emit }) => {
+    const getClasses = () => {
+        const c = ['btn'];
+        if (props.variant)
+            c.push(variantClasses[props.variant]);
+        if (props.size) {
+            const s = sizeClasses[props.size];
+            if (s)
+                c.push(s);
+        }
+        if (props.outline)
+            c.push('btn-outline');
+        if (props.soft)
+            c.push('btn-soft');
+        if (props.wide)
+            c.push('btn-wide');
+        if (props.loading)
+            c.push('btn-loading');
+        if (props.block)
+            c.push('btn-block');
+        if (props.circle)
+            c.push('btn-circle');
+        if (props.square)
+            c.push('btn-square');
+        if (props.active)
+            c.push('btn-active');
+        if (props.disabled)
+            c.push('btn-disabled');
+        if (props.class)
+            c.push(props.class);
+        return c.join(' ');
+    };
+    return () => {
+        const inert = !!(props.disabled || props.loading);
+        return (_jsx(Pressable, { class: getClasses(), disabled: inert, pressedScale: PRESSED_SCALE, pressedOpacity: PRESSED_OPACITY, longPressDuration: 0, onPress: () => { if (!inert)
+                emit('press'); }, children: props.loading
+                ? _jsx(Loading, { type: "spinner", size: "sm" })
+                : slots.default?.() }));
+    };
+});

package/dist/data/Avatar.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component } from '@sigx/lynx';
+const sizeMap = {
+    xs: 24,
+    sm: 32,
+    md: 48,
+    lg: 64,
+    xl: 96,
+};
+const fontSizeMap = {
+    xs: 10,
+    sm: 12,
+    md: 18,
+    lg: 24,
+    xl: 36,
+};
+export const Avatar = component(({ props }) => {
+    return () => {
+        const size = props.size || 'md';
+        const dim = sizeMap[size];
+        const classes = ['avatar'];
+        if (props.online)
+            classes.push('online');
+        if (props.offline)
+            classes.push('offline');
+        if (props.placeholder && !props.src)
+            classes.push('placeholder');
+        if (props.class)
+            classes.push(props.class);
+        const rounded = props.rounded;
+        const borderRadius = rounded === 'full' || rounded === true ? dim / 2 : 8;
+        const innerStyle = {
+            width: dim,
+            height: dim,
+            borderRadius,
+            overflow: 'hidden',
+            alignItems: 'center',
+            justifyContent: 'center',
+            display: 'flex',
+        };
+        if (props.src) {
+            return (_jsx("view", { class: classes.join(' '), children: _jsx("view", { style: innerStyle, children: _jsx("image", { src: props.src, style: { width: dim, height: dim, borderRadius } }) }) }));
+        }
+        return (_jsx("view", { class: classes.join(' '), children: _jsx("view", { class: "avatar-placeholder", style: innerStyle, children: _jsx("text", { style: { fontSize: fontSizeMap[size] }, children: props.placeholder || '?' }) }) }));
+    };
+});

package/dist/feedback/Alert.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component } from '@sigx/lynx';
+export const Alert = component(({ props, slots }) => {
+    const getClasses = () => {
+        const c = ['alert'];
+        if (props.variant)
+            c.push(`alert-${props.variant}`);
+        if (props.class)
+            c.push(props.class);
+        return c.join(' ');
+    };
+    return () => _jsx("view", { class: getClasses(), children: slots.default?.() });
+});

package/dist/feedback/Badge.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component } from '@sigx/lynx';
+export const Badge = component(({ props, slots }) => {
+    const getClasses = () => {
+        const c = ['badge'];
+        if (props.variant)
+            c.push(`badge-${props.variant}`);
+        if (props.size)
+            c.push(`badge-${props.size}`);
+        if (props.outline)
+            c.push('badge-outline');
+        if (props.class)
+            c.push(props.class);
+        return c.join(' ');
+    };
+    return () => _jsx("view", { class: getClasses(), children: slots.default?.() });
+});

package/dist/feedback/Loading.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component } from '@sigx/lynx';
+export const Loading = component(({ props }) => {
+    const getClasses = () => {
+        const c = ['loading'];
+        c.push(`loading-${props.type ?? 'spinner'}`);
+        if (props.size)
+            c.push(`loading-${props.size}`);
+        if (props.color)
+            c.push(`text-${props.color}`);
+        if (props.class)
+            c.push(props.class);
+        return c.join(' ');
+    };
+    return () => _jsx("view", { class: getClasses() });
+});

package/dist/feedback/Modal.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component, compound } from '@sigx/lynx';
+const _Modal = component(({ props, slots }) => {
+    return () => {
+        if (!props.open)
+            return _jsx("view", { style: { display: 'none' } });
+        return (_jsx("view", { class: "modal-overlay", bindtap: () => { props.onClose?.(); }, children: _jsx("view", { class: `modal-box${props.class ? ' ' + props.class : ''}`, bindtap: (e) => { e?.stopPropagation?.(); }, children: slots.default?.() }) }));
+    };
+});
+const ModalHeader = component(({ props, slots }) => {
+    return () => (_jsx("view", { class: `modal-header${props.class ? ' ' + props.class : ''}`, children: slots.default?.() }));
+});
+const ModalBody = component(({ props, slots }) => {
+    return () => (_jsx("view", { class: `modal-body${props.class ? ' ' + props.class : ''}`, children: slots.default?.() }));
+});
+const ModalActions = component(({ props, slots }) => {
+    return () => (_jsx("view", { class: `modal-action${props.class ? ' ' + props.class : ''}`, children: slots.default?.() }));
+});
+export const Modal = compound(_Modal, {
+    Header: ModalHeader,
+    Body: ModalBody,
+    Actions: ModalActions,
+});

package/dist/feedback/Progress.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component } from '@sigx/lynx';
+export const Progress = component(({ props }) => {
+    const getClasses = () => {
+        const c = ['progress'];
+        if (props.color)
+            c.push(`progress-${props.color}`);
+        if (props.class)
+            c.push(props.class);
+        return c.join(' ');
+    };
+    return () => {
+        const max = props.max ?? 100;
+        const pct = Math.min(Math.max((props.value ?? 0) / max, 0), 1) * 100;
+        return (_jsx("view", { class: getClasses(), children: _jsx("view", { class: "progress-bar", style: { width: `${pct}%` } }) }));
+    };
+});

package/dist/feedback/Skeleton.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component } from '@sigx/lynx';
+export const Skeleton = component(({ props }) => {
+    return () => {
+        const style = {};
+        if (props.width != null)
+            style.width = props.width;
+        if (props.height != null)
+            style.height = props.height;
+        if (props.circle) {
+            const size = props.width ?? props.height ?? 48;
+            style.width = size;
+            style.height = size;
+            style.borderRadius = typeof size === 'number' ? size / 2 : '50%';
+        }
+        return (_jsx("view", { class: `skeleton${props.class ? ' ' + props.class : ''}`, style: style }));
+    };
+});

package/dist/feedback/Steps.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@sigx/lynx/jsx-runtime";
+import { component, compound } from '@sigx/lynx';
+const _Steps = component(({ props, slots }) => {
+    return () => {
+        const isVertical = props.vertical ?? false;
+        return (_jsx("view", { class: `steps${isVertical ? ' steps-vertical' : ' steps-horizontal'}${props.class ? ' ' + props.class : ''}`, children: slots.default?.() }));
+    };
+});
+const Step = component(({ props, slots }) => {
+    return () => {
+        const color = props.color;
+        const colorClass = color ? ` step-${color}` : '';
+        return (_jsxs("view", { class: `step${colorClass}${props.class ? ' ' + props.class : ''}`, children: [_jsx("view", { class: `step-indicator${colorClass}`, children: props.content ? _jsx("text", { style: { fontSize: 14 }, children: props.content }) : null }), slots.default?.()] }));
+    };
+});
+export const Steps = compound(_Steps, { Step });

package/dist/forms/Checkbox.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component } from '@sigx/lynx';
+import { Pressable } from '@sigx/lynx-gestures';
+import { PRESSED_SCALE, PRESSED_OPACITY } from '../shared/press.js';
+const checkmarkSizeMap = {
+    xs: 10, sm: 12, md: 14, lg: 19,
+};
+export const Checkbox = component(({ props, emit }) => {
+    const getClasses = () => {
+        const c = ['checkbox'];
+        const size = props.size ?? 'md';
+        if (size !== 'md')
+            c.push(`checkbox-${size}`);
+        if (props.color)
+            c.push(`checkbox-${props.color}`);
+        if (props.checked)
+            c.push('checkbox-checked');
+        if (props.disabled)
+            c.push('checkbox-disabled');
+        if (props.class)
+            c.push(props.class);
+        return c.join(' ');
+    };
+    return () => {
+        const checked = !!props.checked;
+        const size = props.size ?? 'md';
+        return (_jsx(Pressable, { class: getClasses(), disabled: !!props.disabled, pressedScale: PRESSED_SCALE, pressedOpacity: PRESSED_OPACITY, longPressDuration: 0, onPress: () => {
+                if (!props.disabled)
+                    emit('change', !checked);
+            }, children: checked ? (_jsx("text", { class: "checkbox-mark", style: { fontSize: checkmarkSizeMap[size] }, children: "\u2713" })) : null }));
+    };
+});

package/dist/forms/FormField.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@sigx/lynx/jsx-runtime";
+import { component } from '@sigx/lynx';
+export const FormField = component(({ props, slots }) => {
+    return () => (_jsxs("view", { class: ['form-control', props.class].filter(Boolean).join(' '), style: { gap: 4 }, children: [props.label && (_jsx("view", { class: "label", children: _jsx("text", { class: "label-text", children: props.required ? `${props.label} *` : props.label }) })), slots.default?.(), props.error && (_jsx("view", { class: "label", children: _jsx("text", { class: "label-text-error", children: props.error }) }))] }));
+});

package/dist/forms/Input.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component } from '@sigx/lynx';
+const sizeClasses = {
+    xs: 'input-xs', sm: 'input-sm', md: '', lg: 'input-lg',
+};
+export const Input = component(({ props }) => {
+    const getClasses = () => {
+        const c = ['input'];
+        if (props.variant === 'bordered')
+            c.push('input-bordered');
+        if (props.variant === 'ghost')
+            c.push('input-ghost');
+        if (props.color)
+            c.push(`input-${props.color}`);
+        if (props.size) {
+            const s = sizeClasses[props.size];
+            if (s)
+                c.push(s);
+        }
+        if (props.class)
+            c.push(props.class);
+        return c.join(' ');
+    };
+    return () => (_jsx("input", { class: getClasses(), placeholder: props.placeholder, type: props.type ?? 'text', disabled: props.disabled, model: props.model }));
+});

package/dist/forms/Radio.js

@@ -0,0 +1,28 @@
+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 RadioItem = component(({ props, emit }) => {
+    const getClasses = () => {
+        const c = ['radio'];
+        if (props.color)
+            c.push(`radio-${props.color}`);
+        if (props.size)
+            c.push(`radio-${props.size}`);
+        if (props.checked)
+            c.push('radio-checked');
+        if (props.class)
+            c.push(props.class);
+        return c.join(' ');
+    };
+    return () => (_jsxs(Pressable, { style: { flexDirection: 'row', alignItems: 'center', gap: 8, opacity: props.disabled ? 0.5 : 1 }, disabled: !!props.disabled, pressedScale: PRESSED_SCALE, pressedOpacity: PRESSED_OPACITY, longPressDuration: 0, onPress: () => {
+            if (!props.disabled && props.value != null)
+                emit('select', props.value);
+        }, children: [_jsx("view", { class: getClasses(), children: props.checked && _jsx("view", { class: "radio-mark" }) }), props.label && _jsx("text", { children: props.label })] }));
+});
+const _RadioGroup = component(({ props, slots }) => {
+    return () => (_jsx("view", { class: props.class ?? '', style: { gap: 8 }, children: slots.default?.() }));
+});
+export const Radio = compound(_RadioGroup, {
+    Item: RadioItem,
+});

package/dist/forms/Select.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@sigx/lynx/jsx-runtime";
+import { component, signal } from '@sigx/lynx';
+import { Pressable } from '@sigx/lynx-gestures';
+import { PRESSED_SCALE, PRESSED_OPACITY } from '../shared/press.js';
+export const Select = component(({ props, emit }) => {
+    const state = signal({ open: false });
+    const getClasses = () => {
+        const c = ['select'];
+        if (props.variant === 'bordered')
+            c.push('select-bordered');
+        if (props.variant === 'ghost')
+            c.push('select-ghost');
+        if (props.color)
+            c.push(`select-${props.color}`);
+        if (props.size)
+            c.push(`select-${props.size}`);
+        if (props.class)
+            c.push(props.class);
+        return c.join(' ');
+    };
+    const getSelectedLabel = () => {
+        const opts = props.options ?? [];
+        const found = opts.find((o) => o.value === props.value);
+        return found ? found.label : (props.placeholder ?? 'Select...');
+    };
+    return () => (_jsxs("view", { style: { position: 'relative', opacity: props.disabled ? 0.5 : 1 }, children: [_jsxs(Pressable, { class: getClasses(), disabled: !!props.disabled, pressedScale: PRESSED_SCALE, pressedOpacity: PRESSED_OPACITY, longPressDuration: 0, onPress: () => {
+                    if (!props.disabled)
+                        state.open = !state.open;
+                }, children: [_jsx("text", { children: getSelectedLabel() }), _jsx("view", { style: { marginLeft: 'auto' }, children: _jsx("text", { children: state.open ? '▲' : '▼' }) })] }), state.open && !props.disabled && (_jsx("view", { class: "select-dropdown", style: { position: 'absolute', top: '100%', left: 0, right: 0, zIndex: 10 }, children: (props.options ?? []).map((option) => (_jsx(Pressable, { class: `select-option${option.value === props.value ? ' select-option-active' : ''}`, pressedScale: PRESSED_SCALE, pressedOpacity: PRESSED_OPACITY, longPressDuration: 0, onPress: () => {
+                        emit('change', option.value);
+                        state.open = false;
+                    }, children: _jsx("text", { children: option.label }) }))) }))] }));
+});

package/dist/forms/Textarea.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component } from '@sigx/lynx';
+const sizeClasses = {
+    xs: 'textarea-xs', sm: 'textarea-sm', md: '', lg: 'textarea-lg',
+};
+export const Textarea = component(({ props }) => {
+    const getClasses = () => {
+        const c = ['textarea'];
+        if (props.variant === 'bordered')
+            c.push('textarea-bordered');
+        if (props.variant === 'ghost')
+            c.push('textarea-ghost');
+        if (props.color)
+            c.push(`textarea-${props.color}`);
+        if (props.size) {
+            const s = sizeClasses[props.size];
+            if (s)
+                c.push(s);
+        }
+        if (props.class)
+            c.push(props.class);
+        return c.join(' ');
+    };
+    const getHeight = () => {
+        const rows = props.rows ?? 3;
+        const lineHeight = 20;
+        const padding = 16;
+        return rows * lineHeight + padding;
+    };
+    return () => (_jsx("textarea", { class: getClasses(), placeholder: props.placeholder, disabled: props.disabled, model: props.model, style: { height: getHeight() } }));
+});

package/dist/forms/Toggle.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "@sigx/lynx/jsx-runtime";
+import { component } from '@sigx/lynx';
+import { Pressable } from '@sigx/lynx-gestures';
+import { PRESSED_SCALE, PRESSED_OPACITY } from '../shared/press.js';
+const thumbOffsetMap = {
+    xs: 10, sm: 16, md: 20, lg: 24,
+};
+export const Toggle = component(({ props, emit }) => {
+    const getClasses = () => {
+        const c = ['toggle'];
+        const size = props.size ?? 'md';
+        c.push(`toggle-${size}`);
+        if (props.color)
+            c.push(`toggle-${props.color}`);
+        if (props.checked)
+            c.push('toggle-checked');
+        if (props.disabled)
+            c.push('toggle-disabled');
+        if (props.class)
+            c.push(props.class);
+        return c.join(' ');
+    };
+    return () => {
+        const checked = !!props.checked;
+        const size = props.size ?? 'md';
+        const offset = checked ? thumbOffsetMap[size] : 0;
+        return (_jsx(Pressable, { class: getClasses(), disabled: !!props.disabled, pressedScale: PRESSED_SCALE, pressedOpacity: PRESSED_OPACITY, longPressDuration: 0, onPress: () => {
+                if (!props.disabled)
+                    emit('change', !checked);
+            }, children: _jsx("view", { class: "toggle-thumb", style: { transform: `translateX(${offset}px)` } }) }));
+    };
+});

package/dist/index.d.ts

@@ -14,6 +14,8 @@ export { ScrollView } from './layout/ScrollView.js';
 export type { ScrollViewProps } from './layout/ScrollView.js';
 export { Divider } from './layout/Divider.js';
 export type { DividerProps } from './layout/Divider.js';
+export type { DaisyColor, BackgroundValue, SpacingValue, BoxProps } from './shared/styles.js';
+export { resolveDaisyColor } from './shared/styles.js';
 export { Input } from './forms/Input.js';
 export type { InputProps, InputSize, InputVariant, InputColor } from './forms/Input.js';
 export { Toggle } from './forms/Toggle.js';
@@ -44,6 +46,12 @@ export { Steps } from './feedback/Steps.js';
 export type { StepsProps, StepProps, StepColor } from './feedback/Steps.js';
 export { Tabs } from './navigation/Tabs.js';
 export type { TabsProps, TabProps } from './navigation/Tabs.js';
+export { NavTabBar } from './navigation/NavTabBar.js';
+export type { NavTabBarProps, NavTabBarPosition, NavTabBarBackground, NavTabRenderContext, } from './navigation/NavTabBar.js';
+export { NavHeader } from './navigation/NavHeader.js';
+export type { NavHeaderProps, NavHeaderBackground, } from './navigation/NavHeader.js';
+export { ThemeProvider, useTheme } from './theme/ThemeProvider.js';
+export type { DaisyTheme, ThemeController, ThemeProviderProps, } from './theme/ThemeProvider.js';
 export { Avatar } from './data/Avatar.js';
 export type { AvatarProps, AvatarSize } from './data/Avatar.js';
 export { Text } from './typography/Text.js';