@thewhileloop/whileui 1.2.3 → 3.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

@@ -2,40 +2,20 @@ import { type ReactNode } from 'react';
 import { type ViewProps, type PressableProps } from 'react-native';
 declare const tabsTriggerVariants: import("tailwind-variants").TVReturnType<{
     state: {
-        active: string;
-        inactive: string;
+        active: "text-foreground";
+        inactive: "text-muted-foreground";
     };
-}, 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", {
     state: {
-        active: string;
-        inactive: string;
+        active: "text-foreground";
+        inactive: "text-muted-foreground";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     state: {
-        active: string;
-        inactive: string;
+        active: "text-foreground";
+        inactive: "text-muted-foreground";
     };
-}>, {
-    state: {
-        active: string;
-        inactive: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    state: {
-        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<{
-    state: {
-        active: string;
-        inactive: string;
-    };
-}, {
-    state: {
-        active: string;
-        inactive: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface TabsProps extends ViewProps {
     defaultValue: string;
     value?: string;
@@ -54,21 +34,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

@@ -1,149 +1,68 @@
-import React from 'react';
-import { Text as RNText, type TextProps as RNTextProps } from 'react-native';
+import { type TextInstance, type TextProps as RNTextProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const textVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        heading: string;
-        title: string;
-        subtitle: string;
-        body: string;
-        caption: string;
-        label: string;
-        code: string;
+        default: "font-normal";
+        heading: "text-2xl font-bold tracking-tight";
+        title: "text-xl font-semibold";
+        subtitle: "text-lg font-medium";
+        body: "text-base font-normal";
+        caption: "text-sm text-muted-foreground font-normal";
+        label: "text-sm font-medium leading-tight";
+        code: "font-mono text-sm bg-muted rounded px-1 py-0.5";
     };
     size: {
-        xs: string;
-        sm: string;
-        base: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
+        xs: "text-xs";
+        sm: "text-sm";
+        base: "text-base";
+        lg: "text-lg";
+        xl: "text-xl";
+        '2xl': "text-2xl";
+        '3xl': "text-3xl";
     };
-}, undefined, "text-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "text-foreground", {
     variant: {
-        default: string;
-        heading: string;
-        title: string;
-        subtitle: string;
-        body: string;
-        caption: string;
-        label: string;
-        code: string;
+        default: "font-normal";
+        heading: "text-2xl font-bold tracking-tight";
+        title: "text-xl font-semibold";
+        subtitle: "text-lg font-medium";
+        body: "text-base font-normal";
+        caption: "text-sm text-muted-foreground font-normal";
+        label: "text-sm font-medium leading-tight";
+        code: "font-mono text-sm bg-muted rounded px-1 py-0.5";
     };
     size: {
-        xs: string;
-        sm: string;
-        base: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
+        xs: "text-xs";
+        sm: "text-sm";
+        base: "text-base";
+        lg: "text-lg";
+        xl: "text-xl";
+        '2xl': "text-2xl";
+        '3xl': "text-3xl";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        heading: string;
-        title: string;
-        subtitle: string;
-        body: string;
-        caption: string;
-        label: string;
-        code: string;
+        default: "font-normal";
+        heading: "text-2xl font-bold tracking-tight";
+        title: "text-xl font-semibold";
+        subtitle: "text-lg font-medium";
+        body: "text-base font-normal";
+        caption: "text-sm text-muted-foreground font-normal";
+        label: "text-sm font-medium leading-tight";
+        code: "font-mono text-sm bg-muted rounded px-1 py-0.5";
     };
     size: {
-        xs: string;
-        sm: string;
-        base: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
+        xs: "text-xs";
+        sm: "text-sm";
+        base: "text-base";
+        lg: "text-lg";
+        xl: "text-xl";
+        '2xl': "text-2xl";
+        '3xl': "text-3xl";
     };
-}>, {
-    variant: {
-        default: string;
-        heading: string;
-        title: string;
-        subtitle: string;
-        body: string;
-        caption: string;
-        label: string;
-        code: string;
-    };
-    size: {
-        xs: string;
-        sm: string;
-        base: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        heading: string;
-        title: string;
-        subtitle: string;
-        body: string;
-        caption: string;
-        label: string;
-        code: string;
-    };
-    size: {
-        xs: string;
-        sm: string;
-        base: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-    };
-}, undefined, "text-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        heading: string;
-        title: string;
-        subtitle: string;
-        body: string;
-        caption: string;
-        label: string;
-        code: string;
-    };
-    size: {
-        xs: string;
-        sm: string;
-        base: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-    };
-}, {
-    variant: {
-        default: string;
-        heading: string;
-        title: string;
-        subtitle: string;
-        body: string;
-        caption: string;
-        label: string;
-        code: string;
-    };
-    size: {
-        xs: string;
-        sm: string;
-        base: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface TextProps extends RNTextProps, VariantProps<typeof textVariants> {
 }
-declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<RNText>>;
+declare const Text: ForwardRefComponent<TextInstance, TextProps>;
 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

@@ -1,52 +1,27 @@
-import React from 'react';
-import { TextInput, type TextInputProps } from 'react-native';
+import { type TextInputInstance, type TextInputProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const textareaVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "";
+        sm: "";
+        lg: "";
     };
-}, 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", {
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "";
+        sm: "";
+        lg: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "";
+        sm: "";
+        lg: "";
     };
-}>, {
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        default: string;
-        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<{
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}, {
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface TextareaProps extends Omit<TextInputProps, 'style'>, VariantProps<typeof textareaVariants> {
     className?: string;
 }
-declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<TextInput>>;
+declare const Textarea: ForwardRefComponent<TextInputInstance, TextareaProps>;
 export { Textarea, textareaVariants };
-//# sourceMappingURL=textarea.d.ts.map

package/dist/components/textarea/textarea.js

@@ -1,26 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { TextInput } from 'react-native';
+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