@duro-app/ui 5.12.0 → 5.13.0

package/dist/shared/ButtonHost.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+import { html } from 'react-strict-dom';
+export type ButtonHostProps = ComponentProps<typeof html.button>;
+/**
+ * The host element of Button and Toggle. On the web it is the <button>
+ * itself, with no component in between (a wrapper changed what a Form's
+ * submit focuses); the native variant (ButtonHost.native.tsx) can swap in an
+ * RN Pressable to carry a Tooltip's accessibility hint.
+ */
+export declare const ButtonHost: typeof html.button;
+//# sourceMappingURL=ButtonHost.d.ts.map

package/dist/shared/ButtonHost.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonHost.d.ts","sourceRoot":"","sources":["../../src/shared/ButtonHost.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAA;AACzC,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAA;AAErC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,CAAA;AAEhE;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,OAAO,IAAI,CAAC,MAAoB,CAAA"}

package/dist/shared/pressableChild.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement, ReactNode, Ref } from 'react';
+interface PressableChildProps {
+    onClick?: () => void;
+    ref?: Ref<unknown>;
+}
+/**
+ * Native overlay triggers and closes: native presses do not bubble to a
+ * wrapper as web clicks do, so the one child (a Button) gets the handler
+ * itself, after its own. `ref` also receives the child's host, where focus
+ * returns when the overlay closes.
+ */
+export declare function withPress(children: ReactNode, onPress: () => void, ref?: Ref<unknown>): ReactElement<PressableChildProps, string | import('react').JSXElementConstructor<any>> | null;
+export {};
+//# sourceMappingURL=pressableChild.d.ts.map

package/dist/shared/pressableChild.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pressableChild.d.ts","sourceRoot":"","sources":["../../src/shared/pressableChild.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,GAAG,EACT,MAAM,OAAO,CAAA;AAGd,UAAU,mBAAmB;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,IAAI,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,iGAWrF"}

package/dist/table.js

@@ -1,4 +1,4 @@
-import { M as F, m as gt, R as it, H as kt, n as pt, o as bt, p as ft, q as mt, b as ht, t as yt, r as St, v as Tt } from "./Table-ColfpgKV.js";
+import { M as F, p as gt, R as it, H as kt, q as pt, t as bt, v as ft, w as mt, b as ht, f as yt, r as St, x as Tt } from "./Table-Bms2ftt3.js";
 import { jsx as u, jsxs as q } from "react/jsx-runtime";
 import { c as H, m as p, d as b } from "./compiler-runtime-BuugS4D0.js";
 import { flexRender as E, useReactTable as rt, getPaginationRowModel as Ct, getFilteredRowModel as vt, getSortedRowModel as at, getCoreRowModel as st } from "@tanstack/react-table";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "5.12.0",
