@thewhileloop/whileui 1.2.3 → 2.0.0

package/dist/components/segmented-control/segmented-control.d.ts

@@ -13,7 +13,7 @@ declare const segmentedControlVariants: import("tailwind-variants").TVReturnType
         default: string;
         compact: string;
     };
-}, undefined, "w-full flex-row items-center rounded-lg bg-muted p-1", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "w-full flex-row items-center", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         pill: string;
@@ -65,7 +65,7 @@ declare const segmentedControlVariants: import("tailwind-variants").TVReturnType
         default: string;
         compact: string;
     };
-}, undefined, "w-full flex-row items-center rounded-lg bg-muted p-1", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "w-full flex-row items-center", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         pill: string;
@@ -113,7 +113,7 @@ declare const segmentedControlItemVariants: import("tailwind-variants").TVReturn
         true: string;
         false: string;
     };
-}, undefined, "min-h-10 min-w-0 flex-row items-center justify-center px-3", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "min-w-0 flex-row items-center justify-center", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         pill: string;
@@ -197,7 +197,7 @@ declare const segmentedControlItemVariants: import("tailwind-variants").TVReturn
         true: string;
         false: string;
     };
-}, undefined, "min-h-10 min-w-0 flex-row items-center justify-center px-3", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "min-w-0 flex-row items-center justify-center", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         pill: string;
@@ -322,17 +322,16 @@ export interface SegmentedControlItemProps extends Omit<PressableProps, 'childre
 export interface SegmentedControlItemTextProps extends TextProps {
     className?: string;
 }
