@thewhileloop/whileui 1.2.3 → 3.0.0

package/dist/components/avatar/avatar.d.ts

@@ -1,56 +1,29 @@
 import React from 'react';
-import { View, type ViewProps, type ImageProps } from 'react-native';
+import { type ViewInstance, type ViewProps, type ImageProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
+import type { ForwardRefComponent } from '../../lib/ref-types';
 declare const avatarVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        default: string;
-        sm: string;
-        lg: string;
-        xl: string;
+        default: "h-10 w-10";
+        sm: "h-8 w-8";
+        lg: "h-12 w-12";
+        xl: "h-16 w-16";
     };
-}, undefined, "relative flex shrink-0 overflow-hidden rounded-full", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "relative flex shrink-0 overflow-hidden rounded-full", {
     size: {
-        default: string;
-        sm: string;
-        lg: string;
-        xl: string;
+        default: "h-10 w-10";
+        sm: "h-8 w-8";
+        lg: "h-12 w-12";
+        xl: "h-16 w-16";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        default: string;
-        sm: string;
-        lg: string;
-        xl: string;
+        default: "h-10 w-10";
+        sm: "h-8 w-8";
+        lg: "h-12 w-12";
+        xl: "h-16 w-16";
     };
-}>, {
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        xl: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        xl: string;
-    };
-}, undefined, "relative flex shrink-0 overflow-hidden rounded-full", import("tailwind-variants/dist/config.js").TVConfig<{
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        xl: string;
-    };
-}, {
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        xl: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface AvatarProps extends ViewProps, VariantProps<typeof avatarVariants> {
     className?: string;
 }
@@ -61,14 +34,13 @@ export interface AvatarImageProps extends Omit<ImageProps, 'style'> {
 export interface AvatarFallbackProps extends ViewProps {
     className?: string;
 }
-declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<View>>;
-declare function AvatarImage({ className, onLoadingStatusChange, ...props }: AvatarImageProps): import("react/jsx-runtime").JSX.Element;
+declare const Avatar: ForwardRefComponent<ViewInstance, AvatarProps>;
+declare function AvatarImage({ className, onLoadingStatusChange, ...props }: AvatarImageProps): React.JSX.Element;
 declare namespace AvatarImage {
     var displayName: string;
 }
-declare function AvatarFallback({ className, children, ...props }: AvatarFallbackProps): import("react/jsx-runtime").JSX.Element | null;
+declare function AvatarFallback({ className, children, ...props }: AvatarFallbackProps): React.JSX.Element | null;
 declare namespace AvatarFallback {
     var displayName: string;
 }
 export { Avatar, AvatarImage, AvatarFallback, avatarVariants };
-//# sourceMappingURL=avatar.d.ts.map

package/dist/components/avatar/avatar.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useState } from 'react';
-import { View, Image, Text } from 'react-native';
+import React, { useMemo, useState } from 'react';
+import { View, Image, Text, } from 'react-native';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
-// ─── Variants ────────────────────────────────────────────────
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { typographyStyle } from '../../lib/recipes';
 const avatarVariants = tv({
     base: 'relative flex shrink-0 overflow-hidden rounded-full',
     variants: {
@@ -18,15 +19,14 @@ const avatarVariants = tv({
         size: 'default',
     },
 });
-// ─── Context ─────────────────────────────────────────────────
 const AvatarContext = React.createContext({
     imageLoaded: false,
     setImageLoaded: () => { },
 });
-// ─── Components ──────────────────────────────────────────────
 const Avatar = React.forwardRef(({ className, size, ...props }, ref) => {
     const [imageLoaded, setImageLoaded] = useState(false);
-    return (_jsx(AvatarContext.Provider, { value: { imageLoaded, setImageLoaded }, children: _jsx(View, { ref: ref, className: cn(avatarVariants({ size }), className), ...props }) }));
+    const contextValue = useMemo(() => ({ imageLoaded, setImageLoaded }), [imageLoaded]);
+    return (_jsx(AvatarContext.Provider, { value: contextValue, children: _jsx(View, { ref: ref, className: cn(avatarVariants({ size }), className), ...props }) }));
 });
 Avatar.displayName = 'Avatar';
 function AvatarImage({ className, onLoadingStatusChange, ...props }) {
@@ -42,11 +42,10 @@ function AvatarImage({ className, onLoadingStatusChange, ...props }) {
 AvatarImage.displayName = 'AvatarImage';
 function AvatarFallback({ className, children, ...props }) {
     const { imageLoaded } = React.useContext(AvatarContext);
+    const visual = useVisualTokens();
     if (imageLoaded)
         return null;
-    return (_jsx(View, { className: cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className), ...props, children: typeof children === 'string' ? (_jsx(Text, { className: "text-sm font-medium text-muted-foreground", children: children })) : (children) }));
+    return (_jsx(View, { className: cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className), ...props, children: typeof children === 'string' ? (_jsx(Text, { className: "font-medium text-muted-foreground", style: typographyStyle(visual, 'label'), children: children })) : (children) }));
 }
 AvatarFallback.displayName = 'AvatarFallback';
-// ─── Exports ─────────────────────────────────────────────────
 export { Avatar, AvatarImage, AvatarFallback, avatarVariants };
-//# sourceMappingURL=avatar.js.map

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

@@ -1,2 +1 @@
 export { Avatar, AvatarImage, AvatarFallback, avatarVariants, type AvatarProps, type AvatarImageProps, type AvatarFallbackProps, } from './avatar';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/avatar/index.js

@@ -1,2 +1 @@
 export { Avatar, AvatarImage, AvatarFallback, avatarVariants, } from './avatar';
-//# sourceMappingURL=index.js.map

package/dist/components/badge/badge.d.ts

@@ -2,241 +2,112 @@ import { type ViewProps, type TextProps } from 'react-native';
 import { type VariantProps } from '../../lib/tv';
 declare const badgeVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        success: string;
-        warning: string;
-        info: string;
-        soft: string;
-        'soft-secondary': string;
-        'soft-destructive': string;
-        'soft-success': string;
-        'soft-warning': string;
-        'soft-info': string;
+        default: "bg-primary";
+        secondary: "bg-secondary";
+        destructive: "bg-destructive";
+        outline: "border-border bg-transparent";
+        success: "bg-success";
+        warning: "bg-warning";
+        info: "bg-info";
+        soft: "bg-primary-soft";
+        'soft-secondary': "bg-secondary-soft";
+        'soft-destructive': "bg-destructive-soft";
+        'soft-success': "bg-success-soft";
+        'soft-warning': "bg-warning-soft";
+        'soft-info': "bg-info-soft";
     };
-}, undefined, "inline-flex items-center rounded-full px-2.5 py-0.5", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "inline-flex items-center", {
     variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        success: string;
-        warning: string;
-        info: string;
-        soft: string;
-        'soft-secondary': string;
-        'soft-destructive': string;
-        'soft-success': string;
-        'soft-warning': string;
-        'soft-info': string;
+        default: "bg-primary";
+        secondary: "bg-secondary";
+        destructive: "bg-destructive";
+        outline: "border-border bg-transparent";
+        success: "bg-success";
+        warning: "bg-warning";
+        info: "bg-info";
+        soft: "bg-primary-soft";
+        'soft-secondary': "bg-secondary-soft";
+        'soft-destructive': "bg-destructive-soft";
+        'soft-success': "bg-success-soft";
+        'soft-warning': "bg-warning-soft";
+        'soft-info': "bg-info-soft";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        success: string;
-        warning: string;
-        info: string;
-        soft: string;
-        'soft-secondary': string;
-        'soft-destructive': string;
-        'soft-success': string;
-        'soft-warning': string;
-        'soft-info': string;
+        default: "bg-primary";
+        secondary: "bg-secondary";
+        destructive: "bg-destructive";
+        outline: "border-border bg-transparent";
+        success: "bg-success";
+        warning: "bg-warning";
+        info: "bg-info";
+        soft: "bg-primary-soft";
+        'soft-secondary': "bg-secondary-soft";
+        'soft-destructive': "bg-destructive-soft";
+        'soft-success': "bg-success-soft";
+        'soft-warning': "bg-warning-soft";
+        'soft-info': "bg-info-soft";
     };
-}>, {
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        success: string;
-        warning: string;
-        info: string;
-        soft: string;
-        'soft-secondary': string;
-        'soft-destructive': string;
-        'soft-success': string;
-        'soft-warning': string;
-        'soft-info': string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        success: string;
-        warning: string;
-        info: string;
-        soft: string;
-        'soft-secondary': string;
-        'soft-destructive': string;
-        'soft-success': string;
-        'soft-warning': string;
-        'soft-info': string;
-    };
-}, undefined, "inline-flex items-center rounded-full px-2.5 py-0.5", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        success: string;
-        warning: string;
-        info: string;
-        soft: string;
-        'soft-secondary': string;
-        'soft-destructive': string;
-        'soft-success': string;
-        'soft-warning': string;
-        'soft-info': string;
-    };
-}, {
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        success: string;
-        warning: string;
-        info: string;
-        soft: string;
-        'soft-secondary': string;
-        'soft-destructive': string;
-        'soft-success': string;
-        'soft-warning': string;
-        'soft-info': string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 declare const badgeTextVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        success: string;
-        warning: string;
-        info: string;
-        soft: string;
-        'soft-secondary': string;
-        'soft-destructive': string;
-        'soft-success': string;
-        'soft-warning': string;
-        'soft-info': string;
-    };
-}, undefined, "text-xs font-semibold", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        success: string;
-        warning: string;
-        info: string;
-        soft: string;
-        'soft-secondary': string;
-        'soft-destructive': string;
-        'soft-success': string;
-        'soft-warning': string;
-        'soft-info': string;
-    };
-}, {
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        success: string;
-        warning: string;
-        info: string;
-        soft: string;
-        'soft-secondary': string;
-        'soft-destructive': string;
-        'soft-success': string;
-        'soft-warning': string;
-        'soft-info': string;
-    };
-}>, {
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        success: string;
-        warning: string;
-        info: string;
-        soft: string;
-        'soft-secondary': string;
-        'soft-destructive': string;
-        'soft-success': string;
-        'soft-warning': string;
-        'soft-info': string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        success: string;
-        warning: string;
-        info: string;
-        soft: string;
-        'soft-secondary': string;
-        'soft-destructive': string;
-        'soft-success': string;
-        'soft-warning': string;
-        'soft-info': string;
+        default: "text-primary-foreground";
+        secondary: "text-secondary-foreground";
+        destructive: "text-destructive-foreground";
+        outline: "text-foreground";
+        success: "text-success-foreground";
+        warning: "text-warning-foreground";
+        info: "text-info-foreground";
+        soft: "text-primary";
+        'soft-secondary': "text-secondary-foreground";
+        'soft-destructive': "text-destructive";
+        'soft-success': "text-success";
+        'soft-warning': "text-warning";
+        'soft-info': "text-info";
     };
