@thewhileloop/whileui 4.0.0 → 4.1.1

package/dist/components/text/text.js

@@ -4,37 +4,59 @@ import { Text as RNText } from 'react-native';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
 import { useResolveFontFamily } from '../../lib/font-context';
+import { useTypography } from '../../lib/recipes';
 const textVariants = tv({
     base: 'text-foreground',
     variants: {
         variant: {
             default: 'font-normal',
-            heading: 'text-2xl font-bold tracking-tight',
-            title: 'text-xl font-semibold',
-            subtitle: 'text-lg font-medium',
-            body: 'text-base font-normal',
-            caption: 'text-sm text-muted-foreground font-normal',
-            label: 'text-sm font-medium leading-tight',
-            code: 'font-mono text-sm bg-muted rounded px-1 py-0.5',
+            heading: 'font-bold tracking-tight',
+            title: 'font-semibold',
+            subtitle: 'font-medium',
+            body: 'font-normal',
+            caption: 'text-muted-foreground font-normal',
+            label: 'font-medium leading-tight',
+            code: 'font-mono bg-muted rounded px-1 py-0.5',
         },
         size: {
-            xs: 'text-xs',
-            sm: 'text-sm',
-            base: 'text-base',
-            lg: 'text-lg',
-            xl: 'text-xl',
-            '2xl': 'text-2xl',
-            '3xl': 'text-3xl',
+            xs: '',
+            sm: '',
+            base: '',
+            lg: '',
+            xl: '',
+            '2xl': '',
+            '3xl': '',
         },
     },
     defaultVariants: {
         variant: 'default',
     },
 });
