wimui 0.27.0 → 0.29.0

package/dist/components/charts/SankeyChart/SankeyChart.js

@@ -0,0 +1,106 @@
+"use client";
+import { Title as e } from "../../typography/Title/Title.js";
+import { CHART_COLORS as t, CHART_HIDDEN_A11Y_PROPS as n, CHART_THEME as r } from "../../helpers.js";
+import { ChartDataTable as i } from "../../_internal/ChartDataTable.js";
+import { linkTable as a } from "../../_internal/chartTableData.js";
+import { warnDuplicateSankeyNode as o, warnUnknownSankeyNode as s } from "./warn-unknown-node.js";
+import c from "./sankey-chart.module.js";
+import "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { ResponsiveContainer as d, Sankey as f, Tooltip as p } from "recharts";
+//#region src/components/charts/SankeyChart/SankeyChart.tsx
+var m = 12, h = 24, g = 8, _ = ({ x: e = 0, y: n = 0, width: r = 0, height: i = 0, index: a = 0, payload: o }) => {
+	let s = (o?.targetNodes?.length ?? 0) === 0;
+	return /* @__PURE__ */ u("g", { children: [/* @__PURE__ */ l("rect", {
+		x: e,
+		y: n,
+		width: r,
+		height: i,
+		fill: t[a % t.length],
+		rx: 2
+	}), /* @__PURE__ */ l("text", {
+		className: c.label,
+		x: s ? e - g : e + r + g,
+		y: n + i / 2,
+		textAnchor: s ? "end" : "start",
+		dominantBaseline: "middle",
+		children: o?.name
+	})] });
+}, v = ({ sourceX: e = 0, targetX: n = 0, sourceY: r = 0, targetY: i = 0, sourceControlX: a = 0, targetControlX: o = 0, linkWidth: s = 0, payload: c, colorIndexOf: u }) => {
+	let d = c?.source?.name, f = (d === void 0 ? void 0 : u?.get(d)) ?? 0;
+	return /* @__PURE__ */ l("path", {
+		d: `M${e},${r}C${a},${r} ${o},${i} ${n},${i}`,
+		fill: "none",
+		stroke: t[f % t.length],
+		strokeWidth: s,
+		strokeOpacity: .28
+	});
+}, y = ({ nodes: t, links: g, height: y = 300, width: b = "100%", title: x, "aria-label": S }) => {
+	let C = S ?? x, w = /* @__PURE__ */ new Map();
+	t.forEach((e, t) => {
+		if (w.has(e)) {
+			o(e);
+			return;
+		}
+		w.set(e, t);
+	});
+	let T = g.filter((e) => {
+		let n = w.has(e.source) ? w.has(e.target) ? null : e.target : e.source;
+		return n === null ? !0 : (s(n, t), !1);
+	}), E = a(T);
+	return /* @__PURE__ */ u("div", {
+		className: `wim-sankey-chart ${c.root}`,
+		style: { width: b },
+		role: C ? "figure" : void 0,
+		"aria-label": C,
+		children: [
+			x && /* @__PURE__ */ l(e, {
+				tag: "h3",
+				size: "md",
+				style: { marginBottom: "var(--wim-spacing-md)" },
+				children: x
+			}),
+			/* @__PURE__ */ l("div", {
+				className: c.container,
+				style: { height: y },
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ l(d, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ l(f, {
+						...n,
+						data: {
+							nodes: t.map((e) => ({ name: e })),
+							links: T.map((e) => ({
+								source: w.get(e.source),
+								target: w.get(e.target),
+								value: e.value
+							}))
+						},
+						nodeWidth: m,
+						nodePadding: h,
+						margin: {
+							top: 8,
+							right: 8,
+							bottom: 8,
+							left: 8
+						},
+						node: /* @__PURE__ */ l(_, {}),
+						link: /* @__PURE__ */ l(v, { colorIndexOf: w }),
+						children: /* @__PURE__ */ l(p, {
+							contentStyle: r.tooltip.contentStyle,
+							cursor: r.tooltip.cursor
+						})
+					})
+				})
+			}),
+			/* @__PURE__ */ l(i, {
+				caption: C,
+				columns: E.columns,
+				rows: E.rows
+			})
+		]
+	});
+};
+//#endregion
+export { y as SankeyChart };