-}, undefined, "text-xs font-semibold", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "font-semibold", {
     variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        success: string;
-        warning: string;
-        info: string;
-        soft: string;
-        'soft-secondary': string;
-        'soft-destructive': string;
-        'soft-success': string;
-        'soft-warning': string;
-        'soft-info': string;
+        default: "text-primary-foreground";
+        secondary: "text-secondary-foreground";
+        destructive: "text-destructive-foreground";
+        outline: "text-foreground";
+        success: "text-success-foreground";
+        warning: "text-warning-foreground";
+        info: "text-info-foreground";
+        soft: "text-primary";
+        'soft-secondary': "text-secondary-foreground";
+        'soft-destructive': "text-destructive";
+        'soft-success': "text-success";
+        'soft-warning': "text-warning";
+        'soft-info': "text-info";
     };
-}, {
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        success: string;
-        warning: string;
-        info: string;
-        soft: string;
-        'soft-secondary': string;
-        'soft-destructive': string;
-        'soft-success': string;
-        'soft-warning': string;
-        'soft-info': string;
+        default: "text-primary-foreground";
+        secondary: "text-secondary-foreground";
+        destructive: "text-destructive-foreground";
+        outline: "text-foreground";
+        success: "text-success-foreground";
+        warning: "text-warning-foreground";
+        info: "text-info-foreground";
+        soft: "text-primary";
+        'soft-secondary': "text-secondary-foreground";
+        'soft-destructive': "text-destructive";
+        'soft-success': "text-success";
+        'soft-warning': "text-warning";
+        'soft-info': "text-info";
     };
