@thewhileloop/whileui 3.0.0 → 4.1.0

package/dist/blocks/datepicker/time-picker-modal.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { type FrostedSurfaceProps } from '../../lib/frosted-surface';
+export type HourCycle = 'h12' | 'h23';
+export interface TimePickerModalProps extends FrostedSurfaceProps {
+    /** Controlled: selected time as `HH:MM`, 24-hour, or null for none. */
+    value?: string | null;
+    /** Controlled: change handler. Always receives `HH:MM` in 24-hour form. */
+    onValueChange?: (time: string | null) => void;
+    /** Modal open state */
+    open: boolean;
+    /** Modal open change handler */
+    onOpenChange: (open: boolean) => void;
+    /** Minutes between options. 1 by default; 5 or 15 for a coarser pick. */
+    minuteStep?: number;
+    /** 12-hour with AM/PM, or 24-hour. Defaults to the device locale's preference. */
+    hourCycle?: HourCycle;
+    /** Trigger element. If not provided, no trigger is rendered. */
+    trigger?: React.ReactNode;
+    /** Title shown in modal header */
+    title?: string;
+    /** Button label for confirm */
+    confirmLabel?: string;
+    className?: string;
+}
+declare function parseTime(value: string | null | undefined): {
+    hour: number;
+    minute: number;
+} | null;
+/** `HH:MM` as the locale writes it — "10:30 PM" or "22:30". */
+declare function formatDisplayTime(value: string | null | undefined, hourCycle?: HourCycle): string;
+/**
+ * A time chosen on two wheels — three with AM/PM — in the same bottom sheet as
+ * `DatePickerModal`, so a form's date and time fields open the same way.
+ */
+export declare function TimePickerModal(props: TimePickerModalProps): React.JSX.Element;
+/** Compact trigger showing the formatted time. Use as TimePickerModal's trigger prop. */
+export declare function TimePickerTrigger({ value, placeholder, hourCycle, className, }: {
+    value?: string | null;
+    placeholder?: string;
+    hourCycle?: HourCycle;
+    className?: string;
+}): React.JSX.Element;
+export { formatDisplayTime, parseTime };

package/dist/blocks/datepicker/time-picker-modal.js

