@thewhileloop/whileui 1.2.3 → 3.0.0

package/dist/components/button/button.d.ts

@@ -1,222 +1,106 @@
 import React from 'react';
-import { View, type PressableProps, type TextProps, type ViewProps } from 'react-native';
+import { type PressableInstance, type TextProps, type ViewProps } from 'react-native';
+import { type PressableProps } from '../pressable';
 import { type VariantProps } from '../../lib/tv';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
+        default: "bg-primary";
+        destructive: "bg-destructive";
+        outline: "border border-input bg-background";
+        secondary: "bg-secondary";
+        ghost: "bg-transparent";
+        link: "";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
+        default: "";
+        sm: "";
+        lg: "";
+        icon: "";
     };
-}, undefined, "flex-row items-center justify-center gap-2 rounded-md", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "flex-row items-center justify-center gap-2", {
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
+        default: "bg-primary";
+        destructive: "bg-destructive";
+        outline: "border border-input bg-background";
+        secondary: "bg-secondary";
+        ghost: "bg-transparent";
+        link: "";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
+        default: "";
+        sm: "";
+        lg: "";
+        icon: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
+        default: "bg-primary";
+        destructive: "bg-destructive";
+        outline: "border border-input bg-background";
+        secondary: "bg-secondary";
+        ghost: "bg-transparent";
+        link: "";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
+        default: "";
+        sm: "";
+        lg: "";
+        icon: "";
     };
-}>, {
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
-    };
-}, undefined, "flex-row items-center justify-center gap-2 rounded-md", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
-    };
-}, {
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 declare const buttonTextVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
-    };
-}, undefined, "text-sm font-medium text-center", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
-    };
-}, {
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
-    };
-}>, {
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
+        default: "text-primary-foreground";
+        destructive: "text-destructive-foreground";
+        outline: "text-foreground";
+        secondary: "text-secondary-foreground";
+        ghost: "text-foreground";
+        link: "text-primary underline";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
+        default: "";
+        sm: "";
+        lg: "";
+        icon: "";
     };
-}, undefined, "text-sm font-medium text-center", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "font-medium text-center", {
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
+        default: "text-primary-foreground";
+        destructive: "text-destructive-foreground";
+        outline: "text-foreground";
+        secondary: "text-secondary-foreground";
+        ghost: "text-foreground";
+        link: "text-primary underline";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
+        default: "";
+        sm: "";
+        lg: "";
+        icon: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
+        default: "text-primary-foreground";
+        destructive: "text-destructive-foreground";
+        outline: "text-foreground";
+        secondary: "text-secondary-foreground";
+        ghost: "text-foreground";
+        link: "text-primary underline";
     };
     size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
+        default: "";
+        sm: "";
+        lg: "";
+        icon: "";
     };
