@yo-yo.art/ui 0.2.1 → 0.3.0

package/README.md

@@ -43,7 +43,7 @@ Wrap the interactive components (`ThemeToggle`, `LoadingScreen`,
 
 ```text
 @yo-yo.art/ui                  components and tokens
-@yo-yo.art/ui/gallery          loading cover, home button and setup notice
+@yo-yo.art/ui/gallery          loading cover, home button, setup notice and artwork panel
 @yo-yo.art/ui/styles.css       design tokens and Tailwind source
 @yo-yo.art/ui/scenography.css  compatibility layer for the overlay presets
 ```

package/dist/gallery/ArtworkPanel/ArtworkPanel.cjs

@@ -0,0 +1,92 @@
+require("../../components/Badge/index.cjs");
+const require_Badge = require("../../components/Badge/Badge.cjs");
+require("../../components/Button/index.cjs");
+const require_Button = require("../../components/Button/Button.cjs");
+require("../../components/Eyebrow/index.cjs");
+const require_Eyebrow = require("../../components/Eyebrow/Eyebrow.cjs");
+require("../../components/IconButton/index.cjs");
+const require_IconButton = require("../../components/IconButton/IconButton.cjs");
+require("../../components/Link/index.cjs");
+const require_Link = require("../../components/Link/Link.cjs");
+const require_cn = require("../../lib/cn.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+// src/gallery/ArtworkPanel/ArtworkPanel.tsx
+const DEFAULT_LABELS = {
+	close: "Cerrar",
+	prev: "Anterior",
+	next: "Siguiente",
+	view: "Ver obra",
+	forSale: "En venta",
+	privateCollection: "Colección privada"
+};
+const pad = (value) => String(value).padStart(2, "0");
+const ArtworkPanel = ({ artwork, index, count, side = "left", labels, onClose, onPrev, onNext, className }) => {
+	const text = {
+		...DEFAULT_LABELS,
+		...labels
+	};
+	const authorYear = [artwork.author, artwork.year?.toString()].filter(Boolean).join(", ");
+	const techniqueDimensions = [artwork.technique, artwork.dimensions].filter(Boolean).join(", ");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
+		"aria-label": artwork.title ?? "Ficha de la obra",
+		className: require_cn.cn("fixed inset-y-0 z-[9990] flex w-[38.1966%] flex-col gap-4 overflow-y-auto border-base-content/12 bg-base-100 px-6 pb-6 pt-16 text-base-content", side === "left" ? "left-0 border-r" : "right-0 border-l", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-start justify-between gap-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Eyebrow.Eyebrow, { children: [
+					"Obra ",
+					pad(index + 1),
+					" / ",
+					pad(count)
+				] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+					label: text.close,
+					variant: "ghost",
+					size: "sm",
+					onClick: onClose,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "size-4" })
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				className: "text-2xl font-semibold leading-[1.05] tracking-[-0.03em] text-balance",
+				children: artwork.title ?? "Sin título"
+			}),
+			(authorYear || techniqueDimensions) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-1 font-mono text-xs uppercase tracking-[0.12em] text-base-content/60",
+				children: [authorYear && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: authorYear }), techniqueDimensions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: techniqueDimensions })]
+			}),
+			artwork.availability && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Badge.Badge, {
+				tone: artwork.availability === "for-sale" ? "accent" : "neutral",
+				children: artwork.availability === "for-sale" ? text.forSale : text.privateCollection
+			}),
+			artwork.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-sm leading-relaxed whitespace-pre-line text-base-content/70",
+				children: artwork.description
+			}),
+			artwork.href && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Link.Link, {
+				href: artwork.href,
+				external: true,
+				arrow: true,
+				className: "mt-1",
+				children: text.view
+			}),
+			count > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mt-auto flex gap-2 border-t border-base-content/12 pt-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Button.Button, {
+					variant: "ghost",
+					className: "flex-1",
+					onClick: onPrev,
+					children: ["‹ ", text.prev]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Button.Button, {
+					variant: "ghost",
+					className: "flex-1",
+					onClick: onNext,
+					children: [text.next, " ›"]
+				})]
+			})
+		]
+	});
+};
+exports.ArtworkPanel = ArtworkPanel;
+
+//# sourceMappingURL=ArtworkPanel.cjs.map

