@thewhileloop/whileui 1.2.2 → 2.0.0

package/dist/blocks/chat/chat.js

@@ -6,15 +6,15 @@ import { SmartInput } from '../layout/smart-input';
 import { cn } from '../../lib/cn';
 import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
 import { useVisualTokens } from '../../lib/visual-tokens';
+import { typographyStyle } from '../../lib/recipes';
 import { tv } from '../../lib/tv';
-// ─── ChatMessage Variants ────────────────────────────────────
-const contentSizeClasses = {
-    sm: 'text-sm',
-    default: 'text-base',
-    lg: 'text-lg',
+const CONTENT_SIZE_ROLE = {
+    sm: 'label',
+    default: 'body',
+    lg: 'emphasis',
 };
 const chatMessageBubbleVariants = tv({
-    base: 'rounded-2xl px-4 py-3',
+    base: '',
     variants: {
         role: {
             user: 'self-end bg-primary',
@@ -24,25 +24,35 @@ const chatMessageBubbleVariants = tv({
     },
     defaultVariants: { role: 'assistant' },
 });
-// ─── ChatMessage ─────────────────────────────────────────────
 export function ChatMessageBubble({ message, contentClassName, }) {
     const role = message.role === 'system' ? 'system' : message.role;
     const isUser = message.role === 'user';
-    const sizeClass = contentSizeClasses[message.contentSize ?? 'default'];
+    const contentRole = CONTENT_SIZE_ROLE[message.contentSize ?? 'default'];
     const visual = useVisualTokens();
     const { width: screenWidth } = useWindowDimensions();
     const ratio = role === 'system' ? visual.chatSystemBubbleMaxWidthRatio : visual.chatBubbleMaxWidthRatio;
     const maxWidth = screenWidth * ratio;
-    return (_jsxs(View, { accessible: true, accessibilityRole: "none", accessibilityLabel: isUser ? 'Your message' : message.role === 'system' ? 'System message' : 'Assistant message', className: chatMessageBubbleVariants({ role }), style: { maxWidth }, children: [_jsx(Text, { className: cn('leading-relaxed', sizeClass, isUser ? 'text-primary-foreground' : 'text-foreground', contentClassName), children: message.content }), message.secondary && (_jsx(Text, { className: cn('mt-1 text-xs', isUser ? 'text-primary-foreground-muted' : 'text-muted-foreground'), children: message.secondary }))] }));
+    return (_jsxs(View, { accessible: true, accessibilityRole: "none", accessibilityLabel: isUser ? 'Your message' : message.role === 'system' ? 'System message' : 'Assistant message', className: chatMessageBubbleVariants({ role }), style: {
+            maxWidth,
+            borderRadius: visual.radiusLg,
+            paddingHorizontal: visual.controlPaddingXDefault,
+            paddingVertical: visual.controlPaddingYDefault,
+        }, children: [_jsx(Text, { className: cn('leading-relaxed', isUser ? 'text-primary-foreground' : 'text-foreground', contentClassName), style: typographyStyle(visual, contentRole), children: message.content }), message.secondary && (_jsx(Text, { className: cn('mt-1', isUser ? 'text-primary-foreground-muted' : 'text-muted-foreground'), style: typographyStyle(visual, 'caption'), children: message.secondary }))] }));
 }
-// ─── ChatSuggestions ──────────────────────────────────────────
 export function ChatSuggestions({ suggestions, onSelect, className }) {
-    return (_jsx(View, { className: cn('flex-row flex-wrap justify-center gap-2 px-4 py-6', className), children: suggestions.map((text, i) => (_jsx(Pressable, { onPress: () => onSelect(text), accessibilityRole: "button", accessibilityLabel: `Suggestion: ${text}`, className: "rounded-full border border-border bg-muted px-4 py-2 active:bg-muted", children: _jsx(Text, { className: "text-sm text-foreground", children: text }) }, `${text}-${i}`))) }));
+    const visual = useVisualTokens();
+    return (_jsx(View, { className: cn('flex-row flex-wrap justify-center gap-2 px-4 py-6', className), children: suggestions.map((text) => (_jsx(Pressable, { onPress: () => onSelect(text), accessibilityRole: "button", accessibilityLabel: `Suggestion: ${text}`, className: "rounded-full border-border bg-muted active:bg-muted", style: {
+                borderWidth: visual.borderWidthHairline,
+                paddingHorizontal: visual.controlPaddingXDefault,
+                paddingVertical: visual.controlPaddingYSm,
+            }, children: _jsx(Text, { className: "text-foreground", style: typographyStyle(visual, 'label'), children: text }) }, text))) }));
 }
 const EMPTY_SUGGESTIONS = [];
-// ─── Chat ────────────────────────────────────────────────────
 export function Chat({ messages, value, onChangeText, onSend, placeholder = 'Message...', suggestions = EMPTY_SUGGESTIONS, onSuggestionPress, leftSlot, rightSlot, loading = false, header, emptyTitle, emptyDescription, exampleMessage, renderMessage, loadingIndicator, inputSafeArea = true, keyboardVerticalOffset = 0, className, messagesClassName, }) {
     const scrollRef = useRef(null);
+    const visual = useVisualTokens();
+    const emptyTitleTypography = typographyStyle(visual, 'emphasis');
+    const emptyDescriptionTypography = typographyStyle(visual, 'label');
     const isEmpty = messages.length === 0;
     const showSuggestions = isEmpty && suggestions.length > 0;
     useEffect(() => {
@@ -55,14 +65,16 @@ export function Chat({ messages, value, onChangeText, onSend, placeholder = 'Mes
                     flexGrow: 1,
                     paddingBottom: 8,
                     justifyContent: showSuggestions ? 'center' : 'flex-end',
-                }, keyboardShouldPersistTaps: "handled", children: showSuggestions ? (_jsxs(View, { className: "flex-1 justify-center", children: [exampleMessage && (_jsx(View, { className: "mb-6 px-4", children: renderMessage ? (renderMessage(exampleMessage)) : (_jsx(ChatMessageBubble, { message: exampleMessage })) })), emptyTitle && (_jsx(Text, { className: "mb-1 text-center text-lg font-medium text-foreground", children: emptyTitle })), emptyDescription && (_jsx(Text, { className: "mb-4 text-center text-sm text-muted-foreground", children: emptyDescription })), _jsx(ChatSuggestions, { suggestions: suggestions, onSelect: onSuggestionPress ?? (() => { }) })] })) : (_jsxs(View, { className: "gap-3 px-4 pt-4", children: [messages.map((msg) => renderMessage ? (_jsx(React.Fragment, { children: renderMessage(msg) }, msg.id)) : (_jsx(ChatMessageBubble, { message: msg }, msg.id))), loading && loadingIndicator && _jsx(View, { className: "px-4", children: loadingIndicator })] })) }), _jsx(SmartInput, { value: value, onChangeText: onChangeText, placeholder: placeholder, leftSlot: leftSlot, rightSlot: defaultRightSlot, editable: !loading, safeArea: inputSafeArea })] }));
+                }, keyboardShouldPersistTaps: "handled", children: showSuggestions ? (_jsxs(View, { className: "flex-1 justify-center", children: [exampleMessage && (_jsx(View, { className: "mb-6 px-4", children: renderMessage ? (renderMessage(exampleMessage)) : (_jsx(ChatMessageBubble, { message: exampleMessage })) })), emptyTitle && (_jsx(Text, { className: "mb-1 text-center font-medium text-foreground", style: emptyTitleTypography, children: emptyTitle })), emptyDescription && (_jsx(Text, { className: "mb-4 text-center text-muted-foreground", style: emptyDescriptionTypography, children: emptyDescription })), _jsx(ChatSuggestions, { suggestions: suggestions, onSelect: onSuggestionPress ?? (() => { }) })] })) : (_jsxs(View, { className: "gap-3 px-4 pt-4", children: [messages.map((msg) => renderMessage ? (_jsx(React.Fragment, { children: renderMessage(msg) }, msg.id)) : (_jsx(ChatMessageBubble, { message: msg }, msg.id))), loading && loadingIndicator && _jsx(View, { className: "px-4", children: loadingIndicator })] })) }), _jsx(SmartInput, { value: value, onChangeText: onChangeText, placeholder: placeholder, leftSlot: leftSlot, rightSlot: defaultRightSlot, editable: !loading, safeArea: inputSafeArea })] }));
 }
-// ─── ChatSendButton ───────────────────────────────────────────
 function ChatSendButton({ onPress, disabled }) {
     const interaction = useInteractionTokens();
-    return (_jsx(Pressable, { onPress: onPress, disabled: disabled, accessibilityRole: "button", accessibilityLabel: disabled ? 'Send (disabled)' : 'Send message', style: withInteractivePressableStyle(undefined, interaction, {
+    const visual = useVisualTokens();
+    return (_jsx(Pressable, { onPress: onPress, disabled: disabled, accessibilityRole: "button", accessibilityLabel: disabled ? 'Send (disabled)' : 'Send message', style: withInteractivePressableStyle({
+            height: visual.controlHeightDefault,
+            width: visual.controlHeightDefault,
+        }, interaction, {
             disabled: Boolean(disabled),
             pressedVariant: 'strong',
-        }), className: cn('h-11 w-11 items-center justify-center rounded-full', disabled ? 'bg-muted' : 'bg-primary'), children: _jsx(Text, { className: "text-lg text-primary-foreground", children: "\u2191" }) }));
+        }), className: cn('items-center justify-center rounded-full', disabled ? 'bg-muted' : 'bg-primary'), children: _jsx(Text, { className: "text-primary-foreground", style: typographyStyle(visual, 'emphasis'), children: "\u2191" }) }));
 }
-//# sourceMappingURL=chat.js.map

package/dist/blocks/chat/index.d.ts

@@ -1,2 +1 @@
 export { Chat, ChatMessageBubble, ChatSuggestions, type ChatMessage, type ChatProps, type ChatSuggestionsProps, } from './chat';
-//# sourceMappingURL=index.d.ts.map

package/dist/blocks/chat/index.js

@@ -1,2 +1 @@
 export { Chat, ChatMessageBubble, ChatSuggestions, } from './chat';
-//# sourceMappingURL=index.js.map

package/dist/blocks/commerce/checkout-summary.d.ts

@@ -15,5 +15,4 @@ export interface CheckoutSummaryProps extends ViewProps {
     onCheckout?: () => void;
     loading?: boolean;
 }
-export declare function CheckoutSummary({ items, subtotal, shipping, tax, discount, total, buttonLabel, onCheckout, loading, className, ...props }: CheckoutSummaryProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=checkout-summary.d.ts.map
+export declare function CheckoutSummary({ items, subtotal, shipping, tax, discount, total, buttonLabel, onCheckout, loading, className, style, ...props }: CheckoutSummaryProps): import("react").JSX.Element;

package/dist/blocks/commerce/checkout-summary.js

@@ -4,8 +4,20 @@ import { Text } from '../../components/text';
 import { Separator } from '../../components/separator';
 import { Button, ButtonText } from '../../components/button';
 import { cn } from '../../lib/cn';
-// ─── Component ───────────────────────────────────────────────
-export function CheckoutSummary({ items, subtotal, shipping, tax, discount, total, buttonLabel = 'Checkout', onCheckout, loading = false, className, ...props }) {
-    return (_jsxs(View, { className: cn('rounded-xl border border-border bg-card p-4', className), ...props, children: [_jsx(Text, { className: "mb-4 text-lg font-semibold text-foreground", children: "Order Summary" }), items.length > 0 && (_jsx(View, { className: "mb-4 gap-2", children: items.map((item, index) => (_jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Text, { className: cn('text-sm', item.emphasized ? 'font-medium text-foreground' : 'text-muted-foreground'), numberOfLines: 1, children: item.label }), _jsx(Text, { className: cn('text-sm', item.emphasized ? 'font-medium text-foreground' : 'text-muted-foreground'), children: item.value })] }, index))) })), _jsx(Separator, { className: "my-3" }), _jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Text, { className: "text-sm text-muted-foreground", children: "Subtotal" }), _jsx(Text, { className: "text-sm text-foreground", children: subtotal })] }), shipping && (_jsxs(View, { className: "mt-2 flex-row items-center justify-between", children: [_jsx(Text, { className: "text-sm text-muted-foreground", children: "Shipping" }), _jsx(Text, { className: "text-sm text-foreground", children: shipping })] })), tax && (_jsxs(View, { className: "mt-2 flex-row items-center justify-between", children: [_jsx(Text, { className: "text-sm text-muted-foreground", children: "Tax" }), _jsx(Text, { className: "text-sm text-foreground", children: tax })] })), discount && (_jsxs(View, { className: "mt-2 flex-row items-center justify-between", children: [_jsx(Text, { className: "text-sm text-muted-foreground", children: "Discount" }), _jsxs(Text, { className: "text-sm text-primary", children: ["-", discount] })] })), _jsx(Separator, { className: "my-3" }), _jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Text, { className: "text-base font-semibold text-foreground", children: "Total" }), _jsx(Text, { className: "text-xl font-bold text-foreground", children: total })] }), onCheckout && (_jsx(Button, { className: "mt-4 w-full", onPress: onCheckout, disabled: loading, children: _jsx(ButtonText, { children: loading ? 'Processing...' : buttonLabel }) }))] }));
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { surfacePadding, surfaceRadius, typographyStyle } from '../../lib/recipes';
+export function CheckoutSummary({ items, subtotal, shipping, tax, discount, total, buttonLabel = 'Checkout', onCheckout, loading = false, className, style, ...props }) {
+    const visual = useVisualTokens();
+    const label = typographyStyle(visual, 'label');
+    const body = typographyStyle(visual, 'body');
+    const emphasis = typographyStyle(visual, 'emphasis');
+    const title = typographyStyle(visual, 'title');
+    return (_jsxs(View, { className: cn('border border-border bg-card', className), style: [
+            {
+                borderRadius: surfaceRadius(visual, 'xl'),
+                padding: surfacePadding(visual, 'default'),
+                borderWidth: visual.borderWidthHairline,
+            },
+            style,
+        ], ...props, children: [_jsx(Text, { className: "mb-4 font-semibold text-foreground", style: emphasis, children: "Order Summary" }), items.length > 0 && (_jsx(View, { className: "mb-4 gap-2", children: items.map((item) => (_jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Text, { className: cn(item.emphasized ? 'font-medium text-foreground' : 'text-muted-foreground'), style: label, numberOfLines: 1, children: item.label }), _jsx(Text, { className: cn(item.emphasized ? 'font-medium text-foreground' : 'text-muted-foreground'), style: label, children: item.value })] }, `${item.label}:${item.value}`))) })), _jsx(Separator, { className: "my-3" }), _jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Text, { className: "text-muted-foreground", style: label, children: "Subtotal" }), _jsx(Text, { className: "text-foreground", style: label, children: subtotal })] }), shipping && (_jsxs(View, { className: "mt-2 flex-row items-center justify-between", children: [_jsx(Text, { className: "text-muted-foreground", style: label, children: "Shipping" }), _jsx(Text, { className: "text-foreground", style: label, children: shipping })] })), tax && (_jsxs(View, { className: "mt-2 flex-row items-center justify-between", children: [_jsx(Text, { className: "text-muted-foreground", style: label, children: "Tax" }), _jsx(Text, { className: "text-foreground", style: label, children: tax })] })), discount && (_jsxs(View, { className: "mt-2 flex-row items-center justify-between", children: [_jsx(Text, { className: "text-muted-foreground", style: label, children: "Discount" }), _jsxs(Text, { className: "text-primary", style: label, children: ["-", discount] })] })), _jsx(Separator, { className: "my-3" }), _jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Text, { className: "font-semibold text-foreground", style: body, children: "Total" }), _jsx(Text, { className: "font-bold text-foreground", style: title, children: total })] }), onCheckout && (_jsx(Button, { className: "mt-4 w-full", onPress: onCheckout, disabled: loading, children: _jsx(ButtonText, { children: loading ? 'Processing...' : buttonLabel }) }))] }));
 }
-//# sourceMappingURL=checkout-summary.js.map

package/dist/blocks/commerce/feature-gate.d.ts

@@ -9,5 +9,4 @@ export interface FeatureGateProps extends ViewProps {
     children?: ReactNode;
     className?: string;
 }
-export declare function FeatureGate({ title, description, icon, buttonLabel, onUpgrade, children, className, ...props }: FeatureGateProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=feature-gate.d.ts.map
+export declare function FeatureGate({ title, description, icon, buttonLabel, onUpgrade, children, className, style, ...props }: FeatureGateProps): import("react").JSX.Element;

package/dist/blocks/commerce/feature-gate.js

@@ -4,10 +4,20 @@ import { Card } from '../../components/card';
 import { Button, ButtonText } from '../../components/button';
 import { Text } from '../../components/text';
 import { cn } from '../../lib/cn';
-export function FeatureGate({ title, description, icon, buttonLabel = 'Upgrade', onUpgrade, children, className, ...props }) {
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { surfacePadding, surfaceRadius, typographyStyle } from '../../lib/recipes';
+export function FeatureGate({ title, description, icon, buttonLabel = 'Upgrade', onUpgrade, children, className, style, ...props }) {
+    const visual = useVisualTokens();
+    const body = typographyStyle(visual, 'body');
+    const label = typographyStyle(visual, 'label');
     if (!children) {
-        return (_jsx(Card, { className: cn('rounded-xl border-dashed border-border p-5', className), ...props, children: _jsxs(View, { className: "items-start gap-3", children: [icon ? _jsx(View, { children: icon }) : null, _jsxs(View, { className: "gap-1", children: [_jsx(Text, { className: "text-base font-semibold text-foreground", children: title }), _jsx(Text, { className: "text-sm text-muted-foreground", children: description })] }), _jsx(Button, { onPress: onUpgrade, disabled: !onUpgrade, children: _jsx(ButtonText, { children: buttonLabel }) })] }) }));
+        return (_jsx(Card, { className: cn('border-dashed border-border', className), padding: "lg", style: style, ...props, children: _jsxs(View, { className: "items-start gap-3", children: [icon ? _jsx(View, { children: icon }) : null, _jsxs(View, { className: "gap-1", children: [_jsx(Text, { className: "font-semibold text-foreground", style: body, children: title }), _jsx(Text, { className: "text-muted-foreground", style: label, children: description })] }), _jsx(Button, { onPress: onUpgrade, disabled: !onUpgrade, children: _jsx(ButtonText, { children: buttonLabel }) })] }) }));
     }
-    return (_jsxs(View, { className: cn('overflow-hidden rounded-xl border border-border', className), ...props, children: [_jsx(View, { className: "opacity-45", children: children }), _jsxs(View, { className: "absolute inset-0 items-center justify-center bg-background/70 px-6", children: [icon ? _jsx(View, { className: "mb-3", children: icon }) : null, _jsx(Text, { className: "text-center text-base font-semibold text-foreground", children: title }), _jsx(Text, { className: "mt-1 text-center text-sm text-muted-foreground", children: description }), _jsx(Button, { className: "mt-4", onPress: onUpgrade, disabled: !onUpgrade, children: _jsx(ButtonText, { children: buttonLabel }) })] })] }));
+    return (_jsxs(View, { className: cn('overflow-hidden border border-border', className), style: [
+            {
+                borderRadius: surfaceRadius(visual, 'xl'),
+                borderWidth: visual.borderWidthHairline,
+            },
+            style,
+        ], ...props, children: [_jsx(View, { className: "absolute inset-0 justify-center opacity-45", children: children }), _jsxs(View, { className: "items-center justify-center bg-background/70 px-6", style: { paddingVertical: surfacePadding(visual, 'default') }, children: [icon ? _jsx(View, { className: "mb-3", children: icon }) : null, _jsx(Text, { className: "text-center font-semibold text-foreground", style: body, children: title }), _jsx(Text, { className: "mt-1 text-center text-muted-foreground", style: label, children: description }), _jsx(Button, { className: "mt-4", onPress: onUpgrade, disabled: !onUpgrade, children: _jsx(ButtonText, { children: buttonLabel }) })] })] }));
 }
-//# sourceMappingURL=feature-gate.js.map

package/dist/blocks/commerce/index.d.ts

@@ -7,4 +7,3 @@ export { FeatureGate, type FeatureGateProps } from './feature-gate';
 export { UsageBar, type UsageBarProps, type UsageBarVariant } from './usage-bar';
 export { PlanToggle, type PlanToggleProps, type PlanToggleValue } from './plan-toggle';
 export { UpgradeBanner, type UpgradeBannerProps, type UpgradeBannerVariant, } from './upgrade-banner';
-//# sourceMappingURL=index.d.ts.map

package/dist/blocks/commerce/index.js

@@ -7,4 +7,3 @@ export { FeatureGate } from './feature-gate';
 export { UsageBar } from './usage-bar';
 export { PlanToggle } from './plan-toggle';
 export { UpgradeBanner, } from './upgrade-banner';
-//# sourceMappingURL=index.js.map

package/dist/blocks/commerce/metric-card.d.ts

@@ -6,7 +6,7 @@ declare const metricCardVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         outlined: string;
     };
-}, undefined, "p-4", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         outlined: string;
@@ -26,7 +26,7 @@ declare const metricCardVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         outlined: string;
     };
-}, undefined, "p-4", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         outlined: string;
@@ -51,6 +51,5 @@ export interface MetricCardProps extends ViewProps, VariantProps<typeof metricCa
     /** Show a skeleton placeholder instead of content. */
     loading?: boolean;
 }
-declare function MetricCard({ className, label, value, subtitle, progress, segments, icon, variant, loading, ...props }: MetricCardProps): import("react/jsx-runtime").JSX.Element;
+declare function MetricCard({ className, label, value, subtitle, progress, segments, icon, variant, loading, ...props }: MetricCardProps): React.JSX.Element;
 export { MetricCard, metricCardVariants };
-//# sourceMappingURL=metric-card.d.ts.map

package/dist/blocks/commerce/metric-card.js

@@ -5,8 +5,9 @@ import { Card } from '../../components/card';
 import { Skeleton } from '../../components/skeleton';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
+import { useVisualTokens } from '../../lib/visual-tokens';
 const metricCardVariants = tv({
-    base: 'p-4',
+    base: '',
     variants: {
         variant: {
             default: 'bg-card',
@@ -21,10 +22,13 @@ function MetricCardSkeleton({ className, variant, }) {
     return (_jsxs(Card, { className: cn(metricCardVariants({ variant }), className), children: [_jsxs(View, { className: "flex-row items-start justify-between mb-2", children: [_jsx(Skeleton, { className: "h-3 w-1/3 rounded-md" }), _jsx(Skeleton, { className: "h-5 w-5 rounded-sm" })] }), _jsx(Skeleton, { className: "h-6 w-1/2 rounded-md mb-1" }), _jsx(Skeleton, { className: "h-3 w-2/5 rounded-md" }), _jsx(View, { className: "mt-3", children: _jsx(Skeleton, { className: "h-2 w-full rounded-full" }) })] }));
 }
 function MetricCard({ className, label, value, subtitle, progress, segments, icon, variant, loading = false, ...props }) {
+    const visual = useVisualTokens();
     if (loading) {
         return _jsx(MetricCardSkeleton, { className: className, variant: variant ?? 'default' });
     }
-    return (_jsxs(Card, { className: cn(metricCardVariants({ variant }), className), ...props, children: [_jsxs(View, { className: "flex-row items-start justify-between mb-2", children: [_jsx(Text, { variant: "caption", className: "text-muted-foreground", children: label }), icon && _jsx(View, { children: icon })] }), _jsx(Text, { variant: "heading", className: "mb-1", children: value }), subtitle && (_jsx(Text, { variant: "caption", className: "text-muted-foreground", children: subtitle })), progress !== undefined && (_jsx(View, { className: "mt-3", children: _jsx(View, { className: "h-2 bg-muted rounded-full overflow-hidden", children: _jsx(View, { className: "h-full bg-primary rounded-full", style: { width: `${Math.min(100, Math.max(0, progress))}%` } }) }) })), segments && segments.length > 0 && (_jsx(View, { className: "mt-3 flex-row h-3 rounded-full overflow-hidden", children: segments.map((seg, i) => (_jsx(View, { className: "h-full", style: { width: `${seg.value}%`, backgroundColor: seg.color } }, i))) }))] }));
+    return (_jsxs(Card, { className: cn(metricCardVariants({ variant }), className), ...props, children: [_jsxs(View, { className: "flex-row items-start justify-between mb-2", children: [_jsx(Text, { variant: "caption", className: "text-muted-foreground", children: label }), icon && _jsx(View, { children: icon })] }), _jsx(Text, { variant: "heading", className: "mb-1", children: value }), subtitle && (_jsx(Text, { variant: "caption", className: "text-muted-foreground", children: subtitle })), progress !== undefined && (_jsx(View, { className: "mt-3", children: _jsx(View, { className: "h-2 bg-muted overflow-hidden", style: { borderRadius: visual.radiusSm }, children: _jsx(View, { className: "h-full bg-primary", style: {
+                            borderRadius: visual.radiusSm,
+                            width: `${Math.min(100, Math.max(0, progress))}%`,
+                        } }) }) })), segments && segments.length > 0 && (_jsx(View, { className: "mt-3 flex-row h-3 overflow-hidden", style: { borderRadius: visual.radiusSm }, children: segments.map((seg) => (_jsx(View, { className: "h-full", style: { width: `${seg.value}%`, backgroundColor: seg.color } }, `${seg.color}:${seg.value}`))) }))] }));
 }
 export { MetricCard, metricCardVariants };
-//# sourceMappingURL=metric-card.js.map

package/dist/blocks/commerce/plan-toggle.d.ts

@@ -8,5 +8,4 @@ export interface PlanToggleProps extends ViewProps {
     onChange?: (value: PlanToggleValue) => void;
     className?: string;
 }
-export declare function PlanToggle({ selected, monthlyLabel, annualLabel, annualDiscount, onChange, className, ...props }: PlanToggleProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=plan-toggle.d.ts.map
+export declare function PlanToggle({ selected, monthlyLabel, annualLabel, annualDiscount, onChange, className, style, ...props }: PlanToggleProps): import("react").JSX.Element;

package/dist/blocks/commerce/plan-toggle.js

@@ -4,16 +4,18 @@ import { Pressable } from '../../components/pressable';
 import { Badge, BadgeText } from '../../components/badge';
 import { Text } from '../../components/text';
 import { cn } from '../../lib/cn';
-import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
-export function PlanToggle({ selected, monthlyLabel = 'Monthly', annualLabel = 'Annual', annualDiscount, onChange, className, ...props }) {
-    const interaction = useInteractionTokens();
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { controlRecipe, typographyStyle } from '../../lib/recipes';
+export function PlanToggle({ selected, monthlyLabel = 'Monthly', annualLabel = 'Annual', annualDiscount, onChange, className, style, ...props }) {
+    const visual = useVisualTokens();
+    const segmentStyle = controlRecipe(visual, 'sm');
+    const labelStyle = typographyStyle(visual, 'label');
     const renderItem = (value, label) => {
         const active = selected === value;
-        return (_jsxs(Pressable, { className: cn('flex-1 flex-row items-center justify-center gap-2 rounded-lg px-3 py-2', active ? 'bg-background border border-border' : 'bg-transparent'), style: withInteractivePressableStyle(undefined, interaction, {
-                disabled: !onChange,
-                pressedVariant: 'default',
-            }), disabled: !onChange, onPress: () => onChange?.(value), children: [_jsx(Text, { className: cn('text-sm', active ? 'text-foreground' : 'text-muted-foreground'), children: label }), value === 'annual' && annualDiscount ? (_jsx(Badge, { variant: "success", children: _jsx(BadgeText, { children: annualDiscount }) })) : null] }, value));
+        return (_jsxs(Pressable, { 
+            // A two-state chooser is a toggle button; `aria-pressed` is the state ARIA
+            // allows on that role.
+            accessibilityRole: "button", accessibilityState: { selected: active }, "aria-pressed": active, className: cn('flex-1 flex-row items-center justify-center gap-2', active ? 'bg-background border border-border' : 'bg-transparent'), feedback: "default", style: [segmentStyle, active ? { borderWidth: visual.borderWidthHairline } : null], disabled: !onChange, onPress: () => onChange?.(value), children: [_jsx(Text, { className: cn(active ? 'text-foreground' : 'text-muted-foreground'), style: labelStyle, children: label }), value === 'annual' && annualDiscount ? (_jsx(Badge, { variant: "success", children: _jsx(BadgeText, { children: annualDiscount }) })) : null] }, value));
     };
-    return (_jsx(View, { className: cn('rounded-xl bg-muted p-1', className), ...props, children: _jsx(View, { className: "flex-row", children: [renderItem('monthly', monthlyLabel), renderItem('annual', annualLabel)] }) }));
+    return (_jsx(View, { className: cn('bg-muted p-1', className), style: [{ borderRadius: visual.radiusLg }, style], ...props, children: _jsx(View, { className: "flex-row", children: [renderItem('monthly', monthlyLabel), renderItem('annual', annualLabel)] }) }));
 }
-//# sourceMappingURL=plan-toggle.js.map

package/dist/blocks/commerce/pricing-card.d.ts

@@ -16,5 +16,4 @@ export interface PricingCardProps extends ViewProps {
     /** Show a skeleton placeholder instead of content. */
     loading?: boolean;
 }
-export declare function PricingCard({ name, description, price, period, features, badge, highlighted, buttonLabel, onPress, loading, className, ...props }: PricingCardProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=pricing-card.d.ts.map
+export declare function PricingCard({ name, description, price, period, features, badge, highlighted, buttonLabel, onPress, loading, className, style, ...props }: PricingCardProps): import("react").JSX.Element;

package/dist/blocks/commerce/pricing-card.js

@@ -5,15 +5,32 @@ import { Button, ButtonText } from '../../components/button';
 import { Badge, BadgeText } from '../../components/badge';
 import { Skeleton } from '../../components/skeleton';
 import { cn } from '../../lib/cn';
-// ─── Skeleton ─────────────────────────────────────────────────
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { useThemeColors } from '../../lib/theme-colors';
+import { shadowStyle, surfacePadding, surfaceRadius, typographyStyle } from '../../lib/recipes';
 function PricingCardSkeleton({ highlighted = false, className, }) {
-    return (_jsxs(View, { className: cn('overflow-hidden rounded-2xl p-6', highlighted ? 'border-2 border-primary bg-card' : 'border border-border bg-card', className), children: [_jsxs(View, { className: "mb-4 flex-row items-center justify-between", children: [_jsx(Skeleton, { className: "h-5 w-1/3 rounded-md" }), _jsx(Skeleton, { className: "h-5 w-16 rounded-full" })] }), _jsx(Skeleton, { className: "mb-4 h-3 w-3/4 rounded-md" }), _jsxs(View, { className: "mb-6 flex-row items-baseline gap-1", children: [_jsx(Skeleton, { className: "h-10 w-20 rounded-md" }), _jsx(Skeleton, { className: "h-3 w-12 rounded-md" })] }), _jsx(View, { className: "mb-6 gap-3", children: [1, 2, 3, 4].map((i) => (_jsxs(View, { className: "flex-row items-center gap-3", children: [_jsx(Skeleton, { className: "h-4 w-4 rounded-sm" }), _jsx(Skeleton, { className: "h-3 w-3/5 rounded-md" })] }, i))) }), _jsx(Skeleton, { className: "h-10 w-full rounded-lg" })] }));
+    const visual = useVisualTokens();
+    return (_jsxs(View, { className: cn('overflow-hidden', highlighted ? 'border-primary bg-card' : 'border-border bg-card', className), style: {
+            borderRadius: surfaceRadius(visual, 'xl'),
+            padding: surfacePadding(visual, 'lg'),
+            borderWidth: highlighted ? visual.borderWidthEmphasis : visual.borderWidthHairline,
+        }, children: [_jsxs(View, { className: "mb-4 flex-row items-center justify-between", children: [_jsx(Skeleton, { className: "h-5 w-1/3 rounded-md" }), _jsx(Skeleton, { className: "h-5 w-16 rounded-full" })] }), _jsx(Skeleton, { className: "mb-4 h-3 w-3/4 rounded-md" }), _jsxs(View, { className: "mb-6 flex-row items-baseline gap-1", children: [_jsx(Skeleton, { className: "h-10 w-20 rounded-md" }), _jsx(Skeleton, { className: "h-3 w-12 rounded-md" })] }), _jsx(View, { className: "mb-6 gap-3", children: [1, 2, 3, 4].map((i) => (_jsxs(View, { className: "flex-row items-center gap-3", children: [_jsx(Skeleton, { className: "h-4 w-4 rounded-sm" }), _jsx(Skeleton, { className: "h-3 w-3/5 rounded-md" })] }, i))) }), _jsx(Skeleton, { className: "h-10 w-full rounded-lg" })] }));
 }
-// ─── Component ───────────────────────────────────────────────
-export function PricingCard({ name, description, price, period = '/month', features, badge, highlighted = false, buttonLabel = 'Get Started', onPress, loading = false, className, ...props }) {
+export function PricingCard({ name, description, price, period = '/month', features, badge, highlighted = false, buttonLabel = 'Get Started', onPress, loading = false, className, style, ...props }) {
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
     if (loading) {
         return _jsx(PricingCardSkeleton, { highlighted: highlighted, className: className });
     }
-    return (_jsxs(View, { className: cn('overflow-hidden rounded-2xl p-6', highlighted ? 'border-2 border-primary bg-card' : 'border border-border bg-card', className), ...props, children: [_jsxs(View, { className: "mb-4 flex-row items-center justify-between", children: [_jsx(Text, { className: "text-lg font-semibold text-foreground", children: name }), badge && (_jsx(Badge, { variant: highlighted ? 'default' : 'secondary', children: _jsx(BadgeText, { children: badge }) }))] }), description && _jsx(Text, { className: "mb-4 text-sm text-muted-foreground", children: description }), _jsxs(View, { className: "mb-6 flex-row items-baseline", children: [_jsx(Text, { className: "text-4xl font-bold text-foreground", children: price }), _jsx(Text, { className: "ml-1 text-muted-foreground", children: period })] }), _jsx(View, { className: "mb-6 gap-3", children: features.map((feature, index) => (_jsxs(View, { className: "flex-row items-center gap-3", children: [_jsx(Text, { className: feature.included ? 'text-primary' : 'text-muted-foreground', children: feature.included ? '✓' : '✕' }), _jsx(Text, { className: cn('text-sm', feature.included ? 'text-foreground' : 'text-muted-foreground line-through'), children: feature.label })] }, index))) }), _jsx(Button, { variant: highlighted ? 'default' : 'outline', className: "w-full", onPress: onPress, children: _jsx(ButtonText, { children: buttonLabel }) })] }));
+    const emphasis = typographyStyle(visual, 'emphasis');
+    const label = typographyStyle(visual, 'label');
+    return (_jsxs(View, { className: cn('overflow-hidden', highlighted ? 'border-primary bg-card' : 'border-border bg-card', className), style: [
+            {
+                borderRadius: surfaceRadius(visual, 'xl'),
+                padding: surfacePadding(visual, 'lg'),
+                borderWidth: highlighted ? visual.borderWidthEmphasis : visual.borderWidthHairline,
+            },
+            highlighted ? shadowStyle(visual, colors, 'md') : null,
+            style,
+        ], ...props, children: [_jsxs(View, { className: "mb-4 flex-row items-center justify-between", children: [_jsx(Text, { className: "font-semibold text-foreground", style: emphasis, children: name }), badge && (_jsx(Badge, { variant: highlighted ? 'default' : 'secondary', children: _jsx(BadgeText, { children: badge }) }))] }), description && (_jsx(Text, { className: "mb-4 text-muted-foreground", style: label, children: description })), _jsxs(View, { className: "mb-6 flex-row items-baseline", children: [_jsx(Text, { className: "text-4xl font-bold text-foreground", children: price }), _jsx(Text, { className: "ml-1 text-muted-foreground", children: period })] }), _jsx(View, { className: "mb-6 gap-3", children: features.map((feature) => (_jsxs(View, { className: "flex-row items-center gap-3", children: [_jsx(Text, { className: feature.included ? 'text-primary' : 'text-muted-foreground', children: feature.included ? '✓' : '✕' }), _jsx(Text, { className: cn(feature.included ? 'text-foreground' : 'text-muted-foreground line-through'), style: label, children: feature.label })] }, feature.label))) }), _jsx(Button, { variant: highlighted ? 'default' : 'outline', className: "w-full", onPress: onPress, children: _jsx(ButtonText, { children: buttonLabel }) })] }));
 }
-//# sourceMappingURL=pricing-card.js.map

package/dist/blocks/commerce/product-card.d.ts

@@ -13,5 +13,4 @@ export interface ProductCardProps extends Omit<PressableProps, 'children'> {
     /** Show a skeleton placeholder instead of content. */
     loading?: boolean;
 }
-export declare function ProductCard({ imageUrl, title, description, price, originalPrice, badge, rating, reviewCount, inStock, variant, loading, className, style: styleProp, ...props }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=product-card.d.ts.map
+export declare function ProductCard({ imageUrl, title, description, price, originalPrice, badge, rating, reviewCount, inStock, variant, loading, className, style: styleProp, ...props }: ProductCardProps): import("react").JSX.Element;

package/dist/blocks/commerce/product-card.js

@@ -1,25 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { View, Pressable, Image } from 'react-native';
+import { Image } from 'expo-image';
+import { View, Pressable } from 'react-native';
 import { Text } from '../../components/text';
 import { Badge, BadgeText } from '../../components/badge';
 import { Skeleton } from '../../components/skeleton';
 import { cn } from '../../lib/cn';
 import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/interaction-tokens';
-// ─── Skeleton ─────────────────────────────────────────────────
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { surfacePadding, surfaceRadius, typographyStyle } from '../../lib/recipes';
 function ProductCardSkeleton({ variant = 'vertical', className, }) {
+    const visual = useVisualTokens();
     const isHorizontal = variant === 'horizontal';
-    return (_jsxs(View, { className: cn('overflow-hidden rounded-xl border border-border bg-card', isHorizontal ? 'flex-row' : 'flex-col', className), children: [_jsx(Skeleton, { className: cn(isHorizontal ? 'h-28 w-28' : 'aspect-square w-full rounded-none') }), _jsxs(View, { className: cn('flex-1 p-3 gap-2', isHorizontal && 'justify-center'), children: [_jsx(Skeleton, { className: "h-4 w-3/4 rounded-md" }), !isHorizontal && _jsx(Skeleton, { className: "h-3 w-full rounded-md" }), _jsx(Skeleton, { className: "h-3 w-1/3 rounded-md" }), _jsx(Skeleton, { className: "h-5 w-1/4 rounded-md" })] })] }));
+    return (_jsxs(View, { className: cn('overflow-hidden border border-border bg-card', isHorizontal ? 'flex-row' : 'flex-col', className), style: {
+            borderRadius: surfaceRadius(visual, 'xl'),
+            borderWidth: visual.borderWidthHairline,
+        }, children: [_jsx(Skeleton, { className: cn(isHorizontal ? 'h-28 w-28' : 'aspect-square w-full rounded-none') }), _jsxs(View, { className: cn('flex-1 gap-2', isHorizontal && 'justify-center'), style: { padding: surfacePadding(visual, 'sm') }, children: [_jsx(Skeleton, { className: "h-4 w-3/4 rounded-md" }), !isHorizontal && _jsx(Skeleton, { className: "h-3 w-full rounded-md" }), _jsx(Skeleton, { className: "h-3 w-1/3 rounded-md" }), _jsx(Skeleton, { className: "h-5 w-1/4 rounded-md" })] })] }));
 }
-// ─── Component ───────────────────────────────────────────────
 export function ProductCard({ imageUrl, title, description, price, originalPrice, badge, rating, reviewCount, inStock = true, variant = 'vertical', loading = false, className, style: styleProp, ...props }) {
     const isHorizontal = variant === 'horizontal';
     const interaction = useInteractionTokens();
+    const visual = useVisualTokens();
     if (loading) {
         return _jsx(ProductCardSkeleton, { variant: variant, className: className });
     }
-    return (_jsxs(Pressable, { className: cn('overflow-hidden rounded-xl border border-border bg-card', isHorizontal ? 'flex-row' : 'flex-col', className), style: withInteractivePressableStyle(styleProp, interaction, {
-            disabled: Boolean(props.disabled),
-            pressedVariant: 'strong',
-        }), ...props, children: [_jsxs(View, { className: cn('items-center justify-center bg-muted', isHorizontal ? 'h-28 w-28' : 'aspect-square w-full'), children: [imageUrl ? (_jsx(Image, { source: { uri: imageUrl }, className: "h-full w-full", resizeMode: "cover" })) : (_jsx(View, { className: "items-center justify-center gap-2", children: _jsx(View, { className: "h-10 w-10 rounded-lg bg-muted-soft items-center justify-center", children: _jsx(Text, { className: "text-muted-foreground text-lg", children: "\uD83D\uDCE6" }) }) })), badge && (_jsx(View, { className: "absolute left-2 top-2", children: _jsx(Badge, { variant: "destructive", children: _jsx(BadgeText, { children: badge }) }) }))] }), _jsxs(View, { className: cn('flex-1 p-3', isHorizontal && 'justify-center'), children: [_jsx(Text, { className: "font-medium text-foreground", numberOfLines: 2, children: title }), description && !isHorizontal && (_jsx(Text, { className: "mt-1 text-sm text-muted-foreground", numberOfLines: 2, children: description })), rating !== undefined && (_jsxs(View, { className: "mt-1 flex-row items-center gap-1", children: [_jsx(Text, { className: "text-sm text-accent", children: "\u2605" }), _jsxs(Text, { className: "text-sm text-muted-foreground", children: [rating.toFixed(1), reviewCount !== undefined && ` (${reviewCount})`] })] })), _jsxs(View, { className: "mt-2 flex-row items-center gap-2", children: [_jsx(Text, { className: "text-lg font-bold text-foreground", children: price }), originalPrice && (_jsx(Text, { className: "text-sm text-muted-foreground line-through", children: originalPrice }))] }), !inStock && _jsx(Text, { className: "mt-1 text-sm text-destructive", children: "Out of stock" })] })] }));
+    const label = typographyStyle(visual, 'label');
+    const interactiveStyle = withInteractivePressableStyle(styleProp, interaction, {
+        disabled: Boolean(props.disabled),
+        pressedVariant: 'strong',
+    });
+    const surfaceStyle = {
+        borderRadius: surfaceRadius(visual, 'xl'),
+        borderWidth: visual.borderWidthHairline,
+    };
+    return (_jsxs(Pressable, { className: cn('overflow-hidden border border-border bg-card', isHorizontal ? 'flex-row' : 'flex-col', className), style: (state) => {
+            const baseStyle = typeof interactiveStyle === 'function' ? interactiveStyle(state) : interactiveStyle;
+            return [surfaceStyle, baseStyle];
+        }, ...props, children: [_jsxs(View, { className: cn('items-center justify-center bg-muted', isHorizontal ? 'h-28 w-28' : 'aspect-square w-full'), children: [imageUrl ? (_jsx(Image, { source: { uri: imageUrl }, className: "h-full w-full", contentFit: "cover" })) : (_jsx(View, { className: "items-center justify-center gap-2", children: _jsx(View, { className: "h-10 w-10 bg-muted-soft items-center justify-center", style: { borderRadius: visual.radiusSm }, children: _jsx(Text, { className: "text-muted-foreground text-lg", children: "\uD83D\uDCE6" }) }) })), badge && (_jsx(View, { className: "absolute left-2 top-2", children: _jsx(Badge, { variant: "destructive", children: _jsx(BadgeText, { children: badge }) }) }))] }), _jsxs(View, { className: cn('flex-1', isHorizontal && 'justify-center'), style: { padding: surfacePadding(visual, 'sm') }, children: [_jsx(Text, { className: "font-medium text-foreground", numberOfLines: 2, children: title }), description && !isHorizontal && (_jsx(Text, { className: "mt-1 text-muted-foreground", style: label, numberOfLines: 2, children: description })), rating !== undefined && (_jsxs(View, { className: "mt-1 flex-row items-center gap-1", children: [_jsx(Text, { className: "text-accent", style: label, children: "\u2605" }), _jsxs(Text, { className: "text-muted-foreground", style: label, children: [rating.toFixed(1), reviewCount !== undefined && ` (${reviewCount})`] })] })), _jsxs(View, { className: "mt-2 flex-row items-center gap-2", children: [_jsx(Text, { className: "text-lg font-bold text-foreground", children: price }), originalPrice && (_jsx(Text, { className: "text-muted-foreground line-through", style: label, children: originalPrice }))] }), !inStock && (_jsx(Text, { className: "mt-1 text-destructive", style: label, children: "Out of stock" }))] })] }));
 }
-//# sourceMappingURL=product-card.js.map

package/dist/blocks/commerce/subscription-card.d.ts

@@ -13,5 +13,4 @@ export interface SubscriptionCardProps extends ViewProps {
     loading?: boolean;
     className?: string;
 }
-export declare function SubscriptionCard({ planName, price, period, expiresAt, isActive, onManage, onUpgrade, manageLabel, upgradeLabel, loading, className, ...props }: SubscriptionCardProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=subscription-card.d.ts.map
+export declare function SubscriptionCard({ planName, price, period, expiresAt, isActive, onManage, onUpgrade, manageLabel, upgradeLabel, loading, className, ...props }: SubscriptionCardProps): import("react").JSX.Element;

package/dist/blocks/commerce/subscription-card.js

@@ -6,13 +6,16 @@ import { Badge, BadgeText } from '../../components/badge';
 import { Skeleton } from '../../components/skeleton';
 import { Text } from '../../components/text';
 import { cn } from '../../lib/cn';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { typographyStyle } from '../../lib/recipes';
 function SubscriptionCardSkeleton({ className }) {
-    return (_jsxs(Card, { className: cn('rounded-xl', className), children: [_jsx(CardHeader, { className: "pb-2", children: _jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Skeleton, { className: "h-5 w-1/3 rounded-md" }), _jsx(Skeleton, { className: "h-5 w-16 rounded-full" })] }) }), _jsxs(CardContent, { className: "gap-2", children: [_jsxs(View, { className: "flex-row items-baseline gap-1", children: [_jsx(Skeleton, { className: "h-7 w-20 rounded-md" }), _jsx(Skeleton, { className: "h-3 w-12 rounded-md" })] }), _jsx(Skeleton, { className: "h-3 w-2/5 rounded-md" })] }), _jsxs(CardFooter, { className: "gap-2", children: [_jsx(Skeleton, { className: "h-10 flex-1 rounded-lg" }), _jsx(Skeleton, { className: "h-10 flex-1 rounded-lg" })] })] }));
+    return (_jsxs(Card, { className: className, children: [_jsx(CardHeader, { className: "pb-2", children: _jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Skeleton, { className: "h-5 w-1/3 rounded-md" }), _jsx(Skeleton, { className: "h-5 w-16 rounded-full" })] }) }), _jsxs(CardContent, { className: "gap-2", children: [_jsxs(View, { className: "flex-row items-baseline gap-1", children: [_jsx(Skeleton, { className: "h-7 w-20 rounded-md" }), _jsx(Skeleton, { className: "h-3 w-12 rounded-md" })] }), _jsx(Skeleton, { className: "h-3 w-2/5 rounded-md" })] }), _jsxs(CardFooter, { className: "gap-2", children: [_jsx(Skeleton, { className: "h-10 flex-1 rounded-lg" }), _jsx(Skeleton, { className: "h-10 flex-1 rounded-lg" })] })] }));
 }
 export function SubscriptionCard({ planName, price, period = '/month', expiresAt, isActive = true, onManage, onUpgrade, manageLabel = 'Manage plan', upgradeLabel = 'Upgrade', loading = false, className, ...props }) {
+    const visual = useVisualTokens();
     if (loading) {
         return _jsx(SubscriptionCardSkeleton, { className: className });
     }
-    return (_jsxs(Card, { className: cn('rounded-xl', className), ...props, children: [_jsx(CardHeader, { className: "pb-2", children: _jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(CardTitle, { children: planName }), _jsx(Badge, { variant: isActive ? 'success' : 'secondary', children: _jsx(BadgeText, { children: isActive ? 'Active' : 'Inactive' }) })] }) }), _jsxs(CardContent, { className: "gap-2", children: [_jsxs(View, { className: "flex-row items-baseline gap-1", children: [_jsx(Text, { className: "text-2xl font-bold text-foreground", children: price }), _jsx(Text, { className: "text-sm text-muted-foreground", children: period })] }), expiresAt ? (_jsxs(Text, { className: "text-sm text-muted-foreground", children: ["Renews on ", expiresAt] })) : (_jsx(Text, { className: "text-sm text-muted-foreground", children: "No renewal date set" }))] }), _jsxs(CardFooter, { className: "gap-2", children: [_jsx(Button, { variant: "outline", onPress: onManage, disabled: !onManage, children: _jsx(ButtonText, { children: manageLabel }) }), _jsx(Button, { onPress: onUpgrade, disabled: !onUpgrade, children: _jsx(ButtonText, { children: upgradeLabel }) })] })] }));
+    const label = typographyStyle(visual, 'label');
+    return (_jsxs(Card, { className: cn(className), ...props, children: [_jsx(CardHeader, { className: "pb-2", children: _jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(CardTitle, { children: planName }), _jsx(Badge, { variant: isActive ? 'success' : 'secondary', children: _jsx(BadgeText, { children: isActive ? 'Active' : 'Inactive' }) })] }) }), _jsxs(CardContent, { className: "gap-2", children: [_jsxs(View, { className: "flex-row items-baseline gap-1", children: [_jsx(Text, { className: "text-2xl font-bold text-foreground", children: price }), _jsx(Text, { className: "text-muted-foreground", style: label, children: period })] }), expiresAt ? (_jsxs(Text, { className: "text-muted-foreground", style: label, children: ["Renews on ", expiresAt] })) : (_jsx(Text, { className: "text-muted-foreground", style: label, children: "No renewal date set" }))] }), _jsxs(CardFooter, { className: "gap-2", children: [_jsx(Button, { variant: "outline", onPress: onManage, disabled: !onManage, children: _jsx(ButtonText, { children: manageLabel }) }), _jsx(Button, { onPress: onUpgrade, disabled: !onUpgrade, children: _jsx(ButtonText, { children: upgradeLabel }) })] })] }));
 }
