@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/kanban/kanban.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kanban.js","names":[],"sources":["../../../src/components/kanban/kanban.tsx"],"sourcesContent":["import type {\n  KanbanCardSchema,\n  KanbanColumnSchema,\n  KanbanEnvironment,\n  KanbanLaneSchema,\n  KanbanSchema,\n  KanbanWidgetSchema,\n  LocaleFormatter,\n} from '@alfakit/core'\nimport {\n  KanbanController,\n  attachKanbanPointer,\n  clientErrorNotification,\n  createKanbanFiltersStore,\n  kanbanActiveFilters,\n  kanbanCardsIn,\n  kanbanInitials,\n  kanbanWipState,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/react'\nimport {\n  CalendarIcon,\n  ChevronRightIcon,\n  ChevronsLeftRightIcon,\n  ChevronsRightLeftIcon,\n  FilterIcon,\n  PlusIcon,\n  SearchIcon,\n} from 'lucide-react'\nimport { Fragment, useEffect, useId, useRef, useState, type KeyboardEvent } from 'react'\nimport { useActionRunner, useDirection, useFormatter, usePanel, useT } from '../../context'\nimport { useStore } from '../../hooks/use-store'\nimport { badgeColorClasses, colorClass, cssColor } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { ActionList } from '../actions/action-list'\nimport { FormProvider } from '../form/form-context'\nimport { showToast } from '../notifications/flash-toasts'\nimport { SchemaRenderer } from '../schema/schema-renderer'\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'\nimport { Badge } from '../ui/badge'\nimport { Button } from '../ui/button'\nimport { Card, CardTitle } from '../ui/card'\nimport { Input } from '../ui/input'\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'\nimport { Spinner } from '../ui/spinner'\n\ntype Translate = ReturnType<typeof useT>\n\n/**\n * The board of a `KanbanPage` (schema component `kanban`) or a `KanbanWidget`\n * (alfasix/alfakit-kanban). Cards move by dragging (mouse, pen, touch) or with the\n * keyboard, and every move is saved in one request.\n */\nexport function Kanban({\n  component,\n  widget,\n}: {\n  component?: KanbanSchema\n  widget?: KanbanWidgetSchema\n}) {\n  const board = component ?? widget?.kanban\n\n  return board ? <KanbanBoard key={board.actionComponent} board={board} /> : null\n}\n\nfunction KanbanBoard({ board }: { board: KanbanSchema }) {\n  const runner = useActionRunner()\n  const page = usePageActionContext()\n  const panel = usePanel()\n  const t = useT()\n  const direction = useDirection()\n  const formatter = useFormatter()\n  const labelId = useId()\n  const instructionsId = useId()\n  const environment = (): KanbanEnvironment => ({\n    runner,\n    token: page.token,\n    t,\n    notify: (notifications) => notifications.forEach((notification) => showToast(notification)),\n    error: (message) => showToast(clientErrorNotification('kanban', message)),\n    visit: (url) => router.visit(url),\n  })\n  // One controller per board (the parent keys this view by its action component).\n  const [controller] = useState(() => new KanbanController(board, environment()))\n  const [filters] = useState(() =>\n    createKanbanFiltersStore(board, page.token, panel.endpoints.schemaOptions),\n  )\n  const root = useRef<HTMLDivElement>(null)\n  const cards = useRef(new Map<string, HTMLElement>())\n  const [focused, setFocused] = useState<string | null>(null)\n\n  useEffect(() => {\n    controller.setEnvironment(environment())\n  })\n\n  const first = useRef(true)\n\n  useEffect(() => {\n    if (first.current) {\n      first.current = false\n\n      return\n    }\n\n    controller.setBoard(board)\n  }, [controller, board])\n\n  useEffect(\n    () => (root.current ? attachKanbanPointer(root.current, controller) : undefined),\n    [controller],\n  )\n  useEffect(() => controller.startPolling(), [controller])\n  useEffect(\n    () => () => {\n      controller.destroy()\n      filters?.destroy()\n    },\n    [controller, filters],\n  )\n\n  const state = useStore(controller.store)\n  const schema = controller.schema\n  const lanes = controller.lanes()\n  const keys = state.columns.flatMap((column) => column.cards.map((card) => card.key))\n  const current = focused !== null && keys.includes(focused) ? focused : (keys[0] ?? null)\n\n  const focus = (key: string | undefined) => {\n    if (!key) return\n    setFocused(key)\n    requestAnimationFrame(() => cards.current.get(key)?.focus())\n  }\n\n  // A card picked up with the keyboard moves to another list: keep the focus on it.\n  const picked = state.picked\n\n  useEffect(() => {\n    if (picked?.via === 'keyboard') {\n      const element = cards.current.get(picked.key)\n\n      if (element && document.activeElement !== element) element.focus()\n    }\n  }, [picked])\n\n  const onKeyDown = (key: string) => (event: KeyboardEvent<HTMLElement>) => {\n    if (event.target !== event.currentTarget) return\n\n    const result = controller.handleKey(key, event, direction)\n\n    if (!result.handled) return\n\n    event.preventDefault()\n\n    if (result.open) controller.open(key)\n    else focus(result.focus)\n  }\n\n  const template = state.columns\n    .map((column) => (state.collapsed.has(column.key) ? '3.25rem' : 'minmax(16rem, 20rem)'))\n    .join(' ')\n\n  return (\n    <Card\n      ref={root}\n      role=\"region\"\n      aria-labelledby={labelId}\n      className=\"gap-3 py-4\"\n      data-slot=\"kanban\"\n    >\n      <div className=\"flex flex-wrap items-center gap-2 px-4\" data-slot=\"kanban-toolbar\">\n        {schema.heading ? (\n          <CardTitle id={labelId} className=\"text-base\">\n            {schema.heading}\n          </CardTitle>\n        ) : (\n          <span id={labelId} className=\"sr-only\">\n            {t('kanban.label', {}, 'Kanban board')}\n          </span>\n        )}\n        <div className=\"ms-auto flex w-full flex-wrap items-center gap-2 sm:w-auto\">\n          {state.loading && (\n            <Spinner className=\"size-4\" aria-label={t('kanban.loading', {}, 'Loading board')} />\n          )}\n          {schema.searchable && (\n            <KanbanSearch controller={controller} search={state.search} t={t} />\n          )}\n          {filters && <KanbanFilters controller={controller} store={filters} t={t} />}\n        </div>\n      </div>\n      <p id={instructionsId} className=\"sr-only\">\n        {t(\n          'kanban.instructions',\n          {},\n          'Press Space to pick up a card. While it is picked up, use the arrow keys to move it, Space to drop it and Escape to cancel.',\n        )}\n      </p>\n      <div\n        className=\"relative overflow-x-auto overscroll-x-contain px-4 pb-2\"\n        data-slot=\"kanban-scroller\"\n      >\n        <div\n          className=\"grid w-max min-w-full snap-x gap-3\"\n          style={{ gridTemplateColumns: template }}\n        >\n          {state.columns.map((column) => (\n            <ColumnHeader\n              key={column.key}\n              column={column}\n              id={`${labelId}-column-${column.key}`}\n              collapsed={state.collapsed.has(column.key)}\n              creatable={Boolean(column.creatable && schema.createAction)}\n              filtered={state.search !== '' || kanbanActiveFilters(state.filters) > 0}\n              onToggle={() => controller.toggleColumn(column.key)}\n              onCreate={() => controller.create(column.key)}\n              t={t}\n            />\n          ))}\n          {lanes.map((lane) => {\n            const laneId = lane ? `${labelId}-lane-${lane.key}` : undefined\n            const collapsedLane = lane !== null && state.collapsedLanes.has(lane.key)\n\n            return (\n              <Fragment key={lane?.key ?? '__board'}>\n                {lane && (\n                  <LaneHeader\n                    lane={lane}\n                    id={laneId!}\n                    count={state.columns.reduce(\n                      (sum, column) => sum + kanbanCardsIn(column, lane.key).length,\n                      0,\n                    )}\n                    collapsed={collapsedLane}\n                    onToggle={() => controller.toggleLane(lane.key)}\n                    t={t}\n                  />\n                )}\n                {!collapsedLane &&\n                  state.columns.map((column) => {\n                    const collapsed = state.collapsed.has(column.key)\n                    const items = kanbanCardsIn(column, lane?.key ?? null)\n                    const hidden = lane === null ? column.total - column.cards.length : 0\n\n                    return (\n                      <ul\n                        key={column.key}\n                        role=\"list\"\n                        aria-labelledby={[`${labelId}-column-${column.key}`, laneId]\n                          .filter(Boolean)\n                          .join(' ')}\n                        data-slot=\"kanban-dropzone\"\n                        data-column={column.key}\n                        data-lane={lane?.key}\n                        data-refused={\n                          state.picked && state.refused?.column === column.key ? '' : undefined\n                        }\n                        className={cn(\n                          'bg-muted/40 flex min-h-24 flex-col gap-2 rounded-lg p-2',\n                          lane === null && 'max-h-[70vh] overflow-y-auto',\n                        )}\n                      >\n                        {!collapsed &&\n                          items.map((card) => (\n                            <KanbanCard\n                              key={card.key}\n                              card={card}\n                              board={schema}\n                              token={page.token}\n                              current={current === card.key}\n                              picked={state.picked?.key === card.key ? state.picked.via : undefined}\n                              saving={state.saving.has(card.key)}\n                              describedBy={instructionsId}\n                              formatter={formatter}\n                              t={t}\n                              setRef={(element) => {\n                                if (element) cards.current.set(card.key, element)\n                                else cards.current.delete(card.key)\n                              }}\n                              onFocus={() => setFocused(card.key)}\n                              onKeyDown={onKeyDown(card.key)}\n                              onOpen={() => controller.open(card.key)}\n                            />\n                          ))}\n                        {!collapsed && items.length === 0 && (\n                          <li\n                            className=\"text-muted-foreground rounded-md border border-dashed px-2 py-6 text-center text-xs\"\n                            data-slot=\"kanban-empty\"\n                          >\n                            {state.search !== '' || kanbanActiveFilters(state.filters) > 0\n                              ? t('kanban.no_results', {}, 'No cards match')\n                              : (column.emptyState ?? t('kanban.empty', {}, 'No cards'))}\n                          </li>\n                        )}\n                        {!collapsed && hidden > 0 && (\n                          <li className=\"text-muted-foreground px-2 text-center text-xs\">\n                            {t('kanban.more_cards', { count: hidden }, '+:count more')}\n                          </li>\n                        )}\n                      </ul>\n                    )\n                  })}\n              </Fragment>\n            )\n          })}\n        </div>\n      </div>\n      <div className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n        {state.announcement}\n      </div>\n    </Card>\n  )\n}\n\nfunction KanbanSearch({\n  controller,\n  search,\n  t,\n}: {\n  controller: KanbanController\n  search: string\n  t: Translate\n}) {\n  const [value, setValue] = useState(search)\n  const [synced, setSynced] = useState(search)\n\n  if (synced !== search) {\n    setSynced(search)\n    setValue(search)\n  }\n\n  return (\n    <div className=\"relative w-full sm:w-64\">\n      <SearchIcon\n        className=\"text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2\"\n        aria-hidden=\"true\"\n      />\n      <Input\n        type=\"search\"\n        value={value}\n        className=\"h-8 ps-8\"\n        placeholder={t('kanban.search_placeholder', {}, 'Search…')}\n        aria-label={t('kanban.search', {}, 'Search cards')}\n        onChange={(event) => {\n          setValue(event.target.value)\n          controller.setSearch(event.target.value)\n        }}\n      />\n    </div>\n  )\n}\n\nfunction KanbanFilters({\n  controller,\n  store,\n  t,\n}: {\n  controller: KanbanController\n  store: NonNullable<ReturnType<typeof createKanbanFiltersStore>>\n  t: Translate\n}) {\n  const form = useStore(store.store)\n  const [initial] = useState(() => ({\n    components: store.state.components,\n    state: store.state.values,\n    columns: store.state.columns,\n  }))\n  const active = kanbanActiveFilters(form.values)\n\n  useEffect(() => {\n    if (form.dirty.size > 0) controller.setFilters(form.values)\n  }, [controller, form.values, form.dirty])\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button type=\"button\" variant=\"outline\" size=\"sm\" data-slot=\"kanban-filters\">\n          <FilterIcon aria-hidden=\"true\" />\n          {t('kanban.filters', {}, 'Filters')}\n          {active > 0 && <Badge className=\"h-5 min-w-5 px-1\">{active}</Badge>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" className=\"w-80 sm:w-96\">\n        <FormProvider store={store}>\n          <div className=\"flex flex-col gap-4\">\n            <SchemaRenderer components={form.components} columns={form.columns} className=\"gap-4\" />\n            {active > 0 && (\n              <div className=\"flex justify-end\">\n                <Button\n                  type=\"button\"\n                  variant=\"link\"\n                  size=\"sm\"\n                  onClick={() => {\n                    store.fill(initial)\n                    controller.setFilters(null, 0)\n                  }}\n                >\n                  {t('kanban.reset_filters', {}, 'Reset')}\n                </Button>\n              </div>\n            )}\n          </div>\n        </FormProvider>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nfunction ColumnHeader({\n  column,\n  id,\n  collapsed,\n  creatable,\n  filtered,\n  onToggle,\n  onCreate,\n  t,\n}: {\n  column: KanbanColumnSchema\n  id: string\n  collapsed: boolean\n  creatable: boolean\n  filtered: boolean\n  onToggle: () => void\n  onCreate: () => void\n  t: Translate\n}) {\n  const wip = kanbanWipState(column)\n  const shown =\n    column.wipLimit !== undefined ? column.count : filtered ? column.total : column.count\n  const countLabel =\n    column.wipLimit !== undefined\n      ? t('kanban.wip', { count: column.count, limit: column.wipLimit }, ':count of :limit')\n      : filtered && column.total !== column.count\n        ? t(\n            'kanban.count_filtered',\n            { shown: column.total, count: column.count },\n            ':shown of :count cards',\n          )\n        : t('kanban.count', { count: column.count }, ':count cards')\n  const style = column.color ? { borderTopColor: cssColor(column.color) } : undefined\n  const toggleLabel = collapsed\n    ? t('kanban.expand', { column: column.label }, 'Expand :column')\n    : t('kanban.collapse', { column: column.label }, 'Collapse :column')\n\n  if (collapsed) {\n    return (\n      <div\n        className=\"bg-muted/60 flex snap-start flex-col items-center gap-2 rounded-lg border border-t-4 px-1 py-2\"\n        style={style}\n        data-slot=\"kanban-column-header\"\n        data-column={column.key}\n        data-collapsed=\"\"\n        data-wip={wip ?? undefined}\n      >\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-xs\"\n          aria-label={toggleLabel}\n          aria-expanded={false}\n          onClick={onToggle}\n        >\n          <ChevronsLeftRightIcon aria-hidden=\"true\" />\n        </Button>\n        <span className=\"text-muted-foreground text-xs tabular-nums\" title={countLabel}>\n          {shown}\n        </span>\n        <h3 id={id} className=\"text-sm font-medium [writing-mode:vertical-rl]\">\n          {column.label}\n        </h3>\n      </div>\n    )\n  }\n\n  return (\n    <div\n      className=\"bg-muted/60 flex snap-start flex-col gap-1 rounded-lg border border-t-4 px-3 py-2\"\n      style={style}\n      data-slot=\"kanban-column-header\"\n      data-column={column.key}\n      data-wip={wip ?? undefined}\n    >\n      <div className=\"flex items-center gap-2\">\n        {column.icon && <Icon name={column.icon} className=\"text-muted-foreground size-4\" />}\n        <h3 id={id} className=\"min-w-0 truncate text-sm font-semibold\">\n          {column.label}\n        </h3>\n        <Badge\n          variant=\"secondary\"\n          className={cn(\n            'h-5 px-1.5 tabular-nums',\n            wip === 'over' && 'bg-destructive/15 text-destructive',\n            wip === 'full' && 'bg-warning/15 text-warning',\n          )}\n          title={countLabel}\n        >\n          <span aria-hidden=\"true\">\n            {column.wipLimit !== undefined ? `${column.count}/${column.wipLimit}` : shown}\n          </span>\n          <span className=\"sr-only\">{countLabel}</span>\n        </Badge>\n        <div className=\"ms-auto flex items-center\">\n          {creatable && (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon-xs\"\n              aria-label={t('kanban.add_card', { column: column.label }, 'Add a card to :column')}\n              title={t('kanban.add_card', { column: column.label }, 'Add a card to :column')}\n              onClick={onCreate}\n            >\n              <PlusIcon aria-hidden=\"true\" />\n            </Button>\n          )}\n          {column.collapsible && (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon-xs\"\n              aria-label={toggleLabel}\n              title={toggleLabel}\n              aria-expanded={true}\n              onClick={onToggle}\n            >\n              <ChevronsRightLeftIcon aria-hidden=\"true\" />\n            </Button>\n          )}\n        </div>\n      </div>\n      {column.description && (\n        <p className=\"text-muted-foreground line-clamp-2 text-xs\">{column.description}</p>\n      )}\n      {wip === 'over' && (\n        <p className=\"text-destructive text-xs\">\n          {t('kanban.wip_over', { limit: column.wipLimit ?? 0 }, 'Over the limit of :limit cards')}\n        </p>\n      )}\n      {wip === 'full' && column.wipStrict && (\n        <p className=\"text-muted-foreground text-xs\">\n          {t('kanban.wip_full', {}, 'This column is full')}\n        </p>\n      )}\n    </div>\n  )\n}\n\nfunction LaneHeader({\n  lane,\n  id,\n  count,\n  collapsed,\n  onToggle,\n  t,\n}: {\n  lane: KanbanLaneSchema\n  id: string\n  count: number\n  collapsed: boolean\n  onToggle: () => void\n  t: Translate\n}) {\n  return (\n    <div\n      className=\"flex items-center gap-2 pt-2\"\n      style={{ gridColumn: '1 / -1' }}\n      data-slot=\"kanban-lane\"\n      data-lane={lane.key}\n    >\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        aria-expanded={!collapsed}\n        aria-label={\n          collapsed\n            ? t('kanban.expand_lane', { lane: lane.label }, 'Expand row :lane')\n            : t('kanban.collapse_lane', { lane: lane.label }, 'Collapse row :lane')\n        }\n        onClick={onToggle}\n      >\n        <ChevronRightIcon\n          className={cn(\n            'transition-transform rtl:rotate-180',\n            !collapsed && 'rotate-90 rtl:rotate-90',\n          )}\n          aria-hidden=\"true\"\n        />\n      </Button>\n      {lane.avatar ? (\n        <Avatar className=\"size-6\">\n          <AvatarImage src={lane.avatar} alt=\"\" />\n          <AvatarFallback>{kanbanInitials(lane.label)}</AvatarFallback>\n        </Avatar>\n      ) : (\n        lane.icon && <Icon name={lane.icon} className=\"text-muted-foreground size-4\" />\n      )}\n      <span id={id} className=\"text-sm font-semibold\">\n        {lane.label}\n      </span>\n      <Badge variant=\"secondary\" className=\"h-5 px-1.5 tabular-nums\">\n        {count}\n      </Badge>\n    </div>\n  )\n}\n\nfunction KanbanCard({\n  card,\n  board,\n  token,\n  current,\n  picked,\n  saving,\n  describedBy,\n  formatter,\n  t,\n  setRef,\n  onFocus,\n  onKeyDown,\n  onOpen,\n}: {\n  card: KanbanCardSchema\n  board: KanbanSchema\n  token: string\n  current: boolean\n  picked: 'keyboard' | 'pointer' | undefined\n  saving: boolean\n  describedBy: string\n  formatter: LocaleFormatter\n  t: Translate\n  setRef: (element: HTMLElement | null) => void\n  onFocus: () => void\n  onKeyDown: (event: KeyboardEvent<HTMLElement>) => void\n  onOpen: () => void\n}) {\n  const titleId = useId()\n  const opens = card.clickable !== false && Boolean(card.url || board.cardAction)\n  const assignees = card.assignees ?? []\n  const shownAssignees = assignees.slice(0, 3)\n\n  return (\n    <li\n      className=\"relative\"\n      data-slot=\"kanban-card\"\n      data-key={card.key}\n      data-movable={board.movable && card.movable !== false ? undefined : 'false'}\n      data-picked={picked}\n      data-saving={saving ? '' : undefined}\n    >\n      <div\n        ref={setRef}\n        role=\"button\"\n        tabIndex={current ? 0 : -1}\n        aria-labelledby={titleId}\n        aria-describedby={describedBy}\n        aria-disabled={opens ? undefined : true}\n        data-slot=\"kanban-card-body\"\n        className={cn(\n          'bg-card text-card-foreground focus-visible:ring-ring/50 flex touch-manipulation flex-col gap-2 overflow-hidden rounded-lg border p-3 text-start shadow-xs outline-none select-none focus-visible:ring-[3px]',\n          opens && 'hover:border-ring/60 cursor-pointer',\n          card.color && 'border-s-4',\n        )}\n        style={card.color ? { borderInlineStartColor: cssColor(card.color) } : undefined}\n        onFocus={(event) => event.target === event.currentTarget && onFocus()}\n        onKeyDown={onKeyDown}\n        onClick={() => opens && onOpen()}\n      >\n        {card.coverImage && (\n          <img\n            src={card.coverImage}\n            alt={card.coverImageAlt ?? ''}\n            loading=\"lazy\"\n            draggable={false}\n            className=\"-mx-3 -mt-3 h-32 w-[calc(100%+1.5rem)] max-w-none object-cover\"\n          />\n        )}\n        <span\n          id={titleId}\n          className={cn('text-sm leading-snug font-medium', card.actions && 'pe-7')}\n        >\n          {card.title}\n        </span>\n        {card.description && (\n          <p className=\"text-muted-foreground line-clamp-3 text-xs\">{card.description}</p>\n        )}\n        {card.badges && card.badges.length > 0 && (\n          <div className=\"flex flex-wrap gap-1\">\n            {card.badges.map((badge, index) => (\n              <Badge\n                key={index}\n                variant=\"outline\"\n                title={badge.tooltip}\n                className={colorClass(badgeColorClasses, badge.color, 'gray')}\n              >\n                {badge.icon && <Icon name={badge.icon} />}\n                {badge.label}\n              </Badge>\n            ))}\n          </div>\n        )}\n        {card.schema && card.schema.length > 0 && (\n          <SchemaRenderer components={card.schema} className=\"gap-2 text-xs\" />\n        )}\n        {card.progress !== undefined && (\n          <div\n            role=\"progressbar\"\n            aria-valuemin={0}\n            aria-valuemax={100}\n            aria-valuenow={Math.round(card.progress)}\n            aria-label={t(\n              'kanban.progress',\n              { percent: formatter.percent(card.progress / 100) },\n              ':percent complete',\n            )}\n            className=\"bg-muted h-1.5 overflow-hidden rounded-full\"\n          >\n            <div\n              className=\"bg-primary h-full rounded-full\"\n              style={{ width: `${card.progress}%` }}\n            />\n          </div>\n        )}\n        {(card.dueDate || assignees.length > 0) && (\n          <div className=\"flex items-center gap-2 text-xs\">\n            {card.dueDate && (\n              <span\n                className={cn(\n                  'inline-flex items-center gap-1',\n                  card.overdue ? 'text-destructive font-medium' : 'text-muted-foreground',\n                )}\n              >\n                <CalendarIcon className=\"size-3.5\" aria-hidden=\"true\" />\n                <span className=\"sr-only\">\n                  {t('kanban.due', { date: formatter.date(card.dueDate) }, 'Due :date')}\n                </span>\n                <time dateTime={card.dueDate} aria-hidden=\"true\">\n                  {formatter.date(card.dueDate)}\n                </time>\n                {card.overdue && (\n                  <span className=\"sr-only\">{t('kanban.overdue', {}, 'Overdue')}</span>\n                )}\n              </span>\n            )}\n            {assignees.length > 0 && (\n              <div className=\"ms-auto flex items-center\">\n                <span className=\"sr-only\">\n                  {t(\n                    'kanban.assignees',\n                    { names: formatter.list(assignees.map((assignee) => assignee.name)) },\n                    'Assigned to :names',\n                  )}\n                </span>\n                <div className=\"flex -space-x-1.5 rtl:space-x-reverse\" aria-hidden=\"true\">\n                  {shownAssignees.map((assignee, index) => (\n                    <Avatar key={index} className=\"ring-card size-6 ring-2\" title={assignee.name}>\n                      {assignee.avatar && <AvatarImage src={assignee.avatar} alt=\"\" />}\n                      <AvatarFallback className=\"text-[0.625rem]\">\n                        {kanbanInitials(assignee.name)}\n                      </AvatarFallback>\n                    </Avatar>\n                  ))}\n                  {assignees.length > shownAssignees.length && (\n                    <span className=\"bg-muted ring-card flex size-6 items-center justify-center rounded-full text-[0.625rem] font-medium ring-2\">\n                      {t(\n                        'kanban.more_assignees',\n                        { count: assignees.length - shownAssignees.length },\n                        '+:count',\n                      )}\n                    </span>\n                  )}\n                </div>\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n      {card.actions && card.actions.length > 0 && (\n        <div className=\"absolute end-1.5 top-1.5\" data-kanban-no-drag=\"\">\n          <ActionList\n            actions={card.actions}\n            context={{ token, component: board.actionComponent, record: card.key }}\n            size=\"xs\"\n          />\n        </div>\n      )}\n    </li>\n  )\n}\n"],"mappings":"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"}

package/dist/components/layout/actions.js

@@ -0,0 +1,40 @@
+import { cn } from "../../lib/utils.js";
+import { extraProps } from "../../lib/attributes.js";
+import { ActionList } from "../actions/action-list.js";
+import { useFieldActionContext } from "../schema/field-actions.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/layout/actions.tsx
+const JUSTIFY = {
+	start: "justify-start",
+	center: "justify-center",
+	end: "justify-end",
+	between: "justify-between",
+	justify: "justify-between"
+};
+const VERTICAL = {
+	start: "justify-start",
+	center: "justify-center",
+	end: "justify-end"
+};
+/**
+* `Actions::make([...])`: a row of buttons placed freely in a form or infolist. They run in
+* the component's field context, so `$set()` in an action updates the surrounding form.
+*/
+function ActionsComponent({ component }) {
+	const context = useFieldActionContext(component);
+	const stretch = component.fullWidth || component.alignment === "justify";
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "schema-actions",
+		"data-alignment": component.alignment ?? "start",
+		...extraProps(component.extraAttributes, cn("flex h-full flex-col", component.verticalAlignment && VERTICAL[component.verticalAlignment])),
+		children: /* @__PURE__ */ jsx(ActionList, {
+			actions: component.actions ?? [],
+			context,
+			className: cn("w-full", JUSTIFY[component.alignment ?? "start"], stretch && "[&>*]:flex-1")
+		})
+	});
+}
+//#endregion
+export { ActionsComponent };
+
+//# sourceMappingURL=actions.js.map