package/dist/gallery/ArtworkPanel/ArtworkPanel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArtworkPanel.cjs","names":["cn","Eyebrow","IconButton","X","Badge","Link","Button"],"sources":["../../../src/gallery/ArtworkPanel/ArtworkPanel.tsx"],"sourcesContent":["import { X } from \"lucide-react\";\nimport { Badge } from \"../../components/Badge\";\nimport { Button } from \"../../components/Button\";\nimport { Eyebrow } from \"../../components/Eyebrow\";\nimport { IconButton } from \"../../components/IconButton\";\nimport { Link } from \"../../components/Link\";\nimport { cn } from \"../../lib/cn\";\n\nexport type ArtworkPanelSide = \"left\" | \"right\";\nexport type ArtworkPanelAvailability = \"for-sale\" | \"sold\" | \"not-for-sale\";\n\nexport type ArtworkPanelArtwork = {\n  id: string;\n  title?: string;\n  author?: string;\n  year?: number;\n  technique?: string;\n  dimensions?: string;\n  description?: string;\n  href?: string;\n  availability?: ArtworkPanelAvailability;\n};\n\nexport type ArtworkPanelLabels = {\n  close?: string;\n  prev?: string;\n  next?: string;\n  view?: string;\n  forSale?: string;\n  privateCollection?: string;\n};\n\nexport type ArtworkPanelProps = {\n  artwork: ArtworkPanelArtwork;\n  index: number;\n  count: number;\n  side?: ArtworkPanelSide;\n  labels?: ArtworkPanelLabels;\n  onClose: () => void;\n  onPrev: () => void;\n  onNext: () => void;\n  className?: string;\n};\n\nconst DEFAULT_LABELS: Required<ArtworkPanelLabels> = {\n  close: \"Cerrar\",\n  prev: \"Anterior\",\n  next: \"Siguiente\",\n  view: \"Ver obra\",\n  forSale: \"En venta\",\n  privateCollection: \"Colección privada\",\n};\n\nconst pad = (value: number): string => String(value).padStart(2, \"0\");\n\nexport const ArtworkPanel = ({\n  artwork,\n  index,\n  count,\n  side = \"left\",\n  labels,\n  onClose,\n  onPrev,\n  onNext,\n  className,\n}: ArtworkPanelProps) => {\n  const text = { ...DEFAULT_LABELS, ...labels };\n  const authorYear = [artwork.author, artwork.year?.toString()]\n    .filter(Boolean)\n    .join(\", \");\n  const techniqueDimensions = [artwork.technique, artwork.dimensions]\n    .filter(Boolean)\n    .join(\", \");\n\n  return (\n    <aside\n      aria-label={artwork.title ?? \"Ficha de la obra\"}\n      className={cn(\n        \"fixed inset-y-0 z-[9990] flex w-[38.1966%] flex-col gap-4 overflow-y-auto border-base-content/12 bg-base-100 px-6 pb-6 pt-16 text-base-content\",\n        side === \"left\" ? \"left-0 border-r\" : \"right-0 border-l\",\n        className,\n      )}\n    >\n      <div className=\"flex items-start justify-between gap-4\">\n        <Eyebrow>\n          Obra {pad(index + 1)} / {pad(count)}\n        </Eyebrow>\n        <IconButton\n          label={text.close}\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={onClose}\n        >\n          <X className=\"size-4\" />\n        </IconButton>\n      </div>\n\n      <h2 className=\"text-2xl font-semibold leading-[1.05] tracking-[-0.03em] text-balance\">\n        {artwork.title ?? \"Sin título\"}\n      </h2>\n\n      {(authorYear || techniqueDimensions) && (\n        <div className=\"flex flex-col gap-1 font-mono text-xs uppercase tracking-[0.12em] text-base-content/60\">\n          {authorYear && <span>{authorYear}</span>}\n          {techniqueDimensions && <span>{techniqueDimensions}</span>}\n        </div>\n      )}\n\n      {artwork.availability && (\n        <Badge\n          tone={artwork.availability === \"for-sale\" ? \"accent\" : \"neutral\"}\n        >\n          {artwork.availability === \"for-sale\"\n            ? text.forSale\n            : text.privateCollection}\n        </Badge>\n      )}\n\n      {artwork.description && (\n        <p className=\"text-sm leading-relaxed whitespace-pre-line text-base-content/70\">\n          {artwork.description}\n        </p>\n      )}\n\n      {artwork.href && (\n        <Link href={artwork.href} external arrow className=\"mt-1\">\n          {text.view}\n        </Link>\n      )}\n\n      {count > 1 && (\n        <div className=\"mt-auto flex gap-2 border-t border-base-content/12 pt-4\">\n          <Button variant=\"ghost\" className=\"flex-1\" onClick={onPrev}>\n            ‹ {text.prev}\n          </Button>\n          <Button variant=\"ghost\" className=\"flex-1\" onClick={onNext}>\n            {text.next} ›\n          </Button>\n        </div>\n      )}\n    </aside>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AA4CA,MAAM,iBAA+C;CACnD,OAAO;CACP,MAAM;CACN,MAAM;CACN,MAAM;CACN,SAAS;CACT,mBAAmB;AACrB;AAEA,MAAM,OAAO,UAA0B,OAAO,KAAK,CAAC,CAAC,SAAS,GAAG,GAAG;AAEpE,MAAa,gBAAgB,EAC3B,SACA,OACA,OACA,OAAO,QACP,QACA,SACA,QACA,QACA,gBACuB;CACvB,MAAM,OAAO;EAAE,GAAG;EAAgB,GAAG;CAAO;CAC5C,MAAM,aAAa,CAAC,QAAQ,QAAQ,QAAQ,MAAM,SAAS,CAAC,CAAC,CAC1D,OAAO,OAAO,CAAC,CACf,KAAK,IAAI;CACZ,MAAM,sBAAsB,CAAC,QAAQ,WAAW,QAAQ,UAAU,CAAC,CAChE,OAAO,OAAO,CAAC,CACf,KAAK,IAAI;CAEZ,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,SAAD;EACE,cAAY,QAAQ,SAAS;EAC7B,WAAWA,WAAAA,GACT,kJACA,SAAS,SAAS,oBAAoB,oBACtC,SACF;EANF,UAAA;GAQE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,SAAD,EAAA,UAAA;KAAS;KACD,IAAI,QAAQ,CAAC;KAAE;KAAI,IAAI,KAAK;IAC3B,EAAA,CAAA,GACT,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;KACE,OAAO,KAAK;KACZ,SAAQ;KACR,MAAK;KACL,SAAS;KAET,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,GAAD,EAAG,WAAU,SAAU,CAAA;IACb,CAAA,CACT;;GAEL,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;IAAI,WAAU;IACX,UAAA,QAAQ,SAAS;GAChB,CAAA;IAEF,cAAc,wBACd,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,cAAc,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAO,WAAiB,CAAA,GACtC,uBAAuB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAO,oBAA0B,CAAA,CACtD;;GAGN,QAAQ,gBACP,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;IACE,MAAM,QAAQ,iBAAiB,aAAa,WAAW;IAEtD,UAAA,QAAQ,iBAAiB,aACtB,KAAK,UACL,KAAK;GACJ,CAAA;GAGR,QAAQ,eACP,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;IAAG,WAAU;IACV,UAAA,QAAQ;GACR,CAAA;GAGJ,QAAQ,QACP,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,MAAD;IAAM,MAAM,QAAQ;IAAM,UAAA;IAAS,OAAA;IAAM,WAAU;IAChD,UAAA,KAAK;GACF,CAAA;GAGP,QAAQ,KACP,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,eAAAA,QAAD;KAAQ,SAAQ;KAAQ,WAAU;KAAS,SAAS;KAApD,UAAA,CAA4D,MACvD,KAAK,IACF;IACR,CAAA,GAAA,iBAAA,GAAA,kBAAA,KAAA,CAACA,eAAAA,QAAD;KAAQ,SAAQ;KAAQ,WAAU;KAAS,SAAS;KAApD,UAAA,CACG,KAAK,MAAK,IACL;IACL,CAAA,CAAA;;EAEF;;AAEX"}

