@thewhileloop/whileui 1.2.3 → 3.0.0

package/dist/components/pressable/index.js

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

package/dist/components/pressable/pressable.d.ts

@@ -1,8 +1,14 @@
-import React from 'react';
-import { type PressableProps as RNPressableProps } from 'react-native';
+import { type PressableInstance, type PressableProps as RNPressableProps } from 'react-native';
+import { type DisabledVariant, type PressedVariant } from '../../lib/interaction-tokens';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 export interface PressableProps extends RNPressableProps {
     className?: string;
+    /** Semantic press feedback. `none` preserves a plain React Native Pressable. */
+    feedback?: PressedVariant;
+    /** Opacity used while the control is unavailable. */
+    disabledFeedback?: DisabledVariant;
+    /** Loading controls are busy and non-interactive, just like disabled controls. */
+    loading?: boolean;
 }
-declare const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<import("react-native").View>>;
+declare const Pressable: ForwardRefComponent<PressableInstance, PressableProps>;
 export { Pressable };
-//# sourceMappingURL=pressable.d.ts.map

package/dist/components/pressable/pressable.js

@@ -1,10 +1,53 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { Pressable as RNPressable } from 'react-native';
+import { Platform, Pressable as RNPressable, } from 'react-native';
 import { cn } from '../../lib/cn';
