@thewhileloop/whileui 1.2.2 → 2.0.0

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

@@ -15,7 +15,7 @@ declare const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<
         true: string;
         false: string;
     };
-}, undefined, "inline-flex items-center justify-center rounded-md", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "inline-flex items-center justify-center", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         outline: string;
@@ -71,7 +71,7 @@ declare const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<
         true: string;
         false: string;
     };
-}, undefined, "inline-flex items-center justify-center rounded-md", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "inline-flex items-center justify-center", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         outline: string;
@@ -110,7 +110,7 @@ declare const toggleGroupItemTextVariants: import("tailwind-variants").TVReturnT
         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 toggleGroupItemTextVariants: import("tailwind-variants").TVReturnT
         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;
@@ -188,17 +188,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

@@ -14,8 +14,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 function Tooltip({ onOpenChange, delayDuration, skipDelayDuration, disableHoverableContent, children, }: TooltipProps): React.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>>;
 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

@@ -4,4 +4,3 @@ export interface ViewProps extends RNViewProps {
 }
 declare const View: React.ForwardRefExoticComponent<ViewProps & React.RefAttributes<RNView>>;
 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";

package/dist/lib/focus-ring.js

@@ -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 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 const focusRingInset = 'web:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring';

package/dist/lib/font-context.d.ts

