@thewhileloop/whileui 2.0.0 → 3.0.0

package/dist/components/textarea/textarea.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { TextInput } from 'react-native';
+import { TextInput, } from 'react-native';
 import { cn } from '../../lib/cn';
 import { focusRing } from '../../lib/focus-ring';
 import { tv } from '../../lib/tv';

package/dist/components/toast/toast.d.ts

@@ -25,47 +25,23 @@ export interface ToastProviderProps {
 export declare function ToastProvider({ children }: ToastProviderProps): React.JSX.Element;
 declare const toastVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        destructive: string;
-        success: string;
+        default: "border-border bg-background";
+        destructive: "border-destructive bg-destructive";
+        success: "border-success bg-success";
     };
-}, undefined, "w-full flex-row items-center justify-between border", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "w-full flex-row items-center justify-between border", {
     variant: {
-        default: string;
-        destructive: string;
-        success: string;
+        default: "border-border bg-background";
+        destructive: "border-destructive bg-destructive";
+        success: "border-success bg-success";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        destructive: string;
-        success: string;
+        default: "border-border bg-background";
+        destructive: "border-destructive bg-destructive";
+        success: "border-success bg-success";
     };
-}>, {
-    variant: {
-        default: string;
-        destructive: string;
-        success: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        destructive: string;
-        success: string;
-    };
-}, undefined, "w-full flex-row items-center justify-between border", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        destructive: string;
-        success: string;
-    };
-}, {
-    variant: {
-        default: string;
-        destructive: string;
-        success: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface ToastProps extends ViewProps, VariantProps<typeof toastVariants> {
     toast: ToastData;
     onDismiss: () => void;

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

@@ -3,174 +3,78 @@ import { type PressableProps, type TextProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
 declare const toggleVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        outline: string;
+        default: "bg-transparent";
+        outline: "border border-input bg-transparent";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "";
+        sm: "";
+        lg: "";
     };
     pressed: {
-        true: string;
-        false: string;
+        true: "bg-accent";
+        false: "";
     };
-}, undefined, "inline-flex items-center justify-center active:bg-accent", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "inline-flex items-center justify-center active:bg-accent", {
     variant: {
-        default: string;
-        outline: string;
+        default: "bg-transparent";
+        outline: "border border-input bg-transparent";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "";
+        sm: "";
+        lg: "";
     };
     pressed: {
-        true: string;
-        false: string;
+        true: "bg-accent";
+        false: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        outline: string;
+        default: "bg-transparent";
+        outline: "border border-input bg-transparent";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "";
+        sm: "";
+        lg: "";
     };
     pressed: {
-        true: string;
-        false: string;
+        true: "bg-accent";
+        false: "";
     };
-}>, {
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-    pressed: {
-        true: string;
-        false: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-    pressed: {
-        true: string;
-        false: string;
-    };
-}, undefined, "inline-flex items-center justify-center active:bg-accent", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-    pressed: {
-        true: string;
-        false: string;
-    };
-}, {
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-    pressed: {
-        true: string;
-        false: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 declare const toggleTextVariants: import("tailwind-variants").TVReturnType<{
     pressed: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}, undefined, "font-medium", import("tailwind-variants/dist/config.js").TVConfig<{
-    pressed: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}, {
-    pressed: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}>, {
-    pressed: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    pressed: {
-        true: string;
-        false: string;
+        true: "text-accent-foreground";
+        false: "text-muted-foreground";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "";
+        sm: "";
+        lg: "";
     };
-}, undefined, "font-medium", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "font-medium", {
     pressed: {
-        true: string;
-        false: string;
+        true: "text-accent-foreground";
+        false: "text-muted-foreground";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "";
+        sm: "";
+        lg: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     pressed: {
-        true: string;
-        false: string;
+        true: "text-accent-foreground";
+        false: "text-muted-foreground";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "";
+        sm: "";
+        lg: "";
     };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface ToggleProps extends Omit<PressableProps, 'children'> {
     pressed?: boolean;
     defaultPressed?: boolean;

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

@@ -3,174 +3,78 @@ import { type ViewProps, type PressableProps, type TextProps } from 'react-nativ
 type ToggleGroupType = 'single' | 'multiple';
 declare const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        outline: string;
+        default: "bg-transparent";
+        outline: "border border-input bg-transparent";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "";
+        sm: "";
+        lg: "";
     };
     pressed: {
-        true: string;
-        false: string;
+        true: "bg-accent";
+        false: "";
     };
-}, undefined, "inline-flex items-center justify-center", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "inline-flex items-center justify-center", {
     variant: {
-        default: string;
-        outline: string;
+        default: "bg-transparent";
+        outline: "border border-input bg-transparent";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "";
+        sm: "";
+        lg: "";
     };
     pressed: {
-        true: string;
-        false: string;
+        true: "bg-accent";
+        false: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        outline: string;
+        default: "bg-transparent";
+        outline: "border border-input bg-transparent";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "";
+        sm: "";
+        lg: "";
     };
     pressed: {
-        true: string;
-        false: string;
+        true: "bg-accent";
+        false: "";
     };
-}>, {
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-    pressed: {
-        true: string;
-        false: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-    pressed: {
-        true: string;
-        false: string;
-    };
-}, undefined, "inline-flex items-center justify-center", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-    pressed: {
-        true: string;
-        false: string;
-    };
-}, {
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-    pressed: {
-        true: string;
-        false: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 declare const toggleGroupItemTextVariants: import("tailwind-variants").TVReturnType<{
     pressed: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}, undefined, "font-medium", import("tailwind-variants/dist/config.js").TVConfig<{
-    pressed: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}, {
-    pressed: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}>, {
-    pressed: {
-        true: string;
-        false: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    pressed: {
-        true: string;
-        false: string;
+        true: "text-accent-foreground";
+        false: "text-muted-foreground";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "";
+        sm: "";
+        lg: "";
     };
-}, undefined, "font-medium", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "font-medium", {
     pressed: {
-        true: string;
-        false: string;
+        true: "text-accent-foreground";
+        false: "text-muted-foreground";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "";
+        sm: "";
+        lg: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     pressed: {
-        true: string;
-        false: string;
+        true: "text-accent-foreground";
+        false: "text-muted-foreground";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
+        default: "";
+        sm: "";
+        lg: "";
     };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface ToggleGroupProps extends ViewProps {
     type?: ToggleGroupType;
     defaultValue?: string | string[];

package/dist/components/tooltip/tooltip.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as TooltipPrimitive from '@rn-primitives/tooltip';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 export interface TooltipProps {
     onOpenChange?: (open: boolean) => void;
     delayDuration?: number;
@@ -15,6 +16,6 @@ export interface TooltipContentProps extends React.ComponentPropsWithoutRef<type
     portalHost?: string;
 }
 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>>;
+declare const TooltipTrigger: ForwardRefComponent<TooltipPrimitive.TriggerRef, TooltipTriggerProps>;
+declare const TooltipContent: ForwardRefComponent<TooltipPrimitive.ContentRef, TooltipContentProps>;
 export { Tooltip, TooltipTrigger, TooltipContent };

package/dist/components/view/view.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { View as RNView, type ViewProps as RNViewProps } from 'react-native';
+import { type ViewInstance, type ViewProps as RNViewProps } from 'react-native';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 export interface ViewProps extends RNViewProps {
 }
-declare const View: React.ForwardRefExoticComponent<ViewProps & React.RefAttributes<RNView>>;
+declare const View: ForwardRefComponent<ViewInstance, ViewProps>;
 export { View };

package/dist/lib/ref-types.d.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+/** A named public shape for ref-forwarding components under React Native's Strict API. */
+export type ForwardRefComponent<TInstance, TProps> = React.ForwardRefExoticComponent<React.PropsWithoutRef<TProps> & React.RefAttributes<TInstance>>;

package/dist/lib/ref-types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/theme-bridge.d.ts

@@ -8,7 +8,6 @@ export interface ThemeBridgeProps {
     mode?: ThemeMode;
     initialMode?: ThemeMode;
     adapter?: ThemeBridgeAdapter;
-    onModeChange?: (mode: ThemeMode) => void;
 }
 export interface UseThemeBridgeOptions {
     initialMode?: ThemeMode;
@@ -24,5 +23,8 @@ export declare function applyThemeMode(mode: ThemeMode): void;
 export declare function resolveThemeMode(adapter?: ThemeBridgeAdapter, fallback?: ThemeMode): Promise<ThemeMode>;
 export declare function syncThemeMode(mode: ThemeMode, adapter?: ThemeBridgeAdapter): Promise<ThemeMode>;
 export declare function useThemeBridge({ initialMode, adapter, }?: UseThemeBridgeOptions): UseThemeBridgeResult;
-export declare function ThemeBridge({ mode: controlledMode, initialMode, adapter, onModeChange, }: ThemeBridgeProps): null;
+export declare function ThemeBridge({ mode, initialMode, adapter }: ThemeBridgeProps): import("react").FunctionComponentElement<Pick<ThemeBridgeProps, "initialMode" | "adapter">> | import("react").FunctionComponentElement<{
+    mode: ThemeMode;
+    adapter?: ThemeBridgeAdapter;
+}>;
 export {};

package/dist/lib/theme-bridge.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { createElement, useCallback, useEffect, useMemo, useState } from 'react';
 import { Uniwind, useUniwind } from 'uniwind';
 const modeCycle = ['light', 'dark', 'system'];
 export function applyThemeMode(mode) {
@@ -74,14 +74,18 @@ export function useThemeBridge({ initialMode = 'system', adapter, } = {}) {
         cycleMode,
     }), [cycleMode, mode, theme]);
 }
-export function ThemeBridge({ mode: controlledMode, initialMode = 'system', adapter, onModeChange, }) {
-    const { mode, setMode } = useThemeBridge({ initialMode, adapter });
-    const effectiveMode = controlledMode ?? mode;
+function ControlledThemeBridge({ mode, adapter, }) {
     useEffect(() => {
-        setMode(effectiveMode);
-    }, [effectiveMode, setMode]);
-    useEffect(() => {
-        onModeChange?.(effectiveMode);
-    }, [effectiveMode, onModeChange]);
+        void syncThemeMode(mode, adapter);
+    }, [adapter, mode]);
+    return null;
+}
+function UncontrolledThemeBridge({ initialMode, adapter, }) {
+    useThemeBridge({ initialMode, adapter });
     return null;
 }
+export function ThemeBridge({ mode, initialMode = 'system', adapter }) {
+    return mode === undefined
+        ? createElement(UncontrolledThemeBridge, { initialMode, adapter })
+        : createElement(ControlledThemeBridge, { mode, adapter });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thewhileloop/whileui",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "WhileUI Native — Copy-paste components for React Native. You own the code.",
   "license": "MIT",
   "repository": {
@@ -60,25 +60,25 @@
     "test:watch": "jest --watch"
   },
   "peerDependencies": {
-    "@rn-primitives/hooks": ">=1.0.0",
-    "@rn-primitives/hover-card": ">=1.0.0",
-    "@rn-primitives/popover": ">=1.0.0",
-    "@rn-primitives/portal": ">=1.0.0",
-    "@rn-primitives/select": ">=1.0.0",
-    "@rn-primitives/slot": ">=1.0.0",
-    "@rn-primitives/tooltip": ">=1.0.0",
-    "expo": ">=57.0.0",
-    "expo-blur": ">=57.0.0",
-    "expo-image": ">=57.0.0",
-    "react": ">=19.2.0",
-    "react-native": ">=0.86.0",
-    "react-native-gesture-handler": ">=2.32.0",
-    "react-native-reanimated": ">=4.5.0",
-    "react-native-safe-area-context": ">=5.7.0",
-    "react-native-screens": ">=4.26.0",
+    "@rn-primitives/hooks": ">=1.5.2",
+    "@rn-primitives/hover-card": ">=1.5.2",
+    "@rn-primitives/popover": ">=1.5.2",
+    "@rn-primitives/portal": ">=1.5.3",
+    "@rn-primitives/select": ">=1.5.2",
+    "@rn-primitives/slot": ">=1.5.2",
+    "@rn-primitives/tooltip": ">=1.5.2",
+    "expo": ">=58.0.0",
+    "expo-blur": ">=58.0.0",
+    "expo-image": ">=58.0.0",
+    "react": ">=19.3.0",
+    "react-native": ">=0.88.0",
+    "react-native-gesture-handler": ">=3.3.0",
+    "react-native-reanimated": ">=4.7.0",
+    "react-native-safe-area-context": ">=5.10.0",
+    "react-native-screens": ">=4.30.0",
     "tailwindcss": ">=4.0.0",
     "uniwind": ">=1.12.0",
-    "react-native-worklets": ">=0.10.0"
+    "react-native-worklets": ">=0.13.0"
   },
   "peerDependenciesMeta": {
     "expo-blur": {
@@ -89,19 +89,20 @@
     "clsx": "^2.1.0",
     "culori": "^4.0.2",
     "react-native-calendars": "^1.1314.0",
-    "tailwind-merge": "^3.0.0",
-    "tailwind-variants": "^0.3.0"
+    "tailwind-merge": "^3.7.0",
+    "tailwind-variants": "^3.3.1"
   },
   "devDependencies": {
-    "@testing-library/react-native": "^14.0.1",
+    "@react-native/jest-preset": "0.88.0",
+    "@testing-library/react-native": "^14.1.0",
     "@types/culori": "^4.0.1",
-    "@types/jest": "^29.5.14",
-    "@types/react": "~19.2.0",
-    "expo-image": "~57.0.5",
-    "jest": "^29.7.0",
-    "jest-expo": "~57.0.5",
-    "react-native-screens": "~4.26.0",
-    "test-renderer": "^1.2.0",
+    "@types/jest": "^30.0.0",
+    "@types/react": "~19.3.0",
+    "expo-image": "~58.0.15",
+    "jest": "^30.5.2",
+    "jest-expo": "~58.0.11",
+    "react-native-screens": "~4.30.0",
+    "test-renderer": "^1.3.1",
     "typescript": "~6.0.3"
   }
 }