-const Pressable = React.forwardRef(({ className, ...props }, ref) => {
-    return _jsx(RNPressable, { ref: ref, className: cn(className), ...props });
+import { useInteractionTokens, } from '../../lib/interaction-tokens';
+import { useMotionPolicy } from '../../lib/motion-policy';
+function pressedOpacity(variant, tokens) {
+    if (variant === 'none')
+        return 1;
+    return variant === 'strong' ? tokens.pressOpacityStrong : tokens.pressOpacity;
+}
+function disabledOpacity(variant, tokens) {
+    if (variant === 'none')
+        return 1;
+    if (variant === 'soft')
+        return tokens.disabledOpacitySoft;
+    if (variant === 'subtle')
+        return tokens.disabledOpacitySubtle;
+    return tokens.disabledOpacity;
+}
+const Pressable = React.forwardRef(({ className, feedback = 'none', disabledFeedback = 'default', loading = false, disabled = false, accessibilityState, style, ...props }, ref) => {
+    const interaction = useInteractionTokens();
+    const motion = useMotionPolicy();
+    const unavailable = disabled || loading;
+    const restingOpacity = unavailable ? disabledOpacity(disabledFeedback, interaction) : 1;
+    const activeOpacity = pressedOpacity(feedback, interaction);
+    const resolveStyle = (state) => {
+        const callerStyle = typeof style === 'function' ? style(state) : style;
+        const feedbackOpacity = unavailable
+            ? restingOpacity
+            : state.pressed && feedback !== 'none'
+                ? activeOpacity
+                : undefined;
+        const feedbackStyle = feedbackOpacity === undefined ? null : { opacity: feedbackOpacity };
+        if (Platform.OS !== 'web')
+            return [callerStyle, feedbackStyle];
+        const transition = motion.animationsEnabled
+            ? {
+                transitionProperty: 'opacity',
+                transitionDuration: `${motion.durations.fast}ms`,
+                transitionTimingFunction: 'ease-out',
+            }
+            : null;
+        return [callerStyle, transition, feedbackStyle];
+    };
+    return (_jsx(RNPressable, { ref: ref, className: cn(className), disabled: unavailable, accessibilityState: {
+            ...accessibilityState,
+            disabled: unavailable || accessibilityState?.disabled,
+            busy: loading || accessibilityState?.busy,
+        }, "aria-busy": loading || undefined, style: resolveStyle, ...props }));
 });
 Pressable.displayName = 'Pressable';
 export { Pressable };
-//# sourceMappingURL=pressable.js.map

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

@@ -1,2 +1 @@
 export { Progress, progressVariants, type ProgressProps } from './progress';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/progress/index.js

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

package/dist/components/progress/progress.d.ts

@@ -1,53 +1,28 @@
-import React from 'react';
-import { View, type ViewProps } from 'react-native';
+import { type ViewInstance, type ViewProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const progressVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        sm: string;
-        default: string;
-        lg: string;
+        sm: "h-1.5";
+        default: "h-3";
+        lg: "h-5";
     };
-}, undefined, "h-3 w-full overflow-hidden rounded-full bg-secondary", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "h-3 w-full overflow-hidden rounded-full bg-secondary", {
     size: {
-        sm: string;
-        default: string;
-        lg: string;
+        sm: "h-1.5";
+        default: "h-3";
+        lg: "h-5";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        sm: string;
-        default: string;
-        lg: string;
+        sm: "h-1.5";
+        default: "h-3";
+        lg: "h-5";
     };
-}>, {
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}, undefined, "h-3 w-full overflow-hidden rounded-full bg-secondary", import("tailwind-variants/dist/config.js").TVConfig<{
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}, {
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface ProgressProps extends ViewProps, VariantProps<typeof progressVariants> {
     value?: number;
     indicatorClassName?: string;
 }
-declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<View>>;
+declare const Progress: ForwardRefComponent<ViewInstance, ProgressProps>;
 export { Progress, progressVariants };
-//# sourceMappingURL=progress.d.ts.map

package/dist/components/progress/progress.js

@@ -18,8 +18,11 @@ const progressVariants = tv({
 });
 const Progress = React.forwardRef(({ className, value = 0, size, indicatorClassName, ...props }, ref) => {
     const clampedValue = Math.max(0, Math.min(100, value));
-    return (_jsx(View, { ref: ref, className: cn(progressVariants({ size }), className), accessibilityRole: "progressbar", accessibilityValue: { min: 0, max: 100, now: clampedValue }, ...props, children: _jsx(View, { className: cn('h-full rounded-full bg-primary', indicatorClassName), style: { width: `${clampedValue}%` } }) }));
+    return (_jsx(View, { ref: ref, className: cn(progressVariants({ size }), className), accessibilityRole: "progressbar", accessibilityValue: { min: 0, max: 100, now: clampedValue }, 
+        // A progress bar announcing "60 percent" of nothing is not useful, and a
+        // progressbar with no name fails WCAG 4.1.2. Callers should say what is
+        // progressing; this is the floor, not the answer.
+        accessibilityLabel: "Progress", ...props, children: _jsx(View, { className: cn('h-full rounded-full bg-primary', indicatorClassName), style: { width: `${clampedValue}%` } }) }));
 });
 Progress.displayName = 'Progress';
 export { Progress, progressVariants };
-//# sourceMappingURL=progress.js.map

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

@@ -1,2 +1 @@
 export { RadioGroup, RadioGroupItem, type RadioGroupProps, type RadioGroupItemProps, } from './radio-group';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,2 +1 @@
 export { RadioGroup, RadioGroupItem, } from './radio-group';
-//# sourceMappingURL=index.js.map

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

@@ -9,13 +9,12 @@ export interface RadioGroupItemProps extends PressableProps {
     value: string;
     className?: string;
 }
-declare function RadioGroup({ defaultValue, value: controlledValue, onValueChange, className, children, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function RadioGroup({ defaultValue, value: controlledValue, onValueChange, className, children, ...props }: RadioGroupProps): import("react").JSX.Element;
 declare namespace RadioGroup {
     var displayName: string;
 }
-declare function RadioGroupItem({ value: itemValue, className, ...props }: RadioGroupItemProps): import("react/jsx-runtime").JSX.Element;
+declare function RadioGroupItem({ value: itemValue, className, ...props }: RadioGroupItemProps): import("react").JSX.Element;
 declare namespace RadioGroupItem {
     var displayName: string;
 }
 export { RadioGroup, RadioGroupItem };
-//# sourceMappingURL=radio-group.d.ts.map

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

@@ -1,27 +1,36 @@
 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 { focusRing } from '../../lib/focus-ring';
+import { useVisualTokens } from '../../lib/visual-tokens';
 const RadioGroupContext = createContext({
     value: '',
     onValueChange: () => { },
 });
-// ─── Components ──────────────────────────────────────────────
 function RadioGroup({ 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(RadioGroupContext.Provider, { value: { value, onValueChange: handleValueChange }, children: _jsx(View, { className: cn('gap-2', className), ...props, children: children }) }));
+    }, [onValueChange]);
+    const contextValue = useMemo(() => ({ value, onValueChange: handleValueChange }), [handleValueChange, value]);
+    return (_jsx(RadioGroupContext.Provider, { value: contextValue, children: _jsx(View, { className: cn('gap-2', className), ...props, children: children }) }));
 }
 function RadioGroupItem({ value: itemValue, className, ...props }) {
     const { value, onValueChange } = useContext(RadioGroupContext);
+    const visual = useVisualTokens();
     const isSelected = value === itemValue;
-    return (_jsx(Pressable, { className: cn('h-5 w-5 rounded-full border-2 items-center justify-center', isSelected ? 'border-primary' : 'border-border', className), onPress: () => onValueChange(itemValue), hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }, ...props, children: isSelected && _jsx(View, { className: "h-2.5 w-2.5 rounded-full bg-primary" }) }));
+    const size = Math.max(18, Math.round(visual.controlHeightSm * 0.55));
+    const dotSize = Math.max(8, Math.round(size * 0.5));
+    return (_jsx(Pressable, { accessibilityRole: "radio", accessibilityState: { checked: isSelected }, "aria-checked": isSelected, className: cn('items-center justify-center', isSelected ? 'border-primary' : 'border-border', focusRing, className), style: {
+            width: size,
+            height: size,
+            borderWidth: visual.borderWidthEmphasis,
+            borderRadius: size / 2,
+        }, onPress: () => onValueChange(itemValue), hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }, ...props, children: isSelected && (_jsx(View, { className: "bg-primary", style: { width: dotSize, height: dotSize, borderRadius: dotSize / 2 } })) }));
 }
 RadioGroup.displayName = 'RadioGroup';
 RadioGroupItem.displayName = 'RadioGroupItem';
 export { RadioGroup, RadioGroupItem };
