wimui 0.19.0 → 0.21.0

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

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { ChartAxisDomain } from '../../helpers';
 export type ScatterChartProps = {
     /**
      * Points to plot. `z` optionally controls the point size.
@@ -19,6 +20,16 @@ export type ScatterChartProps = {
      * @default "Y"
      */
     yAxisName?: string;
+    /**
+     * Range of the X axis.
+     * @default ["auto", "auto"]
+     */
+    xDomain?: ChartAxisDomain;
+    /**
+     * Range of the Y axis.
+     * @default ["auto", "auto"]
+     */
+    yDomain?: ChartAxisDomain;
     /**
      * The height of the chart in pixels.
      * @default 300
@@ -39,4 +50,4 @@ export type ScatterChartProps = {
      */
     animated?: boolean;
 };
-export declare const ScatterChart: ({ data, xAxisName, yAxisName, height, width, title, animated, }: ScatterChartProps) => React.JSX.Element;
+export declare const ScatterChart: ({ data, xAxisName, yAxisName, xDomain, yDomain, height, width, title, animated, }: ScatterChartProps) => React.JSX.Element;

package/dist/components/charts/ScatterChart/ScatterChart.js

@@ -6,17 +6,17 @@ import "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { CartesianGrid as o, Legend as s, ResponsiveContainer as c, Scatter as l, ScatterChart as u, Tooltip as d, XAxis as f, YAxis as p, ZAxis as m } from "recharts";
 //#region src/components/charts/ScatterChart/ScatterChart.tsx