@@ -0,0 +1,187 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Modal, Platform, Pressable, ScrollView, View, } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Text } from '../../components/text';
+import { Button, ButtonText } from '../../components/button';
+import { cn } from '../../lib/cn';
+import { focusRingInset } from '../../lib/focus-ring';
+import { useThemeColors } from '../../lib/theme-colors';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { fieldRecipe, surfacePadding, surfaceRadius, typographyStyle } from '../../lib/recipes';
+import { useFrostedSurface } from '../../lib/frosted-surface';
+const ITEM_HEIGHT = 44;
+/** Rows visible in a wheel. Odd, so one row sits centred under the selection band. */
+const VISIBLE_ROWS = 5;
+const WHEEL_HEIGHT = ITEM_HEIGHT * VISIBLE_ROWS;
+const WHEEL_PADDING = ITEM_HEIGHT * Math.floor(VISIBLE_ROWS / 2);
+const pad2 = (n) => String(n).padStart(2, '0');
+/** The locale's clock, so a US device gets AM/PM and most of the world does not. */
+function localeHourCycle() {
+    try {
+        const cycle = new Intl.DateTimeFormat(undefined, { hour: 'numeric' }).resolvedOptions()
+            .hourCycle;
+        return cycle === 'h11' || cycle === 'h12' ? 'h12' : 'h23';
+    }
+    catch {
+        return 'h23';
+    }
+}
+function parseTime(value) {
+    if (!value)
+        return null;
+    const match = /^(\d{1,2}):(\d{2})$/.exec(value.trim());
+    if (!match)
+        return null;
+    const hour = Number(match[1]);
+    const minute = Number(match[2]);
+    if (hour > 23 || minute > 59)
+        return null;
+    return { hour, minute };
+}
+/** `HH:MM` as the locale writes it — "10:30 PM" or "22:30". */
+function formatDisplayTime(value, hourCycle) {
+    const parsed = parseTime(value);
+    if (!parsed)
+        return 'Select time';
+    const date = new Date(2000, 0, 1, parsed.hour, parsed.minute);
+    return date.toLocaleTimeString(undefined, {
+        hour: 'numeric',
+        minute: '2-digit',
+        ...(hourCycle ? { hour12: hourCycle === 'h12' } : {}),
+    });
+}
+/**
+ * One scrolling column. Scrolls snap to a row, a tap selects a row, and the whole
+ * column is a single adjustable element for assistive tech and the keyboard — sixty
+ * minute rows as sixty tab stops would be nobody's idea of operable.
+ */
+function Wheel({ label, options, selected, onSelect }) {
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
+    const ref = useRef(null);
+    const index = Math.max(0, options.findIndex((option) => option.value === selected));
+    // Keep the band on the selected row when the value changes from outside the wheel
+    // (a tap, a keyboard step, the initial value), not after the user's own scroll.
+    const lastScrolledIndex = useRef(-1);
+    useEffect(() => {
+        if (lastScrolledIndex.current === index)
+            return;
+        lastScrolledIndex.current = index;
+        ref.current?.scrollTo({ y: index * ITEM_HEIGHT, animated: Platform.OS !== 'web' });
+    }, [index]);
+    const settle = useCallback((event) => {
+        const next = Math.round(event.nativeEvent.contentOffset.y / ITEM_HEIGHT);
+        const clamped = Math.min(options.length - 1, Math.max(0, next));
+        lastScrolledIndex.current = clamped;
+        const option = options[clamped];
+        if (option && option.value !== selected)
+            onSelect(option.value);
+    }, [onSelect, options, selected]);
+    const step = useCallback((delta) => {
+        const next = (index + delta + options.length) % options.length;
+        onSelect(options[next].value);
+    }, [index, onSelect, options]);
+    const current = options[index]?.label ?? '';
+    return (_jsxs(View, { accessible: true, accessibilityRole: "adjustable", accessibilityLabel: label, accessibilityValue: { text: current }, accessibilityActions: [{ name: 'increment' }, { name: 'decrement' }], onAccessibilityAction: (event) => {
+            if (event.nativeEvent.actionName === 'increment')
+                step(1);
+            if (event.nativeEvent.actionName === 'decrement')
+                step(-1);
+        }, ...(Platform.OS === 'web'
+            ? {
+                focusable: true,
+                onKeyDown: (event) => {
+                    if (event.nativeEvent.key === 'ArrowUp') {
+                        event.preventDefault();
+                        step(-1);
+                    }
+                    else if (event.nativeEvent.key === 'ArrowDown') {
+                        event.preventDefault();
+                        step(1);
+                    }
+                },
+            }
+            : null), className: cn('flex-1 overflow-hidden', focusRingInset), style: { height: WHEEL_HEIGHT, borderRadius: surfaceRadius(visual, 'lg') }, children: [_jsx(View, { pointerEvents: "none", className: "absolute left-0 right-0 bg-muted", style: {
+                    top: WHEEL_PADDING,
+                    height: ITEM_HEIGHT,
+                    borderRadius: surfaceRadius(visual, 'md'),
+                } }), _jsx(ScrollView, { ref: ref, showsVerticalScrollIndicator: false, snapToInterval: ITEM_HEIGHT, decelerationRate: "fast", nestedScrollEnabled: true, contentContainerStyle: { paddingVertical: WHEEL_PADDING }, contentOffset: { x: 0, y: index * ITEM_HEIGHT }, onMomentumScrollEnd: settle, onScrollEndDrag: Platform.OS === 'web' ? settle : undefined, importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true, children: options.map((option) => {
+                    const on = option.value === selected;
+                    return (_jsx(Pressable, { onPress: () => onSelect(option.value), focusable: false, className: "items-center justify-center", style: { height: ITEM_HEIGHT }, children: _jsx(Text, { className: on ? 'font-medium text-foreground' : 'text-muted-foreground', style: {
+                                ...typographyStyle(visual, on ? 'title' : 'body'),
+                                color: on ? colors.foreground : colors.mutedForeground,
+                            }, children: option.label }) }, option.value));
+                }) })] }));
+}
+function TimePickerModalSession({ value, onValueChange, open, onOpenChange, minuteStep = 1, hourCycle: hourCycleProp, trigger, title = 'Select time', confirmLabel = 'Done', className, frosted = false, blurIntensity, blurTintToken, }) {
+    const insets = useSafeAreaInsets();
+    const colors = useThemeColors();
+    const visual = useVisualTokens();
+    const frostedSurface = useFrostedSurface({
+        frosted,
+        blurIntensity,
+        blurTintToken,
+        defaultTintToken: 'surfaceTranslucent',
+        defaultBlurPreset: 'medium',
+    });
+    const hourCycle = hourCycleProp ?? localeHourCycle();
+    const step = Math.min(30, Math.max(1, Math.round(minuteStep)));
+    // The draft opens on the current value, or on the current clock time rounded to the
+    // step, so the first confirm without touching anything records "now".
+    const initial = (() => {
+        const parsed = parseTime(value);
+        if (parsed)
+            return parsed;
+        const now = new Date();
+        return { hour: now.getHours(), minute: Math.floor(now.getMinutes() / step) * step };
+    })();
+    const [hour, setHour] = useState(initial.hour);
+    const [minute, setMinute] = useState(initial.minute);
+    const hours = hourCycle === 'h12'
+        ? Array.from({ length: 12 }, (_, i) => ({ value: i + 1, label: String(i + 1) }))
+        : Array.from({ length: 24 }, (_, i) => ({ value: i, label: pad2(i) }));
+    const minutes = Array.from({ length: Math.ceil(60 / step) }, (_, i) => ({
+        value: i * step,
+        label: pad2(i * step),
+    }));
+    const periods = [
+        { value: 0, label: 'AM' },
+        { value: 1, label: 'PM' },
+    ];
+    const period = hour >= 12 ? 1 : 0;
+    const hour12 = hour % 12 === 0 ? 12 : hour % 12;
+    const handleConfirm = useCallback(() => {
+        onValueChange?.(`${pad2(hour)}:${pad2(minute)}`);
+        onOpenChange(false);
+    }, [hour, minute, onOpenChange, onValueChange]);
+    const handleDismiss = useCallback(() => onOpenChange(false), [onOpenChange]);
+    const handleOpen = useCallback(() => onOpenChange(true), [onOpenChange]);
+    return (_jsxs(_Fragment, { children: [trigger ? (_jsx(Pressable, { accessibilityRole: "button", onPress: handleOpen, className: cn('w-full flex-row items-center border-border bg-muted', className), style: fieldRecipe(visual, 'default'), children: trigger })) : null, _jsx(Modal, { visible: open, transparent: true, animationType: "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: handleDismiss, children: _jsx(Pressable, { accessible: false, importantForAccessibility: "no", className: "flex-1 justify-end", style: { backgroundColor: colors.overlay }, onPress: handleDismiss, children: _jsxs(Pressable, { accessible: false, className: cn('border border-border relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-background'), style: [
+                            {
+                                borderTopLeftRadius: surfaceRadius(visual, 'xl'),
+                                borderTopRightRadius: surfaceRadius(visual, 'xl'),
+                                paddingBottom: Math.max(insets.bottom, surfacePadding(visual, 'sm')),
+                            },
+                            frostedSurface.surfaceStyle,
+                        ], onPress: (e) => e.stopPropagation(), children: [frostedSurface.overlay, _jsxs(View, { className: "flex-row items-center justify-between border-b border-border", style: {
+                                    paddingHorizontal: surfacePadding(visual, 'sm'),
+                                    paddingVertical: visual.controlPaddingYDefault,
+                                }, children: [_jsx(Text, { accessibilityRole: "header", className: "font-medium text-foreground", style: typographyStyle(visual, 'body'), children: title }), _jsx(Button, { size: "sm", onPress: handleConfirm, children: _jsx(ButtonText, { children: confirmLabel }) })] }), _jsxs(View, { className: "flex-row items-center", style: { padding: surfacePadding(visual, 'sm'), gap: visual.controlPaddingYDefault }, children: [_jsx(Wheel, { label: "Hour", options: hours, selected: hourCycle === 'h12' ? hour12 : hour, onSelect: (next) => setHour(hourCycle === 'h12' ? (next % 12) + (period === 1 ? 12 : 0) : next) }), _jsx(Text, { className: "text-muted-foreground", style: typographyStyle(visual, 'title'), accessibilityElementsHidden: true, importantForAccessibility: "no", children: ":" }), _jsx(Wheel, { label: "Minute", options: minutes, selected: minute, onSelect: setMinute }), hourCycle === 'h12' ? (_jsx(Wheel, { label: "AM or PM", options: periods, selected: period, onSelect: (next) => setHour((hour % 12) + (next === 1 ? 12 : 0)) })) : null] })] }) }) })] }));
+}
+/**
+ * A time chosen on two wheels — three with AM/PM — in the same bottom sheet as
+ * `DatePickerModal`, so a form's date and time fields open the same way.
+ */
+export function TimePickerModal(props) {
+    // Remount per opening so the draft starts from the value each time, as the date
+    // picker does; a draft that outlives a cancel would reopen on the abandoned pick.
+    const sessionKey = props.open ? 'open' : 'closed';
+    return _jsx(TimePickerModalSession, { ...props }, sessionKey);
+}
+/** Compact trigger showing the formatted time. Use as TimePickerModal's trigger prop. */
+export function TimePickerTrigger({ value, placeholder = 'Select time', hourCycle, className, }) {
+    const visual = useVisualTokens();
+    return (_jsxs(View, { className: cn('flex-1 flex-row items-center min-w-0', className), children: [_jsx(Text, { className: cn('flex-1', value ? 'text-foreground' : 'text-muted-foreground'), style: typographyStyle(visual, 'body'), numberOfLines: 1, children: value ? formatDisplayTime(value, hourCycle) : placeholder }), _jsx(View, { className: "ml-2 shrink-0 h-2 w-2 rotate-45 border-b-2 border-r-2 border-muted-foreground" })] }));
+}
+export { formatDisplayTime, parseTime };

