@proteos/ui 0.54.1 → 0.55.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proteos/ui",
-  "version": "0.54.1",
+  "version": "0.55.0",
   "license": "FSL-1.1-Apache-2.0",
   "description": "Proteos React component library (React Aria Components + Tailwind v4).",
   "repository": {
@@ -56,7 +56,7 @@
     "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.2.4",
     "thinking-orbs": "^0.3.1",
-    "@proteos/sdk": "0.54.1"
+    "@proteos/sdk": "0.55.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.13",
@@ -78,8 +78,8 @@
     "typescript": "^6.0.3",
     "vite": "^8.0.10",
     "vitest": "^3.2.4",
-    "@proteos/tsconfig": "0.0.0",
-    "@proteos/biome-config": "0.0.0"
+    "@proteos/biome-config": "0.0.0",
+    "@proteos/tsconfig": "0.0.0"
   },
   "scripts": {
     "lint": "biome check .",

package/src/components/badge/badge.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 
-import { Badge } from './badge'
+import { Badge, BadgeAction } from './badge'
 
 const meta: Meta<typeof Badge> = {
   title: 'Components/Badge',
@@ -111,3 +111,39 @@ export const InContext: Story = {
     </div>
   ),
 }
+
+/** The `actions` slot: a chip a picker can take back. `BadgeAction` inherits
+ *  the register's ink, so the × reads correctly on every fill and tint. */
+export const WithActions: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Badge
+        shape="rounded"
+        hasDot={false}
+        variant="active"
+        actions={<BadgeAction label="Remove to do" onPress={() => {}} />}
+      >
+        to do
+      </Badge>
+      <Badge
+        shape="rounded"
+        hasDot={false}
+        icon="CircleCheck"
+        color="#3f9d6b"
+        actions={<BadgeAction label="Remove done" onPress={() => {}} />}
+      >
+        done
+      </Badge>
+      <Badge variant="warning" actions={<BadgeAction label="Remove past due" onPress={() => {}} />}>
+        past due
+      </Badge>
+      <Badge
+        variant="neutral"
+        actions={<BadgeAction label="Remove dispatching" onPress={() => {}} isDisabled />}
+      >
+        disabled
+      </Badge>
+    </div>
+  ),
+}

package/src/components/badge/badge.test.tsx

