@thewhileloop/whileui 1.2.3 → 3.0.0

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

@@ -2,308 +2,136 @@ import React from 'react';
 import { type PressableProps, type TextProps, type ViewProps } from 'react-native';
 declare const segmentedControlVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        pill: string;
+        default: "";
+        pill: "";
     };
     wrap: {
-        true: string;
-        false: string;
+        true: "flex-wrap justify-center gap-1";
+        false: "flex-nowrap gap-1";
     };
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}, undefined, "w-full flex-row items-center rounded-lg bg-muted p-1", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "w-full flex-row items-center", {
     variant: {
-        default: string;
-        pill: string;
+        default: "";
+        pill: "";
     };
     wrap: {
-        true: string;
-        false: string;
+        true: "flex-wrap justify-center gap-1";
+        false: "flex-nowrap gap-1";
     };
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        pill: string;
+        default: "";
+        pill: "";
     };
     wrap: {
-        true: string;
-        false: string;
+        true: "flex-wrap justify-center gap-1";
+        false: "flex-nowrap gap-1";
     };
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}>, {
-    variant: {
-        default: string;
-        pill: string;
-    };
-    wrap: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        compact: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        pill: string;
-    };
-    wrap: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        compact: string;
-    };
-}, undefined, "w-full flex-row items-center rounded-lg bg-muted p-1", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        pill: string;
-    };
-    wrap: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        compact: string;
-    };
-}, {
-    variant: {
-        default: string;
-        pill: string;
-    };
-    wrap: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        compact: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 declare const segmentedControlItemVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        pill: string;
-    };
-    selected: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        compact: string;
-    };
-    disabled: {
-        true: string;
-        false: string;
-    };
-    wrap: {
-        true: string;
-        false: string;
-    };
-}, undefined, "min-h-10 min-w-0 flex-row items-center justify-center px-3", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        pill: string;
-    };
-    selected: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        compact: string;
-    };
-    disabled: {
-        true: string;
-        false: string;
-    };
-    wrap: {
-        true: string;
-        false: string;
-    };
-}, {
-    variant: {
-        default: string;
-        pill: string;
-    };
-    selected: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        compact: string;
-    };
-    disabled: {
-        true: string;
-        false: string;
-    };
-    wrap: {
-        true: string;
-        false: string;
-    };
-}>, {
-    variant: {
-        default: string;
-        pill: string;
-    };
-    selected: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        compact: string;
-    };
-    disabled: {
-        true: string;
-        false: string;
-    };
-    wrap: {
-        true: string;
-        false: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        pill: string;
+        default: "";
+        pill: "";
     };
     selected: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
     disabled: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
     wrap: {
-        true: string;
-        false: string;
+        true: "grow-0";
+        false: "flex-1";
     };