package/dist/components/layout/actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions.js","names":[],"sources":["../../../src/components/layout/actions.tsx"],"sourcesContent":["import type { ActionsComponentSchema } from '@alfakit/core'\nimport { extraProps } from '../../lib/attributes'\nimport { cn } from '../../lib/utils'\nimport { ActionList } from '../actions/action-list'\nimport { useFieldActionContext } from '../schema/field-actions'\n\nconst JUSTIFY: Record<string, string> = {\n  start: 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n  between: 'justify-between',\n  justify: 'justify-between',\n}\n\nconst VERTICAL: Record<string, string> = {\n  start: 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n}\n\n/**\n * `Actions::make([...])`: a row of buttons placed freely in a form or infolist. They run in\n * the component's field context, so `$set()` in an action updates the surrounding form.\n */\nexport function ActionsComponent({ component }: { component: ActionsComponentSchema }) {\n  const context = useFieldActionContext(component)\n  const stretch = component.fullWidth || component.alignment === 'justify'\n\n  return (\n    <div\n      data-slot=\"schema-actions\"\n      data-alignment={component.alignment ?? 'start'}\n      {...extraProps(\n        component.extraAttributes,\n        cn(\n          'flex h-full flex-col',\n          component.verticalAlignment && VERTICAL[component.verticalAlignment],\n        ),\n      )}\n    >\n      <ActionList\n        actions={component.actions ?? []}\n        context={context}\n        className={cn('w-full', JUSTIFY[component.alignment ?? 'start'], stretch && '[&>*]:flex-1')}\n      />\n    </div>\n  )\n}\n"],"mappings":";;;;;;AAMA,MAAM,UAAkC;CACtC,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,SAAS;AACX;AAEA,MAAM,WAAmC;CACvC,OAAO;CACP,QAAQ;CACR,KAAK;AACP;;;;;AAMA,SAAgB,iBAAiB,EAAE,aAAoD;CACrF,MAAM,UAAU,sBAAsB,SAAS;CAC/C,MAAM,UAAU,UAAU,aAAa,UAAU,cAAc;CAE/D,OACE,oBAAC,OAAD;EACE,aAAU;EACV,kBAAgB,UAAU,aAAa;EACvC,GAAI,WACF,UAAU,iBACV,GACE,wBACA,UAAU,qBAAqB,SAAS,UAAU,kBACpD,CACF;EAEA,UAAA,oBAAC,YAAD;GACE,SAAS,UAAU,WAAW,CAAC;GACtB;GACT,WAAW,GAAG,UAAU,QAAQ,UAAU,aAAa,UAAU,WAAW,cAAc;EAC3F,CAAA;CACE,CAAA;AAET"}

