@hjmds/react 0.8.2

package/dist/date-picker.d.ts

@@ -0,0 +1,24 @@
+import { type ComposeCalendarAccessibleName, type ResolvedCalendarDateCell } from "@hjmds/design-contracts/components/calendar";
+import { type DatePickerDescriptor, type DatePickerSize } from "@hjmds/design-contracts/components/date-picker";
+import { type ReactNode } from "react";
+export type DatePickerMonthAction = Readonly<{
+    month: string;
+    label: string;
+}>;
+export type DatePickerProps<Content = unknown> = Readonly<{
+    descriptor: DatePickerDescriptor<Content>;
+    monthLabel: string;
+    composeAccessibleName: ComposeCalendarAccessibleName<Content>;
+    previousMonth?: DatePickerMonthAction;
+    nextMonth?: DatePickerMonthAction;
+    clearLabel: string;
+    closeLabel: string;
+    size?: DatePickerSize;
+    description?: ReactNode;
+    error?: ReactNode;
+    renderCellContent?: (cell: ResolvedCalendarDateCell<Content>) => ReactNode;
+    className?: string;
+}>;
+/** Single-date field with an anchored, focus-bearing calendar dialog. */
+export declare function DatePicker<Content>({ descriptor, monthLabel, composeAccessibleName, previousMonth, nextMonth, clearLabel, closeLabel, size, description, error, renderCellContent, className, }: DatePickerProps<Content>): import("react").JSX.Element;
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../src/date-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,6BAA6B,EAClC,KAAK,wBAAwB,EAC9B,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAIL,KAAK,oBAAoB,EAEzB,KAAK,cAAc,EACpB,MAAM,gDAAgD,CAAC;AACxD,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE/E,MAAM,MAAM,eAAe,CAAC,OAAO,GAAG,OAAO,IAAI,QAAQ,CAAC;IACxD,UAAU,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB,qBAAqB,EAAE,6BAA6B,CAAC,OAAO,CAAC,CAAC;IAC9D,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,wBAAwB,CAAC,OAAO,CAAC,KAAK,SAAS,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,yEAAyE;AACzE,wBAAgB,UAAU,CAAC,OAAO,EAAE,EAClC,UAAU,EACV,UAAU,EACV,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,UAAU,EACV,UAAU,EACV,IAAe,EACf,WAAW,EACX,KAAK,EACL,iBAAiB,EACjB,SAAS,GACV,EAAE,eAAe,CAAC,OAAO,CAAC,+BAiJ1B"}

