@lar-works/design-system 0.0.0-stage → 0.1.0

package/dist/display/DeviceCard.js

@@ -0,0 +1,48 @@
+import { Inline, Stack } from "../layout/Flow.js";
+import { Text } from "../typography/Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/display/DeviceCard.tsx
+/** One piece of hardware: its name and detail, a corner control and its content. */
+function DeviceCard({ action, badge, children, detail, footer, name, unavailable = false }) {
+	return /* @__PURE__ */ jsxs("article", {
+		"aria-label": name,
+		className: `flex min-w-0 flex-col gap-4 rounded-lg p-4 ${unavailable ? "border-base-300 border border-dashed" : "border-base-300 bg-base-100 border shadow-xs"}`,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-start justify-between gap-3",
+				children: [/* @__PURE__ */ jsxs(Stack, {
+					space: "none",
+					className: "min-w-0",
+					children: [/* @__PURE__ */ jsxs(Inline, {
+						align: "center",
+						space: "related",
+						className: "min-w-0",
+						children: [/* @__PURE__ */ jsx(Text, {
+							as: "span",
+							variant: "label",
+							truncate: true,
+							title: name,
+							children: name
+						}), badge]
+					}), detail ? /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						variant: "caption",
+						tone: "muted",
+						children: detail
+					}) : null]
+				}), action ? /* @__PURE__ */ jsx("div", {
+					className: "w-28 shrink-0",
+					children: action
+				}) : null]
+			}),
+			children,
+			footer ? /* @__PURE__ */ jsx("div", {
+				className: "border-base-300 border-t pt-3",
+				children: footer
+			}) : null
+		]
+	});
+}
+export { DeviceCard };
+
+//# sourceMappingURL=DeviceCard.js.map

package/dist/display/DeviceCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceCard.js","names":[],"sources":["../../src/display/DeviceCard.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Inline, Stack } from '../layout/Flow';\nimport { Text } from '../typography/Typography';\n\ninterface DeviceCardProps {\n    /** A control in the top corner, for example a limit select. */\n    action?: ReactNode;\n    /** Beside the name, for example a status badge. */\n    badge?: ReactNode;\n    children: ReactNode;\n    detail?: string;\n    /** Below the content, past a divider, for example the device's encoder. */\n    footer?: ReactNode;\n    /** Dashed, for a device that is detected but cannot be used. */\n    unavailable?: boolean;\n    name: string;\n}\n\n/** One piece of hardware: its name and detail, a corner control and its content. */\nexport function DeviceCard({ action, badge, children, detail, footer, name, unavailable = false }: DeviceCardProps) {\n    return (\n        <article\n            aria-label={name}\n            className={`flex min-w-0 flex-col gap-4 rounded-lg p-4 ${\n                unavailable ? 'border-base-300 border border-dashed' : 'border-base-300 bg-base-100 border shadow-xs'\n            }`}\n        >\n            <div className=\"flex min-w-0 items-start justify-between gap-3\">\n                <Stack space=\"none\" className=\"min-w-0\">\n                    <Inline align=\"center\" space=\"related\" className=\"min-w-0\">\n                        <Text as=\"span\" variant=\"label\" truncate title={name}>\n                            {name}\n                        </Text>\n                        {badge}\n                    </Inline>\n                    {detail ? (\n                        <Text as=\"span\" variant=\"caption\" tone=\"muted\">\n                            {detail}\n                        </Text>\n                    ) : null}\n                </Stack>\n                {action ? <div className=\"w-28 shrink-0\">{action}</div> : null}\n            </div>\n            {children}\n            {footer ? <div className=\"border-base-300 border-t pt-3\">{footer}</div> : null}\n        </article>\n    );\n}\n"],"mappings":";;;;;AAoBA,SAAgB,WAAW,EAAE,QAAQ,OAAO,UAAU,QAAQ,QAAQ,MAAM,cAAc,SAA0B;CAChH,OACI,qBAAC,WAAD;EACI,cAAY;EACZ,WAAW,8CACP,cAAc,yCAAyC;EAH/D,UAAA;GAMI,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACI,qBAAC,OAAD;KAAO,OAAM;KAAO,WAAU;KAA9B,UAAA,CACI,qBAAC,QAAD;MAAQ,OAAM;MAAS,OAAM;MAAU,WAAU;MAAjD,UAAA,CACI,oBAAC,MAAD;OAAM,IAAG;OAAO,SAAQ;OAAQ,UAAA;OAAS,OAAO;OAC3C,UAAA;MACC,CAAA,GACL,KACG;KACP,CAAA,GAAA,SACG,oBAAC,MAAD;MAAM,IAAG;MAAO,SAAQ;MAAU,MAAK;MAClC,UAAA;KACC,CAAA,IACN,IACD;IACN,CAAA,GAAA,SAAS,oBAAC,OAAD;KAAK,WAAU;KAAiB,UAAA;IAAY,CAAA,IAAI,IACzD;;GACJ;GACA,SAAS,oBAAC,OAAD;IAAK,WAAU;IAAiC,UAAA;GAAY,CAAA,IAAI;EACrE;;AAEjB"}