package/dist/gallery/ArtworkPanel/ArtworkPanel.d.cts

@@ -0,0 +1,35 @@
+type ArtworkPanelSide = "left" | "right";
+type ArtworkPanelAvailability = "for-sale" | "sold" | "not-for-sale";
+type ArtworkPanelArtwork = {
+  id: string;
+  title?: string;
+  author?: string;
+  year?: number;
+  technique?: string;
+  dimensions?: string;
+  description?: string;
+  href?: string;
+  availability?: ArtworkPanelAvailability;
+};
+type ArtworkPanelLabels = {
+  close?: string;
+  prev?: string;
+  next?: string;
+  view?: string;
+  forSale?: string;
+  privateCollection?: string;
+};
+type ArtworkPanelProps = {
+  artwork: ArtworkPanelArtwork;
+  index: number;
+  count: number;
+  side?: ArtworkPanelSide;
+  labels?: ArtworkPanelLabels;
+  onClose: () => void;
+  onPrev: () => void;
+  onNext: () => void;
+  className?: string;
+};
+declare const ArtworkPanel: ({ artwork, index, count, side, labels, onClose, onPrev, onNext, className }: ArtworkPanelProps) => import("react").JSX.Element;
+export { ArtworkPanel, ArtworkPanelArtwork, ArtworkPanelAvailability, ArtworkPanelLabels, ArtworkPanelProps, ArtworkPanelSide };
+//# sourceMappingURL=ArtworkPanel.d.cts.map