-}>, unknown, unknown, undefined>>;
+}, undefined>>;
 export interface BadgeProps extends ViewProps, VariantProps<typeof badgeVariants> {
 }
 export interface BadgeTextProps extends TextProps, VariantProps<typeof badgeTextVariants> {
 }
-declare function Badge({ className, variant, children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+declare function Badge({ className, variant, children, style, ...props }: BadgeProps): import("react").JSX.Element;
 declare namespace Badge {
     var displayName: string;
 }
-declare function BadgeText({ className, variant: variantProp, ...props }: BadgeTextProps): import("react/jsx-runtime").JSX.Element;
+declare function BadgeText({ className, variant: variantProp, style, ...props }: BadgeTextProps): import("react").JSX.Element;
 declare namespace BadgeText {
     var displayName: string;
 }
 export { Badge, BadgeText, badgeVariants, badgeTextVariants };
-//# sourceMappingURL=badge.d.ts.map

package/dist/components/badge/badge.js

@@ -1,20 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 import { View } from 'react-native';
 import { Text } from '../text';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { typographyStyle } from '../../lib/recipes';
 const BadgeContext = createContext({
     variant: 'default',
 });
 const badgeVariants = tv({
-    base: 'inline-flex items-center rounded-full px-2.5 py-0.5',
+    base: 'inline-flex items-center',
     variants: {
         variant: {
             default: 'bg-primary',
             secondary: 'bg-secondary',
             destructive: 'bg-destructive',
-            outline: 'border border-border bg-transparent',
+            outline: 'border-border bg-transparent',
             success: 'bg-success',
             warning: 'bg-warning',
             info: 'bg-info',
@@ -31,7 +33,7 @@ const badgeVariants = tv({
     },
 });
 const badgeTextVariants = tv({
-    base: 'text-xs font-semibold',
+    base: 'font-semibold',
     variants: {
         variant: {
             default: 'text-primary-foreground',
@@ -53,15 +55,25 @@ const badgeTextVariants = tv({
         variant: 'default',
     },
 });
-function Badge({ className, variant = 'default', children, ...props }) {
-    return (_jsx(BadgeContext.Provider, { value: { variant }, children: _jsx(View, { className: cn(badgeVariants({ variant }), className), ...props, children: children }) }));
+function Badge({ className, variant = 'default', children, style, ...props }) {
+    const visual = useVisualTokens();
+    const contextValue = useMemo(() => ({ variant }), [variant]);
+    return (_jsx(BadgeContext.Provider, { value: contextValue, children: _jsx(View, { className: cn(badgeVariants({ variant }), className), style: [
+                {
+                    borderRadius: visual.badgeRadius,
+                    paddingHorizontal: visual.badgePaddingX,
+                    paddingVertical: visual.badgePaddingY,
+                    ...(variant === 'outline' ? { borderWidth: visual.borderWidthHairline } : null),
+                },
+                style,
+            ], ...props, children: children }) }));
 }
-function BadgeText({ className, variant: variantProp, ...props }) {
+function BadgeText({ className, variant: variantProp, style, ...props }) {
     const context = useContext(BadgeContext);
+    const visual = useVisualTokens();
     const variant = variantProp ?? context.variant;
-    return _jsx(Text, { className: cn(badgeTextVariants({ variant }), className), ...props });
+    return (_jsx(Text, { className: cn(badgeTextVariants({ variant }), className), style: [typographyStyle(visual, 'caption'), style], ...props }));
 }
 Badge.displayName = 'Badge';
 BadgeText.displayName = 'BadgeText';
 export { Badge, BadgeText, badgeVariants, badgeTextVariants };
-//# sourceMappingURL=badge.js.map

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

@@ -1,2 +1 @@
 export { Badge, BadgeText, badgeVariants, badgeTextVariants, type BadgeProps, type BadgeTextProps, } from './badge';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/badge/index.js

@@ -1,2 +1 @@
 export { Badge, BadgeText, badgeVariants, badgeTextVariants, } from './badge';
-//# sourceMappingURL=index.js.map