package/dist/components/charts/SankeyChart/sankey-chart.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_165yr_3`,t=`_container_165yr_6`,n=`_label_165yr_14`,r={root:e,container:t,label:n};exports.container=t,exports.default=r,exports.label=n,exports.root=e;

package/dist/components/charts/SankeyChart/sankey-chart.module.js

@@ -0,0 +1,9 @@
+"use client";
+//#region src/components/charts/SankeyChart/sankey-chart.module.scss
+var e = "_root_165yr_3", t = "_container_165yr_6", n = "_label_165yr_14", r = {
+	root: e,
+	container: t,
+	label: n
+};
+//#endregion
+export { t as container, r as default, n as label, e as root };

package/dist/components/charts/SankeyChart/warn-unknown-node.cjs

@@ -0,0 +1,2 @@
+"use client";
+function e(e,t){}function t(e){}exports.warnDuplicateSankeyNode=t,exports.warnUnknownSankeyNode=e;

package/dist/components/charts/SankeyChart/warn-unknown-node.d.ts

@@ -0,0 +1,9 @@
+/** `links` が `nodes` に無い名前を指した。その流れは描けないので落とす。 */
+export declare function warnUnknownSankeyNode(missing: string, nodes: readonly string[]): void;
+/**
+ * `nodes` に同じ名前が 2 つ以上ある。`links` は名前で node を指すので、
+ * **2 つ目以降には 1 本も届かない** ── その段は空のまま描かれ、量だけが消える。
+ */
+export declare function warnDuplicateSankeyNode(duplicate: string): void;
+/** Test seam — the warn-once set is module state. */
+export declare function resetSankeyWarnings(): void;

package/dist/components/charts/SankeyChart/warn-unknown-node.js

@@ -0,0 +1,5 @@
+"use client";
+function e(e, t) {}
+function t(e) {}
+//#endregion
+export { t as warnDuplicateSankeyNode, e as warnUnknownSankeyNode };

package/dist/components/charts/WaterfallChart/WaterfallChart.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../typography/Title/Title.cjs"),n=require("../../helpers.cjs"),r=require("../../_internal/ChartDataTable.cjs"),i=require("../../_internal/chartTableData.cjs"),a=require("../../_internal/barSpan.cjs"),o=require("./waterfall-chart.module.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("react/jsx-runtime"),l=require("recharts");var u={increase:`var(--wim-color-chart-success)`,decrease:`var(--wim-color-chart-danger)`,total:`var(--wim-color-chart-primary)`},d=e=>{let t=0;return(e??[]).map(e=>{let n=a.isFiniteNumber(e?.value)?e.value:0;if(e?.total){let n=t<0?[t,0]:[0,t];return{name:e.name,span:n,kind:`total`,amount:t,running:t}}let r=t;t+=n;let i=r<t?[r,t]:[t,r];return{name:e.name,span:i,kind:n<0?`decrease`:`increase`,amount:n,running:t}})},f=e=>e.kind===`total`||e.amount<0?String(e.amount):`+${e.amount}`,p=({x:e=0,y:t=0,width:n=0,height:r=0,payload:i})=>i?(0,c.jsxs)(`g`,{children:[(0,c.jsx)(`rect`,{x:e,y:t,width:n,height:Math.max(r,1),fill:u[i.kind],rx:2}),(0,c.jsx)(`text`,{className:o.default.value,x:e+n/2,y:t-6,textAnchor:`middle`,children:f(i)})]}):null,m=({data:e,height:a=300,width:s=`100%`,title:u,"aria-label":m})=>{let h=m??u,g=d(e),_=i.stepTable(g.map(e=>({name:e.name,change:f(e),running:e.running})));return(0,c.jsxs)(`div`,{className:`wim-waterfall-chart ${o.default.root}`,style:{width:s},role:h?`figure`:void 0,"aria-label":h,children:[u&&(0,c.jsx)(t.Title,{tag:`h3`,size:`md`,style:{marginBottom:`var(--wim-spacing-md)`},children:u}),(0,c.jsx)(`div`,{className:o.default.container,style:{height:a},"aria-hidden":`true`,children:(0,c.jsx)(l.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,c.jsxs)(l.BarChart,{...n.CHART_HIDDEN_A11Y_PROPS,data:g,margin:{top:20,right:30,left:0,bottom:5},children:[(0,c.jsx)(l.CartesianGrid,{...n.CHART_THEME.grid,vertical:!1}),(0,c.jsx)(l.XAxis,{dataKey:`name`,interval:0,...n.CHART_THEME.axis,tickLine:!1,axisLine:!1}),(0,c.jsx)(l.YAxis,{width:44,...n.CHART_THEME.axis,tickLine:!1,axisLine:!1}),(0,c.jsx)(l.Tooltip,{contentStyle:n.CHART_THEME.tooltip.contentStyle,cursor:n.CHART_THEME.tooltip.cursor}),(0,c.jsx)(l.Bar,{dataKey:`span`,shape:(0,c.jsx)(p,{}),isAnimationActive:!1})]})})}),(0,c.jsx)(r.ChartDataTable,{caption:h,columns:_.columns,rows:_.rows})]})};exports.WaterfallChart=m;

package/dist/components/charts/WaterfallChart/WaterfallChart.d.ts

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+export type WaterfallItem = {
+    /** Label for this step, shown on the X axis. */
+    name: string;
+    /**
+     * How much this step adds (positive) or removes (negative) from the running
+     * total. On a `total` step this is ignored — the bar is drawn to the running
+     * total instead.
+     */
+    value: number;
+    /**
+     * Draw this step as a total: a bar from the baseline up to the running total,
+     * rather than a floating change. Use it for the opening and closing columns.
+     * @default false
+     */
+    total?: boolean;
+};
+export type WaterfallChartProps = {
+    /** The steps, in the order they are applied. */
+    data: WaterfallItem[];
+    /**
+     * The height of the chart in pixels.
+     * @default 300
+     */
+    height?: number;
+    /**
+     * The width of the chart (e.g., "100%", 500).
+     * @default "100%"
+     */
+    width?: string | number;
+    /** Optional title displayed above the chart. */
+    title?: string;
+    /**
+     * Accessible name for the chart. Defaults to `title` when omitted; pass this
+     * when the chart has no visible title, or when the title is not descriptive
+     * enough on its own.
+     */
+    "aria-label"?: string;
+};
+/**
+ * Shows how a starting number becomes an ending number, one contribution at a
+ * time — revenue to profit, last month's headcount to this month's, a budget
+ * to what is left of it.
+ *
+ * **Each bar floats between the running total before and after that step**,
+ * which is what a stacked `BarChart` cannot express: stacking shows the parts
+ * of one total, not the arithmetic that produced it.
+ *
+ * Composition Contract:
+ * - Managed by: App consumption
+ * - Scroll lock: No
+ */
+export declare const WaterfallChart: ({ data, height, width, title, "aria-label": ariaLabel, }: WaterfallChartProps) => React.JSX.Element;

package/dist/components/charts/WaterfallChart/WaterfallChart.js

@@ -0,0 +1,128 @@
+"use client";
+import { Title as e } from "../../typography/Title/Title.js";
+import { CHART_HIDDEN_A11Y_PROPS as t, CHART_THEME as n } from "../../helpers.js";
+import { ChartDataTable as r } from "../../_internal/ChartDataTable.js";
+import { stepTable as i } from "../../_internal/chartTableData.js";
+import { isFiniteNumber as a } from "../../_internal/barSpan.js";
+import o from "./waterfall-chart.module.js";
+import "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Bar as l, BarChart as u, CartesianGrid as d, ResponsiveContainer as f, Tooltip as p, XAxis as m, YAxis as h } from "recharts";
+//#region src/components/charts/WaterfallChart/WaterfallChart.tsx
+var g = {
+	increase: "var(--wim-color-chart-success)",
+	decrease: "var(--wim-color-chart-danger)",
+	total: "var(--wim-color-chart-primary)"
+}, _ = (e) => {
+	let t = 0;
+	return (e ?? []).map((e) => {
+		let n = a(e?.value) ? e.value : 0;
+		if (e?.total) {
+			let n = t < 0 ? [t, 0] : [0, t];
+			return {
+				name: e.name,
+				span: n,
+				kind: "total",
+				amount: t,
+				running: t
+			};
+		}
+		let r = t;
+		t += n;
+		let i = r < t ? [r, t] : [t, r];
+		return {
+			name: e.name,
+			span: i,
+			kind: n < 0 ? "decrease" : "increase",
+			amount: n,
+			running: t
+		};
+	});
+}, v = (e) => e.kind === "total" || e.amount < 0 ? String(e.amount) : `+${e.amount}`, y = ({ x: e = 0, y: t = 0, width: n = 0, height: r = 0, payload: i }) => i ? /* @__PURE__ */ c("g", { children: [/* @__PURE__ */ s("rect", {
+	x: e,
+	y: t,
+	width: n,
+	height: Math.max(r, 1),
+	fill: g[i.kind],
+	rx: 2
+}), /* @__PURE__ */ s("text", {
+	className: o.value,
+	x: e + n / 2,
+	y: t - 6,
+	textAnchor: "middle",
+	children: v(i)
+})] }) : null, b = ({ data: a, height: g = 300, width: b = "100%", title: x, "aria-label": S }) => {
+	let C = S ?? x, w = _(a), T = i(w.map((e) => ({
+		name: e.name,
+		change: v(e),
+		running: e.running
+	})));
+	return /* @__PURE__ */ c("div", {
+		className: `wim-waterfall-chart ${o.root}`,
+		style: { width: b },
+		role: C ? "figure" : void 0,
+		"aria-label": C,
+		children: [
+			x && /* @__PURE__ */ s(e, {
+				tag: "h3",
+				size: "md",
+				style: { marginBottom: "var(--wim-spacing-md)" },
+				children: x
+			}),
+			/* @__PURE__ */ s("div", {
+				className: o.container,
+				style: { height: g },
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ s(f, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ c(u, {
+						...t,
+						data: w,
+						margin: {
+							top: 20,
+							right: 30,
+							left: 0,
+							bottom: 5
+						},
+						children: [
+							/* @__PURE__ */ s(d, {
+								...n.grid,
+								vertical: !1
+							}),
+							/* @__PURE__ */ s(m, {
+								dataKey: "name",
+								interval: 0,
+								...n.axis,
+								tickLine: !1,
+								axisLine: !1
+							}),
+							/* @__PURE__ */ s(h, {
+								width: 44,
+								...n.axis,
+								tickLine: !1,
+								axisLine: !1
+							}),
+							/* @__PURE__ */ s(p, {
+								contentStyle: n.tooltip.contentStyle,
+								cursor: n.tooltip.cursor
+							}),
+							/* @__PURE__ */ s(l, {
+								dataKey: "span",
+								shape: /* @__PURE__ */ s(y, {}),
+								isAnimationActive: !1
+							})
+						]
+					})
+				})
+			}),
+			/* @__PURE__ */ s(r, {
+				caption: C,
+				columns: T.columns,
+				rows: T.rows
+			})
+		]
+	});
+};
+//#endregion
+export { b as WaterfallChart };

package/dist/components/charts/WaterfallChart/waterfall-chart.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1bf2i_3`,t=`_container_1bf2i_6`,n=`_value_1bf2i_14`,r={root:e,container:t,value:n};exports.container=t,exports.default=r,exports.root=e,exports.value=n;