-}>, unknown, unknown, undefined>>;
-export interface ButtonProps extends Omit<PressableProps, 'children'>, VariantProps<typeof buttonVariants> {
+}, undefined>>;
+export interface ButtonProps extends Omit<PressableProps, 'children' | 'feedback' | 'loading'>, VariantProps<typeof buttonVariants> {
     children?: React.ReactNode;
     className?: string;
     disabled?: boolean;
+    /** Shows a centered spinner, exposes busy state, and prevents interaction. */
+    loading?: boolean;
 }
 export interface ButtonTextProps extends TextProps {
     variant?: VariantProps<typeof buttonTextVariants>['variant'];
@@ -225,16 +109,14 @@ export interface ButtonTextProps extends TextProps {
 }
 export interface ButtonIconProps extends ViewProps {
     className?: string;
-    position?: 'left' | 'right';
 }
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<View>>;
-declare function ButtonText({ className, variant: variantProp, size: sizeProp, style, ...props }: ButtonTextProps): import("react/jsx-runtime").JSX.Element;
+declare const Button: ForwardRefComponent<PressableInstance, ButtonProps>;
+declare function ButtonText({ className, variant: variantProp, size: sizeProp, style, ...props }: ButtonTextProps): React.JSX.Element;
 declare namespace ButtonText {
     var displayName: string;
 }
-declare function ButtonIcon({ className, position, ...props }: ButtonIconProps): import("react/jsx-runtime").JSX.Element;
+declare function ButtonIcon({ className, ...props }: ButtonIconProps): React.JSX.Element;
 declare namespace ButtonIcon {
     var displayName: string;
 }
 export { Button, ButtonText, ButtonIcon, buttonVariants, buttonTextVariants };
-//# sourceMappingURL=button.d.ts.map

package/dist/components/button/button.js

@@ -1,31 +1,35 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { createContext, useContext } from 'react';
-import { Pressable, Text, View, } from 'react-native';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { createContext, useContext, useMemo } from 'react';
+import { Text, View } from 'react-native';
+import { Pressable } from '../pressable';
+import { Spinner } from '../spinner';
 import { cn } from '../../lib/cn';
+import { focusRing } from '../../lib/focus-ring';
 import { tv } from '../../lib/tv';
 import { useResolveFontFamily } from '../../lib/font-context';
-import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
+import { useThemeColors } from '../../lib/theme-colors';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { controlRecipe, typographyStyle } from '../../lib/recipes';
 const ButtonContext = createContext({
     variant: 'default',
     size: 'default',
 });
-// ─── Variants ────────────────────────────────────────────────
 const buttonVariants = tv({
-    base: 'flex-row items-center justify-center gap-2 rounded-md',
+    base: 'flex-row items-center justify-center gap-2',
     variants: {
         variant: {
-            default: 'bg-primary active:bg-primary-active',
-            destructive: 'bg-destructive active:bg-destructive-active',
-            outline: 'border border-input bg-background active:bg-accent',
-            secondary: 'bg-secondary active:bg-secondary-active',
-            ghost: 'active:bg-accent',
+            default: 'bg-primary',
+            destructive: 'bg-destructive',
+            outline: 'border border-input bg-background',
+            secondary: 'bg-secondary',
+            ghost: 'bg-transparent',
             link: '',
         },
         size: {
-            default: 'h-10 px-4 py-2',
-            sm: 'h-9 rounded-md px-3',
-            lg: 'h-12 rounded-md px-6',
-            icon: 'h-11 w-11',
+            default: '',
+            sm: '',
+            lg: '',
+            icon: '',
         },
     },
     defaultVariants: {
@@ -33,8 +37,24 @@ const buttonVariants = tv({
         size: 'default',
     },
 });
+function getButtonStyleTokens(visual, size, variant) {
+    if (variant === 'link') {
+        return undefined;
+    }
+    const recipe = controlRecipe(visual, size);
+    if (variant === 'outline') {
+        return { ...recipe, borderWidth: visual.borderWidthControl };
+    }
+    return recipe;
+}
+const BUTTON_TEXT_ROLE = {
+    default: 'label',
+    sm: 'caption',
+    lg: 'body',
+    icon: 'label',
+};
 const buttonTextVariants = tv({
-    base: 'text-sm font-medium text-center',
+    base: 'font-medium text-center',
     variants: {
         variant: {
             default: 'text-primary-foreground',
@@ -45,10 +65,10 @@ const buttonTextVariants = tv({
             link: 'text-primary underline',
         },
         size: {
-            default: 'text-sm',
-            sm: 'text-xs',
-            lg: 'text-base',
-            icon: 'text-sm',
+            default: '',
+            sm: '',
+            lg: '',
+            icon: '',
         },
     },
     defaultVariants: {
@@ -56,30 +76,39 @@ const buttonTextVariants = tv({
         size: 'default',
     },
 });
-// ─── Components ──────────────────────────────────────────────
-const Button = React.forwardRef(({ className, variant = 'default', size = 'default', disabled, children, style: styleProp, ...props }, ref) => {
-    const interaction = useInteractionTokens();
-    const interactiveStyle = withInteractivePressableStyle(styleProp, interaction, {
-        disabled: Boolean(disabled),
-        pressedVariant: variant === 'link' ? 'none' : 'strong',
-    });
-    return (_jsx(ButtonContext.Provider, { value: { variant, size }, children: _jsx(Pressable, { ref: ref, className: cn(buttonVariants({ variant, size }), className), style: interactiveStyle, disabled: disabled, ...props, children: children }) }));
+const Button = React.forwardRef(({ className, variant = 'default', size = 'default', disabled, loading = false, children, style: styleProp, ...props }, ref) => {
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
+    const tokenStyle = getButtonStyleTokens(visual, size, variant);
+    const contextValue = useMemo(() => ({ variant, size }), [size, variant]);
+    const spinnerColor = variant === 'default'
+        ? colors.primaryForeground
+        : variant === 'destructive'
+            ? colors.destructiveForeground
+            : variant === 'secondary'
+                ? colors.secondaryForeground
+                : variant === 'link'
+                    ? colors.primary
+                    : colors.foreground;
+    return (_jsx(ButtonContext.Provider, { value: contextValue, children: _jsx(Pressable, { ref: ref, accessibilityRole: variant === 'link' ? 'link' : 'button', className: cn(buttonVariants({ variant, size }), focusRing, className), style: (state) => [
+                typeof styleProp === 'function' ? styleProp(state) : styleProp,
+                tokenStyle ?? null,
+            ], disabled: disabled, loading: loading, feedback: variant === 'link' ? 'none' : 'strong', ...props, children: loading ? (_jsxs(_Fragment, { children: [_jsx(View, { className: "flex-row items-center justify-center gap-2 opacity-0", children: children }), _jsx(View, { pointerEvents: "none", accessible: false, importantForAccessibility: "no-hide-descendants", className: "absolute inset-0 items-center justify-center", children: _jsx(Spinner, { color: spinnerColor, accessible: false }) })] })) : (children) }) }));
 });
 Button.displayName = 'Button';
-// ─── Sub-components ──────────────────────────────────────────
 function ButtonText({ className, variant: variantProp, size: sizeProp, style, ...props }) {
     const context = useContext(ButtonContext);
+    const visual = useVisualTokens();
     const variant = variantProp ?? context.variant;
     const size = sizeProp ?? context.size;
     const resolved = cn(buttonTextVariants({ variant, size }), className);
     const font = useResolveFontFamily(resolved);
-    return (_jsx(Text, { className: font ? font.className : resolved, style: font ? [font.style, style] : style, ...props }));
+    const typography = typographyStyle(visual, BUTTON_TEXT_ROLE[size ?? 'default'] ?? 'label');
+    return (_jsx(Text, { className: font ? font.className : resolved, style: font ? [typography, font.style, style] : [typography, style], ...props }));
 }
 ButtonText.displayName = 'ButtonText';
-function ButtonIcon({ className, position, ...props }) {
+function ButtonIcon({ className, ...props }) {
     return _jsx(View, { className: cn('items-center justify-center', className), ...props });
 }
 ButtonIcon.displayName = 'ButtonIcon';
-// ─── Exports ─────────────────────────────────────────────────
 export { Button, ButtonText, ButtonIcon, buttonVariants, buttonTextVariants };
-//# sourceMappingURL=button.js.map

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

@@ -1,2 +1 @@
 export { Button, ButtonText, ButtonIcon, buttonVariants, buttonTextVariants, type ButtonProps, type ButtonTextProps, type ButtonIconProps, } from './button';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.js

@@ -1,2 +1 @@
 export { Button, ButtonText, ButtonIcon, buttonVariants, buttonTextVariants, } from './button';
-//# sourceMappingURL=index.js.map

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

@@ -1,102 +1,60 @@
-import React from 'react';
-import { View, type ViewProps, type TextProps } from 'react-native';
+import { type ViewInstance, type ViewProps, type TextInstance, type TextProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
 import { type FrostedSurfaceProps } from '../../lib/frosted-surface';
+import { type ShadowTier } from '../../lib/recipes';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const cardVariants: import("tailwind-variants").TVReturnType<{
     padding: {
-        none: string;
-        sm: string;
-        default: string;
-        lg: string;
+        none: "";
+        sm: "";
+        default: "";
+        lg: "";
     };
     unstyled: {
-        true: string;
-        false: string;
+        true: "rounded-none border-0 bg-transparent shadow-none";
+        false: "";
     };
-}, undefined, "rounded-xl border border-border bg-card", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "border border-border bg-card", {
     padding: {
-        none: string;
-        sm: string;
-        default: string;
-        lg: string;
+        none: "";
+        sm: "";
+        default: "";
+        lg: "";
     };
     unstyled: {
-        true: string;
-        false: string;
+        true: "rounded-none border-0 bg-transparent shadow-none";
+        false: "";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     padding: {
-        none: string;
-        sm: string;
-        default: string;
-        lg: string;
+        none: "";
+        sm: "";
+        default: "";
+        lg: "";
     };
     unstyled: {
-        true: string;
-        false: string;
+        true: "rounded-none border-0 bg-transparent shadow-none";
+        false: "";
     };
-}>, {
-    padding: {
-        none: string;
-        sm: string;
-        default: string;
-        lg: string;
-    };
-    unstyled: {
-        true: string;
-        false: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    padding: {
-        none: string;
-        sm: string;
-        default: string;
-        lg: string;
-    };
-    unstyled: {
-        true: string;
-        false: string;
-    };
-}, undefined, "rounded-xl border border-border bg-card", import("tailwind-variants/dist/config.js").TVConfig<{
-    padding: {
-        none: string;
-        sm: string;
-        default: string;
-        lg: string;
-    };
-    unstyled: {
-        true: string;
-        false: string;
-    };
-}, {
-    padding: {
-        none: string;
-        sm: string;
-        default: string;
-        lg: string;
-    };
-    unstyled: {
-        true: string;
-        false: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface CardProps extends ViewProps, VariantProps<typeof cardVariants>, FrostedSurfaceProps {
+    /** Elevation tier; 'sm' by default, 'none' for flat cards. */
+    shadow?: ShadowTier;
 }
-declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<View>>;
+declare const Card: ForwardRefComponent<ViewInstance, CardProps>;
 export interface CardHeaderProps extends ViewProps {
 }
-declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<View>>;
+declare const CardHeader: ForwardRefComponent<ViewInstance, CardHeaderProps>;
 export interface CardTitleProps extends TextProps {
 }
-declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<import("react-native").Text>>;
+declare const CardTitle: ForwardRefComponent<TextInstance, CardTitleProps>;
 export interface CardDescriptionProps extends TextProps {
 }
-declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<import("react-native").Text>>;
+declare const CardDescription: ForwardRefComponent<TextInstance, CardDescriptionProps>;
 export interface CardContentProps extends ViewProps {
 }
-declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<View>>;
+declare const CardContent: ForwardRefComponent<ViewInstance, CardContentProps>;
 export interface CardFooterProps extends ViewProps {
 }
-declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<View>>;
+declare const CardFooter: ForwardRefComponent<ViewInstance, CardFooterProps>;
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, cardVariants };
-//# sourceMappingURL=card.d.ts.map