@@ -1,7 +1,8 @@
 import { render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
 
-import { Badge } from './badge'
+import { Badge, BadgeAction } from './badge'
 
 describe('Badge', () => {
   it('renders its content', () => {
@@ -82,3 +83,39 @@ describe('Badge', () => {
     expect(badge.className).not.toContain('before:hidden')
   })
 })
+
+describe('Badge actions slot', () => {
+  it('renders nothing extra without actions', () => {
+    render(<Badge>done</Badge>)
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('renders the action inside the chip', () => {
+    render(<Badge actions={<BadgeAction label="Remove done" onPress={() => {}} />}>done</Badge>)
+    const button = screen.getByRole('button', { name: 'Remove done' })
+    expect(screen.getByText('done')).toContainElement(button)
+  })
+
+  it('fires onPress and keeps the click from reaching the host', async () => {
+    const user = userEvent.setup()
+    const onPress = vi.fn()
+    const onHost = vi.fn()
+    render(
+      // biome-ignore lint/a11y/useKeyWithClickEvents: test host mimicking a clickable picker trigger
+      // biome-ignore lint/a11y/noStaticElementInteractions: same
+      <div onClick={onHost}>
+        <Badge actions={<BadgeAction label="Remove" onPress={onPress} />}>done</Badge>
+      </div>,
+    )
+    await user.click(screen.getByRole('button', { name: 'Remove' }))
+    expect(onPress).toHaveBeenCalledTimes(1)
+    expect(onHost).not.toHaveBeenCalled()
+  })
+
+  it('disables the action when asked', () => {
+    render(
+      <Badge actions={<BadgeAction label="Remove" onPress={() => {}} isDisabled />}>done</Badge>,
+    )
+    expect(screen.getByRole('button', { name: 'Remove' })).toBeDisabled()
+  })
+})

package/src/components/badge/badge.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties, HTMLAttributes } from 'react'
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react'
 import { tv, type VariantProps } from 'tailwind-variants'
 
 import { cn } from '../../lib/cn'
@@ -20,6 +20,11 @@ import { resolveLucideIcon } from '../icon-picker/icon-picker'
    via color-mix while the text stays ink so any user-picked color keeps
    its contrast in light/dark/paper; and `icon` — a Lucide name that
    replaces the dot (whatever `hasDot` says).
+
+   `actions` — an optional trailing slot for controls that act on the chip
+   (the × of a removable selection, say). Absent on read-only surfaces;
+   pickers fill it with <BadgeAction>, which inherits the register's ink so
+   it reads correctly on every fill.
    ========================================================================= */
 
 export const badgeStyles = tv({
@@ -81,6 +86,8 @@ export type BadgeProps = HTMLAttributes<HTMLSpanElement> &
     color?: string
     /** Lucide icon name (any casing). Replaces the leading dot; unknown names keep the dot. */
     icon?: string
+    /** Trailing slot for controls acting on the chip — usually a <BadgeAction>. */
+    actions?: ReactNode
   }
 
 /** Icon tone per register — mirrors each variant's `before:bg-*` dot color. */
@@ -100,6 +107,7 @@ export function Badge({
   hasDot,
   color,
   icon,
+  actions,
   className,
   style,
   children,
@@ -124,6 +132,62 @@ export function Badge({
     >
       {Icon ? <Icon aria-hidden className={cn('size-3 shrink-0', ICON_TONE[register])} /> : null}
       {children}
+      {actions ? (
+        // Pulled flush with the trailing edge so the chip still reads
+        // symmetric around its leading dot / icon.
+        <span className="inline-flex items-center shrink-0 -mr-1">{actions}</span>
+      ) : null}
     </span>
   )
 }
+
+/* =========================================================================
+   BadgeAction — the icon button that lives in a Badge's `actions` slot.
+   Inherits the badge's text color through `currentColor`, so the same
+   button reads correctly on every register and custom tint. Stops the
+   click from bubbling: badges sit inside clickable triggers (a picker's
+   combobox box, a table row), and acting on the chip must not also act on
+   the host. Defaults to the × glyph — the remove case needs no children.
+   ========================================================================= */
+
+export type BadgeActionProps = {
+  /** Accessible name — the glyph is decorative. */
+  label: string
+  onPress: () => void
+  isDisabled?: boolean
+  /** Custom glyph; omit for ×. Size it `size-2.5`. */
+  children?: ReactNode
+}
+
+export function BadgeAction({ label, onPress, isDisabled = false, children }: BadgeActionProps) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      disabled={isDisabled}
+      onClick={(event) => {
+        event.stopPropagation()
+        onPress()
+      }}
+      className={cn(
+        'inline-flex items-center justify-center shrink-0',
+        'size-3.5 rounded-full',
+        'text-current/70 hover:text-current hover:bg-current/10',
+        'outline-none cursor-pointer',
+        'focus-visible:shadow-[var(--shadow-focus)]',
+        'disabled:opacity-45 disabled:cursor-not-allowed',
+      )}
+    >
+      {children ?? (
+        <svg aria-hidden viewBox="0 0 10 10" className="size-2.5" fill="none">
+          <path
+            d="M2 2l6 6M8 2l-6 6"
+            stroke="currentColor"
+            strokeWidth="1.4"
+            strokeLinecap="round"
+          />
+        </svg>
+      )}
+    </button>
+  )
+}

package/src/components/badge/index.ts

@@ -1,2 +1,2 @@
-export type { BadgeProps, BadgeVariants } from './badge'
-export { Badge, badgeStyles } from './badge'
+export type { BadgeActionProps, BadgeProps, BadgeVariants } from './badge'
+export { Badge, BadgeAction, badgeStyles } from './badge'

package/src/components/badge-group/badge-group.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Badge } from '../badge/badge'
+import { BadgeGroup } from './badge-group'
+
+const values = [
+  'sap',
+  'transporeon',
+  'test',
+  'another test',
+  'super looong test',
+  'another super long text',
+]
+
+const meta: Meta<typeof BadgeGroup> = {
+  title: 'Components/BadgeGroup',
+  component: BadgeGroup,
+  tags: ['autodocs'],
+  parameters: { controls: { hideNoControlsWarning: true } },
+}
+
+export default meta
+type Story = StoryObj<typeof BadgeGroup>
+
+/** Drag the box's corner: badges collapse into `+N more` as it narrows and
+ *  come back as it widens. Hover or focus the chip for the full list. */
+export const Resizable: Story = {
+  render: () => (
+    <div className="w-[380px] max-w-full resize-x overflow-hidden rounded-md border border-rule p-3">
+      <BadgeGroup>
+        {values.map((value) => (
+          <Badge key={value} variant="active" shape="rounded" hasDot={false}>
+            {value}
+          </Badge>
+        ))}
+      </BadgeGroup>
+    </div>
+  ),
+}
+
+export const AllFit: Story = {
+  render: () => (
+    <div className="w-[560px] max-w-full rounded-md border border-rule p-3">
+      <BadgeGroup>
+        {values.slice(0, 3).map((value) => (
+          <Badge key={value} variant="active" shape="rounded" hasDot={false}>
+            {value}
+          </Badge>
+        ))}
+      </BadgeGroup>
+    </div>
+  ),
+}
+
+/** Enum-style chips keep their icon and color in the row and in the tooltip. */
+export const WithColorAndIcon: Story = {
+  render: () => (
+    <div className="w-[260px] max-w-full resize-x overflow-hidden rounded-md border border-rule p-3">
+      <BadgeGroup>
+        <Badge shape="rounded" hasDot={false} icon="CircleCheck" color="#3f9d6b">
+          Done
+        </Badge>
+        <Badge shape="rounded" hasDot={false} icon="Clock" color="#c98a2b">
+          Waiting
+        </Badge>
+        <Badge shape="rounded" hasDot={false} icon="Flag" color="#c0392b">
+          Blocked
+        </Badge>
+        <Badge shape="rounded" hasDot={false} variant="active">
+          To Do
+        </Badge>
+      </BadgeGroup>
+    </div>
+  ),
+}

package/src/components/badge-group/badge-group.test.tsx

@@ -0,0 +1,121 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { Badge } from '../badge/badge'
+import { BadgeGroup, fitBadgeCount } from './badge-group'
+
+const labels = ['sap', 'transporeon', 'test']
+
+function renderGroup() {
+  return render(
+    <BadgeGroup>
+      {labels.map((label) => (
+        <Badge key={label} shape="rounded" hasDot={false}>
+          {label}
+        </Badge>
+      ))}
+    </BadgeGroup>,
+  )
+}
+
+/** jsdom has no layout: pretend the group is 100px wide, every badge 40px
+ *  and the `+N more` chip 50px — so one badge plus the chip fits. */
+function mockLayout() {
+  vi.spyOn(Element.prototype, 'clientWidth', 'get').mockReturnValue(100)
+  vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function (this: Element) {
+    const width = this.textContent?.startsWith('+') ? 50 : 40
+    return {
+      width,
+      height: 20,
+      top: 0,
+      left: 0,
+      right: width,
+      bottom: 20,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    } as DOMRect
+  })
+}
+
+describe('fitBadgeCount', () => {
+  const metrics = { itemWidths: [40, 40, 40], overflowWidth: 50, gap: 6 }
+
+  it('shows everything when the whole row fits', () => {
+    expect(fitBadgeCount(metrics, 132)).toBe(3)
+  })
+
+  it('reserves room for the overflow chip once the row overflows', () => {
+    // 131px: the full row (132) no longer fits; one item + gap + chip (96) does,
+    // two items + gaps + chip (142) does not.
+    expect(fitBadgeCount(metrics, 131)).toBe(1)
+  })
+
+  it('shows only the chip when not even one item fits beside it', () => {
+    expect(fitBadgeCount(metrics, 80)).toBe(0)
+  })
+
+  it('shows everything when there is no layout to measure against', () => {
+    expect(fitBadgeCount(metrics, 0)).toBe(3)
+  })
+})
+
+describe('BadgeGroup', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('renders every badge and no chip while the row fits', () => {
+    renderGroup()
+    for (const label of labels) expect(screen.getByText(label)).toBeInTheDocument()
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('collapses the badges that do not fit into a +N more chip', () => {
+    mockLayout()
+    renderGroup()
+    expect(screen.getByText('sap')).toBeInTheDocument()
+    expect(screen.queryByText('transporeon')).not.toBeInTheDocument()
+    expect(screen.queryByText('test')).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '+2 more' })).toBeInTheDocument()
+  })
+
+  it('lists every value in a tooltip on the chip', async () => {
+    mockLayout()
+    const user = userEvent.setup()
+    renderGroup()
+    await user.tab()
+    const tooltip = await screen.findByRole('tooltip')
+    for (const label of labels) expect(tooltip).toHaveTextContent(label)
+  })
+})
+
+describe('BadgeGroup overflow chip', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('opens a popover with every value on click, without reaching the host', async () => {
+    mockLayout()
+    const user = userEvent.setup()
+    const onHost = vi.fn()
+    render(
+      // biome-ignore lint/a11y/noStaticElementInteractions: test host mimicking a clickable table row
+      // biome-ignore lint/a11y/useKeyWithClickEvents: same
+      <div onClick={onHost}>
+        <BadgeGroup>
+          {labels.map((label) => (
+            <Badge key={label} shape="rounded" hasDot={false}>
+              {label}
+            </Badge>
+          ))}
+        </BadgeGroup>
+      </div>,
+    )
+    await user.click(screen.getByRole('button', { name: '+2 more' }))
+    const dialog = await screen.findByRole('dialog')
+    for (const label of labels) expect(dialog).toHaveTextContent(label)
+    expect(onHost).not.toHaveBeenCalled()
+  })
+})