+  "version": "5.13.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -90,7 +90,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^5.12.0"
+    "@duro-app/tokens": "^5.13.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/AppShell/AppShell.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    "An application's frame: a navigation rail (a labelled nav, the brand at its top, an optional footer at its foot) beside the main content (main), with an optional Header. Below collapseBelow (sm default, md or lg), measured on the shell's own width, the rail is hidden and one sticky bar (a banner, appBarH tall) holds a Menu button that opens the same navigation in a left Drawer, the brand, and the Header's content when there is one — a shell without a Header still has its navigation on a phone. Above it the Header is a row that scrolls with the page and the rail stays sticky. CSS makes the switch: the server renders one HTML for every width with the brand in both places, and display: none hides the inactive copy, so nothing moves after hydration. A skip link (the first tab stop) focuses Main; an Aside inside Main sticks below the bar. Labels come from props. Compound component — Root is required.",
+    "An application's frame: a navigation rail (a labelled nav, the brand at its top, an optional footer at its foot) beside the main content (main), with an optional Header. Below collapseBelow (sm default, md or lg), measured on the shell's own width, the rail is hidden and one sticky bar (a banner, appBarH tall) holds a Menu button that opens the same navigation in a left Drawer, the brand, and the Header's content when there is one — a shell without a Header still has its navigation on a phone. Above it the Header is a row that scrolls with the page and the rail stays sticky. CSS makes the switch: the server renders one HTML for every width with the brand in both places, and display: none hides the inactive copy, so nothing moves after hydration. A skip link (the first tab stop) focuses Main; an Aside inside Main sticks below the bar. Labels come from props. Compound component — Root is required. On React Native it is always the narrow shape: the bar below the status bar, Main under it, and the Rail in a left Drawer; there is no skip link.",
   whenToUse: [
     'The frame of an app with a persistent navigation rail: an admin, a docs site, a dashboard',
     'A layout whose navigation must collapse into a drawer on a phone',

package/src/components/AppShell/AppShell.native.tsx

@@ -0,0 +1,174 @@
+import {
+  Children,
+  createContext,
+  isValidElement,
+  type ReactNode,
+  type Ref,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react'
+import {html} from 'react-strict-dom'
+import {Button} from '../Button/Button'
+import {Drawer} from '../Drawer/Drawer'
+import {Icon} from '../Icon'
+import {useSafeAreaInsets} from '../../shared/safeArea'
+import {nativeStyles} from './native.css'
+
+export type AppShellCollapse = 'sm' | 'md' | 'lg'
+
+interface AppShellContextValue {
+  open: boolean
+  setOpen: (open: boolean) => void
+  closeLabel: string
+}
+
+const AppShellContext = createContext<AppShellContextValue | null>(null)
+
+// True only where Root placed a Header itself, as on the web.
+const HeaderSlotContext = createContext(false)
+
+function useAppShell(): AppShellContextValue {
+  const ctx = useContext(AppShellContext)
+  if (!ctx) throw new Error('AppShell compound components must be used within AppShell.Root')
+  return ctx
+}
+
+interface RootProps {
+  /** The button that opens the navigation ("Menu"), from your text catalog. */
+  menuLabel: string
+  /** The accessible name of the drawer's close button ("Close navigation"). */
+  closeLabel: string
+  /** Web only: native has no skip link (no keyboard tab order to skip). */
+  skipLabel: string
+  /** The app's name or logo, shown in the bar beside the Menu button. */
+  brand?: ReactNode
+  /** Web only: a phone is below every breakpoint, so native always shows the bar and the drawer. */
+  collapseBelow?: AppShellCollapse
+  /** `AppShell.Rail`, `AppShell.Main` and an optional `AppShell.Header`, as direct children. */
+  children: ReactNode
+}
+
+/**
+ * Native AppShell (plan N0, Slice B): the narrow shape the web shows below
+ * `collapseBelow`, always — the bar on top (Menu button, brand, the Header's
+ * content) below the top safe-area inset, Main under it, and the Rail's
+ * navigation in a left Drawer. The same parts and props as the web.
+ */
+function Root({menuLabel, closeLabel, brand, children}: RootProps) {
+  const [open, setOpen] = useState(false)
+  const insets = useSafeAreaInsets()
+
+  let header: ReactNode = null
+  const rest: ReactNode[] = []
+  Children.forEach(children, (child) => {
+    if (isValidElement<HeaderProps>(child) && child.type === Header) {
+      header = child
+      return
+    }
+    rest.push(child)
+  })
+
+  const value = useMemo(() => ({open, setOpen, closeLabel}), [open, closeLabel])
+
+  return (
+    <AppShellContext.Provider value={value}>
+      <html.div style={nativeStyles.shell}>
+        <html.header style={[nativeStyles.bar, nativeStyles.barTop(insets.top)]}>
+          <Button
+            variant="secondary"
+            size="small"
+            aria-expanded={open}
+            onClick={() => setOpen(true)}
+          >
+            <Icon name="menu" size="sm" />
+            {menuLabel}
+          </Button>
+          {brand}
+          <HeaderSlotContext.Provider value={true}>{header}</HeaderSlotContext.Provider>
+        </html.header>
+        {rest}
+      </html.div>
+    </AppShellContext.Provider>
+  )
+}
+
+export interface AppShellRailState {
+  /** Closes the drawer. Call it after any selection in the navigation. */
+  close: () => void
+}
+
+type RailContent = ReactNode | ((state: AppShellRailState) => ReactNode)
+
+interface RailProps {
+  /** Names the navigation and the drawer ("Navigation"); required. */
+  'aria-label': string
+  /** The navigation (a SideNav, a Tree), shown in the drawer; a function receives `close`. */
+  children: RailContent
+  /** What sits at the end of the drawer; a function receives `close`. */
+  footer?: RailContent
+}
+
+function Rail({'aria-label': ariaLabel, children, footer}: RailProps) {
+  const {open, setOpen, closeLabel} = useAppShell()
+  const close = useCallback(() => setOpen(false), [setOpen])
+  const content = typeof children === 'function' ? children({close}) : children
+  const foot = typeof footer === 'function' ? footer({close}) : footer
+
+  return (
+    <Drawer.Root anchor="left" open={open} onOpenChange={setOpen}>
+      <Drawer.Portal size="sm">
+        <Drawer.Header>
+          <Drawer.Title>{ariaLabel}</Drawer.Title>
+          <Drawer.Close aria-label={closeLabel} />
+        </Drawer.Header>
+        <Drawer.Body>
+          <html.nav aria-label={ariaLabel}>
+            {content}
+            {foot != null && <html.div style={nativeStyles.drawerFooter}>{foot}</html.div>}
+          </html.nav>
+        </Drawer.Body>
+      </Drawer.Portal>
+    </Drawer.Root>
+  )
+}
+
+interface HeaderProps {
+  /** The header's content: a search field, the account menu. It sits in the bar. */
+  children?: ReactNode
+}
+
+function Header({children}: HeaderProps) {
+  useAppShell()
+  if (!useContext(HeaderSlotContext)) {
+    throw new Error(
+      'AppShell.Header must be a direct child of AppShell.Root (not inside a fragment or another component)',
+    )
+  }
+  return <html.div style={nativeStyles.header}>{children}</html.div>
+}
+
+interface MainProps {
+  children: ReactNode
+  /** Web only: the skip link's target. */
+  id?: string
+  /** The main region's host, e.g. to hand `useContainerBelow`. */
+  ref?: Ref<HTMLElement>
+}
+
+function Main({children, ref}: MainProps) {
+  useAppShell()
+  return (
+    <html.main ref={ref} style={nativeStyles.main}>
+      {children}
+    </html.main>
+  )
+}
+
+export const AppShell = {
+  Root,
+  Rail,
+  Header,
+  Main,
+}

package/src/components/AppShell/native.css.ts

@@ -0,0 +1,56 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+
+/**
+ * The native AppShell: a phone is below every `collapseBelow`, so it is
+ * always the narrow shape — the bar on top, Main below, the rail in a Drawer.
+ */
+export const nativeStyles = css.create({
+  shell: {
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    color: colors.text,
+    backgroundColor: colors.bg,
+  },
+  bar: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    minHeight: sizes.appBarH,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    backgroundColor: colors.bgCard,
+    borderBottomWidth: borders.hairline,
+    borderBottomStyle: 'solid',
+    borderBottomColor: colors.border,
+  },
+  // The bar sits below the status bar: the top safe-area inset is its padding.
+  barTop: (top: number) => ({paddingTop: top}),
+  header: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    flexGrow: 1,
+    flexShrink: 1,
+  },
+  main: {
+    flexGrow: 1,
+    flexShrink: 1,
+    paddingTop: spacing.lg,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+  },
+  drawerFooter: {
+    marginTop: spacing.md,
+    paddingTop: spacing.md,
+    borderTopWidth: borders.hairline,
+    borderTopStyle: 'solid',
+    borderTopColor: colors.border,
+  },
+})

