@thewhileloop/whileui 2.0.0 → 4.0.0

package/dist/components/form-field/form-field.d.ts

@@ -1,106 +1,50 @@
-import React from 'react';
-import { Text, View, type TextProps, type ViewProps } from 'react-native';
+import { type TextInstance, type TextProps, type ViewInstance, type ViewProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const formFieldVariants: import("tailwind-variants").TVReturnType<{
     density: {
-        default: string;
-        compact: string;
+        default: "gap-1.5";
+        compact: "gap-1";
     };
-}, undefined, "w-full", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "w-full", {
     density: {
-        default: string;
-        compact: string;
+        default: "gap-1.5";
+        compact: "gap-1";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     density: {
-        default: string;
-        compact: string;
+        default: "gap-1.5";
+        compact: "gap-1";
     };
-}>, {
-    density: {
-        default: string;
-        compact: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    density: {
-        default: string;
-        compact: string;
-    };
-}, undefined, "w-full", import("tailwind-variants/dist/config.js").TVConfig<{
-    density: {
-        default: string;
-        compact: string;
-    };
-}, {
-    density: {
-        default: string;
-        compact: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 declare const formControlVariants: import("tailwind-variants").TVReturnType<{
     density: {
-        default: string;
-        compact: string;
-    };
-    invalid: {
-        true: string;
-        false: string;
-    };
-}, undefined, "justify-center", import("tailwind-variants/dist/config.js").TVConfig<{
-    density: {
-        default: string;
-        compact: string;
-    };
-    invalid: {
-        true: string;
-        false: string;
-    };
-}, {
-    density: {
-        default: string;
-        compact: string;
-    };
-    invalid: {
-        true: string;
-        false: string;
-    };
-}>, {
-    density: {
-        default: string;
-        compact: string;
-    };
-    invalid: {
-        true: string;
-        false: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    density: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
     invalid: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
-}, undefined, "justify-center", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "justify-center", {
     density: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
     invalid: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     density: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
     invalid: {
-        true: string;
-        false: string;
+        true: "";
+        false: "";
     };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface FormFieldProps extends ViewProps, VariantProps<typeof formFieldVariants> {
     invalid?: boolean;
     disabled?: boolean;
@@ -115,9 +59,9 @@ export interface FormHintProps extends TextProps {
 }
 export interface FormMessageProps extends TextProps {
 }
-declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<View>>;
-declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps & React.RefAttributes<Text>>;
-declare const FormControl: React.ForwardRefExoticComponent<FormControlProps & React.RefAttributes<View>>;
-declare const FormHint: React.ForwardRefExoticComponent<FormHintProps & React.RefAttributes<Text>>;
-declare const FormMessage: React.ForwardRefExoticComponent<FormMessageProps & React.RefAttributes<Text>>;
+declare const FormField: ForwardRefComponent<ViewInstance, FormFieldProps>;
+declare const FormLabel: ForwardRefComponent<TextInstance, FormLabelProps>;
+declare const FormControl: ForwardRefComponent<ViewInstance, FormControlProps>;
+declare const FormHint: ForwardRefComponent<TextInstance, FormHintProps>;
+declare const FormMessage: ForwardRefComponent<TextInstance, FormMessageProps>;
 export { FormField, FormLabel, FormControl, FormHint, FormMessage, formFieldVariants, formControlVariants, };

package/dist/components/form-field/form-field.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { createContext, useContext, useMemo } from 'react';
-import { Text, View } from 'react-native';
+import { Text, View, } from 'react-native';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
 import { useInteractionTokens } from '../../lib/interaction-tokens';

package/dist/components/hover-card/hover-card.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as HoverCardPrimitive from '@rn-primitives/hover-card';
 import { type FrostedSurfaceProps } from '../../lib/frosted-surface';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 export interface HoverCardProps {
     onOpenChange?: (open: boolean) => void;
     openDelay?: number;
@@ -15,6 +16,6 @@ export interface HoverCardContentProps extends React.ComponentPropsWithoutRef<ty
     portalHost?: string;
 }
 declare function HoverCard({ onOpenChange, openDelay, closeDelay, children }: HoverCardProps): React.JSX.Element;
-declare const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardTriggerProps & React.RefAttributes<import("@rn-primitives/hover-card").TriggerRef>>;
-declare const HoverCardContent: React.ForwardRefExoticComponent<HoverCardContentProps & React.RefAttributes<import("react-native").View>>;
+declare const HoverCardTrigger: ForwardRefComponent<HoverCardPrimitive.TriggerRef, HoverCardTriggerProps>;
+declare const HoverCardContent: ForwardRefComponent<HoverCardPrimitive.ContentRef, HoverCardContentProps>;
 export { HoverCard, HoverCardTrigger, HoverCardContent };

package/dist/components/input/input.d.ts

@@ -1,47 +1,34 @@
 import React from 'react';
-import { TextInput, type TextInputProps } from 'react-native';
+import { type TextInputInstance, type TextInputProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const inputVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        error: string;
+        default: "border-border";
+        error: "border-destructive";
+        /** No border, no fill — for one large figure that is the screen's subject. */
+        plain: "border-transparent bg-transparent";
     };
-}, undefined, "w-full border-border bg-muted text-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "w-full border-border bg-muted text-foreground", {
     variant: {
-        default: string;
-        error: string;
+        default: "border-border";
+        error: "border-destructive";
+        /** No border, no fill — for one large figure that is the screen's subject. */
+        plain: "border-transparent bg-transparent";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        error: string;
+        default: "border-border";
+        error: "border-destructive";
+        /** No border, no fill — for one large figure that is the screen's subject. */
+        plain: "border-transparent bg-transparent";
     };
-}>, {
-    variant: {
-        default: string;
-        error: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        error: string;
-    };
-}, undefined, "w-full border-border bg-muted text-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        error: string;
-    };
-}, {
-    variant: {
-        default: string;
-        error: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface InputProps extends TextInputProps, VariantProps<typeof inputVariants> {
     className?: string;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
     inputClassName?: string;
 }
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<TextInput>>;
+declare const Input: ForwardRefComponent<TextInputInstance, InputProps>;
 export { Input, inputVariants };

package/dist/components/input/input.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import React, { useState } from 'react';
 import { View, TextInput } from 'react-native';
 import { cn } from '../../lib/cn';
-import { focusRing } from '../../lib/focus-ring';
+import { focusFieldWrapper } from '../../lib/focus-ring';
 import { tv } from '../../lib/tv';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useInteractionTokens } from '../../lib/interaction-tokens';
@@ -14,29 +14,41 @@ const inputVariants = tv({
         variant: {
             default: 'border-border',
             error: 'border-destructive',
+            /** No border, no fill — for one large figure that is the screen's subject. */
+            plain: 'border-transparent bg-transparent',
         },
     },
     defaultVariants: {
         variant: 'default',
     },
 });
-const Input = React.forwardRef(({ className, prefix, suffix, inputClassName, variant, editable = true, placeholderTextColor, ...props }, ref) => {
+const Input = React.forwardRef(({ className, prefix, suffix, inputClassName, variant, editable = true, placeholderTextColor, onFocus, onBlur, ...props }, ref) => {
     const colors = useThemeColors();
     const interaction = useInteractionTokens();
     const visual = useVisualTokens();
-    return (_jsxs(View, { className: cn('flex-row items-center border-border bg-muted', inputVariants({ variant }), className), style: [
+    // The border is on this wrapper and the focus is on the TextInput inside it, so the
+    // wrapper learns about focus from the events rather than a pseudo-class.
+    const [focused, setFocused] = useState(false);
+    const plain = variant === 'plain';
+    return (_jsxs(View, { className: cn('flex-row items-center border-border bg-muted', inputVariants({ variant }), focused && !plain && focusFieldWrapper, className), style: [
             {
                 minHeight: visual.controlHeightDefault,
-                borderWidth: visual.borderWidthControl,
+                borderWidth: plain ? 0 : visual.borderWidthControl,
                 borderRadius: visual.radiusLg,
-                paddingHorizontal: visual.controlPaddingXDefault,
+                paddingHorizontal: plain ? 0 : visual.controlPaddingXDefault,
             },
             !editable ? { opacity: interaction.disabledOpacity } : undefined,
-        ], children: [prefix && (_jsx(View, { style: { paddingRight: Math.max(8, Math.round(visual.controlPaddingXDefault * 0.5)) }, children: prefix })), _jsx(TextInput, { ref: ref, className: cn('flex-1 text-foreground placeholder:text-muted-foreground', focusRing, inputClassName), style: {
+        ], children: [prefix && (_jsx(View, { style: { paddingRight: Math.max(8, Math.round(visual.controlPaddingXDefault * 0.5)) }, children: prefix })), _jsx(TextInput, { ref: ref, className: cn('flex-1 text-foreground placeholder:text-muted-foreground web:outline-none', inputClassName), style: {
                     ...typographyStyle(visual, 'label'),
                     minHeight: visual.controlHeightDefault - 2,
                     paddingVertical: visual.controlPaddingYDefault,
-                }, editable: editable, placeholderTextColor: placeholderTextColor ?? colors.placeholder, ...props }), suffix && (_jsx(View, { style: { paddingLeft: Math.max(8, Math.round(visual.controlPaddingXDefault * 0.5)) }, children: suffix }))] }));
+                }, editable: editable, placeholderTextColor: placeholderTextColor ?? colors.placeholder, onFocus: (event) => {
+                    setFocused(true);
+                    onFocus?.(event);
+                }, onBlur: (event) => {
+                    setFocused(false);
+                    onBlur?.(event);
+                }, ...props }), suffix && (_jsx(View, { style: { paddingLeft: Math.max(8, Math.round(visual.controlPaddingXDefault * 0.5)) }, children: suffix }))] }));
 });
 Input.displayName = 'Input';
 export { Input, inputVariants };

package/dist/components/label/label.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Text, type TextProps } from 'react-native';
+import { type TextInstance, type TextProps } from 'react-native';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 export interface LabelProps extends TextProps {
 }
-declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<Text>>;
+declare const Label: ForwardRefComponent<TextInstance, LabelProps>;
 export { Label };

package/dist/components/labeled-field/labeled-field.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { View, type ViewProps } from 'react-native';
+import { type ViewInstance, type ViewProps } from 'react-native';
 import { type FormFieldProps } from '../form-field';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 export interface LabeledFieldProps extends Omit<FormFieldProps, 'children'> {
     label?: React.ReactNode;
     hint?: React.ReactNode;
@@ -14,5 +15,5 @@ export interface LabeledFieldControlProps extends ViewProps {
     className?: string;
 }
 declare function LabeledField({ label, hint, error, leftSlot, rightSlot, children, controlWrapperClassName, required, disabled, invalid, ...props }: LabeledFieldProps): React.JSX.Element;
-declare const LabeledFieldControl: React.ForwardRefExoticComponent<LabeledFieldControlProps & React.RefAttributes<View>>;
+declare const LabeledFieldControl: ForwardRefComponent<ViewInstance, LabeledFieldControlProps>;
 export { LabeledField, LabeledFieldControl };

package/dist/components/numeric-input/numeric-input.d.ts

@@ -1,106 +1,51 @@
 import React from 'react';
-import { TextInput, type TextInputProps } from 'react-native';
+import { type TextInputInstance, type TextInputProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const numericInputVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        error: string;
+        default: "border-border";
+        error: "border-destructive";
     };
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}, undefined, "w-full flex-row items-center border-border bg-muted", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "w-full flex-row items-center border-border bg-muted", {
     variant: {
-        default: string;
-        error: string;
+        default: "border-border";
+        error: "border-destructive";
     };
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        error: string;
+        default: "border-border";
+        error: "border-destructive";
     };
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}>, {
-    variant: {
-        default: string;
-        error: string;
-    };
-    size: {
-        default: string;
-        compact: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        error: string;
-    };
-    size: {
-        default: string;
-        compact: string;
-    };
-}, undefined, "w-full flex-row items-center border-border bg-muted", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        error: string;
-    };
-    size: {
-        default: string;
-        compact: string;
-    };
-}, {
-    variant: {
-        default: string;
-        error: string;
-    };
-    size: {
-        default: string;
-        compact: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 declare const numericInputTextVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        default: string;
-        compact: string;
-    };
-}, undefined, "text-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
-    size: {
-        default: string;
-        compact: string;
-    };
-}, {
-    size: {
-        default: string;
-        compact: string;
-    };
-}>, {
-    size: {
-        default: string;
-        compact: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}, undefined, "text-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "text-foreground", {
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        default: string;
-        compact: string;
+        default: "";
+        compact: "";
     };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface NumericInputProps extends Omit<TextInputProps, 'value' | 'defaultValue' | 'onChangeText' | 'keyboardType'>, VariantProps<typeof numericInputVariants> {
     className?: string;
     inputClassName?: string;
@@ -116,5 +61,5 @@ export interface NumericInputProps extends Omit<TextInputProps, 'value' | 'defau
     /** Drop the field shell (border, background, radius, padding) for embedding inside another field shell like LabeledField. */
     unstyled?: boolean;
 }
-declare const NumericInput: React.ForwardRefExoticComponent<NumericInputProps & React.RefAttributes<TextInput>>;
+declare const NumericInput: ForwardRefComponent<TextInputInstance, NumericInputProps>;
 export { NumericInput, numericInputVariants, numericInputTextVariants };