package/dist/components/layout/component-context.d.ts

@@ -0,0 +1,13 @@
+import { BaseComponent, SchemaComponentContextValue } from "@alfakit/core";
+//#region src/components/layout/component-context.d.ts
+/**
+ * What a custom schema component can read about its schema: other components' state
+ * (`get('../other')`, like PHP's `$get()`), the whole form `state`, and the `operation`,
+ * `recordKey`, `record` attributes and `data` the PHP component exposes with
+ * `exposeContext()`. Outside a form (infolists) `state` is `null`.
+ */
+export declare function useSchemaComponentContext(component: Pick<BaseComponent, 'context'> & {
+  statePath?: string;
+}): SchemaComponentContextValue;
+//#endregion
+//# sourceMappingURL=component-context.d.ts.map

package/dist/components/layout/component-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-context.d.ts","names":[],"sources":["../../../src/components/layout/component-context.ts"],"mappings":";;;;;;;;wBAiBgB,0BACd,WAAW,KAAK;EAA8B;IAC7C"}

package/dist/components/layout/component-context.js

@@ -0,0 +1,28 @@
+import { useStoreSelector } from "../../hooks/use-store.js";
+import { useOptionalFormStore } from "../form/form-context.js";
+import { createSchemaComponentContext } from "@alfakit/core";
+import { useMemo } from "react";
+//#region src/components/layout/component-context.ts
+const NO_FORM = {
+	get: () => null,
+	subscribe: () => () => {}
+};
+/**
+* What a custom schema component can read about its schema: other components' state
+* (`get('../other')`, like PHP's `$get()`), the whole form `state`, and the `operation`,
+* `recordKey`, `record` attributes and `data` the PHP component exposes with
+* `exposeContext()`. Outside a form (infolists) `state` is `null`.
+*/
+function useSchemaComponentContext(component) {
+	const form = useOptionalFormStore();
+	const state = useStoreSelector(form?.store ?? NO_FORM, (value) => value ? value.values : null);
+	return useMemo(() => createSchemaComponentContext(component.context, state, component.statePath), [
+		component.context,
+		component.statePath,
+		state
+	]);
+}
+//#endregion
+export { useSchemaComponentContext };
+
+//# sourceMappingURL=component-context.js.map