-}, undefined, "min-h-10 min-w-0 flex-row items-center justify-center px-3", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "min-w-0 flex-row items-center justify-center", {
     variant: {
-        default: string;
-        pill: string;
+        default: "";
+        pill: "";
     };
     selected: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
     disabled: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
     wrap: {
-        true: string;
-        false: string;
+        true: "grow-0";
+        false: "flex-1";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        pill: string;
+        default: "";
+        pill: "";
     };
     selected: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
     disabled: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
     wrap: {
-        true: string;
-        false: string;
+        true: "grow-0";
+        false: "flex-1";
     };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 declare const segmentedControlItemTextVariants: import("tailwind-variants").TVReturnType<{
     selected: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        compact: string;
-    };
-}, undefined, "font-medium", import("tailwind-variants/dist/config.js").TVConfig<{
-    selected: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        compact: string;
-    };
-}, {
-    selected: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        compact: string;
-    };
-}>, {
-    selected: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        compact: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    selected: {
-        true: string;
-        false: string;
+        true: "text-foreground";
+        false: "text-muted-foreground";
     };
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}, undefined, "font-medium", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "font-medium", {
     selected: {
-        true: string;
-        false: string;
+        true: "text-foreground";
+        false: "text-muted-foreground";
     };
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     selected: {
-        true: string;
-        false: string;
+        true: "text-foreground";
+        false: "text-muted-foreground";
     };
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface SegmentedControlProps extends ViewProps {
     value?: string;
     defaultValue?: string;
@@ -322,17 +150,16 @@ export interface SegmentedControlItemProps extends Omit<PressableProps, 'childre
 export interface SegmentedControlItemTextProps extends TextProps {
     className?: string;
 }
-declare function SegmentedControl({ value: controlledValue, defaultValue, onValueChange, variant, wrap, size, disabled, className, children, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentedControl({ value: controlledValue, defaultValue, onValueChange, variant, wrap, size, disabled, className, children, style: styleProp, ...props }: SegmentedControlProps): React.JSX.Element;
 declare namespace SegmentedControl {
     var displayName: string;
 }
-declare function SegmentedControlItem({ value: itemValue, className, children, disabled: itemDisabled, style: styleProp, ...props }: SegmentedControlItemProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentedControlItem({ value: itemValue, className, children, disabled: itemDisabled, style: styleProp, ...props }: SegmentedControlItemProps): React.JSX.Element;
 declare namespace SegmentedControlItem {
     var displayName: string;
 }
-declare function SegmentedControlItemText({ className, ...props }: SegmentedControlItemTextProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentedControlItemText({ className, style, ...props }: SegmentedControlItemTextProps): React.JSX.Element;
 declare namespace SegmentedControlItemText {
     var displayName: string;
 }
 export { SegmentedControl, SegmentedControlItem, SegmentedControlItemText, segmentedControlVariants, segmentedControlItemVariants, segmentedControlItemTextVariants, };
-//# sourceMappingURL=segmented-control.d.ts.map

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

@@ -1,16 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { createContext, useContext, useMemo, useState } from 'react';
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { Pressable, Text, View, } 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 segmentedControlVariants = tv({
-    base: 'w-full flex-row items-center rounded-lg bg-muted p-1',
+    base: 'w-full flex-row items-center',
     variants: {
         variant: {
-            default: 'rounded-lg',
-            pill: 'rounded-full',
+            default: '',
+            pill: '',
         },
         wrap: {
             true: 'flex-wrap justify-center gap-1',
@@ -28,19 +31,19 @@ const segmentedControlVariants = tv({
     },
 });
 const segmentedControlItemVariants = tv({
-    base: 'min-h-10 min-w-0 flex-row items-center justify-center px-3',
+    base: 'min-w-0 flex-row items-center justify-center',
     variants: {
         variant: {
-            default: 'rounded-md',
-            pill: 'rounded-full',
+            default: '',
+            pill: '',
         },
         selected: {
-            true: 'bg-background shadow-sm',
-            false: 'bg-transparent',
+            true: '',
+            false: '',
         },
         size: {
-            default: 'py-2',
-            compact: 'min-h-9 py-1.5',
+            default: '',
+            compact: '',
         },
         disabled: {
             true: '',
@@ -67,8 +70,8 @@ const segmentedControlItemTextVariants = tv({
             false: 'text-muted-foreground',
         },
         size: {
-            default: 'text-sm',
-            compact: 'text-xs',
+            default: '',
+            compact: '',
         },
     },
     defaultVariants: {
@@ -76,6 +79,26 @@ const segmentedControlItemTextVariants = tv({
         size: 'default',
     },
 });
+function getSegmentedContainerStyle(visual, colors, variant) {
+    const inset = Math.max(4, Math.round(visual.controlPaddingYSm * 0.5));
+    return {
+        borderRadius: variant === 'pill' ? 999 : visual.radiusXl,
+        backgroundColor: colors.muted,
+        padding: inset,
+    };
+}
+function getSegmentedItemStyle(visual, colors, size, variant, selected) {
+    const compact = size === 'compact';
+    return {
+        minHeight: compact ? visual.controlHeightSm : visual.controlHeightDefault,
+        borderRadius: variant === 'pill' ? 999 : visual.radiusLg,
+        paddingHorizontal: compact ? visual.controlPaddingXSm : visual.controlPaddingXDefault,
+        paddingVertical: compact ? visual.controlPaddingYSm : visual.controlPaddingYDefault,
+        borderWidth: selected ? visual.borderWidthHairline : 0,
+        borderColor: selected ? colors.surfaceBorder : 'transparent',
+        backgroundColor: selected ? colors.surfaceElevated : 'transparent',
+    };
+}
 const SegmentedControlContext = createContext({
     value: '',
     onValueChange: () => { },
@@ -88,20 +111,22 @@ const SegmentedControlItemContext = createContext({
     selected: false,
     size: 'default',
 });
-function SegmentedControl({ value: controlledValue, defaultValue = '', onValueChange, variant = 'default', wrap = 'auto', size = 'default', disabled = false, className, children, ...props }) {
+function SegmentedControl({ value: controlledValue, defaultValue = '', onValueChange, variant = 'default', wrap = 'auto', size = 'default', disabled = false, className, children, style: styleProp, ...props }) {
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
     const [internalValue, setInternalValue] = useState(defaultValue);
     const value = controlledValue ?? internalValue;
     const itemCount = useMemo(() => React.Children.toArray(children).filter((child) => React.isValidElement(child)).length, [children]);
     const shouldWrap = wrap === 'auto' ? itemCount > 3 : wrap;
-    const handleValueChange = (nextValue) => {
+    const handleValueChange = useCallback((nextValue) => {
         if (disabled || value === nextValue) {
             return;
         }
         setInternalValue(nextValue);
         onValueChange?.(nextValue);
-    };
-    const contextValue = useMemo(() => ({ value, onValueChange: handleValueChange, variant, size, wrap: shouldWrap, disabled }), [value, variant, size, shouldWrap, disabled]);
-    return (_jsx(SegmentedControlContext.Provider, { value: contextValue, children: _jsx(View, { className: cn(segmentedControlVariants({ variant, wrap: shouldWrap, size }), className), accessibilityRole: "radiogroup", ...props, children: children }) }));
+    }, [disabled, onValueChange, value]);
+    const contextValue = useMemo(() => ({ value, onValueChange: handleValueChange, variant, size, wrap: shouldWrap, disabled }), [disabled, handleValueChange, shouldWrap, size, value, variant]);
+    return (_jsx(SegmentedControlContext.Provider, { value: contextValue, children: _jsx(View, { className: cn(segmentedControlVariants({ variant, wrap: shouldWrap, size }), className), style: [getSegmentedContainerStyle(visual, colors, variant), styleProp], accessibilityRole: "radiogroup", ...props, children: children }) }));
 }
 function SegmentedControlItem({ value: itemValue, className, children, disabled: itemDisabled, style: styleProp, ...props }) {
     const { value, onValueChange, variant, size, wrap, disabled } = useContext(SegmentedControlContext);
@@ -109,6 +134,7 @@ function SegmentedControlItem({ value: itemValue, className, children, disabled:
     const finalDisabled = disabled || Boolean(itemDisabled);
     const interaction = useInteractionTokens();
     const visual = useVisualTokens();
+    const colors = useThemeColors();
     const interactiveStyle = withInteractivePressableStyle(styleProp, interaction, {
         disabled: finalDisabled,
         pressedVariant: 'default',
@@ -116,23 +142,30 @@ function SegmentedControlItem({ value: itemValue, className, children, disabled:
     const wrapBasisStyle = wrap
         ? { flexBasis: `${visual.segmentedWrapBasisRatio * 100}%` }
         : undefined;
-    return (_jsx(SegmentedControlItemContext.Provider, { value: { selected, size }, children: _jsx(Pressable, { className: cn(segmentedControlItemVariants({
+    const tokenStyle = getSegmentedItemStyle(visual, colors, size, variant, selected);
+    const contextValue = useMemo(() => ({ selected, size }), [selected, size]);
+    return (_jsx(SegmentedControlItemContext.Provider, { value: contextValue, children: _jsx(Pressable, { className: cn(segmentedControlItemVariants({
                 variant,
                 selected,
                 size,
                 disabled: finalDisabled,
                 wrap,
-            }), className), onPress: () => onValueChange(itemValue), accessibilityRole: "radio", accessibilityState: { selected, disabled: finalDisabled }, disabled: finalDisabled, style: (state) => {
+            }), focusRingInset, className), onPress: () => onValueChange(itemValue), accessibilityRole: "radio", 
+            // A radio is checked, not selected. `selected` maps to `aria-selected`, which is
+            // not a valid attribute on `role="radio"` — assistive technology could not tell
+            // which segment was active. `checked` also carries the state correctly on native.
+            accessibilityState: { checked: selected, disabled: finalDisabled }, "aria-checked": selected, disabled: finalDisabled, style: (state) => {
                 const baseStyle = typeof interactiveStyle === 'function' ? interactiveStyle(state) : interactiveStyle;
-                return [baseStyle, wrapBasisStyle ?? null];
+                return [baseStyle, tokenStyle, wrapBasisStyle ?? null];
             }, hitSlop: 4, ...props, children: typeof children === 'string' ? (_jsx(SegmentedControlItemText, { children: children })) : (children) }) }));
 }
-function SegmentedControlItemText({ className, ...props }) {
+function SegmentedControlItemText({ className, style, ...props }) {
     const { selected, size } = useContext(SegmentedControlItemContext);
-    return (_jsx(Text, { className: cn(segmentedControlItemTextVariants({ selected, size }), className), numberOfLines: 1, ...props }));
+    const visual = useVisualTokens();
+    const typography = typographyStyle(visual, size === 'compact' ? 'caption' : 'label');
+    return (_jsx(Text, { className: cn(segmentedControlItemTextVariants({ selected, size }), className), style: [typography, style], numberOfLines: 1, ...props }));
 }
 SegmentedControl.displayName = 'SegmentedControl';
 SegmentedControlItem.displayName = 'SegmentedControlItem';
 SegmentedControlItemText.displayName = 'SegmentedControlItemText';
 export { SegmentedControl, SegmentedControlItem, SegmentedControlItemText, segmentedControlVariants, segmentedControlItemVariants, segmentedControlItemTextVariants, };
-//# sourceMappingURL=segmented-control.js.map

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

@@ -1,2 +1 @@
 export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectItemIcon, SelectGroup, SelectLabel, SelectSeparator, NativeSelectScrollView, type SelectOption, type SelectTriggerRef, type SelectProps, type SelectTriggerProps, type SelectValueProps, type SelectContentProps, type SelectItemProps, type SelectItemIconProps, type SelectGroupProps, type SelectLabelProps, type SelectSeparatorProps, } from './select';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/select/index.js

@@ -1,2 +1 @@
 export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectItemIcon, SelectGroup, SelectLabel, SelectSeparator, NativeSelectScrollView, } from './select';
-//# sourceMappingURL=index.js.map

package/dist/components/select/select.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { ScrollView, View } from 'react-native';
+import { ScrollView, type StyleProp, type ViewStyle } from 'react-native';
 import * as SelectPrimitive from '@rn-primitives/select';
 import { type FrostedSurfaceProps } from '../../lib/frosted-surface';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 export type SelectOption = SelectPrimitive.Option;
 export type SelectTriggerRef = SelectPrimitive.TriggerRef;
 export interface SelectProps {
@@ -12,8 +13,15 @@ export interface SelectProps {
     disabled?: boolean;
     children: React.ReactNode;
 }
-export interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+export interface SelectTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'style'> {
     className?: string;
+    /**
+     * Object form only. On web this primitive is merged through a Slot that spreads
+     * `style`, which cannot carry a state callback — a function silently becomes `{}` and
+     * every style is lost. Rejecting it at compile time is the honest contract, and it is
+     * the same on both platforms so the API does not diverge.
+     */
+    style?: StyleProp<ViewStyle>;
 }
 export interface SelectValueProps {
     className?: string;
@@ -29,9 +37,11 @@ export interface SelectContentProps extends React.ComponentPropsWithoutRef<typeo
         right?: number;
     };
 }
-export interface SelectItemProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
+export interface SelectItemProps extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>, 'style'> {
     className?: string;
     children?: React.ReactNode;
+    /** Object form only — see `SelectTriggerProps.style`. */
+    style?: StyleProp<ViewStyle>;
 }
 export interface SelectItemIconProps {
     className?: string;
@@ -46,35 +56,21 @@ export interface SelectLabelProps extends React.ComponentPropsWithoutRef<typeof
 export interface SelectSeparatorProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {
     className?: string;
 }
-declare const Select: React.ForwardRefExoticComponent<import("react-native").ViewProps & {
-    asChild?: boolean;
-} & {
-    value?: import("@rn-primitives/select").Option;
-    defaultValue?: import("@rn-primitives/select").Option;
-    onValueChange?: (option: import("@rn-primitives/select").Option) => void;
-    onOpenChange?: (open: boolean) => void;
-    disabled?: boolean;
-    dir?: "ltr" | "rtl";
-    name?: string;
-    required?: boolean;
-} & React.RefAttributes<View>>;
-declare const SelectGroup: React.ForwardRefExoticComponent<import("react-native").ViewProps & {
-    asChild?: boolean;
-} & React.RefAttributes<View>>;
-declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<SelectPrimitive.TriggerRef>>;
-declare function SelectValue({ className, placeholder, ...props }: SelectValueProps & React.RefAttributes<SelectPrimitive.ValueRef>): import("react/jsx-runtime").JSX.Element;
-declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<View>>;
-declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<View>>;
-declare function SelectItemIcon({ className, children }: SelectItemIconProps): import("react/jsx-runtime").JSX.Element;
+declare const Select: typeof SelectPrimitive.Root;
+declare const SelectGroup: typeof SelectPrimitive.Group;
+declare const SelectTrigger: ForwardRefComponent<SelectTriggerRef, SelectTriggerProps>;
+declare function SelectValue({ className, placeholder }: SelectValueProps): React.JSX.Element;
+declare const SelectContent: ForwardRefComponent<SelectPrimitive.ContentRef, SelectContentProps>;
+declare const SelectItem: ForwardRefComponent<SelectPrimitive.ItemRef, SelectItemProps>;
+declare function SelectItemIcon({ className, children }: SelectItemIconProps): React.JSX.Element;
 declare namespace SelectItemIcon {
     var displayName: string;
 }
-declare const SelectLabel: React.ForwardRefExoticComponent<SelectLabelProps & React.RefAttributes<import("react-native").Text>>;
-declare const SelectSeparator: React.ForwardRefExoticComponent<SelectSeparatorProps & React.RefAttributes<View>>;
+declare const SelectLabel: ForwardRefComponent<SelectPrimitive.LabelRef, SelectLabelProps>;
+declare const SelectSeparator: ForwardRefComponent<SelectPrimitive.SeparatorRef, SelectSeparatorProps>;
 /**
  * @platform Native only
  * Returns the children on web
  */
-declare function NativeSelectScrollView({ className, children, ...props }: React.ComponentProps<typeof ScrollView>): import("react/jsx-runtime").JSX.Element;
+declare function NativeSelectScrollView({ className, children, ...props }: React.ComponentProps<typeof ScrollView>): React.JSX.Element;
 export { NativeSelectScrollView, Select, SelectContent, SelectGroup, SelectItem, SelectItemIcon, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, };
-//# sourceMappingURL=select.d.ts.map