package/dist/date-picker.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getCalendarNavigationIntent, getCalendarNavigationTarget, } from "@hjmds/design-contracts/components/calendar";
+import { resolveDatePickerGrid, resolveDatePickerTriggerText, validateDatePickerDescriptor, } from "@hjmds/design-contracts/components/date-picker";
+import { useEffect, useId, useRef, useState, } from "react";
+import { classNames } from "./internal.js";
+import { useOptionalHjmTheme } from "./provider.js";
+/** Single-date field with an anchored, focus-bearing calendar dialog. */
+export function DatePicker({ descriptor, monthLabel, composeAccessibleName, previousMonth, nextMonth, clearLabel, closeLabel, size = "medium", description, error, renderCellContent, className, }) {
+    validateDatePickerDescriptor(descriptor);
+    const theme = useOptionalHjmTheme();
+    const generatedId = useId().replaceAll(":", "");
+    const dialogId = `hjm-date-picker-${generatedId}`;
+    const triggerRef = useRef(null);
+    const dialogRef = useRef(null);
+    const controlledOpen = descriptor.open !== undefined;
+    const [internalOpen, setInternalOpen] = useState(descriptor.defaultOpen ?? false);
+    const open = controlledOpen ? descriptor.open === true : internalOpen;
+    const controlledSelection = descriptor.selectedDate !== undefined;
+    const [internalSelection, setInternalSelection] = useState(descriptor.defaultSelectedDate ?? null);
+    const selectedDate = controlledSelection ? descriptor.selectedDate ?? null : internalSelection;
+    const gridDescriptor = { ...descriptor, selectedDate };
+    const cells = resolveDatePickerGrid(gridDescriptor, { composeAccessibleName });
+    const firstDate = cells.find((cell) => !("filler" in cell));
+    const [focusedDate, setFocusedDate] = useState(selectedDate ?? firstDate?.date ?? "");
+    const requestOpen = (next, reason) => {
+        if (!controlledOpen)
+            setInternalOpen(next);
+        descriptor.onOpenChange?.(next, reason);
+    };
+    const commit = (date, reason) => {
+        if (!controlledSelection)
+            setInternalSelection(date);
+        descriptor.onSelectionChange?.(date, reason);
+        requestOpen(false, reason === "activate" ? "selection" : "clear");
+    };
+    const wasOpenRef = useRef(open);
+    useEffect(() => {
+        const wasOpen = wasOpenRef.current;
+        wasOpenRef.current = open;
+        if (!open) {
+            if (wasOpen)
+                triggerRef.current?.focus();
+            return;
+        }
+        setFocusedDate(selectedDate ?? firstDate?.date ?? "");
+        const frame = requestAnimationFrame(() => {
+            dialogRef.current?.querySelector("[data-focus-date='true']")?.focus();
+        });
+        const outside = (event) => {
+            const target = event.target;
+            if (!dialogRef.current?.contains(target) && !triggerRef.current?.contains(target)) {
+                requestOpen(false, "outside");
+            }
+        };
+        document.addEventListener("pointerdown", outside);
+        return () => {
+            cancelAnimationFrame(frame);
+            document.removeEventListener("pointerdown", outside);
+        };
+    }, [open]);
+    const handleGridKey = (event, date) => {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            requestOpen(false, "escape");
+            return;
+        }
+        const intent = getCalendarNavigationIntent(event.key, theme?.environment.direction ?? "ltr");
+        if (!intent)
+            return;
+        event.preventDefault();
+        const target = getCalendarNavigationTarget(descriptor.grid, date, intent);
+        if ("date" in target && target.date) {
+            setFocusedDate(target.date);
+            queueMicrotask(() => dialogRef.current?.querySelector(`[data-date='${target.date}']`)?.focus());
+        }
+    };
+    const label = descriptor.label ?? descriptor.accessibilityLabel;
+    const triggerText = resolveDatePickerTriggerText(descriptor);
+    return (_jsxs("div", { className: classNames("hjm-date-picker", className), "data-invalid": descriptor.invalid || error !== undefined || undefined, "data-size": size, children: [descriptor.label === undefined ? null : _jsx("span", { className: "hjm-date-picker__label", children: descriptor.label }), _jsxs("div", { className: "hjm-date-picker__anchor", children: [_jsxs("button", { "aria-controls": open ? dialogId : undefined, "aria-expanded": open, "aria-haspopup": "dialog", "aria-label": descriptor.accessibilityLabel, className: "hjm-date-picker__trigger", disabled: descriptor.disabled, onClick: () => !descriptor.readOnly && requestOpen(!open, "trigger"), ref: triggerRef, type: "button", children: [_jsx("span", { "aria-hidden": "true", children: "\u25A3" }), _jsx("span", { "data-placeholder": descriptor.displayValue === null || undefined, children: triggerText })] }), selectedDate === null ? null : (_jsx("button", { "aria-label": clearLabel, className: "hjm-date-picker__clear", disabled: descriptor.disabled || descriptor.readOnly, onClick: () => commit(null, "clear"), type: "button", children: "\u00D7" })), open ? (_jsxs("div", { "aria-label": label, className: "hjm-date-picker__popover", id: dialogId, ref: dialogRef, role: "dialog", children: [_jsxs("header", { className: "hjm-date-picker__calendar-header", children: [previousMonth ? _jsx("button", { "aria-label": previousMonth.label, onClick: () => descriptor.onFocusedMonthChange?.(previousMonth.month, "previous"), type: "button", children: "\u2039" }) : _jsx("span", { "aria-hidden": "true" }), _jsx("strong", { children: monthLabel }), nextMonth ? _jsx("button", { "aria-label": nextMonth.label, onClick: () => descriptor.onFocusedMonthChange?.(nextMonth.month, "next"), type: "button", children: "\u203A" }) : _jsx("span", { "aria-hidden": "true" }), _jsx("button", { "aria-label": closeLabel, onClick: () => requestOpen(false, "trigger"), type: "button", children: "\u00D7" })] }), _jsx("div", { className: "hjm-date-picker__weekdays", "aria-hidden": "true", children: descriptor.grid.weekdayLabels.map((weekday, index) => _jsx("span", { children: weekday }, `${weekday}-${index}`)) }), _jsx("div", { "aria-label": monthLabel, className: "hjm-date-picker__grid", role: "grid", children: Array.from({ length: cells.length / 7 }, (_, row) => (_jsx("div", { className: "hjm-date-picker__week", role: "row", children: cells.slice(row * 7, row * 7 + 7).map((cell, column) => "filler" in cell ? (_jsx("span", { "aria-hidden": "true", className: "hjm-date-picker__day", role: "gridcell" }, `filler-${row}-${column}`)) : (_jsxs("button", { "aria-label": cell.accessibleName, "aria-selected": cell.isSelected, className: "hjm-date-picker__day", "data-date": cell.date, "data-disabled": !cell.selectable || undefined, "data-focus-date": cell.date === focusedDate || undefined, "data-outside": cell.outsideFocusedMonth || undefined, "data-selected": cell.isSelected || undefined, "data-today": cell.isToday || undefined, onClick: () => cell.selectable && commit(cell.date, "activate"), onKeyDown: (event) => handleGridKey(event, cell.date), role: "gridcell", tabIndex: cell.date === focusedDate ? 0 : -1, type: "button", children: [_jsx("span", { children: Number(cell.date.slice(-2)) }), renderCellContent?.(cell)] }, cell.date))) }, row))) })] })) : null] }), description === undefined ? null : _jsx("span", { className: "hjm-date-picker__description", children: description }), error === undefined ? null : _jsx("span", { className: "hjm-date-picker__error", role: "alert", children: error })] }));
+}
+//# sourceMappingURL=date-picker.js.map