package/dist/components/layout/component-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-context.js","names":[],"sources":["../../../src/components/layout/component-context.ts"],"sourcesContent":["import type { BaseComponent, FormState, SchemaComponentContextValue, Store } from '@alfakit/core'\nimport { createSchemaComponentContext } from '@alfakit/core'\nimport { useMemo } from 'react'\nimport { useStoreSelector } from '../../hooks/use-store'\nimport { useOptionalFormStore } from '../form/form-context'\n\nconst NO_FORM: Pick<Store<FormState | null>, 'get' | 'subscribe'> = {\n  get: () => null,\n  subscribe: () => () => {},\n}\n\n/**\n * What a custom schema component can read about its schema: other components' state\n * (`get('../other')`, like PHP's `$get()`), the whole form `state`, and the `operation`,\n * `recordKey`, `record` attributes and `data` the PHP component exposes with\n * `exposeContext()`. Outside a form (infolists) `state` is `null`.\n */\nexport function useSchemaComponentContext(\n  component: Pick<BaseComponent, 'context'> & { statePath?: string },\n): SchemaComponentContextValue {\n  const form = useOptionalFormStore()\n  const state = useStoreSelector<FormState | null, Record<string, unknown> | null>(\n    form?.store ?? NO_FORM,\n    (value) => (value ? value.values : null),\n  )\n\n  return useMemo(\n    () => createSchemaComponentContext(component.context, state, component.statePath),\n    [component.context, component.statePath, state],\n  )\n}\n"],"mappings":";;;;;AAMA,MAAM,UAA8D;CAClE,WAAW;CACX,uBAAuB,CAAC;AAC1B;;;;;;;AAQA,SAAgB,0BACd,WAC6B;CAC7B,MAAM,OAAO,qBAAqB;CAClC,MAAM,QAAQ,iBACZ,MAAM,SAAS,UACd,UAAW,QAAQ,MAAM,SAAS,IACrC;CAEA,OAAO,cACC,6BAA6B,UAAU,SAAS,OAAO,UAAU,SAAS,GAChF;EAAC,UAAU;EAAS,UAAU;EAAW;CAAK,CAChD;AACF"}

package/dist/components/layout/deferred.js

