@duro-app/ui 5.10.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-gRiLI243.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.10.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.10.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

@@ -57,6 +57,7 @@ const groups: ReadonlyArray<{title: string; names: readonly IconName[]}> = [
   {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: [

package/src/components/Icon/Icon.tsx

@@ -48,6 +48,11 @@ export type IconName =
   // Device status glyphs
   | 'signal'
   | 'battery'
+  // Media glyphs
+  | 'video'
+  | 'music'
+  | 'play'
+  | 'pause'
   // Filled variants (solid shape with cutout symbol)
   | 'info-circle-filled'
   | 'alert-triangle-filled'
@@ -333,6 +338,31 @@ const strokeIcons: Partial<Record<IconName, ReactNode>> = {
       <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'