@alfakit/react 0.0.0-stage → 0.1.1

package/dist/components/dev-tools/dev-tools-inspector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-tools-inspector.js","names":[],"sources":["../../../src/components/dev-tools/dev-tools-inspector.tsx"],"sourcesContent":["import {\n  byteLength,\n  formatBytes,\n  inspectableProps,\n  jsonEntries,\n  jsonScalar,\n  jsonSize,\n  latestServerTiming,\n  prettyJson,\n  searchJson,\n  type JsonEntry,\n  type JsonSearchResult,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/react'\nimport { BracesIcon, CheckIcon, ChevronRightIcon, CopyIcon, ExternalLinkIcon } from 'lucide-react'\nimport { useEffect, useMemo, useState } from 'react'\nimport { useAlfakitProps, useDirection, useFormatter, useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { Button } from '../ui/button'\nimport { Input } from '../ui/input'\nimport { ScrollArea } from '../ui/scroll-area'\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '../ui/sheet'\n\n/**\n * The schema inspector: a floating developer button that opens a drawer with the page's\n * props as a searchable JSON tree (with a copy button), what the context token identifies,\n * the server time reported in `Server-Timing`, the payload size and editor links for the\n * PHP classes behind the page. Rendered only for pages that carry `alfakitDevTools`.\n */\nexport function DevToolsInspector() {\n  const props = useAlfakitProps()\n  const t = useT()\n  const formatter = useFormatter()\n  const direction = useDirection()\n  const tools = props.alfakitDevTools\n  const data = useMemo(() => inspectableProps(props as unknown as Record<string, unknown>), [props])\n  const payload = useMemo(() => byteLength(props), [props])\n  const [query, setQuery] = useState('')\n  const [copied, setCopied] = useState(false)\n  // The inspector renders in the browser only (lazy chunk), so the Performance API is there.\n  const [serverTime, setServerTime] = useState<number | null>(() => latestServerTiming())\n  const search = useMemo(() => searchJson(data, query), [data, query])\n\n  // Re-read the timing after every visit: the latest response carries the newest header.\n  useEffect(() => router.on('finish', () => setServerTime(latestServerTiming())), [])\n\n  useEffect(() => {\n    if (!copied) return\n\n    const timer = setTimeout(() => setCopied(false), 2000)\n\n    return () => clearTimeout(timer)\n  }, [copied])\n\n  if (!tools) {\n    return null\n  }\n\n  const copy = () => {\n    void navigator.clipboard?.writeText(prettyJson(data)).then(() => setCopied(true))\n  }\n\n  const time = (value: number | null) =>\n    value === null ? t('dev_tools.never', {}, 'Never') : formatter.dateTime(value * 1000)\n  const parameters = Object.entries(tools.context.parameters)\n\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"icon\"\n          aria-label={t('dev_tools.open', {}, 'Open schema inspector')}\n          data-slot=\"dev-tools-toggle\"\n          className=\"fixed end-4 bottom-4 z-40 rounded-full shadow-md\"\n        >\n          <BracesIcon />\n        </Button>\n      </SheetTrigger>\n      <SheetContent\n        side={direction === 'rtl' ? 'left' : 'right'}\n        className=\"flex w-full flex-col gap-0 p-0 sm:max-w-xl\"\n      >\n        <div data-slot=\"dev-tools\" className=\"flex min-h-0 flex-1 flex-col\">\n          <SheetHeader className=\"border-b\">\n            <SheetTitle className=\"flex items-center gap-2\">\n              <BracesIcon className=\"size-4\" />\n              {t('dev_tools.title', {}, 'Schema inspector')}\n            </SheetTitle>\n            <SheetDescription className=\"truncate font-mono text-xs\" title={tools.context.page}>\n              {tools.context.page}\n            </SheetDescription>\n          </SheetHeader>\n          <ScrollArea className=\"min-h-0 flex-1\">\n            <div className=\"space-y-5 p-4 text-sm\">\n              <dl className=\"grid grid-cols-2 gap-3\">\n                <Stat\n                  label={t('dev_tools.server_time', {}, 'Server time')}\n                  value={\n                    serverTime === null\n                      ? t('dev_tools.not_measured', {}, 'Not measured')\n                      : t(\n                          'dev_tools.milliseconds',\n                          { value: formatter.number(serverTime) },\n                          ':value ms',\n                        )\n                  }\n                />\n                <Stat\n                  label={t('dev_tools.payload', {}, 'Payload size')}\n                  value={formatBytes(payload)}\n                />\n              </dl>\n\n              <section data-slot=\"dev-tools-context\">\n                <h3 className=\"mb-2 text-sm font-medium\">\n                  {t('dev_tools.context', {}, 'Context token')}\n                </h3>\n                <dl className=\"grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs\">\n                  <Row label={t('dev_tools.panel', {}, 'Panel')} value={tools.context.panel} />\n                  <Row label={t('dev_tools.page', {}, 'Page')} value={tools.context.page} />\n                  {tools.context.component && (\n                    <Row\n                      label={t('dev_tools.component', {}, 'Component')}\n                      value={tools.context.component}\n                    />\n                  )}\n                  {tools.tenant !== null && (\n                    <Row label={t('dev_tools.tenant', {}, 'Tenant')} value={tools.tenant} />\n                  )}\n                  {parameters.map(([key, value]) => (\n                    <Row key={key} label={key} value={jsonScalar(value)} />\n                  ))}\n                  <Row\n                    label={t('dev_tools.bound_to_user', {}, 'Bound to the user')}\n                    value={\n                      tools.context.boundToUser\n                        ? t('dev_tools.yes', {}, 'Yes')\n                        : t('dev_tools.no', {}, 'No')\n                    }\n                    plain\n                  />\n                  <Row\n                    label={t('dev_tools.issued_at', {}, 'Issued')}\n                    value={time(tools.context.issuedAt)}\n                    plain\n                  />\n                  <Row\n                    label={t('dev_tools.expires_at', {}, 'Expires')}\n                    value={time(tools.context.expiresAt)}\n                    plain\n                  />\n                </dl>\n              </section>\n\n              <section data-slot=\"dev-tools-classes\">\n                <h3 className=\"mb-2 text-sm font-medium\">\n                  {t('dev_tools.classes', {}, 'Classes')}\n                </h3>\n                <ul className=\"divide-y rounded-md border text-xs\">\n                  {tools.classes.map((item) => (\n                    <li key={item.role} className=\"flex items-center gap-2 px-3 py-1.5\">\n                      <span className=\"text-muted-foreground w-16 shrink-0\">\n                        {t(`dev_tools.roles.${item.role}`, {}, item.role)}\n                      </span>\n                      <span\n                        className=\"min-w-0 flex-1 truncate font-mono\"\n                        title={item.file ? `${item.file}:${item.line ?? 1}` : item.class}\n                      >\n                        {item.class}\n                      </span>\n                      {item.url && (\n                        <a\n                          href={item.url}\n                          className=\"text-primary inline-flex shrink-0 items-center gap-1 hover:underline\"\n                          aria-label={t(\n                            'dev_tools.open_in_editor',\n                            { class: item.class, editor: tools.editor ?? '' },\n                            'Open :class in :editor',\n                          )}\n                        >\n                          <ExternalLinkIcon className=\"size-3.5\" />\n                        </a>\n                      )}\n                    </li>\n                  ))}\n                </ul>\n                {tools.editor === null && (\n                  <p className=\"text-muted-foreground mt-2 text-xs\">\n                    {t(\n                      'dev_tools.no_editor',\n                      {},\n                      'Set APP_EDITOR (config app.editor) to open these classes in your editor.',\n                    )}\n                  </p>\n                )}\n              </section>\n\n              <section data-slot=\"dev-tools-schema\">\n                <div className=\"mb-2 flex items-center gap-2\">\n                  <h3 className=\"me-auto text-sm font-medium\">\n                    {t('dev_tools.schema', {}, 'Schema')}\n                  </h3>\n                  <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={copy}>\n                    {copied ? <CheckIcon /> : <CopyIcon />}\n                    {copied\n                      ? t('dev_tools.copied', {}, 'Copied')\n                      : t('dev_tools.copy', {}, 'Copy JSON')}\n                  </Button>\n                </div>\n                <Input\n                  type=\"search\"\n                  value={query}\n                  onChange={(event) => setQuery(event.target.value)}\n                  placeholder={t('dev_tools.search', {}, 'Search keys and values')}\n                  aria-label={t('dev_tools.search', {}, 'Search keys and values')}\n                  className=\"mb-2 h-8\"\n                />\n                {query.trim() !== '' && search.matches.size === 0 ? (\n                  <p className=\"text-muted-foreground text-sm\">\n                    {t(\n                      'dev_tools.no_matches',\n                      { query: query.trim() },\n                      'Nothing matches “:query”.',\n                    )}\n                  </p>\n                ) : (\n                  <ul\n                    dir=\"ltr\"\n                    role=\"tree\"\n                    aria-label={t('dev_tools.schema', {}, 'Schema')}\n                    className=\"bg-muted/40 overflow-x-auto rounded-md p-2 text-start font-mono text-xs leading-relaxed\"\n                  >\n                    {jsonEntries(data).map((entry) => (\n                      <JsonNode\n                        key={entry.path}\n                        entry={entry}\n                        depth={0}\n                        search={search}\n                        query={query}\n                      />\n                    ))}\n                  </ul>\n                )}\n              </section>\n            </div>\n          </ScrollArea>\n        </div>\n      </SheetContent>\n    </Sheet>\n  )\n}\n\nfunction JsonNode({\n  entry,\n  depth,\n  search,\n  query,\n}: {\n  entry: JsonEntry\n  depth: number\n  search: JsonSearchResult\n  query: string\n}) {\n  const t = useT()\n  const formatter = useFormatter()\n  const searching = query.trim() !== ''\n  const [open, setOpen] = useState(depth < 1)\n\n  if (searching && !search.visible.has(entry.path)) {\n    return null\n  }\n\n  const container = entry.kind === 'object' || entry.kind === 'array'\n  const expanded = searching || open\n  const matched = search.matches.has(entry.path)\n  const size = jsonSize(entry.value)\n  const key = (\n    <span className={cn('text-foreground', matched && 'bg-primary/15 rounded-sm')}>\n      {entry.key}\n    </span>\n  )\n\n  if (!container) {\n    return (\n      <li\n        role=\"treeitem\"\n        aria-selected={false}\n        className=\"py-px\"\n        style={{ paddingInlineStart: `${depth * 12 + 16}px` }}\n      >\n        {key}\n        <span className=\"text-muted-foreground\">: </span>\n        <span\n          className={cn(\n            entry.kind === 'string' && 'text-emerald-700 dark:text-emerald-400',\n            entry.kind === 'number' && 'text-sky-700 dark:text-sky-400',\n            entry.kind === 'boolean' && 'text-violet-700 dark:text-violet-400',\n            entry.kind === 'null' && 'text-muted-foreground',\n            'break-all',\n          )}\n        >\n          {jsonScalar(entry.value)}\n        </span>\n      </li>\n    )\n  }\n\n  return (\n    <li role=\"treeitem\" aria-selected={false} aria-expanded={expanded}>\n      <button\n        type=\"button\"\n        className=\"hover:bg-muted flex w-full items-center gap-1 rounded py-px text-start\"\n        style={{ paddingInlineStart: `${depth * 12}px` }}\n        onClick={() => setOpen(!open)}\n        aria-label={\n          expanded\n            ? t('dev_tools.collapse', { key: entry.key }, 'Collapse :key')\n            : t('dev_tools.expand', { key: entry.key }, 'Expand :key')\n        }\n      >\n        {/* The tree is always left to right (it is code), so the chevron does not flip. */}\n        <ChevronRightIcon\n          className={cn('size-3 shrink-0 transition-transform', expanded && 'rotate-90')}\n        />\n        {key}\n        <span className=\"text-muted-foreground\">\n          {entry.kind === 'array' ? `[${formatter.number(size)}]` : `{${formatter.number(size)}}`}\n        </span>\n      </button>\n      {expanded && size > 0 && (\n        <ul role=\"group\">\n          {jsonEntries(entry.value, entry.path).map((child) => (\n            <JsonNode\n              key={child.path}\n              entry={child}\n              depth={depth + 1}\n              search={search}\n              query={query}\n            />\n          ))}\n        </ul>\n      )}\n    </li>\n  )\n}\n\nfunction Stat({ label, value }: { label: string; value: string }) {\n  return (\n    <div className=\"rounded-md border p-3\">\n      <dt className=\"text-muted-foreground text-xs\">{label}</dt>\n      <dd className=\"font-mono text-sm font-semibold tabular-nums\">{value}</dd>\n    </div>\n  )\n}\n\nfunction Row({ label, value, plain = false }: { label: string; value: string; plain?: boolean }) {\n  return (\n    <>\n      <dt className=\"text-muted-foreground\">{label}</dt>\n      <dd className={cn('min-w-0 truncate', !plain && 'font-mono')} title={value}>\n        {value}\n      </dd>\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/components/dev-tools/dev-tools-slot.js

@@ -0,0 +1,24 @@
+import { useAlfakitProps, useOptionalRegistry } from "../../context.js";
+import { lazyComponent } from "../../lib/lazy.js";
+import { createElement } from "react";
+//#region src/components/dev-tools/dev-tools-slot.tsx
+/**
+* The inspector's code loads only on pages that carry `alfakitDevTools` (`Panel::devTools()`
+* with `app.debug` on), so it never ships in the panel's main chunk.
+*/
+const DevToolsInspector = lazyComponent(() => import("./dev-tools-inspector.js").then((module) => module.DevToolsInspector), () => null);
+/**
+* Where the panel root mounts the schema inspector: nothing unless the page carries
+* `alfakitDevTools`, otherwise the registered `panel:dev-tools` component or the built-in
+* floating button and drawer.
+*/
+function DevToolsSlot() {
+	const props = useAlfakitProps();
+	const registry = useOptionalRegistry();
+	if (!props.alfakitDevTools) return null;
+	return createElement(registry?.resolve("panel:dev-tools") ?? DevToolsInspector);
+}
+//#endregion
+export { DevToolsSlot };
+
+//# sourceMappingURL=dev-tools-slot.js.map

package/dist/components/dev-tools/dev-tools-slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-tools-slot.js","names":[],"sources":["../../../src/components/dev-tools/dev-tools-slot.tsx"],"sourcesContent":["import { createElement } from 'react'\nimport { useAlfakitProps, useOptionalRegistry } from '../../context'\nimport { lazyComponent } from '../../lib/lazy'\n\n/**\n * The inspector's code loads only on pages that carry `alfakitDevTools` (`Panel::devTools()`\n * with `app.debug` on), so it never ships in the panel's main chunk.\n */\nconst DevToolsInspector = lazyComponent<Record<string, never>>(\n  () => import('./dev-tools-inspector').then((module) => module.DevToolsInspector),\n  () => null,\n)\n\n/**\n * Where the panel root mounts the schema inspector: nothing unless the page carries\n * `alfakitDevTools`, otherwise the registered `panel:dev-tools` component or the built-in\n * floating button and drawer.\n */\nexport function DevToolsSlot() {\n  const props = useAlfakitProps()\n  const registry = useOptionalRegistry()\n\n  if (!props.alfakitDevTools) {\n    return null\n  }\n\n  return createElement(registry?.resolve('panel:dev-tools') ?? DevToolsInspector)\n}\n"],"mappings":";;;;;;;;AAQA,MAAM,oBAAoB,oBAClB,OAAO,2BAAwB,CAAC,MAAM,WAAW,OAAO,iBAAiB,SACzE,IACR;;;;;;AAOA,SAAgB,eAAe;CAC7B,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,WAAW,oBAAoB;CAErC,IAAI,CAAC,MAAM,iBACT,OAAO;CAGT,OAAO,cAAc,UAAU,QAAQ,iBAAiB,KAAK,iBAAiB;AAChF"}

package/dist/components/entries/code-entry.d.ts

@@ -0,0 +1,8 @@
+import { CodeEntrySchema } from "@alfakit/core";
+//#region src/components/entries/code-entry.d.ts
+/** `CodeEntry`: read-only code highlighted with the CodeEditor field's tokenizer. */
+export declare function CodeEntryComponent({ component }: {
+  component: CodeEntrySchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=code-entry.d.ts.map

package/dist/components/entries/code-entry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-entry.d.ts","names":[],"sources":["../../../src/components/entries/code-entry.tsx"],"mappings":";;;wBAUgB,qBAAqB;EAAe,WAAW;oBAAiB,IAAA"}

package/dist/components/entries/code-entry.js

@@ -0,0 +1,59 @@
+import { useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { EntryPlaceholder, EntryWrapper } from "./entry-wrapper.js";
+import { codeTokenClasses } from "../fields/code-tokens.js";
+import { highlightCode } from "@alfakit/core";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, CopyIcon } from "lucide-react";
+//#region src/components/entries/code-entry.tsx
+/** `CodeEntry`: read-only code highlighted with the CodeEditor field's tokenizer. */
+function CodeEntryComponent({ component }) {
+	const t = useT();
+	const [copied, setCopied] = useState(false);
+	const code = typeof component.state === "string" ? component.state : "";
+	const tokens = useMemo(() => highlightCode(code, component.grammar), [code, component.grammar]);
+	const copy = () => {
+		navigator.clipboard?.writeText(code).then(() => {
+			setCopied(true);
+			setTimeout(() => setCopied(false), component.copyMessageDuration ?? 1500);
+		});
+	};
+	return /* @__PURE__ */ jsx(EntryWrapper, {
+		entry: component,
+		children: code === "" ? /* @__PURE__ */ jsx(EntryPlaceholder, { entry: component }) : /* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [
+				/* @__PURE__ */ jsx("pre", {
+					dir: "ltr",
+					"data-slot": "code-entry",
+					"data-grammar": component.grammar ?? void 0,
+					"data-light-theme": component.lightTheme ?? void 0,
+					"data-dark-theme": component.darkTheme ?? void 0,
+					className: cn("bg-muted/40 m-0 overflow-auto rounded-md border p-3 font-mono text-sm leading-6 whitespace-pre", component.copyable && "pe-10"),
+					children: /* @__PURE__ */ jsx("code", { children: tokens.map((token, index) => token.kind === "plain" ? token.text : /* @__PURE__ */ jsx("span", {
+						className: codeTokenClasses[token.kind],
+						children: token.text
+					}, index)) })
+				}),
+				component.copyable && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"data-slot": "code-entry-copy",
+					className: "text-muted-foreground hover:text-foreground bg-background/80 absolute end-2 top-2 rounded-md p-1",
+					onClick: copy,
+					"aria-label": t("copy", {}, "Copy"),
+					children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) : /* @__PURE__ */ jsx(CopyIcon, { className: "size-4" })
+				}),
+				component.copyable && copied && /* @__PURE__ */ jsx("span", {
+					role: "status",
+					className: cn("text-xs", !component.copyMessage && "sr-only"),
+					children: component.copyMessage ?? t("copied", {}, "Copied")
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { CodeEntryComponent };
+
+//# sourceMappingURL=code-entry.js.map

package/dist/components/entries/code-entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-entry.js","names":[],"sources":["../../../src/components/entries/code-entry.tsx"],"sourcesContent":["import type { CodeEntrySchema } from '@alfakit/core'\nimport { highlightCode } from '@alfakit/core'\nimport { CheckIcon, CopyIcon } from 'lucide-react'\nimport { useMemo, useState } from 'react'\nimport { useT } from '../../context'\nimport { cn } from '../../lib/utils'\nimport { codeTokenClasses } from '../fields/code-tokens'\nimport { EntryPlaceholder, EntryWrapper } from './entry-wrapper'\n\n/** `CodeEntry`: read-only code highlighted with the CodeEditor field's tokenizer. */\nexport function CodeEntryComponent({ component }: { component: CodeEntrySchema }) {\n  const t = useT()\n  const [copied, setCopied] = useState(false)\n  const code = typeof component.state === 'string' ? component.state : ''\n  const tokens = useMemo(() => highlightCode(code, component.grammar), [code, component.grammar])\n\n  const copy = () => {\n    void navigator.clipboard?.writeText(code).then(() => {\n      setCopied(true)\n      setTimeout(() => setCopied(false), component.copyMessageDuration ?? 1500)\n    })\n  }\n\n  return (\n    <EntryWrapper entry={component}>\n      {code === '' ? (\n        <EntryPlaceholder entry={component} />\n      ) : (\n        <div className=\"relative\">\n          <pre\n            dir=\"ltr\"\n            data-slot=\"code-entry\"\n            data-grammar={component.grammar ?? undefined}\n            data-light-theme={component.lightTheme ?? undefined}\n            data-dark-theme={component.darkTheme ?? undefined}\n            className={cn(\n              'bg-muted/40 m-0 overflow-auto rounded-md border p-3 font-mono text-sm leading-6 whitespace-pre',\n              component.copyable && 'pe-10',\n            )}\n          >\n            <code>\n              {tokens.map((token, index) =>\n                token.kind === 'plain' ? (\n                  token.text\n                ) : (\n                  <span key={index} className={codeTokenClasses[token.kind]}>\n                    {token.text}\n                  </span>\n                ),\n              )}\n            </code>\n          </pre>\n          {component.copyable && (\n            <button\n              type=\"button\"\n              data-slot=\"code-entry-copy\"\n              className=\"text-muted-foreground hover:text-foreground bg-background/80 absolute end-2 top-2 rounded-md p-1\"\n              onClick={copy}\n              aria-label={t('copy', {}, 'Copy')}\n            >\n              {copied ? <CheckIcon className=\"size-4\" /> : <CopyIcon className=\"size-4\" />}\n            </button>\n          )}\n          {component.copyable && copied && (\n            <span role=\"status\" className={cn('text-xs', !component.copyMessage && 'sr-only')}>\n              {component.copyMessage ?? t('copied', {}, 'Copied')}\n            </span>\n          )}\n        </div>\n      )}\n    </EntryWrapper>\n  )\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,mBAAmB,EAAE,aAA6C;CAChF,MAAM,IAAI,KAAK;CACf,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,OAAO,OAAO,UAAU,UAAU,WAAW,UAAU,QAAQ;CACrE,MAAM,SAAS,cAAc,cAAc,MAAM,UAAU,OAAO,GAAG,CAAC,MAAM,UAAU,OAAO,CAAC;CAE9F,MAAM,aAAa;EACjB,UAAe,WAAW,UAAU,IAAI,CAAC,CAAC,WAAW;GACnD,UAAU,IAAI;GACd,iBAAiB,UAAU,KAAK,GAAG,UAAU,uBAAuB,IAAI;EAC1E,CAAC;CACH;CAEA,OACE,oBAAC,cAAD;EAAc,OAAO;EAClB,UAAA,SAAS,KACR,oBAAC,kBAAD,EAAkB,OAAO,UAAY,CAAA,IAErC,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,oBAAC,OAAD;KACE,KAAI;KACJ,aAAU;KACV,gBAAc,UAAU,WAAW,KAAA;KACnC,oBAAkB,UAAU,cAAc,KAAA;KAC1C,mBAAiB,UAAU,aAAa,KAAA;KACxC,WAAW,GACT,kGACA,UAAU,YAAY,OACxB;KAEA,UAAA,oBAAC,QAAD,EAAA,UACG,OAAO,KAAK,OAAO,UAClB,MAAM,SAAS,UACb,MAAM,OAEN,oBAAC,QAAD;MAAkB,WAAW,iBAAiB,MAAM;MACjD,UAAA,MAAM;KACH,GAFK,KAEL,CAEV,EACI,CAAA;IACH,CAAA;IACJ,UAAU,YACT,oBAAC,UAAD;KACE,MAAK;KACL,aAAU;KACV,WAAU;KACV,SAAS;KACT,cAAY,EAAE,QAAQ,CAAC,GAAG,MAAM;KAE/B,UAAA,SAAS,oBAAC,WAAD,EAAW,WAAU,SAAU,CAAA,IAAI,oBAAC,UAAD,EAAU,WAAU,SAAU,CAAA;IACrE,CAAA;IAET,UAAU,YAAY,UACrB,oBAAC,QAAD;KAAM,MAAK;KAAS,WAAW,GAAG,WAAW,CAAC,UAAU,eAAe,SAAS;KAC7E,UAAA,UAAU,eAAe,EAAE,UAAU,CAAC,GAAG,QAAQ;IAC9C,CAAA;GAEL;;CAEK,CAAA;AAElB"}

package/dist/components/entries/entry-wrapper.d.ts

@@ -0,0 +1,13 @@
+import { BaseEntry } from "@alfakit/core";
+import { ReactNode } from "react";
+//#region src/components/entries/entry-wrapper.d.ts
+export declare function EntryWrapper({ entry, children, className }: {
+  entry: BaseEntry;
+  children: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+export declare function EntryPlaceholder({ entry }: {
+  entry: BaseEntry;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=entry-wrapper.d.ts.map

package/dist/components/entries/entry-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry-wrapper.d.ts","names":[],"sources":["../../../src/components/entries/entry-wrapper.tsx"],"mappings":";;;wBAqBgB,eACd,OACA,UACA;EAEA,OAAO;EACP,UAAU;EACV;oBACD,IAAA;wBA2Ie,mBAAmB;EAAW,OAAO;oBAAW,IAAA"}

package/dist/components/entries/entry-wrapper.js

@@ -0,0 +1,175 @@
+import { cn } from "../../lib/utils.js";
+import { 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 { FieldAffixActions, FieldHintActions } from "../schema/field-actions.js";
+import { ContentSlot } from "../schema/content-slot.js";
+import { hasSlots } from "@alfakit/core";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/entries/entry-wrapper.tsx
+/** `alignment()`: text and inline content (badges, icons, images) follow it. */
+const ENTRY_ALIGNMENT = {
+	start: "text-start [&>*]:justify-start",
+	center: "text-center [&>*]:mx-auto [&>*]:justify-center",
+	end: "text-end [&>*]:ms-auto [&>*]:justify-end",
+	justify: "text-justify",
+	between: "text-justify"
+};
+function EntryWrapper({ entry, children, className }) {
+	const labelId = `${useId()}-label`;
+	const body = entry.tooltip ? /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "w-fit",
+			children
+		})
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: entry.tooltip })] }) : children;
+	const wrapperAttributes = entry.extraEntryWrapperAttributes;
+	const afterLabelAtStart = entry.slots?.afterLabel?.alignment === "start";
+	const afterLabelNode = /* @__PURE__ */ jsx(ContentSlot, {
+		component: entry,
+		name: "afterLabel"
+	});
+	const hintNode = entry.hint || entry.hintActions?.length || entry.slots?.afterLabel && !afterLabelAtStart ? /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex items-center gap-2",
+		children: [
+			entry.hint && /* @__PURE__ */ jsxs("span", {
+				className: cn("inline-flex items-center gap-1 text-xs", entry.hintColor ? textColorClasses[entry.hintColor] : "text-muted-foreground"),
+				children: [entry.hintIcon && /* @__PURE__ */ jsx(Icon, {
+					name: entry.hintIcon,
+					className: "size-3.5"
+				}), /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: entry.hint } })]
+			}),
+			entry.hintActions?.length ? /* @__PURE__ */ jsx(FieldHintActions, { component: entry }) : null,
+			!afterLabelAtStart && afterLabelNode
+		]
+	}) : null;
+	const labelNode = entry.label ? /* @__PURE__ */ jsx("span", {
+		id: labelId,
+		"data-slot": "entry-label",
+		className: "text-muted-foreground text-sm font-medium",
+		children: entry.label
+	}) : null;
+	const labelLine = labelNode || entry.slots?.beforeLabel || entry.slots?.afterLabel && afterLabelAtStart ? /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex min-w-0 items-center gap-2",
+		children: [
+			/* @__PURE__ */ jsx(ContentSlot, {
+				component: entry,
+				name: "beforeLabel"
+			}),
+			labelNode,
+			afterLabelAtStart && afterLabelNode
+		]
+	}) : null;
+	const affixed = /* @__PURE__ */ jsx(FieldAffixActions, {
+		component: entry,
+		children: body
+	});
+	const valueNode = /* @__PURE__ */ jsx("div", {
+		"data-slot": "entry-value",
+		"data-alignment": entry.alignment,
+		...extraProps(entry.extraAttributes, cn("text-sm", entry.alignment && ENTRY_ALIGNMENT[entry.alignment])),
+		children: hasSlots(entry, ["beforeContent", "afterContent"]) ? /* @__PURE__ */ jsxs("div", {
+			"data-slot": "entry-content",
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsx(ContentSlot, {
+					component: entry,
+					name: "beforeContent",
+					className: "shrink-0 flex-nowrap"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "min-w-0 flex-1",
+					children: affixed
+				}),
+				/* @__PURE__ */ jsx(ContentSlot, {
+					component: entry,
+					name: "afterContent",
+					className: "shrink-0 flex-nowrap"
+				})
+			]
+		}) : affixed
+	});
+	const helperNode = entry.helperText ? /* @__PURE__ */ jsx("p", {
+		className: "text-muted-foreground text-xs",
+		dangerouslySetInnerHTML: { __html: entry.helperText }
+	}) : null;
+	if (entry.inlineLabel) return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "entry",
+		"data-inline-label": "",
+		role: "group",
+		"aria-labelledby": entry.label ? labelId : void 0,
+		...extraProps(wrapperAttributes, cn("flex flex-col gap-1 sm:grid sm:grid-cols-3 sm:items-start sm:gap-x-4", className)),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1",
+			children: [
+				/* @__PURE__ */ jsx(ContentSlot, {
+					component: entry,
+					name: "aboveLabel"
+				}),
+				labelLine,
+				hintNode,
+				/* @__PURE__ */ jsx(ContentSlot, {
+					component: entry,
+					name: "belowLabel"
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-col gap-1 sm:col-span-2",
+			children: [
+				/* @__PURE__ */ jsx(ContentSlot, {
+					component: entry,
+					name: "aboveContent"
+				}),
+				valueNode,
+				helperNode,
+				/* @__PURE__ */ jsx(ContentSlot, {
+					component: entry,
+					name: "belowContent"
+				})
+			]
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "entry",
+		role: "group",
+		"aria-labelledby": entry.label ? labelId : void 0,
+		...extraProps(wrapperAttributes, cn("flex flex-col gap-1", className)),
+		children: [
+			/* @__PURE__ */ jsx(ContentSlot, {
+				component: entry,
+				name: "aboveLabel"
+			}),
+			(labelLine || hintNode) && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [labelLine ?? /* @__PURE__ */ jsx("span", {}), hintNode]
+			}),
+			/* @__PURE__ */ jsx(ContentSlot, {
+				component: entry,
+				name: "belowLabel"
+			}),
+			/* @__PURE__ */ jsx(ContentSlot, {
+				component: entry,
+				name: "aboveContent"
+			}),
+			valueNode,
+			helperNode,
+			/* @__PURE__ */ jsx(ContentSlot, {
+				component: entry,
+				name: "belowContent"
+			})
+		]
+	});
+}
+function EntryPlaceholder({ entry }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: entry.placeholder ?? "—"
+	});
+}
+//#endregion
+export { EntryPlaceholder, EntryWrapper };
+
+//# sourceMappingURL=entry-wrapper.js.map