@@ -0,0 +1,135 @@
+import { usePanel, useT } from "../../context.js";
+import { usePageActionContext } from "../actions/action-context.js";
+import { cn } from "../../lib/utils.js";
+import { useStoreSelector } from "../../hooks/use-store.js";
+import { useOptionalFormStore } from "../form/form-context.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { createStore, deferredHasErrors, isDeferredPlaceholder, loadDeferredBadge, loadDeferredComponent, mergeDeferredComponent, reportRequestError, whenVisible } from "@alfakit/core";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/layout/deferred.tsx
+const emptyFormState = createStore({ errors: {} });
+/**
+* `deferLoading()`: while `component` is a placeholder, returns it unchanged with a `ref`
+* for the skeleton; once the skeleton is in view (or a field inside has an error) the
+* component is loaded and returned in full. Inside a form it is merged into the form's
+* tree, so live fields inside work as usual. SSR renders the skeleton.
+*/
+function useDeferredComponent(component) {
+	const form = useOptionalFormStore();
+	const panel = usePanel();
+	const page = usePageActionContext();
+	const ref = useRef(null);
+	const [loaded, setLoaded] = useState(null);
+	const placeholder = isDeferredPlaceholder(component);
+	const hasErrors = useStoreSelector(form?.store ?? emptyFormState, (state) => placeholder ? deferredHasErrors(component, state.errors) : false);
+	const url = panel?.endpoints?.schemaDeferred;
+	useEffect(() => {
+		if (!placeholder || loaded || !url) return;
+		let cancelled = false;
+		const controller = new AbortController();
+		const load = () => {
+			loadDeferredComponent({
+				url,
+				token: page.token,
+				key: component.key,
+				form,
+				signal: controller.signal
+			}).then((full) => {
+				if (cancelled) return;
+				if (!form || !mergeDeferredComponent(form, full)) setLoaded(full);
+			}).catch((error) => {
+				if (error.name !== "AbortError") reportRequestError(error);
+			});
+		};
+		const stop = hasErrors ? (load(), () => {}) : whenVisible(ref.current, load);
+		return () => {
+			cancelled = true;
+			stop();
+			controller.abort();
+		};
+	}, [
+		placeholder,
+		loaded,
+		url,
+		hasErrors,
+		component.key,
+		form,
+		page.token
+	]);
+	const resolved = placeholder && loaded ? loaded : component;
+	return {
+		component: resolved,
+		deferred: isDeferredPlaceholder(resolved),
+		ref
+	};
+}
+/** The skeleton of a deferred child schema. */
+function DeferredSkeleton({ ref, className }) {
+	const t = useT();
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "deferred-schema",
+		role: "status",
+		"aria-busy": "true",
+		className: cn("flex flex-col gap-3", className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: t("loading", {}, "Loading…")
+			}),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/4" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full" }),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-2/3" })
+		]
+	});
+}
+/**
+* `Tab::deferBadge()`: the tab's badge, loaded after the page rendered. Returns the
+* tab's own badge when it isn't deferred.
+*/
+function useDeferredBadge(tab) {
+	const form = useOptionalFormStore();
+	const panel = usePanel();
+	const page = usePageActionContext();
+	const [badge, setBadge] = useState(null);
+	const url = panel?.endpoints?.schemaDeferred;
+	useEffect(() => {
+		if (!tab.badgeDeferred || !url) return;
+		const controller = new AbortController();
+		loadDeferredBadge({
+			url,
+			token: page.token,
+			key: tab.key,
+			form,
+			signal: controller.signal
+		}).then(setBadge).catch((error) => {
+			if (error.name !== "AbortError") reportRequestError(error);
+		});
+		return () => controller.abort();
+	}, [
+		tab.badgeDeferred,
+		tab.key,
+		url,
+		form,
+		page.token
+	]);
+	if (tab.badgeDeferred) return badge ?? {};
+	return {
+		badge: tab.badge,
+		badgeColor: tab.badgeColor,
+		badgeTooltip: tab.badgeTooltip
+	};
+}
+/** Renders `children(component)` once a deferred component has loaded, a skeleton before. */
+function DeferredSchema({ component, className, children }) {
+	const { component: resolved, deferred, ref } = useDeferredComponent(component);
+	return deferred ? /* @__PURE__ */ jsx(DeferredSkeleton, {
+		ref,
+		className
+	}) : /* @__PURE__ */ jsx(Fragment$1, { children: children(resolved) });
+}
+//#endregion
+export { DeferredSchema, DeferredSkeleton, useDeferredBadge, useDeferredComponent };
+
+//# sourceMappingURL=deferred.js.map

package/dist/components/layout/deferred.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"deferred.js","names":[],"sources":["../../../src/components/layout/deferred.tsx"],"sourcesContent":["import type { DeferredBadgeSchema, SchemaComponent } from '@alfakit/core'\nimport {\n  createStore,\n  deferredHasErrors,\n  isDeferredPlaceholder,\n  loadDeferredBadge,\n  loadDeferredComponent,\n  mergeDeferredComponent,\n  reportRequestError,\n  whenVisible,\n  type FormState,\n} from '@alfakit/core'\nimport { useEffect, useRef, useState, type ReactNode, type RefObject } from 'react'\nimport { usePanel, useT } from '../../context'\nimport { useStoreSelector } from '../../hooks/use-store'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { useOptionalFormStore } from '../form/form-context'\nimport { Skeleton } from '../ui/skeleton'\n\nconst emptyFormState = createStore<Pick<FormState, 'errors'>>({ errors: {} })\n\n/**\n * `deferLoading()`: while `component` is a placeholder, returns it unchanged with a `ref`\n * for the skeleton; once the skeleton is in view (or a field inside has an error) the\n * component is loaded and returned in full. Inside a form it is merged into the form's\n * tree, so live fields inside work as usual. SSR renders the skeleton.\n */\nexport function useDeferredComponent<T extends SchemaComponent>(\n  component: T,\n): { component: T; deferred: boolean; ref: RefObject<HTMLDivElement | null> } {\n  const form = useOptionalFormStore()\n  const panel = usePanel()\n  const page = usePageActionContext()\n  const ref = useRef<HTMLDivElement | null>(null)\n  const [loaded, setLoaded] = useState<T | null>(null)\n  const placeholder = isDeferredPlaceholder(component)\n  const hasErrors = useStoreSelector(form?.store ?? emptyFormState, (state) =>\n    placeholder ? deferredHasErrors(component, state.errors) : false,\n  )\n  const url = panel?.endpoints?.schemaDeferred\n\n  useEffect(() => {\n    if (!placeholder || loaded || !url) return\n\n    let cancelled = false\n    const controller = new AbortController()\n\n    const load = () => {\n      loadDeferredComponent<T>({\n        url,\n        token: page.token,\n        key: component.key,\n        form,\n        signal: controller.signal,\n      })\n        .then((full) => {\n          if (cancelled) return\n          // In a form, the store's tree is updated and `component` arrives in full.\n          if (!form || !mergeDeferredComponent(form, full)) setLoaded(full)\n        })\n        .catch((error: Error) => {\n          if (error.name !== 'AbortError') reportRequestError(error)\n        })\n    }\n\n    const stop = hasErrors ? (load(), () => {}) : whenVisible(ref.current, load)\n\n    return () => {\n      cancelled = true\n      stop()\n      controller.abort()\n    }\n  }, [placeholder, loaded, url, hasErrors, component.key, form, page.token])\n\n  const resolved = placeholder && loaded ? loaded : component\n\n  return { component: resolved, deferred: isDeferredPlaceholder(resolved), ref }\n}\n\n/** The skeleton of a deferred child schema. */\nexport function DeferredSkeleton({\n  ref,\n  className,\n}: {\n  ref: RefObject<HTMLDivElement | null>\n  className?: string\n}) {\n  const t = useT()\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"deferred-schema\"\n      role=\"status\"\n      aria-busy=\"true\"\n      className={cn('flex flex-col gap-3', className)}\n    >\n      <span className=\"sr-only\">{t('loading', {}, 'Loading…')}</span>\n      <Skeleton className=\"h-4 w-1/4\" />\n      <Skeleton className=\"h-9 w-full\" />\n      <Skeleton className=\"h-9 w-2/3\" />\n    </div>\n  )\n}\n\n/**\n * `Tab::deferBadge()`: the tab's badge, loaded after the page rendered. Returns the\n * tab's own badge when it isn't deferred.\n */\nexport function useDeferredBadge(tab: {\n  key: string\n  badgeDeferred?: boolean\n  badge?: string | number\n  badgeColor?: string\n  badgeTooltip?: string\n}): DeferredBadgeSchema {\n  const form = useOptionalFormStore()\n  const panel = usePanel()\n  const page = usePageActionContext()\n  const [badge, setBadge] = useState<DeferredBadgeSchema | null>(null)\n  const url = panel?.endpoints?.schemaDeferred\n\n  useEffect(() => {\n    if (!tab.badgeDeferred || !url) return\n\n    const controller = new AbortController()\n\n    loadDeferredBadge({ url, token: page.token, key: tab.key, form, signal: controller.signal })\n      .then(setBadge)\n      .catch((error: Error) => {\n        if (error.name !== 'AbortError') reportRequestError(error)\n      })\n\n    return () => controller.abort()\n  }, [tab.badgeDeferred, tab.key, url, form, page.token])\n\n  if (tab.badgeDeferred) return badge ?? {}\n\n  return { badge: tab.badge, badgeColor: tab.badgeColor, badgeTooltip: tab.badgeTooltip }\n}\n\n/** Renders `children(component)` once a deferred component has loaded, a skeleton before. */\nexport function DeferredSchema<T extends SchemaComponent>({\n  component,\n  className,\n  children,\n}: {\n  component: T\n  className?: string\n  children: (component: T) => ReactNode\n}) {\n  const { component: resolved, deferred, ref } = useDeferredComponent(component)\n\n  return deferred ? <DeferredSkeleton ref={ref} className={className} /> : <>{children(resolved)}</>\n}\n"],"mappings":"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"}

