@thewhileloop/whileui 1.2.3 → 3.0.0

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

@@ -3,174 +3,78 @@ import { type ViewProps, type PressableProps, type TextProps } from 'react-nativ
 type ToggleGroupType = 'single' | 'multiple';
 declare const toggleGroupItemVariants: 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", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "inline-flex items-center justify-center", {
     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", 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 toggleGroupItemTextVariants: 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 ToggleGroupProps extends ViewProps {
     type?: ToggleGroupType;
     defaultValue?: string | string[];
@@ -188,17 +92,16 @@ export interface ToggleGroupItemProps extends Omit<PressableProps, 'children'> {
 export interface ToggleGroupItemTextProps extends TextProps {
     className?: string;
 }
-declare function ToggleGroup({ type, defaultValue, value: controlledValue, onValueChange, variant, size, className, children, ...props }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function ToggleGroup({ type, defaultValue, value: controlledValue, onValueChange, variant, size, className, children, ...props }: ToggleGroupProps): React.JSX.Element;
 declare namespace ToggleGroup {
     var displayName: string;
 }
-declare function ToggleGroupItem({ value: itemValue, className, children, ...props }: ToggleGroupItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ToggleGroupItem({ value: itemValue, className, children, style: styleProp, ...props }: ToggleGroupItemProps): React.JSX.Element;
 declare namespace ToggleGroupItem {
     var displayName: string;
 }
-declare function ToggleGroupItemText({ className, ...props }: ToggleGroupItemTextProps): import("react/jsx-runtime").JSX.Element;
+declare function ToggleGroupItemText({ className, style, ...props }: ToggleGroupItemTextProps): React.JSX.Element;
 declare namespace ToggleGroupItemText {
     var displayName: string;
 }
 export { ToggleGroup, ToggleGroupItem, ToggleGroupItemText, toggleGroupItemVariants, toggleGroupItemTextVariants, };
-//# sourceMappingURL=toggle-group.d.ts.map

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

@@ -1,8 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useState, useCallback } from 'react';
+import { createContext, useContext, useState, useCallback, useMemo } from 'react';
 import { View, 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 ToggleGroupContext = createContext({
     type: 'single',
     value: [],
@@ -12,18 +15,17 @@ const ToggleGroupItemContext = createContext({
     pressed: false,
     size: 'default',
 });
-// ─── Variants ────────────────────────────────────────────────
 const toggleGroupItemVariants = tv({
-    base: 'inline-flex items-center justify-center rounded-md',
+    base: 'inline-flex items-center justify-center',
     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',
@@ -36,17 +38,22 @@ const toggleGroupItemVariants = tv({
         pressed: false,
     },
 });
+const TOGGLE_GROUP_TEXT_ROLE = {
+    default: 'label',
+    sm: 'caption',
+    lg: 'body',
+};
 const toggleGroupItemTextVariants = 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: {
@@ -54,18 +61,17 @@ const toggleGroupItemTextVariants = tv({
         size: 'default',
     },
 });
-// ─── Components ──────────────────────────────────────────────
 function ToggleGroup({ type = 'single', defaultValue, value: controlledValue, onValueChange, variant = 'default', size = 'default', className, children, ...props }) {
     const [internalValue, setInternalValue] = useState(() => {
         if (!defaultValue)
             return [];
         return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
     });
-    const value = controlledValue
+    const value = useMemo(() => controlledValue
         ? Array.isArray(controlledValue)
             ? controlledValue
             : [controlledValue]
-        : internalValue;
+        : internalValue, [controlledValue, internalValue]);
     const handleValueChange = useCallback((itemValue) => {
         let next;
         if (type === 'single') {
@@ -79,19 +85,30 @@ function ToggleGroup({ type = 'single', defaultValue, value: controlledValue, on
         setInternalValue(next);
         onValueChange?.(type === 'single' ? next[0] || '' : next);
     }, [type, value, onValueChange]);
-    return (_jsx(ToggleGroupContext.Provider, { value: { type, value, onValueChange: handleValueChange, variant, size }, children: _jsx(View, { className: cn('flex flex-row items-center gap-1', className), ...props, children: children }) }));
+    const contextValue = useMemo(() => ({ type, value, onValueChange: handleValueChange, variant, size }), [handleValueChange, size, type, value, variant]);
+    return (_jsx(ToggleGroupContext.Provider, { value: contextValue, children: _jsx(View, { className: cn('flex flex-row items-center gap-1', className), ...props, children: children }) }));
 }
-function ToggleGroupItem({ value: itemValue, className, children, ...props }) {
+function ToggleGroupItem({ value: itemValue, className, children, style: styleProp, ...props }) {
     const { value, onValueChange, variant, size } = useContext(ToggleGroupContext);
     const pressed = value.includes(itemValue);
-    return (_jsx(ToggleGroupItemContext.Provider, { value: { pressed, size }, children: _jsx(Pressable, { className: cn(toggleGroupItemVariants({ variant, size, pressed }), className), onPress: () => onValueChange(itemValue), accessibilityRole: "button", accessibilityState: { selected: pressed }, ...props, children: children }) }));
+    const visual = useVisualTokens();
+    const contextValue = useMemo(() => ({ pressed, size }), [pressed, size]);
+    const tokenStyle = {
+        ...controlRecipe(visual, size ?? 'default'),
+        ...(variant === 'outline' ? { borderWidth: visual.borderWidthControl } : null),
+    };
+    return (_jsx(ToggleGroupItemContext.Provider, { value: contextValue, children: _jsx(Pressable, { className: cn(toggleGroupItemVariants({ variant, size, pressed }), focusRing, className), style: (state) => [
+                tokenStyle,
+                typeof styleProp === 'function' ? styleProp(state) : styleProp,
+            ], onPress: () => onValueChange(itemValue), accessibilityRole: "button", accessibilityState: { selected: pressed }, ...props, children: children }) }));
 }
-function ToggleGroupItemText({ className, ...props }) {
+function ToggleGroupItemText({ className, style, ...props }) {
     const { pressed, size } = useContext(ToggleGroupItemContext);
-    return (_jsx(Text, { className: cn(toggleGroupItemTextVariants({ pressed, size }), className), ...props }));
+    const visual = useVisualTokens();
+    const typography = typographyStyle(visual, TOGGLE_GROUP_TEXT_ROLE[size ?? 'default'] ?? 'label');
+    return (_jsx(Text, { className: cn(toggleGroupItemTextVariants({ pressed, size }), className), style: [typography, style], ...props }));
 }
 ToggleGroup.displayName = 'ToggleGroup';
 ToggleGroupItem.displayName = 'ToggleGroupItem';
 ToggleGroupItemText.displayName = 'ToggleGroupItemText';
 export { ToggleGroup, ToggleGroupItem, ToggleGroupItemText, toggleGroupItemVariants, toggleGroupItemTextVariants, };
-//# sourceMappingURL=toggle-group.js.map

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

@@ -1,2 +1 @@
 export { Tooltip, TooltipTrigger, TooltipContent, type TooltipProps, type TooltipTriggerProps, type TooltipContentProps, } from './tooltip';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/tooltip/index.js

@@ -1,2 +1 @@
 export { Tooltip, TooltipTrigger, TooltipContent, } from './tooltip';
-//# sourceMappingURL=index.js.map

package/dist/components/tooltip/tooltip.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as TooltipPrimitive from '@rn-primitives/tooltip';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 export interface TooltipProps {
     onOpenChange?: (open: boolean) => void;
     delayDuration?: number;
@@ -14,8 +15,7 @@ export interface TooltipContentProps extends React.ComponentPropsWithoutRef<type
     className?: string;
     portalHost?: string;
 }
-declare function Tooltip({ onOpenChange, delayDuration, skipDelayDuration, disableHoverableContent, children, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
-declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipTriggerProps & React.RefAttributes<import("@rn-primitives/tooltip").TriggerRef>>;
-declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<import("react-native").View>>;
+declare function Tooltip({ onOpenChange, delayDuration, skipDelayDuration, disableHoverableContent, children, }: TooltipProps): React.JSX.Element;
+declare const TooltipTrigger: ForwardRefComponent<TooltipPrimitive.TriggerRef, TooltipTriggerProps>;
+declare const TooltipContent: ForwardRefComponent<TooltipPrimitive.ContentRef, TooltipContentProps>;
 export { Tooltip, TooltipTrigger, TooltipContent };
-//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/tooltip/tooltip.js

@@ -3,16 +3,33 @@ import * as React from 'react';
 import { Platform, StyleSheet, Text } from 'react-native';
 import * as TooltipPrimitive from '@rn-primitives/tooltip';
 import { cn } from '../../lib/cn';
-// ─── Components ──────────────────────────────────────────────
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { useThemeColors } from '../../lib/theme-colors';
+import { shadowStyle, surfaceRadius, typographyStyle } from '../../lib/recipes';
 function Tooltip({ onOpenChange, delayDuration, skipDelayDuration, disableHoverableContent, children, }) {
     return (_jsx(TooltipPrimitive.Root, { onOpenChange: onOpenChange, delayDuration: delayDuration, skipDelayDuration: skipDelayDuration, disableHoverableContent: disableHoverableContent, children: children }));
 }
 const TooltipTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TooltipPrimitive.Trigger, { ref: ref, className: cn(className), ...props })));
 TooltipTrigger.displayName = 'TooltipTrigger';
-const TooltipContent = React.forwardRef(({ className, sideOffset = 4, portalHost, children, ...props }, ref) => (_jsx(TooltipPrimitive.Portal, { hostName: portalHost, children: _jsx(TooltipPrimitive.Overlay, { style: Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined, children: _jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 shadow-md', 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), style: Platform.OS === 'web' ? {} : contentStyles, ...props, children: typeof children === 'string' ? (_jsx(Text, { className: "text-xs text-primary-foreground", children: children })) : (children) }) }) })));
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, portalHost, children, style, ...props }, ref) => {
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
+    const resolvedStyle = StyleSheet.flatten([
+        Platform.OS === 'web' ? undefined : contentStyles,
+        {
+            borderRadius: surfaceRadius(visual, 'md'),
+            borderWidth: visual.borderWidthHairline,
+            borderColor: colors.border,
+            paddingHorizontal: visual.controlPaddingXSm,
+            paddingVertical: visual.controlPaddingYSm,
+        },
+        shadowStyle(visual, colors, 'md'),
+        style,
+    ]);
+    return (_jsx(TooltipPrimitive.Portal, { hostName: portalHost, children: _jsx(TooltipPrimitive.Overlay, { style: Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined, children: _jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn('z-50 overflow-hidden bg-primary', 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), style: resolvedStyle, ...props, children: typeof children === 'string' ? (_jsx(Text, { className: "text-primary-foreground", style: typographyStyle(visual, 'caption'), children: children })) : (children) }) }) }));
+});
 TooltipContent.displayName = 'TooltipContent';
 const contentStyles = {
     position: 'absolute',
 };
 export { Tooltip, TooltipTrigger, TooltipContent };
-//# sourceMappingURL=tooltip.js.map

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

@@ -1,2 +1 @@
 export { View, type ViewProps } from './view';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/view/index.js

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

package/dist/components/view/view.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
-import { View as RNView, type ViewProps as RNViewProps } from 'react-native';
+import { type ViewInstance, type ViewProps as RNViewProps } from 'react-native';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 export interface ViewProps extends RNViewProps {
 }
-declare const View: React.ForwardRefExoticComponent<ViewProps & React.RefAttributes<RNView>>;
+declare const View: ForwardRefComponent<ViewInstance, ViewProps>;
 export { View };
-//# sourceMappingURL=view.d.ts.map

package/dist/components/view/view.js

@@ -7,4 +7,3 @@ const View = React.forwardRef(({ className, ...props }, ref) => {
 });
 View.displayName = 'View';
 export { View };
-//# sourceMappingURL=view.js.map

package/dist/index.d.ts

@@ -1,19 +1,25 @@
 import './lib/react-native-classname';
 export { cn } from './lib/cn';
+export { focusRing, focusRingInset } from './lib/focus-ring';
 export { tv, type VariantProps } from './lib/tv';
 export { FontProvider, type FontFamilyMap, type ResolvedFont, type ResolvedFontResult, } from './lib/font-context';
 export { PortalHost } from './lib/portal';
 export { ThemeBridge, applyThemeMode, resolveThemeMode, syncThemeMode, useThemeBridge, type ThemeMode, type ThemeBridgeAdapter, type ThemeBridgeProps, type UseThemeBridgeOptions, type UseThemeBridgeResult, } from './lib/theme-bridge';
-export { useThemeColors, useThemeTokens, useIconColors, useResolvedThemeColors, type ThemeColors, } from './lib/theme-colors';
+export { useThemeColors, useThemeTokens, useIconColors, type ThemeColors, } from './lib/theme-colors';
+export { THEME_TOKEN_SPECS, THEME_TOKEN_GROUPS, WHILEUI_LIGHT_THEME_COLORS, WHILEUI_DARK_THEME_COLORS, type ThemeTokenGroup, type ThemeTokenKey, type ThemeTokenSpec, } from './lib/theme-contract';
 export { useInteractionTokens, withInteractivePressableStyle, type InteractionTokens, type InteractivePressableOptions, type PressedVariant, type DisabledVariant, } from './lib/interaction-tokens';
+export { MotionProvider, useMotionPolicy, type MotionMode, type MotionDuration, type MotionSpring, type MotionSpringConfig, type MotionPolicy, type MotionProviderProps, } from './lib/motion-policy';
 export { useVisualTokens, type VisualTokens } from './lib/visual-tokens';
+export { VISUAL_TOKEN_SPECS, VISUAL_TOKEN_GROUPS, type VisualTokenGroup, type VisualTokenKey, type VisualTokenKind, type VisualTokenSpec, } from './lib/visual-token-contract';
 export { registerFrostedBlurView, type FrostedSurfaceProps, type FrostedTintToken, } from './lib/frosted-surface';
+export { controlRecipe, fieldRecipe, surfaceRecipe, surfacePadding, surfaceRadius, shadowStyle, typographyStyle, useControlRecipe, useFieldRecipe, useSurfaceRecipe, useShadowStyle, useTypography, type ControlSize, type SurfacePaddingSize, type SurfaceRecipeOptions, type ShadowTier, type TypographyRole, } from './lib/recipes';
+export { WHILEUI_PRESET_SOFT, WHILEUI_PRESET_ATELIER, WHILEUI_THEME_PRESETS, themePresetToCssVariables, themePresetToCss, type ThemePreset, } from './lib/theme-presets';
+export { deriveThemeColors, THEME_BASE_TOKEN_KEYS, type ThemeBaseColors } from './lib/theme-derive';
 export { Text, textVariants, type TextProps } from './components/text';
 export { View, type ViewProps } from './components/view';
 export { Pressable, type PressableProps } from './components/pressable';
 export { Stack, stackVariants, type StackProps } from './components/stack';
 export { Row, rowVariants, type RowProps } from './components/row';
-export { Box, boxVariants, type BoxProps } from './components/box';
 export { Button, ButtonText, ButtonIcon, buttonVariants, buttonTextVariants, type ButtonProps, type ButtonTextProps, type ButtonIconProps, } from './components/button';
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, cardVariants, type CardProps, type CardHeaderProps, type CardTitleProps, type CardDescriptionProps, type CardContentProps, type CardFooterProps, } from './components/card';
 export { Input, inputVariants, type InputProps } from './components/input';
@@ -35,6 +41,7 @@ export { AspectRatio, type AspectRatioProps } from './components/aspect-ratio';
 export { Avatar, AvatarImage, AvatarFallback, avatarVariants, type AvatarProps, type AvatarImageProps, type AvatarFallbackProps, } from './components/avatar';
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, type AccordionProps, type AccordionItemProps, type AccordionTriggerProps, type AccordionContentProps, } from './components/accordion';
 export { Collapsible, CollapsibleTrigger, CollapsibleContent, type CollapsibleProps, type CollapsibleTriggerProps, type CollapsibleContentProps, } from './components/collapsible';
+export { Container, containerVariants, type ContainerProps } from './components/container';
 export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, type DialogProps, type DialogTriggerProps, type DialogContentProps, type DialogHeaderProps, type DialogFooterProps, type DialogTitleProps, type DialogDescriptionProps, type DialogCloseProps, } from './components/dialog';
 export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, type AlertDialogProps, type AlertDialogTriggerProps, type AlertDialogContentProps, type AlertDialogHeaderProps, type AlertDialogFooterProps, type AlertDialogTitleProps, type AlertDialogDescriptionProps, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogPresentation, } from './components/alert-dialog';
 export { Tabs, TabsList, TabsTrigger, TabsContent, tabsTriggerVariants, type TabsProps, type TabsListProps, type TabsTriggerProps, type TabsContentProps, } from './components/tabs';
@@ -59,4 +66,3 @@ export * from './blocks/commerce';
 export * from './blocks/splash';
 export * from './blocks/media';
 export * from './blocks/datepicker';
-//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,22 +1,25 @@
 import './lib/react-native-classname';
-// ─── Utilities ───────────────────────────────────────────────
 export { cn } from './lib/cn';
+export { focusRing, focusRingInset } from './lib/focus-ring';
 export { tv } from './lib/tv';
 export { FontProvider, } from './lib/font-context';
 export { PortalHost } from './lib/portal';
 export { ThemeBridge, applyThemeMode, resolveThemeMode, syncThemeMode, useThemeBridge, } from './lib/theme-bridge';
-export { useThemeColors, useThemeTokens, useIconColors, useResolvedThemeColors, } from './lib/theme-colors';
+export { useThemeColors, useThemeTokens, useIconColors, } from './lib/theme-colors';
+export { THEME_TOKEN_SPECS, THEME_TOKEN_GROUPS, WHILEUI_LIGHT_THEME_COLORS, WHILEUI_DARK_THEME_COLORS, } from './lib/theme-contract';
 export { useInteractionTokens, withInteractivePressableStyle, } from './lib/interaction-tokens';
+export { MotionProvider, useMotionPolicy, } from './lib/motion-policy';
 export { useVisualTokens } from './lib/visual-tokens';
+export { VISUAL_TOKEN_SPECS, VISUAL_TOKEN_GROUPS, } from './lib/visual-token-contract';
 export { registerFrostedBlurView, } from './lib/frosted-surface';
-// ─── Primitives ──────────────────────────────────────────────
+export { controlRecipe, fieldRecipe, surfaceRecipe, surfacePadding, surfaceRadius, shadowStyle, typographyStyle, useControlRecipe, useFieldRecipe, useSurfaceRecipe, useShadowStyle, useTypography, } from './lib/recipes';
+export { WHILEUI_PRESET_SOFT, WHILEUI_PRESET_ATELIER, WHILEUI_THEME_PRESETS, themePresetToCssVariables, themePresetToCss, } from './lib/theme-presets';
+export { deriveThemeColors, THEME_BASE_TOKEN_KEYS } from './lib/theme-derive';
 export { Text, textVariants } from './components/text';
 export { View } from './components/view';
 export { Pressable } from './components/pressable';
 export { Stack, stackVariants } from './components/stack';
 export { Row, rowVariants } from './components/row';
-export { Box, boxVariants } from './components/box';
-// ─── Components ──────────────────────────────────────────────
 export { Button, ButtonText, ButtonIcon, buttonVariants, buttonTextVariants, } from './components/button';
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, cardVariants, } from './components/card';
 export { Input, inputVariants } from './components/input';
@@ -38,6 +41,7 @@ export { AspectRatio } from './components/aspect-ratio';
 export { Avatar, AvatarImage, AvatarFallback, avatarVariants, } from './components/avatar';
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from './components/accordion';
 export { Collapsible, CollapsibleTrigger, CollapsibleContent, } from './components/collapsible';
+export { Container, containerVariants } from './components/container';
 export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, } from './components/dialog';
 export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } from './components/alert-dialog';
 export { Tabs, TabsList, TabsTrigger, TabsContent, tabsTriggerVariants, } from './components/tabs';
@@ -54,7 +58,6 @@ export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, C
 export { HoverCard, HoverCardTrigger, HoverCardContent, } from './components/hover-card';
 export { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarLabel, MenubarSeparator, } from './components/menubar';
 export { Toast, ToastContainer, ToastProvider, toastVariants, useToast, } from './components/toast';
-// ─── Blocks ──────────────────────────────────────────────────
 export * from './blocks/chat';
 export * from './blocks/navigation';
 export * from './blocks/layout';
@@ -63,4 +66,3 @@ export * from './blocks/commerce';
 export * from './blocks/splash';
 export * from './blocks/media';
 export * from './blocks/datepicker';
-//# sourceMappingURL=index.js.map

package/dist/lib/cn.d.ts

@@ -8,4 +8,3 @@ import { type ClassValue } from 'clsx';
  * cn('bg-primary', isActive && 'bg-secondary') // conditional
  */
 export declare function cn(...inputs: ClassValue[]): string;
-//# sourceMappingURL=cn.d.ts.map

package/dist/lib/cn.js

@@ -11,4 +11,3 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
-//# sourceMappingURL=cn.js.map

package/dist/lib/compose-event-handlers.d.ts

@@ -0,0 +1,15 @@
+import type { PressableProps } from 'react-native';
+import type { ReactElement } from 'react';
+type EventHandler<E> = ((event: E) => void) | null | undefined;
+/**
+ * What `asChild` can assume about the element it was handed. The child is the caller's,
+ * so this names only the props we actually read off it before cloning — anything wider
+ * would be a claim we cannot check.
+ */
+export type AsChildElement = ReactElement<Pick<PressableProps, 'onPress' | 'onLongPress'> & {
+    className?: string;
+}>;
+export declare function composeEventHandlers<E>(userHandler?: EventHandler<E>, internalHandler?: EventHandler<E>, { checkForDefaultPrevented }?: {
+    checkForDefaultPrevented?: boolean;
+}): (event: E) => void;
+export {};

package/dist/lib/compose-event-handlers.js

@@ -0,0 +1,20 @@
+function isDefaultPrevented(event) {
+    if (!event || typeof event !== 'object')
+        return false;
+    if ('defaultPrevented' in event && typeof event.defaultPrevented === 'boolean') {
+        return event.defaultPrevented;
+    }
+    if ('isDefaultPrevented' in event && typeof event.isDefaultPrevented === 'function') {
+        return Boolean(event.isDefaultPrevented());
+    }
+    return false;
+}
+export function composeEventHandlers(userHandler, internalHandler, { checkForDefaultPrevented = true } = {}) {
+    return (event) => {
+        userHandler?.(event);
+        if (checkForDefaultPrevented && isDefaultPrevented(event)) {
+            return;
+        }
+        internalHandler?.(event);
+    };
+}

package/dist/lib/focus-ring.d.ts

@@ -0,0 +1,25 @@
+/**
+ * One focus treatment for every interactive component.
+ *
+ * Web needs this and native does not: React Native has no `:focus-visible`, and the
+ * platforms draw their own focus for hardware keyboards and TV remotes. So these classes
+ * are scoped with Uniwind's `web:` selector and compile to nothing elsewhere.
+ *
+ * `focus-visible`, not `focus`. `:focus` also fires on mouse press, which puts a ring on
+ * a button someone just clicked — visually noisy, and it trains people to ignore the ring
+ * that keyboard users actually depend on.
+ *
+ * WCAG 2.4.7 (Focus Visible, AA) requires an indicator. Several components here removed
+ * the browser default with `outline-none` and replaced it with nothing, which is the
+ * failure this exists to fix — the outline is only safe to remove if a ring takes over.
+ *
+ * The offset keeps the ring outside the control's own border so the two do not merge
+ * into one thick smudge, and `ring-offset-background` fills that gap with the surface
+ * colour rather than letting the ring sit on whatever is behind.
+ */
+export declare const focusRing = "web:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 web:focus-visible:ring-offset-background";
+/**
+ * For controls drawn flush against an edge or inside a dense row, where an offset ring
+ * would be clipped by the parent or collide with a neighbour.
+ */
+export declare const focusRingInset = "web:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring";