@thewhileloop/whileui 1.2.3 → 2.0.0

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

package/dist/blocks/datepicker/date-range-picker-modal.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Modal, Pressable, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useUniwind } from 'uniwind';
@@ -8,6 +8,8 @@ import { Text } from '../../components/text';
 import { Button, ButtonText } from '../../components/button';
 import { cn } from '../../lib/cn';
 import { useThemeColors } from '../../lib/theme-colors';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { fieldRecipe, surfacePadding, surfaceRadius, typographyStyle } from '../../lib/recipes';
 import { useFrostedSurface } from '../../lib/frosted-surface';
 import { useCalendarTheme } from './use-calendar-theme';
 function formatRangeDisplay(range) {
@@ -49,6 +51,7 @@ export function DateRangePickerModal({ value, onValueChange, open, onOpenChange,
     const insets = useSafeAreaInsets();
     const { theme } = useUniwind();
     const colors = useThemeColors();
+    const visual = useVisualTokens();
     const frostedSurface = useFrostedSurface({
         frosted,
         blurIntensity,
@@ -61,9 +64,22 @@ export function DateRangePickerModal({ value, onValueChange, open, onOpenChange,
         calendarTheme.monthTextColor ??
         calendarTheme.dayTextColor ??
         colors.foreground;
-    const renderArrow = useCallback((direction) => (_jsx(Text, { className: "text-base font-medium", style: { color: arrowColor }, children: direction === 'left' ? '<' : '>' })), [arrowColor]);
+    const arrowFontSize = typographyStyle(visual, 'body').fontSize;
+    const renderArrow = useCallback((direction) => (_jsx(Text, { className: "font-medium", style: { color: arrowColor, fontSize: arrowFontSize }, children: direction === 'left' ? '<' : '>' })), [arrowColor, arrowFontSize]);
     const [draftStart, setDraftStart] = useState(value?.start ?? null);
     const [draftEnd, setDraftEnd] = useState(value?.end ?? null);
+    const prevOpenRef = useRef(open);
+    useEffect(() => {
+        if (open && !prevOpenRef.current) {
+            setDraftStart(value?.start ?? null);
+            setDraftEnd(value?.end ?? null);
+        }
+        else if (!open && prevOpenRef.current) {
+            setDraftStart(null);
+            setDraftEnd(null);
+        }
+        prevOpenRef.current = open;
+    }, [open, value]);
     const markedDates = useMemo(() => {
         const color = calendarTheme.selectedDayBackgroundColor;
         const textColor = calendarTheme.selectedDayTextColor;
@@ -120,14 +136,24 @@ export function DateRangePickerModal({ value, onValueChange, open, onOpenChange,
         setDraftStart(null);
         setDraftEnd(null);
     }, [onOpenChange]);
-    return (_jsxs(_Fragment, { children: [trigger ? (_jsx(Pressable, { onPress: handleOpen, className: cn('min-h-10 w-full flex-row items-center rounded-lg border border-border bg-muted px-4', className), children: trigger })) : null, _jsx(Modal, { visible: open, transparent: true, animationType: "slide", children: _jsx(Pressable, { className: "flex-1 justify-end", style: { backgroundColor: colors.overlay }, onPress: handleBackdropPress, children: _jsxs(Pressable, { className: cn('rounded-t-xl border border-border relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-background'), style: [
-                            { paddingBottom: Math.max(insets.bottom, 16) },
+    return (_jsxs(_Fragment, { children: [trigger ? (_jsx(Pressable, { accessibilityRole: "button", onPress: handleOpen, className: cn('w-full flex-row items-center border-border bg-muted', className), style: fieldRecipe(visual, 'default'), children: trigger })) : null, _jsx(Modal, { visible: open, transparent: true, animationType: "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: handleBackdropPress, children: _jsx(Pressable, { accessible: false, importantForAccessibility: "no", className: "flex-1 justify-end", style: { backgroundColor: colors.overlay }, onPress: handleBackdropPress, children: _jsxs(Pressable, { accessible: false, className: cn('border border-border relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-background'), style: [
+                            {
+                                borderTopLeftRadius: surfaceRadius(visual, 'xl'),
+                                borderTopRightRadius: surfaceRadius(visual, 'xl'),
+                                paddingBottom: Math.max(insets.bottom, surfacePadding(visual, 'sm')),
+                            },
                             frostedSurface.surfaceStyle,
-                        ], onPress: (e) => e.stopPropagation(), children: [frostedSurface.overlay, _jsxs(View, { className: "flex-row items-center justify-between border-b border-border px-4 py-3", children: [_jsx(Text, { className: "text-base font-medium text-foreground", children: title }), _jsx(Button, { size: "sm", onPress: handleConfirm, children: _jsx(ButtonText, { children: confirmLabel }) })] }), _jsx(View, { className: "p-4", children: _jsx(View, { className: "rounded-xl border border-border overflow-hidden", children: _jsx(Calendar, { current: draftStart ?? value?.start ?? undefined, onDayPress: handleDayPress, markedDates: markedDates, markingType: "period", minDate: minDate, maxDate: maxDate, theme: calendarTheme, renderArrow: renderArrow, enableSwipeMonths: true }, theme) }) })] }) }) })] }));
+                        ], onPress: (e) => e.stopPropagation(), children: [frostedSurface.overlay, _jsxs(View, { className: "flex-row items-center justify-between border-b border-border", style: {
+                                    paddingHorizontal: surfacePadding(visual, 'sm'),
+                                    paddingVertical: visual.controlPaddingYDefault,
+                                }, children: [_jsx(Text, { className: "font-medium text-foreground", style: typographyStyle(visual, 'body'), children: title }), _jsx(Button, { size: "sm", onPress: handleConfirm, children: _jsx(ButtonText, { children: confirmLabel }) })] }), _jsx(View, { style: { padding: surfacePadding(visual, 'sm') }, children: _jsx(View, { className: "border-border overflow-hidden", style: {
+                                        borderRadius: surfaceRadius(visual, 'lg'),
+                                        borderWidth: visual.borderWidthHairline,
+                                    }, children: _jsx(Calendar, { current: draftStart ?? value?.start ?? undefined, onDayPress: handleDayPress, markedDates: markedDates, markingType: "period", minDate: minDate, maxDate: maxDate, theme: calendarTheme, renderArrow: renderArrow, enableSwipeMonths: true }, theme) }) })] }) }) })] }));
 }
 /** Compact trigger showing formatted range. Use as DateRangePickerModal's trigger prop. */
 export function DateRangePickerTrigger({ value, placeholder = 'Select date range', className, }) {
-    return (_jsxs(View, { className: cn('flex-1 flex-row items-center min-w-0', className), children: [_jsx(Text, { className: cn('flex-1 text-base', value ? 'text-foreground' : 'text-muted-foreground'), numberOfLines: 1, children: value ? formatRangeDisplay(value) : placeholder }), _jsx(View, { className: "ml-2 shrink-0 h-2 w-2 rotate-45 border-b-2 border-r-2 border-muted-foreground" })] }));
+    const visual = useVisualTokens();
+    return (_jsxs(View, { className: cn('flex-1 flex-row items-center min-w-0', className), children: [_jsx(Text, { className: cn('flex-1', value ? 'text-foreground' : 'text-muted-foreground'), style: typographyStyle(visual, 'body'), numberOfLines: 1, children: value ? formatRangeDisplay(value) : placeholder }), _jsx(View, { className: "ml-2 shrink-0 h-2 w-2 rotate-45 border-b-2 border-r-2 border-muted-foreground" })] }));
 }
 export { formatRangeDisplay };
-//# sourceMappingURL=date-range-picker-modal.js.map

package/dist/blocks/datepicker/datepicker-inline.d.ts

@@ -12,5 +12,4 @@ export interface DatePickerInlineProps {
     theme?: CalendarTheme;
     className?: string;
 }
-export declare function DatePickerInline({ value, onValueChange, minDate, maxDate, theme: customTheme, className, }: DatePickerInlineProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=datepicker-inline.d.ts.map
+export declare function DatePickerInline({ value, onValueChange, minDate, maxDate, theme: customTheme, className, }: DatePickerInlineProps): import("react").JSX.Element;

package/dist/blocks/datepicker/datepicker-inline.js

@@ -6,16 +6,20 @@ import { Calendar } from 'react-native-calendars';
 import { Text } from '../../components/text';
 import { cn } from '../../lib/cn';
 import { useThemeColors } from '../../lib/theme-colors';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { surfaceRadius, typographyStyle } from '../../lib/recipes';
 import { useCalendarTheme } from './use-calendar-theme';
 export function DatePickerInline({ value, onValueChange, minDate, maxDate, theme: customTheme, className, }) {
     const { theme } = useUniwind();
     const colors = useThemeColors();
+    const visual = useVisualTokens();
     const calendarTheme = useCalendarTheme(customTheme);
     const arrowColor = calendarTheme.arrowColor ??
         calendarTheme.monthTextColor ??
         calendarTheme.dayTextColor ??
         colors.foreground;
-    const renderArrow = useCallback((direction) => (_jsx(Text, { className: "text-base font-medium", style: { color: arrowColor }, children: direction === 'left' ? '<' : '>' })), [arrowColor]);
+    const arrowFontSize = typographyStyle(visual, 'body').fontSize;
+    const renderArrow = useCallback((direction) => (_jsx(Text, { className: "font-medium", style: { color: arrowColor, fontSize: arrowFontSize }, children: direction === 'left' ? '<' : '>' })), [arrowColor, arrowFontSize]);
     const markedDates = useMemo(() => {
         if (!value)
             return undefined;
@@ -30,6 +34,8 @@ export function DatePickerInline({ value, onValueChange, minDate, maxDate, theme
     const handleDayPress = (day) => {
         onValueChange?.(day.dateString);
     };
-    return (_jsx(View, { className: cn('overflow-hidden rounded-xl border border-border', className), children: _jsx(Calendar, { current: value ?? undefined, onDayPress: handleDayPress, markedDates: markedDates, minDate: minDate, maxDate: maxDate, theme: calendarTheme, renderArrow: renderArrow, enableSwipeMonths: true }, theme) }));
+    return (_jsx(View, { className: cn('overflow-hidden border-border', className), style: {
+            borderRadius: surfaceRadius(visual, 'lg'),
+            borderWidth: visual.borderWidthHairline,
+        }, children: _jsx(Calendar, { current: value ?? undefined, onDayPress: handleDayPress, markedDates: markedDates, minDate: minDate, maxDate: maxDate, theme: calendarTheme, renderArrow: renderArrow, enableSwipeMonths: true }, theme) }));
 }
-//# sourceMappingURL=datepicker-inline.js.map