@thewhileloop/whileui 1.2.3 → 2.0.0

package/dist/components/switch/switch.js

@@ -2,15 +2,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Pressable, View } from 'react-native';
 import { cn } from '../../lib/cn';
+import { focusRing } from '../../lib/focus-ring';
 import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
+import { useVisualTokens } from '../../lib/visual-tokens';
 function Switch({ checked: controlledChecked, defaultChecked = false, onCheckedChange, disabled = false, className, ...props }) {
     const [internalChecked, setInternalChecked] = useState(defaultChecked);
     const isChecked = controlledChecked ?? internalChecked;
     const interaction = useInteractionTokens();
+    const visual = useVisualTokens();
     const interactiveStyle = withInteractivePressableStyle(undefined, interaction, {
         disabled,
         pressedVariant: 'default',
     });
+    const trackHeight = Math.max(24, Math.round(visual.controlHeightSm * 0.9));
+    const trackWidth = Math.round(trackHeight * 1.45);
+    const inset = Math.max(2, Math.round(trackHeight * 0.08));
+    const thumbSize = trackHeight - inset * 2 - 2;
+    const thumbOffset = Math.max(0, trackWidth - thumbSize - inset * 2 - 2);
     const handleToggle = () => {
         if (disabled)
             return;
@@ -18,8 +26,19 @@ function Switch({ checked: controlledChecked, defaultChecked = false, onCheckedC
         setInternalChecked(newValue);
         onCheckedChange?.(newValue);
     };
-    return (_jsx(Pressable, { onPress: handleToggle, disabled: disabled, style: interactiveStyle, hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }, accessibilityRole: "switch", accessibilityState: { checked: isChecked, disabled }, children: _jsx(View, { className: cn('h-9 w-12 flex-row items-center justify-start rounded-full p-0.5 border-2', isChecked ? 'border-primary bg-primary' : 'border-input bg-muted', className), ...props, children: _jsx(View, { className: cn('h-7 w-7 rounded-full border-2 border-border bg-background shadow-sm', isChecked ? 'ml-3' : 'ml-0') }) }) }));
+    return (_jsx(Pressable, { onPress: handleToggle, disabled: disabled, style: interactiveStyle, hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }, accessibilityRole: "switch", accessibilityState: { checked: isChecked, disabled }, "aria-checked": isChecked, children: _jsx(View, { className: cn('flex-row items-center justify-start', isChecked ? 'border-primary bg-primary' : 'border-input bg-muted', focusRing, className), style: {
+                width: trackWidth,
+                height: trackHeight,
+                borderWidth: visual.borderWidthEmphasis,
+                borderRadius: trackHeight / 2,
+                padding: inset,
+            }, ...props, children: _jsx(View, { className: "border-border bg-background shadow-sm", style: {
+                    width: thumbSize,
+                    height: thumbSize,
+                    borderWidth: visual.borderWidthEmphasis,
+                    borderRadius: thumbSize / 2,
+                    transform: [{ translateX: isChecked ? thumbOffset : 0 }],
+                } }) }) }));
 }
 Switch.displayName = 'Switch';
 export { Switch };
-//# sourceMappingURL=switch.js.map

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

@@ -1,2 +1 @@
 export { Tabs, TabsList, TabsTrigger, TabsContent, tabsTriggerVariants, type TabsProps, type TabsListProps, type TabsTriggerProps, type TabsContentProps, } from './tabs';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/tabs/index.js

@@ -1,2 +1 @@
 export { Tabs, TabsList, TabsTrigger, TabsContent, tabsTriggerVariants, } from './tabs';
-//# sourceMappingURL=index.js.map

package/dist/components/tabs/tabs.d.ts

@@ -5,7 +5,7 @@ declare const tabsTriggerVariants: import("tailwind-variants").TVReturnType<{
         active: string;
         inactive: string;
     };