package/dist/components/entries/entry-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry-wrapper.js","names":[],"sources":["../../../src/components/entries/entry-wrapper.tsx"],"sourcesContent":["import type { BaseEntry } from '@alfakit/core'\nimport { hasSlots } from '@alfakit/core'\nimport type { ReactNode } from 'react'\nimport { useId } from 'react'\nimport { extraProps } from '../../lib/attributes'\nimport { textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { ContentSlot } from '../schema/content-slot'\nimport { FieldAffixActions, FieldHintActions } from '../schema/field-actions'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip'\n\n/** `alignment()`: text and inline content (badges, icons, images) follow it. */\nconst ENTRY_ALIGNMENT: Record<string, string> = {\n  start: 'text-start [&>*]:justify-start',\n  center: 'text-center [&>*]:mx-auto [&>*]:justify-center',\n  end: 'text-end [&>*]:ms-auto [&>*]:justify-end',\n  justify: 'text-justify',\n  between: 'text-justify',\n}\n\nexport function EntryWrapper({\n  entry,\n  children,\n  className,\n}: {\n  entry: BaseEntry\n  children: ReactNode\n  className?: string\n}) {\n  const labelId = `${useId()}-label`\n  const body = entry.tooltip ? (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <div className=\"w-fit\">{children}</div>\n      </TooltipTrigger>\n      <TooltipContent>{entry.tooltip}</TooltipContent>\n    </Tooltip>\n  ) : (\n    children\n  )\n\n  // `extraEntryWrapperAttributes()` go on the wrapper, `extraAttributes()` on the value.\n  const wrapperAttributes = entry.extraEntryWrapperAttributes\n  // `afterLabel()` sits with the hint at the end of the label row unless aligned to the start.\n  const afterLabelAtStart = entry.slots?.afterLabel?.alignment === 'start'\n  const afterLabelNode = <ContentSlot component={entry} name=\"afterLabel\" />\n\n  const hintNode =\n    entry.hint || entry.hintActions?.length || (entry.slots?.afterLabel && !afterLabelAtStart) ? (\n      <span className=\"inline-flex items-center gap-2\">\n        {entry.hint && (\n          <span\n            className={cn(\n              'inline-flex items-center gap-1 text-xs',\n              entry.hintColor ? textColorClasses[entry.hintColor] : 'text-muted-foreground',\n            )}\n          >\n            {entry.hintIcon && <Icon name={entry.hintIcon} className=\"size-3.5\" />}\n            <span dangerouslySetInnerHTML={{ __html: entry.hint }} />\n          </span>\n        )}\n        {entry.hintActions?.length ? <FieldHintActions component={entry} /> : null}\n        {!afterLabelAtStart && afterLabelNode}\n      </span>\n    ) : null\n\n  const labelNode = entry.label ? (\n    <span\n      id={labelId}\n      data-slot=\"entry-label\"\n      className=\"text-muted-foreground text-sm font-medium\"\n    >\n      {entry.label}\n    </span>\n  ) : null\n\n  const labelLine =\n    labelNode || entry.slots?.beforeLabel || (entry.slots?.afterLabel && afterLabelAtStart) ? (\n      <span className=\"inline-flex min-w-0 items-center gap-2\">\n        <ContentSlot component={entry} name=\"beforeLabel\" />\n        {labelNode}\n        {afterLabelAtStart && afterLabelNode}\n      </span>\n    ) : null\n\n  const affixed = <FieldAffixActions component={entry}>{body}</FieldAffixActions>\n\n  const valueNode = (\n    <div\n      data-slot=\"entry-value\"\n      data-alignment={entry.alignment}\n      {...extraProps(\n        entry.extraAttributes,\n        cn('text-sm', entry.alignment && ENTRY_ALIGNMENT[entry.alignment]),\n      )}\n    >\n      {hasSlots(entry, ['beforeContent', 'afterContent']) ? (\n        <div data-slot=\"entry-content\" className=\"flex items-center gap-2\">\n          <ContentSlot component={entry} name=\"beforeContent\" className=\"shrink-0 flex-nowrap\" />\n          <div className=\"min-w-0 flex-1\">{affixed}</div>\n          <ContentSlot component={entry} name=\"afterContent\" className=\"shrink-0 flex-nowrap\" />\n        </div>\n      ) : (\n        affixed\n      )}\n    </div>\n  )\n\n  const helperNode = entry.helperText ? (\n    <p\n      className=\"text-muted-foreground text-xs\"\n      dangerouslySetInnerHTML={{ __html: entry.helperText }}\n    />\n  ) : null\n\n  // `inlineLabel()`: label beside the value from `sm` up, stacked on phones.\n  if (entry.inlineLabel) {\n    return (\n      <div\n        data-slot=\"entry\"\n        data-inline-label=\"\"\n        role=\"group\"\n        aria-labelledby={entry.label ? labelId : undefined}\n        {...extraProps(\n          wrapperAttributes,\n          cn('flex flex-col gap-1 sm:grid sm:grid-cols-3 sm:items-start sm:gap-x-4', className),\n        )}\n      >\n        <div className=\"flex flex-col gap-1\">\n          <ContentSlot component={entry} name=\"aboveLabel\" />\n          {labelLine}\n          {hintNode}\n          <ContentSlot component={entry} name=\"belowLabel\" />\n        </div>\n        <div className=\"flex min-w-0 flex-col gap-1 sm:col-span-2\">\n          <ContentSlot component={entry} name=\"aboveContent\" />\n          {valueNode}\n          {helperNode}\n          <ContentSlot component={entry} name=\"belowContent\" />\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div\n      data-slot=\"entry\"\n      role=\"group\"\n      aria-labelledby={entry.label ? labelId : undefined}\n      {...extraProps(wrapperAttributes, cn('flex flex-col gap-1', className))}\n    >\n      <ContentSlot component={entry} name=\"aboveLabel\" />\n      {(labelLine || hintNode) && (\n        <div className=\"flex items-center justify-between gap-2\">\n          {labelLine ?? <span />}\n          {hintNode}\n        </div>\n      )}\n      <ContentSlot component={entry} name=\"belowLabel\" />\n      <ContentSlot component={entry} name=\"aboveContent\" />\n      {valueNode}\n      {helperNode}\n      <ContentSlot component={entry} name=\"belowContent\" />\n    </div>\n  )\n}\n\nexport function EntryPlaceholder({ entry }: { entry: BaseEntry }) {\n  return <span className=\"text-muted-foreground\">{entry.placeholder ?? '—'}</span>\n}\n"],"mappings":"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"}

package/dist/components/entries/index.d.ts

@@ -0,0 +1,6 @@
+import { CodeEntryComponent } from "./code-entry.js";
+import { EntryPlaceholder, EntryWrapper } from "./entry-wrapper.js";
+import { ColorEntryComponent, IconEntryComponent, ImageEntryComponent, KeyValueEntryComponent, RepeatableEntryComponent } from "./other-entries.js";
+import { FormattedText, TextEntryComponent } from "./text-entry.js";
+import { ViewEntryComponent } from "./view-entry.js";
+export { CodeEntryComponent, ColorEntryComponent, EntryPlaceholder, EntryWrapper, FormattedText, IconEntryComponent, ImageEntryComponent, KeyValueEntryComponent, RepeatableEntryComponent, TextEntryComponent, ViewEntryComponent };

package/dist/components/entries/other-entries.d.ts

@@ -0,0 +1,20 @@
+import { BaseEntry, ColorEntrySchema, IconEntrySchema, ImageEntrySchema, KeyValueEntrySchema, RepeatableEntrySchema } from "@alfakit/core";
+import { ReactNode } from "react";
+//#region src/components/entries/other-entries.d.ts
+export declare function IconEntryComponent({ component }: {
+  component: IconEntrySchema;
+}): import("react").JSX.Element;
+export declare function ImageEntryComponent({ component }: {
+  component: ImageEntrySchema;
+}): import("react").JSX.Element;
+export declare function ColorEntryComponent({ component }: {
+  component: ColorEntrySchema;
+}): import("react").JSX.Element;
+export declare function KeyValueEntryComponent({ component }: {
+  component: KeyValueEntrySchema;
+}): import("react").JSX.Element;
+export declare function RepeatableEntryComponent({ component }: {
+  component: RepeatableEntrySchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=other-entries.d.ts.map

package/dist/components/entries/other-entries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"other-entries.d.ts","names":[],"sources":["../../../src/components/entries/other-entries.tsx"],"mappings":";;;wBAqDgB,qBAAqB;EAAe,WAAW;oBAAiB,IAAA;wBAoBhE,sBAAsB;EAAe,WAAW;oBAAkB,IAAA;wBAyDlE,sBAAsB;EAAe,WAAW;oBAAkB,IAAA;wBA4ClE,yBAAyB;EAAe,WAAW;oBAAqB,IAAA;wBAiCxE,2BAA2B;EAAe,WAAW;oBAAuB,IAAA"}

package/dist/components/entries/other-entries.js

@@ -0,0 +1,169 @@
+import { cn } from "../../lib/utils.js";
+import { textColorClasses } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { extraProps } from "../../lib/attributes.js";
+import { SchemaRenderer } from "../schema/schema-renderer.js";
+import { NewTabHint } from "../../lib/new-tab-hint.js";
+import { EntryPlaceholder, EntryWrapper } from "./entry-wrapper.js";
+import { FormattedText } from "./text-entry.js";
+import { RepeatableEntryTable } from "./repeatable-entry-table.js";
+import { gridColumnsClasses, remainingTextSizeClass, stackedImageStyle, usesDefaultImageStack } from "@alfakit/core";
+import { Link } from "@inertiajs/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/entries/other-entries.tsx
+/** Wrap an entry's content in its `url()` link (icon, image and colour entries). */
+function EntryLink({ entry, children }) {
+	if (!entry.url) return /* @__PURE__ */ jsx(Fragment, { children });
+	return entry.openUrlInNewTab ? /* @__PURE__ */ jsxs("a", {
+		href: entry.url,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className: "inline-flex w-fit",
+		children: [children, /* @__PURE__ */ jsx(NewTabHint, {})]
+	}) : /* @__PURE__ */ jsx(Link, {
+		href: entry.url,
+		className: "inline-flex w-fit",
+		children
+	});
+}
+const ICON_SIZES = {
+	xs: "size-3",
+	sm: "size-4",
+	md: "size-5",
+	lg: "size-6",
+	xl: "size-8",
+	"2xl": "size-10"
+};
+function IconEntryComponent({ component }) {
+	return /* @__PURE__ */ jsx(EntryWrapper, {
+		entry: component,
+		children: component.icon ? /* @__PURE__ */ jsx(EntryLink, {
+			entry: component,
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: component.icon,
+				className: cn(ICON_SIZES[component.size ?? "md"], component.color && textColorClasses[component.color])
+			})
+		}) : /* @__PURE__ */ jsx(EntryPlaceholder, { entry: component })
+	});
+}
+function ImageEntryComponent({ component }) {
+	const urls = component.state ?? [];
+	const limit = component.limit ?? urls.length;
+	const size = component.size ?? 40;
+	const style = {
+		height: component.height ?? size,
+		width: component.width ?? (component.square || component.circular ? size : void 0)
+	};
+	return /* @__PURE__ */ jsx(EntryWrapper, {
+		entry: component,
+		children: urls.length === 0 ? /* @__PURE__ */ jsx(EntryPlaceholder, { entry: component }) : /* @__PURE__ */ jsx(EntryLink, {
+			entry: component,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center", component.stacked ? usesDefaultImageStack(component) && "-space-x-2" : "gap-2"),
+				children: [urls.slice(0, limit).map((url, index) => /* @__PURE__ */ jsx("img", {
+					src: url,
+					alt: component.alts?.[index] ?? component.alt ?? "",
+					style: {
+						...style,
+						...stackedImageStyle(index, component)
+					},
+					...extraProps(component.extraImgAttributes, cn("object-cover", component.circular ? "rounded-full" : "rounded-md", component.stacked && usesDefaultImageStack(component) && "ring-background ring-2"))
+				}, index)), component.limitedRemainingText !== false && urls.length > limit && /* @__PURE__ */ jsxs("span", {
+					"data-slot": "image-remaining",
+					className: cn("text-muted-foreground", remainingTextSizeClass(component.limitedRemainingTextSize)),
+					children: ["+", urls.length - limit]
+				})]
+			})
+		})
+	});
+}
+function ColorEntryComponent({ component }) {
+	const colors = Array.isArray(component.state) ? component.state : component.state ? [component.state] : [];
+	return /* @__PURE__ */ jsx(EntryWrapper, {
+		entry: component,
+		children: colors.length === 0 ? /* @__PURE__ */ jsx(EntryPlaceholder, { entry: component }) : /* @__PURE__ */ jsx(EntryLink, {
+			entry: component,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: colors.map((color, index) => /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center gap-1.5 text-sm",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "size-5 rounded border shadow-xs",
+						style: { backgroundColor: color }
+					}), component.copyable && /* @__PURE__ */ jsx(FormattedText, {
+						value: color,
+						className: "text-xs",
+						schema: {
+							size: component.size,
+							weight: component.weight,
+							fontFamily: component.fontFamily ?? "mono",
+							copyable: true,
+							copyMessage: component.copyMessage,
+							copyMessageDuration: component.copyMessageDuration
+						}
+					})]
+				}, index))
+			})
+		})
+	});
+}
+function KeyValueEntryComponent({ component }) {
+	const entries = Object.entries(component.state ?? {});
+	return /* @__PURE__ */ jsx(EntryWrapper, {
+		entry: component,
+		children: entries.length === 0 ? /* @__PURE__ */ jsx(EntryPlaceholder, { entry: component }) : /* @__PURE__ */ jsx("div", {
+			className: "overflow-hidden rounded-md border",
+			children: /* @__PURE__ */ jsxs("table", {
+				className: "w-full text-sm",
+				children: [/* @__PURE__ */ jsx("thead", {
+					className: "bg-muted/50 text-muted-foreground text-xs",
+					children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+						className: "px-3 py-1.5 text-start font-medium",
+						children: component.keyLabel
+					}), /* @__PURE__ */ jsx("th", {
+						className: "px-3 py-1.5 text-start font-medium",
+						children: component.valueLabel
+					})] })
+				}), /* @__PURE__ */ jsx("tbody", { children: entries.map(([key, value]) => /* @__PURE__ */ jsxs("tr", {
+					className: "border-t",
+					children: [/* @__PURE__ */ jsx("td", {
+						className: "px-3 py-1.5 font-medium",
+						children: key
+					}), /* @__PURE__ */ jsx("td", {
+						className: "px-3 py-1.5",
+						children: typeof value === "object" ? JSON.stringify(value) : String(value)
+					})]
+				}, key)) })]
+			})
+		})
+	});
+}
+function RepeatableEntryComponent({ component }) {
+	return /* @__PURE__ */ jsx(EntryWrapper, {
+		entry: component,
+		children: component.items.length === 0 ? /* @__PURE__ */ jsx(EntryPlaceholder, { entry: component }) : component.table?.length ? /* @__PURE__ */ jsx(RepeatableEntryTable, {
+			columns: component.table,
+			items: component.items
+		}) : /* @__PURE__ */ jsx("div", {
+			className: cn("grid gap-3", component.grid && gridColumnsClasses(component.grid)),
+			children: component.items.map((item, index) => /* @__PURE__ */ jsx("div", {
+				className: cn(component.contained && "bg-card rounded-lg border p-4 shadow-xs"),
+				children: /* @__PURE__ */ jsx("div", {
+					className: "contents",
+					children: /* @__PURE__ */ jsx(SchemaRenderer, {
+						components: item,
+						columns: component.columns ?? {
+							default: 1,
+							lg: 2
+						},
+						className: "gap-4"
+					})
+				})
+			}, index))
+		})
+	});
+}
+//#endregion
+export { ColorEntryComponent, EntryLink, IconEntryComponent, ImageEntryComponent, KeyValueEntryComponent, RepeatableEntryComponent };
+
+//# sourceMappingURL=other-entries.js.map

