@nanisoft/prism-ui 1.2.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;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanisoft/prism-ui",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "description": "Prism's React component, block and page library.",
   "license": "MIT",