@duro-app/ui 0.34.4 → 0.34.6

package/dist/index.native.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Native (React Native / Expo) entry — resolved via the `react-native` export
+ * condition (see package.json). Metro reads THIS instead of the web `index.ts`.
+ *
+ * Why a separate barrel: the web `index.ts` re-exports interactive/overlay
+ * components (Dialog, Drawer, Menu, Tabs, Select, Combobox, Form, ScrollArea,
+ * TagGroup, ThemeProvider's portal) that use web-only DOM APIs — and Combobox
+ * imports `react-dom`, so pulling the full barrel crashes on Metro. This barrel
+ * re-exports ONLY the components whose source is RN-safe (pure react-strict-dom
+ * `html` + `css`, audited 2026-06-02). The rest get RN variants in a later pass.
+ *
+ * Tokens resolve fine on native already: @duro-app/tokens's subpath exports
+ * (`./tokens/*.css`, `./themes/*.css`) point straight at their `.css.ts`
+ * source, so Metro/StyleX-native compile them directly.
+ */
+export { Badge, type BadgeVariant, type BadgeSize } from './components/Badge/Badge';
+export { Button, type ButtonVariant, type ButtonSize } from './components/Button/Button';
+export { Card, type CardVariant, type CardSize } from './components/Card/Card';
+export { Checkbox } from './components/Checkbox/Checkbox';
+export { Heading, type HeadingVariant } from './components/Heading/Heading';
+export { Input, type InputVariant } from './components/Input/Input';
+export { Switch } from './components/Switch/Switch';
+export { Text, type TextVariant, type TextColor } from './components/Text/Text';
+export { Textarea, type TextareaVariant } from './components/Textarea/Textarea';
+export { Field } from './components/Field/Field';
+export { InputGroup } from './components/InputGroup/InputGroup';
+export { Stack, type SpacingKey } from './components/Stack/Stack';
+export { Inline } from './components/Inline/Inline';
+export { Cluster } from './components/Cluster/Cluster';
+export { Grid } from './components/Grid/Grid';
+//# sourceMappingURL=index.native.d.ts.map

package/dist/index.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../src/index.native.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,EAAC,KAAK,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,0BAA0B,CAAA;AACjF,OAAO,EAAC,MAAM,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAC,MAAM,4BAA4B,CAAA;AACtF,OAAO,EAAC,IAAI,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAC,MAAM,wBAAwB,CAAA;AAC5E,OAAO,EAAC,QAAQ,EAAC,MAAM,gCAAgC,CAAA;AACvD,OAAO,EAAC,OAAO,EAAE,KAAK,cAAc,EAAC,MAAM,8BAA8B,CAAA;AACzE,OAAO,EAAC,KAAK,EAAE,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAA;AACjD,OAAO,EAAC,IAAI,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAC7E,OAAO,EAAC,QAAQ,EAAE,KAAK,eAAe,EAAC,MAAM,gCAAgC,CAAA;AAG7E,OAAO,EAAC,KAAK,EAAC,MAAM,0BAA0B,CAAA;AAC9C,OAAO,EAAC,UAAU,EAAC,MAAM,oCAAoC,CAAA;AAG7D,OAAO,EAAC,KAAK,EAAE,KAAK,UAAU,EAAC,MAAM,0BAA0B,CAAA;AAC/D,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAA;AACjD,OAAO,EAAC,OAAO,EAAC,MAAM,8BAA8B,CAAA;AACpD,OAAO,EAAC,IAAI,EAAC,MAAM,wBAAwB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.34.4",
+  "version": "0.34.6",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -24,6 +24,7 @@
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "react-native": "./src/index.native.ts",
       "source": "./src/index.ts",
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
@@ -53,7 +54,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.34.4"
+    "@duro-app/tokens": "^0.34.6"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Table/Table.tsx

@@ -107,8 +107,13 @@ function unwrapElementType(t: unknown): unknown {
   return current
 }
 
-function extractColumnMeta(children: ReactNode): {template: string; labels: string[]} {
+function extractColumnMeta(children: ReactNode): {
+  template: string
+  compactTemplate: string
+  labels: string[]
+} {
   const widths: string[] = []
+  const compactWidths: string[] = []
   const labels: string[] = []
 
   function walk(node: ReactNode) {
@@ -128,7 +133,13 @@ function extractColumnMeta(children: ReactNode): {template: string; labels: stri
         // cell's text is wider than 1/N of the container. With minmax(0,
         // 1fr), the cell's compact-mode `min-width: 0` + `overflow:
         // hidden` + `text-overflow: ellipsis` can actually truncate.
-        widths.push(props.width || 'minmax(0, 1fr)')
+        const width = props.width || 'minmax(0, 1fr)'
+        widths.push(width)
+        // `compactWidth` lets the consumer switch to a content-aware
+        // layout in the compact band while staying evenly distributed
+        // at desktop. Falls back to `width` so columns that don't opt
+        // in keep one template across both breakpoints.
+        compactWidths.push(props.compactWidth || width)
         const explicit = typeof props.label === 'string' ? props.label : undefined
         const fallback = extractText(props.children).trim()
         const label = explicit ?? fallback
@@ -148,7 +159,11 @@ function extractColumnMeta(children: ReactNode): {template: string; labels: stri
   }
 
   walk(children)
-  return {template: widths.join(' '), labels}
+  return {
+    template: widths.join(' '),
+    compactTemplate: compactWidths.join(' '),
+    labels,
+  }
 }
 
 // --- Root ---
@@ -181,7 +196,7 @@ export function Root({
   pagination,
 }: RootProps) {
   const inferredTemplateRef = useRef<string | null>(null)
-  const {template, labels} = extractColumnMeta(children)
+  const {template, compactTemplate, labels} = extractColumnMeta(children)
   if (template) {
     inferredTemplateRef.current = template
   }
@@ -199,7 +214,7 @@ export function Root({
         // always wins as the later entry in the array.
         template
           ? responsive
-            ? styles.gridColumnsResponsive(template)
+            ? styles.gridColumnsResponsive(template, compactTemplate)
             : styles.gridColumns(template)
           : undefined,
         responsive && styles.rootResponsive,
@@ -362,13 +377,24 @@ const CellIndexContext = createContext<{index: number; total: number}>({index: 0
 export function HeaderCell({
   children,
   width: _width,
+  compactWidth: _compactWidth,
   label: _label,
   isActions,
   'aria-label': ariaLabel,
 }: {
   children?: ReactNode
-  /** Column width: CSS value like '40px', '2fr', 'max-content'. Defaults to '1fr'. */
+  /** Column width at default (wide) viewport. CSS grid-template-columns
+   *  track value — e.g. '40px', '2fr', 'max-content'. Defaults to
+   *  'minmax(0, 1fr)' so each column shares the row evenly and is free
+   *  to shrink below its content's intrinsic size. */
   width?: string
+  /** Column width when the table's container drops into compact mode
+   *  (≤720px container). Use this to switch to a content-aware layout
+   *  at narrow widths — e.g. give a status badge `max-content` and the
+   *  action column `minmax(0, 2fr)` so it absorbs the slack — while
+   *  keeping evenly-distributed columns on wide screens. Defaults to the
+   *  same value as `width`. */
+  compactWidth?: string
   /** Stack-mode label string. Optional when children is a plain string — the
    *  text content is used as the label automatically. Required when children
    *  contain JSX (icon + text, sort indicator, etc.). */

package/src/components/Table/styles.css.ts

@@ -308,15 +308,22 @@ export const styles = css.create({
     gridTemplateColumns: template,
   }),
 
-  // Dynamic: grid columns + stack-mode collapse in one style.
-  // Used instead of gridColumns() when responsive=true so that both the
-  // explicit column template and the @container override live in the same
-  // StyleX style object. If they were in separate styles (gridColumns +
-  // rootResponsive), StyleX conflict resolution would keep only the LAST
-  // style's gridTemplateColumns class and silently discard the earlier one.
-  gridColumnsResponsive: (template: string) => ({
+  // Dynamic: grid columns at three tiers (default / compact / stack) in
+  // one style. Used instead of gridColumns() when responsive=true so that
+  // every gridTemplateColumns rule lives in the same StyleX style object —
+  // splitting them would let StyleX's conflict resolution drop the
+  // earlier classes (the LAST style wins per property key).
+  //
+  // - default: balanced multi-column layout for desktop widths
+  // - @container (max-width: COMPACT_BP): consumer-supplied "compact"
+  //   template, e.g. give a badge column max-content and let the action
+  //   column absorb the slack so its hint text fits on one line
+  // - @container (max-width: STACK_BP): collapse to a single column so
+  //   each row becomes a card
+  gridColumnsResponsive: (template: string, compactTemplate: string) => ({
     gridTemplateColumns: {
       default: template,
+      [`@container (max-width: ${COMPACT_BP})`]: compactTemplate,
       [`@container (max-width: ${STACK_BP})`]: '1fr',
     },
   }),

package/src/index.native.ts

@@ -0,0 +1,36 @@
+/**
+ * Native (React Native / Expo) entry — resolved via the `react-native` export
+ * condition (see package.json). Metro reads THIS instead of the web `index.ts`.
+ *
+ * Why a separate barrel: the web `index.ts` re-exports interactive/overlay
+ * components (Dialog, Drawer, Menu, Tabs, Select, Combobox, Form, ScrollArea,
+ * TagGroup, ThemeProvider's portal) that use web-only DOM APIs — and Combobox
+ * imports `react-dom`, so pulling the full barrel crashes on Metro. This barrel
+ * re-exports ONLY the components whose source is RN-safe (pure react-strict-dom
+ * `html` + `css`, audited 2026-06-02). The rest get RN variants in a later pass.
+ *
+ * Tokens resolve fine on native already: @duro-app/tokens's subpath exports
+ * (`./tokens/*.css`, `./themes/*.css`) point straight at their `.css.ts`
+ * source, so Metro/StyleX-native compile them directly.
+ */
+
+// Leaf primitives
+export {Badge, type BadgeVariant, type BadgeSize} from './components/Badge/Badge'
+export {Button, type ButtonVariant, type ButtonSize} from './components/Button/Button'
+export {Card, type CardVariant, type CardSize} from './components/Card/Card'
+export {Checkbox} from './components/Checkbox/Checkbox'
+export {Heading, type HeadingVariant} from './components/Heading/Heading'
+export {Input, type InputVariant} from './components/Input/Input'
+export {Switch} from './components/Switch/Switch'
+export {Text, type TextVariant, type TextColor} from './components/Text/Text'
+export {Textarea, type TextareaVariant} from './components/Textarea/Textarea'
+
+// Form field wrappers (RN-safe — used by Input/Textarea/Checkbox)
+export {Field} from './components/Field/Field'
+export {InputGroup} from './components/InputGroup/InputGroup'
+
+// Layout primitives
+export {Stack, type SpacingKey} from './components/Stack/Stack'
+export {Inline} from './components/Inline/Inline'
+export {Cluster} from './components/Cluster/Cluster'
+export {Grid} from './components/Grid/Grid'