package/dist/components/layout/elements.d.ts

@@ -0,0 +1,23 @@
+import { CalloutSchema, EmptyStateComponentSchema, FlexSchema, IconSchema, ImageSchema, UnorderedListSchema } from "@alfakit/core";
+import { ReactElement } from "react";
+//#region src/components/layout/elements.d.ts
+export declare function FlexComponent({ component }: {
+  component: FlexSchema;
+}): import("react").JSX.Element;
+export declare function CalloutComponent({ component }: {
+  component: CalloutSchema;
+}): import("react").JSX.Element;
+export declare function EmptyStateComponent({ component }: {
+  component: EmptyStateComponentSchema;
+}): import("react").JSX.Element;
+export declare function IconComponent({ component }: {
+  component: IconSchema;
+}): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function ImageComponent({ component }: {
+  component: ImageSchema;
+}): import("react").JSX.Element;
+export declare function UnorderedListComponent({ component }: {
+  component: UnorderedListSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=elements.d.ts.map

package/dist/components/layout/elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.d.ts","names":[],"sources":["../../../src/components/layout/elements.tsx"],"mappings":";;;wBA+BgB,gBAAgB;EAAe,WAAW;oBAAY,IAAA;wBAqCtD,mBAAmB;EAAe,WAAW;oBAAe,IAAA;wBA0D5D,sBAAsB;EAAe,WAAW;oBAA2B,IAAA;wBAkD3E,gBAAgB;EAAe,WAAW;IAAY,+CAAA;wBA2BtD,iBAAiB;EAAe,WAAW;oBAAa,IAAA;wBAoCxD,yBAAyB;EAAe,WAAW;oBAAqB,IAAA"}

package/dist/components/layout/elements.js

@@ -0,0 +1,183 @@
+import { usePageActionContext } from "../actions/action-context.js";
+import { cn } from "../../lib/utils.js";
+import { colorClass, iconBackgroundColorClasses, iconSizeClasses, textColorClasses } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
+import { extraProps } from "../../lib/attributes.js";
+import { ActionList } from "../actions/action-list.js";
+import { RenderComponent } from "../schema/schema-renderer.js";
+import { MixedContent } from "./mixed-content.js";
+import { actionsAlignmentClass, flexItemClasses, flexLayoutClasses, schemaGapClass } from "@alfakit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/layout/elements.tsx
+function FlexComponent({ component }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "flex",
+		...extraProps(component.extraAttributes, cn(flexLayoutClasses(component), schemaGapClass(component))),
+		children: (component.schema ?? []).map((child) => /* @__PURE__ */ jsx("div", {
+			"data-slot": "flex-item",
+			className: flexItemClasses(child),
+			children: /* @__PURE__ */ jsx(RenderComponent, { component: child })
+		}, child.key))
+	});
+}
+const CALLOUT_COLORS = {
+	primary: "border-primary/30 bg-primary/5 [&_[data-slot=callout-icon]]:text-primary",
+	secondary: "border-border bg-secondary [&_[data-slot=callout-icon]]:text-secondary-foreground",
+	success: "border-success/30 bg-success/5 [&_[data-slot=callout-icon]]:text-success",
+	warning: "border-warning/40 bg-warning/10 [&_[data-slot=callout-icon]]:text-warning",
+	danger: "border-destructive/30 bg-destructive/5 [&_[data-slot=callout-icon]]:text-destructive",
+	info: "border-info/30 bg-info/5 [&_[data-slot=callout-icon]]:text-info",
+	gray: "border-border bg-muted/40 [&_[data-slot=callout-icon]]:text-muted-foreground"
+};
+const CALLOUT_ICON_SIZES = {
+	xs: "size-4",
+	sm: "size-4",
+	md: "size-5",
+	lg: "size-6",
+	xl: "size-7",
+	"2xl": "size-8"
+};
+function CalloutComponent({ component }) {
+	const context = usePageActionContext();
+	const tone = component.color ?? component.status;
+	const iconColor = component.iconColor ?? (component.color ? void 0 : component.status);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "callout",
+		"data-color": component.color ?? "gray",
+		"data-status": component.status,
+		role: tone === "danger" || tone === "warning" ? "alert" : "note",
+		...extraProps(component.extraAttributes, cn("flex items-start gap-3 rounded-lg border p-4 text-sm", colorClass(CALLOUT_COLORS, component.color))),
+		children: [
+			component.icon && /* @__PURE__ */ jsx("span", {
+				"data-slot": "callout-icon",
+				className: "mt-0.5 shrink-0",
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: component.icon,
+					className: cn(component.iconSize && CALLOUT_ICON_SIZES[component.iconSize] || "size-5", iconColor && colorClass(textColorClasses, iconColor))
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-1",
+				children: [
+					component.heading && /* @__PURE__ */ jsx("p", {
+						className: "leading-6 font-semibold",
+						children: component.heading
+					}),
+					component.description && /* @__PURE__ */ jsx("div", {
+						className: "text-muted-foreground alfakit-prose",
+						dangerouslySetInnerHTML: { __html: component.description }
+					}),
+					component.actions && component.actions.length > 0 && /* @__PURE__ */ jsx(ActionList, {
+						actions: component.actions,
+						context,
+						size: "sm",
+						className: cn("mt-2", actionsAlignmentClass(component.footerActionsAlignment))
+					}),
+					/* @__PURE__ */ jsx(MixedContent, {
+						items: component.footer,
+						name: "callout-footer",
+						className: "mt-2"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(MixedContent, {
+				items: component.controls,
+				name: "callout-controls",
+				className: "-me-1 -mt-1 shrink-0 gap-1"
+			})
+		]
+	});
+}
+function EmptyStateComponent({ component }) {
+	const context = usePageActionContext();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "empty-state",
+		...extraProps(component.extraAttributes, cn("flex flex-col items-center justify-center gap-3 px-6 py-10 text-center", component.contained && "rounded-xl border border-dashed")),
+		children: [
+			component.icon && /* @__PURE__ */ jsx("div", {
+				className: cn("flex size-12 items-center justify-center rounded-full", colorClass(iconBackgroundColorClasses, component.color)),
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: component.icon,
+					className: "size-6"
+				})
+			}),
+			component.heading && /* @__PURE__ */ jsx("h3", {
+				className: "text-base font-semibold",
+				children: component.heading
+			}),
+			component.description && /* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground max-w-md text-sm",
+				dangerouslySetInnerHTML: { __html: component.description }
+			}),
+			component.actions && component.actions.length > 0 && /* @__PURE__ */ jsx(ActionList, {
+				actions: component.actions,
+				context,
+				className: "mt-2 justify-center"
+			}),
+			/* @__PURE__ */ jsx(MixedContent, {
+				items: component.footer,
+				name: "empty-state-footer",
+				className: "justify-center"
+			})
+		]
+	});
+}
+function withTooltip(element, tooltip) {
+	if (!tooltip) return element;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: element
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })] });
+}
+function IconComponent({ component }) {
+	return withTooltip(/* @__PURE__ */ jsx("span", {
+		"data-slot": "icon",
+		...extraProps(component.extraAttributes, "inline-flex"),
+		"aria-label": component.tooltip,
+		role: component.tooltip ? "img" : void 0,
+		children: /* @__PURE__ */ jsx(Icon, {
+			name: component.icon,
+			"aria-hidden": true,
+			className: cn(iconSizeClasses[component.size ?? "md"] ?? "size-5", component.color && textColorClasses[component.color])
+		})
+	}), component.tooltip);
+}
+const IMAGE_ALIGNMENT = {
+	start: "justify-start",
+	center: "justify-center",
+	end: "justify-end"
+};
+function ImageComponent({ component }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "image",
+		...extraProps(component.extraAttributes, cn("flex", IMAGE_ALIGNMENT[component.alignment ?? "start"] ?? "justify-start")),
+		children: withTooltip(/* @__PURE__ */ jsx("img", {
+			src: component.url,
+			alt: component.alt,
+			loading: "lazy",
+			className: cn("max-w-full object-cover", component.circular ? "rounded-full" : "rounded-md"),
+			style: {
+				width: component.imageWidth ?? void 0,
+				height: component.imageHeight ?? void 0
+			}
+		}), component.tooltip)
+	});
+}
+const LIST_SIZES = {
+	xs: "text-xs",
+	sm: "text-sm",
+	md: "text-base",
+	lg: "text-lg"
+};
+function UnorderedListComponent({ component }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "unordered-list",
+		...extraProps(component.extraAttributes, cn("marker:text-muted-foreground flex list-disc flex-col gap-1 ps-5", LIST_SIZES[component.size ?? "sm"] ?? "text-sm")),
+		children: (component.schema ?? []).map((child) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(RenderComponent, { component: child }) }, child.key))
+	});
+}
+//#endregion
+export { CalloutComponent, EmptyStateComponent, FlexComponent, IconComponent, ImageComponent, UnorderedListComponent };
+
+//# sourceMappingURL=elements.js.map