package/dist/components/entries/other-entries.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"other-entries.js","names":[],"sources":["../../../src/components/entries/other-entries.tsx"],"sourcesContent":["import type {\n  BaseEntry,\n  ColorEntrySchema,\n  IconEntrySchema,\n  ImageEntrySchema,\n  KeyValueEntrySchema,\n  RepeatableEntrySchema,\n} from '@alfakit/core'\nimport {\n  gridColumnsClasses,\n  remainingTextSizeClass,\n  stackedImageStyle,\n  usesDefaultImageStack,\n} from '@alfakit/core'\nimport { Link } from '@inertiajs/react'\nimport type { ReactNode } from 'react'\nimport { extraProps } from '../../lib/attributes'\nimport { textColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { NewTabHint } from '../../lib/new-tab-hint'\nimport { cn } from '../../lib/utils'\nimport { SchemaRenderer } from '../schema/schema-renderer'\nimport { EntryPlaceholder, EntryWrapper } from './entry-wrapper'\nimport { RepeatableEntryTable } from './repeatable-entry-table'\nimport { FormattedText } from './text-entry'\n\n/** Wrap an entry's content in its `url()` link (icon, image and colour entries). */\nexport function EntryLink({ entry, children }: { entry: BaseEntry; children: ReactNode }) {\n  if (!entry.url) {\n    return <>{children}</>\n  }\n\n  return entry.openUrlInNewTab ? (\n    <a href={entry.url} target=\"_blank\" rel=\"noopener noreferrer\" className=\"inline-flex w-fit\">\n      {children}\n      <NewTabHint />\n    </a>\n  ) : (\n    <Link href={entry.url} className=\"inline-flex w-fit\">\n      {children}\n    </Link>\n  )\n}\n\nconst ICON_SIZES: Record<string, string> = {\n  xs: 'size-3',\n  sm: 'size-4',\n  md: 'size-5',\n  lg: 'size-6',\n  xl: 'size-8',\n  '2xl': 'size-10',\n}\n\nexport function IconEntryComponent({ component }: { component: IconEntrySchema }) {\n  return (\n    <EntryWrapper entry={component}>\n      {component.icon ? (\n        <EntryLink entry={component}>\n          <Icon\n            name={component.icon}\n            className={cn(\n              ICON_SIZES[component.size ?? 'md'],\n              component.color && textColorClasses[component.color],\n            )}\n          />\n        </EntryLink>\n      ) : (\n        <EntryPlaceholder entry={component} />\n      )}\n    </EntryWrapper>\n  )\n}\n\nexport function ImageEntryComponent({ component }: { component: ImageEntrySchema }) {\n  const urls = component.state ?? []\n  const limit = component.limit ?? urls.length\n  const size = component.size ?? 40\n  const style = {\n    height: component.height ?? size,\n    width: component.width ?? (component.square || component.circular ? size : undefined),\n  }\n\n  return (\n    <EntryWrapper entry={component}>\n      {urls.length === 0 ? (\n        <EntryPlaceholder entry={component} />\n      ) : (\n        <EntryLink entry={component}>\n          <div\n            className={cn(\n              'flex items-center',\n              component.stacked ? usesDefaultImageStack(component) && '-space-x-2' : 'gap-2',\n            )}\n          >\n            {urls.slice(0, limit).map((url, index) => (\n              <img\n                key={index}\n                src={url}\n                alt={component.alts?.[index] ?? component.alt ?? ''}\n                style={{ ...style, ...stackedImageStyle(index, component) }}\n                {...extraProps(\n                  component.extraImgAttributes,\n                  cn(\n                    'object-cover',\n                    component.circular ? 'rounded-full' : 'rounded-md',\n                    component.stacked &&\n                      usesDefaultImageStack(component) &&\n                      'ring-background ring-2',\n                  ),\n                )}\n              />\n            ))}\n            {component.limitedRemainingText !== false && urls.length > limit && (\n              <span\n                data-slot=\"image-remaining\"\n                className={cn(\n                  'text-muted-foreground',\n                  remainingTextSizeClass(component.limitedRemainingTextSize),\n                )}\n              >\n                +{urls.length - limit}\n              </span>\n            )}\n          </div>\n        </EntryLink>\n      )}\n    </EntryWrapper>\n  )\n}\n\nexport function ColorEntryComponent({ component }: { component: ColorEntrySchema }) {\n  const colors = Array.isArray(component.state)\n    ? component.state\n    : component.state\n      ? [component.state]\n      : []\n\n  return (\n    <EntryWrapper entry={component}>\n      {colors.length === 0 ? (\n        <EntryPlaceholder entry={component} />\n      ) : (\n        <EntryLink entry={component}>\n          <div className=\"flex flex-wrap items-center gap-2\">\n            {colors.map((color, index) => (\n              <span key={index} className=\"inline-flex items-center gap-1.5 text-sm\">\n                <span\n                  className=\"size-5 rounded border shadow-xs\"\n                  style={{ backgroundColor: color }}\n                />\n                {/* The code honours the entry's text styles and copy settings. */}\n                {component.copyable && (\n                  <FormattedText\n                    value={color}\n                    className=\"text-xs\"\n                    schema={{\n                      size: component.size,\n                      weight: component.weight,\n                      fontFamily: component.fontFamily ?? 'mono',\n                      copyable: true,\n                      copyMessage: component.copyMessage,\n                      copyMessageDuration: component.copyMessageDuration,\n                    }}\n                  />\n                )}\n              </span>\n            ))}\n          </div>\n        </EntryLink>\n      )}\n    </EntryWrapper>\n  )\n}\n\nexport function KeyValueEntryComponent({ component }: { component: KeyValueEntrySchema }) {\n  const entries = Object.entries(component.state ?? {})\n\n  return (\n    <EntryWrapper entry={component}>\n      {entries.length === 0 ? (\n        <EntryPlaceholder entry={component} />\n      ) : (\n        <div className=\"overflow-hidden rounded-md border\">\n          <table className=\"w-full text-sm\">\n            <thead className=\"bg-muted/50 text-muted-foreground text-xs\">\n              <tr>\n                <th className=\"px-3 py-1.5 text-start font-medium\">{component.keyLabel}</th>\n                <th className=\"px-3 py-1.5 text-start font-medium\">{component.valueLabel}</th>\n              </tr>\n            </thead>\n            <tbody>\n              {entries.map(([key, value]) => (\n                <tr key={key} className=\"border-t\">\n                  <td className=\"px-3 py-1.5 font-medium\">{key}</td>\n                  <td className=\"px-3 py-1.5\">\n                    {typeof value === 'object' ? JSON.stringify(value) : String(value)}\n                  </td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </div>\n      )}\n    </EntryWrapper>\n  )\n}\n\nexport function RepeatableEntryComponent({ component }: { component: RepeatableEntrySchema }) {\n  return (\n    <EntryWrapper entry={component}>\n      {component.items.length === 0 ? (\n        <EntryPlaceholder entry={component} />\n      ) : component.table?.length ? (\n        <RepeatableEntryTable columns={component.table} items={component.items} />\n      ) : (\n        <div className={cn('grid gap-3', component.grid && gridColumnsClasses(component.grid))}>\n          {component.items.map((item, index) => (\n            <div\n              key={index}\n              className={cn(component.contained && 'bg-card rounded-lg border p-4 shadow-xs')}\n            >\n              <div className=\"contents\">\n                <SchemaRenderer\n                  components={item}\n                  columns={component.columns ?? { default: 1, lg: 2 }}\n                  className=\"gap-4\"\n                />\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n    </EntryWrapper>\n  )\n}\n"],"mappings":"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"}