@nanisoft/prism-ui 1.1.0 → 1.3.0

package/dist/components/ui/product-mark.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { PackId } from '../../theming/index.js';
 /**
  * The three sizes a product mark is drawn at: the mark's diameter and the name
@@ -32,10 +33,11 @@ export type ProductMarkSize = keyof typeof SIZES;
  * The props a ProductMark takes.
  *
  * There is no product directory in this package. A product's identity is the
- * consumer's data, so the Component takes the three facts the mark is drawn
- * from and owns none of them: `id` for the markup, `name` for the second part,
- * and `pack` for the hue. Where the set of products is published is the
- * consumer's decision, and Prism ships the mark rather than a list of products.
+ * consumer's data, so the Component takes the facts the mark is drawn from and
+ * owns none of them: `id` for the markup, `name` for the second part, `pack`
+ * for the hue, and `mark` for the drawing itself when the identity has one.
+ * Where the set of products is published is the consumer's decision, and Prism
+ * ships the mark rather than a list of products.
  */
 export type ProductMarkProps = {
     /**
@@ -63,6 +65,21 @@ export type ProductMarkProps = {
      * core resolves the base pack's `primary` from the page.
      */
     pack?: PackId | null;
+    /**
+     * The product's drawn mark, when its identity includes one: the logo in
+     * place of the disc. The node is the consumer's drawing and this Component
+     * owns none of it, exactly as it owns none of the name; it is drawn inside
+     * the sized slot the disc occupies, so a `viewBox` drawing that fills its
+     * box arrives at every drawn size from one node. Ink strokes drawn in
+     * `currentColor` and accents drawn through a token class keep the drawing
+     * reachable by the cascade and by a pack boundary the same way the disc is.
+     *
+     * The drawing is hidden from assistive technology, as the disc is: the name
+     * is the mark's announced half either way. Omit it for the two-colour disc,
+     * which remains the mark of a product whose identity is a hue rather than a
+     * drawing.
+     */
+    mark?: ReactNode;
     /**
      * Which of the three drawn sizes to use. @defaultValue 'md'
      */
@@ -75,8 +92,10 @@ export type ProductMarkProps = {
     className?: string;
 };
 /**
- * A product's two-part colour mark: a hairline ring in the brand ink around a
- * core in the pack's own fill, beside the product's name in the brand ink.
+ * A product's two-part mark: the shape, beside the product's name in the brand
+ * ink. The shape is a disc by default, a hairline ring in the brand ink around
+ * a core in the pack's own fill, and it is the product's own drawing when
+ * `mark` carries one.
  *
  * Two parts, and both colours come from tokens, which is the whole reason this
  * is promoted out of the two hand-written copies it replaces. The ring is
@@ -110,6 +129,6 @@ export type ProductMarkProps = {
  * The disc is `aria-hidden` and the name is not, so the mark adds a shape beside
  * the word rather than a second reading of it.
  */
-declare function ProductMark({ id, name, pack, size, className }: ProductMarkProps): import("react").JSX.Element;
+declare function ProductMark({ id, name, pack, mark, size, className }: ProductMarkProps): import("react").JSX.Element;
 export { ProductMark };
 //# sourceMappingURL=product-mark.d.ts.map

package/dist/components/ui/product-mark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-mark.d.ts","sourceRoot":"","sources":["../../../src/components/ui/product-mark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AA2B3C;;;;;;;;GAQG;AACH,QAAA,MAAM,KAAK;;;;;;;;;;;;;CAID,CAAA;AAEV;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,KAAK,CAAA;AAEhD;;;;;;;;GAQG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;;;;OAMG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,iBAAS,WAAW,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BA2BhF;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"product-mark.d.ts","sourceRoot":"","sources":["../../../src/components/ui/product-mark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AA2B3C;;;;;;;;GAQG;AACH,QAAA,MAAM,KAAK;;;;;;;;;;;;;CAID,CAAA;AAEV;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,KAAK,CAAA;AAEhD;;;;;;;;;GASG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;;;;OAMG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,iBAAS,WAAW,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BAsCtF;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/ui/product-mark.js

@@ -36,8 +36,10 @@ const SIZES = {
     lg: { mark: 'size-6', name: 'text-base' },
 };
 /**
- * A product's two-part colour mark: a hairline ring in the brand ink around a
- * core in the pack's own fill, beside the product's name in the brand ink.
+ * A product's two-part mark: the shape, beside the product's name in the brand
+ * ink. The shape is a disc by default, a hairline ring in the brand ink around
+ * a core in the pack's own fill, and it is the product's own drawing when
+ * `mark` carries one.
  *
  * Two parts, and both colours come from tokens, which is the whole reason this
  * is promoted out of the two hand-written copies it replaces. The ring is
@@ -71,12 +73,12 @@ const SIZES = {
  * The disc is `aria-hidden` and the name is not, so the mark adds a shape beside
  * the word rather than a second reading of it.
  */
-function ProductMark({ id, name, pack, size = 'md', className }) {
+function ProductMark({ id, name, pack, mark, size = 'md', className }) {
     const drawn = SIZES[size];
     // `default` is the absence of a pack id, spelled the way the token build
     // spells it, so a base-pack product resolves `primary` from the page rather
     // than from an attribute that matches no emitted rule.
     const boundary = pack && pack !== 'default' ? pack : undefined;
-    return (_jsxs("span", { "data-slot": "product-mark", "data-pack": boundary, className: cn('inline-flex items-center gap-2', className), children: [_jsx("span", { "data-slot": "product-mark-disc", "data-product": id, "aria-hidden": true, className: cn('inline-block shrink-0 rounded-full border border-brand-ink', drawn.mark, pack ? 'bg-primary' : SPECTRUM) }), _jsx("span", { "data-slot": "product-mark-name", className: cn('font-medium text-brand-ink', drawn.name), children: name })] }));
+    return (_jsxs("span", { "data-slot": "product-mark", "data-pack": boundary, className: cn('inline-flex items-center gap-2', className), children: [mark ? (_jsx("span", { "data-slot": "product-mark-drawn", "data-product": id, "aria-hidden": true, className: cn('inline-block shrink-0', drawn.mark), children: mark })) : (_jsx("span", { "data-slot": "product-mark-disc", "data-product": id, "aria-hidden": true, className: cn('inline-block shrink-0 rounded-full border border-brand-ink', drawn.mark, pack ? 'bg-primary' : SPECTRUM) })), _jsx("span", { "data-slot": "product-mark-name", className: cn('font-medium text-brand-ink', drawn.name), children: name })] }));
 }
 export { ProductMark };

package/dist/components/ui/pulse-series.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pulse-series.d.ts","sourceRoot":"","sources":["../../../src/components/ui/pulse-series.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,QAAQ,GAAG;IACrB,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAA;IACV,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED;;;;;;;GAOG;AACH,KAAK,iBAAiB,GAClB;IACE;;;;OAIG;IACH,UAAU,EAAE,IAAI,CAAA;IAChB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,GACD;IACE,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,KAAK,CAAA;CACnB,CAAA;AAEL,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAAG;IACjD;;;;OAIG;IACD,IAAI,EAAE,SAAS,QAAQ,EAAE,CAAA;IACzB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAoCH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,QAAQ,EACR,IAAY,EACZ,KAAK,EACL,UAAkB,EAClB,SAAS,GACV,EAAE,gBAAgB,+BAsIlB;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"pulse-series.d.ts","sourceRoot":"","sources":["../../../src/components/ui/pulse-series.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,QAAQ,GAAG;IACrB,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAA;IACV,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED;;;;;;;GAOG;AACH,KAAK,iBAAiB,GAClB;IACE;;;;OAIG;IACH,UAAU,EAAE,IAAI,CAAA;IAChB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,GACD;IACE,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,KAAK,CAAA;CACnB,CAAA;AAEL,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAAG;IACjD;;;;OAIG;IACD,IAAI,EAAE,SAAS,QAAQ,EAAE,CAAA;IACzB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAoCH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,QAAQ,EACR,IAAY,EACZ,KAAK,EACL,UAAkB,EAClB,SAAS,GACV,EAAE,gBAAgB,+BAiJlB;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/ui/pulse-series.js

@@ -81,7 +81,7 @@ function PulseSeries({ bars, baseline, scan = false, label, decorative = false,
     const tallest = Math.max(...bars.map((bar) => bar.value), 0);
     const slot = bars.length ? roomX / bars.length : roomX;
     const barWidth = Math.max(2, Math.min(MAX_BAR_WIDTH, slot * (1 / (1 + BAR_GAP))));
-    return (_jsxs("svg", { "data-slot": "pulse-series", "data-columns": bars.length, "data-scan": scan || undefined, viewBox: `0 0 ${CANVAS_WIDTH} ${CANVAS_HEIGHT}`, xmlns: "http://www.w3.org/2000/svg", role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : label, "aria-hidden": decorative || undefined, className: cn('h-auto w-full', className), children: [scan ? (_jsx("g", { "data-slot": "pulse-series-scan", "aria-hidden": true, children: _jsxs("g", { className: "prism-ambient-scan", style: { '--ambient-scan-distance': `${roomX + slot}px` }, children: [_jsx("rect", { "data-slot": "pulse-series-scan-wash", x: PADDING - slot, y: PADDING_TOP - 12, width: slot, height: roomY + 12, className: "fill-brand-ink/10" }), _jsx("line", { "data-slot": "pulse-series-scan-line", x1: 0, y1: PADDING_TOP - 12, x2: 0, y2: baselineY, strokeWidth: 1, className: "stroke-brand-ink/60" })] }) })) : null, bars.map((bar, index) => {
+    return (_jsxs("svg", { "data-slot": "pulse-series", "data-columns": bars.length, "data-scan": scan || undefined, viewBox: `0 0 ${CANVAS_WIDTH} ${CANVAS_HEIGHT}`, xmlns: "http://www.w3.org/2000/svg", role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : label, "aria-hidden": decorative || undefined, className: cn('h-auto w-full', className), children: [scan ? (_jsx("g", { "data-slot": "pulse-series-scan", "aria-hidden": true, transform: `translate(${PADDING} 0)`, children: _jsxs("g", { className: "prism-ambient-scan", style: { '--ambient-scan-distance': `${roomX}px` }, children: [_jsx("rect", { "data-slot": "pulse-series-scan-wash", x: -slot / 2, y: PADDING_TOP - 12, width: slot, height: baselineY - PADDING_TOP + 12, className: "fill-brand-ink/10" }), _jsx("line", { "data-slot": "pulse-series-scan-line", x1: 0, y1: PADDING_TOP - 12, x2: 0, y2: baselineY, strokeWidth: 1, className: "stroke-brand-ink/60" })] }) })) : null, bars.map((bar, index) => {
                 const centre = PADDING + slot * (index + 0.5);
                 // A column of value zero is drawn as a hairline rather than as nothing,
                 // because a gap in a series is a missing reading and a missing reading

package/dist/components/ui/sparkline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sparkline.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sparkline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AA2C/C,uCAAuC;AACvC,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;IAChF;;;;;;;;OAQG;IACH,MAAM,EAAE,SAAS,MAAM,EAAE,CAAA;IACzB;;;;;;;;;OASG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,MAAM,EACN,KAAK,EACL,IAAgB,EAChB,KAAU,EACV,MAAW,EACX,aAAqB,EACrB,GAAG,KAAK,EACT,EAAE,cAAc,+BA6FhB;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"sparkline.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sparkline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AA0C/C,uCAAuC;AACvC,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;IAChF;;;;;;;;OAQG;IACH,MAAM,EAAE,SAAS,MAAM,EAAE,CAAA;IACzB;;;;;;;;;OASG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,MAAM,EACN,KAAK,EACL,IAAgB,EAChB,KAAU,EACV,MAAW,EACX,aAAqB,EACrB,GAAG,KAAK,EACT,EAAE,cAAc,+BAoGhB;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/ui/sparkline.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Table, TableBody, TableCaption, TableCell, TableHead, TableRow } from './table.js';
 import { cn } from '../../lib/utils.js';
 /** The fill a series mark is drawn in, from the role the caller assigned it. */
 const FILL = {
@@ -108,6 +107,6 @@ function Sparkline({ className, values, label, tone = 'chart-1', width = 96, hei
     const at = (index) => (index / (values.length - 1)) * 100;
     const up = (value) => INSET + (1 - (value - lowest) / span) * (100 - INSET * 2);
     const last = values.length - 1;
-    return (_jsxs("figure", { "data-slot": "sparkline", "aria-label": label, className: cn('inline-flex shrink-0 flex-col', className), style: { width, height }, ...props, children: [_jsxs("span", { "data-slot": "sparkline-plot", "aria-hidden": "true", className: "relative block size-full", children: [_jsx("svg", { className: "pointer-events-none absolute inset-0 size-full overflow-visible", children: values.slice(1).map((value, index) => (_jsx("line", { x1: `${at(index)}%`, y1: `${up(values[index])}%`, x2: `${at(index + 1)}%`, y2: `${up(value)}%`, className: STROKE[tone], strokeWidth: 1.5, strokeLinecap: "round" }, index))) }), emphasizeLast ? (_jsx("span", { "data-slot": "sparkline-last", className: cn('absolute size-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full', FILL[tone]), style: { left: `${at(last)}%`, top: `${up(values[last])}%` } })) : null] }), _jsx("div", { "data-slot": "sparkline-table", className: "sr-only", children: _jsxs(Table, { children: [_jsx(TableCaption, { children: label }), _jsx(TableBody, { children: values.map((value, index) => (_jsxs(TableRow, { children: [_jsx(TableHead, { scope: "row", className: "font-medium tabular-nums", children: index + 1 }), _jsx(TableCell, { className: "tabular-nums", children: value })] }, index))) })] }) })] }));
+    return (_jsxs("figure", { "data-slot": "sparkline", "aria-label": label, className: cn('inline-flex shrink-0 flex-col', className), style: { width, height }, ...props, children: [_jsxs("span", { "data-slot": "sparkline-plot", "aria-hidden": "true", className: "relative block size-full", children: [_jsx("svg", { className: "pointer-events-none absolute inset-0 size-full overflow-visible", children: values.slice(1).map((value, index) => (_jsx("line", { x1: `${at(index)}%`, y1: `${up(values[index])}%`, x2: `${at(index + 1)}%`, y2: `${up(value)}%`, className: STROKE[tone], strokeWidth: 1.5, strokeLinecap: "round" }, index))) }), emphasizeLast ? (_jsx("span", { "data-slot": "sparkline-last", className: cn('absolute size-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full', FILL[tone]), style: { left: `${at(last)}%`, top: `${up(values[last])}%` } })) : null] }), _jsx("div", { "data-slot": "sparkline-table", className: "sr-only", children: _jsxs("table", { children: [_jsx("caption", { children: label }), _jsx("tbody", { children: values.map((value, index) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: index + 1 }), _jsx("td", { children: value })] }, index))) })] }) })] }));
 }
 export { Sparkline };

package/dist/styles.css

@@ -944,6 +944,9 @@
   .min-w-40 {
     min-width: calc(var(--spacing) * 40);
   }
+  .min-w-44 {
+    min-width: calc(var(--spacing) * 44);
+  }
   .min-w-48 {
     min-width: calc(var(--spacing) * 48);
   }
@@ -2868,6 +2871,16 @@
   .data-\[checked\]\:text-primary-foreground[data-checked] {
     color: var(--primary-foreground);
   }
+  .data-\[current\]\:bg-accent[data-current] {
+    background-color: var(--accent);
+  }
+  .data-\[current\]\:font-medium[data-current] {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .data-\[current\]\:text-accent-foreground[data-current] {
+    color: var(--accent-foreground);
+  }
   .data-\[disabled\]\:pointer-events-none[data-disabled] {
     pointer-events: none;
   }
@@ -4466,6 +4479,166 @@
   --sidebar-ring: #feb98b;
   --radius: 1rem;
 }
+[data-pack="cyan"] {
+  --background: #ffffff;
+  --foreground: #2a2f30;
+  --card: #ffffff;
+  --card-foreground: #2a2f30;
+  --popover: #ffffff;
+  --popover-foreground: #2a2f30;
+  --primary: #46bcd6;
+  --primary-foreground: #001c23;
+  --secondary: #e9eeef;
+  --secondary-foreground: #2a2f30;
+  --muted: #e9eeef;
+  --muted-foreground: #555c5e;
+  --accent: #cdf5ff;
+  --accent-foreground: #001c23;
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --success: #15803d;
+  --success-foreground: #ffffff;
+  --warning: #f59e0b;
+  --warning-foreground: #15191a;
+  --border: #d9dfe1;
+  --input: #d9dfe1;
+  --ring: #00a0bb;
+  --brand-ink: #006678;
+  --chart-1: #00a0bb;
+  --chart-2: #14b8a6;
+  --chart-3: #f59e0b;
+  --chart-4: #889193;
+  --chart-5: #ef4444;
+  --sidebar: #f4f7f8;
+  --sidebar-foreground: #2a2f30;
+  --sidebar-primary: #46bcd6;
+  --sidebar-primary-foreground: #001c23;
+  --sidebar-accent: #cdf5ff;
+  --sidebar-accent-foreground: #001c23;
+  --sidebar-border: #d9dfe1;
+  --sidebar-ring: #008399;
+  --radius: 0.5rem;
+}
+[data-pack="cyan"].dark, .dark [data-pack="cyan"] {
+  --background: #15191a;
+  --foreground: #e9eeef;
+  --card: #2a2f30;
+  --card-foreground: #e9eeef;
+  --popover: #2a2f30;
+  --popover-foreground: #e9eeef;
+  --primary: #7fdaf0;
+  --primary-foreground: #001c23;
+  --secondary: #3d4445;
+  --secondary-foreground: #e9eeef;
+  --muted: #3d4445;
+  --muted-foreground: #c4ccce;
+  --accent: #004b59;
+  --accent-foreground: #cdf5ff;
+  --destructive: #f87171;
+  --destructive-foreground: #15191a;
+  --success: #4ade80;
+  --success-foreground: #15191a;
+  --warning: #fcd34d;
+  --warning-foreground: #15191a;
+  --border: #3d4445;
+  --input: #3d4445;
+  --ring: #7fdaf0;
+  --brand-ink: #a7ebfc;
+  --chart-1: #46bcd6;
+  --chart-2: #2dd4bf;
+  --chart-3: #fbbf24;
+  --chart-4: #a4adaf;
+  --chart-5: #f87171;
+  --sidebar: #2a2f30;
+  --sidebar-foreground: #e9eeef;
+  --sidebar-primary: #7fdaf0;
+  --sidebar-primary-foreground: #001c23;
+  --sidebar-accent: #004b59;
+  --sidebar-accent-foreground: #cdf5ff;
+  --sidebar-border: #3d4445;
+  --sidebar-ring: #7fdaf0;
+  --radius: 0.5rem;
+}
+[data-pack="gold"] {
+  --background: #ffffff;
+  --foreground: #302d29;
+  --card: #ffffff;
+  --card-foreground: #302d29;
+  --popover: #ffffff;
+  --popover-foreground: #302d29;
+  --primary: #d2a24b;
+  --primary-foreground: #231600;
+  --secondary: #efece9;
+  --secondary-foreground: #302d29;
+  --muted: #efece9;
+  --muted-foreground: #5e5a54;
+  --accent: #ffeac7;
+  --accent-foreground: #231600;
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --success: #15803d;
+  --success-foreground: #ffffff;
+  --warning: #f59e0b;
+  --warning-foreground: #1a1815;
+  --border: #e1ddd9;
+  --input: #e1ddd9;
+  --ring: #b78520;
+  --brand-ink: #775300;
+  --chart-1: #b78520;
+  --chart-2: #14b8a6;
+  --chart-3: #f59e0b;
+  --chart-4: #938e87;
+  --chart-5: #ef4444;
+  --sidebar: #f8f6f4;
+  --sidebar-foreground: #302d29;
+  --sidebar-primary: #d2a24b;
+  --sidebar-primary-foreground: #231600;
+  --sidebar-accent: #ffeac7;
+  --sidebar-accent-foreground: #231600;
+  --sidebar-border: #e1ddd9;
+  --sidebar-ring: #986b00;
+  --radius: 1rem;
+}
+[data-pack="gold"].dark, .dark [data-pack="gold"] {
+  --background: #1a1815;
+  --foreground: #efece9;
+  --card: #302d29;
+  --card-foreground: #efece9;
+  --popover: #302d29;
+  --popover-foreground: #efece9;
+  --primary: #edc47d;
+  --primary-foreground: #231600;
+  --secondary: #45423c;
+  --secondary-foreground: #efece9;
+  --muted: #45423c;
+  --muted-foreground: #cecac4;
+  --accent: #583d00;
+  --accent-foreground: #ffeac7;
+  --destructive: #f87171;
+  --destructive-foreground: #1a1815;
+  --success: #4ade80;
+  --success-foreground: #1a1815;
+  --warning: #fcd34d;
+  --warning-foreground: #1a1815;
+  --border: #45423c;
+  --input: #45423c;
+  --ring: #edc47d;
+  --brand-ink: #f9d9a4;
+  --chart-1: #d2a24b;
+  --chart-2: #2dd4bf;
+  --chart-3: #fbbf24;
+  --chart-4: #afaaa3;
+  --chart-5: #f87171;
+  --sidebar: #302d29;
+  --sidebar-foreground: #efece9;
+  --sidebar-primary: #edc47d;
+  --sidebar-primary-foreground: #231600;
+  --sidebar-accent: #583d00;
+  --sidebar-accent-foreground: #ffeac7;
+  --sidebar-border: #45423c;
+  --sidebar-ring: #edc47d;
+  --radius: 1rem;
+}
 @keyframes prism-travel {
   from {
     transform: translateX(0);

package/dist/theming/index.d.ts

@@ -8,7 +8,7 @@
  * client runtime. There is no theme factory and no override object: the pack
  * and mode are the whole API.
  */
-export declare const PACKS: readonly ["default", "blush", "mint", "lavender", "sky", "peach"];
+export declare const PACKS: readonly ["default", "blush", "mint", "lavender", "sky", "peach", "cyan", "gold"];
 export type PackId = (typeof PACKS)[number];
 export declare const MODES: readonly ["light", "dark"];
 export type Mode = (typeof MODES)[number];

package/dist/theming/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theming/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,eAAO,MAAM,KAAK,mEAAoE,CAAA;AACtF,MAAM,MAAM,MAAM,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAA;AAE3C,eAAO,MAAM,KAAK,4BAA6B,CAAA;AAC/C,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAA;AAEzC,eAAO,MAAM,cAAc,cAAc,CAAA;AACzC,eAAO,MAAM,mBAAmB,gBAAgB,CAAA;AAEhD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB,sBAAsB,CAAA;AAEzD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,aAAa,kEAAmE,CAAA;AAC7F,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;AAExD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,wBAAwB,+BAAgC,CAAA;AAUrE;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,GAAG,IAAI,CAgBxF;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,6EAA6E;IAC7E,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,qEAAqE;IACrE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,iEAAiE;IACjE,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,4DAA4D;IAC5D,YAAY,EAAE,OAAO,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,IAAI,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,IAAI,CAAA;IACV,iEAAiE;IACjE,MAAM,EAAE,WAAW,CAAA;CACpB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,MAAM,EACN,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,GACZ,EAAE,oBAAoB,GAAG,eAAe,CAoBxC;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,GACnC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,GAAG,IAAI,CAMpC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,IAAI,GACL,EAAE;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,IAAI,CAAA;CACZ,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAK/C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theming/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,eAAO,MAAM,KAAK,mFAAoF,CAAA;AACtG,MAAM,MAAM,MAAM,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAA;AAE3C,eAAO,MAAM,KAAK,4BAA6B,CAAA;AAC/C,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAA;AAEzC,eAAO,MAAM,cAAc,cAAc,CAAA;AACzC,eAAO,MAAM,mBAAmB,gBAAgB,CAAA;AAEhD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB,sBAAsB,CAAA;AAEzD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,aAAa,kEAAmE,CAAA;AAC7F,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;AAExD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,wBAAwB,+BAAgC,CAAA;AAUrE;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,GAAG,IAAI,CAgBxF;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,6EAA6E;IAC7E,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,qEAAqE;IACrE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,iEAAiE;IACjE,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,4DAA4D;IAC5D,YAAY,EAAE,OAAO,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,IAAI,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,IAAI,CAAA;IACV,iEAAiE;IACjE,MAAM,EAAE,WAAW,CAAA;CACpB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,MAAM,EACN,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,GACZ,EAAE,oBAAoB,GAAG,eAAe,CAoBxC;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,GACnC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,GAAG,IAAI,CAMpC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,IAAI,GACL,EAAE;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,IAAI,CAAA;CACZ,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAK/C"}

package/dist/theming/index.js

@@ -8,7 +8,7 @@
  * client runtime. There is no theme factory and no override object: the pack
  * and mode are the whole API.
  */
-export const PACKS = ['default', 'blush', 'mint', 'lavender', 'sky', 'peach'];
+export const PACKS = ['default', 'blush', 'mint', 'lavender', 'sky', 'peach', 'cyan', 'gold'];
 export const MODES = ['light', 'dark'];
 export const PACK_ATTRIBUTE = 'data-pack';
 export const DEFAULT_STORAGE_KEY = 'prism-theme';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanisoft/prism-ui",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "type": "module",
   "description": "Prism's React component, block and page library.",
   "license": "MIT",
@@ -102,7 +102,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.545.0",
     "tailwind-merge": "^3.3.1",
-    "@nanisoft/prism-tokens": "0.16.0"
+    "@nanisoft/prism-tokens": "1.2.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.3.3",