-//# sourceMappingURL=radio-group.js.map

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

@@ -1,2 +1 @@
 export { Row, rowVariants, type RowProps } from './row';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/row/index.js

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

package/dist/components/row/row.d.ts

@@ -1,185 +1,84 @@
-import React from 'react';
-import { View, type ViewProps } from 'react-native';
+import { type ViewInstance, type ViewProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const rowVariants: import("tailwind-variants").TVReturnType<{
     gap: {
-        none: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
+        none: "gap-0";
+        xs: "gap-1";
+        sm: "gap-2";
+        md: "gap-3";
+        lg: "gap-4";
+        xl: "gap-6";
+        '2xl': "gap-8";
     };
     align: {
-        start: string;
-        center: string;
-        end: string;
-        stretch: string;
-        baseline: string;
+        start: "items-start";
+        center: "items-center";
+        end: "items-end";
+        stretch: "items-stretch";
+        baseline: "items-baseline";
     };
     justify: {
-        start: string;
-        center: string;
-        end: string;
-        between: string;
-        around: string;
-        evenly: string;
-    };
-}, undefined, "flex-row", import("tailwind-variants/dist/config.js").TVConfig<{
-    gap: {
-        none: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-    };
-    align: {
-        start: string;
-        center: string;
-        end: string;
-        stretch: string;
-        baseline: string;
-    };
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-        between: string;
-        around: string;
-        evenly: string;
-    };
-}, {
+        start: "justify-start";
+        center: "justify-center";
+        end: "justify-end";
+        between: "justify-between";
+        around: "justify-around";
+        evenly: "justify-evenly";
+    };
+}, undefined, "flex-row", {
     gap: {
-        none: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
+        none: "gap-0";
+        xs: "gap-1";
+        sm: "gap-2";
+        md: "gap-3";
+        lg: "gap-4";
+        xl: "gap-6";
+        '2xl': "gap-8";
     };
     align: {
-        start: string;
-        center: string;
-        end: string;
-        stretch: string;
-        baseline: string;
+        start: "items-start";
+        center: "items-center";
+        end: "items-end";
+        stretch: "items-stretch";
+        baseline: "items-baseline";
     };
     justify: {
-        start: string;
-        center: string;
-        end: string;
-        between: string;
-        around: string;
-        evenly: string;
-    };
-}>, {
-    gap: {
-        none: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-    };
-    align: {
-        start: string;
-        center: string;
-        end: string;
-        stretch: string;
-        baseline: string;
-    };
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-        between: string;
-        around: string;
-        evenly: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
+        start: "justify-start";
+        center: "justify-center";
+        end: "justify-end";
+        between: "justify-between";
+        around: "justify-around";
+        evenly: "justify-evenly";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     gap: {
-        none: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
+        none: "gap-0";
+        xs: "gap-1";
+        sm: "gap-2";
+        md: "gap-3";
+        lg: "gap-4";
+        xl: "gap-6";
+        '2xl': "gap-8";
     };
     align: {
-        start: string;
-        center: string;
-        end: string;
-        stretch: string;
-        baseline: string;
+        start: "items-start";
+        center: "items-center";
+        end: "items-end";
+        stretch: "items-stretch";
+        baseline: "items-baseline";
     };
     justify: {
-        start: string;
-        center: string;
-        end: string;
-        between: string;
-        around: string;
-        evenly: string;
-    };
-}, undefined, "flex-row", import("tailwind-variants/dist/config.js").TVConfig<{
-    gap: {
-        none: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-    };
-    align: {
-        start: string;
-        center: string;
-        end: string;
-        stretch: string;
-        baseline: string;
-    };
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-        between: string;
-        around: string;
-        evenly: string;
-    };
-}, {
-    gap: {
-        none: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-    };
-    align: {
-        start: string;
-        center: string;
-        end: string;
-        stretch: string;
-        baseline: string;
-    };
-    justify: {
-        start: string;
-        center: string;
-        end: string;
-        between: string;
-        around: string;
-        evenly: string;
-    };
-}>, unknown, unknown, undefined>>;
+        start: "justify-start";
+        center: "justify-center";
+        end: "justify-end";
+        between: "justify-between";
+        around: "justify-around";
+        evenly: "justify-evenly";
+    };
+}, undefined>>;
 export interface RowProps extends Omit<ViewProps, 'className'>, VariantProps<typeof rowVariants> {
     className?: string;
 }
-declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<View>>;
+declare const Row: ForwardRefComponent<ViewInstance, RowProps>;
 export { Row, rowVariants };
-//# sourceMappingURL=row.d.ts.map

package/dist/components/row/row.js

@@ -42,4 +42,3 @@ const Row = React.forwardRef(({ className, gap, align, justify, ...props }, ref)
 });
 Row.displayName = 'Row';
 export { Row, rowVariants };
-//# sourceMappingURL=row.js.map

package/dist/components/segmented-control/index.d.ts

@@ -1,2 +1 @@
 export { SegmentedControl, SegmentedControlItem, SegmentedControlItemText, segmentedControlVariants, segmentedControlItemVariants, segmentedControlItemTextVariants, type SegmentedControlProps, type SegmentedControlItemProps, type SegmentedControlItemTextProps, } from './segmented-control';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/segmented-control/index.js

@@ -1,2 +1 @@
 export { SegmentedControl, SegmentedControlItem, SegmentedControlItemText, segmentedControlVariants, segmentedControlItemVariants, segmentedControlItemTextVariants, } from './segmented-control';
-//# sourceMappingURL=index.js.map