@thewhileloop/whileui 1.2.3 → 2.0.0

package/dist/components/container/container.d.ts

@@ -0,0 +1,146 @@
+import { type ViewProps } from 'react-native';
+import { type VariantProps } from '../../lib/tv';
+/**
+ * A centred content column with a maximum width.
+ *
+ * Phone-first layouts stretch to whatever the viewport is, which is correct at
+ * 390px and wrong at 1600px — line lengths become unreadable and related controls
+ * drift apart. This caps the content and centres it.
+ *
+ * There is no platform branch and none is needed: every size here is wider than any
+ * phone, so on iOS and Android the cap never engages and this renders as a plain
+ * full-width `View`. The same component is a no-op on native and the whole fix on
+ * desktop.
+ */
+declare const containerVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        /** Forms, auth, single-column reading. */
+        sm: string;
+        /** Default. Feeds, dashboards, most app screens. */
+        md: string;
+        /** Multi-column dashboards and wide tables. */
+        lg: string;
+        /** Near-full width, still stops short of an ultrawide monitor. */
+        xl: string;
+        /** Opt out — edge-to-edge at every width. */
+        full: string;
+    };
+    /** Fill the available height, for a container used as a screen root. */
+    fill: {
+        true: string;
+        false: string;
+    };
+}, undefined, "w-full self-center", import("tailwind-variants/dist/config.js").TVConfig<{
+    size: {
+        /** Forms, auth, single-column reading. */
+        sm: string;
+        /** Default. Feeds, dashboards, most app screens. */
+        md: string;
+        /** Multi-column dashboards and wide tables. */
+        lg: string;
+        /** Near-full width, still stops short of an ultrawide monitor. */
+        xl: string;
+        /** Opt out — edge-to-edge at every width. */
+        full: string;
+    };
+    /** Fill the available height, for a container used as a screen root. */
+    fill: {
+        true: string;
+        false: string;
+    };
+}, {
+    size: {
+        /** Forms, auth, single-column reading. */
+        sm: string;
+        /** Default. Feeds, dashboards, most app screens. */
+        md: string;
+        /** Multi-column dashboards and wide tables. */
+        lg: string;
+        /** Near-full width, still stops short of an ultrawide monitor. */
+        xl: string;
+        /** Opt out — edge-to-edge at every width. */
+        full: string;
+    };
+    /** Fill the available height, for a container used as a screen root. */
+    fill: {
+        true: string;
+        false: string;
+    };
+}>, {
+    size: {
+        /** Forms, auth, single-column reading. */
+        sm: string;
+        /** Default. Feeds, dashboards, most app screens. */
+        md: string;
+        /** Multi-column dashboards and wide tables. */
+        lg: string;
+        /** Near-full width, still stops short of an ultrawide monitor. */
+        xl: string;
+        /** Opt out — edge-to-edge at every width. */
+        full: string;
+    };
+    /** Fill the available height, for a container used as a screen root. */
+    fill: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        /** Forms, auth, single-column reading. */
+        sm: string;
+        /** Default. Feeds, dashboards, most app screens. */
+        md: string;
+        /** Multi-column dashboards and wide tables. */
+        lg: string;
+        /** Near-full width, still stops short of an ultrawide monitor. */
+        xl: string;
+        /** Opt out — edge-to-edge at every width. */
+        full: string;
+    };
+    /** Fill the available height, for a container used as a screen root. */
+    fill: {
+        true: string;
+        false: string;
+    };
+}, undefined, "w-full self-center", import("tailwind-variants/dist/config.js").TVConfig<{
+    size: {
+        /** Forms, auth, single-column reading. */
+        sm: string;
+        /** Default. Feeds, dashboards, most app screens. */
+        md: string;
+        /** Multi-column dashboards and wide tables. */
+        lg: string;
+        /** Near-full width, still stops short of an ultrawide monitor. */
+        xl: string;
+        /** Opt out — edge-to-edge at every width. */
+        full: string;
+    };
+    /** Fill the available height, for a container used as a screen root. */
+    fill: {
+        true: string;
+        false: string;
+    };
+}, {
+    size: {
+        /** Forms, auth, single-column reading. */
+        sm: string;
+        /** Default. Feeds, dashboards, most app screens. */
+        md: string;
+        /** Multi-column dashboards and wide tables. */
+        lg: string;
+        /** Near-full width, still stops short of an ultrawide monitor. */
+        xl: string;
+        /** Opt out — edge-to-edge at every width. */
+        full: string;
+    };
+    /** Fill the available height, for a container used as a screen root. */
+    fill: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+export interface ContainerProps extends ViewProps, VariantProps<typeof containerVariants> {
+    className?: string;
+}
+export declare function Container({ size, fill, className, children, ...props }: ContainerProps): import("react").JSX.Element;
+export { containerVariants };

package/dist/components/container/container.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { cn } from '../../lib/cn';
+import { tv } from '../../lib/tv';
+/**
+ * A centred content column with a maximum width.
+ *
+ * Phone-first layouts stretch to whatever the viewport is, which is correct at
+ * 390px and wrong at 1600px — line lengths become unreadable and related controls
+ * drift apart. This caps the content and centres it.
+ *
+ * There is no platform branch and none is needed: every size here is wider than any
+ * phone, so on iOS and Android the cap never engages and this renders as a plain
+ * full-width `View`. The same component is a no-op on native and the whole fix on
+ * desktop.
+ */
+const containerVariants = tv({
+    base: 'w-full self-center',
+    variants: {
+        size: {
+            /** Forms, auth, single-column reading. */
+            sm: 'max-w-xl',
+            /** Default. Feeds, dashboards, most app screens. */
+            md: 'max-w-3xl',
+            /** Multi-column dashboards and wide tables. */
+            lg: 'max-w-5xl',
+            /** Near-full width, still stops short of an ultrawide monitor. */
+            xl: 'max-w-7xl',
+            /** Opt out — edge-to-edge at every width. */
+            full: 'max-w-none',
+        },
+        /** Fill the available height, for a container used as a screen root. */
+        fill: {
+            true: 'flex-1',
+            false: '',
+        },
+    },
+    defaultVariants: { size: 'md', fill: false },
+});
+export function Container({ size, fill, className, children, ...props }) {
+    return (_jsx(View, { className: cn(containerVariants({ size, fill }), className), ...props, children: children }));
+}
+export { containerVariants };

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

@@ -0,0 +1 @@
+export * from './container';

package/dist/components/container/index.js

@@ -0,0 +1 @@
+export * from './container';

package/dist/components/context-menu/context-menu.d.ts

@@ -21,29 +21,28 @@ export interface ContextMenuLabelProps extends ViewProps {
 export interface ContextMenuSeparatorProps extends ViewProps {
     className?: string;
 }
-declare function ContextMenu({ children }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenu({ children }: ContextMenuProps): React.JSX.Element;
 declare namespace ContextMenu {
     var displayName: string;
 }
-declare function ContextMenuTrigger({ className, children, asChild, ...props }: ContextMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuTrigger({ className, children, asChild, ...props }: ContextMenuTriggerProps): React.JSX.Element;
 declare namespace ContextMenuTrigger {
     var displayName: string;
 }
-declare function ContextMenuContent({ className, children, frosted, blurIntensity, blurTintToken, style, ...props }: ContextMenuContentProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuContent({ className, children, frosted, blurIntensity, blurTintToken, style, ...props }: ContextMenuContentProps): React.JSX.Element;
 declare namespace ContextMenuContent {
     var displayName: string;
 }
-declare function ContextMenuItem({ className, ...props }: ContextMenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuItem({ className, style, ...props }: ContextMenuItemProps): React.JSX.Element;
 declare namespace ContextMenuItem {
     var displayName: string;
 }
-declare function ContextMenuLabel({ className, children, ...props }: ContextMenuLabelProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuLabel({ className, children, ...props }: ContextMenuLabelProps): React.JSX.Element;
 declare namespace ContextMenuLabel {
     var displayName: string;
 }
-declare function ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorProps): import("react/jsx-runtime").JSX.Element;
+declare function ContextMenuSeparator({ className, style, ...props }: ContextMenuSeparatorProps): React.JSX.Element;
 declare namespace ContextMenuSeparator {
     var displayName: string;
 }
 export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, };
-//# sourceMappingURL=context-menu.d.ts.map

package/dist/components/context-menu/context-menu.js

@@ -1,16 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useContext, useMemo, useState } from 'react';
 import { View, Modal, Pressable, Text } from 'react-native';
 import { cn } from '../../lib/cn';
 import { useFrostedSurface } from '../../lib/frosted-surface';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { useThemeColors } from '../../lib/theme-colors';
+import { shadowStyle, surfaceRadius, typographyStyle } from '../../lib/recipes';
 const ContextMenuContext = createContext({
     open: false,
     setOpen: () => { },
 });
-// ─── Components ──────────────────────────────────────────────
 function ContextMenu({ children }) {
     const [open, setOpen] = useState(false);
-    return (_jsx(ContextMenuContext.Provider, { value: { open, setOpen }, children: children }));
+    const contextValue = useMemo(() => ({ open, setOpen }), [open]);
+    return _jsx(ContextMenuContext.Provider, { value: contextValue, children: children });
 }
 function ContextMenuTrigger({ className, children, asChild, ...props }) {
     const { setOpen } = useContext(ContextMenuContext);
@@ -25,10 +28,12 @@ function ContextMenuTrigger({ className, children, asChild, ...props }) {
             ...props,
         });
     }
-    return (_jsx(Pressable, { className: cn(className), onLongPress: () => setOpen(true), delayLongPress: 300, ...props, children: children }));
+    return (_jsx(Pressable, { accessibilityRole: "button", className: cn(className), onLongPress: () => setOpen(true), delayLongPress: 300, ...props, children: children }));
 }
 function ContextMenuContent({ className, children, frosted = false, blurIntensity, blurTintToken, style, ...props }) {
     const { open, setOpen } = useContext(ContextMenuContext);
+    const visual = useVisualTokens();
+    const colors = useThemeColors();
     const frostedSurface = useFrostedSurface({
         frosted,
         blurIntensity,
@@ -36,21 +41,47 @@ function ContextMenuContent({ className, children, frosted = false, blurIntensit
         defaultTintToken: 'popover',
         defaultBlurPreset: 'medium',
     });
-    const contentStyle = [frostedSurface.surfaceStyle, style];
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "slide", onRequestClose: () => setOpen(false), children: _jsx(Pressable, { className: "flex-1 justify-end", onPress: () => setOpen(false), children: _jsxs(Pressable, { className: cn('w-full rounded-t-xl border-t border-x border-border p-2 pb-8 shadow-lg relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', className), style: contentStyle, onPress: (e) => e.stopPropagation(), ...props, children: [frostedSurface.overlay, children] }) }) }));
+    const contentStyle = [
+        {
+            borderTopLeftRadius: surfaceRadius(visual, 'lg'),
+            borderTopRightRadius: surfaceRadius(visual, 'lg'),
+            borderTopWidth: visual.borderWidthHairline,
+            borderLeftWidth: visual.borderWidthHairline,
+            borderRightWidth: visual.borderWidthHairline,
+        },
+        shadowStyle(visual, colors, 'md'),
+        frostedSurface.surfaceStyle,
+        style,
+    ];
+    return (_jsx(Modal, { visible: open, transparent: true, animationType: "slide", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: () => setOpen(false), children: _jsx(Pressable, { accessible: false, importantForAccessibility: "no", className: "flex-1 justify-end", onPress: () => setOpen(false), children: _jsxs(Pressable, { accessible: false, accessibilityRole: "menu", className: cn('w-full border-border p-2 pb-8 relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-popover', className), style: contentStyle, onPress: (e) => e.stopPropagation(), ...props, children: [frostedSurface.overlay, children] }) }) }));
 }
-function ContextMenuItem({ className, ...props }) {
+function ContextMenuItem({ className, style, ...props }) {
     const { setOpen } = useContext(ContextMenuContext);
-    return (_jsx(Pressable, { className: cn('flex flex-row items-center rounded-md px-2 py-2 active:bg-accent', className), onPress: (e) => {
+    const visual = useVisualTokens();
+    const tokenStyle = {
+        borderRadius: visual.radiusSm,
+        minHeight: visual.touchTargetMinSize,
+        paddingHorizontal: visual.controlPaddingXSm,
+        paddingVertical: visual.controlPaddingYSm,
+    };
+    return (_jsx(Pressable, { accessibilityRole: "menuitem", className: cn('flex flex-row items-center active:bg-accent', className), style: (state) => [tokenStyle, typeof style === 'function' ? style(state) : style], onPress: (e) => {
             props.onPress?.(e);
             setOpen(false);
         }, ...props }));
 }
 function ContextMenuLabel({ className, children, ...props }) {
-    return (_jsx(View, { className: cn('px-2 py-1.5', className), ...props, children: typeof children === 'string' ? (_jsx(Text, { className: "text-sm font-semibold text-foreground", children: children })) : (children) }));
+    const visual = useVisualTokens();
+    return (_jsx(View, { className: cn('px-2 py-1.5', className), ...props, children: typeof children === 'string' ? (_jsx(Text
+        // A menu section label is a heading — without this it announces as plain text
+        // and rotor navigation cannot find it.
+        , { 
+            // A menu section label is a heading — without this it announces as plain text
+            // and rotor navigation cannot find it.
+            accessibilityRole: "header", className: "font-semibold text-foreground", style: typographyStyle(visual, 'label'), children: children })) : (children) }));
 }
-function ContextMenuSeparator({ className, ...props }) {
-    return _jsx(View, { className: cn('-mx-1 my-1 h-px bg-border', className), ...props });
+function ContextMenuSeparator({ className, style, ...props }) {
+    const visual = useVisualTokens();
+    return (_jsx(View, { className: cn('-mx-1 my-1 bg-border', className), style: [{ height: visual.borderWidthHairline }, style], ...props }));
 }
 ContextMenu.displayName = 'ContextMenu';
 ContextMenuTrigger.displayName = 'ContextMenuTrigger';
@@ -59,4 +90,3 @@ ContextMenuItem.displayName = 'ContextMenuItem';
 ContextMenuLabel.displayName = 'ContextMenuLabel';
 ContextMenuSeparator.displayName = 'ContextMenuSeparator';
 export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, };
-//# sourceMappingURL=context-menu.js.map

package/dist/components/context-menu/index.d.ts

@@ -1,2 +1 @@
 export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, type ContextMenuProps, type ContextMenuTriggerProps, type ContextMenuContentProps, type ContextMenuItemProps, type ContextMenuLabelProps, type ContextMenuSeparatorProps, } from './context-menu';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/context-menu/index.js

@@ -1,2 +1 @@
 export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, } from './context-menu';
-//# sourceMappingURL=index.js.map

package/dist/components/data-row/data-row.d.ts

@@ -66,4 +66,3 @@ declare const DataRowLabel: React.ForwardRefExoticComponent<DataRowLabelProps &
 declare const DataRowDescription: React.ForwardRefExoticComponent<DataRowDescriptionProps & React.RefAttributes<Text>>;
 declare const DataRowValue: React.ForwardRefExoticComponent<DataRowValueProps & React.RefAttributes<Text>>;
 export { DataRow, DataRowLeft, DataRowCenter, DataRowRight, DataRowLabel, DataRowDescription, DataRowValue, dataRowVariants, };
-//# sourceMappingURL=data-row.d.ts.map

package/dist/components/data-row/data-row.js

@@ -1,27 +1,40 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useMemo } from 'react';
 import { Text, View } from 'react-native';
 import { cn } from '../../lib/cn';
 import { tv } from '../../lib/tv';
 import { useVisualTokens } from '../../lib/visual-tokens';
+import { typographyStyle } from '../../lib/recipes';
 const dataRowVariants = tv({
     base: 'w-full flex-row items-center gap-3',
     variants: {
         size: {
-            default: 'min-h-11 py-2',
-            compact: 'min-h-10 py-1.5',
+            default: '',
+            compact: '',
         },
     },
     defaultVariants: {
         size: 'default',
     },
 });
+function getDataRowStyle(visual, size) {
+    if (size === 'compact') {
+        return {
+            minHeight: Math.round((visual.controlHeightSm + visual.controlHeightDefault) / 2),
+            paddingVertical: Math.max(4, Math.round(visual.controlPaddingYSm * 0.75)),
+        };
+    }
+    return {
+        minHeight: visual.controlHeightDefault,
+        paddingVertical: visual.controlPaddingYSm,
+    };
+}
 const dataRowLabelVariants = tv({
     base: 'font-medium text-foreground',
     variants: {
         size: {
-            default: 'text-sm',
-            compact: 'text-xs',
+            default: '',
+            compact: '',
         },
     },
     defaultVariants: {
@@ -32,8 +45,8 @@ const dataRowDescriptionVariants = tv({
     base: 'text-muted-foreground',
     variants: {
         size: {
-            default: 'text-xs',
-            compact: 'text-xs',
+            default: '',
+            compact: '',
         },
     },
     defaultVariants: {
@@ -44,8 +57,8 @@ const dataRowValueVariants = tv({
     base: 'font-medium text-foreground text-right',
     variants: {
         size: {
-            default: 'text-sm',
-            compact: 'text-xs',
+            default: '',
+            compact: '',
         },
     },
     defaultVariants: {
@@ -55,8 +68,10 @@ const dataRowValueVariants = tv({
 const DataRowContext = createContext({
     size: 'default',
 });
-const DataRow = React.forwardRef(({ className, size = 'default', ...props }, ref) => {
-    return (_jsx(DataRowContext.Provider, { value: { size }, children: _jsx(View, { ref: ref, className: cn(dataRowVariants({ size }), className), ...props }) }));
+const DataRow = React.forwardRef(({ className, size = 'default', style, ...props }, ref) => {
+    const visual = useVisualTokens();
+    const contextValue = useMemo(() => ({ size }), [size]);
+    return (_jsx(DataRowContext.Provider, { value: contextValue, children: _jsx(View, { ref: ref, className: cn(dataRowVariants({ size }), className), style: [getDataRowStyle(visual, size), style], ...props }) }));
 });
 DataRow.displayName = 'DataRow';
 const DataRowLeft = React.forwardRef(({ className, ...props }, ref) => {
@@ -72,21 +87,24 @@ const DataRowRight = React.forwardRef(({ className, style, ...props }, ref) => {
     return (_jsx(View, { ref: ref, className: cn('ml-2 shrink-0 items-end justify-center', className), style: [{ maxWidth: `${visual.dataRowRightMaxWidthRatio * 100}%` }, style], ...props }));
 });
 DataRowRight.displayName = 'DataRowRight';
-const DataRowLabel = React.forwardRef(({ className, ...props }, ref) => {
+const DataRowLabel = React.forwardRef(({ className, style, ...props }, ref) => {
     const { size } = useContext(DataRowContext);
-    return (_jsx(Text, { ref: ref, className: cn(dataRowLabelVariants({ size }), className), numberOfLines: 1, ...props }));
+    const visual = useVisualTokens();
+    return (_jsx(Text, { ref: ref, className: cn(dataRowLabelVariants({ size }), className), style: [typographyStyle(visual, size === 'compact' ? 'caption' : 'label'), style], numberOfLines: 1, ...props }));
 });
 DataRowLabel.displayName = 'DataRowLabel';
 const DataRowDescription = React.forwardRef(({ className, style, ...props }, ref) => {
     const { size } = useContext(DataRowContext);
     const visual = useVisualTokens();
-    return (_jsx(Text, { ref: ref, className: cn(dataRowDescriptionVariants({ size }), className), style: size === 'compact' ? [{ fontSize: visual.dataRowCompactDescriptionSize }, style] : style, numberOfLines: 2, ...props }));
+    return (_jsx(Text, { ref: ref, className: cn(dataRowDescriptionVariants({ size }), className), style: size === 'compact'
+            ? [{ fontSize: visual.dataRowCompactDescriptionSize }, style]
+            : [typographyStyle(visual, 'caption'), style], numberOfLines: 2, ...props }));
 });
 DataRowDescription.displayName = 'DataRowDescription';
-const DataRowValue = React.forwardRef(({ className, ...props }, ref) => {
+const DataRowValue = React.forwardRef(({ className, style, ...props }, ref) => {
     const { size } = useContext(DataRowContext);
-    return (_jsx(Text, { ref: ref, className: cn(dataRowValueVariants({ size }), className), numberOfLines: 1, ...props }));
+    const visual = useVisualTokens();
+    return (_jsx(Text, { ref: ref, className: cn(dataRowValueVariants({ size }), className), style: [typographyStyle(visual, size === 'compact' ? 'caption' : 'label'), style], numberOfLines: 1, ...props }));
 });
 DataRowValue.displayName = 'DataRowValue';
 export { DataRow, DataRowLeft, DataRowCenter, DataRowRight, DataRowLabel, DataRowDescription, DataRowValue, dataRowVariants, };
-//# sourceMappingURL=data-row.js.map

package/dist/components/data-row/index.d.ts

@@ -1,2 +1 @@
 export { DataRow, DataRowLeft, DataRowCenter, DataRowRight, DataRowLabel, DataRowDescription, DataRowValue, dataRowVariants, type DataRowProps, type DataRowLeftProps, type DataRowCenterProps, type DataRowRightProps, type DataRowLabelProps, type DataRowDescriptionProps, type DataRowValueProps, } from './data-row';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/data-row/index.js

@@ -1,2 +1 @@
 export { DataRow, DataRowLeft, DataRowCenter, DataRowRight, DataRowLabel, DataRowDescription, DataRowValue, dataRowVariants, } from './data-row';
-//# sourceMappingURL=index.js.map

package/dist/components/dialog/dialog.d.ts

@@ -33,37 +33,36 @@ export interface DialogCloseProps extends PressableProps {
     className?: string;
     asChild?: boolean;
 }
-declare function Dialog({ defaultOpen, open: controlledOpen, onOpenChange, children, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+declare function Dialog({ defaultOpen, open: controlledOpen, onOpenChange, children, }: DialogProps): React.JSX.Element;
 declare namespace Dialog {
     var displayName: string;
 }
-declare function DialogTrigger({ className, children, asChild, ...props }: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogTrigger({ className, children, asChild, onPress, ...props }: DialogTriggerProps): React.JSX.Element;
 declare namespace DialogTrigger {
     var displayName: string;
 }
-declare function DialogContent({ className, children, frosted, blurIntensity, blurTintToken, style, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({ className, children, frosted, blurIntensity, blurTintToken, style, ...props }: DialogContentProps): React.JSX.Element;
 declare namespace DialogContent {
     var displayName: string;
 }
-declare function DialogHeader({ className, ...props }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeader({ className, ...props }: DialogHeaderProps): React.JSX.Element;
 declare namespace DialogHeader {
     var displayName: string;
 }
-declare function DialogFooter({ className, ...props }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ className, ...props }: DialogFooterProps): React.JSX.Element;
 declare namespace DialogFooter {
     var displayName: string;
 }
-declare function DialogTitle({ className, ...props }: DialogTitleProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ className, style, ...props }: DialogTitleProps): React.JSX.Element;
 declare namespace DialogTitle {
     var displayName: string;
 }
-declare function DialogDescription({ className, ...props }: DialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({ className, style, ...props }: DialogDescriptionProps): React.JSX.Element;
 declare namespace DialogDescription {
     var displayName: string;
 }
-declare function DialogClose({ className, children, asChild, ...props }: DialogCloseProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogClose({ className, children, asChild, onPress, ...props }: DialogCloseProps): React.JSX.Element;
 declare namespace DialogClose {
     var displayName: string;
 }
 export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, };
-//# sourceMappingURL=dialog.d.ts.map

package/dist/components/dialog/dialog.js

@@ -1,40 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { View, Modal, Pressable, Text, } from 'react-native';
 import { cn } from '../../lib/cn';
+import { composeEventHandlers } from '../../lib/compose-event-handlers';
 import { useThemeColors } from '../../lib/theme-colors';
 import { useFrostedSurface } from '../../lib/frosted-surface';
+import { useVisualTokens } from '../../lib/visual-tokens';
+import { shadowStyle, typographyStyle } from '../../lib/recipes';
 const DialogContext = createContext({
     open: false,
     setOpen: () => { },
 });
-// ─── Components ──────────────────────────────────────────────
 function Dialog({ defaultOpen = false, open: controlledOpen, onOpenChange, children, }) {
     const [internalOpen, setInternalOpen] = useState(defaultOpen);
     const open = controlledOpen ?? internalOpen;
-    const setOpen = (value) => {
-        setInternalOpen(value);
+    const setOpen = useCallback((value) => {
+        if (controlledOpen === undefined) {
+            setInternalOpen(value);
+        }
         onOpenChange?.(value);
-    };
-    return _jsx(DialogContext.Provider, { value: { open, setOpen }, children: children });
+    }, [controlledOpen, onOpenChange]);
+    const contextValue = useMemo(() => ({ open, setOpen }), [open, setOpen]);
+    return _jsx(DialogContext.Provider, { value: contextValue, children: children });
 }
-function DialogTrigger({ className, children, asChild, ...props }) {
+function DialogTrigger({ className, children, asChild, onPress, ...props }) {
     const { setOpen } = useContext(DialogContext);
     if (asChild && React.isValidElement(children)) {
         const child = children;
         return React.cloneElement(child, {
-            onPress: (e) => {
-                child.props.onPress?.(e);
-                setOpen(true);
-            },
             ...props,
+            className: cn(child.props.className, className),
+            onPress: composeEventHandlers(composeEventHandlers(child.props.onPress, onPress), () => setOpen(true)),
         });
     }
-    return (_jsx(Pressable, { className: cn(className), onPress: () => setOpen(true), ...props, children: children }));
+    return (_jsx(Pressable, { accessibilityRole: "button", ...props, className: cn(className), onPress: composeEventHandlers(onPress, () => setOpen(true)), children: children }));
 }
 function DialogContent({ className, children, frosted = false, blurIntensity, blurTintToken, style, ...props }) {
     const { open, setOpen } = useContext(DialogContext);
     const colors = useThemeColors();
+    const visual = useVisualTokens();
     const frostedSurface = useFrostedSurface({
         frosted,
         blurIntensity,
@@ -43,7 +47,28 @@ function DialogContent({ className, children, frosted = false, blurIntensity, bl
         defaultBlurPreset: 'medium',
     });
     const contentStyle = [frostedSurface.surfaceStyle, style];
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: () => setOpen(false), children: _jsx(Pressable, { className: "flex-1 justify-center items-center px-4", style: { backgroundColor: colors.overlayStrong }, onPress: () => setOpen(false), children: _jsxs(Pressable, { className: cn('w-full max-w-lg rounded-lg border border-border p-6 shadow-lg relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-background', className), style: contentStyle, onPress: (e) => e.stopPropagation(), ...props, children: [frostedSurface.overlay, children] }) }) }));
+    return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", statusBarTranslucent: true, navigationBarTranslucent: true, onRequestClose: () => setOpen(false), children: _jsx(Pressable
+        // Tap-to-dismiss is a pointer affordance. Left accessible it would swallow the
+        // whole panel into one element; screen reader users close from inside.
+        , { 
+            // Tap-to-dismiss is a pointer affordance. Left accessible it would swallow the
+            // whole panel into one element; screen reader users close from inside.
+            accessible: false, importantForAccessibility: "no", className: "flex-1 justify-center items-center px-4", style: { backgroundColor: colors.overlayStrong }, onPress: () => setOpen(false), children: _jsxs(Pressable
+            // Container, not a control — Pressable defaults to `accessible: true`, which
+            // on iOS collapses every descendant into one accessibility element.
+            , { 
+                // Container, not a control — Pressable defaults to `accessible: true`, which
+                // on iOS collapses every descendant into one accessibility element.
+                accessible: false, className: cn('w-full border-border relative overflow-hidden', frosted ? 'bg-transparent' : 'bg-background', className), style: [
+                    {
+                        maxWidth: visual.sheetMaxWidth,
+                        borderWidth: visual.borderWidthHairline,
+                        borderRadius: visual.radiusXl,
+                        padding: visual.surfacePaddingDefault,
+                    },
+                    shadowStyle(visual, colors, 'lg'),
+                    contentStyle,
+                ], onPress: (e) => e.stopPropagation(), ...props, children: [frostedSurface.overlay, children] }) }) }));
 }
 function DialogHeader({ className, ...props }) {
     return _jsx(View, { className: cn('flex flex-col gap-1.5 pb-4', className), ...props });
@@ -51,26 +76,26 @@ function DialogHeader({ className, ...props }) {
 function DialogFooter({ className, ...props }) {
     return _jsx(View, { className: cn('flex flex-row justify-end gap-2 pt-4', className), ...props });
 }
-function DialogTitle({ className, ...props }) {
-    return _jsx(Text, { className: cn('text-lg font-semibold text-foreground', className), ...props });
+function DialogTitle({ className, style, ...props }) {
+    const visual = useVisualTokens();
+    return (_jsx(Text, { className: cn('font-semibold text-foreground', className), style: [typographyStyle(visual, 'title'), style], ...props }));
 }
-function DialogDescription({ className, ...props }) {
-    return _jsx(Text, { className: cn('text-sm text-muted-foreground', className), ...props });
+function DialogDescription({ className, style, ...props }) {
+    const visual = useVisualTokens();
+    return (_jsx(Text, { className: cn('text-muted-foreground', className), style: [typographyStyle(visual, 'label'), style], ...props }));
 }
 // ... (interfaces update needed too)
-function DialogClose({ className, children, asChild, ...props }) {
+function DialogClose({ className, children, asChild, onPress, ...props }) {
     const { setOpen } = useContext(DialogContext);
     if (asChild && React.isValidElement(children)) {
         const child = children;
         return React.cloneElement(child, {
-            onPress: (e) => {
-                child.props.onPress?.(e);
-                setOpen(false);
-            },
             ...props,
+            className: cn(child.props.className, className),
+            onPress: composeEventHandlers(composeEventHandlers(child.props.onPress, onPress), () => setOpen(false)),
         });
     }
-    return (_jsx(Pressable, { className: cn(className), onPress: () => setOpen(false), ...props, children: children }));
+    return (_jsx(Pressable, { accessibilityRole: "button", ...props, className: cn(className), onPress: composeEventHandlers(onPress, () => setOpen(false)), children: children }));
 }
 Dialog.displayName = 'Dialog';
 DialogTrigger.displayName = 'DialogTrigger';
@@ -81,4 +106,3 @@ DialogTitle.displayName = 'DialogTitle';
 DialogDescription.displayName = 'DialogDescription';
 DialogClose.displayName = 'DialogClose';
 export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, };
-//# sourceMappingURL=dialog.js.map

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

@@ -1,2 +1 @@
 export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, type DialogProps, type DialogTriggerProps, type DialogContentProps, type DialogHeaderProps, type DialogFooterProps, type DialogTitleProps, type DialogDescriptionProps, type DialogCloseProps, } from './dialog';
-//# sourceMappingURL=index.d.ts.map