@sigx/lynx-daisyui 0.1.3 → 0.4.0

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/index.d.ts

@@ -1,52 +1,58 @@
-export { Button } from './buttons/Button.js';
-export type { ButtonProps, ButtonVariant, ButtonSize } from './buttons/Button.js';
-export { Card } from './layout/Card.js';
-export type { CardProps } from './layout/Card.js';
-export { Row } from './layout/Row.js';
-export type { RowProps } from './layout/Row.js';
-export { Col } from './layout/Col.js';
-export type { ColProps } from './layout/Col.js';
-export { Center } from './layout/Center.js';
-export type { CenterProps } from './layout/Center.js';
-export { Spacer } from './layout/Spacer.js';
-export type { SpacerProps } from './layout/Spacer.js';
-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 { Input } from './forms/Input.js';
-export type { InputProps, InputSize, InputVariant, InputColor } from './forms/Input.js';
-export { Toggle } from './forms/Toggle.js';
-export type { ToggleProps, ToggleColor, ToggleSize } from './forms/Toggle.js';
-export { Checkbox } from './forms/Checkbox.js';
-export type { CheckboxProps, CheckboxColor, CheckboxSize } from './forms/Checkbox.js';
-export { Select } from './forms/Select.js';
-export type { SelectProps, SelectSize, SelectVariant, SelectColor, SelectOption } from './forms/Select.js';
-export { Radio } from './forms/Radio.js';
-export type { RadioGroupProps, RadioItemProps, RadioColor, RadioSize } from './forms/Radio.js';
-export { Textarea } from './forms/Textarea.js';
-export type { TextareaProps, TextareaSize, TextareaVariant, TextareaColor } from './forms/Textarea.js';
-export { FormField } from './forms/FormField.js';
-export type { FormFieldProps } from './forms/FormField.js';
-export { Badge } from './feedback/Badge.js';
-export type { BadgeProps, BadgeVariant, BadgeSize } from './feedback/Badge.js';
-export { Alert } from './feedback/Alert.js';
-export type { AlertProps, AlertVariant } from './feedback/Alert.js';
-export { Loading } from './feedback/Loading.js';
-export type { LoadingProps, LoadingType, LoadingSize, LoadingColor } from './feedback/Loading.js';
-export { Progress } from './feedback/Progress.js';
-export type { ProgressProps, ProgressColor } from './feedback/Progress.js';
-export { Modal } from './feedback/Modal.js';
-export type { ModalProps } from './feedback/Modal.js';
-export { Skeleton } from './feedback/Skeleton.js';
-export type { SkeletonProps } from './feedback/Skeleton.js';
-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 { Avatar } from './data/Avatar.js';
-export type { AvatarProps, AvatarSize } from './data/Avatar.js';
-export { Text } from './typography/Text.js';
-export type { TextProps, TextSize, TextWeight, TextColor } from './typography/Text.js';
-export { Heading } from './typography/Heading.js';
-export type { HeadingProps, HeadingLevel } from './typography/Heading.js';
+export { Button } from './buttons/Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './buttons/Button';
+export { Card } from './layout/Card';
+export type { CardProps } from './layout/Card';
+export { Row } from './layout/Row';
+export type { RowProps } from './layout/Row';
+export { Col } from './layout/Col';
+export type { ColProps } from './layout/Col';
+export { Center } from './layout/Center';
+export type { CenterProps } from './layout/Center';
+export { Spacer } from './layout/Spacer';
+export type { SpacerProps } from './layout/Spacer';
+export { ScrollView } from './layout/ScrollView';
+export type { ScrollViewProps } from './layout/ScrollView';
+export { Divider } from './layout/Divider';
+export type { DividerProps } from './layout/Divider';
+export { Input } from './forms/Input';
+export type { InputProps, InputSize, InputVariant, InputColor } from './forms/Input';
+export { Toggle } from './forms/Toggle';
+export type { ToggleProps, ToggleColor, ToggleSize } from './forms/Toggle';
+export { Checkbox } from './forms/Checkbox';
+export type { CheckboxProps, CheckboxColor, CheckboxSize } from './forms/Checkbox';
+export { Select } from './forms/Select';
+export type { SelectProps, SelectSize, SelectVariant, SelectColor, SelectOption } from './forms/Select';
+export { Radio } from './forms/Radio';
+export type { RadioGroupProps, RadioItemProps, RadioColor, RadioSize } from './forms/Radio';
+export { Textarea } from './forms/Textarea';
+export type { TextareaProps, TextareaSize, TextareaVariant, TextareaColor } from './forms/Textarea';
+export { FormField } from './forms/FormField';
+export type { FormFieldProps } from './forms/FormField';
+export { Badge } from './feedback/Badge';
+export type { BadgeProps, BadgeVariant, BadgeSize } from './feedback/Badge';
+export { Alert } from './feedback/Alert';
+export type { AlertProps, AlertVariant } from './feedback/Alert';
+export { Loading } from './feedback/Loading';
+export type { LoadingProps, LoadingType, LoadingSize, LoadingColor } from './feedback/Loading';
+export { Progress } from './feedback/Progress';
+export type { ProgressProps, ProgressColor } from './feedback/Progress';
+export { Modal } from './feedback/Modal';
+export type { ModalProps } from './feedback/Modal';
+export { Skeleton } from './feedback/Skeleton';
+export type { SkeletonProps } from './feedback/Skeleton';
+export { Steps } from './feedback/Steps';
+export type { StepsProps, StepProps, StepColor } from './feedback/Steps';
+export { Tabs } from './navigation/Tabs';
+export type { TabsProps, TabProps } from './navigation/Tabs';
+export { NavTabBar } from './navigation/NavTabBar';
+export type { NavTabBarProps, NavTabBarPosition, NavTabBarBackground, NavTabRenderContext, } from './navigation/NavTabBar';
+export { NavHeader } from './navigation/NavHeader';
+export type { NavHeaderProps, NavHeaderBackground, } from './navigation/NavHeader';
+export { ThemeProvider, useTheme } from './theme/ThemeProvider';
+export type { DaisyTheme, ThemeController, ThemeProviderProps, } from './theme/ThemeProvider';
+export { Avatar } from './data/Avatar';
+export type { AvatarProps, AvatarSize } from './data/Avatar';
+export { Text } from './typography/Text';
+export type { TextProps, TextSize, TextWeight, TextColor } from './typography/Text';
+export { Heading } from './typography/Heading';
+export type { HeadingProps, HeadingLevel } from './typography/Heading';