@thewhileloop/whileui 2.0.0 → 3.0.0

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

@@ -1,184 +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 };

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", 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", 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-w-0 flex-row items-center justify-center", 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-w-0 flex-row items-center justify-center", 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;

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { ScrollView, View, type StyleProp, type ViewStyle } 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 {
@@ -55,31 +56,18 @@ 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>): React.JSX.Element;
-declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<View>>;
-declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<View>>;
+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

package/dist/components/select/select.js

@@ -35,7 +35,7 @@ const SelectTrigger = React.forwardRef(({ className, children, style: styleProp,
         ]), ...props, children: [_jsx(_Fragment, { children: children }), _jsx(View, { className: "border-muted-foreground h-2 w-2 rotate-45 border-b-2 border-r-2" })] }));
 });
 SelectTrigger.displayName = 'SelectTrigger';
-function SelectValue({ className, placeholder = 'Select...', ...props }) {
+function SelectValue({ className, placeholder = 'Select...' }) {
     const { value } = SelectPrimitive.useRootContext();
     const visual = useVisualTokens();
     // The colour is set on a wrapper and inherited, rather than on the primitive itself.
@@ -44,7 +44,7 @@ function SelectValue({ className, placeholder = 'Select...', ...props }) {
     // user-agent default black — 1.2:1 on a dark surface. Rendering the label ourselves
     // instead would fix the colour and lose the value: Radix owns the selection on web,
     // and `useRootContext().value` is not populated there.
-    return (_jsx(Text, { className: cn('text-foreground', !value && 'text-muted-foreground', className), style: typographyStyle(visual, 'body'), numberOfLines: 1, children: _jsx(SelectPrimitive.Value, { placeholder: placeholder, ...props }) }));
+    return (_jsx(Text, { className: cn('text-foreground', !value && 'text-muted-foreground', className), style: typographyStyle(visual, 'body'), numberOfLines: 1, children: _jsx(SelectPrimitive.Value, { placeholder: placeholder }) }));
 }
 const SelectContent = React.forwardRef(({ className, children, portalHost, position = 'popper', insets, style: styleProp, frosted = false, blurIntensity, blurTintToken, ...props }, ref) => {
     const frostedSurface = useFrostedSurface({