package/dist/display/Identity.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+interface IdentityProps {
+  artwork: ReactNode;
+  detail?: string;
+  tag?: string;
+  title?: ReactNode;
+  presentation?: 'square' | 'poster';
+  /** Heads its page: a larger poster, an overline naming what it belongs to, and the title as the page's h1. */
+  overline?: string;
+}
+/** A compact "what is this" strip: small framed artwork beside a title, one line of facts, and an optional tag. */
+export declare function Identity({ artwork, detail, tag, title, overline, presentation }: IdentityProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Identity.d.ts.map

package/dist/display/Identity.js

@@ -0,0 +1,54 @@
+import { Stack } from "../layout/Flow.js";
+import { Heading, Text } from "../typography/Typography.js";
+import { Badge } from "./Badge.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/display/Identity.tsx
+/** A compact "what is this" strip: small framed artwork beside a title, one line of facts, and an optional tag. */
+function Identity({ artwork, detail, tag, title, overline, presentation = "square" }) {
+	const heading = overline !== void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex min-w-0 items-center ${heading ? "gap-6" : "gap-4"}`,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: `${presentation === "poster" ? `${heading ? "w-24" : "w-16"} aspect-[2/3]` : "size-16"} ring-base-900/10 shrink-0 overflow-hidden rounded-lg shadow-sm ring-1`,
+			children: artwork
+		}), /* @__PURE__ */ jsxs(Stack, {
+			space: "tight",
+			className: "min-w-0 flex-1",
+			children: [
+				heading ? /* @__PURE__ */ jsx(Text, {
+					variant: "overline",
+					tone: "muted",
+					truncate: true,
+					children: overline
+				}) : null,
+				title && heading ? /* @__PURE__ */ jsx(Heading, {
+					as: "h1",
+					variant: "page",
+					children: title
+				}) : title ? /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					truncate: true,
+					variant: "label",
+					children: title
+				}) : null,
+				detail ? /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					truncate: true,
+					title: detail,
+					tone: "muted",
+					children: detail
+				}) : null,
+				tag ? /* @__PURE__ */ jsx("div", {
+					className: "mt-1 flex",
+					children: /* @__PURE__ */ jsx(Badge, {
+						tone: "neutral",
+						children: tag
+					})
+				}) : null
+			]
+		})]
+	});
+}
+export { Identity };
+
+//# sourceMappingURL=Identity.js.map

package/dist/display/Identity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Identity.js","names":[],"sources":["../../src/display/Identity.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Stack } from '../layout/Flow';\nimport { Heading, Text } from '../typography/Typography';\nimport { Badge } from './Badge';\n\ninterface IdentityProps {\n    artwork: ReactNode;\n    detail?: string;\n    tag?: string;\n    title?: ReactNode;\n    presentation?: 'square' | 'poster';\n    /** Heads its page: a larger poster, an overline naming what it belongs to, and the title as the page's h1. */\n    overline?: string;\n}\n\n/** A compact \"what is this\" strip: small framed artwork beside a title, one line of facts, and an optional tag. */\nexport function Identity({ artwork, detail, tag, title, overline, presentation = 'square' }: IdentityProps) {\n    const heading = overline !== undefined;\n\n    return (\n        <div className={`flex min-w-0 items-center ${heading ? 'gap-6' : 'gap-4'}`}>\n            <div\n                className={`${presentation === 'poster' ? `${heading ? 'w-24' : 'w-16'} aspect-[2/3]` : 'size-16'} ring-base-900/10 shrink-0 overflow-hidden rounded-lg shadow-sm ring-1`}\n            >\n                {artwork}\n            </div>\n            <Stack space=\"tight\" className=\"min-w-0 flex-1\">\n                {heading ? (\n                    <Text variant=\"overline\" tone=\"muted\" truncate>\n                        {overline}\n                    </Text>\n                ) : null}\n                {title && heading ? (\n                    <Heading as=\"h1\" variant=\"page\">\n                        {title}\n                    </Heading>\n                ) : title ? (\n                    <Text as=\"span\" truncate variant=\"label\">\n                        {title}\n                    </Text>\n                ) : null}\n                {detail ? (\n                    <Text as=\"span\" truncate title={detail} tone=\"muted\">\n                        {detail}\n                    </Text>\n                ) : null}\n                {tag ? (\n                    <div className=\"mt-1 flex\">\n                        <Badge tone=\"neutral\">{tag}</Badge>\n                    </div>\n                ) : null}\n            </Stack>\n        </div>\n    );\n}\n"],"mappings":";;;;;;AAiBA,SAAgB,SAAS,EAAE,SAAS,QAAQ,KAAK,OAAO,UAAU,eAAe,YAA2B;CACxG,MAAM,UAAU,aAAa,KAAA;CAE7B,OACI,qBAAC,OAAD;EAAK,WAAW,6BAA6B,UAAU,UAAU;EAAjE,UAAA,CACI,oBAAC,OAAD;GACI,WAAW,GAAG,iBAAiB,WAAW,GAAG,UAAU,SAAS,OAAO,iBAAiB,UAAU;GAEjG,UAAA;EACA,CAAA,GACL,qBAAC,OAAD;GAAO,OAAM;GAAQ,WAAU;GAA/B,UAAA;IACK,UACG,oBAAC,MAAD;KAAM,SAAQ;KAAW,MAAK;KAAQ,UAAA;KACjC,UAAA;IACC,CAAA,IACN;IACH,SAAS,UACN,oBAAC,SAAD;KAAS,IAAG;KAAK,SAAQ;KACpB,UAAA;IACI,CAAA,IACT,QACA,oBAAC,MAAD;KAAM,IAAG;KAAO,UAAA;KAAS,SAAQ;KAC5B,UAAA;IACC,CAAA,IACN;IACH,SACG,oBAAC,MAAD;KAAM,IAAG;KAAO,UAAA;KAAS,OAAO;KAAQ,MAAK;KACxC,UAAA;IACC,CAAA,IACN;IACH,MACG,oBAAC,OAAD;KAAK,WAAU;KACX,UAAA,oBAAC,OAAD;MAAO,MAAK;MAAW,UAAA;KAAW,CAAA;IACjC,CAAA,IACL;GACD;EACN,CAAA,CAAA;;AAEb"}

package/dist/display/ImageCard.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+type ImageCardProps = {
+  loading: true;
+  textRows?: 1 | 2 | 3;
+  aspect?: 'square' | 'poster';
+} | {
+  loading?: false;
+  artwork: ReactNode;
+  onClick?: () => void;
+  href?: string;
+  onNavigate?: (href: string) => void;
+  subtitle?: ReactNode;
+  label?: string;
+  detail?: string;
+  title: string;
+  presentation?: 'person' | 'poster';
+  /** A short qualifier shown muted after the title on the same line, such as an edition. */
+  titleDetail?: string;
+};
+export declare function ImageCard(props: ImageCardProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ImageCard.d.ts.map

package/dist/display/ImageCard.js

@@ -0,0 +1,63 @@
+import { SkeletonLoader } from "../feedback/SkeletonLoader.js";
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { Stack } from "../layout/Flow.js";
+import { LinkBox, LinkOverlay } from "../typography/Link.js";
+import { Text } from "../typography/Typography.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/display/ImageCard.tsx
+function ImageCard(props) {
+	const lines = props.loading ? Array.from({ length: props.textRows ?? 2 }, () => void 0) : [
+		props.titleDetail ? /* @__PURE__ */ jsxs(Fragment, { children: [props.title, /* @__PURE__ */ jsxs("span", {
+			className: "text-base-700 font-normal",
+			children: [" · ", props.titleDetail]
+		})] }) : props.title,
+		...props.subtitle || props.detail ? [props.subtitle || "\xA0"] : [],
+		...props.detail ? [props.detail] : []
+	];
+	const label = props.loading ? void 0 : props.label ?? [
+		props.title,
+		props.titleDetail,
+		typeof props.subtitle === "string" ? props.subtitle : void 0,
+		props.detail
+	].filter(Boolean).join(", ");
+	const content = /* @__PURE__ */ jsxs(Stack, {
+		space: "related",
+		className: "min-w-0 text-left",
+		children: [props.loading ? /* @__PURE__ */ jsx(SkeletonLoader.Shape, { presentation: props.aspect === "poster" ? "poster" : "artwork" }) : props.presentation === "person" ? /* @__PURE__ */ jsx("span", {
+			className: "block size-16 overflow-hidden rounded-full [&>div]:size-full",
+			children: props.artwork
+		}) : props.artwork, /* @__PURE__ */ jsx(Stack, {
+			space: "none",
+			className: "min-w-0",
+			children: lines.map((line, index) => /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				variant: index === 0 ? "label" : "caption",
+				tone: index === 0 ? "default" : "muted",
+				truncate: props.loading || !props.presentation,
+				className: !props.loading && props.presentation ? "wrap-anywhere" : void 0,
+				loading: props.loading,
+				children: !props.loading && props.href && index === 0 ? /* @__PURE__ */ jsx(LinkOverlay, {
+					href: props.href,
+					onNavigate: props.onNavigate,
+					"aria-label": label,
+					children: line
+				}) : line
+			}, index))
+		})]
+	});
+	if (props.loading || !props.href && !props.onClick) return content;
+	return /* @__PURE__ */ jsxs(LinkBox, {
+		className: "group/media-item rounded-lg",
+		children: [content, !props.href && props.onClick ? /* @__PURE__ */ jsx("button", {
+			...tabbable,
+			type: "button",
+			"data-slot": "action-overlay",
+			"aria-label": label,
+			className: "focus-visible:outline-primary absolute inset-0 z-1 w-full cursor-pointer rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2",
+			onClick: props.onClick
+		}) : null]
+	});
+}
+export { ImageCard };
+
+//# sourceMappingURL=ImageCard.js.map

package/dist/display/ImageCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCard.js","names":[],"sources":["../../src/display/ImageCard.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { SkeletonLoader } from '../feedback/SkeletonLoader';\nimport { tabbable } from '../foundations/KeyboardFocus';\nimport { Stack } from '../layout/Flow';\nimport { LinkBox, LinkOverlay } from '../typography/Link';\nimport { Text } from '../typography/Typography';\n\ntype ImageCardProps =\n    | { loading: true; textRows?: 1 | 2 | 3; aspect?: 'square' | 'poster' }\n    | {\n          loading?: false;\n          artwork: ReactNode;\n          onClick?: () => void;\n          href?: string;\n          onNavigate?: (href: string) => void;\n          subtitle?: ReactNode;\n          label?: string;\n          detail?: string;\n          title: string;\n          presentation?: 'person' | 'poster';\n          /** A short qualifier shown muted after the title on the same line, such as an edition. */\n          titleDetail?: string;\n      };\n\nexport function ImageCard(props: ImageCardProps) {\n    const lines = props.loading\n        ? Array.from<unknown, ReactNode>({ length: props.textRows ?? 2 }, () => undefined)\n        : [\n              props.titleDetail ? (\n                  <>\n                      {props.title}\n                      <span className=\"text-base-700 font-normal\"> · {props.titleDetail}</span>\n                  </>\n              ) : (\n                  props.title\n              ),\n              ...(props.subtitle || props.detail ? [props.subtitle || '\\u00a0'] : []),\n              ...(props.detail ? [props.detail] : []),\n          ];\n    const label = props.loading\n        ? undefined\n        : (props.label ??\n          [\n              props.title,\n              props.titleDetail,\n              typeof props.subtitle === 'string' ? props.subtitle : undefined,\n              props.detail,\n          ]\n              .filter(Boolean)\n              .join(', '));\n    const content = (\n        <Stack space=\"related\" className=\"min-w-0 text-left\">\n            {props.loading ? (\n                <SkeletonLoader.Shape presentation={props.aspect === 'poster' ? 'poster' : 'artwork'} />\n            ) : props.presentation === 'person' ? (\n                <span className=\"block size-16 overflow-hidden rounded-full [&>div]:size-full\">{props.artwork}</span>\n            ) : (\n                props.artwork\n            )}\n            <Stack space=\"none\" className=\"min-w-0\">\n                {lines.map((line, index) => (\n                    <Text\n                        key={index}\n                        as=\"span\"\n                        variant={index === 0 ? 'label' : 'caption'}\n                        tone={index === 0 ? 'default' : 'muted'}\n                        truncate={props.loading || !props.presentation}\n                        className={!props.loading && props.presentation ? 'wrap-anywhere' : undefined}\n                        loading={props.loading}\n                    >\n                        {!props.loading && props.href && index === 0 ? (\n                            <LinkOverlay href={props.href} onNavigate={props.onNavigate} aria-label={label}>\n                                {line}\n                            </LinkOverlay>\n                        ) : (\n                            line\n                        )}\n                    </Text>\n                ))}\n            </Stack>\n        </Stack>\n    );\n\n    if (props.loading || (!props.href && !props.onClick)) return content;\n\n    return (\n        <LinkBox className=\"group/media-item rounded-lg\">\n            {content}\n            {!props.href && props.onClick ? (\n                <button\n                    {...tabbable}\n                    type=\"button\"\n                    data-slot=\"action-overlay\"\n                    aria-label={label}\n                    className=\"focus-visible:outline-primary absolute inset-0 z-1 w-full cursor-pointer rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2\"\n                    onClick={props.onClick}\n                />\n            ) : null}\n        </LinkBox>\n    );\n}\n"],"mappings":";;;;;;;AAyBA,SAAgB,UAAU,OAAuB;CAC7C,MAAM,QAAQ,MAAM,UACd,MAAM,KAAyB,EAAE,QAAQ,MAAM,YAAY,EAAE,SAAS,KAAA,CAAS,IAC/E;EACI,MAAM,cACF,qBAAA,UAAA,EAAA,UAAA,CACK,MAAM,OACP,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CAA4C,OAAI,MAAM,WAAkB;EAC1E,CAAA,CAAA,EAAA,CAAA,IAEF,MAAM;EAEV,GAAI,MAAM,YAAY,MAAM,SAAS,CAAC,MAAM,YAAY,MAAQ,IAAI,CAAC;EACrE,GAAI,MAAM,SAAS,CAAC,MAAM,MAAM,IAAI,CAAC;CACzC;CACN,MAAM,QAAQ,MAAM,UACd,KAAA,IACC,MAAM,SACP;EACI,MAAM;EACN,MAAM;EACN,OAAO,MAAM,aAAa,WAAW,MAAM,WAAW,KAAA;EACtD,MAAM;CACV,CAAC,CACI,OAAO,OAAO,CAAC,CACf,KAAK,IAAI;CACpB,MAAM,UACF,qBAAC,OAAD;EAAO,OAAM;EAAU,WAAU;EAAjC,UAAA,CACK,MAAM,UACH,oBAAC,eAAe,OAAhB,EAAsB,cAAc,MAAM,WAAW,WAAW,WAAW,UAAY,CAAA,IACvF,MAAM,iBAAiB,WACvB,oBAAC,QAAD;GAAM,WAAU;GAAgE,UAAA,MAAM;EAAc,CAAA,IAEpG,MAAM,SAEV,oBAAC,OAAD;GAAO,OAAM;GAAO,WAAU;GACzB,UAAA,MAAM,KAAK,MAAM,UACd,oBAAC,MAAD;IAEI,IAAG;IACH,SAAS,UAAU,IAAI,UAAU;IACjC,MAAM,UAAU,IAAI,YAAY;IAChC,UAAU,MAAM,WAAW,CAAC,MAAM;IAClC,WAAW,CAAC,MAAM,WAAW,MAAM,eAAe,kBAAkB,KAAA;IACpE,SAAS,MAAM;IAEd,UAAA,CAAC,MAAM,WAAW,MAAM,QAAQ,UAAU,IACvC,oBAAC,aAAD;KAAa,MAAM,MAAM;KAAM,YAAY,MAAM;KAAY,cAAY;KACpE,UAAA;IACQ,CAAA,IAEb;GAEF,GAfG,KAeH,CACT;EACE,CAAA,CACJ;;CAGX,IAAI,MAAM,WAAY,CAAC,MAAM,QAAQ,CAAC,MAAM,SAAU,OAAO;CAE7D,OACI,qBAAC,SAAD;EAAS,WAAU;EAAnB,UAAA,CACK,SACA,CAAC,MAAM,QAAQ,MAAM,UAClB,oBAAC,UAAD;GACI,GAAI;GACJ,MAAK;GACL,aAAU;GACV,cAAY;GACZ,WAAU;GACV,SAAS,MAAM;EAClB,CAAA,IACD,IACC;;AAEjB"}

package/dist/display/ImagePicker.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+export declare function ImagePicker({ label, header, children }: {
+  label: string;
+  header: ReactNode;
+  children: ReactNode;
+}): import("react").JSX.Element;
+export declare function ImagePickerGrid({ children, label }: {
+  children: ReactNode;
+  label: string;
+}): import("react").JSX.Element;
+export declare function ImagePickerOption({ src, pending, error, label, detail, errorLabel, selected, disabled, landscape, aspect, onSelect }: {
+  src?: string;
+  pending?: boolean;
+  error?: boolean;
+  label: string;
+  detail?: string;
+  errorLabel: string;
+  selected: boolean;
+  disabled?: boolean;
+  landscape?: boolean;
+  aspect?: 'square' | 'video' | 'poster' | 'logo';
+  onSelect: () => void;
+}): import("react").JSX.Element;
+export declare function ImageUpload({ label, hint, disabled, onFile }: {
+  label: string;
+  hint: string;
+  disabled?: boolean;
+  onFile: (file: File) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ImagePicker.d.ts.map

package/dist/display/ImagePicker.js

@@ -0,0 +1,108 @@
+import { Button } from "../actions/Button.js";
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { Artwork } from "./Artwork.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, Disc3Icon } from "lucide-react";
+// src/display/ImagePicker.tsx
+function ImagePicker({ label, header, children }) {
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": label,
+		className: "flex min-h-0 flex-1 flex-col gap-3",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "shrink-0",
+			children: header
+		}), /* @__PURE__ */ jsx("div", {
+			className: "-mx-1 min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",
+			children
+		})]
+	});
+}
+function ImagePickerGrid({ children, label }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-label": label,
+		className: "grid grid-cols-2 gap-3 sm:grid-cols-[repeat(auto-fill,minmax(9rem,1fr))]",
+		children
+	});
+}
+function ImagePickerOption({ src, pending, error, label, detail, errorLabel, selected, disabled, landscape = false, aspect, onSelect }) {
+	return /* @__PURE__ */ jsxs("button", {
+		...tabbable,
+		type: "button",
+		"aria-label": label,
+		"aria-pressed": selected,
+		disabled,
+		onClick: onSelect,
+		className: `group bg-base-100 focus-visible:outline-primary relative overflow-hidden rounded-lg border text-left transition-all focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-50 ${selected ? "border-primary ring-primary/20 ring-2" : "border-base-300 hover:border-primary/50 hover:shadow-md"}`,
+		children: [
+			/* @__PURE__ */ jsx(Artwork, {
+				alt: "",
+				aspect: aspect ?? (landscape ? "video" : "square"),
+				error,
+				errorLabel,
+				fallback: /* @__PURE__ */ jsx(Disc3Icon, {}),
+				pending,
+				referrerPolicy: "no-referrer",
+				showLoadingIndicator: false,
+				src
+			}),
+			selected ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "bg-primary text-primary-content absolute top-2 right-2 rounded-full p-1 shadow [&>svg]:size-4",
+				children: /* @__PURE__ */ jsx(CheckIcon, {})
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "block truncate px-3 pt-2 text-xs font-medium",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-base-600 block truncate px-3 pb-2 text-xs",
+				children: detail ?? "\xA0"
+			})
+		]
+	});
+}
+function ImageUpload({ label, hint, disabled, onFile }) {
+	const [dragging, setDragging] = useState(false);
+	const input = useRef(null);
+	return /* @__PURE__ */ jsxs("span", {
+		className: `inline-flex shrink-0 rounded-md whitespace-nowrap ${dragging ? "ring-primary ring-2" : ""}`,
+		onDragOver: (event) => {
+			event.preventDefault();
+			if (!disabled) setDragging(true);
+		},
+		onDragLeave: () => setDragging(false),
+		onDrop: (event) => {
+			event.preventDefault();
+			setDragging(false);
+			const file = event.dataTransfer.files[0];
+			if (file && !disabled) onFile(file);
+		},
+		children: [/* @__PURE__ */ jsx("input", {
+			ref: input,
+			type: "file",
+			hidden: true,
+			accept: "image/jpeg,image/png,image/webp,image/gif",
+			"aria-label": label,
+			disabled,
+			onChange: (event) => {
+				const file = event.target.files?.[0];
+				if (file) onFile(file);
+				event.target.value = "";
+			}
+		}), /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			disabled,
+			title: hint,
+			"aria-description": hint,
+			leftIcon: /* @__PURE__ */ jsx(Disc3Icon, {}),
+			onClick: () => input.current?.click(),
+			variant: "secondary",
+			children: label
+		})]
+	});
+}
+export { ImagePicker, ImagePickerGrid, ImagePickerOption, ImageUpload };
+
+//# sourceMappingURL=ImagePicker.js.map

package/dist/display/ImagePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePicker.js","names":[],"sources":["../../src/display/ImagePicker.tsx"],"sourcesContent":["import { CheckIcon, Disc3Icon } from 'lucide-react';\nimport { type ReactNode, useRef, useState } from 'react';\n\nimport { Button } from '../actions/Button';\nimport { tabbable } from '../foundations/KeyboardFocus';\nimport { Artwork } from './Artwork';\n\nexport function ImagePicker({ label, header, children }: { label: string; header: ReactNode; children: ReactNode }) {\n    return (\n        <section aria-label={label} className=\"flex min-h-0 flex-1 flex-col gap-3\">\n            <div className=\"shrink-0\">{header}</div>\n            <div className=\"-mx-1 min-h-0 flex-1 overflow-y-auto overscroll-contain p-1\">{children}</div>\n        </section>\n    );\n}\n\nexport function ImagePickerGrid({ children, label }: { children: ReactNode; label: string }) {\n    return (\n        <div\n            role=\"group\"\n            aria-label={label}\n            className=\"grid grid-cols-2 gap-3 sm:grid-cols-[repeat(auto-fill,minmax(9rem,1fr))]\"\n        >\n            {children}\n        </div>\n    );\n}\n\nexport function ImagePickerOption({\n    src,\n    pending,\n    error,\n    label,\n    detail,\n    errorLabel,\n    selected,\n    disabled,\n    landscape = false,\n    aspect,\n    onSelect,\n}: {\n    src?: string;\n    pending?: boolean;\n    error?: boolean;\n    label: string;\n    detail?: string;\n    errorLabel: string;\n    selected: boolean;\n    disabled?: boolean;\n    landscape?: boolean;\n    aspect?: 'square' | 'video' | 'poster' | 'logo';\n    onSelect: () => void;\n}) {\n    return (\n        <button\n            {...tabbable}\n            type=\"button\"\n            aria-label={label}\n            aria-pressed={selected}\n            disabled={disabled}\n            onClick={onSelect}\n            className={`group bg-base-100 focus-visible:outline-primary relative overflow-hidden rounded-lg border text-left transition-all focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-50 ${selected ? 'border-primary ring-primary/20 ring-2' : 'border-base-300 hover:border-primary/50 hover:shadow-md'}`}\n        >\n            <Artwork\n                alt=\"\"\n                aspect={aspect ?? (landscape ? 'video' : 'square')}\n                error={error}\n                errorLabel={errorLabel}\n                fallback={<Disc3Icon />}\n                pending={pending}\n                referrerPolicy=\"no-referrer\"\n                showLoadingIndicator={false}\n                src={src}\n            />\n            {selected ? (\n                <span\n                    aria-hidden=\"true\"\n                    className=\"bg-primary text-primary-content absolute top-2 right-2 rounded-full p-1 shadow [&>svg]:size-4\"\n                >\n                    <CheckIcon />\n                </span>\n            ) : null}\n            <span className=\"block truncate px-3 pt-2 text-xs font-medium\">{label}</span>\n            <span className=\"text-base-600 block truncate px-3 pb-2 text-xs\">{detail ?? '\\u00a0'}</span>\n        </button>\n    );\n}\n\nexport function ImageUpload({\n    label,\n    hint,\n    disabled,\n    onFile,\n}: {\n    label: string;\n    hint: string;\n    disabled?: boolean;\n    onFile: (file: File) => void;\n}) {\n    const [dragging, setDragging] = useState(false);\n    const input = useRef<HTMLInputElement>(null);\n\n    return (\n        <span\n            className={`inline-flex shrink-0 rounded-md whitespace-nowrap ${dragging ? 'ring-primary ring-2' : ''}`}\n            onDragOver={(event) => {\n                event.preventDefault();\n\n                if (!disabled) setDragging(true);\n            }}\n            onDragLeave={() => setDragging(false)}\n            onDrop={(event) => {\n                event.preventDefault();\n                setDragging(false);\n\n                const file = event.dataTransfer.files[0];\n\n                if (file && !disabled) onFile(file);\n            }}\n        >\n            <input\n                ref={input}\n                type=\"file\"\n                hidden\n                accept=\"image/jpeg,image/png,image/webp,image/gif\"\n                aria-label={label}\n                disabled={disabled}\n                onChange={(event) => {\n                    const file = event.target.files?.[0];\n\n                    if (file) onFile(file);\n\n                    event.target.value = '';\n                }}\n            />\n            <Button\n                type=\"button\"\n                disabled={disabled}\n                title={hint}\n                aria-description={hint}\n                leftIcon={<Disc3Icon />}\n                onClick={() => input.current?.click()}\n                variant=\"secondary\"\n            >\n                {label}\n            </Button>\n        </span>\n    );\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,YAAY,EAAE,OAAO,QAAQ,YAAuE;CAChH,OACI,qBAAC,WAAD;EAAS,cAAY;EAAO,WAAU;EAAtC,UAAA,CACI,oBAAC,OAAD;GAAK,WAAU;GAAY,UAAA;EAAY,CAAA,GACvC,oBAAC,OAAD;GAAK,WAAU;GAA+D;EAAc,CAAA,CACvF;;AAEjB;AAEA,SAAgB,gBAAgB,EAAE,UAAU,SAAiD;CACzF,OACI,oBAAC,OAAD;EACI,MAAK;EACL,cAAY;EACZ,WAAU;EAET;CACA,CAAA;AAEb;AAEA,SAAgB,kBAAkB,EAC9B,KACA,SACA,OACA,OACA,QACA,YACA,UACA,UACA,YAAY,OACZ,QACA,YAaD;CACC,OACI,qBAAC,UAAD;EACI,GAAI;EACJ,MAAK;EACL,cAAY;EACZ,gBAAc;EACJ;EACV,SAAS;EACT,WAAW,0NAA0N,WAAW,0CAA0C;EAP9R,UAAA;GASI,oBAAC,SAAD;IACI,KAAI;IACJ,QAAQ,WAAW,YAAY,UAAU;IAClC;IACK;IACZ,UAAU,oBAAC,WAAD,CAAY,CAAA;IACb;IACT,gBAAe;IACf,sBAAsB;IACjB;GACR,CAAA;GACA,WACG,oBAAC,QAAD;IACI,eAAY;IACZ,WAAU;IAEV,UAAA,oBAAC,WAAD,CAAY,CAAA;GACV,CAAA,IACN;GACJ,oBAAC,QAAD;IAAM,WAAU;IAAgD,UAAA;GAAY,CAAA;GAC5E,oBAAC,QAAD;IAAM,WAAU;IAAkD,UAAA,UAAU;GAAe,CAAA;EACvF;;AAEhB;AAEA,SAAgB,YAAY,EACxB,OACA,MACA,UACA,UAMD;CACC,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,QAAQ,OAAyB,IAAI;CAE3C,OACI,qBAAC,QAAD;EACI,WAAW,qDAAqD,WAAW,wBAAwB;EACnG,aAAa,UAAU;GACnB,MAAM,eAAe;GAErB,IAAI,CAAC,UAAU,YAAY,IAAI;EACnC;EACA,mBAAmB,YAAY,KAAK;EACpC,SAAS,UAAU;GACf,MAAM,eAAe;GACrB,YAAY,KAAK;GAEjB,MAAM,OAAO,MAAM,aAAa,MAAM;GAEtC,IAAI,QAAQ,CAAC,UAAU,OAAO,IAAI;EACtC;EAfJ,UAAA,CAiBI,oBAAC,SAAD;GACI,KAAK;GACL,MAAK;GACL,QAAA;GACA,QAAO;GACP,cAAY;GACF;GACV,WAAW,UAAU;IACjB,MAAM,OAAO,MAAM,OAAO,QAAQ;IAElC,IAAI,MAAM,OAAO,IAAI;IAErB,MAAM,OAAO,QAAQ;GACzB;EACH,CAAA,GACD,oBAAC,QAAD;GACI,MAAK;GACK;GACV,OAAO;GACP,oBAAkB;GAClB,UAAU,oBAAC,WAAD,CAAY,CAAA;GACtB,eAAe,MAAM,SAAS,MAAM;GACpC,SAAQ;GAEP,UAAA;EACG,CAAA,CACN;;AAEd"}

package/dist/display/InfoBox.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+interface InfoBoxProps {
+  description: string;
+  icon: ReactNode;
+  onClick: () => void;
+  title: string;
+}
+/**
+ * A prominent, actionable introduction that opens optional guidance.
+ * Use for a short teaser leading to a guide or other explanatory surface. Use Alert for current
+ * status, NoticeCard for content that needs examination or a decision, and InsetPanel for grouping.
+ */
+export declare function InfoBox({ description, icon, onClick, title }: InfoBoxProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=InfoBox.d.ts.map

package/dist/display/InfoBox.js

@@ -0,0 +1,41 @@
+import { Heading, Text } from "../typography/Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from "lucide-react";
+import { Alert } from "@ninna-ui/feedback";
+// src/display/InfoBox.tsx
+/**
+* A prominent, actionable introduction that opens optional guidance.
+* Use for a short teaser leading to a guide or other explanatory surface. Use Alert for current
+* status, NoticeCard for content that needs examination or a decision, and InsetPanel for grouping.
+*/
+function InfoBox({ description, icon, onClick, title }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick,
+		className: "group border-primary/40 border-l-primary bg-primary/10 hover:bg-primary/15 focus-visible:outline-primary relative w-full cursor-pointer rounded-lg border border-l-4 text-left transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 motion-reduce:transition-none",
+		children: [/* @__PURE__ */ jsx(Alert, {
+			role: "presentation",
+			"aria-live": "off",
+			color: "primary",
+			size: "md",
+			icon,
+			title: /* @__PURE__ */ jsx(Heading, {
+				as: "h3",
+				variant: "label",
+				children: title
+			}),
+			description: /* @__PURE__ */ jsx(Text, {
+				tone: "muted",
+				children: description
+			}),
+			className: "text-primary [&_[data-slot=icon]]:bg-primary/15 bg-transparent pr-12 [&_[data-slot=icon]]:mt-0 [&_[data-slot=icon]]:flex [&_[data-slot=icon]]:size-9 [&_[data-slot=icon]]:items-center [&_[data-slot=icon]]:justify-center [&_[data-slot=icon]]:rounded-lg [&_[data-slot=icon]>svg]:size-5"
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "text-primary absolute inset-y-0 right-4 flex items-center transition-transform group-hover:translate-x-0.5 motion-reduce:transition-none [&>svg]:size-5",
+			children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+		})]
+	});
+}
+export { InfoBox };
+
+//# sourceMappingURL=InfoBox.js.map

package/dist/display/InfoBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoBox.js","names":[],"sources":["../../src/display/InfoBox.tsx"],"sourcesContent":["import { Alert } from '@ninna-ui/feedback';\nimport { ChevronRightIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport { Heading, Text } from '../typography/Typography';\n\ninterface InfoBoxProps {\n    description: string;\n    icon: ReactNode;\n    onClick: () => void;\n    title: string;\n}\n\n/**\n * A prominent, actionable introduction that opens optional guidance.\n * Use for a short teaser leading to a guide or other explanatory surface. Use Alert for current\n * status, NoticeCard for content that needs examination or a decision, and InsetPanel for grouping.\n */\nexport function InfoBox({ description, icon, onClick, title }: InfoBoxProps) {\n    return (\n        <button\n            type=\"button\"\n            onClick={onClick}\n            className=\"group border-primary/40 border-l-primary bg-primary/10 hover:bg-primary/15 focus-visible:outline-primary relative w-full cursor-pointer rounded-lg border border-l-4 text-left transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 motion-reduce:transition-none\"\n        >\n            <Alert\n                role=\"presentation\"\n                aria-live=\"off\"\n                color=\"primary\"\n                size=\"md\"\n                icon={icon}\n                title={\n                    <Heading as=\"h3\" variant=\"label\">\n                        {title}\n                    </Heading>\n                }\n                description={<Text tone=\"muted\">{description}</Text>}\n                className=\"text-primary [&_[data-slot=icon]]:bg-primary/15 bg-transparent pr-12 [&_[data-slot=icon]]:mt-0 [&_[data-slot=icon]]:flex [&_[data-slot=icon]]:size-9 [&_[data-slot=icon]]:items-center [&_[data-slot=icon]]:justify-center [&_[data-slot=icon]]:rounded-lg [&_[data-slot=icon]>svg]:size-5\"\n            />\n            <span\n                aria-hidden=\"true\"\n                className=\"text-primary absolute inset-y-0 right-4 flex items-center transition-transform group-hover:translate-x-0.5 motion-reduce:transition-none [&>svg]:size-5\"\n            >\n                <ChevronRightIcon />\n            </span>\n        </button>\n    );\n}\n"],"mappings":";;;;;;;;;;AAkBA,SAAgB,QAAQ,EAAE,aAAa,MAAM,SAAS,SAAuB;CACzE,OACI,qBAAC,UAAD;EACI,MAAK;EACI;EACT,WAAU;EAHd,UAAA,CAKI,oBAAC,OAAD;GACI,MAAK;GACL,aAAU;GACV,OAAM;GACN,MAAK;GACC;GACN,OACI,oBAAC,SAAD;IAAS,IAAG;IAAK,SAAQ;IACpB,UAAA;GACI,CAAA;GAEb,aAAa,oBAAC,MAAD;IAAM,MAAK;IAAS,UAAA;GAAkB,CAAA;GACnD,WAAU;EACb,CAAA,GACD,oBAAC,QAAD;GACI,eAAY;GACZ,WAAU;GAEV,UAAA,oBAAC,kBAAD,CAAmB,CAAA;EACjB,CAAA,CACF;;AAEhB"}

package/dist/display/InsetPanel.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+interface InsetPanelProps {
+  children: ReactNode;
+  onClick?: () => void;
+  presentation?: 'default' | 'settings';
+}
+/**
+ * A neutral surface that groups related content without adding message or status meaning.
+ * Use Alert for current status, InfoBox for optional guidance, and NoticeCard for a decision item.
+ */
+export declare function InsetPanel({ children, onClick, presentation }: InsetPanelProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=InsetPanel.d.ts.map

package/dist/display/InsetPanel.js

@@ -0,0 +1,26 @@
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { Stack } from "../layout/Flow.js";
+import { jsx } from "react/jsx-runtime";
+// src/display/InsetPanel.tsx
+/**
+* A neutral surface that groups related content without adding message or status meaning.
+* Use Alert for current status, InfoBox for optional guidance, and NoticeCard for a decision item.
+*/
+function InsetPanel({ children, onClick, presentation = "default" }) {
+	if (presentation === "settings") return /* @__PURE__ */ jsx("div", {
+		className: "divide-base-300 border-base-300 bg-base-100 divide-y overflow-hidden rounded-lg border shadow-xs/5",
+		children
+	});
+	return /* @__PURE__ */ jsx(Stack, {
+		as: onClick ? "button" : "div",
+		type: onClick ? "button" : void 0,
+		tabIndex: onClick ? tabbable.tabIndex : void 0,
+		onClick,
+		space: "related",
+		className: `border-base-300 bg-base-100 rounded-lg border p-5 ${onClick ? "focus-visible:outline-primary w-full cursor-pointer text-left focus-visible:outline-2 focus-visible:outline-offset-2" : ""}`,
+		children
+	});
+}
+export { InsetPanel };
+
+//# sourceMappingURL=InsetPanel.js.map

package/dist/display/InsetPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InsetPanel.js","names":[],"sources":["../../src/display/InsetPanel.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\nimport { Stack } from '../layout/Flow';\n\ninterface InsetPanelProps {\n    children: ReactNode;\n    onClick?: () => void;\n    presentation?: 'default' | 'settings';\n}\n\n/**\n * A neutral surface that groups related content without adding message or status meaning.\n * Use Alert for current status, InfoBox for optional guidance, and NoticeCard for a decision item.\n */\nexport function InsetPanel({ children, onClick, presentation = 'default' }: InsetPanelProps) {\n    if (presentation === 'settings') {\n        return (\n            <div className=\"divide-base-300 border-base-300 bg-base-100 divide-y overflow-hidden rounded-lg border shadow-xs/5\">\n                {children}\n            </div>\n        );\n    }\n\n    return (\n        <Stack\n            as={onClick ? 'button' : 'div'}\n            type={onClick ? 'button' : undefined}\n            tabIndex={onClick ? tabbable.tabIndex : undefined}\n            onClick={onClick}\n            space=\"related\"\n            className={`border-base-300 bg-base-100 rounded-lg border p-5 ${onClick ? 'focus-visible:outline-primary w-full cursor-pointer text-left focus-visible:outline-2 focus-visible:outline-offset-2' : ''}`}\n        >\n            {children}\n        </Stack>\n    );\n}\n"],"mappings":";;;;;;;;AAeA,SAAgB,WAAW,EAAE,UAAU,SAAS,eAAe,aAA8B;CACzF,IAAI,iBAAiB,YACjB,OACI,oBAAC,OAAD;EAAK,WAAU;EACV;CACA,CAAA;CAIb,OACI,oBAAC,OAAD;EACI,IAAI,UAAU,WAAW;EACzB,MAAM,UAAU,WAAW,KAAA;EAC3B,UAAU,UAAU,SAAS,WAAW,KAAA;EAC/B;EACT,OAAM;EACN,WAAW,qDAAqD,UAAU,yHAAyH;EAElM;CACE,CAAA;AAEf"}

package/dist/display/ItemAction.d.ts

@@ -0,0 +1,10 @@
+export interface ItemActionProps {
+  label: string;
+  onClick?: () => void;
+}
+export declare function ItemAction({ action, loading, loadingLabel }: {
+  action?: ItemActionProps;
+  loading?: boolean;
+  loadingLabel?: string;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=ItemAction.d.ts.map

package/dist/display/ItemAction.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import { PencilIcon } from "lucide-react";
+import { Loading } from "@ninna-ui/feedback";
+// src/display/ItemAction.tsx
+function ItemAction({ action, loading = false, loadingLabel }) {
+	const disabled = loading || !action?.onClick;
+	if (!loading && !action) return null;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": loading ? loadingLabel : action?.label,
+		"aria-hidden": loading && !loadingLabel ? true : void 0,
+		"aria-disabled": disabled,
+		tabIndex: disabled ? -1 : 0,
+		title: loading ? loadingLabel : action?.label,
+		className: `bg-base-50/90 text-base-content focus-visible:outline-primary pointer-events-auto flex size-6 items-center justify-center rounded-full shadow-sm backdrop-blur-sm transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 motion-reduce:transition-none ${loading ? "" : "opacity-0 group-hover/media-item:opacity-100 group-has-focus-visible/media-item:opacity-100 [@media(hover:none)]:opacity-100"} ${disabled ? "cursor-default" : "hover:bg-base-50 hover:text-primary cursor-pointer"}`,
+		onClick: (event) => {
+			event.stopPropagation();
+			if (!disabled) action?.onClick?.();
+		},
+		children: loading ? /* @__PURE__ */ jsx(Loading, {
+			"aria-hidden": !loadingLabel,
+			className: "motion-reduce:animate-none",
+			color: "primary",
+			label: loadingLabel ?? "",
+			size: "sm",
+			variant: "spin"
+		}) : /* @__PURE__ */ jsx("span", {
+			className: `size-3.5 [&>svg]:size-full ${disabled ? "opacity-40" : ""}`,
+			children: /* @__PURE__ */ jsx(PencilIcon, {})
+		})
+	});
+}
+export { ItemAction };
+
+//# sourceMappingURL=ItemAction.js.map

package/dist/display/ItemAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemAction.js","names":[],"sources":["../../src/display/ItemAction.tsx"],"sourcesContent":["import { Loading } from '@ninna-ui/feedback';\nimport { PencilIcon } from 'lucide-react';\n\nexport interface ItemActionProps {\n    label: string;\n    onClick?: () => void;\n}\n\nexport function ItemAction({\n    action,\n    loading = false,\n    loadingLabel,\n}: {\n    action?: ItemActionProps;\n    loading?: boolean;\n    loadingLabel?: string;\n}) {\n    const disabled = loading || !action?.onClick;\n\n    if (!loading && !action) return null;\n\n    return (\n        <button\n            type=\"button\"\n            aria-label={loading ? loadingLabel : action?.label}\n            aria-hidden={loading && !loadingLabel ? true : undefined}\n            aria-disabled={disabled}\n            tabIndex={disabled ? -1 : 0}\n            title={loading ? loadingLabel : action?.label}\n            className={`bg-base-50/90 text-base-content focus-visible:outline-primary pointer-events-auto flex size-6 items-center justify-center rounded-full shadow-sm backdrop-blur-sm transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 motion-reduce:transition-none ${loading ? '' : 'opacity-0 group-hover/media-item:opacity-100 group-has-focus-visible/media-item:opacity-100 [@media(hover:none)]:opacity-100'} ${disabled ? 'cursor-default' : 'hover:bg-base-50 hover:text-primary cursor-pointer'}`}\n            onClick={(event) => {\n                event.stopPropagation();\n\n                if (!disabled) action?.onClick?.();\n            }}\n        >\n            {loading ? (\n                <Loading\n                    aria-hidden={!loadingLabel}\n                    className=\"motion-reduce:animate-none\"\n                    color=\"primary\"\n                    label={loadingLabel ?? ''}\n                    size=\"sm\"\n                    variant=\"spin\"\n                />\n            ) : (\n                <span className={`size-3.5 [&>svg]:size-full ${disabled ? 'opacity-40' : ''}`}>\n                    <PencilIcon />\n                </span>\n            )}\n        </button>\n    );\n}\n"],"mappings":";;;;AAQA,SAAgB,WAAW,EACvB,QACA,UAAU,OACV,gBAKD;CACC,MAAM,WAAW,WAAW,CAAC,QAAQ;CAErC,IAAI,CAAC,WAAW,CAAC,QAAQ,OAAO;CAEhC,OACI,oBAAC,UAAD;EACI,MAAK;EACL,cAAY,UAAU,eAAe,QAAQ;EAC7C,eAAa,WAAW,CAAC,eAAe,OAAO,KAAA;EAC/C,iBAAe;EACf,UAAU,WAAW,KAAK;EAC1B,OAAO,UAAU,eAAe,QAAQ;EACxC,WAAW,yRAAyR,UAAU,KAAK,+HAA+H,GAAG,WAAW,mBAAmB;EACnd,UAAU,UAAU;GAChB,MAAM,gBAAgB;GAEtB,IAAI,CAAC,UAAU,QAAQ,UAAU;EACrC;EAEC,UAAA,UACG,oBAAC,SAAD;GACI,eAAa,CAAC;GACd,WAAU;GACV,OAAM;GACN,OAAO,gBAAgB;GACvB,MAAK;GACL,SAAQ;EACX,CAAA,IAED,oBAAC,QAAD;GAAM,WAAW,8BAA8B,WAAW,eAAe;GACrE,UAAA,oBAAC,YAAD,CAAa,CAAA;EACX,CAAA;CAEN,CAAA;AAEhB"}

package/dist/display/Kbd.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+/** A keyboard key or shortcut, as quiet small text, such as ⌘K beside the search field. */
+export declare function Kbd({ children }: {
+  children?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Kbd.d.ts.map

package/dist/display/Kbd.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+// src/display/Kbd.tsx
+/** A keyboard key or shortcut, as quiet small text, such as ⌘K beside the search field. */
+function Kbd({ children }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		className: "text-base-500 font-sans text-[11px] font-medium",
+		children
+	});
+}
+export { Kbd };
+
+//# sourceMappingURL=Kbd.js.map

package/dist/display/Kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.js","names":[],"sources":["../../src/display/Kbd.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\n/** A keyboard key or shortcut, as quiet small text, such as ⌘K beside the search field. */\nexport function Kbd({ children }: { children?: ReactNode }) {\n    return <kbd className=\"text-base-500 font-sans text-[11px] font-medium\">{children}</kbd>;\n}\n"],"mappings":";;;AAGA,SAAgB,IAAI,EAAE,YAAsC;CACxD,OAAO,oBAAC,OAAD;EAAK,WAAU;EAAmD;CAAc,CAAA;AAC3F"}

package/dist/display/KindIcon.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+/** Colours the icon inside it in a muted version of a lar-brand app hue, such as a catalog's kind; neutral without one. Its
+ *  container sizes the icon. */
+export declare function KindIcon({ hue, children }: {
+  hue?: number;
+  children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=KindIcon.d.ts.map

package/dist/display/KindIcon.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+// src/display/KindIcon.tsx
+/** Colours the icon inside it in a muted version of a lar-brand app hue, such as a catalog's kind; neutral without one. Its
+*  container sizes the icon. */
+function KindIcon({ hue, children }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: `contents ${hue === void 0 ? "text-base-500 dark:text-base-600" : "kind-icon"}`,
+		style: hue === void 0 ? void 0 : { "--lar-kind-hue": hue },
+		children
+	});
+}
+export { KindIcon };
+
+//# sourceMappingURL=KindIcon.js.map

package/dist/display/KindIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KindIcon.js","names":[],"sources":["../../src/display/KindIcon.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\n\n/** Colours the icon inside it in a muted version of a lar-brand app hue, such as a catalog's kind; neutral without one. Its\n *  container sizes the icon. */\nexport function KindIcon({ hue, children }: { hue?: number; children: ReactNode }) {\n    return (\n        <span\n            aria-hidden=\"true\"\n            className={`contents ${hue === undefined ? 'text-base-500 dark:text-base-600' : 'kind-icon'}`}\n            style={hue === undefined ? undefined : ({ '--lar-kind-hue': hue } as CSSProperties)}\n        >\n            {children}\n        </span>\n    );\n}\n"],"mappings":";;;;AAIA,SAAgB,SAAS,EAAE,KAAK,YAAmD;CAC/E,OACI,oBAAC,QAAD;EACI,eAAY;EACZ,WAAW,YAAY,QAAQ,KAAA,IAAY,qCAAqC;EAChF,OAAO,QAAQ,KAAA,IAAY,KAAA,IAAa,EAAE,kBAAkB,IAAI;EAE/D;CACC,CAAA;AAEd"}