-//# sourceMappingURL=subscription-card.js.map

package/dist/blocks/commerce/upgrade-banner.d.ts

@@ -8,5 +8,4 @@ export interface UpgradeBannerProps extends ViewProps {
     variant?: UpgradeBannerVariant;
     className?: string;
 }
-export declare function UpgradeBanner({ message, actionLabel, onAction, onDismiss, variant, className, ...props }: UpgradeBannerProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=upgrade-banner.d.ts.map
+export declare function UpgradeBanner({ message, actionLabel, onAction, onDismiss, variant, className, style, ...props }: UpgradeBannerProps): import("react").JSX.Element;

package/dist/blocks/commerce/upgrade-banner.js

@@ -3,7 +3,17 @@ import { View } from 'react-native';
 import { Button, ButtonText } from '../../components/button';
 import { Text } from '../../components/text';
 import { cn } from '../../lib/cn';
-export function UpgradeBanner({ message, actionLabel = 'Upgrade', onAction, onDismiss, variant = 'info', className, ...props }) {
-    return (_jsx(View, { className: cn('rounded-xl border p-4', variant === 'warning' ? 'border-warning/40 bg-warning/10' : 'border-info/40 bg-info/10', className), ...props, children: _jsxs(View, { className: "gap-3", children: [_jsx(Text, { className: "text-sm text-foreground", children: message }), _jsxs(View, { className: "flex-row gap-2", children: [_jsx(Button, { size: "sm", onPress: onAction, disabled: !onAction, children: _jsx(ButtonText, { children: actionLabel }) }), onDismiss ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: onDismiss, children: _jsx(ButtonText, { children: "Dismiss" }) })) : null] })] }) }));
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { surfacePadding, surfaceRadius, typographyStyle } from '../../lib/recipes';
+export function UpgradeBanner({ message, actionLabel = 'Upgrade', onAction, onDismiss, variant = 'info', className, style, ...props }) {
+    const visual = useVisualTokens();
+    const label = typographyStyle(visual, 'label');
+    return (_jsx(View, { className: cn('border', variant === 'warning' ? 'border-warning/40 bg-warning/10' : 'border-info/40 bg-info/10', className), style: [
+            {
+                borderRadius: surfaceRadius(visual, 'xl'),
+                padding: surfacePadding(visual, 'default'),
+                borderWidth: visual.borderWidthHairline,
+            },
+            style,
+        ], ...props, children: _jsxs(View, { className: "gap-3", children: [_jsx(Text, { className: "text-foreground", style: label, children: message }), _jsxs(View, { className: "flex-row gap-2", children: [_jsx(Button, { size: "sm", onPress: onAction, disabled: !onAction, children: _jsx(ButtonText, { children: actionLabel }) }), onDismiss ? (_jsx(Button, { size: "sm", variant: "ghost", onPress: onDismiss, children: _jsx(ButtonText, { children: "Dismiss" }) })) : null] })] }) }));
 }
