@duro-app/ui 5.9.0 → 5.11.0

package/dist/table.js

@@ -1,4 +1,4 @@
-import { M as F, m as xt, R as rt, 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-CAjPFgTX.js";
+import { M as F, m as xt, R as rt, 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 { 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 it, 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.9.0",
+  "version": "5.11.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -66,7 +66,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^5.9.0"
+    "@duro-app/tokens": "^5.11.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/FileTrigger/FileTrigger.meta.ts

@@ -0,0 +1,24 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'A Button that opens the OS file picker. Pass the chosen files to onSelect; call open() on its ref to open the picker from elsewhere.',
+  whenToUse: [
+    'Uploading or attaching one or more files',
+    'Opening the file picker from a custom control via the ref',
+  ],
+  whenNotToUse: [
+    'Drag-and-drop zones — build on a drop target instead',
+    'Triggering a non-file action — use Button',
+  ],
+  relatedTo: [
+    {
+      component: 'Button',
+      kind: 'composition',
+      relationship: 'FileTrigger renders a Button and forwards variant, size and disabled',
+    },
+  ],
+  example: `<FileTrigger accept="image/*" multiple onSelect={(files) => upload(files)}>
+  Choose images
+</FileTrigger>`,
+}

package/src/components/FileTrigger/FileTrigger.stories.tsx

@@ -0,0 +1,36 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn} from 'storybook/test'
+import {FileTrigger} from './FileTrigger'
+
+const meta: Meta<typeof FileTrigger> = {
+  title: 'Components/FileTrigger',
+  component: FileTrigger,
+  args: {onSelect: fn()},
+  argTypes: {
+    variant: {control: 'select', options: ['primary', 'secondary', 'link', 'danger']},
+    size: {control: 'select', options: ['default', 'small']},
+    multiple: {control: 'boolean'},
+    disabled: {control: 'boolean'},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof FileTrigger>
+
+export const Default: Story = {
+  args: {children: 'Choose file', variant: 'secondary'},
+  play: async ({args, canvas, userEvent, canvasElement}) => {
+    await expect(canvas.getByRole('button', {name: 'Choose file'})).toBeEnabled()
+    const input = canvasElement.querySelector<HTMLInputElement>('input[type=file]')!
+    await userEvent.upload(input, new File(['hi'], 'hi.txt', {type: 'text/plain'}))
+    await expect(args.onSelect).toHaveBeenCalledTimes(1)
+  },
+}
+
+export const Images: Story = {
+  args: {children: 'Choose images', accept: 'image/*', multiple: true},
+}
+
+export const Disabled: Story = {
+  args: {children: 'Choose file', disabled: true},
+}

package/src/components/FileTrigger/FileTrigger.tsx

@@ -0,0 +1,80 @@
+import {useEffect, useImperativeHandle, useRef} from 'react'
+import type {ReactNode, Ref} from 'react'
+import {css, html} from 'react-strict-dom'
+import {Button, type ButtonSize, type ButtonVariant} from '../Button/Button'
+import {openPicker, takeFiles} from './pick'
+
+export interface FileTriggerHandle {
+  /** Open the OS file picker programmatically. */
+  open: () => void
+}
+
+export interface FileTriggerProps {
+  /** Accepted types, as the native `accept` attribute (e.g. `image/*,.pdf`). */
+  accept?: string
+  multiple?: boolean
+  /** Called with the chosen files. */
+  onSelect: (files: File[]) => void
+  variant?: ButtonVariant
+  size?: ButtonSize
+  disabled?: boolean
+  'aria-label'?: string
+  /** Exposes `open()` so a caller can open the picker without the button. */
+  ref?: Ref<FileTriggerHandle>
+  children: ReactNode
+}
+
+// display:none, not visually hidden: the input is only ever opened by click(),
+// which a hidden input still honours, and this keeps its "No file chosen" text
+// out of the accessibility tree (axe flagged its contrast).
+const styles = css.create({
+  input: {display: 'none'},
+})
+
+/** A Button that opens the OS file picker. Web only: native has no file input. */
+export function FileTrigger({
+  accept,
+  multiple = false,
+  onSelect,
+  variant,
+  size,
+  disabled,
+  'aria-label': ariaLabel,
+  ref,
+  children,
+}: FileTriggerProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  useImperativeHandle(ref, () => ({open: () => openPicker(inputRef.current)}), [])
+
+  // RSD's input props omit `accept`, so set the DOM attribute directly.
+  useEffect(() => {
+    const input = inputRef.current
+    if (!input) return
+    if (accept) input.setAttribute('accept', accept)
+    else input.removeAttribute('accept')
+  }, [accept])
+
+  return (
+    <>
+      <Button
+        variant={variant}
+        size={size}
+        disabled={disabled}
+        aria-label={ariaLabel}
+        onClick={() => openPicker(inputRef.current)}
+      >
+        {children}
+      </Button>
+      <html.input
+        ref={inputRef}
+        type="file"
+        multiple={multiple}
+        disabled={disabled}
+        tabIndex={-1}
+        aria-hidden={true}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => takeFiles(e.target, onSelect)}
+        style={styles.input}
+      />
+    </>
+  )
+}

package/src/components/FileTrigger/index.ts

@@ -0,0 +1,2 @@
+export {FileTrigger} from './FileTrigger'
+export type {FileTriggerProps, FileTriggerHandle} from './FileTrigger'

package/src/components/FileTrigger/pick.ts

@@ -0,0 +1,21 @@
+/** The slice of an <input type=file> the picker logic touches. */
+export interface FileInputLike {
+  files: ArrayLike<File> | null
+  value: string
+  click: () => void
+}
+
+/** Open the native file picker. */
+export function openPicker(input: Pick<FileInputLike, 'click'> | null) {
+  input?.click()
+}
+
+/**
+ * Hand the chosen files to `onSelect`, then reset the input so picking the
+ * same file again still fires a change event.
+ */
+export function takeFiles(input: FileInputLike, onSelect: (files: File[]) => void) {
+  const files = input.files ? Array.from(input.files) : []
+  input.value = ''
+  if (files.length > 0) onSelect(files)
+}

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,112 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {css, html} from 'react-strict-dom'
+import {Icon} from './Icon'
+import type {IconName} from './Icon'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+
+const meta: Meta<typeof Icon> = {
+  title: 'Components/Icon',
+  component: Icon,
+  argTypes: {
+    size: {control: 'select', options: ['sm', 'md', 'lg', 'xl', 'xxl']},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Icon>
+
+// The groups of the IconName union, in its order.
+const groups: ReadonlyArray<{title: string; names: readonly IconName[]}> = [
+  {
+    title: 'Core',
+    names: [
+      'x-circle',
+      'check-circle',
+      'check-done',
+      'clock',
+      'forbidden',
+      'info-circle',
+      'alert-triangle',
+      'shield',
+      'lock',
+      'key',
+    ],
+  },
+  {
+    title: 'Navigation / wayfinding',
+    names: [
+      'map',
+      'layers',
+      'repeat',
+      'database',
+      'shield-check',
+      'route',
+      'git-branch',
+      'menu',
+      'pin',
+    ],
+  },
+  {
+    title: 'Infrastructure / inventory',
+    names: ['server', 'hard-drive', 'box', 'image', 'tag', 'pie-chart'],
+  },
+  {title: 'People / access / admin', names: ['users', 'user-plus', 'mail', 'file-text', 'plug']},
+  {title: 'Input / action', names: ['search', 'mic']},
+  {title: 'Color mode', names: ['sun', 'moon', 'monitor', 'contrast']},
+  {title: 'Device status', names: ['signal', 'battery']},
+  {title: 'Media', names: ['video', 'music', 'play', 'pause']},
+  {
+    title: 'Filled variants',
+    names: [
+      'info-circle-filled',
+      'alert-triangle-filled',
+      'check-circle-filled',
+      'x-circle-filled',
+      'shield-filled',
+      'lock-filled',
+    ],
+  },
+]
+
+const styles = css.create({
+  page: {display: 'flex', flexDirection: 'column', gap: spacing.xl, color: colors.text},
+  heading: {
+    fontSize: typography.fontSizeSm,
+    fontWeight: typography.fontWeightSemibold,
+    color: colors.textMuted,
+  },
+  grid: {
+    display: 'grid',
+    gridTemplateColumns: `repeat(auto-fill, minmax(${sizes.gridColSm}, 1fr))`,
+    gap: spacing.lg,
+  },
+  cell: {display: 'flex', flexDirection: 'column', alignItems: 'center', gap: spacing.sm},
+  label: {fontSize: typography.fontSizeSm, color: colors.textMuted},
+})
+
+export const Default: Story = {
+  args: {name: 'signal', size: 'lg'},
+}
+
+export const AllIcons: Story = {
+  render: () => (
+    <html.div style={styles.page}>
+      {groups.map((group) => (
+        <html.section key={group.title}>
+          <html.h3 style={styles.heading}>{group.title}</html.h3>
+          <html.div style={styles.grid}>
+            {group.names.map((name) => (
+              <html.div key={name} style={styles.cell}>
+                <Icon name={name} size="lg" />
+                <html.span style={styles.label}>{name}</html.span>
+              </html.div>
+            ))}
+          </html.div>
+        </html.section>
+      ))}
+    </html.div>
+  ),
+}

package/src/components/Icon/Icon.tsx

@@ -45,6 +45,14 @@ export type IconName =
   | 'moon'
   | 'monitor'
   | 'contrast'
+  // Device status glyphs
+  | 'signal'
+  | 'battery'
+  // Media glyphs
+  | 'video'
+  | 'music'
+  | 'play'
+  | 'pause'
   // Filled variants (solid shape with cutout symbol)
   | 'info-circle-filled'
   | 'alert-triangle-filled'
@@ -313,6 +321,48 @@ const strokeIcons: Partial<Record<IconName, ReactNode>> = {
       <path d="M12 2a10 10 0 0 1 0 20z" fill="currentColor" stroke="none" />
     </>
   ),
+  // ---- device status ----
+  // Four ascending bars — cellular signal strength.
+  signal: (
+    <>
+      <line x1="4" y1="20" x2="4" y2="16" />
+      <line x1="9" y1="20" x2="9" y2="12" />
+      <line x1="14" y1="20" x2="14" y2="8" />
+      <line x1="19" y1="20" x2="19" y2="4" />
+    </>
+  ),
+  // Horizontal battery outline with a terminal nub — charge level.
+  battery: (
+    <>
+      <rect x="2" y="7" width="17" height="10" rx="2" />
+      <line x1="22" y1="11" x2="22" y2="13" />
+    </>
+  ),
+  // ---- media ----
+  // Camera body with a side lens — video file or clip.
+  video: (
+    <>
+      <rect x="2" y="6" width="14" height="12" rx="2" />
+      <path d="M16 10l6-3v10l-6-3z" />
+    </>
+  ),
+  // Beamed note — audio file or track.
+  music: (
+    <>
+      <path d="M9 18V5l12-2v13" />
+      <circle cx="6" cy="18" r="3" />
+      <circle cx="18" cy="16" r="3" />
+    </>
+  ),
+  // Right-pointing triangle — start playback.
+  play: <path d="M6 4l14 8-14 8z" />,
+  // Two vertical bars — pause playback.
+  pause: (
+    <>
+      <rect x="6" y="4" width="4" height="16" />
+      <rect x="14" y="4" width="4" height="16" />
+    </>
+  ),
 }
 
 /**

package/src/index.ts

@@ -20,6 +20,11 @@ export {Icon, type IconName} from './components/Icon'
 export {Badge, type BadgeVariant, type BadgeSize} from './components/Badge/Badge'
 export {Breadcrumb} from './components/Breadcrumb/Breadcrumb'
 export {Button, type ButtonVariant, type ButtonSize} from './components/Button/Button'
+export {
+  FileTrigger,
+  type FileTriggerProps,
+  type FileTriggerHandle,
+} from './components/FileTrigger/FileTrigger'
 export type {ControlSize} from './shared/types'
 export {ButtonGroup, type ButtonGroupProps} from './components/ButtonGroup/ButtonGroup'
 export {Callout, type CalloutVariant} from './components/Callout/Callout'