-const Text = React.forwardRef(({ className, variant, size, style, ...props }, ref) => {
-    const resolved = cn(textVariants({ variant, size }), className);
+const VARIANT_ROLES = {
+    default: 'body',
+    heading: 'headline',
+    title: 'title',
+    subtitle: 'emphasis',
+    body: 'body',
+    caption: 'caption',
+    label: 'label',
+    code: 'label',
+};
+const SIZE_ROLES = {
+    xs: 'caption',
+    sm: 'label',
+    base: 'body',
+    lg: 'emphasis',
+    xl: 'title',
+    '2xl': 'headline',
+    '3xl': 'headline',
+};
+const Text = React.forwardRef(({ className, variant, size, style, accessibilityRole, ...props }, ref) => {
+    const effectiveVariant = variant ?? 'default';
+    const resolved = cn(textVariants({ variant: effectiveVariant, size }), className);
     const font = useResolveFontFamily(resolved);
-    return (_jsx(RNText, { ref: ref, className: font ? font.className : resolved, style: font ? [font.style, style] : style, ...props }));
+    const semanticStyle = useTypography(size ? SIZE_ROLES[size] : VARIANT_ROLES[effectiveVariant]);
+    return (_jsx(RNText, { ref: ref, className: font ? font.className : resolved, accessibilityRole: accessibilityRole ?? (effectiveVariant === 'heading' ? 'header' : undefined), style: [variant || size ? semanticStyle : undefined, font?.style, style], ...props }));
 });
 Text.displayName = 'Text';
 export { Text, textVariants };

package/dist/components/textarea/textarea.d.ts

@@ -21,6 +21,7 @@ declare const textareaVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined>>;
 export interface TextareaProps extends Omit<TextInputProps, 'style'>, VariantProps<typeof textareaVariants> {
+    'aria-invalid'?: boolean;
     className?: string;
 }
 declare const Textarea: ForwardRefComponent<TextInputInstance, TextareaProps>;

package/dist/components/textarea/textarea.js

@@ -8,6 +8,8 @@ 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 textareaVariants = tv({
     base: 'w-full border-border bg-muted text-foreground',
     variants: {
@@ -26,10 +28,12 @@ const TEXTAREA_TEXT_ROLE = {
     sm: 'caption',
     lg: 'body',
 };
-const Textarea = React.forwardRef(({ className, size = 'default', placeholderTextColor, ...props }, ref) => {
+const Textarea = React.forwardRef(({ className, size = 'default', placeholderTextColor, editable, 'aria-invalid': ariaInvalid, ...props }, ref) => {
     const colors = useThemeColors();
     const interaction = useInteractionTokens();
     const visual = useVisualTokens();
+    const field = useFormFieldState();
+    const effectiveEditable = editable ?? !field.disabled;
     const minHeight = size === 'sm'
         ? visual.textareaMinHeightSm
         : size === 'lg'
@@ -42,9 +46,9 @@ const Textarea = React.forwardRef(({ className, size = 'default', placeholderTex
         borderRadius: visual.radiusLg,
         paddingHorizontal: visual.controlPaddingXDefault,
         paddingVertical: visual.controlPaddingYDefault,
-        ...(props.editable === false ? { opacity: interaction.disabledOpacity } : null),
+        ...(!effectiveEditable ? { opacity: interaction.disabledOpacity } : null),
     };
-    return (_jsx(TextInput, { ref: ref, className: cn(textareaVariants({ size }), focusField, className), style: style, multiline: true, textAlignVertical: "top", placeholderTextColor: placeholderTextColor ?? colors.placeholder, ...props }));
+    return (_jsx(TextInput, { ref: ref, className: cn(textareaVariants({ size }), field.invalid && 'border-destructive', focusField, webAutofillField, className), style: style, multiline: true, textAlignVertical: "top", placeholderTextColor: placeholderTextColor ?? colors.placeholder, editable: effectiveEditable, "aria-invalid": ariaInvalid ?? field.invalid, ...props }));
 });
 Textarea.displayName = 'Textarea';
 export { Textarea, textareaVariants };

package/dist/components/toast/toast.js

@@ -86,10 +86,14 @@ function Toast({ toast: toastData, onDismiss, className, style, ...props }) {
                             paddingVertical: visual.controlPaddingYSm,
                         }, children: _jsx(Text, { className: cn('font-medium', textColor), style: typographyStyle(visual, 'label'), children: action.label }) })), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Dismiss", onPress: onDismiss, className: "p-1", children: _jsx(Text, { className: cn(textColor), style: typographyStyle(visual, 'emphasis'), children: "\u00D7" }) })] })] }));
 }
+function ToastContainerItem({ toast, dismiss, }) {
+    const handleDismiss = useCallback(() => dismiss(toast.id), [dismiss, toast.id]);
+    return (_jsx(View, { className: "mb-2", children: _jsx(Toast, { toast: toast, onDismiss: handleDismiss }) }));
+}
 export function ToastContainer({ position = 'top', className, style, ...props }) {
     const { toasts, dismiss } = useToast();
     const visual = useVisualTokens();
     const positionClass = position === 'top' ? 'top-0' : 'bottom-0';
-    return (_jsx(View, { className: cn('absolute left-0 right-0 z-50 py-2', positionClass, className), style: [{ paddingHorizontal: visual.surfacePaddingSm }, style], pointerEvents: "box-none", ...props, children: toasts.map((toast) => (_jsx(View, { className: "mb-2", children: _jsx(Toast, { toast: toast, onDismiss: () => dismiss(toast.id) }) }, toast.id))) }));
+    return (_jsx(View, { className: cn('absolute left-0 right-0 z-50 py-2', positionClass, className), style: [{ paddingHorizontal: visual.surfacePaddingSm }, style], pointerEvents: "box-none", ...props, children: toasts.map((toast) => (_jsx(ToastContainerItem, { toast: toast, dismiss: dismiss }, toast.id))) }));
 }
 export { Toast, toastVariants };

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export { controlRecipe, fieldRecipe, surfaceRecipe, surfacePadding, surfaceRadiu
 export { WHILEUI_PRESET_SOFT, WHILEUI_PRESET_ATELIER, WHILEUI_THEME_PRESETS, themePresetToCssVariables, themePresetToCss, type ThemePreset, } from './lib/theme-presets';
 export { deriveThemeColors, THEME_BASE_TOKEN_KEYS, type ThemeBaseColors } from './lib/theme-derive';
 export { Text, textVariants, type TextProps } from './components/text';
+export { Surface, type SurfaceLevel, type SurfaceProps } from './components/surface';
 export { View, type ViewProps } from './components/view';
 export { Pressable, type PressableProps } from './components/pressable';
 export { Stack, stackVariants, type StackProps } from './components/stack';
@@ -25,7 +26,7 @@ export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter,
 export { Input, inputVariants, type InputProps } from './components/input';
 export { NumericInput, numericInputVariants, numericInputTextVariants, type NumericInputProps, } from './components/numeric-input';
 export { OTPInput, otpCellVariants, type OTPInputProps } from './components/otp-input';
-export { FormField, FormLabel, FormControl, FormHint, FormMessage, formFieldVariants, formControlVariants, type FormFieldProps, type FormLabelProps, type FormControlProps, type FormHintProps, type FormMessageProps, } from './components/form-field';
+export { FormField, FormLabel, FormControl, FormHint, FormMessage, useFormFieldState, formFieldVariants, formControlVariants, type FormFieldProps, type FormLabelProps, type FormControlProps, type FormHintProps, type FormMessageProps, type FormFieldState, } from './components/form-field';
 export { LabeledField, LabeledFieldControl, type LabeledFieldProps, type LabeledFieldControlProps, } from './components/labeled-field';
 export { Badge, BadgeText, badgeVariants, badgeTextVariants, type BadgeProps, type BadgeTextProps, } from './components/badge';
 export { FAB, FABGroup, fabVariants, type FabProps, type FabGroupProps } from './components/fab';
@@ -39,7 +40,7 @@ export { Spinner, spinnerVariants, type SpinnerProps } from './components/spinne
 export { Textarea, textareaVariants, type TextareaProps } from './components/textarea';
 export { Skeleton, skeletonVariants, type SkeletonProps } from './components/skeleton';
 export { AspectRatio, type AspectRatioProps } from './components/aspect-ratio';
-export { Avatar, AvatarImage, AvatarFallback, avatarVariants, type AvatarProps, type AvatarImageProps, type AvatarFallbackProps, } from './components/avatar';
+export { Avatar, AvatarImage, AvatarFallback, avatarVariants, type AvatarProps, type AvatarImageProps, type AvatarImageStatus, type AvatarFallbackProps, } from './components/avatar';
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, type AccordionProps, type AccordionItemProps, type AccordionTriggerProps, type AccordionContentProps, } from './components/accordion';
 export { Collapsible, CollapsibleTrigger, CollapsibleContent, type CollapsibleProps, type CollapsibleTriggerProps, type CollapsibleContentProps, } from './components/collapsible';
 export { Container, containerVariants, type ContainerProps } from './components/container';

package/dist/index.js

@@ -16,6 +16,7 @@ export { controlRecipe, fieldRecipe, surfaceRecipe, surfacePadding, surfaceRadiu
 export { WHILEUI_PRESET_SOFT, WHILEUI_PRESET_ATELIER, WHILEUI_THEME_PRESETS, themePresetToCssVariables, themePresetToCss, } from './lib/theme-presets';
 export { deriveThemeColors, THEME_BASE_TOKEN_KEYS } from './lib/theme-derive';
 export { Text, textVariants } from './components/text';
+export { Surface } from './components/surface';
 export { View } from './components/view';
 export { Pressable } from './components/pressable';
 export { Stack, stackVariants } from './components/stack';
@@ -25,7 +26,7 @@ export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter,
 export { Input, inputVariants } from './components/input';
 export { NumericInput, numericInputVariants, numericInputTextVariants, } from './components/numeric-input';
 export { OTPInput, otpCellVariants } from './components/otp-input';
-export { FormField, FormLabel, FormControl, FormHint, FormMessage, formFieldVariants, formControlVariants, } from './components/form-field';
+export { FormField, FormLabel, FormControl, FormHint, FormMessage, useFormFieldState, formFieldVariants, formControlVariants, } from './components/form-field';
 export { LabeledField, LabeledFieldControl, } from './components/labeled-field';
 export { Badge, BadgeText, badgeVariants, badgeTextVariants, } from './components/badge';
 export { FAB, FABGroup, fabVariants } from './components/fab';

package/dist/lib/theme-bridge.d.ts

@@ -23,7 +23,7 @@ export declare function applyThemeMode(mode: ThemeMode): void;
 export declare function resolveThemeMode(adapter?: ThemeBridgeAdapter, fallback?: ThemeMode): Promise<ThemeMode>;
 export declare function syncThemeMode(mode: ThemeMode, adapter?: ThemeBridgeAdapter): Promise<ThemeMode>;
 export declare function useThemeBridge({ initialMode, adapter, }?: UseThemeBridgeOptions): UseThemeBridgeResult;
-export declare function ThemeBridge({ mode, initialMode, adapter }: ThemeBridgeProps): import("react").FunctionComponentElement<Pick<ThemeBridgeProps, "initialMode" | "adapter">> | import("react").FunctionComponentElement<{
+export declare function ThemeBridge({ mode, initialMode, adapter }: ThemeBridgeProps): import("react").FunctionComponentElement<Pick<ThemeBridgeProps, "adapter" | "initialMode">> | import("react").FunctionComponentElement<{
     mode: ThemeMode;
     adapter?: ThemeBridgeAdapter;
 }>;

package/dist/lib/theme-bridge.js

@@ -1,6 +1,37 @@
-import { createElement, useCallback, useEffect, useMemo, useState } from 'react';
+import { createElement, useCallback, useEffect, useMemo, useReducer } from 'react';
 import { Uniwind, useUniwind } from 'uniwind';
 const modeCycle = ['light', 'dark', 'system'];
+function themeBridgeReducer(state, action) {
+    if (action.type === 'cycle') {
+        return {
+            ...state,
+            status: 'ready',
+            mode: modeCycle[(modeCycle.indexOf(state.mode) + 1) % modeCycle.length],
+        };
+    }
+    if (action.type === 'select') {
+        return { ...state, status: 'ready', mode: action.mode };
+    }
+    if (action.type === 'hydrate') {
+        if (state.adapter === action.adapter &&
+            state.initialMode === action.initialMode &&
+            state.status === (action.adapter ? 'hydrating' : 'ready')) {
+            return state;
+        }
+        return {
+            status: action.adapter ? 'hydrating' : 'ready',
+            mode: state.mode,
+            adapter: action.adapter,
+            initialMode: action.initialMode,
+        };
+    }
+    if (state.status !== 'hydrating' ||
+        state.adapter !== action.adapter ||
+        state.initialMode !== action.initialMode) {
+        return state;
+    }
+    return { ...state, status: 'ready', mode: action.mode };
+}
 export function applyThemeMode(mode) {
     Uniwind.setTheme(mode);
 }
@@ -23,16 +54,21 @@ export async function syncThemeMode(mode, adapter) {
 }
 export function useThemeBridge({ initialMode = 'system', adapter, } = {}) {
     const { theme } = useUniwind();
-    const [mode, setMode] = useState(initialMode);
-    const [hydrated, setHydrated] = useState(!adapter);
+    const [state, dispatch] = useReducer(themeBridgeReducer, {
+        status: adapter ? 'hydrating' : 'ready',
+        mode: initialMode,
+        adapter,
+        initialMode,
+    });
     useEffect(() => {
         let mounted = true;
+        dispatch({ type: 'hydrate', adapter, initialMode });
         if (!adapter) {
             return;
         }
         // `loadThemeMode` is the consumer's storage. If it rejects — a corrupt store, a
         // keychain prompt the user dismissed — the app must still render in the initial
-        // mode; leaving `hydrated` false would strand anything gated on it forever.
+        // mode rather than remaining in the hydrating phase forever.
         void (async () => {
             let next;
             try {
@@ -44,35 +80,33 @@ export function useThemeBridge({ initialMode = 'system', adapter, } = {}) {
             if (!mounted) {
                 return;
             }
-            setMode(next);
-            setHydrated(true);
+            dispatch({ type: 'hydrated', adapter, initialMode, mode: next });
         })();
         return () => {
             mounted = false;
         };
     }, [adapter, initialMode]);
     useEffect(() => {
-        if (!hydrated) {
+        if (state.status !== 'ready' ||
+            state.adapter !== adapter ||
+            state.initialMode !== initialMode) {
             return;
         }
-        applyThemeMode(mode);
+        applyThemeMode(state.mode);
         if (adapter) {
-            void adapter.saveThemeMode(mode);
+            void adapter.saveThemeMode(state.mode);
         }
-    }, [adapter, hydrated, mode]);
-    const cycleMode = useCallback(() => {
-        setMode((currentMode) => {
-            const currentIndex = modeCycle.indexOf(currentMode);
-            const nextIndex = (currentIndex + 1) % modeCycle.length;
-            return modeCycle[nextIndex];
-        });
+    }, [adapter, initialMode, state]);
+    const setMode = useCallback((mode) => {
+        dispatch({ type: 'select', mode });
     }, []);
+    const cycleMode = useCallback(() => dispatch({ type: 'cycle' }), []);
     return useMemo(() => ({
-        mode,
+        mode: state.mode,
         resolvedTheme: theme,
         setMode,
         cycleMode,
-    }), [cycleMode, mode, theme]);
+    }), [cycleMode, setMode, state.mode, theme]);
 }
 function ControlledThemeBridge({ mode, adapter, }) {
     useEffect(() => {

package/dist/lib/web-autofill.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Browser autofill paints its own field background and text colours. The large inset
+ * shadow covers that paint without changing the native style contract; the other two
+ * declarations restore the active theme's text and caret.
+ *
+ * Apply only to fields whose own surface is `bg-muted`. Transparent/unstyled inputs
+ * must keep inheriting the surface chosen by their composition.
+ */
+export declare const webAutofillField = "web:autofill:shadow-[inset_0_0_0_1000px_var(--color-muted)] web:autofill:[-webkit-text-fill-color:var(--color-foreground)] web:autofill:caret-foreground";

package/dist/lib/web-autofill.js

@@ -0,0 +1,9 @@
+/**
+ * Browser autofill paints its own field background and text colours. The large inset
+ * shadow covers that paint without changing the native style contract; the other two
+ * declarations restore the active theme's text and caret.
+ *
+ * Apply only to fields whose own surface is `bg-muted`. Transparent/unstyled inputs
+ * must keep inheriting the surface chosen by their composition.
+ */
+export const webAutofillField = 'web:autofill:shadow-[inset_0_0_0_1000px_var(--color-muted)] web:autofill:[-webkit-text-fill-color:var(--color-foreground)] web:autofill:caret-foreground';

package/dist/markdown.d.ts

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

package/dist/markdown.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thewhileloop/whileui",
-  "version": "4.0.0",
+  "version": "4.1.1",
   "description": "WhileUI Native — Copy-paste components for React Native. You own the code.",
   "license": "MIT",
   "repository": {
@@ -40,6 +40,14 @@
       "types": "./dist/tokens.d.ts",
       "import": "./dist/tokens.js"
     },
+    "./code": {
+      "types": "./dist/code.d.ts",
+      "import": "./dist/code.js"
+    },
+    "./markdown": {
+      "types": "./dist/markdown.d.ts",
+      "import": "./dist/markdown.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -78,11 +86,15 @@
     "react-native-screens": ">=4.30.0",
     "tailwindcss": ">=4.0.0",
     "uniwind": ">=1.12.0",
-    "react-native-worklets": ">=0.13.0"
+    "react-native-worklets": ">=0.13.0",
+    "markdown-it": ">=14.1.0"
   },
   "peerDependenciesMeta": {
     "expo-blur": {
       "optional": true
+    },
+    "markdown-it": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -97,10 +109,12 @@
     "@testing-library/react-native": "^14.1.0",
     "@types/culori": "^4.0.1",
     "@types/jest": "^30.0.0",
+    "@types/markdown-it": "^14.1.2",
     "@types/react": "~19.3.0",
     "expo-image": "~58.0.15",
     "jest": "^30.5.2",
     "jest-expo": "~58.0.11",
+    "markdown-it": "^14.1.0",
     "react-native-screens": "~4.30.0",
     "test-renderer": "^1.3.1",
     "typescript": "~6.0.3"