package/dist/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../src/date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  getCalendarNavigationIntent,\n  getCalendarNavigationTarget,\n  type ComposeCalendarAccessibleName,\n  type ResolvedCalendarDateCell,\n} from \"@hjmds/design-contracts/components/calendar\";\nimport {\n  resolveDatePickerGrid,\n  resolveDatePickerTriggerText,\n  validateDatePickerDescriptor,\n  type DatePickerDescriptor,\n  type DatePickerOpenChangeReason,\n  type DatePickerSize,\n} from \"@hjmds/design-contracts/components/date-picker\";\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { classNames } from \"./internal.js\";\nimport { useOptionalHjmTheme } from \"./provider.js\";\n\nexport type DatePickerMonthAction = Readonly<{ month: string; label: string }>;\n\nexport type DatePickerProps<Content = unknown> = Readonly<{\n  descriptor: DatePickerDescriptor<Content>;\n  monthLabel: string;\n  composeAccessibleName: ComposeCalendarAccessibleName<Content>;\n  previousMonth?: DatePickerMonthAction;\n  nextMonth?: DatePickerMonthAction;\n  clearLabel: string;\n  closeLabel: string;\n  size?: DatePickerSize;\n  description?: ReactNode;\n  error?: ReactNode;\n  renderCellContent?: (cell: ResolvedCalendarDateCell<Content>) => ReactNode;\n  className?: string;\n}>;\n\n/** Single-date field with an anchored, focus-bearing calendar dialog. */\nexport function DatePicker<Content>({\n  descriptor,\n  monthLabel,\n  composeAccessibleName,\n  previousMonth,\n  nextMonth,\n  clearLabel,\n  closeLabel,\n  size = \"medium\",\n  description,\n  error,\n  renderCellContent,\n  className,\n}: DatePickerProps<Content>) {\n  validateDatePickerDescriptor(descriptor);\n  const theme = useOptionalHjmTheme();\n  const generatedId = useId().replaceAll(\":\", \"\");\n  const dialogId = `hjm-date-picker-${generatedId}`;\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const controlledOpen = descriptor.open !== undefined;\n  const [internalOpen, setInternalOpen] = useState(descriptor.defaultOpen ?? false);\n  const open = controlledOpen ? descriptor.open === true : internalOpen;\n  const controlledSelection = descriptor.selectedDate !== undefined;\n  const [internalSelection, setInternalSelection] = useState(\n    descriptor.defaultSelectedDate ?? null,\n  );\n  const selectedDate = controlledSelection ? descriptor.selectedDate ?? null : internalSelection;\n  const gridDescriptor = { ...descriptor, selectedDate } as DatePickerDescriptor<Content>;\n  const cells = resolveDatePickerGrid(gridDescriptor, { composeAccessibleName });\n  const firstDate = cells.find((cell): cell is ResolvedCalendarDateCell<Content> => !(\"filler\" in cell));\n  const [focusedDate, setFocusedDate] = useState(selectedDate ?? firstDate?.date ?? \"\");\n\n  const requestOpen = (next: boolean, reason: DatePickerOpenChangeReason) => {\n    if (!controlledOpen) setInternalOpen(next);\n    descriptor.onOpenChange?.(next, reason);\n  };\n  const commit = (date: string | null, reason: \"activate\" | \"clear\") => {\n    if (!controlledSelection) setInternalSelection(date);\n    descriptor.onSelectionChange?.(date, reason);\n    requestOpen(false, reason === \"activate\" ? \"selection\" : \"clear\");\n  };\n\n  const wasOpenRef = useRef(open);\n  useEffect(() => {\n    const wasOpen = wasOpenRef.current;\n    wasOpenRef.current = open;\n    if (!open) {\n      if (wasOpen) triggerRef.current?.focus();\n      return;\n    }\n    setFocusedDate(selectedDate ?? firstDate?.date ?? \"\");\n    const frame = requestAnimationFrame(() => {\n      dialogRef.current?.querySelector<HTMLElement>(\"[data-focus-date='true']\")?.focus();\n    });\n    const outside = (event: PointerEvent) => {\n      const target = event.target as Node;\n      if (!dialogRef.current?.contains(target) && !triggerRef.current?.contains(target)) {\n        requestOpen(false, \"outside\");\n      }\n    };\n    document.addEventListener(\"pointerdown\", outside);\n    return () => {\n      cancelAnimationFrame(frame);\n      document.removeEventListener(\"pointerdown\", outside);\n    };\n  }, [open]);\n\n  const handleGridKey = (event: KeyboardEvent<HTMLButtonElement>, date: string) => {\n    if (event.key === \"Escape\") {\n      event.preventDefault();\n      requestOpen(false, \"escape\");\n      return;\n    }\n    const intent = getCalendarNavigationIntent(\n      event.key as Parameters<typeof getCalendarNavigationIntent>[0],\n      theme?.environment.direction ?? \"ltr\",\n    );\n    if (!intent) return;\n    event.preventDefault();\n    const target = getCalendarNavigationTarget(descriptor.grid, date, intent);\n    if (\"date\" in target && target.date) {\n      setFocusedDate(target.date);\n      queueMicrotask(() => dialogRef.current?.querySelector<HTMLElement>(`[data-date='${target.date}']`)?.focus());\n    }\n  };\n\n  const label = descriptor.label ?? descriptor.accessibilityLabel;\n  const triggerText = resolveDatePickerTriggerText(descriptor);\n  return (\n    <div className={classNames(\"hjm-date-picker\", className)} data-invalid={descriptor.invalid || error !== undefined || undefined} data-size={size}>\n      {descriptor.label === undefined ? null : <span className=\"hjm-date-picker__label\">{descriptor.label}</span>}\n      <div className=\"hjm-date-picker__anchor\">\n        <button\n          aria-controls={open ? dialogId : undefined}\n          aria-expanded={open}\n          aria-haspopup=\"dialog\"\n          aria-label={descriptor.accessibilityLabel}\n          className=\"hjm-date-picker__trigger\"\n          disabled={descriptor.disabled}\n          onClick={() => !descriptor.readOnly && requestOpen(!open, \"trigger\")}\n          ref={triggerRef}\n          type=\"button\"\n        >\n          <span aria-hidden=\"true\">▣</span>\n          <span data-placeholder={descriptor.displayValue === null || undefined}>{triggerText}</span>\n        </button>\n        {selectedDate === null ? null : (\n          <button aria-label={clearLabel} className=\"hjm-date-picker__clear\" disabled={descriptor.disabled || descriptor.readOnly} onClick={() => commit(null, \"clear\")} type=\"button\">×</button>\n        )}\n        {open ? (\n          <div aria-label={label} className=\"hjm-date-picker__popover\" id={dialogId} ref={dialogRef} role=\"dialog\">\n            <header className=\"hjm-date-picker__calendar-header\">\n              {previousMonth ? <button aria-label={previousMonth.label} onClick={() => descriptor.onFocusedMonthChange?.(previousMonth.month, \"previous\")} type=\"button\">‹</button> : <span aria-hidden=\"true\" />}\n              <strong>{monthLabel}</strong>\n              {nextMonth ? <button aria-label={nextMonth.label} onClick={() => descriptor.onFocusedMonthChange?.(nextMonth.month, \"next\")} type=\"button\">›</button> : <span aria-hidden=\"true\" />}\n              <button aria-label={closeLabel} onClick={() => requestOpen(false, \"trigger\")} type=\"button\">×</button>\n            </header>\n            <div className=\"hjm-date-picker__weekdays\" aria-hidden=\"true\">\n              {descriptor.grid.weekdayLabels.map((weekday, index) => <span key={`${weekday}-${index}`}>{weekday}</span>)}\n            </div>\n            <div aria-label={monthLabel} className=\"hjm-date-picker__grid\" role=\"grid\">\n              {Array.from({ length: cells.length / 7 }, (_, row) => (\n                <div className=\"hjm-date-picker__week\" key={row} role=\"row\">\n                  {cells.slice(row * 7, row * 7 + 7).map((cell, column) => \"filler\" in cell ? (\n                    <span aria-hidden=\"true\" className=\"hjm-date-picker__day\" key={`filler-${row}-${column}`} role=\"gridcell\" />\n                  ) : (\n                    <button\n                      aria-label={cell.accessibleName}\n                      aria-selected={cell.isSelected}\n                      className=\"hjm-date-picker__day\"\n                      data-date={cell.date}\n                      data-disabled={!cell.selectable || undefined}\n                      data-focus-date={cell.date === focusedDate || undefined}\n                      data-outside={cell.outsideFocusedMonth || undefined}\n                      data-selected={cell.isSelected || undefined}\n                      data-today={cell.isToday || undefined}\n                      key={cell.date}\n                      onClick={() => cell.selectable && commit(cell.date, \"activate\")}\n                      onKeyDown={(event) => handleGridKey(event, cell.date)}\n                      role=\"gridcell\"\n                      tabIndex={cell.date === focusedDate ? 0 : -1}\n                      type=\"button\"\n                    >\n                      <span>{Number(cell.date.slice(-2))}</span>\n                      {renderCellContent?.(cell)}\n                    </button>\n                  ))}\n                </div>\n              ))}\n            </div>\n          </div>\n        ) : null}\n      </div>\n      {description === undefined ? null : <span className=\"hjm-date-picker__description\">{description}</span>}\n      {error === undefined ? null : <span className=\"hjm-date-picker__error\" role=\"alert\">{error}</span>}\n    </div>\n  );\n}\n"]}