package/src/components/Button/Button.tsx

@@ -1,7 +1,7 @@
 import type {ReactNode, Ref} from 'react'
-import {html} from 'react-strict-dom'
 import {isNative} from '../../platform'
 import {mergeRefs} from '../../shared/mergeRefs'
+import {ButtonHost} from '../../shared/ButtonHost'
 import type {ControlSize} from '../../shared/types'
 import {useGroupedControl} from '../ButtonGroup/useGroupedControl'
 import {styles} from './styles.css'
@@ -51,7 +51,7 @@ export function Button({
 }: ButtonProps) {
   const grouped = useGroupedControl<HTMLButtonElement>({disabled})
   return (
-    <html.button
+    <ButtonHost
       ref={isNative ? ref : mergeRefs(ref, grouped.ref)}
       tabIndex={grouped.tabIndex}
       onFocus={grouped.onFocus}
@@ -72,6 +72,6 @@ export function Button({
       ]}
     >
       {children}
-    </html.button>
+    </ButtonHost>
   )
 }

package/src/components/Drawer/Drawer.meta.ts

@@ -2,10 +2,11 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Modal sliding panel from a screen edge (right, left, or bottom). Slides in with backdrop overlay. Supports swipe-to-dismiss gestures on mobile, backdrop click dismiss, and Escape key. Swipe yields to an inner Duro ScrollArea: a drag there scrolls it, and dismisses only toward the edge from the scroll start (a native overflow:auto child is not covered — use ScrollArea). Use for secondary workflows, settings panels, or mobile-friendly detail views.',
+    'Modal sliding panel from a screen edge (right, left, or bottom). Slides in with backdrop overlay. Supports swipe-to-dismiss gestures on mobile, backdrop click dismiss, and Escape key. Swipe yields to an inner Duro ScrollArea: a drag there scrolls it, and dismisses only toward the edge from the scroll start (a native overflow:auto child is not covered — use ScrollArea). A bottom drawer with snapPoints (medium and large) is a phone sheet: it rests at its detents, a grabber steps through them on a tap, a drag moves between them and dismisses below the lowest; its Body is the scroll the drag defers to. Header titleAlign="center" centres the title with a text close at the end. Use for secondary workflows, settings panels, or mobile-friendly detail views.',
   whenToUse: [
     'Settings or configuration panels that slide in from the side',
     'Mobile-friendly detail views (bottom sheet pattern)',
+    'Phone pickers and lists that need more room on demand (snapPoints)',
     'Secondary workflows that need more space than a dialog',
     'Filters, navigation drawers, or form panels',
   ],