-}, undefined, "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "inline-flex items-center justify-center whitespace-nowrap font-medium", import("tailwind-variants/dist/config.js").TVConfig<{
     state: {
         active: string;
         inactive: string;
@@ -25,7 +25,7 @@ declare const tabsTriggerVariants: import("tailwind-variants").TVReturnType<{
         active: string;
         inactive: string;
     };
-}, undefined, "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "inline-flex items-center justify-center whitespace-nowrap font-medium", import("tailwind-variants/dist/config.js").TVConfig<{
     state: {
         active: string;
         inactive: string;
@@ -54,21 +54,20 @@ export interface TabsContentProps extends ViewProps {
     value: string;
     className?: string;
 }
-declare function Tabs({ defaultValue, value: controlledValue, onValueChange, className, children, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+declare function Tabs({ defaultValue, value: controlledValue, onValueChange, className, children, ...props }: TabsProps): import("react").JSX.Element;
 declare namespace Tabs {
     var displayName: string;
 }
-declare function TabsList({ className, ...props }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsList({ className, style, ...props }: TabsListProps): import("react").JSX.Element;
 declare namespace TabsList {
     var displayName: string;
 }
-declare function TabsTrigger({ value: tabValue, children, className, disabled, style: styleProp, ...props }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsTrigger({ value: tabValue, children, className, disabled, style: styleProp, ...props }: TabsTriggerProps): import("react").JSX.Element;
 declare namespace TabsTrigger {
     var displayName: string;
 }
-declare function TabsContent({ value: tabValue, className, children, ...props }: TabsContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare function TabsContent({ value: tabValue, className, children, ...props }: TabsContentProps): import("react").JSX.Element | null;
 declare namespace TabsContent {
     var displayName: string;
 }
 export { Tabs, TabsList, TabsTrigger, TabsContent, tabsTriggerVariants };
-//# sourceMappingURL=tabs.d.ts.map

package/dist/components/tabs/tabs.js

@@ -1,19 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useState } from 'react';
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { View, Pressable } 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 TabsContext = createContext({
     value: '',
     onValueChange: () => { },
 });
-// ─── Variants ────────────────────────────────────────────────
 const tabsTriggerVariants = tv({
-    base: 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium',
+    base: 'inline-flex items-center justify-center whitespace-nowrap font-medium',
     variants: {
         state: {
-            active: 'bg-background text-foreground shadow',
+            active: 'text-foreground',
             inactive: 'text-muted-foreground',
         },
     },
@@ -21,28 +24,56 @@ const tabsTriggerVariants = tv({
         state: 'inactive',
     },
 });
-// ─── Components ──────────────────────────────────────────────
+function getTabsListStyle(visual, colors) {
+    const inset = Math.max(4, Math.round(visual.controlPaddingYSm * 0.5));
+    return {
+        borderRadius: visual.radiusXl,
+        backgroundColor: colors.muted,
+        padding: inset,
+    };
+}
+function getTabsTriggerStyle(visual, colors, active) {
+    return {
+        ...typographyStyle(visual, 'label'),
+        minHeight: visual.controlHeightDefault,
+        borderRadius: visual.radiusLg,
+        paddingHorizontal: visual.controlPaddingXDefault,
+        paddingVertical: visual.controlPaddingYDefault,
+        borderWidth: active ? visual.borderWidthHairline : 0,
+        borderColor: active ? colors.surfaceBorder : 'transparent',
+        backgroundColor: active ? colors.surfaceElevated : 'transparent',
+    };
+}
 function Tabs({ defaultValue, value: controlledValue, onValueChange, className, children, ...props }) {
     const [internalValue, setInternalValue] = useState(defaultValue);
     const value = controlledValue ?? internalValue;
-    const handleValueChange = (newValue) => {
+    const handleValueChange = useCallback((newValue) => {
         setInternalValue(newValue);
         onValueChange?.(newValue);
-    };
-    return (_jsx(TabsContext.Provider, { value: { value, onValueChange: handleValueChange }, children: _jsx(View, { className: cn('w-full', className), ...props, children: children }) }));
+    }, [onValueChange]);
+    const contextValue = useMemo(() => ({ value, onValueChange: handleValueChange }), [handleValueChange, value]);
+    return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsx(View, { className: cn('w-full', className), ...props, children: children }) }));
 }
-function TabsList({ className, ...props }) {
-    return (_jsx(View, { className: cn('flex flex-row items-center justify-center rounded-lg bg-muted p-1', className), ...props }));
+function TabsList({ className, style, ...props }) {
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
+    return (_jsx(View, { accessibilityRole: "tablist", className: cn('flex flex-row items-center justify-center', className), style: [getTabsListStyle(visual, colors), style], ...props }));
 }
 function TabsTrigger({ value: tabValue, children, className, disabled, style: styleProp, ...props }) {
     const { value, onValueChange } = useContext(TabsContext);
     const isActive = value === tabValue;
     const interaction = useInteractionTokens();
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
     const interactiveStyle = withInteractivePressableStyle(styleProp, interaction, {
         disabled: Boolean(disabled),
         pressedVariant: 'default',
     });
-    return (_jsx(Pressable, { className: cn(tabsTriggerVariants({ state: isActive ? 'active' : 'inactive' }), 'flex-1', className), style: interactiveStyle, onPress: () => onValueChange(tabValue), disabled: disabled, ...props, children: children }));
+    const tokenStyle = getTabsTriggerStyle(visual, colors, isActive);
+    return (_jsx(Pressable, { className: cn(tabsTriggerVariants({ state: isActive ? 'active' : 'inactive' }), 'flex-1', focusRingInset, className), style: (state) => {
+            const baseStyle = typeof interactiveStyle === 'function' ? interactiveStyle(state) : interactiveStyle;
+            return [baseStyle, tokenStyle];
+        }, onPress: () => onValueChange(tabValue), accessibilityRole: "tab", accessibilityState: { selected: isActive, disabled: Boolean(disabled) }, "aria-selected": isActive, disabled: disabled, ...props, children: children }));
 }
 function TabsContent({ value: tabValue, className, children, ...props }) {
     const { value } = useContext(TabsContext);
@@ -55,4 +86,3 @@ TabsList.displayName = 'TabsList';
 TabsTrigger.displayName = 'TabsTrigger';
 TabsContent.displayName = 'TabsContent';
 export { Tabs, TabsList, TabsTrigger, TabsContent, tabsTriggerVariants };
-//# sourceMappingURL=tabs.js.map

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

@@ -1,2 +1 @@
 export { Text, textVariants, type TextProps } from './text';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/text/index.js

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

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

@@ -146,4 +146,3 @@ export interface TextProps extends RNTextProps, VariantProps<typeof textVariants
 }
 declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<RNText>>;
 export { Text, textVariants };
-//# sourceMappingURL=text.d.ts.map

package/dist/components/text/text.js

@@ -38,4 +38,3 @@ const Text = React.forwardRef(({ className, variant, size, style, ...props }, re
 });
 Text.displayName = 'Text';
 export { Text, textVariants };
-//# sourceMappingURL=text.js.map

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

@@ -1,2 +1 @@
 export { Textarea, textareaVariants, type TextareaProps } from './textarea';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/textarea/index.js

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

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

@@ -7,7 +7,7 @@ declare const textareaVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
     };
-}, undefined, "w-full rounded-md border border-border bg-muted px-3 py-2 text-sm text-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "w-full border-border bg-muted text-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
     size: {
         default: string;
         sm: string;
@@ -31,7 +31,7 @@ declare const textareaVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
     };
-}, undefined, "w-full rounded-md border border-border bg-muted px-3 py-2 text-sm text-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "w-full border-border bg-muted text-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
     size: {
         default: string;
         sm: string;
@@ -49,4 +49,3 @@ export interface TextareaProps extends Omit<TextInputProps, 'style'>, VariantPro
 }
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<TextInput>>;
 export { Textarea, textareaVariants };
-//# sourceMappingURL=textarea.d.ts.map

package/dist/components/textarea/textarea.js

@@ -2,25 +2,30 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { TextInput } from 'react-native';
 import { cn } from '../../lib/cn';
+import { focusRing } from '../../lib/focus-ring';
 import { tv } from '../../lib/tv';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useInteractionTokens } from '../../lib/interaction-tokens';
 import { useVisualTokens } from '../../lib/visual-tokens';