package/dist/display-public.d.ts

@@ -0,0 +1,5 @@
+export * from "./display.js";
+export * from "./advanced-display.js";
+export * from "./supplemental-display.js";
+export * from "./upload-item.js";
+//# sourceMappingURL=display-public.d.ts.map

package/dist/display-public.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-public.d.ts","sourceRoot":"","sources":["../src/display-public.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC"}

package/dist/display-public.js

@@ -0,0 +1,5 @@
+export * from "./display.js";
+export * from "./advanced-display.js";
+export * from "./supplemental-display.js";
+export * from "./upload-item.js";
+//# sourceMappingURL=display-public.js.map

package/dist/display-public.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-public.js","sourceRoot":"","sources":["../src/display-public.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC","sourcesContent":["export * from \"./display.js\";\nexport * from \"./advanced-display.js\";\nexport * from \"./supplemental-display.js\";\nexport * from \"./upload-item.js\";\n"]}

package/dist/display.d.ts

@@ -0,0 +1,77 @@
+import { type BadgeSize, type BadgeTone, type BadgeVariant as ContractBadgeVariant, type ListRowDensity } from "@hjmds/design-contracts/recipes";
+import { type TagTone } from "@hjmds/design-contracts/components/tag";
+import { type CardHeadingLevel } from "@hjmds/design-contracts/components/card";
+import { type SurfacePadding, type SurfaceRadius, type SurfaceTone } from "@hjmds/design-contracts/recipes/base";
+import { type HTMLAttributes, type MouseEventHandler, type ReactNode } from "react";
+export type { CardHeadingLevel } from "@hjmds/design-contracts/components/card";
+export type { TagTone } from "@hjmds/design-contracts/components/tag";
+export type BadgeVariant = ContractBadgeVariant;
+export type BadgeProps = HTMLAttributes<HTMLSpanElement> & Readonly<{
+    tone?: BadgeTone;
+    size?: BadgeSize;
+    variant?: BadgeVariant;
+    leading?: ReactNode;
+}>;
+export declare const Badge: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & Readonly<{
+    tone?: BadgeTone;
+    size?: BadgeSize;
+    variant?: BadgeVariant;
+    leading?: ReactNode;
+}> & import("react").RefAttributes<HTMLSpanElement>>;
+export type TagProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & Readonly<{
+    children: string;
+    tone?: TagTone;
+}>;
+export declare const Tag: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLSpanElement>, "children"> & Readonly<{
+    children: string;
+    tone?: TagTone;
+}> & import("react").RefAttributes<HTMLSpanElement>>;
+export type CardProps = Omit<HTMLAttributes<HTMLElement>, "title"> & Readonly<{
+    title?: ReactNode;
+    description?: ReactNode;
+    leading?: ReactNode;
+    media?: ReactNode;
+    actions?: ReactNode;
+    headingLevel?: CardHeadingLevel;
+    selected?: boolean;
+    tone?: SurfaceTone;
+    bordered?: boolean;
+    padding?: SurfacePadding;
+    radius?: SurfaceRadius;
+}>;
+export declare const Card: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "title"> & Readonly<{
+    title?: ReactNode;
+    description?: ReactNode;
+    leading?: ReactNode;
+    media?: ReactNode;
+    actions?: ReactNode;
+    headingLevel?: CardHeadingLevel;
+    selected?: boolean;
+    tone?: SurfaceTone;
+    bordered?: boolean;
+    padding?: SurfacePadding;
+    radius?: SurfaceRadius;
+}> & import("react").RefAttributes<HTMLElement>>;
+export type ListRowProps = Omit<HTMLAttributes<HTMLElement>, "title" | "onClick"> & Readonly<{
+    title: ReactNode;
+    description?: ReactNode;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    density?: ListRowDensity;
+    selected?: boolean;
+    disabled?: boolean;
+    href?: string;
+    onClick?: MouseEventHandler<HTMLElement>;
+}>;
+export declare const ListRow: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "title" | "onClick"> & Readonly<{
+    title: ReactNode;
+    description?: ReactNode;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    density?: ListRowDensity;
+    selected?: boolean;
+    disabled?: boolean;
+    href?: string;
+    onClick?: MouseEventHandler<HTMLElement>;
+}> & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=display.d.ts.map

