@thewhileloop/whileui 1.2.3 → 3.0.0

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

@@ -22,58 +22,33 @@ 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;
+        default: "border-border bg-background";
+        destructive: "border-destructive bg-destructive";
+        success: "border-success bg-success";
     };
-}, 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", {
     variant: {
-        default: string;
-        destructive: string;
-        success: string;
+        default: "border-border bg-background";
+        destructive: "border-destructive bg-destructive";
+        success: "border-success bg-success";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        destructive: string;
-        success: string;
+        default: "border-border bg-background";
+        destructive: "border-destructive bg-destructive";
+        success: "border-success bg-success";
     };
-}>, {
-    variant: {
-        default: string;
-        destructive: string;
-        success: string;
-    };
-}, undefined, 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<{
-    variant: {
-        default: string;
-        destructive: string;
-        success: string;
-    };
-}, {
-    variant: {
-        default: string;
-        destructive: string;
-        success: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 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

@@ -3,174 +3,78 @@ import { type PressableProps, type TextProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
 declare const toggleVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        outline: string;
+        default: "bg-transparent";
+        outline: "border border-input bg-transparent";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "";
+        sm: "";
+        lg: "";
     };
     pressed: {
-        true: string;
-        false: string;
+        true: "bg-accent";
+        false: "";
     };
-}, 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", {
     variant: {
-        default: string;
-        outline: string;
+        default: "bg-transparent";
+        outline: "border border-input bg-transparent";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "";
+        sm: "";
+        lg: "";
     };
     pressed: {
-        true: string;
-        false: string;
+        true: "bg-accent";
+        false: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        outline: string;
+        default: "bg-transparent";
+        outline: "border border-input bg-transparent";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "";
+        sm: "";
+        lg: "";
     };
     pressed: {
-        true: string;
-        false: string;
+        true: "bg-accent";
+        false: "";
     };
-}>, {
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-    pressed: {
-        true: string;
-        false: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-    pressed: {
-        true: string;
-        false: string;
-    };
-}, undefined, "inline-flex items-center justify-center rounded-md active:bg-accent", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-    pressed: {
-        true: string;
-        false: string;
-    };
-}, {
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-    pressed: {
-        true: string;
-        false: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 declare const toggleTextVariants: import("tailwind-variants").TVReturnType<{
     pressed: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}, undefined, "text-sm font-medium", import("tailwind-variants/dist/config.js").TVConfig<{
-    pressed: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}, {
-    pressed: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}>, {
-    pressed: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    pressed: {
-        true: string;
-        false: string;
+        true: "text-accent-foreground";
+        false: "text-muted-foreground";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "";
+        sm: "";
+        lg: "";
     };
-}, undefined, "text-sm font-medium", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "font-medium", {
     pressed: {
-        true: string;
-        false: string;
+        true: "text-accent-foreground";
+        false: "text-muted-foreground";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "";
+        sm: "";
+        lg: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     pressed: {
-        true: string;
-        false: string;
+        true: "text-accent-foreground";
+        false: "text-muted-foreground";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "";
+        sm: "";
+        lg: "";
     };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface ToggleProps extends Omit<PressableProps, 'children'> {
     pressed?: boolean;
     defaultPressed?: boolean;
@@ -183,13 +87,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