package/dist/blocks/layout/smart-input.js

@@ -7,6 +7,7 @@ import { focusRing } from '../../lib/focus-ring';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useInteractionTokens } from '../../lib/interaction-tokens';
 import { useVisualTokens } from '../../lib/visual-tokens';
+import { webAutofillField } from '../../lib/web-autofill';
 import { controlRecipe, shadowStyle, surfaceRadius, typographyStyle } from '../../lib/recipes';
 // The examples list is joined into one string so it can be an effect dependency without
 // re-running on every render. A NUL byte cannot appear in a placeholder.
@@ -143,5 +144,5 @@ export const SmartInput = forwardRef(function SmartInput({ leftSlot, centerSlot,
                     { maxHeight: visual.smartInputMaxHeight },
                     !editable ? { opacity: interaction.disabledOpacity } : null,
                     style,
-                ], className: cn('flex-1 text-foreground placeholder:text-muted-foreground', focusRing, variant === 'bar' && 'border-border bg-muted', variant === 'card' && 'bg-transparent', inputClassName), multiline: true, submitBehavior: submitBehavior, textAlignVertical: "top", placeholderTextColor: placeholderTextColor ?? colors.placeholder, placeholder: placeholderState.placeholder, value: value, defaultValue: defaultValue, onChangeText: placeholderState.onChangeText, editable: editable, ...props }), _jsx(SmartInputSlot, { children: rightSlot })] }));
+                ], className: cn('flex-1 text-foreground placeholder:text-muted-foreground', focusRing, variant === 'bar' && 'border-border bg-muted', variant === 'bar' && webAutofillField, variant === 'card' && 'bg-transparent', inputClassName), multiline: true, submitBehavior: submitBehavior, textAlignVertical: "top", placeholderTextColor: placeholderTextColor ?? colors.placeholder, placeholder: placeholderState.placeholder, value: value, defaultValue: defaultValue, onChangeText: placeholderState.onChangeText, editable: editable, ...props }), _jsx(SmartInputSlot, { children: rightSlot })] }));
 });