package/dist/gallery/ArtworkPanel/ArtworkPanel.d.mts

@@ -0,0 +1,35 @@
+type ArtworkPanelSide = "left" | "right";
+type ArtworkPanelAvailability = "for-sale" | "sold" | "not-for-sale";
+type ArtworkPanelArtwork = {
+  id: string;
+  title?: string;
+  author?: string;
+  year?: number;
+  technique?: string;
+  dimensions?: string;
+  description?: string;
+  href?: string;
+  availability?: ArtworkPanelAvailability;
+};
+type ArtworkPanelLabels = {
+  close?: string;
+  prev?: string;
+  next?: string;
+  view?: string;
+  forSale?: string;
+  privateCollection?: string;
+};
+type ArtworkPanelProps = {
+  artwork: ArtworkPanelArtwork;
+  index: number;
+  count: number;
+  side?: ArtworkPanelSide;
+  labels?: ArtworkPanelLabels;
+  onClose: () => void;
+  onPrev: () => void;
+  onNext: () => void;
+  className?: string;
+};
+declare const ArtworkPanel: ({ artwork, index, count, side, labels, onClose, onPrev, onNext, className }: ArtworkPanelProps) => import("react").JSX.Element;
+export { ArtworkPanel, ArtworkPanelArtwork, ArtworkPanelAvailability, ArtworkPanelLabels, ArtworkPanelProps, ArtworkPanelSide };
+//# sourceMappingURL=ArtworkPanel.d.mts.map

package/dist/gallery/ArtworkPanel/ArtworkPanel.mjs