package/dist/display.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../src/display.tsx"],"names":[],"mappings":"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"}

package/dist/display.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { badgeRecipe, listRowRecipe, } from "@hjmds/design-contracts/recipes";
+import { resolveTagDescriptor, } from "@hjmds/design-contracts/components/tag";
+import { cardRecipe, } from "@hjmds/design-contracts/components/card";
+import { surfaceGeometry, } from "@hjmds/design-contracts/recipes/base";
+import { createElement, forwardRef, } from "react";
+import { classNames } from "./internal.js";
+import { Surface, Text } from "./layout.js";
+export const Badge = forwardRef(function Badge({ tone = badgeRecipe.defaults.tone, size = badgeRecipe.defaults.size, variant = badgeRecipe.defaults.variant, leading, className, children, ...props }, ref) {
+    return (_jsxs("span", { ...props, ref: ref, className: classNames("hjm-badge", className), "data-tone": tone, "data-size": size, "data-variant": variant, children: [leading === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: "hjm-badge__icon", children: leading })), _jsx("span", { className: "hjm-badge__label", children: children })] }));
+});
+export const Tag = forwardRef(function Tag({ children, tone, className, ...props }, ref) {
+    const descriptor = resolveTagDescriptor({
+        label: children,
+        ...(tone === undefined ? {} : { tone }),
+    });
+    return (_jsx("span", { ...props, ref: ref, className: classNames("hjm-tag", className), "data-tone": descriptor.tone, children: _jsx("span", { className: "hjm-tag__label", children: descriptor.label }) }));
+});
+export const Card = forwardRef(function Card({ title, description, leading, media, actions, headingLevel = cardRecipe.defaults.headingLevel, selected = cardRecipe.defaults.selected, tone = cardRecipe.defaults.tone, bordered = cardRecipe.defaults.bordered, padding = cardRecipe.defaults.padding, radius, className, children, ...props }, ref) {
+    const hasHeader = leading !== undefined || title !== undefined || description !== undefined;
+    return (_jsxs(Surface, { ...props, ref: ref, as: "article", tone: selected ? cardRecipe.selectedTone : tone, bordered: bordered, ...(radius === undefined ? {} : { radius }), className: classNames("hjm-card", className), "data-state": selected ? "selected" : "idle", children: [media ? _jsx("div", { className: "hjm-card__media", "data-slot": "media", children: media }) : null, _jsxs("div", { className: "hjm-card__body", "data-slot": "body", style: { padding: surfaceGeometry.paddings[padding] }, children: [hasHeader ? (_jsxs("div", { className: "hjm-card__header", "data-slot": "header", children: [leading === undefined ? null : (_jsx("span", { className: "hjm-card__leading", "data-slot": "leading", children: leading })), _jsxs("div", { className: "hjm-card__copy", children: [title === undefined
+                                        ? null
+                                        : createElement(`h${headingLevel}`, { className: "hjm-card__title", "data-slot": "title" }, title), description === undefined ? null : (_jsx(Text, { as: "p", tone: "muted", className: "hjm-card__description", "data-slot": "description", children: description }))] })] })) : null, children === undefined ? null : (_jsx("div", { className: "hjm-card__content", "data-slot": "content", children: children }))] }), actions ? _jsx("div", { className: "hjm-card__actions", "data-slot": "actions", children: actions }) : null] }));
+});
+export const ListRow = forwardRef(function ListRow({ title, description, leading, trailing, density = listRowRecipe.defaults.density, selected = listRowRecipe.defaults.selected, disabled = false, href, onClick, className, ...props }, ref) {
+    const element = href ? "a" : onClick ? "button" : "div";
+    const interactiveProps = href
+        ? {
+            href: disabled ? undefined : href,
+            "aria-current": selected ? "page" : undefined,
+            "aria-disabled": disabled || undefined,
+            tabIndex: disabled ? -1 : undefined,
+        }
+        : onClick
+            ? {
+                type: "button",
+                onClick: disabled ? undefined : onClick,
+                disabled,
+                "aria-pressed": selected,
+            }
+            : {};
+    return createElement(element, {
+        ...props,
+        ...interactiveProps,
+        ref,
+        className: classNames("hjm-list-row", className),
+        "data-density": density,
+        "data-state": disabled ? "disabled" : selected ? "selected" : "idle",
+    }, leading ? _jsx("span", { className: "hjm-list-row__leading", children: leading }) : null, _jsxs("span", { className: "hjm-list-row__content", children: [_jsx("span", { className: "hjm-list-row__title", children: title }), description ? (_jsx("span", { className: "hjm-list-row__description", children: description })) : null] }), trailing ? _jsx("span", { className: "hjm-list-row__trailing", children: trailing }) : null);
+});
+//# sourceMappingURL=display.js.map