package/dist/code.d.ts

@@ -0,0 +1 @@
+export { CodeBlock, type CodeBlockProps } from './components/code-block';

package/dist/code.js

@@ -0,0 +1 @@
+export { CodeBlock } from './components/code-block';

package/dist/components/card/card.d.ts

@@ -1,6 +1,6 @@
 import { type ViewInstance, type ViewProps, type TextInstance, type TextProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
-import { type FrostedSurfaceProps } from '../../lib/frosted-surface';
+import type { FrostedSurfaceProps } from '../../lib/frosted-surface';
 import { type ShadowTier } from '../../lib/recipes';
 import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const cardVariants: import("tailwind-variants").TVReturnType<{

package/dist/components/card/card.js

@@ -1,13 +1,12 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { View, } from 'react-native';
 import { Text } from '../text';
+import { Surface } from '../surface';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
-import { useFrostedSurface } from '../../lib/frosted-surface';
 import { useVisualTokens } from '../../lib/visual-tokens';
-import { useThemeColors } from '../../lib/theme-colors';
-import { shadowStyle, surfacePadding, typographyStyle } from '../../lib/recipes';
+import { typographyStyle } from '../../lib/recipes';
 const cardVariants = tv({
     base: 'border border-border bg-card',
     variants: {
@@ -28,27 +27,7 @@ const cardVariants = tv({
     },
 });
 const Card = React.forwardRef(({ className, padding, unstyled, shadow = 'sm', frosted = false, blurIntensity, blurTintToken, style, children, ...props }, ref) => {
-    const visual = useVisualTokens();
-    const colors = useThemeColors();
-    const frostedSurface = useFrostedSurface({
-        frosted,
-        blurIntensity,
-        blurTintToken,
-        defaultTintToken: 'card',
-        defaultBlurPreset: 'subtle',
-    });
-    const effectivePadding = surfacePadding(visual, padding ?? 'default');
-    const cardStyle = [
-        {
-            borderRadius: unstyled ? 0 : visual.radiusXl,
-            padding: unstyled ? 0 : effectivePadding,
-            borderWidth: unstyled ? 0 : visual.borderWidthHairline,
-        },
-        unstyled ? null : shadowStyle(visual, colors, shadow),
-        frostedSurface.surfaceStyle,
-        style,
-    ];
-    return (_jsxs(View, { ref: ref, className: cn(cardVariants({ padding, unstyled }), frosted && 'relative overflow-hidden bg-transparent', className), style: cardStyle, ...props, children: [frostedSurface.overlay, children] }));
+    return (_jsx(Surface, { ref: ref, level: "base", padding: unstyled ? 'none' : (padding ?? 'default'), bordered: !unstyled, shadow: unstyled ? 'none' : shadow, frosted: frosted, blurIntensity: blurIntensity, blurTintToken: blurTintToken, className: cn(cardVariants({ padding, unstyled }), className), style: [unstyled ? { borderRadius: 0 } : null, style], ...props, children: children }));
 });
 Card.displayName = 'Card';
 const CardHeader = React.forwardRef(({ className, ...props }, ref) => {

package/dist/components/code-block/code-block.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type ViewProps } from 'react-native';
+export interface CodeBlockProps extends Omit<ViewProps, 'children'> {
+    code: string;
+    language?: string;
+    actions?: React.ReactNode;
+}
+declare function CodeBlock({ code, language, actions, className, ...props }: CodeBlockProps): React.JSX.Element;
+declare namespace CodeBlock {
+    var displayName: string;
+}
+export { CodeBlock };

package/dist/components/code-block/code-block.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScrollView, View } from 'react-native';
+import { Surface } from '../surface';
+import { Text } from '../text';
+import { cn } from '../../lib/cn';
+import { useVisualTokens } from '../../lib/visual-tokens';
+function CodeBlock({ code, language, actions, className, ...props }) {
+    const label = language ? `${language} code` : 'Code';
+    const visual = useVisualTokens();
+    return (_jsxs(Surface, { level: "base", padding: "none", radius: "lg", shadow: "none", className: cn('overflow-hidden bg-muted', className), ...props, children: [language || actions ? (_jsxs(View, { className: "flex-row items-center justify-between border-b border-border px-3 py-2", children: [_jsx(Text, { variant: "caption", children: language ?? 'Code' }), actions] })) : null, _jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: { padding: visual.surfacePaddingSm }, children: _jsx(Text, { variant: "code", className: "bg-transparent px-0 py-0 text-foreground", accessibilityLabel: label, selectable: true, children: code }) })] }));
+}
+CodeBlock.displayName = 'CodeBlock';
+export { CodeBlock };

package/dist/components/code-block/index.d.ts

@@ -0,0 +1 @@
+export { CodeBlock, type CodeBlockProps } from './code-block';

package/dist/components/code-block/index.js

@@ -0,0 +1 @@
+export { CodeBlock } from './code-block';

package/dist/components/fab/fab.d.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+import { View, type PressableInstance, type ViewProps } from 'react-native';
+import { type PressableProps } from '../pressable';
+import { type VariantProps } from '../../lib/tv';
+import type { ForwardRefComponent } from '../../lib/ref-types';
+declare const fabVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: "bg-primary";
+        secondary: "bg-secondary";
+        destructive: "bg-destructive";
+        surface: "border border-border bg-card";
+    };
+    size: {
+        default: "h-14 w-14";
+        sm: "h-12 w-12";
+        lg: "h-16 w-16";
+    };
+    placement: {
+        /** Positioned by the caller — inside a toolbar, a row, anywhere. */
+        inline: "";
+        /** Floating over the nearest positioned ancestor, bottom-right. */
+        floating: "absolute bottom-6 right-6";
+        'floating-left': "absolute bottom-6 left-6";
+    };
+}, undefined, "items-center justify-center rounded-full", {
+    variant: {
+        default: "bg-primary";
+        secondary: "bg-secondary";
+        destructive: "bg-destructive";
+        surface: "border border-border bg-card";
+    };
+    size: {
+        default: "h-14 w-14";
+        sm: "h-12 w-12";
+        lg: "h-16 w-16";
+    };
+    placement: {
+        /** Positioned by the caller — inside a toolbar, a row, anywhere. */
+        inline: "";
+        /** Floating over the nearest positioned ancestor, bottom-right. */
+        floating: "absolute bottom-6 right-6";
+        'floating-left': "absolute bottom-6 left-6";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        default: "bg-primary";
+        secondary: "bg-secondary";
+        destructive: "bg-destructive";
+        surface: "border border-border bg-card";
+    };
+    size: {
+        default: "h-14 w-14";
+        sm: "h-12 w-12";
+        lg: "h-16 w-16";
+    };
+    placement: {
+        /** Positioned by the caller — inside a toolbar, a row, anywhere. */
+        inline: "";
+        /** Floating over the nearest positioned ancestor, bottom-right. */
+        floating: "absolute bottom-6 right-6";
+        'floating-left': "absolute bottom-6 left-6";
+    };
+}, undefined>>;
+export interface FabProps extends Omit<PressableProps, 'children'>, VariantProps<typeof fabVariants> {
+    /**
+     * What the action does, for screen readers. Required: a FAB is an icon with no
+     * text, so without this it announces as an unlabelled button.
+     */
+    label: string;
+    /** The glyph. Icon libraries need a concrete colour, so read it from `useIconColors`. */
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * A floating action button: one primary action, raised above the content.
+ *
+ * It owns no icon dependency. `@expo/vector-icons` and friends need hex colours
+ * rather than classes, so the caller passes the glyph and colours it from
+ * `useIconColors()` or `useThemeColors()`.
+ */
+declare const FAB: ForwardRefComponent<PressableInstance, FabProps>;
+export interface FabGroupProps extends ViewProps {
+    className?: string;
+}
+/** Stacks secondary actions above a FAB, bottom-aligned. */
+declare const FABGroup: ForwardRefComponent<React.ComponentRef<typeof View>, FabGroupProps>;
+export { FAB, FABGroup, fabVariants };

package/dist/components/fab/fab.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { View } from 'react-native';
+import { Pressable } from '../pressable';
+import { cn } from '../../lib/cn';
+import { tv } from '../../lib/tv';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { shadowStyle } from '../../lib/recipes';
+import { useThemeColors } from '../../lib/theme-colors';
+const fabVariants = tv({
+    base: 'items-center justify-center rounded-full',
+    variants: {
+        variant: {
+            default: 'bg-primary',
+            secondary: 'bg-secondary',
+            destructive: 'bg-destructive',
+            surface: 'border border-border bg-card',
+        },
+        size: {
+            // 56 and 40 are Material's FAB and small-FAB sizes. Both clear the iOS 44pt
+            // and Android 48dp minimums on their own, so a FAB never needs hitSlop.
+            default: 'h-14 w-14',
+            sm: 'h-12 w-12',
+            lg: 'h-16 w-16',
+        },
+        placement: {
+            /** Positioned by the caller — inside a toolbar, a row, anywhere. */
+            inline: '',
+            /** Floating over the nearest positioned ancestor, bottom-right. */
+            floating: 'absolute bottom-6 right-6',
+            'floating-left': 'absolute bottom-6 left-6',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+        placement: 'floating',
+    },
+});
+/**
+ * A floating action button: one primary action, raised above the content.
+ *
+ * It owns no icon dependency. `@expo/vector-icons` and friends need hex colours
+ * rather than classes, so the caller passes the glyph and colours it from
+ * `useIconColors()` or `useThemeColors()`.
+ */
+const FAB = React.forwardRef(({ className, variant, size, placement, label, children, style, ...props }, ref) => {
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
+    return (_jsx(Pressable, { ref: ref, accessibilityRole: "button", accessibilityLabel: label, className: cn(fabVariants({ variant, size, placement }), className), style: (state) => [
+            shadowStyle(visual, colors, 'lg'),
+            typeof style === 'function' ? style(state) : style,
+        ], ...props, children: children }));
+});
+FAB.displayName = 'FAB';
+/** Stacks secondary actions above a FAB, bottom-aligned. */
+const FABGroup = React.forwardRef(({ className, ...props }, ref) => (_jsx(View, { ref: ref, className: cn('absolute bottom-6 right-6 items-end gap-3', className), ...props })));
+FABGroup.displayName = 'FABGroup';
+export { FAB, FABGroup, fabVariants };

package/dist/components/fab/index.d.ts

@@ -0,0 +1 @@
+export { FAB, FABGroup, fabVariants, type FabProps, type FabGroupProps } from './fab';

package/dist/components/fab/index.js

@@ -0,0 +1 @@
+export { FAB, FABGroup, fabVariants } from './fab';

package/dist/components/form-field/form-field.d.ts

@@ -45,6 +45,14 @@ declare const formControlVariants: import("tailwind-variants").TVReturnType<{
         false: "";
     };
 }, undefined>>;
+type FormFieldDensity = NonNullable<VariantProps<typeof formFieldVariants>['density']>;
+export interface FormFieldState {
+    density: FormFieldDensity;
+    invalid: boolean;
+    disabled: boolean;
+    required: boolean;
+}
+export declare function useFormFieldState(): FormFieldState;
 export interface FormFieldProps extends ViewProps, VariantProps<typeof formFieldVariants> {
     invalid?: boolean;
     disabled?: boolean;

package/dist/components/form-field/form-field.js

@@ -41,6 +41,9 @@ const FormFieldContext = createContext({
     disabled: false,
     required: false,
 });
+export function useFormFieldState() {
+    return useContext(FormFieldContext);
+}
 const FormField = React.forwardRef(({ className, density = 'default', invalid = false, disabled = false, required = false, ...props }, ref) => {
     const interaction = useInteractionTokens();
     const contextValue = useMemo(() => ({ density, invalid, disabled, required }), [density, disabled, invalid, required]);

package/dist/components/form-field/index.d.ts

@@ -1 +1 @@
-export { FormField, FormLabel, FormControl, FormHint, FormMessage, formFieldVariants, formControlVariants, type FormFieldProps, type FormLabelProps, type FormControlProps, type FormHintProps, type FormMessageProps, } from './form-field';
+export { FormField, FormLabel, FormControl, FormHint, FormMessage, useFormFieldState, formFieldVariants, formControlVariants, type FormFieldProps, type FormLabelProps, type FormControlProps, type FormHintProps, type FormMessageProps, type FormFieldState, } from './form-field';

package/dist/components/form-field/index.js

@@ -1 +1 @@
-export { FormField, FormLabel, FormControl, FormHint, FormMessage, formFieldVariants, formControlVariants, } from './form-field';
+export { FormField, FormLabel, FormControl, FormHint, FormMessage, useFormFieldState, formFieldVariants, formControlVariants, } from './form-field';

package/dist/components/input/input.d.ts

@@ -6,19 +6,26 @@ declare const inputVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: "border-border";
         error: "border-destructive";
+        /** No border, no fill — for one large figure that is the screen's subject. */
+        plain: "border-transparent bg-transparent";
     };
 }, undefined, "w-full border-border bg-muted text-foreground", {
     variant: {
         default: "border-border";
         error: "border-destructive";
+        /** No border, no fill — for one large figure that is the screen's subject. */
+        plain: "border-transparent bg-transparent";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         default: "border-border";
         error: "border-destructive";
+        /** No border, no fill — for one large figure that is the screen's subject. */
+        plain: "border-transparent bg-transparent";
     };
 }, undefined>>;
 export interface InputProps extends TextInputProps, VariantProps<typeof inputVariants> {
+    'aria-invalid'?: boolean;
     className?: string;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;

package/dist/components/input/input.js

@@ -1,42 +1,59 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import React, { useState } from 'react';
 import { View, TextInput } from 'react-native';
 import { cn } from '../../lib/cn';
-import { focusRing } from '../../lib/focus-ring';
+import { focusFieldWrapper } from '../../lib/focus-ring';
 import { tv } from '../../lib/tv';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useInteractionTokens } from '../../lib/interaction-tokens';
 import { useVisualTokens } from '../../lib/visual-tokens';
 import { typographyStyle } from '../../lib/recipes';
+import { webAutofillField } from '../../lib/web-autofill';
+import { useFormFieldState } from '../form-field/form-field';
 const inputVariants = tv({
     base: 'w-full border-border bg-muted text-foreground',
     variants: {
         variant: {
             default: 'border-border',
             error: 'border-destructive',
+            /** No border, no fill — for one large figure that is the screen's subject. */
+            plain: 'border-transparent bg-transparent',
         },
     },
     defaultVariants: {
         variant: 'default',
     },
 });
-const Input = React.forwardRef(({ className, prefix, suffix, inputClassName, variant, editable = true, placeholderTextColor, ...props }, ref) => {
+const Input = React.forwardRef(({ className, prefix, suffix, inputClassName, variant, editable, 'aria-invalid': ariaInvalid, placeholderTextColor, onFocus, onBlur, ...props }, ref) => {
     const colors = useThemeColors();
     const interaction = useInteractionTokens();
     const visual = useVisualTokens();
-    return (_jsxs(View, { className: cn('flex-row items-center border-border bg-muted', inputVariants({ variant }), className), style: [
+    const field = useFormFieldState();
+    const effectiveEditable = editable ?? !field.disabled;
+    const effectiveVariant = variant ?? (field.invalid ? 'error' : 'default');
+    // The border is on this wrapper and the focus is on the TextInput inside it, so the
+    // wrapper learns about focus from the events rather than a pseudo-class.
+    const [focused, setFocused] = useState(false);
+    const plain = effectiveVariant === 'plain';
+    return (_jsxs(View, { className: cn('flex-row items-center border-border bg-muted', inputVariants({ variant: effectiveVariant }), focused && !plain && focusFieldWrapper, className), style: [
             {
                 minHeight: visual.controlHeightDefault,
-                borderWidth: visual.borderWidthControl,
+                borderWidth: plain ? 0 : visual.borderWidthControl,
                 borderRadius: visual.radiusLg,
-                paddingHorizontal: visual.controlPaddingXDefault,
+                paddingHorizontal: plain ? 0 : visual.controlPaddingXDefault,
             },
-            !editable ? { opacity: interaction.disabledOpacity } : undefined,
-        ], children: [prefix && (_jsx(View, { style: { paddingRight: Math.max(8, Math.round(visual.controlPaddingXDefault * 0.5)) }, children: prefix })), _jsx(TextInput, { ref: ref, className: cn('flex-1 text-foreground placeholder:text-muted-foreground', focusRing, inputClassName), style: {
+            !effectiveEditable ? { opacity: interaction.disabledOpacity } : undefined,
+        ], children: [prefix && (_jsx(View, { style: { paddingRight: Math.max(8, Math.round(visual.controlPaddingXDefault * 0.5)) }, children: prefix })), _jsx(TextInput, { ref: ref, className: cn('flex-1 text-foreground placeholder:text-muted-foreground web:outline-none', !plain && webAutofillField, inputClassName), style: {
                     ...typographyStyle(visual, 'label'),
                     minHeight: visual.controlHeightDefault - 2,
                     paddingVertical: visual.controlPaddingYDefault,
-                }, editable: editable, placeholderTextColor: placeholderTextColor ?? colors.placeholder, ...props }), suffix && (_jsx(View, { style: { paddingLeft: Math.max(8, Math.round(visual.controlPaddingXDefault * 0.5)) }, children: suffix }))] }));
+                }, editable: effectiveEditable, "aria-invalid": ariaInvalid ?? field.invalid, placeholderTextColor: placeholderTextColor ?? colors.placeholder, onFocus: (event) => {
+                    setFocused(true);
+                    onFocus?.(event);
+                }, onBlur: (event) => {
+                    setFocused(false);
+                    onBlur?.(event);
+                }, ...props }), suffix && (_jsx(View, { style: { paddingLeft: Math.max(8, Math.round(visual.controlPaddingXDefault * 0.5)) }, children: suffix }))] }));
 });
 Input.displayName = 'Input';
 export { Input, inputVariants };

package/dist/components/markdown/index.d.ts

@@ -0,0 +1 @@
+export { Markdown, type MarkdownProps } from './markdown';

package/dist/components/markdown/index.js

@@ -0,0 +1 @@
+export { Markdown } from './markdown';