@thewhileloop/whileui 4.0.0 → 4.1.1

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

@@ -25,6 +25,7 @@ declare const inputVariants: import("tailwind-variants").TVReturnType<{
     };
 }, 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

@@ -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 inputVariants = tv({
     base: 'w-full border-border bg-muted text-foreground',
     variants: {
@@ -22,27 +24,30 @@ const inputVariants = tv({
         variant: 'default',
     },
 });
-const Input = React.forwardRef(({ className, prefix, suffix, inputClassName, variant, editable = true, placeholderTextColor, onFocus, onBlur, ...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();
+    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 = variant === 'plain';
-    return (_jsxs(View, { className: cn('flex-row items-center border-border bg-muted', inputVariants({ variant }), focused && !plain && focusFieldWrapper, className), style: [
+    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: plain ? 0 : visual.borderWidthControl,
                 borderRadius: visual.radiusLg,
                 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 web:outline-none', 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, onFocus: (event) => {
+                }, editable: effectiveEditable, "aria-invalid": ariaInvalid ?? field.invalid, placeholderTextColor: placeholderTextColor ?? colors.placeholder, onFocus: (event) => {
                     setFocused(true);
                     onFocus?.(event);
                 }, onBlur: (event) => {

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

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type StyleProp, type TextStyle, type ViewProps } from 'react-native';
+export interface MarkdownProps extends Omit<ViewProps, 'children'> {
+    children: string;
+    onLinkPress?: (url: string) => void;
+    codeActions?: (code: string, language: string | undefined) => React.ReactNode;
+    textStyle?: StyleProp<TextStyle>;
+    selectable?: boolean;
+}
+declare function Markdown({ children, onLinkPress, codeActions, textStyle, selectable, className, ...props }: MarkdownProps): React.JSX.Element;
+declare namespace Markdown {
+    var displayName: string;
+}
+export { Markdown };

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({
@@ -51,28 +59,40 @@ const SelectContent = React.forwardRef(({ className, children, portalHost, posit
     });
     const visual = useVisualTokens();
     const colors = useThemeColors();
-    return (_jsx(SelectPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(SelectPrimitive.Overlay, { style: Platform.select({ native: StyleSheet.absoluteFill }), children: _jsxs(SelectPrimitive.Content, { ref: ref, position: position, insets: insets, style: StyleSheet.flatten([
-                        {
-                            borderRadius: surfaceRadius(visual, 'lg'),
-                            borderWidth: visual.borderWidthHairline,
-                        },
-                        shadowStyle(visual, colors, 'md'),
-                        frostedSurface.surfaceStyle,
-                        styleProp,
-                    ]), className: cn('border-border relative z-50 min-w-32 overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', Platform.select({
-                        web: cn('max-h-96 overflow-y-auto overflow-x-hidden', props.side === 'bottom' && 'translate-y-1', props.side === 'top' && '-translate-y-1'),
+    // Radix applies its collision variables to the listbox wrapper, while
+    // @rn-primitives renders our visual surface one level inside it. Keep the sizing
+    // on that surface as inline web CSS: the Viewport's own `width: 100%` otherwise
+    // wins class merging and lets the longest option size the outer popper.
+    const webSizingStyle = Platform.OS === 'web' && position === 'popper'
+        ? {
+            boxSizing: 'border-box',
+            width: 'var(--radix-select-trigger-width)',
+            maxWidth: 'var(--radix-select-content-available-width)',
+            maxHeight: 'var(--radix-select-content-available-height)',
+        }
+        : undefined;
+    return (_jsx(SelectPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(SelectPrimitive.Overlay, { style: Platform.select({ native: StyleSheet.absoluteFill }), children: _jsxs(SelectPrimitive.Content, { ref: ref, position: position, insets: insets, style: {
+                        ...webSizingStyle,
+                        ...StyleSheet.flatten([
+                            {
+                                borderRadius: surfaceRadius(visual, 'lg'),
+                                borderWidth: visual.borderWidthHairline,
+                            },
+                            shadowStyle(visual, colors, 'md'),
+                            frostedSurface.surfaceStyle,
+                            styleProp,
+                        ]),
+                    }, className: cn('border-border relative z-50 overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', Platform.select({
+                        web: cn('overflow-y-auto overflow-x-hidden', props.side === 'bottom' && 'translate-y-1', props.side === 'top' && '-translate-y-1'),
                         native: 'p-1',
-                    }), className), ...props, children: [frostedSurface.overlay, _jsx(SelectPrimitive.Viewport, { className: cn('p-1', position === 'popper' &&
-                                Platform.select({
-                                    web: 'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)',
-                                })), children: children })] }) }) }) }));
+                    }), className), ...props, children: [frostedSurface.overlay, _jsx(SelectPrimitive.Viewport, { className: "p-1", children: children })] }) }) }) }));
 });
 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 +102,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: "min-w-0 flex-1 text-foreground web:whitespace-normal web:break-words", 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> {