package/dist/display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display.js","sourceRoot":"","sources":["../src/display.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,WAAW,EACX,aAAa,GAKd,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,oBAAoB,GAErB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,UAAU,GAEX,MAAM,yCAAyC,CAAC;AACjD,OAAO,EACL,eAAe,GAIhB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EACL,aAAa,EACb,UAAU,GAIX,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAc5C,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA8B,SAAS,KAAK,CACzE,EACE,IAAI,GAAG,WAAW,CAAC,QAAQ,CAAC,IAAI,EAChC,IAAI,GAAG,WAAW,CAAC,QAAQ,CAAC,IAAI,EAChC,OAAO,GAAG,WAAW,CAAC,QAAQ,CAAC,OAAO,EACtC,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG;IAEH,OAAO,CACL,mBACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,SAAS,CAAC,eAClC,IAAI,eACJ,IAAI,kBACD,OAAO,aAEpB,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC9B,8BAAkB,MAAM,EAAC,SAAS,EAAC,iBAAiB,YACjD,OAAO,GACH,CACR,EACD,eAAM,SAAS,EAAC,kBAAkB,YAAE,QAAQ,GAAQ,IAC/C,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAQH,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAA4B,SAAS,GAAG,CACnE,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACvC,GAAG;IAEH,MAAM,UAAU,GAAG,oBAAoB,CAAC;QACtC,KAAK,EAAE,QAAQ;QACf,GAAG,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC;KACxC,CAAC,CAAC;IACH,OAAO,CACL,kBACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,eAChC,UAAU,CAAC,IAAI,YAE1B,eAAM,SAAS,EAAC,gBAAgB,YAAE,UAAU,CAAC,KAAK,GAAQ,GACrD,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAiBH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAAyB,SAAS,IAAI,CAClE,EACE,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAAK,EACL,OAAO,EACP,YAAY,GAAG,UAAU,CAAC,QAAQ,CAAC,YAAY,EAC/C,QAAQ,GAAG,UAAU,CAAC,QAAQ,CAAC,QAAQ,EACvC,IAAI,GAAG,UAAU,CAAC,QAAQ,CAAC,IAAI,EAC/B,QAAQ,GAAG,UAAU,CAAC,QAAQ,CAAC,QAAQ,EACvC,OAAO,GAAG,UAAU,CAAC,QAAQ,CAAC,OAAO,EACrC,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG;IAEH,MAAM,SAAS,GACb,OAAO,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,IAAI,WAAW,KAAK,SAAS,CAAC;IAE5E,OAAO,CACL,MAAC,OAAO,OACF,KAAK,EACT,GAAG,EAAE,GAAG,EACR,EAAE,EAAC,SAAS,EACZ,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,EAC/C,QAAQ,EAAE,QAAQ,KACd,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAC5C,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC,gBAChC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,aAEzC,KAAK,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,iBAAiB,eAAW,OAAO,YAAE,KAAK,GAAO,CAAC,CAAC,CAAC,IAAI,EAChF,eACE,SAAS,EAAC,gBAAgB,eAChB,MAAM,EAChB,KAAK,EAAE,EAAE,OAAO,EAAE,eAAe,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,aAEpD,SAAS,CAAC,CAAC,CAAC,CACX,eAAK,SAAS,EAAC,kBAAkB,eAAW,QAAQ,aACjD,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC9B,eAAM,SAAS,EAAC,mBAAmB,eAAW,SAAS,YACpD,OAAO,GACH,CACR,EACD,eAAK,SAAS,EAAC,gBAAgB,aAC5B,KAAK,KAAK,SAAS;wCAClB,CAAC,CAAC,IAAI;wCACN,CAAC,CAAC,aAAa,CACX,IAAI,YAAY,EAAE,EAClB,EAAE,SAAS,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,EACtD,KAAK,CACN,EACJ,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAClC,KAAC,IAAI,IACH,EAAE,EAAC,GAAG,EACN,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,uBAAuB,eACvB,aAAa,YAEtB,WAAW,GACP,CACR,IACG,IACF,CACP,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC/B,cAAK,SAAS,EAAC,mBAAmB,eAAW,SAAS,YAAE,QAAQ,GAAO,CACxE,IACG,EACL,OAAO,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,mBAAmB,eAAW,SAAS,YAAE,OAAO,GAAO,CAAC,CAAC,CAAC,IAAI,IAChF,CACX,CAAC;AACJ,CAAC,CAAC,CAAC;AAeH,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAA4B,SAAS,OAAO,CAC3E,EACE,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,EACR,OAAO,GAAG,aAAa,CAAC,QAAQ,CAAC,OAAO,EACxC,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,QAAQ,EAC1C,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG;IAEH,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IACxD,MAAM,gBAAgB,GAAG,IAAI;QAC3B,CAAC,CAAC;YACE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;YACjC,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAE,MAAgB,CAAC,CAAC,CAAC,SAAS;YACxD,eAAe,EAAE,QAAQ,IAAI,SAAS;YACtC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;SACpC;QACH,CAAC,CAAC,OAAO;YACP,CAAC,CAAC;gBACE,IAAI,EAAE,QAAiB;gBACvB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;gBACvC,QAAQ;gBACR,cAAc,EAAE,QAAQ;aACzB;YACH,CAAC,CAAC,EAAE,CAAC;IAET,OAAO,aAAa,CAClB,OAAO,EACP;QACE,GAAG,KAAK;QACR,GAAG,gBAAgB;QACnB,GAAG;QACH,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,SAAS,CAAC;QAChD,cAAc,EAAE,OAAO;QACvB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;KACrE,EACD,OAAO,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,uBAAuB,YAAE,OAAO,GAAQ,CAAC,CAAC,CAAC,IAAI,EACzE,gBAAM,SAAS,EAAC,uBAAuB,aACrC,eAAM,SAAS,EAAC,qBAAqB,YAAE,KAAK,GAAQ,EACnD,WAAW,CAAC,CAAC,CAAC,CACb,eAAM,SAAS,EAAC,2BAA2B,YAAE,WAAW,GAAQ,CACjE,CAAC,CAAC,CAAC,IAAI,IACH,EACP,QAAQ,CAAC,CAAC,CAAC,eAAM,SAAS,EAAC,wBAAwB,YAAE,QAAQ,GAAQ,CAAC,CAAC,CAAC,IAAI,CAC7E,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import {\n  badgeRecipe,\n  listRowRecipe,\n  type BadgeSize,\n  type BadgeTone,\n  type BadgeVariant as ContractBadgeVariant,\n  type ListRowDensity,\n} from \"@hjmds/design-contracts/recipes\";\nimport {\n  resolveTagDescriptor,\n  type TagTone,\n} from \"@hjmds/design-contracts/components/tag\";\nimport {\n  cardRecipe,\n  type CardHeadingLevel,\n} from \"@hjmds/design-contracts/components/card\";\nimport {\n  surfaceGeometry,\n  type SurfacePadding,\n  type SurfaceRadius,\n  type SurfaceTone,\n} from \"@hjmds/design-contracts/recipes/base\";\nimport {\n  createElement,\n  forwardRef,\n  type HTMLAttributes,\n  type MouseEventHandler,\n  type ReactNode,\n} from \"react\";\nimport { classNames } from \"./internal.js\";\nimport { Surface, Text } from \"./layout.js\";\n\nexport type { CardHeadingLevel } from \"@hjmds/design-contracts/components/card\";\nexport type { TagTone } from \"@hjmds/design-contracts/components/tag\";\nexport type BadgeVariant = ContractBadgeVariant;\n\nexport type BadgeProps = HTMLAttributes<HTMLSpanElement> &\n  Readonly<{\n    tone?: BadgeTone;\n    size?: BadgeSize;\n    variant?: BadgeVariant;\n    leading?: ReactNode;\n  }>;\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  {\n    tone = badgeRecipe.defaults.tone,\n    size = badgeRecipe.defaults.size,\n    variant = badgeRecipe.defaults.variant,\n    leading,\n    className,\n    children,\n    ...props\n  },\n  ref,\n) {\n  return (\n    <span\n      {...props}\n      ref={ref}\n      className={classNames(\"hjm-badge\", className)}\n      data-tone={tone}\n      data-size={size}\n      data-variant={variant}\n    >\n      {leading === undefined ? null : (\n        <span aria-hidden=\"true\" className=\"hjm-badge__icon\">\n          {leading}\n        </span>\n      )}\n      <span className=\"hjm-badge__label\">{children}</span>\n    </span>\n  );\n});\n\nexport type TagProps = Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> &\n  Readonly<{\n    children: string;\n    tone?: TagTone;\n  }>;\n\nexport const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(\n  { children, tone, className, ...props },\n  ref,\n) {\n  const descriptor = resolveTagDescriptor({\n    label: children,\n    ...(tone === undefined ? {} : { tone }),\n  });\n  return (\n    <span\n      {...props}\n      ref={ref}\n      className={classNames(\"hjm-tag\", className)}\n      data-tone={descriptor.tone}\n    >\n      <span className=\"hjm-tag__label\">{descriptor.label}</span>\n    </span>\n  );\n});\n\nexport type CardProps = Omit<HTMLAttributes<HTMLElement>, \"title\"> &\n  Readonly<{\n    title?: ReactNode;\n    description?: ReactNode;\n    leading?: ReactNode;\n    media?: ReactNode;\n    actions?: ReactNode;\n    headingLevel?: CardHeadingLevel;\n    selected?: boolean;\n    tone?: SurfaceTone;\n    bordered?: boolean;\n    padding?: SurfacePadding;\n    radius?: SurfaceRadius;\n  }>;\n\nexport const Card = forwardRef<HTMLElement, CardProps>(function Card(\n  {\n    title,\n    description,\n    leading,\n    media,\n    actions,\n    headingLevel = cardRecipe.defaults.headingLevel,\n    selected = cardRecipe.defaults.selected,\n    tone = cardRecipe.defaults.tone,\n    bordered = cardRecipe.defaults.bordered,\n    padding = cardRecipe.defaults.padding,\n    radius,\n    className,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const hasHeader =\n    leading !== undefined || title !== undefined || description !== undefined;\n\n  return (\n    <Surface\n      {...props}\n      ref={ref}\n      as=\"article\"\n      tone={selected ? cardRecipe.selectedTone : tone}\n      bordered={bordered}\n      {...(radius === undefined ? {} : { radius })}\n      className={classNames(\"hjm-card\", className)}\n      data-state={selected ? \"selected\" : \"idle\"}\n    >\n      {media ? <div className=\"hjm-card__media\" data-slot=\"media\">{media}</div> : null}\n      <div\n        className=\"hjm-card__body\"\n        data-slot=\"body\"\n        style={{ padding: surfaceGeometry.paddings[padding] }}\n      >\n        {hasHeader ? (\n          <div className=\"hjm-card__header\" data-slot=\"header\">\n            {leading === undefined ? null : (\n              <span className=\"hjm-card__leading\" data-slot=\"leading\">\n                {leading}\n              </span>\n            )}\n            <div className=\"hjm-card__copy\">\n              {title === undefined\n                ? null\n                : createElement(\n                    `h${headingLevel}`,\n                    { className: \"hjm-card__title\", \"data-slot\": \"title\" },\n                    title,\n                  )}\n              {description === undefined ? null : (\n                <Text\n                  as=\"p\"\n                  tone=\"muted\"\n                  className=\"hjm-card__description\"\n                  data-slot=\"description\"\n                >\n                  {description}\n                </Text>\n              )}\n            </div>\n          </div>\n        ) : null}\n        {children === undefined ? null : (\n          <div className=\"hjm-card__content\" data-slot=\"content\">{children}</div>\n        )}\n      </div>\n      {actions ? <div className=\"hjm-card__actions\" data-slot=\"actions\">{actions}</div> : null}\n    </Surface>\n  );\n});\n\nexport type ListRowProps = Omit<HTMLAttributes<HTMLElement>, \"title\" | \"onClick\"> &\n  Readonly<{\n    title: ReactNode;\n    description?: ReactNode;\n    leading?: ReactNode;\n    trailing?: ReactNode;\n    density?: ListRowDensity;\n    selected?: boolean;\n    disabled?: boolean;\n    href?: string;\n    onClick?: MouseEventHandler<HTMLElement>;\n  }>;\n\nexport const ListRow = forwardRef<HTMLElement, ListRowProps>(function ListRow(\n  {\n    title,\n    description,\n    leading,\n    trailing,\n    density = listRowRecipe.defaults.density,\n    selected = listRowRecipe.defaults.selected,\n    disabled = false,\n    href,\n    onClick,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const element = href ? \"a\" : onClick ? \"button\" : \"div\";\n  const interactiveProps = href\n    ? {\n        href: disabled ? undefined : href,\n        \"aria-current\": selected ? (\"page\" as const) : undefined,\n        \"aria-disabled\": disabled || undefined,\n        tabIndex: disabled ? -1 : undefined,\n      }\n    : onClick\n      ? {\n          type: \"button\" as const,\n          onClick: disabled ? undefined : onClick,\n          disabled,\n          \"aria-pressed\": selected,\n        }\n      : {};\n\n  return createElement(\n    element,\n    {\n      ...props,\n      ...interactiveProps,\n      ref,\n      className: classNames(\"hjm-list-row\", className),\n      \"data-density\": density,\n      \"data-state\": disabled ? \"disabled\" : selected ? \"selected\" : \"idle\",\n    },\n    leading ? <span className=\"hjm-list-row__leading\">{leading}</span> : null,\n    <span className=\"hjm-list-row__content\">\n      <span className=\"hjm-list-row__title\">{title}</span>\n      {description ? (\n        <span className=\"hjm-list-row__description\">{description}</span>\n      ) : null}\n    </span>,\n    trailing ? <span className=\"hjm-list-row__trailing\">{trailing}</span> : null,\n  );\n});\n"]}