package/dist/components/charts/WaterfallChart/waterfall-chart.module.js

@@ -0,0 +1,9 @@
+"use client";
+//#region src/components/charts/WaterfallChart/waterfall-chart.module.scss
+var e = "_root_1bf2i_3", t = "_container_1bf2i_6", n = "_value_1bf2i_14", r = {
+	root: e,
+	container: t,
+	value: n
+};
+//#endregion
+export { t as container, r as default, e as root, n as value };

package/dist/components/data-display/Barcode/Barcode.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../hooks/useMergedRef.cjs"),r=require("./encode.cjs"),i=require("./warn-unencodable-value.cjs"),a=require("./barcode.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l={code128:`Code 128`,ean13:`EAN-13`},u=11,d=8,f=.35,p=7,m=o.default.forwardRef(({value:e,format:m=`code128`,height:h=64,moduleWidth:g=2,showValue:_=!0,label:v,className:y,...b},x)=>{let{t:S}=t.useWimTranslation(`common`),C=r.encodeBarcode(e,m),w=o.default.useRef(null),[T,E]=o.default.useState(!1);o.default.useLayoutEffect(()=>{let e=w.current;if(!e||typeof ResizeObserver>`u`)return;let t=()=>E(e.scrollWidth>e.clientWidth);t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[C?.modules,g]);let D=n.useMergedRef(x,w);if(!C){i.warnUnencodableValue(e,m,l[m]);let t=S(`barcode.invalid`,{format:l[m]});return(0,c.jsxs)(`div`,{ref:D,"data-invalid":`true`,className:(0,s.default)(`wim-barcode`,a.default.root,a.default.invalid,y),...b,children:[(0,c.jsx)(`span`,{className:a.default.invalidMessage,children:t}),(0,c.jsx)(`span`,{className:a.default.invalidValue,children:e})]})}let O=C.modules.length+u*2,k=O*g,A=u,j=r.toRuns(C.modules).map(([e,t])=>{let n=A;return A+=t,e?{x:n,width:t,module:n-u}:null}),M=m===`ean13`&&_?C.print:void 0,N=M?Math.min(d*g,h*f):0,P=h-N,F=e=>M?M.guards.some(([t,n])=>e.module>=t&&e.module+e.width<=n):!1,I=M?[...[...M.left.text].map((e,t)=>({key:`l${t}`,digit:e,module:M.left.from+t*p+p/2})),...[...M.right.text].map((e,t)=>({key:`r${t}`,digit:e,module:M.right.from+t*p+p/2}))]:[];return(0,c.jsxs)(`div`,{ref:D,role:`img`,tabIndex:T?0:void 0,"aria-label":v??S(`barcode.aria_label`,{value:C.text}),"data-format":m,className:(0,s.default)(`wim-barcode`,a.default.root,y),...b,children:[M?(0,c.jsxs)(`svg`,{className:a.default.symbol,width:k,height:h,viewBox:`0 0 ${k} ${h}`,shapeRendering:`crispEdges`,"aria-hidden":`true`,children:[j.map(e=>e?(0,c.jsx)(`rect`,{x:e.x*g,y:0,width:e.width*g,height:F(e)?h:P,"data-guard":F(e)?`true`:void 0},e.x):null),(0,c.jsx)(`text`,{className:a.default.printedDigit,x:(u-1)*g,y:h,textAnchor:`end`,fontSize:N*.86,children:M.lead}),I.map(e=>(0,c.jsx)(`text`,{className:a.default.printedDigit,x:(u+e.module)*g,y:h,textAnchor:`middle`,fontSize:N*.86,children:e.digit},e.key))]}):(0,c.jsx)(`svg`,{className:a.default.symbol,width:k,height:h,viewBox:`0 0 ${O} ${h}`,preserveAspectRatio:`none`,shapeRendering:`crispEdges`,"aria-hidden":`true`,children:j.map(e=>e?(0,c.jsx)(`rect`,{x:e.x,y:0,width:e.width,height:h},e.x):null)}),_&&!M?(0,c.jsx)(`span`,{className:a.default.value,children:C.text}):null]})});m.displayName=`Barcode`,exports.Barcode=m;

package/dist/components/data-display/Barcode/Barcode.d.ts

@@ -0,0 +1,86 @@
+import { default as React } from 'react';
+import { BarcodeFormat } from './encode';
+export type { BarcodeFormat };
+export type BarcodeProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
+    /**
+     * Value to encode. For `ean13`, 12 digits (the check digit is calculated) or
+     * 13 digits (the check digit is verified).
+     */
+    value: string;
+    /**
+     * Symbology to encode `value` in.
+     * @default "code128"
+     */
+    format?: BarcodeFormat;
+    /**
+     * Height of the bars, in px.
+     * @default 64
+     */
+    height?: number;
+    /**
+     * Width of the narrowest bar, in px. Below 2 most phone cameras stop reading
+     * the symbol on screen.
+     * @default 2
+     */
+    moduleWidth?: number;
+    /**
+     * Whether the value is printed under the bars.
+     * @default true
+     */
+    showValue?: boolean;
+    /**
+     * Accessible name. Defaults to the value, so that a screen reader can read out
+     * what a scanner would read.
+     */
+    label?: string;
+};
+/**
+ * Draws a scannable 1D barcode — Code 128 for logistics, tickets and internal
+ * SKUs, EAN-13 for retail product codes.
+ *
+ * Two things are deliberate. **The symbol keeps dark bars on a light background
+ * in both themes**: laser and CCD scanners are built for that polarity and read
+ * an inverted symbol unreliably, so following the theme here would produce a
+ * barcode that looks right and does not scan. And **a value that cannot be
+ * encoded is never drawn** — an approximate barcode scans to the wrong thing,
+ * which is worse than one that is visibly missing. For the same reason the
+ * symbol is never scaled down to fit a narrow container: it scrolls instead,
+ * because a squeezed symbol looks identical and stops being read.
+ *
+ * Composition Contract:
+ * - Managed by: App consumption
+ * - Scroll lock: No
+ */
+export declare const Barcode: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & {
+    /**
+     * Value to encode. For `ean13`, 12 digits (the check digit is calculated) or
+     * 13 digits (the check digit is verified).
+     */
+    value: string;
+    /**
+     * Symbology to encode `value` in.
+     * @default "code128"
+     */
+    format?: BarcodeFormat;
+    /**
+     * Height of the bars, in px.
+     * @default 64
+     */
+    height?: number;
+    /**
+     * Width of the narrowest bar, in px. Below 2 most phone cameras stop reading
+     * the symbol on screen.
+     * @default 2
+     */
+    moduleWidth?: number;
+    /**
+     * Whether the value is printed under the bars.
+     * @default true
+     */
+    showValue?: boolean;
+    /**
+     * Accessible name. Defaults to the value, so that a screen reader can read out
+     * what a scanner would read.
+     */
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/Barcode/Barcode.js

@@ -0,0 +1,120 @@
+"use client";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import { useMergedRef as t } from "../../../hooks/useMergedRef.js";
+import { encodeBarcode as n, toRuns as r } from "./encode.js";
+import { warnUnencodableValue as i } from "./warn-unencodable-value.js";
+import a from "./barcode.module.js";
+import o from "react";
+import s from "classnames";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/data-display/Barcode/Barcode.tsx
+var u = {
+	code128: "Code 128",
+	ean13: "EAN-13"
+}, d = 11, f = 8, p = .35, m = 7, h = o.forwardRef(({ value: h, format: g = "code128", height: _ = 64, moduleWidth: v = 2, showValue: y = !0, label: b, className: x, ...S }, C) => {
+	let { t: w } = e("common"), T = n(h, g), E = o.useRef(null), [D, O] = o.useState(!1);
+	o.useLayoutEffect(() => {
+		let e = E.current;
+		if (!e || typeof ResizeObserver > "u") return;
+		let t = () => O(e.scrollWidth > e.clientWidth);
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [T?.modules, v]);
+	let k = t(C, E);
+	if (!T) {
+		i(h, g, u[g]);
+		let e = w("barcode.invalid", { format: u[g] });
+		return /* @__PURE__ */ l("div", {
+			ref: k,
+			"data-invalid": "true",
+			className: s("wim-barcode", a.root, a.invalid, x),
+			...S,
+			children: [/* @__PURE__ */ c("span", {
+				className: a.invalidMessage,
+				children: e
+			}), /* @__PURE__ */ c("span", {
+				className: a.invalidValue,
+				children: h
+			})]
+		});
+	}
+	let A = T.modules.length + d * 2, j = A * v, M = d, N = r(T.modules).map(([e, t]) => {
+		let n = M;
+		return M += t, e ? {
+			x: n,
+			width: t,
+			module: n - d
+		} : null;
+	}), P = g === "ean13" && y ? T.print : void 0, F = P ? Math.min(f * v, _ * p) : 0, I = _ - F, L = (e) => P ? P.guards.some(([t, n]) => e.module >= t && e.module + e.width <= n) : !1, R = P ? [...[...P.left.text].map((e, t) => ({
+		key: `l${t}`,
+		digit: e,
+		module: P.left.from + t * m + m / 2
+	})), ...[...P.right.text].map((e, t) => ({
+		key: `r${t}`,
+		digit: e,
+		module: P.right.from + t * m + m / 2
+	}))] : [];
+	return /* @__PURE__ */ l("div", {
+		ref: k,
+		role: "img",
+		tabIndex: D ? 0 : void 0,
+		"aria-label": b ?? w("barcode.aria_label", { value: T.text }),
+		"data-format": g,
+		className: s("wim-barcode", a.root, x),
+		...S,
+		children: [P ? /* @__PURE__ */ l("svg", {
+			className: a.symbol,
+			width: j,
+			height: _,
+			viewBox: `0 0 ${j} ${_}`,
+			shapeRendering: "crispEdges",
+			"aria-hidden": "true",
+			children: [
+				N.map((e) => e ? /* @__PURE__ */ c("rect", {
+					x: e.x * v,
+					y: 0,
+					width: e.width * v,
+					height: L(e) ? _ : I,
+					"data-guard": L(e) ? "true" : void 0
+				}, e.x) : null),
+				/* @__PURE__ */ c("text", {
+					className: a.printedDigit,
+					x: (d - 1) * v,
+					y: _,
+					textAnchor: "end",
+					fontSize: F * .86,
+					children: P.lead
+				}),
+				R.map((e) => /* @__PURE__ */ c("text", {
+					className: a.printedDigit,
+					x: (d + e.module) * v,
+					y: _,
+					textAnchor: "middle",
+					fontSize: F * .86,
+					children: e.digit
+				}, e.key))
+			]
+		}) : /* @__PURE__ */ c("svg", {
+			className: a.symbol,
+			width: j,
+			height: _,
+			viewBox: `0 0 ${A} ${_}`,
+			preserveAspectRatio: "none",
+			shapeRendering: "crispEdges",
+			"aria-hidden": "true",
+			children: N.map((e) => e ? /* @__PURE__ */ c("rect", {
+				x: e.x,
+				y: 0,
+				width: e.width,
+				height: _
+			}, e.x) : null)
+		}), y && !P ? /* @__PURE__ */ c("span", {
+			className: a.value,
+			children: T.text
+		}) : null]
+	});
+});
+h.displayName = "Barcode";
+//#endregion
+export { h as Barcode };

package/dist/components/data-display/Barcode/barcode.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_4sqdu_34`,t=`_symbol_4sqdu_64`,n=`_printedDigit_4sqdu_82`,r=`_value_4sqdu_92`,i=`_invalid_4sqdu_108`,a=`_invalidMessage_4sqdu_114`,o=`_invalidValue_4sqdu_120`,s={root:e,symbol:t,printedDigit:n,value:r,invalid:i,invalidMessage:a,invalidValue:o};exports.default=s,exports.invalid=i,exports.invalidMessage=a,exports.invalidValue=o,exports.printedDigit=n,exports.root=e,exports.symbol=t,exports.value=r;

package/dist/components/data-display/Barcode/barcode.module.js

@@ -0,0 +1,13 @@
+"use client";
+//#region src/components/data-display/Barcode/barcode.module.scss
+var e = "_root_4sqdu_34", t = "_symbol_4sqdu_64", n = "_printedDigit_4sqdu_82", r = "_value_4sqdu_92", i = "_invalid_4sqdu_108", a = "_invalidMessage_4sqdu_114", o = "_invalidValue_4sqdu_120", s = {
+	root: e,
+	symbol: t,
+	printedDigit: n,
+	value: r,
+	invalid: i,
+	invalidMessage: a,
+	invalidValue: o
+};
+//#endregion
+export { s as default, i as invalid, a as invalidMessage, o as invalidValue, n as printedDigit, e as root, t as symbol, r as value };

package/dist/components/data-display/Barcode/encode.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`212222.222122.222221.121223.121322.131222.122213.122312.132212.221213.221312.231212.112232.122132.122231.113222.123122.123221.223211.221132.221231.213212.223112.312131.311222.321122.321221.312212.322112.322211.212123.212321.232121.111323.131123.131321.112313.132113.132311.211313.231113.231311.112133.112331.132131.113123.113321.133121.313121.211331.231131.213113.213311.213131.311123.311321.331121.312113.312311.332111.314111.221411.431111.111224.111422.121124.121421.141122.141221.112214.112412.122114.122411.142112.142211.241211.221114.413111.241112.134111.111242.121142.121241.114212.124112.124211.411212.421112.421211.212141.214121.412121.111143.111341.131141.114113.114311.411113.411311.113141.114131.311141.411131.211412.211214.211232`.split(`.`),t=`2331112`,n=104,r=105,i=103,a=e=>{let t=``;for(let n=0;n<e.length;n+=1)t+=(n%2==0?`1`:`0`).repeat(Number(e[n]));return t},o=o=>{if(o.length===0)return null;let s=[];if(/^\d+$/.test(o)&&o.length%2==0){s.push(r);for(let e=0;e<o.length;e+=2)s.push(Number(o.slice(e,e+2)))}else{if(!/^[\x20-\x7e]+$/.test(o))return null;s.push(n);for(let e of o)s.push(e.charCodeAt(0)-32)}let c=s.reduce((e,t,n)=>e+t*(n===0?1:n),0)%i;return s.push(c),{modules:s.map(t=>a(e[t])).join(``)+a(t),text:o}},s=[`0001101`,`0011001`,`0010011`,`0111101`,`0100011`,`0110001`,`0101111`,`0111011`,`0110111`,`0001011`],c=[`0100111`,`0110011`,`0011011`,`0100001`,`0011101`,`0111001`,`0000101`,`0010001`,`0001001`,`0010111`],l=[`1110010`,`1100110`,`1101100`,`1000010`,`1011100`,`1001110`,`1010000`,`1000100`,`1001000`,`1110100`],u=[`LLLLLL`,`LLGLGG`,`LLGGLG`,`LLGGGL`,`LGLLGG`,`LGGLLG`,`LGGGLL`,`LGLGLG`,`LGLGGL`,`LGGLGL`],d=`101`,f=`01010`,p=e=>{let t=0;for(let n=0;n<12;n+=1)t+=Number(e[n])*(n%2==0?1:3);return(10-t%10)%10},m=e=>{if(!/^\d{12,13}$/.test(e))return null;let t=e.slice(0,12),n=p(t);if(e.length===13&&Number(e[12])!==n)return null;let r=`${t}${n}`,i=u[Number(r[0])],a=``;for(let e=0;e<6;e+=1){let t=Number(r[e+1]);a+=i[e]===`L`?s[t]:c[t]}let o=``;for(let e=7;e<13;e+=1)o+=l[Number(r[e])];return{modules:`${d}${a}${f}${o}${d}`,text:r,print:{guards:[[0,3],[45,50],[92,95]],lead:r[0],left:{text:r.slice(1,7),from:3,to:45},right:{text:r.slice(7),from:50,to:92}}}},h=(e,t)=>t===`ean13`?m(e):o(e),g=e=>{let t=[];for(let n of e){let e=n===`1`,r=t[t.length-1];r&&r[0]===e?r[1]+=1:t.push([e,1])}return t};exports.ean13CheckDigit=p,exports.encodeBarcode=h,exports.toRuns=g;

package/dist/components/data-display/Barcode/encode.d.ts

@@ -0,0 +1,64 @@
+/**
+ * 1 次元シンボル体系のエンコーダ。**描画から切り離してある**のは、バーの並びが
+ * 規格で決まっていて単体で検証できるものだからで、`Barcode.tsx` 側は
+ * 「1 と 0 の列をどう塗るか」だけを持つ。
+ *
+ * 対応は Code 128 と EAN-13 の 2 つ。前者は物流・チケット・社内 SKU、後者は
+ * 小売の商品コードで、この 2 つで「バーコードを出したい」の大半が埋まる。
+ * 体系を増やすのは後方互換なので、要求が出てから足せばよい。
+ */
+export type BarcodeFormat = "code128" | "ean13";
+/**
+ * EAN-13 の正規の印字レイアウト（T233）。
+ *
+ * 数字をバーの下へまとめて置くのは**近いけれど別の物**で、店頭の商品と見比べると
+ * 違って見える。正規の印字では **ガードバーが数字の帯の底まで伸び**、**先頭桁が
+ * シンボルの左外**に出て、残りが左右半分それぞれの下に 6 桁ずつ付く。
+ *
+ * **スキャナが読むのはバーだけなので、モジュール列は 1 文字も変えない。**
+ * ここに出すのは「どこに何を印字するか」だけで、位置はすべてモジュール座標
+ * （シンボルの先頭を 0 とする添字）で返す ── 画素は器の幅で変わるが、
+ * モジュールの割り付けは体系が決めていて変わらないため。
+ */
+export type Ean13PrintLayout = {
+    /** 下へ伸ばすガードバーのモジュール範囲 `[開始, 終了)`。左・中央・右の 3 組。 */
+    guards: ReadonlyArray<readonly [number, number]>;
+    /** シンボルの左外に置く 1 桁目。 */
+    lead: string;
+    /** 左半分の 6 桁と、その下に敷くモジュール範囲。 */
+    left: {
+        text: string;
+        from: number;
+        to: number;
+    };
+    /** 右半分の 6 桁と、その下に敷くモジュール範囲。 */
+    right: {
+        text: string;
+        from: number;
+        to: number;
+    };
+};
+export type EncodedBarcode = {
+    /** 1 = bar, 0 = space. One character per module. */
+    modules: string;
+    /** Human-readable interpretation printed under the bars. */
+    text: string;
+    /**
+     * How the digits are printed, for the formats that specify it. Code 128 does
+     * not, so it stays undefined and the value is printed under the bars as one
+     * run of text.
+     */
+    print?: Ean13PrintLayout;
+};
+/** Test seam: the raw pattern table, so its invariants can be measured. */
+export declare const code128Patterns: () => readonly string[];
+/** 右から重み 1,3,1,3… を掛けて 10 の補数を取る（GS1 のモジュラス 10）。 */
+export declare const ean13CheckDigit: (first12: string) => number;
+/**
+ * Encodes `value` into a module string, or returns `null` when the value cannot
+ * be represented in `format` — an unencodable value must not be drawn, because a
+ * barcode that scans to the wrong thing is worse than one that is missing.
+ */
+export declare const encodeBarcode: (value: string, format: BarcodeFormat) => EncodedBarcode | null;
+/** Consecutive runs of the same module, as `[isBar, width]` pairs. */
+export declare const toRuns: (modules: string) => Array<[boolean, number]>;