-//# sourceMappingURL=upgrade-banner.js.map

package/dist/blocks/commerce/usage-bar.d.ts

@@ -7,5 +7,4 @@ export interface UsageBarProps extends ViewProps {
     variant?: UsageBarVariant;
     className?: string;
 }
-export declare function UsageBar({ label, used, limit, variant, className, ...props }: UsageBarProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=usage-bar.d.ts.map
+export declare function UsageBar({ label, used, limit, variant, className, ...props }: UsageBarProps): import("react").JSX.Element;

package/dist/blocks/commerce/usage-bar.js

@@ -2,6 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { Text } from '../../components/text';
 import { cn } from '../../lib/cn';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { typographyStyle } from '../../lib/recipes';
 function getUsageVariant(used, limit, variant) {
     if (variant)
         return variant;
@@ -15,6 +17,7 @@ function getUsageVariant(used, limit, variant) {
     return 'default';
 }
 export function UsageBar({ label, used, limit, variant, className, ...props }) {
+    const visual = useVisualTokens();
     const resolvedVariant = getUsageVariant(used, limit, variant);
     const safeLimit = limit <= 0 ? 1 : limit;
     const clamped = Math.max(0, Math.min(100, (used / safeLimit) * 100));
@@ -28,6 +31,5 @@ export function UsageBar({ label, used, limit, variant, className, ...props }) {
         : resolvedVariant === 'warning'
             ? 'text-warning'
             : 'text-muted-foreground';
-    return (_jsxs(View, { className: cn('gap-2', className), ...props, children: [_jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Text, { className: "text-sm font-medium text-foreground", children: label }), _jsxs(Text, { className: cn('text-xs', captionClass), children: [used, "/", limit] })] }), _jsx(View, { className: "h-2 overflow-hidden rounded-full bg-muted", children: _jsx(View, { className: cn('h-full rounded-full', progressClass), style: { width: `${clamped}%` } }) })] }));
+    return (_jsxs(View, { className: cn('gap-2', className), ...props, children: [_jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Text, { className: "font-medium text-foreground", style: typographyStyle(visual, 'label'), children: label }), _jsxs(Text, { className: cn(captionClass), style: typographyStyle(visual, 'caption'), children: [used, "/", limit] })] }), _jsx(View, { className: "h-2 overflow-hidden bg-muted", style: { borderRadius: visual.radiusSm }, children: _jsx(View, { className: cn('h-full', progressClass), style: { borderRadius: visual.radiusSm, width: `${clamped}%` } }) })] }));
 }
-//# sourceMappingURL=usage-bar.js.map

package/dist/blocks/datepicker/date-range-picker-modal.d.ts

@@ -29,12 +29,11 @@ export interface DateRangePickerModalProps extends FrostedSurfaceProps {
     className?: string;
 }
 declare function formatRangeDisplay(range: DateRange | null | undefined): string;
-export declare function DateRangePickerModal({ value, onValueChange, open, onOpenChange, minDate, maxDate, theme: customTheme, trigger, title, confirmLabel, className, frosted, blurIntensity, blurTintToken, }: DateRangePickerModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateRangePickerModal({ value, onValueChange, open, onOpenChange, minDate, maxDate, theme: customTheme, trigger, title, confirmLabel, className, frosted, blurIntensity, blurTintToken, }: DateRangePickerModalProps): React.JSX.Element;
 /** Compact trigger showing formatted range. Use as DateRangePickerModal's trigger prop. */
 export declare function DateRangePickerTrigger({ value, placeholder, className, }: {
     value?: DateRange | null;
     placeholder?: string;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export { formatRangeDisplay };
-//# sourceMappingURL=date-range-picker-modal.d.ts.map