package/dist/components/layout/elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.js","names":[],"sources":["../../../src/components/layout/elements.tsx"],"sourcesContent":["import type {\n  CalloutSchema,\n  EmptyStateComponentSchema,\n  FlexSchema,\n  IconSchema,\n  ImageSchema,\n  SchemaComponent,\n  UnorderedListSchema,\n} from '@alfakit/core'\nimport {\n  actionsAlignmentClass,\n  flexItemClasses,\n  flexLayoutClasses,\n  schemaGapClass,\n} from '@alfakit/core'\nimport type { ReactElement } from 'react'\nimport { extraProps } from '../../lib/attributes'\nimport {\n  colorClass,\n  iconBackgroundColorClasses,\n  iconSizeClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { usePageActionContext } from '../actions/action-context'\nimport { ActionList } from '../actions/action-list'\nimport { RenderComponent } from '../schema/schema-renderer'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'\nimport { MixedContent } from './mixed-content'\n\nexport function FlexComponent({ component }: { component: FlexSchema }) {\n  return (\n    <div\n      data-slot=\"flex\"\n      {...extraProps(\n        component.extraAttributes,\n        cn(flexLayoutClasses(component), schemaGapClass(component)),\n      )}\n    >\n      {(component.schema ?? []).map((child: SchemaComponent) => (\n        <div key={child.key} data-slot=\"flex-item\" className={flexItemClasses(child)}>\n          <RenderComponent component={child} />\n        </div>\n      ))}\n    </div>\n  )\n}\n\nconst CALLOUT_COLORS: Record<string, string> = {\n  primary: 'border-primary/30 bg-primary/5 [&_[data-slot=callout-icon]]:text-primary',\n  secondary: 'border-border bg-secondary [&_[data-slot=callout-icon]]:text-secondary-foreground',\n  success: 'border-success/30 bg-success/5 [&_[data-slot=callout-icon]]:text-success',\n  warning: 'border-warning/40 bg-warning/10 [&_[data-slot=callout-icon]]:text-warning',\n  danger: 'border-destructive/30 bg-destructive/5 [&_[data-slot=callout-icon]]:text-destructive',\n  info: 'border-info/30 bg-info/5 [&_[data-slot=callout-icon]]:text-info',\n  gray: 'border-border bg-muted/40 [&_[data-slot=callout-icon]]:text-muted-foreground',\n}\n\nconst CALLOUT_ICON_SIZES: Record<string, string> = {\n  xs: 'size-4',\n  sm: 'size-4',\n  md: 'size-5',\n  lg: 'size-6',\n  xl: 'size-7',\n  '2xl': 'size-8',\n}\n\nexport function CalloutComponent({ component }: { component: CalloutSchema }) {\n  const context = usePageActionContext()\n  const tone = component.color ?? component.status\n  // `iconColor()`, or the status colour once `color(null)` removed the background.\n  const iconColor = component.iconColor ?? (component.color ? undefined : component.status)\n\n  return (\n    <div\n      data-slot=\"callout\"\n      data-color={component.color ?? 'gray'}\n      data-status={component.status}\n      role={tone === 'danger' || tone === 'warning' ? 'alert' : 'note'}\n      {...extraProps(\n        component.extraAttributes,\n        cn(\n          'flex items-start gap-3 rounded-lg border p-4 text-sm',\n          colorClass(CALLOUT_COLORS, component.color),\n        ),\n      )}\n    >\n      {component.icon && (\n        <span data-slot=\"callout-icon\" className=\"mt-0.5 shrink-0\">\n          <Icon\n            name={component.icon}\n            className={cn(\n              (component.iconSize && CALLOUT_ICON_SIZES[component.iconSize]) || 'size-5',\n              iconColor && colorClass(textColorClasses, iconColor),\n            )}\n          />\n        </span>\n      )}\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        {component.heading && <p className=\"leading-6 font-semibold\">{component.heading}</p>}\n        {component.description && (\n          <div\n            className=\"text-muted-foreground alfakit-prose\"\n            dangerouslySetInnerHTML={{ __html: component.description }}\n          />\n        )}\n        {component.actions && component.actions.length > 0 && (\n          <ActionList\n            actions={component.actions}\n            context={context}\n            size=\"sm\"\n            className={cn('mt-2', actionsAlignmentClass(component.footerActionsAlignment))}\n          />\n        )}\n        <MixedContent items={component.footer} name=\"callout-footer\" className=\"mt-2\" />\n      </div>\n      <MixedContent\n        items={component.controls}\n        name=\"callout-controls\"\n        className=\"-me-1 -mt-1 shrink-0 gap-1\"\n      />\n    </div>\n  )\n}\n\nexport function EmptyStateComponent({ component }: { component: EmptyStateComponentSchema }) {\n  const context = usePageActionContext()\n\n  return (\n    <div\n      data-slot=\"empty-state\"\n      {...extraProps(\n        component.extraAttributes,\n        cn(\n          'flex flex-col items-center justify-center gap-3 px-6 py-10 text-center',\n          component.contained && 'rounded-xl border border-dashed',\n        ),\n      )}\n    >\n      {component.icon && (\n        <div\n          className={cn(\n            'flex size-12 items-center justify-center rounded-full',\n            colorClass(iconBackgroundColorClasses, component.color),\n          )}\n        >\n          <Icon name={component.icon} className=\"size-6\" />\n        </div>\n      )}\n      {component.heading && <h3 className=\"text-base font-semibold\">{component.heading}</h3>}\n      {component.description && (\n        <div\n          className=\"text-muted-foreground max-w-md text-sm\"\n          dangerouslySetInnerHTML={{ __html: component.description }}\n        />\n      )}\n      {component.actions && component.actions.length > 0 && (\n        <ActionList actions={component.actions} context={context} className=\"mt-2 justify-center\" />\n      )}\n      <MixedContent items={component.footer} name=\"empty-state-footer\" className=\"justify-center\" />\n    </div>\n  )\n}\n\nfunction withTooltip(element: ReactElement, tooltip?: string): ReactElement {\n  if (!tooltip) return element\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{element}</TooltipTrigger>\n      <TooltipContent>{tooltip}</TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport function IconComponent({ component }: { component: IconSchema }) {\n  return withTooltip(\n    <span\n      data-slot=\"icon\"\n      {...extraProps(component.extraAttributes, 'inline-flex')}\n      aria-label={component.tooltip}\n      role={component.tooltip ? 'img' : undefined}\n    >\n      <Icon\n        name={component.icon}\n        aria-hidden\n        className={cn(\n          iconSizeClasses[component.size ?? 'md'] ?? 'size-5',\n          component.color && textColorClasses[component.color],\n        )}\n      />\n    </span>,\n    component.tooltip,\n  )\n}\n\nconst IMAGE_ALIGNMENT: Record<string, string> = {\n  start: 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n}\n\nexport function ImageComponent({ component }: { component: ImageSchema }) {\n  return (\n    <div\n      data-slot=\"image\"\n      {...extraProps(\n        component.extraAttributes,\n        cn('flex', IMAGE_ALIGNMENT[component.alignment ?? 'start'] ?? 'justify-start'),\n      )}\n    >\n      {withTooltip(\n        <img\n          src={component.url}\n          alt={component.alt}\n          loading=\"lazy\"\n          className={cn(\n            'max-w-full object-cover',\n            component.circular ? 'rounded-full' : 'rounded-md',\n          )}\n          style={{\n            width: component.imageWidth ?? undefined,\n            height: component.imageHeight ?? undefined,\n          }}\n        />,\n        component.tooltip,\n      )}\n    </div>\n  )\n}\n\nconst LIST_SIZES: Record<string, string> = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-base',\n  lg: 'text-lg',\n}\n\nexport function UnorderedListComponent({ component }: { component: UnorderedListSchema }) {\n  return (\n    <ul\n      data-slot=\"unordered-list\"\n      {...extraProps(\n        component.extraAttributes,\n        cn(\n          'marker:text-muted-foreground flex list-disc flex-col gap-1 ps-5',\n          LIST_SIZES[component.size ?? 'sm'] ?? 'text-sm',\n        ),\n      )}\n    >\n      {(component.schema ?? []).map((child) => (\n        <li key={child.key}>\n          <RenderComponent component={child} />\n        </li>\n      ))}\n    </ul>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AA+BA,SAAgB,cAAc,EAAE,aAAwC;CACtE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,GAAI,WACF,UAAU,iBACV,GAAG,kBAAkB,SAAS,GAAG,eAAe,SAAS,CAAC,CAC5D;EAEE,WAAA,UAAU,UAAU,CAAC,EAAA,CAAG,KAAK,UAC7B,oBAAC,OAAD;GAAqB,aAAU;GAAY,WAAW,gBAAgB,KAAK;GACzE,UAAA,oBAAC,iBAAD,EAAiB,WAAW,MAAQ,CAAA;EACjC,GAFK,MAAM,GAEX,CACN;CACE,CAAA;AAET;AAEA,MAAM,iBAAyC;CAC7C,SAAS;CACT,WAAW;CACX,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,MAAM;AACR;AAEA,MAAM,qBAA6C;CACjD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;AAEA,SAAgB,iBAAiB,EAAE,aAA2C;CAC5E,MAAM,UAAU,qBAAqB;CACrC,MAAM,OAAO,UAAU,SAAS,UAAU;CAE1C,MAAM,YAAY,UAAU,cAAc,UAAU,QAAQ,KAAA,IAAY,UAAU;CAElF,OACE,qBAAC,OAAD;EACE,aAAU;EACV,cAAY,UAAU,SAAS;EAC/B,eAAa,UAAU;EACvB,MAAM,SAAS,YAAY,SAAS,YAAY,UAAU;EAC1D,GAAI,WACF,UAAU,iBACV,GACE,wDACA,WAAW,gBAAgB,UAAU,KAAK,CAC5C,CACF;EAXF,UAAA;GAaG,UAAU,QACT,oBAAC,QAAD;IAAM,aAAU;IAAe,WAAU;IACvC,UAAA,oBAAC,MAAD;KACE,MAAM,UAAU;KAChB,WAAW,GACR,UAAU,YAAY,mBAAmB,UAAU,aAAc,UAClE,aAAa,WAAW,kBAAkB,SAAS,CACrD;IACD,CAAA;GACG,CAAA;GAER,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACG,UAAU,WAAW,oBAAC,KAAD;MAAG,WAAU;MAA2B,UAAA,UAAU;KAAW,CAAA;KAClF,UAAU,eACT,oBAAC,OAAD;MACE,WAAU;MACV,yBAAyB,EAAE,QAAQ,UAAU,YAAY;KAC1D,CAAA;KAEF,UAAU,WAAW,UAAU,QAAQ,SAAS,KAC/C,oBAAC,YAAD;MACE,SAAS,UAAU;MACV;MACT,MAAK;MACL,WAAW,GAAG,QAAQ,sBAAsB,UAAU,sBAAsB,CAAC;KAC9E,CAAA;KAEH,oBAAC,cAAD;MAAc,OAAO,UAAU;MAAQ,MAAK;MAAiB,WAAU;KAAQ,CAAA;IAC5E;;GACL,oBAAC,cAAD;IACE,OAAO,UAAU;IACjB,MAAK;IACL,WAAU;GACX,CAAA;EACE;;AAET;AAEA,SAAgB,oBAAoB,EAAE,aAAuD;CAC3F,MAAM,UAAU,qBAAqB;CAErC,OACE,qBAAC,OAAD;EACE,aAAU;EACV,GAAI,WACF,UAAU,iBACV,GACE,0EACA,UAAU,aAAa,iCACzB,CACF;EARF,UAAA;GAUG,UAAU,QACT,oBAAC,OAAD;IACE,WAAW,GACT,yDACA,WAAW,4BAA4B,UAAU,KAAK,CACxD;IAEA,UAAA,oBAAC,MAAD;KAAM,MAAM,UAAU;KAAM,WAAU;IAAU,CAAA;GAC7C,CAAA;GAEN,UAAU,WAAW,oBAAC,MAAD;IAAI,WAAU;IAA2B,UAAA,UAAU;GAAY,CAAA;GACpF,UAAU,eACT,oBAAC,OAAD;IACE,WAAU;IACV,yBAAyB,EAAE,QAAQ,UAAU,YAAY;GAC1D,CAAA;GAEF,UAAU,WAAW,UAAU,QAAQ,SAAS,KAC/C,oBAAC,YAAD;IAAY,SAAS,UAAU;IAAkB;IAAS,WAAU;GAAuB,CAAA;GAE7F,oBAAC,cAAD;IAAc,OAAO,UAAU;IAAQ,MAAK;IAAqB,WAAU;GAAkB,CAAA;EAC1F;;AAET;AAEA,SAAS,YAAY,SAAuB,SAAgC;CAC1E,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EAAgB,SAAA;EAAS,UAAA;CAAwB,CAAA,GACjD,oBAAC,gBAAD,EAAA,UAAiB,QAAwB,CAAA,CAClC,EAAA,CAAA;AAEb;AAEA,SAAgB,cAAc,EAAE,aAAwC;CACtE,OAAO,YACL,oBAAC,QAAD;EACE,aAAU;EACV,GAAI,WAAW,UAAU,iBAAiB,aAAa;EACvD,cAAY,UAAU;EACtB,MAAM,UAAU,UAAU,QAAQ,KAAA;EAElC,UAAA,oBAAC,MAAD;GACE,MAAM,UAAU;GAChB,eAAA;GACA,WAAW,GACT,gBAAgB,UAAU,QAAQ,SAAS,UAC3C,UAAU,SAAS,iBAAiB,UAAU,MAChD;EACD,CAAA;CACG,CAAA,GACN,UAAU,OACZ;AACF;AAEA,MAAM,kBAA0C;CAC9C,OAAO;CACP,QAAQ;CACR,KAAK;AACP;AAEA,SAAgB,eAAe,EAAE,aAAyC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,GAAI,WACF,UAAU,iBACV,GAAG,QAAQ,gBAAgB,UAAU,aAAa,YAAY,eAAe,CAC/E;EAEC,UAAA,YACC,oBAAC,OAAD;GACE,KAAK,UAAU;GACf,KAAK,UAAU;GACf,SAAQ;GACR,WAAW,GACT,2BACA,UAAU,WAAW,iBAAiB,YACxC;GACA,OAAO;IACL,OAAO,UAAU,cAAc,KAAA;IAC/B,QAAQ,UAAU,eAAe,KAAA;GACnC;EACD,CAAA,GACD,UAAU,OACZ;CACG,CAAA;AAET;AAEA,MAAM,aAAqC;CACzC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAgB,uBAAuB,EAAE,aAAiD;CACxF,OACE,oBAAC,MAAD;EACE,aAAU;EACV,GAAI,WACF,UAAU,iBACV,GACE,mEACA,WAAW,UAAU,QAAQ,SAAS,SACxC,CACF;EAEE,WAAA,UAAU,UAAU,CAAC,EAAA,CAAG,KAAK,UAC7B,oBAAC,MAAD,EAAA,UACE,oBAAC,iBAAD,EAAiB,WAAW,MAAQ,CAAA,EAClC,GAFK,MAAM,GAEX,CACL;CACC,CAAA;AAER"}

package/dist/components/layout/fieldset.d.ts

@@ -0,0 +1,7 @@
+import { FieldsetSchema } from "@alfakit/core";
+//#region src/components/layout/fieldset.d.ts
+export declare function FieldsetComponent({ component }: {
+  component: FieldsetSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=fieldset.d.ts.map

package/dist/components/layout/fieldset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldset.d.ts","names":[],"sources":["../../../src/components/layout/fieldset.tsx"],"mappings":";;wBAOgB,oBAAoB;EAAe,WAAW;oBAAgB,IAAA"}