package/src/components/badge-group/badge-group.tsx

@@ -0,0 +1,208 @@
+import {
+  Children,
+  type HTMLAttributes,
+  isValidElement,
+  type ReactNode,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react'
+import { Button as AriaButton } from 'react-aria-components'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+import { badgeStyles } from '../badge/badge'
+import { Popover, PopoverContent } from '../popover/popover'
+import { Tooltip, TooltipTrigger } from '../tooltip/tooltip'
+
+/* =========================================================================
+   BadgeGroup — a single-line row of badges that collapses whatever does
+   not fit into a `+N more` chip. Hovering or focusing that chip peeks at
+   every badge in a Tooltip; clicking it pins them in a Popover. The click
+   stops at the chip, so a clickable host row (a table row that opens the
+   record) is not triggered by reading the overflow.
+
+   Sibling of AvatarGroup, but fit-driven instead of count-driven: the
+   group measures its children once (a layout pass before first paint),
+   then re-fits on every container resize from those cached widths.
+
+     <BadgeGroup>
+       <Badge shape="rounded" hasDot={false}>sap</Badge>
+       <Badge shape="rounded" hasDot={false}>transporeon</Badge>
+     </BadgeGroup>
+
+   Children render as-is — any inline element works, not only Badge. The
+   group is `w-full`, so it fills the read-only field or table cell it sits
+   in: the parent decides the width, the group decides the count.
+   ========================================================================= */
+
+export const badgeGroupStyles = tv({
+  base: 'flex flex-nowrap items-center gap-1.5 w-full min-w-0',
+  variants: {
+    // The measuring pass renders every chip plus the overflow chip so their
+    // widths can be read; it is hidden so that pass never paints.
+    isMeasuring: { true: 'invisible', false: '' },
+  },
+  defaultVariants: { isMeasuring: false },
+})
+
+export type BadgeGroupVariants = VariantProps<typeof badgeGroupStyles>
+
+export type BadgeGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+  children: ReactNode
+}
+
+/** Measured once per set of children; re-fitting on resize needs no DOM read. */
+export type BadgeGroupMetrics = {
+  itemWidths: number[]
+  overflowWidth: number
+  gap: number
+}
+
+/** How many leading items fit in `available` px, reserving room for the
+ *  overflow chip whenever not all of them do. `0` means only the chip shows. */
+export function fitBadgeCount(metrics: BadgeGroupMetrics, available: number): number {
+  const { itemWidths, overflowWidth, gap } = metrics
+  const total = itemWidths.length
+  // No layout to measure against (jsdom, display:none) — show everything.
+  if (available <= 0) return total
+  let fullWidth = 0
+  for (let index = 0; index < total; index += 1) {
+    fullWidth += (itemWidths[index] ?? 0) + (index > 0 ? gap : 0)
+  }
+  if (fullWidth <= available) return total
+  let used = 0
+  let count = 0
+  for (let index = 0; index < total; index += 1) {
+    // Each shown item is followed by a gap — before the next item or the chip.
+    const next = used + (itemWidths[index] ?? 0) + gap
+    if (next + overflowWidth > available) break
+    used = next
+    count = index + 1
+  }
+  return count
+}
+
+type Layout = {
+  /** Identity of the children the layout was computed for. */
+  signature: string
+  /** `null` = measuring pass: every item + the chip render, then get measured. */
+  visibleCount: number | null
+}
+
+/** The `+N more` chip: a neutral rounded Badge that is also a press target
+ *  (popover) and a hover / focus target (tooltip). */
+export const badgeGroupOverflowStyles = tv({
+  base: [
+    badgeStyles({ variant: 'neutral', shape: 'rounded', hasDot: false }),
+    // badgeStyles' register still materializes an empty ::before — hide it,
+    // as Badge itself does when no dot should show.
+    'before:hidden shrink-0 cursor-pointer whitespace-nowrap',
+    'hover:bg-surface-2 hover:text-ink',
+    'outline-none focus-visible:shadow-[var(--shadow-focus)]',
+  ],
+})
+
+export function BadgeGroup({ children, className, ...props }: BadgeGroupProps) {
+  const items = Children.toArray(children)
+  const signature = items
+    .map((item, index) => (isValidElement(item) ? String(item.key ?? index) : String(item)))
+    .join('\u001f')
+
+  const rootRef = useRef<HTMLDivElement>(null)
+  const metricsRef = useRef<BadgeGroupMetrics | null>(null)
+  const [layout, setLayout] = useState<Layout>({ signature, visibleCount: null })
+
+  // New children — forget the cached widths and take a fresh measuring pass.
+  if (layout.signature !== signature) {
+    metricsRef.current = null
+    setLayout({ signature, visibleCount: null })
+  }
+  const measuring = layout.signature !== signature || layout.visibleCount === null
+  const visibleCount = measuring ? items.length : (layout.visibleCount ?? items.length)
+  const shown = items.slice(0, visibleCount)
+  // While measuring, the chip carries the widest label it can ever need.
+  const hidden = measuring ? items.length : items.length - visibleCount
+
+  // Measuring pass: read every item's natural width plus the chip's, then
+  // commit the fitting count before the browser paints.
+  useLayoutEffect(() => {
+    if (!measuring) return
+    const root = rootRef.current
+    if (!root) return
+    const nodes = Array.from(root.children) as HTMLElement[]
+    const metrics: BadgeGroupMetrics = {
+      itemWidths: nodes.slice(0, items.length).map((node) => node.getBoundingClientRect().width),
+      overflowWidth: nodes[items.length]?.getBoundingClientRect().width ?? 0,
+      gap: Number.parseFloat(getComputedStyle(root).columnGap) || 0,
+    }
+    metricsRef.current = metrics
+    setLayout({ signature, visibleCount: fitBadgeCount(metrics, root.clientWidth) })
+  }, [measuring, signature, items.length])
+
+  // Container resized — re-fit from the cached widths, no re-measure needed.
+  useEffect(() => {
+    const root = rootRef.current
+    if (!root || typeof ResizeObserver === 'undefined') return
+    const observer = new ResizeObserver(() => {
+      const metrics = metricsRef.current
+      if (!metrics) return
+      const next = fitBadgeCount(metrics, root.clientWidth)
+      setLayout((prev) => (prev.visibleCount === next ? prev : { ...prev, visibleCount: next }))
+    })
+    observer.observe(root)
+    return () => observer.disconnect()
+  }, [])
+
+  // Web fonts landing after mount change every width — measure again once.
+  useEffect(() => {
+    const fonts = typeof document === 'undefined' ? undefined : document.fonts
+    if (!fonts || fonts.status === 'loaded') return
+    let cancelled = false
+    void fonts.ready.then(() => {
+      if (cancelled) return
+      metricsRef.current = null
+      setLayout((prev) => ({ ...prev, visibleCount: null }))
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  return (
+    <div
+      {...props}
+      ref={rootRef}
+      className={cn(badgeGroupStyles({ isMeasuring: measuring }), className)}
+    >
+      {shown.map((item, index) => (
+        <span
+          key={(isValidElement(item) ? item.key : null) ?? index}
+          className="inline-flex shrink-0"
+        >
+          {item}
+        </span>
+      ))}
+      {hidden > 0 ? (
+        // The span swallows the click before it reaches a clickable host row
+        // (React propagation), so opening the overflow never opens the record.
+        // biome-ignore lint/a11y/noStaticElementInteractions: click fence only — the button inside is the interactive element
+        // biome-ignore lint/a11y/useKeyWithClickEvents: keyboard handling lives on the button inside
+        <span className="inline-flex shrink-0" onClick={(event) => event.stopPropagation()}>
+          <Popover>
+            <TooltipTrigger>
+              <AriaButton className={badgeGroupOverflowStyles()}>+{hidden} more</AriaButton>
+              <Tooltip className="max-w-sm">
+                <span className="flex flex-wrap items-center gap-1.5">{items}</span>
+              </Tooltip>
+            </TooltipTrigger>
+            <PopoverContent placement="bottom start" panelClassName="max-w-sm">
+              <div className="flex flex-wrap items-center gap-1.5 p-2.5">{items}</div>
+            </PopoverContent>
+          </Popover>
+        </span>
+      ) : null}
+    </div>
+  )
+}

package/src/components/badge-group/index.ts

@@ -0,0 +1,7 @@
+export type { BadgeGroupMetrics, BadgeGroupProps, BadgeGroupVariants } from './badge-group'
+export {
+  BadgeGroup,
+  badgeGroupOverflowStyles,
+  badgeGroupStyles,
+  fitBadgeCount,
+} from './badge-group'

package/src/components/badge-multi-select/badge-multi-select.stories.tsx

@@ -199,3 +199,28 @@ export const AllStates: Story = {
     )
   },
 }
+
+/** The inline table-cell editor: fixed 29px box in a narrow column, chips
+ *  on one line, listbox open from the first render. */
+export const CellEditor: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<Set<string>>(
+      new Set(['in-transit', 'quoted', 'reconciled', 'past-due']),
+    )
+    return (
+      <div className="w-[220px] h-[36px] flex items-center border-y border-rule px-[14px]">
+        <BadgeMultiSelect<string>
+          aria-label="Status"
+          size="sm"
+          appearance="cell"
+          options={statuses}
+          selectedKeys={selected}
+          onSelectionChange={setSelected}
+          autoFocus
+          defaultOpen
+          className="w-full"
+        />
+      </div>
+    )
+  },
+}