-// ─── Variants ────────────────────────────────────────────────
+import { typographyStyle } from '../../lib/recipes';
 const textareaVariants = tv({
-    base: 'w-full rounded-md border border-border bg-muted px-3 py-2 text-sm text-foreground',
+    base: 'w-full border-border bg-muted text-foreground',
     variants: {
         size: {
             default: '',
-            sm: 'text-xs',
-            lg: 'text-base',
+            sm: '',
+            lg: '',
         },
     },
     defaultVariants: {
         size: 'default',
     },
 });
-// ─── Component ───────────────────────────────────────────────
+const TEXTAREA_TEXT_ROLE = {
+    default: 'label',
+    sm: 'caption',
+    lg: 'body',
+};
 const Textarea = React.forwardRef(({ className, size = 'default', placeholderTextColor, ...props }, ref) => {
     const colors = useThemeColors();
     const interaction = useInteractionTokens();
@@ -31,12 +36,15 @@ const Textarea = React.forwardRef(({ className, size = 'default', placeholderTex
             ? visual.textareaMinHeightLg
             : visual.textareaMinHeightDefault;
     const style = {
+        ...typographyStyle(visual, TEXTAREA_TEXT_ROLE[size ?? 'default'] ?? 'label'),
         minHeight,
+        borderWidth: visual.borderWidthControl,
+        borderRadius: visual.radiusLg,
+        paddingHorizontal: visual.controlPaddingXDefault,
+        paddingVertical: visual.controlPaddingYDefault,
         ...(props.editable === false ? { opacity: interaction.disabledOpacity } : null),
     };
-    return (_jsx(TextInput, { ref: ref, className: cn(textareaVariants({ size }), 'outline-none', className), style: style, multiline: true, textAlignVertical: "top", placeholderTextColor: placeholderTextColor ?? colors.placeholder, ...props }));
+    return (_jsx(TextInput, { ref: ref, className: cn(textareaVariants({ size }), focusRing, className), style: style, multiline: true, textAlignVertical: "top", placeholderTextColor: placeholderTextColor ?? colors.placeholder, ...props }));
 });
 Textarea.displayName = 'Textarea';
-// ─── Exports ─────────────────────────────────────────────────
 export { Textarea, textareaVariants };
-//# sourceMappingURL=textarea.js.map

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

@@ -1,2 +1 @@
 export { Toast, ToastContainer, ToastProvider, toastVariants, useToast, type ToastContainerProps, type ToastData, type ToastProps, type ToastProviderProps, } from './toast';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/toast/index.js

@@ -1,2 +1 @@
 export { Toast, ToastContainer, ToastProvider, toastVariants, useToast, } from './toast';
-//# sourceMappingURL=index.js.map

package/dist/components/toast/toast.d.ts

@@ -22,14 +22,14 @@ export declare function useToast(): ToastContextValue;
 export interface ToastProviderProps {
     children: React.ReactNode;
 }
-export declare function ToastProvider({ children }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToastProvider({ children }: ToastProviderProps): React.JSX.Element;
 declare const toastVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
         destructive: string;
         success: string;
     };
-}, undefined, "w-full flex-row items-center justify-between rounded-lg border p-4 shadow-lg", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "w-full flex-row items-center justify-between border", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         destructive: string;
@@ -53,7 +53,7 @@ declare const toastVariants: import("tailwind-variants").TVReturnType<{
         destructive: string;
         success: string;
     };
-}, undefined, "w-full flex-row items-center justify-between rounded-lg border p-4 shadow-lg", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "w-full flex-row items-center justify-between border", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         destructive: string;
@@ -70,10 +70,9 @@ export interface ToastProps extends ViewProps, VariantProps<typeof toastVariants
     toast: ToastData;
     onDismiss: () => void;
 }