@@ -17,6 +17,7 @@ export interface FontFamilyMap {
 }
 export interface ResolvedFont {
     fontFamily: string;
+    paddingRight?: number;
 }
 export declare const FontProvider: import("react").Provider<FontFamilyMap | null>;
 export interface ResolvedFontResult {
@@ -36,4 +37,3 @@ export interface ResolvedFontResult {
  * ensures the style prop is the sole source of font info.
  */
 export declare function useResolveFontFamily(className?: string): ResolvedFontResult | undefined;
-//# sourceMappingURL=font-context.d.ts.map

package/dist/lib/font-context.js

@@ -1,4 +1,5 @@
 import { createContext, useContext } from 'react';
+import { Platform } from 'react-native';
 const FontContext = createContext(null);
 export const FontProvider = FontContext.Provider;
 const FONT_WEIGHT_RE = /\bfont-(thin|extralight|light|normal|medium|semibold|bold|extrabold|black)\b/g;
@@ -15,18 +16,20 @@ export function useResolveFontFamily(className) {
     const map = useContext(FontContext);
     if (!map)
         return undefined;
+    const isNative = Platform.OS !== 'web';
+    const paddingRight = isNative ? 4 : undefined;
     if (!className)
         return {
-            style: { fontFamily: map['font-normal'] },
+            style: { fontFamily: map['font-normal'], paddingRight },
             className: '',
         };
     const classes = className.split(/\s+/);
-    let resolved = { fontFamily: map['font-normal'] };
+    let resolved = { fontFamily: map['font-normal'], paddingRight };
     for (let i = classes.length - 1; i >= 0; i--) {
         const cls = classes[i];
         const mapped = map[cls];
         if (mapped) {
-            resolved = { fontFamily: mapped };
+            resolved = { fontFamily: mapped, paddingRight };
             break;
         }
     }
@@ -38,4 +41,3 @@ export function useResolveFontFamily(className) {
             .trim(),
     };
 }
-//# sourceMappingURL=font-context.js.map

package/dist/lib/frosted-surface.d.ts

@@ -30,4 +30,3 @@ interface UseFrostedBackdropOptions {
 }
 export declare function useFrostedBackdrop({ frosted, blurIntensity, tintColor, }: UseFrostedBackdropOptions): React.ReactNode;
 export {};
-//# sourceMappingURL=frosted-surface.d.ts.map

package/dist/lib/frosted-surface.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Platform, StyleSheet, View } from 'react-native';
 import { useUniwind } from 'uniwind';
+import { formatRgb, parse } from 'culori';
 import { useThemeColors } from './theme-colors';
 import { useVisualTokens } from './visual-tokens';
 let cachedBlurViewComponent;
@@ -47,6 +48,26 @@ function resolveTintColor(colors, tintToken) {
         return colors.surfaceTranslucent;
     return colors.surfaceElevated;
 }
+function scaleColorAlpha(color, alphaScale) {
+    if (alphaScale === 1)
+        return color;
+    try {
+        const parsed = parse(color);
+        if (!parsed)
+            return color;
+        const currentAlpha = typeof parsed.alpha === 'number' ? parsed.alpha : 1;
+        if (currentAlpha >= 1)
+            return color;
+        const nextColor = {
+            ...parsed,
+            alpha: Math.min(1, Math.max(0, currentAlpha * alphaScale)),
+        };
+        return formatRgb(nextColor) ?? color;
+    }
+    catch {
+        return color;
+    }
+}
 function resolveBlurIntensity(visualTokens, blurIntensity, preset) {
     if (typeof blurIntensity === 'number' && Number.isFinite(blurIntensity)) {
         return Math.max(0, Math.round(blurIntensity));
@@ -60,7 +81,7 @@ function resolveBlurIntensity(visualTokens, blurIntensity, preset) {
 function getInsetAbsoluteFillStyle() {
     const inset = Math.max(0, StyleSheet.hairlineWidth);
     if (inset <= 0) {
-        return StyleSheet.absoluteFillObject;
+        return StyleSheet.absoluteFill;
     }
     return {
         position: 'absolute',
@@ -79,7 +100,7 @@ function FrostedOverlay({ intensity, tintColor, highlightColor, saturationPct, h
         : undefined;
     const showHighlight = highlightHeight > 0;
     const blurFill = getInsetAbsoluteFillStyle();
-    const tintFill = StyleSheet.absoluteFillObject;
+    const tintFill = StyleSheet.absoluteFill;
     const highlightInset = Math.max(0, StyleSheet.hairlineWidth);
     if (!BlurView && Platform.OS === 'web') {
         const webStyle = {
@@ -128,7 +149,7 @@ function FrostedBackdropOverlay({ intensity, tintColor, saturationPct, androidEx
         ? { experimentalBlurMethod: 'dimezisBlurView' }
         : undefined;
     const blurFill = getInsetAbsoluteFillStyle();
-    const tintFill = StyleSheet.absoluteFillObject;
+    const tintFill = StyleSheet.absoluteFill;
     if (!BlurView && Platform.OS === 'web') {
         const webStyle = {
             backdropFilter: `blur(${intensity}px) saturate(${saturationPct}%)`,
@@ -153,6 +174,9 @@ export function useFrostedSurface({ frosted = false, blurIntensity, blurTintToke
     }
     const tintToken = blurTintToken ?? defaultTintToken;
     const tintColor = resolveTintColor(colors, tintToken);
+    const resolvedTintColor = Platform.OS === 'android'
+        ? scaleColorAlpha(tintColor, visualTokens.androidFrostedTintAlphaScale)
+        : tintColor;
     const intensity = resolveBlurIntensity(visualTokens, blurIntensity, defaultBlurPreset);
     const highlightColor = colors.surfaceHighlight;
     const highlightHeight = visualTokens.frostedHighlightHeight;
@@ -160,7 +184,7 @@ export function useFrostedSurface({ frosted = false, blurIntensity, blurTintToke
     const androidExperimentalBlurEnabled = visualTokens.androidExperimentalBlurEnabled;
     return {
         frosted: true,
-        overlay: (_jsx(FrostedOverlay, { intensity: intensity, tintColor: tintColor, highlightColor: highlightColor, highlightHeight: highlightHeight, saturationPct: saturationPct, androidExperimentalBlurEnabled: androidExperimentalBlurEnabled })),
+        overlay: (_jsx(FrostedOverlay, { intensity: intensity, tintColor: resolvedTintColor, highlightColor: highlightColor, highlightHeight: highlightHeight, saturationPct: saturationPct, androidExperimentalBlurEnabled: androidExperimentalBlurEnabled })),
         surfaceStyle: {
             backgroundColor: 'transparent',
             borderColor: colors.surfaceBorder,
@@ -175,7 +199,8 @@ export function useFrostedBackdrop({ frosted = false, blurIntensity, tintColor,
     const intensity = typeof blurIntensity === 'number' && Number.isFinite(blurIntensity)
         ? Math.max(0, Math.round(blurIntensity))
         : visualTokens.frostedBackdropBlurIntensity;
-    const resolvedTintColor = tintColor ?? colors.overlay;
+    const resolvedTintColor = Platform.OS === 'android'
+        ? scaleColorAlpha(tintColor ?? colors.overlay, visualTokens.androidFrostedTintAlphaScale)
+        : (tintColor ?? colors.overlay);
     return (_jsx(FrostedBackdropOverlay, { intensity: intensity, tintColor: resolvedTintColor, saturationPct: visualTokens.blurSaturationPct, androidExperimentalBlurEnabled: visualTokens.androidExperimentalBlurEnabled }));
 }
-//# sourceMappingURL=frosted-surface.js.map

package/dist/lib/interaction-tokens.d.ts

@@ -1,4 +1,13 @@
 import { type PressableProps } from 'react-native';
+/** Motion values used when a `--ui-motion-*` token is absent, and by the provider-less motion policy. */
+export declare const MOTION_TOKEN_DEFAULTS: {
+    readonly motionFast: 140;
+    readonly motionNormal: 200;
+    readonly motionSlow: 280;
+    readonly motionSpringDamping: 20;
+    readonly motionSpringStiffness: 260;
+    readonly motionSpringMass: 0.8;
+};
 export interface InteractionTokens {
     pressOpacity: number;
     pressOpacityStrong: number;
@@ -9,6 +18,9 @@ export interface InteractionTokens {
     motionFast: number;
     motionNormal: number;
     motionSlow: number;
+    motionSpringDamping: number;
+    motionSpringStiffness: number;
+    motionSpringMass: number;
     drawerOpenDuration: number;
     drawerCloseDuration: number;
 }
@@ -23,4 +35,3 @@ export declare function useInteractionTokens(): InteractionTokens;
 type PressableStyle = PressableProps['style'];
 export declare function withInteractivePressableStyle(styleProp: PressableStyle | undefined, tokens: InteractionTokens, options?: InteractivePressableOptions): PressableStyle;
 export {};
-//# sourceMappingURL=interaction-tokens.d.ts.map