@thewhileloop/whileui 4.0.0 → 4.1.0

package/dist/components/markdown/markdown.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { View } from 'react-native';
+import MarkdownIt from 'markdown-it';
+import { CodeBlock } from '../code-block';
+import { Text } from '../text';
+import { cn } from '../../lib/cn';
+import { useVisualTokens } from '../../lib/visual-tokens';
+const parser = new MarkdownIt({ html: false, linkify: true, typographer: true });
+function toTree(tokens) {
+    const root = [];
+    const stack = [root];
+    for (const token of tokens) {
+        if (token.nesting === -1) {
+            stack.pop();
+            continue;
+        }
+        const node = { token, children: [] };
+        stack[stack.length - 1]?.push(node);
+        if (token.nesting === 1)
+            stack.push(node.children);
+    }
+    return root;
+}
+function getAttribute(token, name) {
+    return token.attrGet(name) ?? undefined;
+}
+function Markdown({ children, onLinkPress, codeActions, textStyle, selectable = true, className, ...props }) {
+    const visual = useVisualTokens();
+    const nodes = useMemo(() => toTree(parser.parse(children, {})), [children]);
+    const renderInline = (node, key) => {
+        const { token } = node;
+        if (token.type === 'text')
+            return token.content;
+        if (token.type === 'softbreak' || token.type === 'hardbreak')
+            return '\n';
+        if (token.type === 'code_inline') {
+            return (_jsx(Text, { variant: "code", selectable: selectable, children: token.content }, key));
+        }
+        if (token.type === 'image')
+            return token.content;
+        const content = node.children.map((child, index) => renderInline(child, `${key}-${index}`));
+        if (token.type === 'strong_open')
+            return (_jsx(Text, { className: "font-bold", children: content }, key));
+        if (token.type === 'em_open')
+            return (_jsx(Text, { style: { fontStyle: 'italic' }, children: content }, key));
+        if (token.type === 's_open')
+            return (_jsx(Text, { style: { textDecorationLine: 'line-through' }, children: content }, key));
+        if (token.type === 'link_open') {
+            const href = getAttribute(token, 'href');
+            return (_jsx(Text, { className: "text-primary underline", accessibilityRole: onLinkPress ? 'link' : undefined, onPress: href && onLinkPress ? () => onLinkPress(href) : undefined, children: content }, key));
+        }
+        return content;
+    };
+    const renderNode = (node, key, listIndex) => {
+        const { token } = node;
+        if (token.type === 'inline') {
+            return toTree(token.children ?? []).map((child, index) => renderInline(child, `${key}-${index}`));
+        }
+        if (token.type === 'paragraph_open') {
+            return (_jsx(Text, { variant: "body", style: textStyle, selectable: selectable, children: node.children.map((child, index) => renderNode(child, `${key}-${index}`)) }, key));
+        }
+        if (token.type === 'heading_open') {
+            const level = Number(token.tag.slice(1));
+            const variant = level === 1 ? 'heading' : level === 2 ? 'title' : 'subtitle';
+            return (_jsx(Text, { variant: variant, accessibilityRole: "header", style: textStyle, selectable: selectable, children: node.children.map((child, index) => renderNode(child, `${key}-${index}`)) }, key));
+        }
+        if (token.type === 'fence' || token.type === 'code_block') {
+            const language = token.info.trim().split(/\s+/)[0] || undefined;
+            return (_jsx(CodeBlock, { code: token.content.replace(/\n$/, ''), language: language, actions: codeActions?.(token.content, language) }, key));
+        }
+        if (token.type === 'bullet_list_open' || token.type === 'ordered_list_open') {
+            const ordered = token.type === 'ordered_list_open';
+            const start = Number(getAttribute(token, 'start') ?? 1);
+            return (_jsx(View, { className: "gap-2", children: node.children.map((child, index) => renderNode(child, `${key}-${index}`, ordered ? start + index : undefined)) }, key));
+        }
+        if (token.type === 'list_item_open') {
+            return (_jsxs(View, { className: "flex-row items-start gap-2", children: [_jsx(Text, { variant: "body", children: listIndex === undefined ? '•' : `${listIndex}.` }), _jsx(View, { className: "min-w-0 flex-1 gap-1", children: node.children.map((child, index) => renderNode(child, `${key}-${index}`)) })] }, key));
+        }
+        if (token.type === 'blockquote_open') {
+            return (_jsx(View, { className: "border-l border-border bg-muted", style: {
+                    borderLeftWidth: visual.borderWidthEmphasis,
+                    paddingHorizontal: visual.surfacePaddingSm,
+                    paddingVertical: visual.controlPaddingYSm,
+                }, children: node.children.map((child, index) => renderNode(child, `${key}-${index}`)) }, key));
+        }
+        if (token.type === 'hr')
+            return _jsx(View, { className: "h-px bg-border" }, key);
+        return node.children.map((child, index) => renderNode(child, `${key}-${index}`));
+    };
+    return (_jsx(View, { className: cn('gap-3', className), ...props, children: nodes.map((node, index) => renderNode(node, String(index))) }));
+}
+Markdown.displayName = 'Markdown';
+export { Markdown };

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

