@mrmeg/expo-ui 0.22.0 → 0.23.0

package/CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to `@mrmeg/expo-ui` are documented here. This project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.23.0]
+
+### Added
+
+- **Density tokens.** `spacing` gains `smd` (12) and `mdl` (20) scale steps plus
+  semantic layout tokens: `screenPadding`, `sectionSpacing` (now 24),
+  `cardPadding`, `dialogPadding`, `rowPaddingY`/`rowPaddingX`, `rowGap`,
+  `rowMinHeight`, and `formRowMinHeight`. Components read these so a single
+  retune shifts the whole library's density.
+
+### Changed
+
+- **Compact surfaces and rows.** `Card` header/content/footer padding drops
+  from 24 to 16 with a 16px title. `Item` rows use 10/16 padding and a 12px
+  gap, with a 40px visual min height on web while native keeps the 44pt touch
+  target. `Checkbox` and `RadioGroup` rows are 32px on web (native unchanged).
+  `Dialog`/`AlertDialog` padding is 20, `StatCard` padding is 16,
+  `EmptyState` vertical padding is 32, and `Accordion` triggers use 12px
+  vertical padding.
+- **Dialog spacing is symmetric.** `DialogContent` and `AlertDialogContent`
+  space their children with a 16px gap instead of fixed header/footer
+  margins, so a header-only dialog no longer reads bottom-heavy.
+
+### Fixed
+
+- **Dialog could not be dismissed on web.** The web overlay primitive wrapped
+  the backdrop in a react-native-web `Pressable` whose click handler stopped
+  propagation, so outside presses (mouse and touch) and Escape never reached
+  Radix. `DialogContent` now renders the overlay `asChild` on web; native is
+  unchanged.
+
 ## [0.22.0]
 
 ### Added

package/LLM_USAGE.md

@@ -157,11 +157,18 @@ semantic colors without destructuring `withAlpha` outside the factory:
 const { styles } = useStyles(({ theme, spacing, withAlpha }) => ({
   card: {
     backgroundColor: withAlpha(theme.colors.primary, 0.08),
-    padding: spacing.md,
+    padding: spacing.cardPadding,
   },
 }));
 ```
 
+Layout spacing uses semantic density tokens rather than raw scale steps:
+`spacing.screenPadding` (16) for screen and block gutters, `spacing.cardPadding`
+(16) for bordered panels, `spacing.sectionSpacing` (24) between grouped lists,
+`spacing.dialogPadding` (20) for dialogs, and `spacing.rowPaddingY`/`rowPaddingX`
+(10/16) with `spacing.rowGap` (12) for list rows. `Item` already applies the row
+tokens and keeps a 44px hit area on native while rendering 40px on web.
+
 When the saved theme preference is `system`, the package theme store owns the
 OS color-scheme subscription, including web `prefers-color-scheme`. Do not add
 app-local Appearance or `matchMedia` listeners for package components; import

package/README.md

@@ -124,6 +124,24 @@ const { styles } = useStyles(({ theme, spacing, withAlpha }) => ({
 }));
 ```
 
+### Spacing and density
+
+`spacing` exposes an 8px base scale (`xxs` 2, `xs` 4, `sm` 8, `smd` 12, `md` 16, `mdl` 20, `lg` 24, `xl` 32, `xxl` 48, `xxxl` 64) plus semantic density tokens that package components read from. Reach for the semantic names in app code so a future density tune lands everywhere at once:
+
+| Token | Value | Use |
+|-------|-------|-----|
+| `screenPadding` | 16 | Horizontal gutter for screens, scroll content, and landing blocks |
+| `sectionSpacing` | 24 | Gap between grouped lists, cards, or settings groups |
+| `cardPadding` | 16 | `Card`, `StatCard`, and any bordered panel |
+| `dialogPadding` | 20 | `Dialog` and `AlertDialog` content |
+| `rowPaddingY` / `rowPaddingX` | 10 / 16 | `Item` rows and hand-rolled list rows |
+| `rowGap` | 12 | Gap between row media, content, and actions |
+| `rowMinHeight` | 40 | Visual row height on web; native rows keep `touchTarget` |
+| `formRowMinHeight` | 32 | Checkbox and radio rows on web; native keeps `touchTarget` |
+| `touchTarget` | 44 | Minimum native hit area; pair a smaller visual height with `hitSlop` |
+
+Controls (`Button`, `TextInput`, `Select`, `Tabs`, `Toggle`) size themselves from their own `size` prop (28/32/36/40) and do not read these tokens.
+
 ### Color overrides
 
 The package ships a neutral default palette. `useTheme()` resolves colors in

