@thewhileloop/whileui 2.0.0 → 4.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", 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

@@ -19,11 +19,6 @@ const SelectTrigger = React.forwardRef(({ className, children, style: styleProp,
     const interaction = useInteractionTokens();
     const visual = useVisualTokens();
     return (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('border-border bg-muted flex w-full flex-row items-center justify-between gap-2 shadow-sm active:bg-state-pressed', focusRing, props.disabled && '', className), 
-        // Pass an array unless the caller actually gave a callback. On web this primitive
-        // is wrapped in a Slot that merges `style` by object spread, which turns a
-        // function into `{}` and silently drops every style — the trigger rendered 24px
-        // tall with no padding, border or radius. A callback is still honoured on native,
-        // where dropping it was the original bug.
         // Flattened, not an array. On web this primitive is merged through a Slot that
         // spreads `style`, and spreading an array yields { 0: …, 1: … } — numeric keys
         // that reach the DOM as indexed style properties and throw. The Select rendered
@@ -35,7 +30,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 +39,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({

package/dist/components/separator/separator.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { View, type ViewProps } from 'react-native';
+import { type ViewInstance, type ViewProps } from 'react-native';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 export interface SeparatorProps extends ViewProps {
     orientation?: 'horizontal' | 'vertical';
 }
-declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<View>>;
+declare const Separator: ForwardRefComponent<ViewInstance, SeparatorProps>;
 export { Separator };

package/dist/components/skeleton/skeleton.d.ts

@@ -2,40 +2,20 @@ import { type ViewProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
 declare const skeletonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        pulse: string;
-        shimmer: string;
+        pulse: "";
+        shimmer: "";
     };
-}, undefined, "bg-muted", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "bg-muted", {
     variant: {
-        pulse: string;
-        shimmer: string;
+        pulse: "";
+        shimmer: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        pulse: string;
-        shimmer: string;
+        pulse: "";
+        shimmer: "";
     };
-}>, {
-    variant: {
-        pulse: string;
-        shimmer: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        pulse: string;
-        shimmer: string;
-    };
-}, undefined, "bg-muted", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        pulse: string;
-        shimmer: string;
-    };
-}, {
-    variant: {
-        pulse: string;
-        shimmer: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface SkeletonProps extends ViewProps, VariantProps<typeof skeletonVariants> {
     className?: string;
 }

package/dist/components/spinner/spinner.d.ts

@@ -2,47 +2,23 @@ import { type ActivityIndicatorProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
 declare const spinnerVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        sm: string;
-        default: string;
-        lg: string;
+        sm: "";
+        default: "";
+        lg: "";
     };
-}, undefined, "", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "", {
     size: {
-        sm: string;
-        default: string;
-        lg: string;
+        sm: "";
+        default: "";
+        lg: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        sm: string;
-        default: string;
-        lg: string;
+        sm: "";
+        default: "";
+        lg: "";
     };
-}>, {
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}, undefined, "", 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 SpinnerProps extends Omit<ActivityIndicatorProps, 'size'>, VariantProps<typeof spinnerVariants> {
     className?: string;
 }