@@ -47,6 +47,7 @@ declare const numericInputTextVariants: import("tailwind-variants").TVReturnType
     };
 }, undefined>>;
 export interface NumericInputProps extends Omit<TextInputProps, 'value' | 'defaultValue' | 'onChangeText' | 'keyboardType'>, VariantProps<typeof numericInputVariants> {
+    'aria-invalid'?: boolean;
     className?: string;
     inputClassName?: string;
     prefix?: React.ReactNode;

package/dist/components/numeric-input/numeric-input.js

@@ -8,6 +8,8 @@ import { useThemeColors } from '../../lib/theme-colors';
 import { useInteractionTokens, withInteractivePressableStyle } 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 numericInputVariants = tv({
     base: 'w-full flex-row items-center border-border bg-muted',
     variants: {
@@ -135,10 +137,13 @@ function NumericSteppers({ visible, inset, size, radius, model, interaction, vis
         return null;
     return (_jsxs(View, { className: "shrink-0 flex-row items-center", style: { gap: inset, paddingLeft: Math.max(6, inset) }, children: [_jsx(NumericStepperButton, { delta: -1, enabled: model.canDecrease, label: "Decrease value", symbol: "\u2212", size: size, radius: radius, model: model, interaction: interaction, visual: visual }), _jsx(NumericStepperButton, { delta: 1, enabled: model.canIncrease, label: "Increase value", symbol: "+", size: size, radius: radius, model: model, interaction: interaction, visual: visual })] }));
 }
-const NumericInput = React.forwardRef(({ className, inputClassName, prefix, suffix, value, defaultValue, onValueChange, min, max, step = 1, showSteppers = false, unstyled = false, variant = 'default', size = 'default', editable = true, placeholderTextColor, onFocus, onBlur, style: styleProp, ...props }, ref) => {
+const NumericInput = React.forwardRef(({ className, inputClassName, prefix, suffix, value, defaultValue, onValueChange, min, max, step = 1, showSteppers = false, unstyled = false, variant, size = 'default', editable, 'aria-invalid': ariaInvalid, placeholderTextColor, onFocus, onBlur, style: styleProp, ...props }, ref) => {
     const colors = useThemeColors();
     const interaction = useInteractionTokens();
     const visual = useVisualTokens();
+    const field = useFormFieldState();
+    const effectiveEditable = editable ?? !field.disabled;
+    const effectiveVariant = variant ?? (field.invalid ? 'error' : 'default');
     // The border is on the wrapper and the focus on the field inside it.
     const [focused, setFocused] = useState(false);
     const model = useNumericInputModel({
@@ -147,7 +152,7 @@ const NumericInput = React.forwardRef(({ className, inputClassName, prefix, suff
         min,
         max,
         step,
-        editable,
+        editable: effectiveEditable,
         onValueChange,
         onBlur,
     });
@@ -156,7 +161,7 @@ const NumericInput = React.forwardRef(({ className, inputClassName, prefix, suff
     const stepInset = Math.max(3, Math.round(controlHeight * 0.1));
     const stepSize = controlHeight - stepInset * 2;
     const stepRadius = Math.max(3, Math.min(visual.radiusMd, Math.round(stepSize / 3)));
-    return (_jsxs(View, { className: cn(numericInputVariants({ variant, size }), unstyled && 'bg-transparent', focused && !unstyled && focusFieldWrapper, className), style: [
+    return (_jsxs(View, { className: cn(numericInputVariants({ variant: effectiveVariant, size }), unstyled && 'bg-transparent', focused && !unstyled && focusFieldWrapper, className), style: [
             {
                 // Definite height (not minHeight) so inner elements can center reliably.
                 height: controlHeight,
@@ -165,14 +170,14 @@ const NumericInput = React.forwardRef(({ className, inputClassName, prefix, suff
                 paddingLeft: !unstyled && prefix ? visual.controlPaddingXDefault : 0,
                 paddingRight: unstyled ? 0 : showSteppers ? stepInset : 0,
             },
-            !editable ? { opacity: interaction.disabledOpacity } : undefined,
-        ], children: [_jsx(NumericAffix, { side: "prefix", visual: visual, children: prefix }), _jsx(View, { className: "min-w-0 flex-1", style: Platform.OS === 'web' ? { minWidth: 0, flex: 1 } : undefined, children: _jsx(TextInput, { ref: ref, className: cn(numericInputTextVariants({ size }), 'w-full web:outline-none', inputClassName), style: numericInputTextStyle(visual, size, unstyled, styleProp), value: model.textValue, onChangeText: model.handleTextChange, onFocus: (event) => {
+            !effectiveEditable ? { opacity: interaction.disabledOpacity } : undefined,
+        ], children: [_jsx(NumericAffix, { side: "prefix", visual: visual, children: prefix }), _jsx(View, { className: "min-w-0 flex-1", style: Platform.OS === 'web' ? { minWidth: 0, flex: 1 } : undefined, children: _jsx(TextInput, { ref: ref, className: cn(numericInputTextVariants({ size }), 'w-full web:outline-none', !unstyled && webAutofillField, inputClassName), style: numericInputTextStyle(visual, size, unstyled, styleProp), value: model.textValue, onChangeText: model.handleTextChange, onFocus: (event) => {
                         setFocused(true);
                         onFocus?.(event);
                     }, onBlur: (event) => {
                         setFocused(false);
                         model.handleBlur(event);
-                    }, keyboardType: "decimal-pad", editable: editable, placeholderTextColor: placeholderTextColor ?? colors.placeholder, ...props }) }), _jsx(NumericAffix, { side: "suffix", visual: visual, children: suffix }), _jsx(NumericSteppers, { visible: showSteppers, inset: stepInset, size: stepSize, radius: stepRadius, model: model, interaction: interaction, visual: visual })] }));
+                    }, keyboardType: "decimal-pad", editable: effectiveEditable, "aria-invalid": ariaInvalid ?? field.invalid, placeholderTextColor: placeholderTextColor ?? colors.placeholder, ...props }) }), _jsx(NumericAffix, { side: "suffix", visual: visual, children: suffix }), _jsx(NumericSteppers, { visible: showSteppers, inset: stepInset, size: stepSize, radius: stepRadius, model: model, interaction: interaction, visual: visual })] }));
 });
 NumericInput.displayName = 'NumericInput';
 export { NumericInput, numericInputVariants, numericInputTextVariants };

package/dist/components/select/select.d.ts

@@ -15,6 +15,7 @@ export interface SelectProps {
 }
 export interface SelectTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'style'> {
     className?: string;
+    'aria-invalid'?: boolean;
     /**
      * Object form only. On web this primitive is merged through a Slot that spreads
      * `style`, which cannot carry a state callback — a function silently becomes `{}` and
@@ -56,7 +57,7 @@ export interface SelectLabelProps extends React.ComponentPropsWithoutRef<typeof
 export interface SelectSeparatorProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {
     className?: string;
 }
-declare const Select: typeof SelectPrimitive.Root;
+declare function Select({ disabled, ...props }: SelectProps): React.JSX.Element;
 declare const SelectGroup: typeof SelectPrimitive.Group;
 declare const SelectTrigger: ForwardRefComponent<SelectTriggerRef, SelectTriggerProps>;
 declare function SelectValue({ className, placeholder }: SelectValueProps): React.JSX.Element;

package/dist/components/select/select.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Platform, ScrollView, StyleSheet, View, } from 'react-native';
 import * as SelectPrimitive from '@rn-primitives/select';
@@ -11,14 +11,20 @@ import { useFrostedSurface } from '../../lib/frosted-surface';
 import { useVisualTokens } from '../../lib/visual-tokens';
 import { useThemeColors } from '../../lib/theme-colors';
 import { fieldRecipe, shadowStyle, surfaceRadius, typographyStyle } from '../../lib/recipes';
+import { useFormFieldState } from '../form-field/form-field';
 // iOS needs FullWindowOverlay to render above everything
 const FullWindowOverlay = Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
-const Select = SelectPrimitive.Root;
+function Select({ disabled, ...props }) {
+    const field = useFormFieldState();
+    return _jsx(SelectPrimitive.Root, { disabled: disabled ?? field.disabled, ...props });
+}
 const SelectGroup = SelectPrimitive.Group;
-const SelectTrigger = React.forwardRef(({ className, children, style: styleProp, ...props }, ref) => {
+const SelectTrigger = React.forwardRef(({ className, children, style: styleProp, disabled, 'aria-invalid': ariaInvalid, ...props }, ref) => {
     const interaction = useInteractionTokens();
     const visual = useVisualTokens();
-    return (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('border-border bg-muted flex w-full flex-row items-center justify-between gap-2 shadow-sm active:bg-state-pressed', focusRing, props.disabled && '', className), 
+    const field = useFormFieldState();
+    const effectiveDisabled = disabled ?? field.disabled;
+    return (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('border-border bg-muted flex w-full flex-row items-center justify-between gap-2 shadow-sm active:bg-state-pressed', field.invalid && 'border-destructive', focusRing, effectiveDisabled && '', className), 
         // Flattened, not an array. On web this primitive is merged through a Slot that
         // spreads `style`, and spreading an array yields { 0: …, 1: … } — numeric keys
         // that reach the DOM as indexed style properties and throw. The Select rendered
@@ -26,8 +32,8 @@ const SelectTrigger = React.forwardRef(({ className, children, style: styleProp,
         style: StyleSheet.flatten([
             fieldRecipe(visual, 'default'),
             styleProp,
-            props.disabled ? { opacity: interaction.disabledOpacity } : null,
-        ]), ...props, children: [_jsx(_Fragment, { children: children }), _jsx(View, { className: "border-muted-foreground h-2 w-2 rotate-45 border-b-2 border-r-2" })] }));
+            effectiveDisabled ? { opacity: interaction.disabledOpacity } : null,
+        ]), disabled: effectiveDisabled, "aria-invalid": ariaInvalid ?? field.invalid, ...props, children: [_jsx(_Fragment, { children: children }), _jsx(View, { testID: "select-chevron", className: "border-muted-foreground h-2 w-2 shrink-0 rotate-45 border-b-2 border-r-2" })] }));
 });
 SelectTrigger.displayName = 'SelectTrigger';
 function SelectValue({ className, placeholder = 'Select...' }) {
@@ -39,7 +45,9 @@ function SelectValue({ className, placeholder = 'Select...' }) {
     // user-agent default black — 1.2:1 on a dark surface. Rendering the label ourselves
     // instead would fix the colour and lose the value: Radix owns the selection on web,
     // and `useRootContext().value` is not populated there.
-    return (_jsx(Text, { className: cn('text-foreground', !value && 'text-muted-foreground', className), style: typographyStyle(visual, 'body'), numberOfLines: 1, children: _jsx(SelectPrimitive.Value, { placeholder: placeholder }) }));
+    // Radix renders the selected ItemText as a nested RNW div, which resets white-space.
+    // The descendant utilities keep that generated node on the same truncated line.
+    return (_jsx(Text, { testID: "select-value", className: cn('min-w-0 flex-1 text-foreground web:overflow-hidden web:text-ellipsis web:whitespace-nowrap web:[&_*]:max-w-full web:[&_*]:overflow-hidden web:[&_*]:text-ellipsis web:[&_*]:whitespace-nowrap', !value && 'text-muted-foreground', className), style: typographyStyle(visual, 'body'), numberOfLines: 1, children: _jsx(SelectPrimitive.Value, { placeholder: placeholder }) }));
 }
 const SelectContent = React.forwardRef(({ className, children, portalHost, position = 'popper', insets, style: styleProp, frosted = false, blurIntensity, blurTintToken, ...props }, ref) => {
     const frostedSurface = useFrostedSurface({
@@ -71,8 +79,8 @@ SelectContent.displayName = 'SelectContent';
 const SelectItem = React.forwardRef(({ className, children, style: styleProp, ...props }, ref) => {
     const interaction = useInteractionTokens();
     const visual = useVisualTokens();
-    return (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn('active:bg-accent group relative flex w-full flex-row items-center gap-2 pr-8', Platform.select({
-            web: 'focus:bg-accent focus:text-accent-foreground cursor-default outline-none',
+    return (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn('active:bg-state-pressed group relative flex w-full flex-row items-center gap-2 pr-8', Platform.select({
+            web: 'focus:bg-state-hover focus:text-foreground cursor-default outline-none',
         }), props.disabled && '', className), style: StyleSheet.flatten([
             {
                 borderRadius: visual.radiusSm,
@@ -82,7 +90,7 @@ const SelectItem = React.forwardRef(({ className, children, style: styleProp, ..
             },
             styleProp,
             props.disabled ? { opacity: interaction.disabledOpacity } : null,
-        ]), ...props, children: [_jsx(View, { className: "absolute right-3 flex h-4 w-4 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(View, { className: "border-foreground h-2.5 w-1.5 rotate-45 border-b-2 border-r-2 -mt-0.5" }) }) }), children, _jsx(SelectPrimitive.ItemText, { className: "text-foreground group-active:text-accent-foreground", style: typographyStyle(visual, 'body') })] }));
+        ]), ...props, children: [_jsx(View, { className: "absolute right-3 flex h-4 w-4 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(View, { className: "border-primary h-2.5 w-1.5 rotate-45 border-b-2 border-r-2 -mt-0.5" }) }) }), children, _jsx(SelectPrimitive.ItemText, { className: "text-foreground", style: typographyStyle(visual, 'body') })] }));
 });
 SelectItem.displayName = 'SelectItem';
 function SelectItemIcon({ className, children }) {

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

@@ -0,0 +1 @@
+export { Surface, type SurfaceLevel, type SurfaceProps } from './surface';

package/dist/components/surface/index.js

@@ -0,0 +1 @@
+export { Surface } from './surface';

package/dist/components/surface/surface.d.ts

@@ -0,0 +1,14 @@
+import { type ViewInstance, type ViewProps } from 'react-native';
+import { type FrostedSurfaceProps } from '../../lib/frosted-surface';
+import { type ShadowTier, type SurfacePaddingSize } from '../../lib/recipes';
+import type { ForwardRefComponent } from '../../lib/ref-types';
+export type SurfaceLevel = 'base' | 'raised' | 'overlay';
+export interface SurfaceProps extends ViewProps, FrostedSurfaceProps {
+    level?: SurfaceLevel;
+    padding?: SurfacePaddingSize;
+    radius?: 'sm' | 'md' | 'lg' | 'xl';
+    bordered?: boolean;
+    shadow?: ShadowTier;
+}
+declare const Surface: ForwardRefComponent<ViewInstance, SurfaceProps>;
+export { Surface };

package/dist/components/surface/surface.js

@@ -0,0 +1,35 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { View } from 'react-native';
+import { cn } from '../../lib/cn';
+import { useFrostedSurface } from '../../lib/frosted-surface';
+import { useShadowStyle, useSurfaceRecipe, } from '../../lib/recipes';
+const LEVEL_CLASS = {
+    base: 'bg-card',
+    raised: 'bg-surface-elevated',
+    overlay: 'bg-popover',
+};
+const LEVEL_SHADOW = {
+    base: 'none',
+    raised: 'sm',
+    overlay: 'lg',
+};
+const LEVEL_TINT = {
+    base: 'card',
+    raised: 'surfaceElevated',
+    overlay: 'popover',
+};
+const Surface = React.forwardRef(({ level = 'base', padding = 'default', radius = 'xl', bordered = true, shadow, frosted = false, blurIntensity, blurTintToken, className, style, children, ...props }, ref) => {
+    const recipe = useSurfaceRecipe({ padding, radius, bordered });
+    const depth = useShadowStyle(shadow ?? LEVEL_SHADOW[level]);
+    const frost = useFrostedSurface({
+        frosted,
+        blurIntensity,
+        blurTintToken,
+        defaultTintToken: LEVEL_TINT[level],
+        defaultBlurPreset: 'subtle',
+    });
+    return (_jsxs(View, { ref: ref, className: cn('border-border', LEVEL_CLASS[level], frosted && 'relative overflow-hidden bg-transparent', className), style: [recipe, depth, frost.surfaceStyle, style], ...props, children: [frost.overlay, children] }));
+});
+Surface.displayName = 'Surface';
+export { Surface };

package/dist/components/text/text.d.ts

@@ -4,62 +4,62 @@ import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const textVariants: import("tailwind-variants").TVReturnType<{
     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': "";
     };
 }, undefined, "text-foreground", {
     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': "";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     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': "";
     };
 }, undefined>>;
 export interface TextProps extends RNTextProps, VariantProps<typeof textVariants> {

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/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';

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/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';