-var h = ({ data: h, xAxisName: g = "X", yAxisName: _ = "Y", height: v = 300, width: y = "100%", title: b, animated: x = !1 }) => /* @__PURE__ */ a("div", {
+var h = ({ data: h, xAxisName: g = "X", yAxisName: _ = "Y", xDomain: v = ["auto", "auto"], yDomain: y = ["auto", "auto"], height: b = 300, width: x = "100%", title: S, animated: C = !1 }) => /* @__PURE__ */ a("div", {
 	className: `wim-scatter-chart ${r.root}`,
-	style: { width: y },
-	children: [b && /* @__PURE__ */ i(e, {
+	style: { width: x },
+	children: [S && /* @__PURE__ */ i(e, {
 		tag: "h3",
 		size: "md",
 		style: { marginBottom: "var(--wim-spacing-md)" },
-		children: b
+		children: S
 	}), /* @__PURE__ */ i("div", {
 		className: r.container,
-		style: { height: v },
+		style: { height: b },
 		children: /* @__PURE__ */ i(c, {
 			width: "100%",
 			height: "100%",
@@ -25,7 +25,7 @@ var h = ({ data: h, xAxisName: g = "X", yAxisName: _ = "Y", height: v = 300, wid
 					top: 20,
 					right: 20,
 					bottom: 20,
-					left: 20
+					left: 0
 				},
 				children: [
 					/* @__PURE__ */ i(o, { ...n.grid }),
@@ -34,6 +34,7 @@ var h = ({ data: h, xAxisName: g = "X", yAxisName: _ = "Y", height: v = 300, wid
 						dataKey: "x",
 						name: g,
 						unit: "",
+						domain: v,
 						...n.axis
 					}),
 					/* @__PURE__ */ i(p, {
@@ -41,6 +42,8 @@ var h = ({ data: h, xAxisName: g = "X", yAxisName: _ = "Y", height: v = 300, wid
 						dataKey: "y",
 						name: _,
 						unit: "",
+						domain: y,
+						width: 44,
 						...n.axis
 					}),
 					/* @__PURE__ */ i(m, {
@@ -60,7 +63,7 @@ var h = ({ data: h, xAxisName: g = "X", yAxisName: _ = "Y", height: v = 300, wid
 						name: "Data Points",
 						data: h,
 						fill: t[0],
-						isAnimationActive: x
+						isAnimationActive: C
 					})
 				]
 			})

package/dist/components/charts/ScatterChart/scatter-chart.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_12ucx_4`,t=`_container_12ucx_9`,n={root:e,container:t};exports.container=t,exports.default=n,exports.root=e;
+var e=`_root_pxnwr_4`,t=`_container_pxnwr_9`,n={root:e,container:t};exports.container=t,exports.default=n,exports.root=e;

package/dist/components/charts/ScatterChart/scatter-chart.module.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/charts/ScatterChart/scatter-chart.module.scss
-var e = "_root_12ucx_4", t = "_container_12ucx_9", n = {
+var e = "_root_pxnwr_4", t = "_container_pxnwr_9", n = {
 	root: e,
 	container: t
 };

package/dist/components/charts/Sparkline/Sparkline.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./sparkline.module.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("classnames");r=e.__toESM(r,1);let i=require("react/jsx-runtime"),a=require("recharts");var o=`var(--wim-color-chart-primary)`,s=({data:e,type:s=`line`,width:c=100,height:l=24,color:u=o,strokeWidth:d=2,showLastDot:f=!1,min:p,max:m,ariaLabel:h,className:g})=>{let _=(0,n.useId)().replace(/:/g,``),v=e.map((e,t)=>({index:t,value:e})),y=[p??`auto`,m??`auto`],b=e.length-1,x=typeof window<`u`&&!!window.__VRT__,S=typeof c==`number`?c:100,C=l??24,w=e=>{let{cx:t,cy:n,index:r}=e;return!f||r!==b||t==null||n==null?(0,i.jsx)(`g`,{},r):(0,i.jsx)(`circle`,{cx:t,cy:n,r:d+1,fill:u},r)},T=x?{width:S,height:C}:{},E={accessibilityLayer:!1,tabIndex:-1},D=()=>s===`bar`?(0,i.jsxs)(a.BarChart,{...T,...E,data:v,margin:{top:2,right:2,bottom:2,left:2},children:[(0,i.jsx)(a.YAxis,{hide:!0,domain:y}),(0,i.jsx)(a.Bar,{dataKey:`value`,fill:u,radius:[2,2,0,0],isAnimationActive:!1})]}):s===`area`?(0,i.jsxs)(a.AreaChart,{...T,...E,data:v,margin:{top:2,right:2,bottom:2,left:2},children:[(0,i.jsx)(`defs`,{children:(0,i.jsxs)(`linearGradient`,{id:_,x1:`0`,y1:`0`,x2:`0`,y2:`1`,children:[(0,i.jsx)(`stop`,{offset:`0%`,stopColor:u,stopOpacity:.35}),(0,i.jsx)(`stop`,{offset:`100%`,stopColor:u,stopOpacity:0})]})}),(0,i.jsx)(a.YAxis,{hide:!0,domain:y}),(0,i.jsx)(a.Area,{type:`monotone`,dataKey:`value`,stroke:u,strokeWidth:d,fill:`url(#${_})`,dot:f?w:!1,isAnimationActive:!1})]}):(0,i.jsxs)(a.LineChart,{...T,...E,data:v,margin:{top:2,right:2,bottom:2,left:2},children:[(0,i.jsx)(a.YAxis,{hide:!0,domain:y}),(0,i.jsx)(a.Line,{type:`monotone`,dataKey:`value`,stroke:u,strokeWidth:d,dot:f?w:!1,isAnimationActive:!1})]});return(0,i.jsx)(`div`,{className:(0,r.default)(`wim-sparkline`,t.default.root,g),style:{width:c,height:l},role:h?`img`:void 0,"aria-label":h,"aria-hidden":h?void 0:!0,children:x?D():(0,i.jsx)(a.ResponsiveContainer,{width:`100%`,height:`100%`,children:D()})})};s.displayName=`Sparkline`,exports.Sparkline=s;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./sparkline.module.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("classnames");r=e.__toESM(r,1);let i=require("react/jsx-runtime"),a=require("recharts");var o=`var(--wim-color-chart-primary)`,s=({data:e,type:n=`line`,width:s=`100%`,height:c=24,color:l=o,strokeWidth:u=2,showLastDot:d=!1,min:f,max:p,ariaLabel:m,className:h})=>{let g=e.map((e,t)=>({index:t,value:e})),_=[f??`auto`,p??`auto`],v=e.length-1,y=typeof window<`u`&&!!window.__VRT__,b=typeof s==`number`?s:null,x=c??24,S=e=>{let{cx:t,cy:n,index:r}=e;return!d||r!==v||t==null||n==null?(0,i.jsx)(`g`,{},r):(0,i.jsx)(`circle`,{cx:t,cy:n,r:u+1,fill:l},r)},C=y&&b!==null?{width:b,height:x}:{},w={accessibilityLayer:!1,tabIndex:-1},T=()=>n===`bar`?(0,i.jsxs)(a.BarChart,{...C,...w,data:g,margin:{top:2,right:2,bottom:2,left:2},children:[(0,i.jsx)(a.YAxis,{hide:!0,domain:_}),(0,i.jsx)(a.Bar,{dataKey:`value`,fill:l,radius:[2,2,0,0],isAnimationActive:!1})]}):n===`area`?(0,i.jsxs)(a.AreaChart,{...C,...w,data:g,margin:{top:2,right:2,bottom:2,left:2},children:[(0,i.jsx)(a.YAxis,{hide:!0,domain:_}),(0,i.jsx)(a.Area,{type:`monotone`,dataKey:`value`,stroke:l,strokeWidth:u,fill:l,fillOpacity:.15,dot:d?S:!1,isAnimationActive:!1})]}):(0,i.jsxs)(a.LineChart,{...C,...w,data:g,margin:{top:2,right:2,bottom:2,left:2},children:[(0,i.jsx)(a.YAxis,{hide:!0,domain:_}),(0,i.jsx)(a.Line,{type:`monotone`,dataKey:`value`,stroke:l,strokeWidth:u,dot:d?S:!1,isAnimationActive:!1})]});return(0,i.jsx)(`div`,{className:(0,r.default)(`wim-sparkline`,t.default.root,h),style:{width:s,height:c},role:m?`img`:void 0,"aria-label":m,"aria-hidden":m?void 0:!0,children:y&&b!==null?T():(0,i.jsx)(a.ResponsiveContainer,{width:`100%`,height:`100%`,children:T()})})};s.displayName=`Sparkline`,exports.Sparkline=s;

package/dist/components/charts/Sparkline/Sparkline.js

@@ -1,44 +1,44 @@
 "use client";
 import e from "./sparkline.module.js";
-import { useId as t } from "react";
-import n from "classnames";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Area as a, AreaChart as o, Bar as s, BarChart as c, Line as l, LineChart as u, ResponsiveContainer as d, YAxis as f } from "recharts";
+import "react";
+import t from "classnames";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Area as i, AreaChart as a, Bar as o, BarChart as s, Line as c, LineChart as l, ResponsiveContainer as u, YAxis as d } from "recharts";
 //#region src/components/charts/Sparkline/Sparkline.tsx
-var p = "var(--wim-color-chart-primary)", m = ({ data: m, type: h = "line", width: g = 100, height: _ = 24, color: v = p, strokeWidth: y = 2, showLastDot: b = !1, min: x, max: S, ariaLabel: C, className: w }) => {
-	let T = t().replace(/:/g, ""), E = m.map((e, t) => ({
+var f = "var(--wim-color-chart-primary)", p = ({ data: p, type: m = "line", width: h = "100%", height: g = 24, color: _ = f, strokeWidth: v = 2, showLastDot: y = !1, min: b, max: x, ariaLabel: S, className: C }) => {
+	let w = p.map((e, t) => ({
 		index: t,
 		value: e
-	})), D = [x ?? "auto", S ?? "auto"], O = m.length - 1, k = typeof window < "u" && !!window.__VRT__, A = typeof g == "number" ? g : 100, j = _ ?? 24, M = (e) => {
-		let { cx: t, cy: n, index: i } = e;
-		return !b || i !== O || t == null || n == null ? /* @__PURE__ */ r("g", {}, i) : /* @__PURE__ */ r("circle", {
+	})), T = [b ?? "auto", x ?? "auto"], E = p.length - 1, D = typeof window < "u" && !!window.__VRT__, O = typeof h == "number" ? h : null, k = g ?? 24, A = (e) => {
+		let { cx: t, cy: r, index: i } = e;
+		return !y || i !== E || t == null || r == null ? /* @__PURE__ */ n("g", {}, i) : /* @__PURE__ */ n("circle", {
 			cx: t,
-			cy: n,
-			r: y + 1,
-			fill: v
+			cy: r,
+			r: v + 1,
+			fill: _
 		}, i);
-	}, N = k ? {
-		width: A,
-		height: j
-	} : {}, P = {
+	}, j = D && O !== null ? {
+		width: O,
+		height: k
+	} : {}, M = {
 		accessibilityLayer: !1,
 		tabIndex: -1
-	}, F = () => h === "bar" ? /* @__PURE__ */ i(c, {
-		...N,
-		...P,
-		data: E,
+	}, N = () => m === "bar" ? /* @__PURE__ */ r(s, {
+		...j,
+		...M,
+		data: w,
 		margin: {
 			top: 2,
 			right: 2,
 			bottom: 2,
 			left: 2
 		},
-		children: [/* @__PURE__ */ r(f, {
+		children: [/* @__PURE__ */ n(d, {
 			hide: !0,
-			domain: D
-		}), /* @__PURE__ */ r(s, {
+			domain: T
+		}), /* @__PURE__ */ n(o, {
 			dataKey: "value",
-			fill: v,
+			fill: _,
 			radius: [
 				2,
 				2,
@@ -47,85 +47,67 @@ var p = "var(--wim-color-chart-primary)", m = ({ data: m, type: h = "line", widt
 			],
 			isAnimationActive: !1
 		})]
-	}) : h === "area" ? /* @__PURE__ */ i(o, {
-		...N,
-		...P,
-		data: E,
+	}) : m === "area" ? /* @__PURE__ */ r(a, {
+		...j,
+		...M,
+		data: w,
 		margin: {
 			top: 2,
 			right: 2,
 			bottom: 2,
 			left: 2
 		},
-		children: [
-			/* @__PURE__ */ r("defs", { children: /* @__PURE__ */ i("linearGradient", {
-				id: T,
-				x1: "0",
-				y1: "0",
-				x2: "0",
-				y2: "1",
-				children: [/* @__PURE__ */ r("stop", {
-					offset: "0%",
-					stopColor: v,
-					stopOpacity: .35
-				}), /* @__PURE__ */ r("stop", {
-					offset: "100%",
-					stopColor: v,
-					stopOpacity: 0
-				})]
-			}) }),
-			/* @__PURE__ */ r(f, {
-				hide: !0,
-				domain: D
-			}),
-			/* @__PURE__ */ r(a, {
-				type: "monotone",
-				dataKey: "value",
-				stroke: v,
-				strokeWidth: y,
-				fill: `url(#${T})`,
-				dot: b ? M : !1,
-				isAnimationActive: !1
-			})
-		]
-	}) : /* @__PURE__ */ i(u, {
-		...N,
-		...P,
-		data: E,
+		children: [/* @__PURE__ */ n(d, {
+			hide: !0,
+			domain: T
+		}), /* @__PURE__ */ n(i, {
+			type: "monotone",
+			dataKey: "value",
+			stroke: _,
+			strokeWidth: v,
+			fill: _,
+			fillOpacity: .15,
+			dot: y ? A : !1,
+			isAnimationActive: !1
+		})]
+	}) : /* @__PURE__ */ r(l, {
+		...j,
+		...M,
+		data: w,
 		margin: {
 			top: 2,
 			right: 2,
 			bottom: 2,
 			left: 2
 		},
-		children: [/* @__PURE__ */ r(f, {
+		children: [/* @__PURE__ */ n(d, {
 			hide: !0,
-			domain: D
-		}), /* @__PURE__ */ r(l, {
+			domain: T
+		}), /* @__PURE__ */ n(c, {
 			type: "monotone",
 			dataKey: "value",
-			stroke: v,
-			strokeWidth: y,
-			dot: b ? M : !1,
+			stroke: _,
+			strokeWidth: v,
+			dot: y ? A : !1,
 			isAnimationActive: !1
 		})]
 	});
-	return /* @__PURE__ */ r("div", {
-		className: n("wim-sparkline", e.root, w),
+	return /* @__PURE__ */ n("div", {
+		className: t("wim-sparkline", e.root, C),
 		style: {
-			width: g,
-			height: _
+			width: h,
+			height: g
 		},
-		role: C ? "img" : void 0,
-		"aria-label": C,
-		"aria-hidden": C ? void 0 : !0,
-		children: k ? F() : /* @__PURE__ */ r(d, {
+		role: S ? "img" : void 0,
+		"aria-label": S,
+		"aria-hidden": S ? void 0 : !0,
+		children: D && O !== null ? N() : /* @__PURE__ */ n(u, {
 			width: "100%",
 			height: "100%",
-			children: F()
+			children: N()
 		})
 	});
 };
-m.displayName = "Sparkline";
+p.displayName = "Sparkline";
 //#endregion
-export { m as Sparkline };
+export { p as Sparkline };

package/dist/components/charts/Sparkline/sparkline.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_15zk0_4`,t={root:e};exports.default=t,exports.root=e;
+var e=`_root_1p9uf_4`,t={root:e};exports.default=t,exports.root=e;

package/dist/components/charts/Sparkline/sparkline.module.js

@@ -1,5 +1,5 @@
 "use client";
 //#region src/components/charts/Sparkline/sparkline.module.scss
-var e = "_root_15zk0_4", t = { root: e };
+var e = "_root_1p9uf_4", t = { root: e };
 //#endregion
 export { t as default, e as root };

package/dist/components/charts/Treemap/Treemap.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../typography/Title/Title.cjs"),n=require("../../helpers.cjs"),r=require("./treemap.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime"),o=require("recharts");var s=({x:e,y:t,width:r,height:i,index:o,name:s})=>(0,a.jsxs)(`g`,{children:[(0,a.jsx)(`rect`,{x:e,y:t,width:r,height:i,style:{fill:n.CHART_COLORS[o%n.CHART_COLORS.length],stroke:`none`}}),r>30&&i>20&&(0,a.jsx)(`text`,{x:e+r/2,y:t+i/2,textAnchor:`middle`,dominantBaseline:`central`,style:{fill:n.CHART_TEXT_COLORS[o%n.CHART_TEXT_COLORS.length],fontSize:`var(--wim-font-size-lg)`,fontWeight:`var(--wim-font-weight-bold)`,stroke:`none`,strokeWidth:0,pointerEvents:`none`,userSelect:`none`},children:s})]}),c=({data:e,dataKey:i,aspectRatio:c=4/3,height:l=300,width:u=`100%`,title:d})=>!e||e.length===0?null:(0,a.jsxs)(`div`,{className:`wim-treemap ${r.default.root} wim-treemap__root`,style:{width:u},children:[d&&(0,a.jsx)(t.Title,{tag:`h3`,size:`md`,style:{marginBottom:`var(--wim-spacing-md)`},children:d}),(0,a.jsx)(`div`,{className:`${r.default.container} wim-treemap__container`,style:{height:l,minWidth:0,minHeight:0},children:(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,a.jsx)(o.Treemap,{data:e,dataKey:i,aspectRatio:c,stroke:`none`,content:s,isAnimationActive:!1,children:(0,a.jsx)(o.Tooltip,{contentStyle:n.CHART_THEME.tooltip.contentStyle,formatter:(e,t)=>[e,t]})})})})]});exports.Treemap=c;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../typography/Title/Title.cjs"),n=require("../../helpers.cjs"),r=require("./treemap.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime"),o=require("recharts");var s=2,c=8,l=(e,t,n)=>{let r=n-t,i=r===0?1:Math.min(1,Math.max(0,(e-t)/r));return`color-mix(in oklch, var(--wim-color-chart-primary) ${20+Math.round(i*40)}%, var(--wim-color-surface))`},u=(0,i.createContext)({min:0,max:1}),d=({x:e,y:t,width:n,height:r,name:o,value:d,depth:f,children:p})=>{let{min:m,max:h}=(0,i.useContext)(u),[g,_]=(0,i.useState)(!0),v=(0,i.useCallback)(e=>{e&&_(e.getComputedTextLength()+c*2<=n)},[n]);return f===0||Array.isArray(p)&&p.length>0?(0,a.jsx)(`g`,{}):(0,a.jsxs)(`g`,{children:[(0,a.jsx)(`rect`,{x:e+s/2,y:t+s/2,width:Math.max(0,n-s),height:Math.max(0,r-s),style:{fill:l(d,m,h),stroke:`none`}}),n>30&&r>20&&(0,a.jsx)(`text`,{ref:v,x:e+n/2,y:t+r/2,textAnchor:`middle`,dominantBaseline:`central`,style:{fill:`var(--wim-color-text-primary)`,fontSize:`var(--wim-font-size-lg)`,fontWeight:`var(--wim-font-weight-bold)`,stroke:`none`,strokeWidth:0,pointerEvents:`none`,userSelect:`none`,visibility:g?void 0:`hidden`},children:o})]})},f=({data:e,dataKey:s,aspectRatio:c=4/3,height:l=300,width:f=`100%`,title:p})=>{let m=(0,i.useMemo)(()=>{let t=e=>e.flatMap(e=>Array.isArray(e.children)?t(e.children):[e]),n=t(e??[]).map(e=>Number(e[s])||0);return n.length?{min:Math.min(...n),max:Math.max(...n)}:{min:0,max:1}},[e,s]);return!e||e.length===0?null:(0,a.jsx)(u.Provider,{value:m,children:(0,a.jsxs)(`div`,{className:`wim-treemap ${r.default.root} wim-treemap__root`,style:{width:f},children:[p&&(0,a.jsx)(t.Title,{tag:`h3`,size:`md`,style:{marginBottom:`var(--wim-spacing-md)`},children:p}),(0,a.jsx)(`div`,{className:`${r.default.container} wim-treemap__container`,style:{height:l,minWidth:0,minHeight:0},children:(0,a.jsx)(o.ResponsiveContainer,{width:`100%`,height:`100%`,children:(0,a.jsx)(o.Treemap,{data:e,dataKey:s,aspectRatio:c,stroke:`none`,content:d,isAnimationActive:!1,children:(0,a.jsx)(o.Tooltip,{contentStyle:n.CHART_THEME.tooltip.contentStyle,formatter:(e,t)=>[e,t]})})})})]})})};exports.Treemap=f;

package/dist/components/charts/Treemap/Treemap.js

@@ -1,67 +1,95 @@
 "use client";
 import { Title as e } from "../../typography/Title/Title.js";
-import { CHART_COLORS as t, CHART_TEXT_COLORS as n, CHART_THEME as r } from "../../helpers.js";
-import i from "./treemap.module.js";
-import "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { ResponsiveContainer as s, Tooltip as c, Treemap as l } from "recharts";
+import { CHART_THEME as t } from "../../helpers.js";
+import n from "./treemap.module.js";
+import { createContext as r, useCallback as i, useContext as a, useMemo as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { ResponsiveContainer as u, Tooltip as d, Treemap as f } from "recharts";
 //#region src/components/charts/Treemap/Treemap.tsx
-var u = ({ x: e, y: r, width: i, height: s, index: c, name: l }) => /* @__PURE__ */ o("g", { children: [/* @__PURE__ */ a("rect", {
-	x: e,
-	y: r,
-	width: i,
-	height: s,
-	style: {
-		fill: t[c % t.length],
-		stroke: "none"
-	}
-}), i > 30 && s > 20 && /* @__PURE__ */ a("text", {
-	x: e + i / 2,
-	y: r + s / 2,
-	textAnchor: "middle",
-	dominantBaseline: "central",
-	style: {
-		fill: n[c % n.length],
-		fontSize: "var(--wim-font-size-lg)",
-		fontWeight: "var(--wim-font-weight-bold)",
-		stroke: "none",
-		strokeWidth: 0,
-		pointerEvents: "none",
-		userSelect: "none"
-	},
-	children: l
-})] }), d = ({ data: t, dataKey: n, aspectRatio: d = 4 / 3, height: f = 300, width: p = "100%", title: m }) => !t || t.length === 0 ? null : /* @__PURE__ */ o("div", {
-	className: `wim-treemap ${i.root} wim-treemap__root`,
-	style: { width: p },
-	children: [m && /* @__PURE__ */ a(e, {
-		tag: "h3",
-		size: "md",
-		style: { marginBottom: "var(--wim-spacing-md)" },
-		children: m
-	}), /* @__PURE__ */ a("div", {
-		className: `${i.container} wim-treemap__container`,
+var p = 2, m = 8, h = (e, t, n) => {
+	let r = n - t, i = r === 0 ? 1 : Math.min(1, Math.max(0, (e - t) / r));
+	return `color-mix(in oklch, var(--wim-color-chart-primary) ${20 + Math.round(i * 40)}%, var(--wim-color-surface))`;
+}, g = r({
+	min: 0,
+	max: 1
+}), _ = ({ x: e, y: t, width: n, height: r, name: o, value: u, depth: d, children: f }) => {
+	let { min: _, max: v } = a(g), [y, b] = s(!0), x = i((e) => {
+		e && b(e.getComputedTextLength() + m * 2 <= n);
+	}, [n]);
+	return d === 0 || Array.isArray(f) && f.length > 0 ? /* @__PURE__ */ c("g", {}) : /* @__PURE__ */ l("g", { children: [/* @__PURE__ */ c("rect", {
+		x: e + p / 2,
+		y: t + p / 2,
+		width: Math.max(0, n - p),
+		height: Math.max(0, r - p),
 		style: {
-			height: f,
-			minWidth: 0,
-			minHeight: 0
+			fill: h(u, _, v),
+			stroke: "none"
+		}
+	}), n > 30 && r > 20 && /* @__PURE__ */ c("text", {
+		ref: x,
+		x: e + n / 2,
+		y: t + r / 2,
+		textAnchor: "middle",
+		dominantBaseline: "central",
+		style: {
+			fill: "var(--wim-color-text-primary)",
+			fontSize: "var(--wim-font-size-lg)",
+			fontWeight: "var(--wim-font-weight-bold)",
+			stroke: "none",
+			strokeWidth: 0,
+			pointerEvents: "none",
+			userSelect: "none",
+			visibility: y ? void 0 : "hidden"
 		},
-		children: /* @__PURE__ */ a(s, {
-			width: "100%",
-			height: "100%",
-			children: /* @__PURE__ */ a(l, {
-				data: t,
-				dataKey: n,
-				aspectRatio: d,
-				stroke: "none",
-				content: u,
-				isAnimationActive: !1,
-				children: /* @__PURE__ */ a(c, {
-					contentStyle: r.tooltip.contentStyle,
-					formatter: (e, t) => [e, t]
+		children: o
+	})] });
+}, v = ({ data: r, dataKey: i, aspectRatio: a = 4 / 3, height: s = 300, width: p = "100%", title: m }) => {
+	let h = o(() => {
+		let e = (t) => t.flatMap((t) => Array.isArray(t.children) ? e(t.children) : [t]), t = e(r ?? []).map((e) => Number(e[i]) || 0);
+		return t.length ? {
+			min: Math.min(...t),
+			max: Math.max(...t)
+		} : {
+			min: 0,
+			max: 1
+		};
+	}, [r, i]);
+	return !r || r.length === 0 ? null : /* @__PURE__ */ c(g.Provider, {
+		value: h,
+		children: /* @__PURE__ */ l("div", {
+			className: `wim-treemap ${n.root} wim-treemap__root`,
+			style: { width: p },
+			children: [m && /* @__PURE__ */ c(e, {
+				tag: "h3",
+				size: "md",
+				style: { marginBottom: "var(--wim-spacing-md)" },
+				children: m
+			}), /* @__PURE__ */ c("div", {
+				className: `${n.container} wim-treemap__container`,
+				style: {
+					height: s,
+					minWidth: 0,
+					minHeight: 0
+				},
+				children: /* @__PURE__ */ c(u, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ c(f, {
+						data: r,
+						dataKey: i,
+						aspectRatio: a,
+						stroke: "none",
+						content: _,
+						isAnimationActive: !1,
+						children: /* @__PURE__ */ c(d, {
+							contentStyle: t.tooltip.contentStyle,
+							formatter: (e, t) => [e, t]
+						})
+					})
 				})
-			})
+			})]
 		})
-	})]
-});
+	});
+};
 //#endregion
-export { d as Treemap };
+export { v as Treemap };

package/dist/components/form/Button/button.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_perg7_3`,t=`_fullWidth_perg7_30`,n=`_inner_perg7_38`,r=`_loader_perg7_41`,i=`_label_perg7_48`,a=`_lg_perg7_58`,o=`_md_perg7_67`,s=`_sm_perg7_76`,c=`_solid_perg7_86`,l=`_danger_perg7_96`,u=`_success_perg7_101`,d=`_outline_perg7_125`,f=`_ghost_perg7_162`,p=`_iconOnly_perg7_204`,m=`_content_perg7_214`,h=`_loading_perg7_224`,g=`_animatedWidth_perg7_233`,_={root:e,fullWidth:t,inner:n,loader:r,label:i,lg:a,md:o,sm:s,solid:c,default:`_default_perg7_91`,danger:l,success:u,outline:d,ghost:f,iconOnly:p,content:m,loading:h,animatedWidth:g};exports.animatedWidth=g,exports.content=m,exports.danger=l,exports.default=_,exports.fullWidth=t,exports.ghost=f,exports.iconOnly=p,exports.inner=n,exports.label=i,exports.lg=a,exports.loader=r,exports.loading=h,exports.md=o,exports.outline=d,exports.root=e,exports.sm=s,exports.solid=c,exports.success=u;
+var e=`_root_11ol0_3`,t=`_fullWidth_11ol0_30`,n=`_inner_11ol0_38`,r=`_loader_11ol0_41`,i=`_label_11ol0_48`,a=`_lg_11ol0_58`,o=`_md_11ol0_67`,s=`_sm_11ol0_76`,c=`_solid_11ol0_86`,l=`_danger_11ol0_96`,u=`_success_11ol0_101`,d=`_outline_11ol0_125`,f=`_ghost_11ol0_162`,p=`_iconOnly_11ol0_213`,m=`_content_11ol0_223`,h=`_loading_11ol0_233`,g=`_animatedWidth_11ol0_242`,_={root:e,fullWidth:t,inner:n,loader:r,label:i,lg:a,md:o,sm:s,solid:c,default:`_default_11ol0_91`,danger:l,success:u,outline:d,ghost:f,iconOnly:p,content:m,loading:h,animatedWidth:g};exports.animatedWidth=g,exports.content=m,exports.danger=l,exports.default=_,exports.fullWidth=t,exports.ghost=f,exports.iconOnly=p,exports.inner=n,exports.label=i,exports.lg=a,exports.loader=r,exports.loading=h,exports.md=o,exports.outline=d,exports.root=e,exports.sm=s,exports.solid=c,exports.success=u;

package/dist/components/form/Button/button.module.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/form/Button/button.module.scss
-var e = "_root_perg7_3", t = "_fullWidth_perg7_30", n = "_inner_perg7_38", r = "_loader_perg7_41", i = "_label_perg7_48", a = "_lg_perg7_58", o = "_md_perg7_67", s = "_sm_perg7_76", c = "_solid_perg7_86", l = "_danger_perg7_96", u = "_success_perg7_101", d = "_outline_perg7_125", f = "_ghost_perg7_162", p = "_iconOnly_perg7_204", m = "_content_perg7_214", h = "_loading_perg7_224", g = "_animatedWidth_perg7_233", _ = {
+var e = "_root_11ol0_3", t = "_fullWidth_11ol0_30", n = "_inner_11ol0_38", r = "_loader_11ol0_41", i = "_label_11ol0_48", a = "_lg_11ol0_58", o = "_md_11ol0_67", s = "_sm_11ol0_76", c = "_solid_11ol0_86", l = "_danger_11ol0_96", u = "_success_11ol0_101", d = "_outline_11ol0_125", f = "_ghost_11ol0_162", p = "_iconOnly_11ol0_213", m = "_content_11ol0_223", h = "_loading_11ol0_233", g = "_animatedWidth_11ol0_242", _ = {
 	root: e,
 	fullWidth: t,
 	inner: n,
@@ -10,7 +10,7 @@ var e = "_root_perg7_3", t = "_fullWidth_perg7_30", n = "_inner_perg7_38", r = "
 	md: o,
 	sm: s,
 	solid: c,
-	default: "_default_perg7_91",
+	default: "_default_11ol0_91",
 	danger: l,
 	success: u,
 	outline: d,

package/dist/components/form/ColorInput/ColorInput.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../Input/Input.cjs"),n=require("./color-input.module.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("classnames");i=e.__toESM(i,1);let a=require("react/jsx-runtime");function o(e){let t=e.replace(`#`,``);if(t.length!==6&&t.length!==3)return null;let n=t.length===3?t.split(``).map(e=>e+e).join(``):t,r=parseInt(n,16);return isNaN(r)?null:{r:r>>16&255,g:r>>8&255,b:r&255}}function s(e,t,n){let[r,i,a]=[e,t,n].map(e=>{let t=e/255;return t<=.03928?t/12.92:((t+.055)/1.055)**2.4});return .2126*r+.7152*i+.0722*a}function c(e){let t=o(e);return t?s(t.r,t.g,t.b)<.4:!1}var l=({className:e,value:o,defaultValue:s,onChange:l,style:u,...d})=>{let[f,p]=(0,r.useState)(()=>s??`#000000`),m=o!==void 0,h=m?o:f,g=(0,r.useCallback)(e=>{m||p(e.target.value),l?.(e)},[m,l]),_=(0,r.useMemo)(()=>c(h),[h]);return(0,a.jsx)(t.Input,{type:`color`,className:(0,i.default)(`wim-color-input`,n.default.root,_&&n.default.dark,e),value:h,onChange:g,style:u,styles:{root:n.default.inputBase,icon:n.default.inputIcon,icons:n.default.inputIcons},inputClassName:n.default.input,...d})};exports.ColorInput=l;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../Input/Input.cjs"),r=require("./color-input.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=/^#([0-9a-f]{3}|[0-9a-f]{6})$/i,c=e=>e.length===4?`#${e.slice(1).split(``).map(e=>e+e).join(``)}`:e,l=({className:e,value:l,defaultValue:u,onChange:d,style:f,...p})=>{let{t:m}=t.useWimTranslation(`components`),[h,g]=(0,i.useState)(()=>u??`#000000`),_=l!==void 0,v=_?l:h,[y,b]=(0,i.useState)(v),[x,S]=(0,i.useState)(v);v!==x&&(S(v),b(v));let C=(0,i.useCallback)((e,t)=>{_||g(e),d?.(t)},[_,d]),w=(0,i.useCallback)(e=>{let t=e.target.value;b(t),s.test(t.trim())&&C(t.trim(),e)},[C]),T=(0,i.useCallback)(e=>{b(e.target.value),C(e.target.value,e)},[C]),E=s.test(v)?c(v).toLowerCase():`#000000`;return(0,o.jsx)(n.Input,{type:`text`,className:(0,a.default)(`wim-color-input`,r.default.root,e),value:y,onChange:w,style:f,spellCheck:!1,autoCapitalize:`none`,autoCorrect:`off`,inputClassName:r.default.input,suffix:(0,o.jsx)(`input`,{type:`color`,className:r.default.swatch,value:E,onChange:T,disabled:p.disabled,"aria-label":m(`colorinput.swatch`),tabIndex:-1}),...p})};exports.ColorInput=l;

package/dist/components/form/ColorInput/ColorInput.d.ts

@@ -1,6 +1,14 @@
 import { default as React } from 'react';
 import { Input } from '../../form/Input/Input';
 /**
- * カラー選択に特化した入力コンポーネント。
+ * 色を**文字で入れる**ための入力。`#f3ece1` のような値をそのまま打てて、
+ * 右の見本から選ぶこともできる。
+ *
+ * **以前は `<Input type="color">` を出すだけ**で、テキスト欄が無かった。
+ * `ColorPicker` と同じ見た目・同じ操作で、docs が言う「正確な値を文字で入れる」
+ * ができない状態だった（T122）。役割分担はこう:
+ *
+ * - `ColorInput` — 値が決まっている（ブランド色・デザイン指定）ときに**打ち込む**
+ * - `ColorPicker` — 値が決まっていないときに**見て選ぶ**
  */
 export declare const ColorInput: ({ className, value, defaultValue, onChange, style, ...props }: React.ComponentProps<typeof Input>) => React.JSX.Element;

package/dist/components/form/ColorInput/ColorInput.js

@@ -1,53 +1,43 @@
 "use client";
-import { Input as e } from "../Input/Input.js";
-import t from "./color-input.module.js";
-import { useCallback as n, useMemo as r, useState as i } from "react";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import { Input as t } from "../Input/Input.js";
+import n from "./color-input.module.js";
+import { useCallback as r, useState as i } from "react";
 import a from "classnames";
 import { jsx as o } from "react/jsx-runtime";
 //#region src/components/form/ColorInput/ColorInput.tsx
-function s(e) {
-	let t = e.replace("#", "");
-	if (t.length !== 6 && t.length !== 3) return null;
-	let n = t.length === 3 ? t.split("").map((e) => e + e).join("") : t, r = parseInt(n, 16);
-	return isNaN(r) ? null : {
-		r: r >> 16 & 255,
-		g: r >> 8 & 255,
-		b: r & 255
-	};
-}
-function c(e, t, n) {
-	let [r, i, a] = [
-		e,
-		t,
-		n
-	].map((e) => {
-		let t = e / 255;
-		return t <= .03928 ? t / 12.92 : ((t + .055) / 1.055) ** 2.4;
-	});
-	return .2126 * r + .7152 * i + .0722 * a;
-}
-function l(e) {
-	let t = s(e);
-	return t ? c(t.r, t.g, t.b) < .4 : !1;
-}
-var u = ({ className: s, value: c, defaultValue: u, onChange: d, style: f, ...p }) => {
-	let [m, h] = i(() => u ?? "#000000"), g = c !== void 0, _ = g ? c : m, v = n((e) => {
-		g || h(e.target.value), d?.(e);
-	}, [g, d]), y = r(() => l(_), [_]);
-	return /* @__PURE__ */ o(e, {
-		type: "color",
-		className: a("wim-color-input", t.root, y && t.dark, s),
-		value: _,
-		onChange: v,
-		style: f,
-		styles: {
-			root: t.inputBase,
-			icon: t.inputIcon,
-			icons: t.inputIcons
-		},
-		inputClassName: t.input,
-		...p
+var s = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i, c = (e) => e.length === 4 ? `#${e.slice(1).split("").map((e) => e + e).join("")}` : e, l = ({ className: l, value: u, defaultValue: d, onChange: f, style: p, ...m }) => {
+	let { t: h } = e("components"), [g, _] = i(() => d ?? "#000000"), v = u !== void 0, y = v ? u : g, [b, x] = i(y), [S, C] = i(y);
+	y !== S && (C(y), x(y));
+	let w = r((e, t) => {
+		v || _(e), f?.(t);
+	}, [v, f]), T = r((e) => {
+		let t = e.target.value;
+		x(t), s.test(t.trim()) && w(t.trim(), e);
+	}, [w]), E = r((e) => {
+		x(e.target.value), w(e.target.value, e);
+	}, [w]), D = s.test(y) ? c(y).toLowerCase() : "#000000";
+	return /* @__PURE__ */ o(t, {
+		type: "text",
+		className: a("wim-color-input", n.root, l),
+		value: b,
+		onChange: T,
+		style: p,
+		spellCheck: !1,
+		autoCapitalize: "none",
+		autoCorrect: "off",
+		inputClassName: n.input,
+		suffix: /* @__PURE__ */ o("input", {
+			type: "color",
+			className: n.swatch,
+			value: D,
+			onChange: E,
+			disabled: m.disabled,
+			"aria-label": h("colorinput.swatch"),
+			tabIndex: -1
+		}),
+		...m
 	});
 };
 //#endregion
-export { u as ColorInput };
+export { l as ColorInput };