package/dist/components/Accordion.js

@@ -132,7 +132,7 @@ function AccordionTrigger({ children, style: styleOverride, disabled, ...props }
                                     justifyContent: "space-between",
                                     gap: spacing.md,
                                     borderRadius: spacing.radiusMd,
-                                    paddingVertical: spacing.md,
+                                    paddingVertical: spacing.smd,
                                     ...(Platform.OS === "web" && {
                                         cursor: "pointer",
                                         userSelect: "none",

package/dist/components/Card.js

@@ -98,24 +98,24 @@ const createCardStyles = (theme) => StyleSheet.create({
         backgroundColor: "transparent",
     },
     header: {
-        padding: spacing.lg,
+        padding: spacing.cardPadding,
         paddingBottom: spacing.xs,
         gap: spacing.xs,
     },
     content: {
-        paddingHorizontal: spacing.lg,
-        paddingBottom: spacing.lg,
+        paddingHorizontal: spacing.cardPadding,
+        paddingBottom: spacing.cardPadding,
     },
     footer: {
         flexDirection: "row",
         alignItems: "center",
-        paddingHorizontal: spacing.lg,
-        paddingBottom: spacing.lg,
+        paddingHorizontal: spacing.cardPadding,
+        paddingBottom: spacing.cardPadding,
         paddingTop: 0,
     },
     title: {
-        fontSize: 18,
-        lineHeight: 24,
+        fontSize: 16,
+        lineHeight: 22,
         letterSpacing: 0,
     },
     description: {

package/dist/components/Checkbox.js

@@ -117,7 +117,7 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         alignItems: "center",
         gap: spacing.sm,
-        minHeight: spacing.touchTarget,
+        minHeight: Platform.select({ web: spacing.formRowMinHeight, default: spacing.touchTarget }),
     },
     labelContainer: {
         flex: 1,

package/dist/components/Dialog.js

@@ -22,7 +22,25 @@ function DialogRoot({ children, ...props }) {
 function DialogContent({ portalHost, style, children, ...props }) {
     const { theme, getShadowStyle, getContrastingColor } = useTheme();
     const textColor = getContrastingColor(theme.colors.popover, palette.white, palette.black);
-    return (_jsx(DialogPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(DialogPrimitive.Overlay, { style: StyleSheet.flatten([
+    return (_jsx(DialogPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(DialogPrimitive.Overlay
+            // On web the primitive wraps the overlay in a react-native-web
+            // Pressable whose click handler stops propagation unconditionally.
+            // With that Pressable between the overlay and the Radix content,
+            // outside presses (mouse and touch) and Escape never dismissed the
+            // dialog, so a dialog without a Close button was stuck. `asChild`
+            // makes the primitive clone our fade wrapper instead, removing the
+            // Pressable; Radix dismissal then works. Native keeps the Pressable,
+            // which is what implements closeOnPress there.
+            , { 
+                // On web the primitive wraps the overlay in a react-native-web
+                // Pressable whose click handler stops propagation unconditionally.
+                // With that Pressable between the overlay and the Radix content,
+                // outside presses (mouse and touch) and Escape never dismissed the
+                // dialog, so a dialog without a Close button was stuck. `asChild`
+                // makes the primitive clone our fade wrapper instead, removing the
+                // Pressable; Radix dismissal then works. Native keeps the Pressable,
+                // which is what implements closeOnPress there.
+                asChild: Platform.OS === "web", style: StyleSheet.flatten([
                     StyleSheet.absoluteFill,
                     { backgroundColor: theme.colors.overlay },
                     Platform.OS === "web" && { zIndex: 50 },
@@ -32,7 +50,8 @@ function DialogContent({ portalHost, style, children, ...props }) {
                                                 borderColor: theme.colors.border,
                                                 borderWidth: 1,
                                                 borderRadius: spacing.radiusLg,
-                                                padding: spacing.lg,
+                                                padding: spacing.dialogPadding,
+                                                gap: spacing.md,
                                                 width: "100%",
                                                 ...getShadowStyle("soft"),
                                             },
@@ -40,7 +59,7 @@ function DialogContent({ portalHost, style, children, ...props }) {
                                         ]), ...props, children: children }) }) }) }) }) }) }) }) }));
 }
 function DialogHeader({ children, style, ...props }) {
-    return (_jsx(View, { style: StyleSheet.flatten([{ gap: spacing.xs, marginBottom: spacing.md }, style]), ...props, children: children }));
+    return (_jsx(View, { style: StyleSheet.flatten([{ gap: spacing.xs }, style]), ...props, children: children }));
 }
 function DialogFooter({ children, style, ...props }) {
     return (_jsx(View, { style: StyleSheet.flatten([
@@ -48,7 +67,6 @@ function DialogFooter({ children, style, ...props }) {
                 flexDirection: "row",
                 justifyContent: "flex-end",
                 gap: spacing.sm,
-                marginTop: spacing.lg,
             },
             style,
         ]), ...props, children: children }));
@@ -107,7 +125,8 @@ function AlertDialogContent({ portalHost, style, children, ...props }) {
                                                 borderColor: theme.colors.border,
                                                 borderWidth: 1,
                                                 borderRadius: spacing.radiusLg,
-                                                padding: spacing.lg,
+                                                padding: spacing.dialogPadding,
+                                                gap: spacing.md,
                                                 width: "100%",
                                                 ...getShadowStyle("soft"),
                                             },

package/dist/components/EmptyState.js

@@ -33,7 +33,7 @@ const createStyles = (theme) => StyleSheet.create({
     container: {
         alignItems: "center",
         justifyContent: "center",
-        paddingVertical: spacing.xxl,
+        paddingVertical: spacing.xl,
         paddingHorizontal: spacing.lg,
     },
     bordered: {
@@ -41,7 +41,7 @@ const createStyles = (theme) => StyleSheet.create({
         borderStyle: "dashed",
         borderColor: theme.colors.border,
         borderRadius: spacing.radiusLg,
-        padding: spacing.xl,
+        padding: spacing.lg,
     },
     iconWrapper: {
         width: MEDIA_SIZE,

package/dist/components/Item.d.ts

@@ -16,8 +16,9 @@ export interface ItemProps {
 /**
  * Item
  *
- * Grouped-list row container: `spacing.md` padding and gap, a comfortable
- * 44pt min height, and an optional pressable scale interaction. Compose
+ * Grouped-list row container: compact row padding (`spacing.rowPaddingY` /
+ * `spacing.rowPaddingX`) and gap, a 44pt min height on native (40 on web),
+ * and an optional pressable scale interaction. Compose
  * with `ItemMedia`, `ItemContent` (+ `ItemTitle`/`ItemDescription`), and
  * `ItemActions`.
  *

package/dist/components/Item.js

@@ -8,12 +8,13 @@ import { spacing } from "../constants/spacing.js";
 // Default ItemMedia footprint (see ItemMedia's `size` prop) — used to inset
 // the optional separator past the media slot without needing a context.
 const DEFAULT_MEDIA_SIZE = 40;
-const SEPARATOR_INSET = spacing.md + DEFAULT_MEDIA_SIZE + spacing.md;
+const SEPARATOR_INSET = spacing.rowPaddingX + DEFAULT_MEDIA_SIZE + spacing.rowGap;
 /**
  * Item
  *
- * Grouped-list row container: `spacing.md` padding and gap, a comfortable
- * 44pt min height, and an optional pressable scale interaction. Compose
+ * Grouped-list row container: compact row padding (`spacing.rowPaddingY` /
+ * `spacing.rowPaddingX`) and gap, a 44pt min height on native (40 on web),
+ * and an optional pressable scale interaction. Compose
  * with `ItemMedia`, `ItemContent` (+ `ItemTitle`/`ItemDescription`), and
  * `ItemActions`.
  *
@@ -104,9 +105,10 @@ const styles = StyleSheet.create({
     row: {
         flexDirection: "row",
         alignItems: "center",
-        minHeight: spacing.touchTarget,
-        padding: spacing.md,
-        gap: spacing.md,
+        minHeight: Platform.select({ web: spacing.rowMinHeight, default: spacing.touchTarget }),
+        paddingVertical: spacing.rowPaddingY,
+        paddingHorizontal: spacing.rowPaddingX,
+        gap: spacing.rowGap,
     },
     content: {
         flex: 1,

package/dist/components/RadioGroup.js

@@ -151,7 +151,7 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         alignItems: "center",
         gap: spacing.sm,
-        minHeight: spacing.touchTarget,
+        minHeight: Platform.select({ web: spacing.formRowMinHeight, default: spacing.touchTarget }),
     },
     labelContainer: {
         flex: 1,

package/dist/components/StatCard.js

@@ -37,5 +37,5 @@ export function StatCard({ label, value, unit, change, icon, onPress, style }) {
             : change.direction === "down"
                 ? theme.colors.destructive
                 : theme.colors.textDim;
-    return (_jsx(Card, { onPress: onPress, style: style, children: _jsxs(View, { style: { padding: spacing.lg, gap: spacing.xs }, children: [_jsxs(View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [_jsx(CaptionText, { selectable: false, style: { color: theme.colors.textDim, textTransform: "uppercase", letterSpacing: 0.96 }, children: label }), !!icon && _jsx(Icon, { name: icon, size: spacing.iconSm, color: theme.colors.mutedForeground, decorative: true })] }), _jsxs(View, { style: { flexDirection: "row", alignItems: "flex-end" }, children: [_jsx(StyledText, { selectable: false, size: "xxl", fontWeight: "bold", style: { color: theme.colors.foreground, fontVariant: ["tabular-nums"] }, children: value }), !!unit && (_jsx(StyledText, { selectable: false, size: "base", style: { color: theme.colors.textDim, marginLeft: spacing.xxs, marginBottom: 2 }, children: unit }))] }), !!change && (_jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: spacing.xxs }, children: [change.direction !== "neutral" && (_jsx(Icon, { name: DIRECTION_ICON[change.direction], size: spacing.iconXs, color: changeColor, decorative: true })), _jsx(StyledText, { selectable: false, size: "sm", style: { color: changeColor }, children: change.value })] }))] }) }));
+    return (_jsx(Card, { onPress: onPress, style: style, children: _jsxs(View, { style: { padding: spacing.cardPadding, gap: spacing.xs }, children: [_jsxs(View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [_jsx(CaptionText, { selectable: false, style: { color: theme.colors.textDim, textTransform: "uppercase", letterSpacing: 0.96 }, children: label }), !!icon && _jsx(Icon, { name: icon, size: spacing.iconSm, color: theme.colors.mutedForeground, decorative: true })] }), _jsxs(View, { style: { flexDirection: "row", alignItems: "flex-end" }, children: [_jsx(StyledText, { selectable: false, size: "xxl", fontWeight: "bold", style: { color: theme.colors.foreground, fontVariant: ["tabular-nums"] }, children: value }), !!unit && (_jsx(StyledText, { selectable: false, size: "base", style: { color: theme.colors.textDim, marginLeft: spacing.xxs, marginBottom: 2 }, children: unit }))] }), !!change && (_jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: spacing.xxs }, children: [change.direction !== "neutral" && (_jsx(Icon, { name: DIRECTION_ICON[change.direction], size: spacing.iconXs, color: changeColor, decorative: true })), _jsx(StyledText, { selectable: false, size: "sm", style: { color: changeColor }, children: change.value })] }))] }) }));
 }

package/dist/constants/spacing.d.ts

@@ -1,15 +1,19 @@
 /**
  * Spacing Constants
  *
- * A consistent spacing scale based on an 8px base unit.
- * Use these constants throughout the app for consistent spacing.
+ * A consistent spacing scale based on an 8px base unit, plus a small set of
+ * density tokens that components reach for when composing rows, surfaces, and
+ * screens. Tune the density tokens to shift the whole library's feel without
+ * touching the base scale.
  */
 export declare const spacing: {
     readonly base: 8;
     readonly xxs: 2;
     readonly xs: 4;
     readonly sm: 8;
+    readonly smd: 12;
     readonly md: 16;
+    readonly mdl: 20;
     readonly lg: 24;
     readonly xl: 32;
     readonly xxl: 48;
@@ -17,12 +21,18 @@ export declare const spacing: {
     readonly gutter: 16;
     readonly gutterVertical: 24;
     readonly screenPadding: 16;
+    readonly sectionSpacing: 24;
+    readonly rowPaddingY: 10;
+    readonly rowPaddingX: 16;
+    readonly rowGap: 12;
+    readonly rowMinHeight: 40;
+    readonly formRowMinHeight: 32;
+    readonly cardPadding: 16;
+    readonly dialogPadding: 20;
+    readonly touchTarget: 44;
     readonly buttonPadding: 10;
     readonly inputPadding: 10;
-    readonly cardPadding: 16;
-    readonly sectionSpacing: 32;
     readonly listItemSpacing: 8;
-    readonly touchTarget: 44;
     readonly radiusNone: 0;
     readonly radiusXs: 4;
     readonly radiusSm: 8;
@@ -37,5 +47,5 @@ export declare const spacing: {
     readonly iconLg: 32;
     readonly iconXl: 48;
 };
-export declare const base: 8, xxs: 2, xs: 4, sm: 8, md: 16, lg: 24, xl: 32, xxl: 48, xxxl: 64, gutter: 16, gutterVertical: 24, screenPadding: 16, buttonPadding: 10, inputPadding: 10, cardPadding: 16, sectionSpacing: 32, listItemSpacing: 8, touchTarget: 44, radiusNone: 0, radiusXs: 4, radiusSm: 8, radiusMd: 12, radiusLg: 14, radiusXl: 18, radius2xl: 24, radiusFull: 9999, iconXs: 12, iconSm: 16, iconMd: 24, iconLg: 32, iconXl: 48;
+export declare const base: 8, xxs: 2, xs: 4, sm: 8, smd: 12, md: 16, mdl: 20, lg: 24, xl: 32, xxl: 48, xxxl: 64, gutter: 16, gutterVertical: 24, screenPadding: 16, sectionSpacing: 24, rowPaddingY: 10, rowPaddingX: 16, rowGap: 12, rowMinHeight: 40, formRowMinHeight: 32, cardPadding: 16, dialogPadding: 20, touchTarget: 44, buttonPadding: 10, inputPadding: 10, listItemSpacing: 8, radiusNone: 0, radiusXs: 4, radiusSm: 8, radiusMd: 12, radiusLg: 14, radiusXl: 18, radius2xl: 24, radiusFull: 9999, iconXs: 12, iconSm: 16, iconMd: 24, iconLg: 32, iconXl: 48;
 export declare const space: (multiplier: number) => number;

package/dist/constants/spacing.js

@@ -1,8 +1,10 @@
 /**
  * Spacing Constants
  *
- * A consistent spacing scale based on an 8px base unit.
- * Use these constants throughout the app for consistent spacing.
+ * A consistent spacing scale based on an 8px base unit, plus a small set of
+ * density tokens that components reach for when composing rows, surfaces, and
+ * screens. Tune the density tokens to shift the whole library's feel without
+ * touching the base scale.
  */
 export const spacing = {
     // Base unit: 8px
@@ -11,7 +13,9 @@ export const spacing = {
     xxs: 2, // 2px  - Minimal spacing
     xs: 4, // 4px  - Extra small
     sm: 8, // 8px  - Small (1 unit)
+    smd: 12, // 12px - Between small and medium (1.5 units); compact gaps and row padding
     md: 16, // 16px - Medium (2 units)
+    mdl: 20, // 20px - Between medium and large (2.5 units); dialog and sheet padding
     lg: 24, // 24px - Large (3 units)
     xl: 32, // 32px - Extra large (4 units)
     xxl: 48, // 48px - 2x extra large (6 units)
@@ -20,13 +24,20 @@ export const spacing = {
     gutter: 16, // Standard horizontal gutter
     gutterVertical: 24, // Standard vertical spacing
     screenPadding: 16, // Default screen edge padding
+    sectionSpacing: 24, // Space between major sections / grouped lists
+    // Density tokens — rows, surfaces, overlays
+    rowPaddingY: 10, // Vertical padding for list / settings rows
+    rowPaddingX: 16, // Horizontal padding for list / settings rows
+    rowGap: 12, // Gap between media, content, and actions in a row
+    rowMinHeight: 40, // Visual min height for rows on pointer surfaces (web)
+    formRowMinHeight: 32, // Visual min height for checkbox / radio rows on web
+    cardPadding: 16, // Default card / stat card padding
+    dialogPadding: 20, // Default dialog / alert dialog padding
+    touchTarget: 44, // Minimum comfortable native touch target
     // Component-specific
     buttonPadding: 10, // Default button padding
     inputPadding: 10, // Default input padding
-    cardPadding: 16, // Default card padding
-    sectionSpacing: 32, // Space between major sections
     listItemSpacing: 8, // Space between list items
-    touchTarget: 44, // Minimum comfortable native touch target
     // Border radius — shadcn-inspired scale (radiusMd = 12px default)
     radiusNone: 0,
     radiusXs: 4,
@@ -44,6 +55,6 @@ export const spacing = {
     iconXl: 48,
 };
 // Export individual constants for convenience
-export const { base, xxs, xs, sm, md, lg, xl, xxl, xxxl, gutter, gutterVertical, screenPadding, buttonPadding, inputPadding, cardPadding, sectionSpacing, listItemSpacing, touchTarget, radiusNone, radiusXs, radiusSm, radiusMd, radiusLg, radiusXl, radius2xl, radiusFull, iconXs, iconSm, iconMd, iconLg, iconXl, } = spacing;
+export const { base, xxs, xs, sm, smd, md, mdl, lg, xl, xxl, xxxl, gutter, gutterVertical, screenPadding, sectionSpacing, rowPaddingY, rowPaddingX, rowGap, rowMinHeight, formRowMinHeight, cardPadding, dialogPadding, touchTarget, buttonPadding, inputPadding, listItemSpacing, radiusNone, radiusXs, radiusSm, radiusMd, radiusLg, radiusXl, radius2xl, radiusFull, iconXs, iconSm, iconMd, iconLg, iconXl, } = spacing;
 // Helper function to multiply base spacing
 export const space = (multiplier) => spacing.base * multiplier;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [
@@ -83,7 +83,7 @@
   "scripts": {
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "test": "jest --config ../../jest.config.js packages/ui/src --runInBand --watchman=false && bun run check:forbidden-imports",
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && node ../../scripts/fix-ui-package-esm.mjs && bun run check:forbidden-imports",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && node ../../scripts/fix-package-esm.mjs ui && bun run check:forbidden-imports",
     "check:forbidden-imports": "node ../../scripts/check-ui-forbidden-imports.mjs",
     "publish:dry-run": "bun pm pack --dry-run"
   },
@@ -98,7 +98,7 @@
     "@rn-primitives/dropdown-menu": "~1.5.2",
     "@rn-primitives/label": "~1.5.2",
     "@rn-primitives/popover": "~1.5.2",
-    "@rn-primitives/portal": "~1.5.2",
+    "@rn-primitives/portal": "~1.5.3",
     "@rn-primitives/radio-group": "~1.5.2",
     "@rn-primitives/select": "~1.5.2",
     "@rn-primitives/separator": "~1.5.2",