@@ -0,0 +1,92 @@
+import "../../components/Badge/index.mjs";
+import { Badge } from "../../components/Badge/Badge.mjs";
+import "../../components/Button/index.mjs";
+import { Button } from "../../components/Button/Button.mjs";
+import "../../components/Eyebrow/index.mjs";
+import { Eyebrow } from "../../components/Eyebrow/Eyebrow.mjs";
+import "../../components/IconButton/index.mjs";
+import { IconButton } from "../../components/IconButton/IconButton.mjs";
+import "../../components/Link/index.mjs";
+import { Link } from "../../components/Link/Link.mjs";
+import { cn } from "../../lib/cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+// src/gallery/ArtworkPanel/ArtworkPanel.tsx
+const DEFAULT_LABELS = {
+	close: "Cerrar",
+	prev: "Anterior",
+	next: "Siguiente",
+	view: "Ver obra",
+	forSale: "En venta",
+	privateCollection: "Colección privada"
+};
+const pad = (value) => String(value).padStart(2, "0");
+const ArtworkPanel = ({ artwork, index, count, side = "left", labels, onClose, onPrev, onNext, className }) => {
+	const text = {
+		...DEFAULT_LABELS,
+		...labels
+	};
+	const authorYear = [artwork.author, artwork.year?.toString()].filter(Boolean).join(", ");
+	const techniqueDimensions = [artwork.technique, artwork.dimensions].filter(Boolean).join(", ");
+	return /* @__PURE__ */ jsxs("aside", {
+		"aria-label": artwork.title ?? "Ficha de la obra",
+		className: cn("fixed inset-y-0 z-[9990] flex w-[38.1966%] flex-col gap-4 overflow-y-auto border-base-content/12 bg-base-100 px-6 pb-6 pt-16 text-base-content", side === "left" ? "left-0 border-r" : "right-0 border-l", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-4",
+				children: [/* @__PURE__ */ jsxs(Eyebrow, { children: [
+					"Obra ",
+					pad(index + 1),
+					" / ",
+					pad(count)
+				] }), /* @__PURE__ */ jsx(IconButton, {
+					label: text.close,
+					variant: "ghost",
+					size: "sm",
+					onClick: onClose,
+					children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+				})]
+			}),
+			/* @__PURE__ */ jsx("h2", {
+				className: "text-2xl font-semibold leading-[1.05] tracking-[-0.03em] text-balance",
+				children: artwork.title ?? "Sin título"
+			}),
+			(authorYear || techniqueDimensions) && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1 font-mono text-xs uppercase tracking-[0.12em] text-base-content/60",
+				children: [authorYear && /* @__PURE__ */ jsx("span", { children: authorYear }), techniqueDimensions && /* @__PURE__ */ jsx("span", { children: techniqueDimensions })]
+			}),
+			artwork.availability && /* @__PURE__ */ jsx(Badge, {
+				tone: artwork.availability === "for-sale" ? "accent" : "neutral",
+				children: artwork.availability === "for-sale" ? text.forSale : text.privateCollection
+			}),
+			artwork.description && /* @__PURE__ */ jsx("p", {
+				className: "text-sm leading-relaxed whitespace-pre-line text-base-content/70",
+				children: artwork.description
+			}),
+			artwork.href && /* @__PURE__ */ jsx(Link, {
+				href: artwork.href,
+				external: true,
+				arrow: true,
+				className: "mt-1",
+				children: text.view
+			}),
+			count > 1 && /* @__PURE__ */ jsxs("div", {
+				className: "mt-auto flex gap-2 border-t border-base-content/12 pt-4",
+				children: [/* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					className: "flex-1",
+					onClick: onPrev,
+					children: ["‹ ", text.prev]
+				}), /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					className: "flex-1",
+					onClick: onNext,
+					children: [text.next, " ›"]
+				})]
+			})
+		]
+	});
+};
+export { ArtworkPanel };
+
+//# sourceMappingURL=ArtworkPanel.mjs.map

package/dist/gallery/ArtworkPanel/ArtworkPanel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArtworkPanel.mjs","names":[],"sources":["../../../src/gallery/ArtworkPanel/ArtworkPanel.tsx"],"sourcesContent":["import { X } from \"lucide-react\";\nimport { Badge } from \"../../components/Badge\";\nimport { Button } from \"../../components/Button\";\nimport { Eyebrow } from \"../../components/Eyebrow\";\nimport { IconButton } from \"../../components/IconButton\";\nimport { Link } from \"../../components/Link\";\nimport { cn } from \"../../lib/cn\";\n\nexport type ArtworkPanelSide = \"left\" | \"right\";\nexport type ArtworkPanelAvailability = \"for-sale\" | \"sold\" | \"not-for-sale\";\n\nexport type ArtworkPanelArtwork = {\n  id: string;\n  title?: string;\n  author?: string;\n  year?: number;\n  technique?: string;\n  dimensions?: string;\n  description?: string;\n  href?: string;\n  availability?: ArtworkPanelAvailability;\n};\n\nexport type ArtworkPanelLabels = {\n  close?: string;\n  prev?: string;\n  next?: string;\n  view?: string;\n  forSale?: string;\n  privateCollection?: string;\n};\n\nexport type ArtworkPanelProps = {\n  artwork: ArtworkPanelArtwork;\n  index: number;\n  count: number;\n  side?: ArtworkPanelSide;\n  labels?: ArtworkPanelLabels;\n  onClose: () => void;\n  onPrev: () => void;\n  onNext: () => void;\n  className?: string;\n};\n\nconst DEFAULT_LABELS: Required<ArtworkPanelLabels> = {\n  close: \"Cerrar\",\n  prev: \"Anterior\",\n  next: \"Siguiente\",\n  view: \"Ver obra\",\n  forSale: \"En venta\",\n  privateCollection: \"Colección privada\",\n};\n\nconst pad = (value: number): string => String(value).padStart(2, \"0\");\n\nexport const ArtworkPanel = ({\n  artwork,\n  index,\n  count,\n  side = \"left\",\n  labels,\n  onClose,\n  onPrev,\n  onNext,\n  className,\n}: ArtworkPanelProps) => {\n  const text = { ...DEFAULT_LABELS, ...labels };\n  const authorYear = [artwork.author, artwork.year?.toString()]\n    .filter(Boolean)\n    .join(\", \");\n  const techniqueDimensions = [artwork.technique, artwork.dimensions]\n    .filter(Boolean)\n    .join(\", \");\n\n  return (\n    <aside\n      aria-label={artwork.title ?? \"Ficha de la obra\"}\n      className={cn(\n        \"fixed inset-y-0 z-[9990] flex w-[38.1966%] flex-col gap-4 overflow-y-auto border-base-content/12 bg-base-100 px-6 pb-6 pt-16 text-base-content\",\n        side === \"left\" ? \"left-0 border-r\" : \"right-0 border-l\",\n        className,\n      )}\n    >\n      <div className=\"flex items-start justify-between gap-4\">\n        <Eyebrow>\n          Obra {pad(index + 1)} / {pad(count)}\n        </Eyebrow>\n        <IconButton\n          label={text.close}\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={onClose}\n        >\n          <X className=\"size-4\" />\n        </IconButton>\n      </div>\n\n      <h2 className=\"text-2xl font-semibold leading-[1.05] tracking-[-0.03em] text-balance\">\n        {artwork.title ?? \"Sin título\"}\n      </h2>\n\n      {(authorYear || techniqueDimensions) && (\n        <div className=\"flex flex-col gap-1 font-mono text-xs uppercase tracking-[0.12em] text-base-content/60\">\n          {authorYear && <span>{authorYear}</span>}\n          {techniqueDimensions && <span>{techniqueDimensions}</span>}\n        </div>\n      )}\n\n      {artwork.availability && (\n        <Badge\n          tone={artwork.availability === \"for-sale\" ? \"accent\" : \"neutral\"}\n        >\n          {artwork.availability === \"for-sale\"\n            ? text.forSale\n            : text.privateCollection}\n        </Badge>\n      )}\n\n      {artwork.description && (\n        <p className=\"text-sm leading-relaxed whitespace-pre-line text-base-content/70\">\n          {artwork.description}\n        </p>\n      )}\n\n      {artwork.href && (\n        <Link href={artwork.href} external arrow className=\"mt-1\">\n          {text.view}\n        </Link>\n      )}\n\n      {count > 1 && (\n        <div className=\"mt-auto flex gap-2 border-t border-base-content/12 pt-4\">\n          <Button variant=\"ghost\" className=\"flex-1\" onClick={onPrev}>\n            ‹ {text.prev}\n          </Button>\n          <Button variant=\"ghost\" className=\"flex-1\" onClick={onNext}>\n            {text.next} ›\n          </Button>\n        </div>\n      )}\n    </aside>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AA4CA,MAAM,iBAA+C;CACnD,OAAO;CACP,MAAM;CACN,MAAM;CACN,MAAM;CACN,SAAS;CACT,mBAAmB;AACrB;AAEA,MAAM,OAAO,UAA0B,OAAO,KAAK,CAAC,CAAC,SAAS,GAAG,GAAG;AAEpE,MAAa,gBAAgB,EAC3B,SACA,OACA,OACA,OAAO,QACP,QACA,SACA,QACA,QACA,gBACuB;CACvB,MAAM,OAAO;EAAE,GAAG;EAAgB,GAAG;CAAO;CAC5C,MAAM,aAAa,CAAC,QAAQ,QAAQ,QAAQ,MAAM,SAAS,CAAC,CAAC,CAC1D,OAAO,OAAO,CAAC,CACf,KAAK,IAAI;CACZ,MAAM,sBAAsB,CAAC,QAAQ,WAAW,QAAQ,UAAU,CAAC,CAChE,OAAO,OAAO,CAAC,CACf,KAAK,IAAI;CAEZ,OACE,qBAAC,SAAD;EACE,cAAY,QAAQ,SAAS;EAC7B,WAAW,GACT,kJACA,SAAS,SAAS,oBAAoB,oBACtC,SACF;EANF,UAAA;GAQE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,SAAD,EAAA,UAAA;KAAS;KACD,IAAI,QAAQ,CAAC;KAAE;KAAI,IAAI,KAAK;IAC3B,EAAA,CAAA,GACT,oBAAC,YAAD;KACE,OAAO,KAAK;KACZ,SAAQ;KACR,MAAK;KACL,SAAS;KAET,UAAA,oBAAC,GAAD,EAAG,WAAU,SAAU,CAAA;IACb,CAAA,CACT;;GAEL,oBAAC,MAAD;IAAI,WAAU;IACX,UAAA,QAAQ,SAAS;GAChB,CAAA;IAEF,cAAc,wBACd,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,cAAc,oBAAC,QAAD,EAAA,UAAO,WAAiB,CAAA,GACtC,uBAAuB,oBAAC,QAAD,EAAA,UAAO,oBAA0B,CAAA,CACtD;;GAGN,QAAQ,gBACP,oBAAC,OAAD;IACE,MAAM,QAAQ,iBAAiB,aAAa,WAAW;IAEtD,UAAA,QAAQ,iBAAiB,aACtB,KAAK,UACL,KAAK;GACJ,CAAA;GAGR,QAAQ,eACP,oBAAC,KAAD;IAAG,WAAU;IACV,UAAA,QAAQ;GACR,CAAA;GAGJ,QAAQ,QACP,oBAAC,MAAD;IAAM,MAAM,QAAQ;IAAM,UAAA;IAAS,OAAA;IAAM,WAAU;IAChD,UAAA,KAAK;GACF,CAAA;GAGP,QAAQ,KACP,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,QAAD;KAAQ,SAAQ;KAAQ,WAAU;KAAS,SAAS;KAApD,UAAA,CAA4D,MACvD,KAAK,IACF;IACR,CAAA,GAAA,qBAAC,QAAD;KAAQ,SAAQ;KAAQ,WAAU;KAAS,SAAS;KAApD,UAAA,CACG,KAAK,MAAK,IACL;IACL,CAAA,CAAA;;EAEF;;AAEX"}

package/dist/gallery/ArtworkPanel/index.cjs

@@ -0,0 +1,2 @@
+const require_ArtworkPanel = require("./ArtworkPanel.cjs");
+exports.ArtworkPanel = require_ArtworkPanel.ArtworkPanel;

package/dist/gallery/ArtworkPanel/index.mjs

@@ -0,0 +1 @@
+export { ArtworkPanel } from "./ArtworkPanel.mjs";

package/dist/gallery.cjs

@@ -1,10 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_ArtworkPanel = require("./gallery/ArtworkPanel/ArtworkPanel.cjs");
+require("./gallery/ArtworkPanel/index.cjs");
 const require_LoadingScreen = require("./gallery/LoadingScreen/LoadingScreen.cjs");
 require("./gallery/LoadingScreen/index.cjs");
 const require_HomeButton = require("./gallery/HomeButton/HomeButton.cjs");
 require("./gallery/HomeButton/index.cjs");
 const require_SetupNotice = require("./gallery/SetupNotice/SetupNotice.cjs");
 require("./gallery/SetupNotice/index.cjs");
+exports.ArtworkPanel = require_ArtworkPanel.ArtworkPanel;
 exports.HomeButton = require_HomeButton.HomeButton;
 exports.LoadingScreen = require_LoadingScreen.LoadingScreen;
 exports.SetupNotice = require_SetupNotice.SetupNotice;

package/dist/gallery.d.cts

@@ -1,4 +1,5 @@
+import { ArtworkPanel, ArtworkPanelArtwork, ArtworkPanelAvailability, ArtworkPanelLabels, ArtworkPanelProps, ArtworkPanelSide } from "./gallery/ArtworkPanel/ArtworkPanel.cjs";
 import { LoadingGallery, LoadingScreen, LoadingScreenProps, LoadingState } from "./gallery/LoadingScreen/LoadingScreen.cjs";
 import { HomeButton, HomeButtonProps } from "./gallery/HomeButton/HomeButton.cjs";
 import { SetupNotice, SetupNoticeProps } from "./gallery/SetupNotice/SetupNotice.cjs";
-export { HomeButton, type HomeButtonProps, type LoadingGallery, LoadingScreen, type LoadingScreenProps, type LoadingState, SetupNotice, type SetupNoticeProps };
+export { ArtworkPanel, type ArtworkPanelArtwork, type ArtworkPanelAvailability, type ArtworkPanelLabels, type ArtworkPanelProps, type ArtworkPanelSide, HomeButton, type HomeButtonProps, type LoadingGallery, LoadingScreen, type LoadingScreenProps, type LoadingState, SetupNotice, type SetupNoticeProps };

package/dist/gallery.d.mts

@@ -1,4 +1,5 @@
+import { ArtworkPanel, ArtworkPanelArtwork, ArtworkPanelAvailability, ArtworkPanelLabels, ArtworkPanelProps, ArtworkPanelSide } from "./gallery/ArtworkPanel/ArtworkPanel.mjs";
 import { LoadingGallery, LoadingScreen, LoadingScreenProps, LoadingState } from "./gallery/LoadingScreen/LoadingScreen.mjs";
 import { HomeButton, HomeButtonProps } from "./gallery/HomeButton/HomeButton.mjs";
 import { SetupNotice, SetupNoticeProps } from "./gallery/SetupNotice/SetupNotice.mjs";
-export { HomeButton, type HomeButtonProps, type LoadingGallery, LoadingScreen, type LoadingScreenProps, type LoadingState, SetupNotice, type SetupNoticeProps };
+export { ArtworkPanel, type ArtworkPanelArtwork, type ArtworkPanelAvailability, type ArtworkPanelLabels, type ArtworkPanelProps, type ArtworkPanelSide, HomeButton, type HomeButtonProps, type LoadingGallery, LoadingScreen, type LoadingScreenProps, type LoadingState, SetupNotice, type SetupNoticeProps };

package/dist/gallery.mjs

@@ -1,7 +1,9 @@
+import { ArtworkPanel } from "./gallery/ArtworkPanel/ArtworkPanel.mjs";
+import "./gallery/ArtworkPanel/index.mjs";
 import { LoadingScreen } from "./gallery/LoadingScreen/LoadingScreen.mjs";
 import "./gallery/LoadingScreen/index.mjs";
 import { HomeButton } from "./gallery/HomeButton/HomeButton.mjs";
 import "./gallery/HomeButton/index.mjs";
 import { SetupNotice } from "./gallery/SetupNotice/SetupNotice.mjs";
 import "./gallery/SetupNotice/index.mjs";
-export { HomeButton, LoadingScreen, SetupNotice };
+export { ArtworkPanel, HomeButton, LoadingScreen, SetupNotice };

package/dist/scenography.css

@@ -332,80 +332,5 @@
     text-decoration-line: underline;
   }
 
-  /*
-   * The artwork panel ships its own white-on-black controls. Restyle its
-   * navigation and close buttons with the design system's square chips.
-   */
-  .sg-artwork-panel .sg-artwork-panel__navbtn {
-    flex: 1;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.375rem;
-    padding: 0.5rem 0.75rem;
-    border: 1px solid
-      color-mix(in oklab, var(--color-base-content) 12%, transparent);
-    border-radius: 0;
-    background-color: color-mix(
-      in oklab,
-      var(--color-base-100) 80%,
-      transparent
-    );
-    color: var(--color-base-content);
-    font-family: var(--font-sans);
-    font-size: 0.875rem;
-    font-weight: 500;
-    cursor: pointer;
-    backdrop-filter: blur(8px);
-    transition:
-      background-color 150ms ease,
-      color 150ms ease,
-      border-color 150ms ease;
-  }
-
-  .sg-artwork-panel .sg-artwork-panel__navbtn:hover {
-    background-color: var(--color-base-200);
-  }
-
-  .sg-artwork-panel .sg-artwork-panel__navbtn:focus-visible {
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
-  }
 
-  .sg-artwork-panel .sg-artwork-panel__close {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 2rem;
-    height: 2rem;
-    padding: 0;
-    border: 1px solid
-      color-mix(in oklab, var(--color-base-content) 12%, transparent);
-    border-radius: 0;
-    background-color: color-mix(
-      in oklab,
-      var(--color-base-100) 80%,
-      transparent
-    );
-    color: var(--color-base-content);
-    font-family: var(--font-sans);
-    font-size: 1rem;
-    line-height: 1;
-    opacity: 1;
-    cursor: pointer;
-    backdrop-filter: blur(8px);
-    transition:
-      background-color 150ms ease,
-      color 150ms ease,
-      border-color 150ms ease;
-  }
-
-  .sg-artwork-panel .sg-artwork-panel__close:hover {
-    background-color: var(--color-base-200);
-  }
-
-  .sg-artwork-panel .sg-artwork-panel__close:focus-visible {
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
-  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yo-yo.art/ui",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "The Grupo Yo-Yo design system: shared React components and tokens.",
   "keywords": [
     "design-system",