-declare function SegmentedControl({ value: controlledValue, defaultValue, onValueChange, variant, wrap, size, disabled, className, children, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentedControl({ value: controlledValue, defaultValue, onValueChange, variant, wrap, size, disabled, className, children, style: styleProp, ...props }: SegmentedControlProps): React.JSX.Element;
 declare namespace SegmentedControl {
     var displayName: string;
 }
-declare function SegmentedControlItem({ value: itemValue, className, children, disabled: itemDisabled, style: styleProp, ...props }: SegmentedControlItemProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentedControlItem({ value: itemValue, className, children, disabled: itemDisabled, style: styleProp, ...props }: SegmentedControlItemProps): React.JSX.Element;
 declare namespace SegmentedControlItem {
     var displayName: string;
 }
-declare function SegmentedControlItemText({ className, ...props }: SegmentedControlItemTextProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentedControlItemText({ className, style, ...props }: SegmentedControlItemTextProps): React.JSX.Element;
 declare namespace SegmentedControlItemText {
     var displayName: string;
 }
 export { SegmentedControl, SegmentedControlItem, SegmentedControlItemText, segmentedControlVariants, segmentedControlItemVariants, segmentedControlItemTextVariants, };
-//# sourceMappingURL=segmented-control.d.ts.map

package/dist/components/segmented-control/segmented-control.js

@@ -1,16 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { createContext, useContext, useMemo, useState } from 'react';
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { Pressable, Text, View, } from 'react-native';
 import { cn } from '../../lib/cn';
+import { focusRingInset } from '../../lib/focus-ring';
 import { tv } from '../../lib/tv';
 import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
+import { useThemeColors } from '../../lib/theme-colors';
 import { useVisualTokens } from '../../lib/visual-tokens';
+import { typographyStyle } from '../../lib/recipes';
 const segmentedControlVariants = tv({
-    base: 'w-full flex-row items-center rounded-lg bg-muted p-1',
+    base: 'w-full flex-row items-center',
     variants: {
         variant: {
-            default: 'rounded-lg',
-            pill: 'rounded-full',
+            default: '',
+            pill: '',
         },
         wrap: {
             true: 'flex-wrap justify-center gap-1',
@@ -28,19 +31,19 @@ const segmentedControlVariants = tv({
     },
 });
 const segmentedControlItemVariants = tv({
-    base: 'min-h-10 min-w-0 flex-row items-center justify-center px-3',
+    base: 'min-w-0 flex-row items-center justify-center',
     variants: {
         variant: {
-            default: 'rounded-md',
-            pill: 'rounded-full',
+            default: '',
+            pill: '',
         },
         selected: {
-            true: 'bg-background shadow-sm',
-            false: 'bg-transparent',
+            true: '',
+            false: '',
         },
         size: {
-            default: 'py-2',
-            compact: 'min-h-9 py-1.5',
+            default: '',
+            compact: '',
         },
         disabled: {
             true: '',
@@ -67,8 +70,8 @@ const segmentedControlItemTextVariants = tv({
             false: 'text-muted-foreground',
         },
         size: {
-            default: 'text-sm',
-            compact: 'text-xs',
+            default: '',
+            compact: '',
         },
     },
     defaultVariants: {
@@ -76,6 +79,26 @@ const segmentedControlItemTextVariants = tv({
         size: 'default',
     },
 });
+function getSegmentedContainerStyle(visual, colors, variant) {
+    const inset = Math.max(4, Math.round(visual.controlPaddingYSm * 0.5));
+    return {
+        borderRadius: variant === 'pill' ? 999 : visual.radiusXl,
+        backgroundColor: colors.muted,
+        padding: inset,
+    };
+}
+function getSegmentedItemStyle(visual, colors, size, variant, selected) {
+    const compact = size === 'compact';
+    return {
+        minHeight: compact ? visual.controlHeightSm : visual.controlHeightDefault,
+        borderRadius: variant === 'pill' ? 999 : visual.radiusLg,
+        paddingHorizontal: compact ? visual.controlPaddingXSm : visual.controlPaddingXDefault,
+        paddingVertical: compact ? visual.controlPaddingYSm : visual.controlPaddingYDefault,
+        borderWidth: selected ? visual.borderWidthHairline : 0,
+        borderColor: selected ? colors.surfaceBorder : 'transparent',
+        backgroundColor: selected ? colors.surfaceElevated : 'transparent',
+    };
+}
 const SegmentedControlContext = createContext({
     value: '',
     onValueChange: () => { },
@@ -88,20 +111,22 @@ const SegmentedControlItemContext = createContext({
     selected: false,
     size: 'default',
 });
-function SegmentedControl({ value: controlledValue, defaultValue = '', onValueChange, variant = 'default', wrap = 'auto', size = 'default', disabled = false, className, children, ...props }) {
+function SegmentedControl({ value: controlledValue, defaultValue = '', onValueChange, variant = 'default', wrap = 'auto', size = 'default', disabled = false, className, children, style: styleProp, ...props }) {
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
     const [internalValue, setInternalValue] = useState(defaultValue);
     const value = controlledValue ?? internalValue;
     const itemCount = useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child)).length, [children]);
     const shouldWrap = wrap === 'auto' ? itemCount > 3 : wrap;
-    const handleValueChange = (nextValue) => {
+    const handleValueChange = useCallback((nextValue) => {
         if (disabled || value === nextValue) {
             return;
         }
         setInternalValue(nextValue);
         onValueChange?.(nextValue);
-    };
-    const contextValue = useMemo(() => ({ value, onValueChange: handleValueChange, variant, size, wrap: shouldWrap, disabled }), [value, variant, size, shouldWrap, disabled]);
-    return (_jsx(SegmentedControlContext.Provider, { value: contextValue, children: _jsx(View, { className: cn(segmentedControlVariants({ variant, wrap: shouldWrap, size }), className), accessibilityRole: "radiogroup", ...props, children: children }) }));
+    }, [disabled, onValueChange, value]);
+    const contextValue = useMemo(() => ({ value, onValueChange: handleValueChange, variant, size, wrap: shouldWrap, disabled }), [disabled, handleValueChange, shouldWrap, size, value, variant]);
+    return (_jsx(SegmentedControlContext.Provider, { value: contextValue, children: _jsx(View, { className: cn(segmentedControlVariants({ variant, wrap: shouldWrap, size }), className), style: [getSegmentedContainerStyle(visual, colors, variant), styleProp], accessibilityRole: "radiogroup", ...props, children: children }) }));
 }
 function SegmentedControlItem({ value: itemValue, className, children, disabled: itemDisabled, style: styleProp, ...props }) {
     const { value, onValueChange, variant, size, wrap, disabled } = useContext(SegmentedControlContext);
@@ -109,6 +134,7 @@ function SegmentedControlItem({ value: itemValue, className, children, disabled:
     const finalDisabled = disabled || Boolean(itemDisabled);
     const interaction = useInteractionTokens();
     const visual = useVisualTokens();
+    const colors = useThemeColors();
     const interactiveStyle = withInteractivePressableStyle(styleProp, interaction, {
         disabled: finalDisabled,
         pressedVariant: 'default',
@@ -116,23 +142,30 @@ function SegmentedControlItem({ value: itemValue, className, children, disabled:
     const wrapBasisStyle = wrap
         ? { flexBasis: `${visual.segmentedWrapBasisRatio * 100}%` }
         : undefined;
-    return (_jsx(SegmentedControlItemContext.Provider, { value: { selected, size }, children: _jsx(Pressable, { className: cn(segmentedControlItemVariants({
+    const tokenStyle = getSegmentedItemStyle(visual, colors, size, variant, selected);
+    const contextValue = useMemo(() => ({ selected, size }), [selected, size]);
+    return (_jsx(SegmentedControlItemContext.Provider, { value: contextValue, children: _jsx(Pressable, { className: cn(segmentedControlItemVariants({
                 variant,
                 selected,
                 size,
                 disabled: finalDisabled,
                 wrap,
-            }), className), onPress: () => onValueChange(itemValue), accessibilityRole: "radio", accessibilityState: { selected, disabled: finalDisabled }, disabled: finalDisabled, style: (state) => {
+            }), focusRingInset, className), onPress: () => onValueChange(itemValue), accessibilityRole: "radio", 
+            // A radio is checked, not selected. `selected` maps to `aria-selected`, which is
+            // not a valid attribute on `role="radio"` — assistive technology could not tell
+            // which segment was active. `checked` also carries the state correctly on native.
+            accessibilityState: { checked: selected, disabled: finalDisabled }, "aria-checked": selected, disabled: finalDisabled, style: (state) => {
                 const baseStyle = typeof interactiveStyle === 'function' ? interactiveStyle(state) : interactiveStyle;
-                return [baseStyle, wrapBasisStyle ?? null];
+                return [baseStyle, tokenStyle, wrapBasisStyle ?? null];
             }, hitSlop: 4, ...props, children: typeof children === 'string' ? (_jsx(SegmentedControlItemText, { children: children })) : (children) }) }));
 }
-function SegmentedControlItemText({ className, ...props }) {
+function SegmentedControlItemText({ className, style, ...props }) {
     const { selected, size } = useContext(SegmentedControlItemContext);
-    return (_jsx(Text, { className: cn(segmentedControlItemTextVariants({ selected, size }), className), numberOfLines: 1, ...props }));
+    const visual = useVisualTokens();
+    const typography = typographyStyle(visual, size === 'compact' ? 'caption' : 'label');
+    return (_jsx(Text, { className: cn(segmentedControlItemTextVariants({ selected, size }), className), style: [typography, style], numberOfLines: 1, ...props }));
 }
 SegmentedControl.displayName = 'SegmentedControl';
 SegmentedControlItem.displayName = 'SegmentedControlItem';
 SegmentedControlItemText.displayName = 'SegmentedControlItemText';
 export { SegmentedControl, SegmentedControlItem, SegmentedControlItemText, segmentedControlVariants, segmentedControlItemVariants, segmentedControlItemTextVariants, };
-//# sourceMappingURL=segmented-control.js.map

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

@@ -1,2 +1 @@
 export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectItemIcon, SelectGroup, SelectLabel, SelectSeparator, NativeSelectScrollView, type SelectOption, type SelectTriggerRef, type SelectProps, type SelectTriggerProps, type SelectValueProps, type SelectContentProps, type SelectItemProps, type SelectItemIconProps, type SelectGroupProps, type SelectLabelProps, type SelectSeparatorProps, } from './select';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/select/index.js

@@ -1,2 +1 @@
 export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectItemIcon, SelectGroup, SelectLabel, SelectSeparator, NativeSelectScrollView, } from './select';
-//# sourceMappingURL=index.js.map

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ScrollView, View } from 'react-native';
+import { ScrollView, View, type StyleProp, type ViewStyle } from 'react-native';
 import * as SelectPrimitive from '@rn-primitives/select';
 import { type FrostedSurfaceProps } from '../../lib/frosted-surface';
 export type SelectOption = SelectPrimitive.Option;
@@ -12,8 +12,15 @@ export interface SelectProps {
     disabled?: boolean;
     children: React.ReactNode;
 }
-export interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+export interface SelectTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'style'> {
     className?: string;
+    /**
+     * 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
+     * every style is lost. Rejecting it at compile time is the honest contract, and it is
+     * the same on both platforms so the API does not diverge.
+     */
+    style?: StyleProp<ViewStyle>;
 }
 export interface SelectValueProps {
     className?: string;
@@ -29,9 +36,11 @@ export interface SelectContentProps extends React.ComponentPropsWithoutRef<typeo
         right?: number;
     };
 }
-export interface SelectItemProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
+export interface SelectItemProps extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>, 'style'> {
     className?: string;
     children?: React.ReactNode;
+    /** Object form only — see `SelectTriggerProps.style`. */
+    style?: StyleProp<ViewStyle>;
 }
 export interface SelectItemIconProps {
     className?: string;
@@ -62,10 +71,10 @@ declare const SelectGroup: React.ForwardRefExoticComponent<import("react-native"
     asChild?: boolean;
 } & React.RefAttributes<View>>;
 declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<SelectPrimitive.TriggerRef>>;
-declare function SelectValue({ className, placeholder, ...props }: SelectValueProps & React.RefAttributes<SelectPrimitive.ValueRef>): import("react/jsx-runtime").JSX.Element;
+declare function SelectValue({ className, placeholder, ...props }: SelectValueProps & React.RefAttributes<SelectPrimitive.ValueRef>): React.JSX.Element;
 declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<View>>;
 declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<View>>;
-declare function SelectItemIcon({ className, children }: SelectItemIconProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectItemIcon({ className, children }: SelectItemIconProps): React.JSX.Element;
 declare namespace SelectItemIcon {
     var displayName: string;
 }
@@ -75,6 +84,5 @@ declare const SelectSeparator: React.ForwardRefExoticComponent<SelectSeparatorPr
  * @platform Native only
  * Returns the children on web
  */
-declare function NativeSelectScrollView({ className, children, ...props }: React.ComponentProps<typeof ScrollView>): import("react/jsx-runtime").JSX.Element;
+declare function NativeSelectScrollView({ className, children, ...props }: React.ComponentProps<typeof ScrollView>): React.JSX.Element;
 export { NativeSelectScrollView, Select, SelectContent, SelectGroup, SelectItem, SelectItemIcon, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, };
-//# sourceMappingURL=select.d.ts.map

package/dist/components/select/select.js

@@ -1,27 +1,50 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { Platform, ScrollView, StyleSheet, View } from 'react-native';
+import { Platform, ScrollView, StyleSheet, View, } from 'react-native';
 import * as SelectPrimitive from '@rn-primitives/select';
 import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
+import { Text } from '../text';
 import { cn } from '../../lib/cn';
+import { focusRing } from '../../lib/focus-ring';
 import { useInteractionTokens } from '../../lib/interaction-tokens';
 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';
 // iOS needs FullWindowOverlay to render above everything
 const FullWindowOverlay = Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
-// ─── Components ──────────────────────────────────────────────
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectTrigger = React.forwardRef(({ className, children, style: styleProp, ...props }, ref) => {
     const interaction = useInteractionTokens();
-    return (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('border-border bg-muted flex min-h-12 w-full flex-row items-center justify-between gap-2 rounded-lg border px-4 shadow-sm active:bg-state-pressed', props.disabled && '', className), style: [
+    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), 
+        // Pass an array unless the caller actually gave a callback. On web this primitive
+        // is wrapped in a Slot that merges `style` by object spread, which turns a
+        // function into `{}` and silently drops every style — the trigger rendered 24px
+        // tall with no padding, border or radius. A callback is still honoured on native,
+        // where dropping it was the original bug.
+        // 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
+        // nothing at all on web because of this.
+        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" })] }));
+        ]), ...props, children: [_jsx(_Fragment, { children: children }), _jsx(View, { className: "border-muted-foreground h-2 w-2 rotate-45 border-b-2 border-r-2" })] }));
 });
 SelectTrigger.displayName = 'SelectTrigger';
 function SelectValue({ className, placeholder = 'Select...', ...props }) {
     const { value } = SelectPrimitive.useRootContext();
-    return (_jsx(SelectPrimitive.Value, { className: cn('text-foreground text-base', !value && 'text-muted-foreground', className), placeholder: placeholder, ...props }));
+    const visual = useVisualTokens();
+    // The colour is set on a wrapper and inherited, rather than on the primitive itself.
+    // Its web build wraps a Radix span in a `Slot.Text` that drops React Native props, so
+    // neither `className` nor `style` reached the DOM and the text fell back to the
+    // 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, ...props }) }));
 }
 const SelectContent = React.forwardRef(({ className, children, portalHost, position = 'popper', insets, style: styleProp, frosted = false, blurIntensity, blurTintToken, ...props }, ref) => {
     const frostedSurface = useFrostedSurface({
@@ -31,7 +54,17 @@ const SelectContent = React.forwardRef(({ className, children, portalHost, posit
         defaultTintToken: 'popover',
         defaultBlurPreset: 'subtle',
     });
-    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([styleProp, frostedSurface.surfaceStyle]), className: cn('border-border relative z-50 min-w-32 rounded-xl border shadow-lg overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', Platform.select({
+    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'),
                         native: 'p-1',
                     }), className), ...props, children: [frostedSurface.overlay, _jsx(SelectPrimitive.Viewport, { className: cn('p-1', position === 'popper' &&
@@ -42,19 +75,29 @@ const SelectContent = React.forwardRef(({ className, children, portalHost, posit
 SelectContent.displayName = 'SelectContent';
 const SelectItem = React.forwardRef(({ className, children, style: styleProp, ...props }, ref) => {
     const interaction = useInteractionTokens();
-    return (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn('active:bg-accent group relative flex w-full flex-row items-center gap-2 rounded-lg py-3 pl-3 pr-8', Platform.select({
+    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',
-        }), props.disabled && '', className), style: [
+        }), props.disabled && '', className), style: StyleSheet.flatten([
+            {
+                borderRadius: visual.radiusSm,
+                minHeight: visual.touchTargetMinSize,
+                paddingVertical: visual.controlPaddingYSm,
+                paddingLeft: visual.controlPaddingXSm,
+            },
             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 text-base" })] }));
+        ]), ...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') })] }));
 });
 SelectItem.displayName = 'SelectItem';
 function SelectItemIcon({ className, children }) {
     return _jsx(View, { className: cn('items-center justify-center', className), children: children });
 }
 SelectItemIcon.displayName = 'SelectItemIcon';
-const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn('text-muted-foreground px-2 py-2 text-xs', className), ...props })));
+const SelectLabel = React.forwardRef(({ className, style: styleProp, ...props }, ref) => {
+    const visual = useVisualTokens();
+    return (_jsx(SelectPrimitive.Label, { ref: ref, className: cn('text-muted-foreground px-2 py-2', className), style: StyleSheet.flatten([typographyStyle(visual, 'caption'), styleProp]), ...props }));
+});
 SelectLabel.displayName = 'SelectLabel';
 const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn('bg-border -mx-1 my-1 h-px', Platform.select({ web: 'pointer-events-none' }), className), ...props })));
 SelectSeparator.displayName = 'SelectSeparator';
@@ -69,4 +112,3 @@ function NativeSelectScrollView({ className, children, ...props }) {
     return (_jsx(ScrollView, { className: cn('max-h-52', className), ...props, children: children }));
 }
 export { NativeSelectScrollView, Select, SelectContent, SelectGroup, SelectItem, SelectItemIcon, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, };
-//# sourceMappingURL=select.js.map

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

@@ -1,2 +1 @@
 export { Separator, type SeparatorProps } from './separator';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/separator/index.js

@@ -1,2 +1 @@
 export { Separator } from './separator';
-//# sourceMappingURL=index.js.map

package/dist/components/separator/separator.d.ts

@@ -5,4 +5,3 @@ export interface SeparatorProps extends ViewProps {
 }
 declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<View>>;
 export { Separator };
-//# sourceMappingURL=separator.d.ts.map

package/dist/components/separator/separator.js

@@ -7,4 +7,3 @@ const Separator = React.forwardRef(({ className, orientation = 'horizontal', ...
 });
 Separator.displayName = 'Separator';
 export { Separator };
-//# sourceMappingURL=separator.js.map

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

@@ -1,2 +1 @@
 export { Skeleton, skeletonVariants, type SkeletonProps } from './skeleton';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/skeleton/index.js

@@ -1,2 +1 @@
 export { Skeleton, skeletonVariants } from './skeleton';
-//# sourceMappingURL=index.js.map

package/dist/components/skeleton/skeleton.d.ts

@@ -5,7 +5,7 @@ declare const skeletonVariants: import("tailwind-variants").TVReturnType<{
         pulse: string;
         shimmer: string;
     };
-}, undefined, "rounded-md bg-muted", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "bg-muted", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         pulse: string;
         shimmer: string;
@@ -25,7 +25,7 @@ declare const skeletonVariants: import("tailwind-variants").TVReturnType<{
         pulse: string;
         shimmer: string;
     };
-}, undefined, "rounded-md bg-muted", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "bg-muted", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         pulse: string;
         shimmer: string;
@@ -39,9 +39,8 @@ declare const skeletonVariants: import("tailwind-variants").TVReturnType<{
 export interface SkeletonProps extends ViewProps, VariantProps<typeof skeletonVariants> {
     className?: string;
 }
-declare function Skeleton({ className, variant, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare function Skeleton({ className, variant, style, ...props }: SkeletonProps): import("react").JSX.Element;
 declare namespace Skeleton {
     var displayName: string;
 }
 export { Skeleton, skeletonVariants };
-//# sourceMappingURL=skeleton.d.ts.map

package/dist/components/skeleton/skeleton.js

@@ -6,9 +6,8 @@ import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useVisualTokens } from '../../lib/visual-tokens';
-// ─── Variants ─────────────────────────────────────────────────
 const skeletonVariants = tv({
-    base: 'rounded-md bg-muted',
+    base: 'bg-muted',
     variants: {
         variant: {
             pulse: '',
@@ -17,11 +16,13 @@ const skeletonVariants = tv({
     },
     defaultVariants: { variant: 'pulse' },
 });
-// ─── Component ───────────────────────────────────────────────
-function Skeleton({ className, variant = 'pulse', ...props }) {
+function Skeleton({ className, variant = 'pulse', style, ...props }) {
     const progress = useSharedValue(0);
     const colors = useThemeColors();
     const visual = useVisualTokens();
+    // Circular skeletons keep their class-driven radius; everything else gets the token radius.
+    const isCircular = className?.includes('rounded-full') ?? false;
+    const radiusStyle = isCircular ? null : { borderRadius: visual.radiusMd };
     useEffect(() => {
         progress.value = withRepeat(withTiming(1, { duration: variant === 'shimmer' ? 1400 : 1500, easing: Easing.linear }), -1, false);
     }, [progress, variant]);
@@ -37,7 +38,7 @@ function Skeleton({ className, variant = 'pulse', ...props }) {
         };
     });
     if (variant === 'shimmer') {
-        return (_jsx(View, { className: cn(skeletonVariants({ variant }), 'overflow-hidden', className), ...props, children: _jsx(Animated.View, { style: [
+        return (_jsx(View, { className: cn(skeletonVariants({ variant }), 'overflow-hidden', className), style: [radiusStyle, style], ...props, children: _jsx(Animated.View, { style: [
                     shimmerStyle,
                     {
                         position: 'absolute',
@@ -49,9 +50,7 @@ function Skeleton({ className, variant = 'pulse', ...props }) {
                     },
                 ] }) }));
     }
-    return (_jsx(Animated.View, { style: pulseStyle, className: cn(skeletonVariants({ variant }), className), ...props }));
+    return (_jsx(Animated.View, { style: [pulseStyle, radiusStyle, style], className: cn(skeletonVariants({ variant }), className), ...props }));
 }
 Skeleton.displayName = 'Skeleton';
-// ─── Exports ─────────────────────────────────────────────────
 export { Skeleton, skeletonVariants };
-//# sourceMappingURL=skeleton.js.map

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

@@ -1,2 +1 @@
 export { Spinner, spinnerVariants, type SpinnerProps } from './spinner';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/spinner/index.js

@@ -1,2 +1 @@
 export { Spinner, spinnerVariants } from './spinner';
-//# sourceMappingURL=index.js.map

package/dist/components/spinner/spinner.d.ts

@@ -46,9 +46,8 @@ declare const spinnerVariants: import("tailwind-variants").TVReturnType<{
 export interface SpinnerProps extends Omit<ActivityIndicatorProps, 'size'>, VariantProps<typeof spinnerVariants> {
     className?: string;
 }
-declare function Spinner({ className, size, color, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+declare function Spinner({ className, size, color, ...props }: SpinnerProps): import("react").JSX.Element;
 declare namespace Spinner {
     var displayName: string;
 }
 export { Spinner, spinnerVariants };
-//# sourceMappingURL=spinner.d.ts.map

package/dist/components/spinner/spinner.js

@@ -24,8 +24,10 @@ const sizeMap = {
 function Spinner({ className, size, color, ...props }) {
     const colors = useThemeColors();
     const activityIndicatorSize = size && size in sizeMap ? sizeMap[size] : 'small';
-    return (_jsx(ActivityIndicator, { size: activityIndicatorSize, color: color ?? colors.foreground, className: cn(spinnerVariants({ size }), className), ...props }));
+    return (_jsx(ActivityIndicator, { size: activityIndicatorSize, color: color ?? colors.foreground, className: cn(spinnerVariants({ size }), className), 
+        // `ActivityIndicator` renders `role="progressbar"`, and a progressbar with no name
+        // fails WCAG 4.1.2. Override with what is loading when you know it.
+        accessibilityLabel: "Loading", ...props }));
 }
 Spinner.displayName = 'Spinner';
 export { Spinner, spinnerVariants };
-//# sourceMappingURL=spinner.js.map

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

@@ -1,2 +1 @@
 export { Stack, stackVariants, type StackProps } from './stack';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/stack/index.js

@@ -1,2 +1 @@
 export { Stack, stackVariants } from './stack';
-//# sourceMappingURL=index.js.map

package/dist/components/stack/stack.d.ts

@@ -182,4 +182,3 @@ export interface StackProps extends Omit<ViewProps, 'className'>, VariantProps<t
 }
 declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<View>>;
 export { Stack, stackVariants };
-//# sourceMappingURL=stack.d.ts.map

package/dist/components/stack/stack.js

@@ -42,4 +42,3 @@ const Stack = React.forwardRef(({ className, gap, align, justify, ...props }, re
 });
 Stack.displayName = 'Stack';
 export { Stack, stackVariants };
-//# sourceMappingURL=stack.js.map

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

@@ -1,2 +1 @@
 export { Switch, type SwitchProps } from './switch';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/switch/index.js

@@ -1,2 +1 @@
 export { Switch } from './switch';
-//# sourceMappingURL=index.js.map

package/dist/components/switch/switch.d.ts

@@ -6,9 +6,8 @@ export interface SwitchProps extends Omit<ViewProps, 'children'> {
     disabled?: boolean;
     className?: string;
 }
-declare function Switch({ checked: controlledChecked, defaultChecked, onCheckedChange, disabled, className, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+declare function Switch({ checked: controlledChecked, defaultChecked, onCheckedChange, disabled, className, ...props }: SwitchProps): import("react").JSX.Element;
 declare namespace Switch {
     var displayName: string;
 }
 export { Switch };
-//# sourceMappingURL=switch.d.ts.map