-declare function Toast({ toast: toastData, onDismiss, className, ...props }: ToastProps): import("react/jsx-runtime").JSX.Element;
+declare function Toast({ toast: toastData, onDismiss, className, style, ...props }: ToastProps): React.JSX.Element;
 export interface ToastContainerProps extends ViewProps {
     position?: 'top' | 'bottom';
 }
-export declare function ToastContainer({ position, className, ...props }: ToastContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToastContainer({ position, className, style, ...props }: ToastContainerProps): React.JSX.Element;
 export { Toast, toastVariants };
-//# sourceMappingURL=toast.d.ts.map

package/dist/components/toast/toast.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { Pressable, View } from 'react-native';
 import Animated, { SlideInUp, SlideOutUp } from 'react-native-reanimated';
 import { Text } from '../text';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
-// ─── Context ─────────────────────────────────────────────────
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { useThemeColors } from '../../lib/theme-colors';
+import { shadowStyle, surfacePadding, surfaceRadius, typographyStyle } from '../../lib/recipes';
 const ToastContext = createContext(null);
 export function useToast() {
     const context = useContext(ToastContext);
@@ -15,6 +17,16 @@ export function useToast() {
     return context;
 }
 let toastId = 0;
+const TEXT_COLOR_BY_VARIANT = {
+    default: 'text-foreground',
+    destructive: 'text-destructive-foreground',
+    success: 'text-success-foreground',
+};
+const DESCRIPTION_COLOR_BY_VARIANT = {
+    default: 'text-muted-foreground',
+    destructive: 'text-destructive-foreground-muted',
+    success: 'text-success-foreground-muted',
+};
 export function ToastProvider({ children }) {
     const [toasts, setToasts] = useState([]);
     const toast = useCallback((data) => {
@@ -28,11 +40,11 @@ export function ToastProvider({ children }) {
     const dismissAll = useCallback(() => {
         setToasts([]);
     }, []);
-    return (_jsx(ToastContext.Provider, { value: { toasts, toast, dismiss, dismissAll }, children: children }));
+    const contextValue = useMemo(() => ({ toasts, toast, dismiss, dismissAll }), [dismiss, dismissAll, toast, toasts]);
+    return _jsx(ToastContext.Provider, { value: contextValue, children: children });
 }
-// ─── Toast Variants ──────────────────────────────────────────
 const toastVariants = tv({
-    base: 'w-full flex-row items-center justify-between rounded-lg border p-4 shadow-lg',
+    base: 'w-full flex-row items-center justify-between border',
     variants: {
         variant: {
             default: 'border-border bg-background',
@@ -44,36 +56,40 @@ const toastVariants = tv({
         variant: 'default',
     },
 });
-function Toast({ toast: toastData, onDismiss, className, ...props }) {
+function Toast({ toast: toastData, onDismiss, className, style, ...props }) {
     const { title, description, variant = 'default', duration = 4000, action } = toastData;
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
     useEffect(() => {
         if (duration > 0) {
             const timer = setTimeout(onDismiss, duration);
             return () => clearTimeout(timer);
         }
     }, [duration, onDismiss]);
-    const textColorByVariant = {
-        default: 'text-foreground',
-        destructive: 'text-destructive-foreground',
-        success: 'text-success-foreground',
-    };
-    const descColorByVariant = {
-        default: 'text-muted-foreground',
-        destructive: 'text-destructive-foreground-muted',
-        success: 'text-success-foreground-muted',
-    };
-    const textColor = textColorByVariant[variant];
-    const descColor = descColorByVariant[variant];
-    return (_jsxs(Animated.View, { entering: SlideInUp.duration(300), exiting: SlideOutUp.duration(200), className: cn(toastVariants({ variant }), className), ...props, children: [_jsxs(View, { className: "flex-1 gap-1", children: [title && _jsx(Text, { className: cn('text-sm font-semibold', textColor), children: title }), description && _jsx(Text, { className: cn('text-sm', descColor), children: description })] }), _jsxs(View, { className: "flex-row items-center gap-2", children: [action && (_jsx(Pressable, { onPress: () => {
+    const textColor = TEXT_COLOR_BY_VARIANT[variant];
+    const descColor = DESCRIPTION_COLOR_BY_VARIANT[variant];
+    return (_jsxs(Animated.View, { entering: SlideInUp.duration(300), exiting: SlideOutUp.duration(200), className: cn(toastVariants({ variant }), className), style: [
+            {
+                borderRadius: surfaceRadius(visual, 'lg'),
+                borderWidth: visual.borderWidthHairline,
+                padding: surfacePadding(visual, 'sm'),
+            },
+            shadowStyle(visual, colors, 'lg'),
+            style,
+        ], ...props, children: [_jsxs(View, { className: "flex-1 gap-1", children: [title && (_jsx(Text, { className: cn('font-semibold', textColor), style: typographyStyle(visual, 'label'), children: title })), description && (_jsx(Text, { className: cn(descColor), style: typographyStyle(visual, 'label'), children: description }))] }), _jsxs(View, { className: "flex-row items-center gap-2", children: [action && (_jsx(Pressable, { accessibilityRole: "button", onPress: () => {
                             action.onPress();
                             onDismiss();
-                        }, className: "rounded-md border border-border px-3 py-1.5", children: _jsx(Text, { className: cn('text-sm font-medium', textColor), children: action.label }) })), _jsx(Pressable, { onPress: onDismiss, className: "p-1", children: _jsx(Text, { className: cn('text-lg', textColor), children: "\u00D7" }) })] })] }));
+                        }, className: "border border-border", style: {
+                            borderRadius: visual.radiusMd,
+                            borderWidth: visual.borderWidthControl,
+                            paddingHorizontal: visual.controlPaddingXSm,
+                            paddingVertical: visual.controlPaddingYSm,
+                        }, children: _jsx(Text, { className: cn('font-medium', textColor), style: typographyStyle(visual, 'label'), children: action.label }) })), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Dismiss", onPress: onDismiss, className: "p-1", children: _jsx(Text, { className: cn(textColor), style: typographyStyle(visual, 'emphasis'), children: "\u00D7" }) })] })] }));
 }
-export function ToastContainer({ position = 'top', className, ...props }) {
+export function ToastContainer({ position = 'top', className, style, ...props }) {
     const { toasts, dismiss } = useToast();
+    const visual = useVisualTokens();
     const positionClass = position === 'top' ? 'top-0' : 'bottom-0';
-    return (_jsx(View, { className: cn('absolute left-0 right-0 z-50 px-4 py-2', positionClass, className), pointerEvents: "box-none", ...props, children: toasts.map((toast) => (_jsx(View, { className: "mb-2", children: _jsx(Toast, { toast: toast, onDismiss: () => dismiss(toast.id) }) }, toast.id))) }));
+    return (_jsx(View, { className: cn('absolute left-0 right-0 z-50 py-2', positionClass, className), style: [{ paddingHorizontal: visual.surfacePaddingSm }, style], pointerEvents: "box-none", ...props, children: toasts.map((toast) => (_jsx(View, { className: "mb-2", children: _jsx(Toast, { toast: toast, onDismiss: () => dismiss(toast.id) }) }, toast.id))) }));
 }
-// ─── Exports ─────────────────────────────────────────────────
 export { Toast, toastVariants };
-//# sourceMappingURL=toast.js.map

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

@@ -1,2 +1 @@
 export { Toggle, ToggleText, toggleVariants, toggleTextVariants, type ToggleProps, type ToggleTextProps, } from './toggle';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/toggle/index.js

@@ -1,2 +1 @@
 export { Toggle, ToggleText, toggleVariants, toggleTextVariants, } from './toggle';
-//# sourceMappingURL=index.js.map

package/dist/components/toggle/toggle.d.ts

@@ -15,7 +15,7 @@ declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "inline-flex items-center justify-center rounded-md active:bg-accent", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "inline-flex items-center justify-center active:bg-accent", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         outline: string;
@@ -71,7 +71,7 @@ declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
-}, undefined, "inline-flex items-center justify-center rounded-md active:bg-accent", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "inline-flex items-center justify-center active:bg-accent", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         outline: string;
@@ -110,7 +110,7 @@ declare const toggleTextVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
     };
-}, undefined, "text-sm font-medium", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "font-medium", import("tailwind-variants/dist/config.js").TVConfig<{
     pressed: {
         true: string;
         false: string;
@@ -150,7 +150,7 @@ declare const toggleTextVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
     };
-}, undefined, "text-sm font-medium", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "font-medium", import("tailwind-variants/dist/config.js").TVConfig<{
     pressed: {
         true: string;
         false: string;
@@ -183,13 +183,12 @@ export interface ToggleProps extends Omit<PressableProps, 'children'> {
 export interface ToggleTextProps extends TextProps {
     className?: string;
 }
-declare function Toggle({ pressed: controlledPressed, defaultPressed, onPressedChange, variant, size, className, children, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+declare function Toggle({ pressed: controlledPressed, defaultPressed, onPressedChange, variant, size, className, children, style: styleProp, ...props }: ToggleProps): React.JSX.Element;
 declare namespace Toggle {
     var displayName: string;
 }
-declare function ToggleText({ className, ...props }: ToggleTextProps): import("react/jsx-runtime").JSX.Element;
+declare function ToggleText({ className, style, ...props }: ToggleTextProps): React.JSX.Element;
 declare namespace ToggleText {
     var displayName: string;
 }
 export { Toggle, ToggleText, toggleVariants, toggleTextVariants };
-//# sourceMappingURL=toggle.d.ts.map

package/dist/components/toggle/toggle.js

@@ -1,25 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useMemo } from 'react';
 import { Pressable, Text } from 'react-native';
 import { cn } from '../../lib/cn';
+import { focusRing } from '../../lib/focus-ring';
 import { tv } from '../../lib/tv';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { controlRecipe, typographyStyle } from '../../lib/recipes';
 const ToggleContext = createContext({
     pressed: false,
     variant: 'default',
     size: 'default',
 });
-// ─── Variants ────────────────────────────────────────────────
 const toggleVariants = tv({
-    base: 'inline-flex items-center justify-center rounded-md active:bg-accent',
+    base: 'inline-flex items-center justify-center active:bg-accent',
     variants: {
         variant: {
             default: 'bg-transparent',
             outline: 'border border-input bg-transparent',
         },
         size: {
-            default: 'h-10 px-3',
-            sm: 'h-8 px-2',
-            lg: 'h-12 px-4',
+            default: '',
+            sm: '',
+            lg: '',
         },
         pressed: {
             true: 'bg-accent',
@@ -32,17 +34,22 @@ const toggleVariants = tv({
         pressed: false,
     },
 });
+const TOGGLE_TEXT_ROLE = {
+    default: 'label',
+    sm: 'caption',
+    lg: 'body',
+};
 const toggleTextVariants = tv({
-    base: 'text-sm font-medium',
+    base: 'font-medium',
     variants: {
         pressed: {
             true: 'text-accent-foreground',
             false: 'text-muted-foreground',
         },
         size: {
-            default: 'text-sm',
-            sm: 'text-xs',
-            lg: 'text-base',
+            default: '',
+            sm: '',
+            lg: '',
         },
     },
     defaultVariants: {
@@ -50,22 +57,31 @@ const toggleTextVariants = tv({
         size: 'default',
     },
 });
-// ─── Component ───────────────────────────────────────────────
-function Toggle({ pressed: controlledPressed, defaultPressed = false, onPressedChange, variant = 'default', size = 'default', className, children, ...props }) {
+function Toggle({ pressed: controlledPressed, defaultPressed = false, onPressedChange, variant = 'default', size = 'default', className, children, style: styleProp, ...props }) {
     const [internalPressed, setInternalPressed] = React.useState(defaultPressed);
     const pressed = controlledPressed ?? internalPressed;
+    const visual = useVisualTokens();
     const handlePress = () => {
         const next = !pressed;
         setInternalPressed(next);
         onPressedChange?.(next);
     };
-    return (_jsx(ToggleContext.Provider, { value: { pressed, variant, size }, children: _jsx(Pressable, { className: cn(toggleVariants({ variant, size, pressed }), className), onPress: handlePress, accessibilityRole: "button", accessibilityState: { selected: pressed }, ...props, children: children }) }));
+    const tokenStyle = {
+        ...controlRecipe(visual, size ?? 'default'),
+        ...(variant === 'outline' ? { borderWidth: visual.borderWidthControl } : null),
+    };
+    const contextValue = useMemo(() => ({ pressed, variant, size }), [pressed, size, variant]);
+    return (_jsx(ToggleContext.Provider, { value: contextValue, children: _jsx(Pressable, { className: cn(toggleVariants({ variant, size, pressed }), focusRing, className), style: (state) => [
+                tokenStyle,
+                typeof styleProp === 'function' ? styleProp(state) : styleProp,
+            ], onPress: handlePress, accessibilityRole: "button", accessibilityState: { selected: pressed }, ...props, children: children }) }));
 }
-function ToggleText({ className, ...props }) {
+function ToggleText({ className, style, ...props }) {
     const { pressed, size } = useContext(ToggleContext);
-    return _jsx(Text, { className: cn(toggleTextVariants({ pressed, size }), className), ...props });
+    const visual = useVisualTokens();
+    const typography = typographyStyle(visual, TOGGLE_TEXT_ROLE[size ?? 'default'] ?? 'label');
+    return (_jsx(Text, { className: cn(toggleTextVariants({ pressed, size }), className), style: [typography, style], ...props }));
 }
 Toggle.displayName = 'Toggle';
 ToggleText.displayName = 'ToggleText';
 export { Toggle, ToggleText, toggleVariants, toggleTextVariants };
-//# sourceMappingURL=toggle.js.map

package/dist/components/toggle-group/index.d.ts

@@ -1,2 +1 @@
 export { ToggleGroup, ToggleGroupItem, ToggleGroupItemText, toggleGroupItemVariants, toggleGroupItemTextVariants, type ToggleGroupProps, type ToggleGroupItemProps, type ToggleGroupItemTextProps, } from './toggle-group';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/toggle-group/index.js

@@ -1,2 +1 @@
 export { ToggleGroup, ToggleGroupItem, ToggleGroupItemText, toggleGroupItemVariants, toggleGroupItemTextVariants, } from './toggle-group';
-//# sourceMappingURL=index.js.map