@patternmode/swatch 0.2.1 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/DistributionBar/DistributionBarRoot.d.ts +8 -0
- package/dist/DistributionBar/DistributionBarRoot.d.ts.map +1 -1
- package/dist/DistributionBar/index.d.ts +1 -1
- package/dist/DistributionBar/index.d.ts.map +1 -1
- package/dist/Swatch/index.d.ts +1 -1
- package/dist/Swatch/index.d.ts.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +108 -24
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/swatch.d.ts +1 -1
- package/dist/swatch.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
import type { HTMLAttributes } from "react";
|
|
2
2
|
import { type DistributionBarSegment } from "./DistributionBarMath";
|
|
3
|
+
export interface DistributionDisplayProps extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
|
|
4
|
+
assignedLabel?: string;
|
|
5
|
+
emptyLabel?: string;
|
|
6
|
+
emptyValue?: number;
|
|
7
|
+
legend?: "segments" | "summary" | false;
|
|
8
|
+
segments: DistributionBarSegment[];
|
|
9
|
+
}
|
|
3
10
|
export interface DistributionBarProps extends Omit<HTMLAttributes<HTMLFieldSetElement>, "onChange"> {
|
|
4
11
|
minValue?: number;
|
|
5
12
|
onChange?: (segments: DistributionBarSegment[]) => void;
|
|
6
13
|
segments: DistributionBarSegment[];
|
|
7
14
|
step?: number;
|
|
8
15
|
}
|
|
16
|
+
export declare function DistributionDisplay({ "aria-label": ariaLabel, assignedLabel, className, emptyLabel, emptyValue, legend, segments, ...props }: DistributionDisplayProps): import("react/jsx-runtime").JSX.Element;
|
|
9
17
|
export declare function DistributionBar({ "aria-label": ariaLabel, className, minValue, onChange, segments, step, ...props }: DistributionBarProps): import("react/jsx-runtime").JSX.Element;
|
|
10
18
|
//# sourceMappingURL=DistributionBarRoot.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DistributionBarRoot.d.ts","sourceRoot":"","sources":["../../src/DistributionBar/DistributionBarRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAiB,cAAc,EAAiB,MAAM,OAAO,CAAC;AAG1E,OAAO,EACN,KAAK,sBAAsB,EAI3B,MAAM,uBAAuB,CAAC;AAE/B,MAAM,WAAW,oBAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,sBAAsB,EAAE,KAAK,IAAI,CAAC;IACxD,QAAQ,EAAE,sBAAsB,EAAE,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,eAAe,CAAC,EAC/B,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,QAAY,EACZ,QAAQ,EACR,QAAQ,EACR,IAAQ,EACR,GAAG,KAAK,EACR,EAAE,oBAAoB,
|
|
1
|
+
{"version":3,"file":"DistributionBarRoot.d.ts","sourceRoot":"","sources":["../../src/DistributionBar/DistributionBarRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAiB,cAAc,EAAiB,MAAM,OAAO,CAAC;AAG1E,OAAO,EACN,KAAK,sBAAsB,EAI3B,MAAM,uBAAuB,CAAC;AAE/B,MAAM,WAAW,wBAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IACpD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,KAAK,CAAC;IACxC,QAAQ,EAAE,sBAAsB,EAAE,CAAC;CACnC;AAED,MAAM,WAAW,oBAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,sBAAsB,EAAE,KAAK,IAAI,CAAC;IACxD,QAAQ,EAAE,sBAAsB,EAAE,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,mBAAmB,CAAC,EACnC,YAAY,EAAE,SAAS,EACvB,aAA0B,EAC1B,SAAS,EACT,UAAyB,EACzB,UAAc,EACd,MAAmB,EACnB,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,wBAAwB,2CA4C1B;AAED,wBAAgB,eAAe,CAAC,EAC/B,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,QAAY,EACZ,QAAQ,EACR,QAAQ,EACR,IAAQ,EACR,GAAG,KAAK,EACR,EAAE,oBAAoB,2CA4FtB"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { type DistributionBarSegment, type DistributionBarSegmentUpdate, getDistributionBoundaryPercent, getDistributionTotal, moveDistributionBoundary, removeDistributionSegment, updateDistributionSegment, } from "./DistributionBarMath";
|
|
2
|
-
export { DistributionBar, type DistributionBarProps, } from "./DistributionBarRoot";
|
|
2
|
+
export { DistributionBar, type DistributionBarProps, DistributionDisplay, type DistributionDisplayProps, } from "./DistributionBarRoot";
|
|
3
3
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DistributionBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,sBAAsB,EAC3B,KAAK,4BAA4B,EACjC,8BAA8B,EAC9B,oBAAoB,EACpB,wBAAwB,EACxB,yBAAyB,EACzB,yBAAyB,GACzB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACN,eAAe,EACf,KAAK,oBAAoB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DistributionBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,sBAAsB,EAC3B,KAAK,4BAA4B,EACjC,8BAA8B,EAC9B,oBAAoB,EACpB,wBAAwB,EACxB,yBAAyB,EACzB,yBAAyB,GACzB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACN,eAAe,EACf,KAAK,oBAAoB,EACzB,mBAAmB,EACnB,KAAK,wBAAwB,GAC7B,MAAM,uBAAuB,CAAC"}
|
package/dist/Swatch/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { DistributionBar, type DistributionBarProps, type DistributionBarSegment, type DistributionBarSegmentUpdate, getDistributionBoundaryPercent, getDistributionTotal, moveDistributionBoundary, removeDistributionSegment, updateDistributionSegment, } from "../DistributionBar";
|
|
1
|
+
export { DistributionBar, type DistributionBarProps, type DistributionBarSegment, type DistributionBarSegmentUpdate, DistributionDisplay, type DistributionDisplayProps, getDistributionBoundaryPercent, getDistributionTotal, moveDistributionBoundary, removeDistributionSegment, updateDistributionSegment, } from "../DistributionBar";
|
|
2
2
|
export { getSwatchColorsBackground } from "./SwatchColors";
|
|
3
3
|
export { Swatch } from "./SwatchRoot";
|
|
4
4
|
export { getSwatchSizeVariableStyle, SWATCH_SHAPES, SWATCH_SIZE_VALUES, SWATCH_SIZES, type SwatchColorStop, type SwatchProps, type SwatchShape, type SwatchSize, } from "./SwatchTypes";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Swatch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,KAAK,4BAA4B,EACjC,8BAA8B,EAC9B,oBAAoB,EACpB,wBAAwB,EACxB,yBAAyB,EACzB,yBAAyB,GACzB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EACN,0BAA0B,EAC1B,aAAa,EACb,kBAAkB,EAClB,YAAY,EACZ,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,UAAU,GACf,MAAM,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Swatch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,KAAK,4BAA4B,EACjC,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,8BAA8B,EAC9B,oBAAoB,EACpB,wBAAwB,EACxB,yBAAyB,EACzB,yBAAyB,GACzB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EACN,0BAA0B,EAC1B,aAAa,EACb,kBAAkB,EAClB,YAAY,EACZ,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,UAAU,GACf,MAAM,eAAe,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { DistributionBar, type DistributionBarProps, type DistributionBarSegment, type DistributionBarSegmentUpdate, getDistributionBoundaryPercent, getDistributionTotal, getSwatchColorsBackground, getSwatchSizeVariableStyle, moveDistributionBoundary, removeDistributionSegment, SWATCH_SHAPES, SWATCH_SIZE_VALUES, SWATCH_SIZES, Swatch, type SwatchColorStop, type SwatchProps, type SwatchShape, type SwatchSize, updateDistributionSegment, } from "./swatch";
|
|
1
|
+
export { DistributionBar, type DistributionBarProps, type DistributionBarSegment, type DistributionBarSegmentUpdate, DistributionDisplay, type DistributionDisplayProps, getDistributionBoundaryPercent, getDistributionTotal, getSwatchColorsBackground, getSwatchSizeVariableStyle, moveDistributionBoundary, removeDistributionSegment, SWATCH_SHAPES, SWATCH_SIZE_VALUES, SWATCH_SIZES, Swatch, type SwatchColorStop, type SwatchProps, type SwatchShape, type SwatchSize, updateDistributionSegment, } from "./swatch";
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,KAAK,4BAA4B,EACjC,8BAA8B,EAC9B,oBAAoB,EACpB,yBAAyB,EACzB,0BAA0B,EAC1B,wBAAwB,EACxB,yBAAyB,EACzB,aAAa,EACb,kBAAkB,EAClB,YAAY,EACZ,MAAM,EACN,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,yBAAyB,GACzB,MAAM,UAAU,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,KAAK,4BAA4B,EACjC,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,8BAA8B,EAC9B,oBAAoB,EACpB,yBAAyB,EACzB,0BAA0B,EAC1B,wBAAwB,EACxB,yBAAyB,EACzB,aAAa,EACb,kBAAkB,EAClB,YAAY,EACZ,MAAM,EACN,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,yBAAyB,GACzB,MAAM,UAAU,CAAC"}
|
package/dist/index.mjs
CHANGED
|
@@ -77,6 +77,39 @@ function roundValue(value) {
|
|
|
77
77
|
}
|
|
78
78
|
//#endregion
|
|
79
79
|
//#region src/DistributionBar/DistributionBarRoot.tsx
|
|
80
|
+
function DistributionDisplay({ "aria-label": ariaLabel, assignedLabel = "assigned", className, emptyLabel = "unassigned", emptyValue = 0, legend = "segments", segments, ...props }) {
|
|
81
|
+
const total = getDistributionDisplayTotal(segments, emptyValue);
|
|
82
|
+
const accessibleLabel = ariaLabel ?? getDistributionDisplayAccessibleLabel(segments, emptyValue, emptyLabel, total);
|
|
83
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
84
|
+
...props,
|
|
85
|
+
"aria-label": accessibleLabel,
|
|
86
|
+
className: joinClassNames("patternmode-distribution-display", className),
|
|
87
|
+
"data-slot": "distribution-display",
|
|
88
|
+
role: "img",
|
|
89
|
+
children: [
|
|
90
|
+
/* @__PURE__ */ jsx("div", {
|
|
91
|
+
className: "patternmode-distribution-bar__track",
|
|
92
|
+
children: /* @__PURE__ */ jsx(DistributionSegments, {
|
|
93
|
+
emptyValue,
|
|
94
|
+
segments,
|
|
95
|
+
total
|
|
96
|
+
})
|
|
97
|
+
}),
|
|
98
|
+
legend === "segments" ? /* @__PURE__ */ jsx(DistributionSegmentLegend, {
|
|
99
|
+
emptyLabel,
|
|
100
|
+
emptyValue,
|
|
101
|
+
segments,
|
|
102
|
+
total
|
|
103
|
+
}) : null,
|
|
104
|
+
legend === "summary" ? /* @__PURE__ */ jsx(DistributionSummaryLegend, {
|
|
105
|
+
assignedLabel,
|
|
106
|
+
emptyLabel,
|
|
107
|
+
emptyValue,
|
|
108
|
+
total
|
|
109
|
+
}) : null
|
|
110
|
+
]
|
|
111
|
+
});
|
|
112
|
+
}
|
|
80
113
|
function DistributionBar({ "aria-label": ariaLabel, className, minValue = 4, onChange, segments, step = 1, ...props }) {
|
|
81
114
|
const trackRef = useRef(null);
|
|
82
115
|
const dragStartSegmentsRef = useRef(null);
|
|
@@ -116,16 +149,9 @@ function DistributionBar({ "aria-label": ariaLabel, className, minValue = 4, onC
|
|
|
116
149
|
children: [/* @__PURE__ */ jsxs("div", {
|
|
117
150
|
className: "patternmode-distribution-bar__track",
|
|
118
151
|
ref: trackRef,
|
|
119
|
-
children: [/* @__PURE__ */ jsx(
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
"aria-hidden": "true",
|
|
123
|
-
className: "patternmode-distribution-bar__segment",
|
|
124
|
-
style: {
|
|
125
|
-
"--patternmode-distribution-segment-color": segment.color,
|
|
126
|
-
width: total > 0 ? `${segment.value / total * 100}%` : "0%"
|
|
127
|
-
}
|
|
128
|
-
}, segment.id))
|
|
152
|
+
children: [/* @__PURE__ */ jsx(DistributionSegments, {
|
|
153
|
+
segments,
|
|
154
|
+
total
|
|
129
155
|
}), segments.slice(0, -1).map((segment, boundaryIndex) => {
|
|
130
156
|
const nextSegment = segments[boundaryIndex + 1];
|
|
131
157
|
const boundaryPercent = getDistributionBoundaryPercent(segments, boundaryIndex);
|
|
@@ -138,26 +164,84 @@ function DistributionBar({ "aria-label": ariaLabel, className, minValue = 4, onC
|
|
|
138
164
|
onKeyDown: (event) => handleKeyDown(event, boundaryIndex)
|
|
139
165
|
}, `${segment.id}-${nextSegment?.id ?? "end"}`);
|
|
140
166
|
})]
|
|
141
|
-
}), /* @__PURE__ */ jsx(
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
/* @__PURE__ */ jsx("span", {
|
|
145
|
-
"aria-hidden": "true",
|
|
146
|
-
className: "patternmode-distribution-bar__swatch",
|
|
147
|
-
style: { "--patternmode-distribution-segment-color": segment.color }
|
|
148
|
-
}),
|
|
149
|
-
segment.label ?? segment.id,
|
|
150
|
-
" ",
|
|
151
|
-
getDerivedDistributionPercentage(segment.value, total),
|
|
152
|
-
"%"
|
|
153
|
-
] }, segment.id))
|
|
167
|
+
}), /* @__PURE__ */ jsx(DistributionSegmentLegend, {
|
|
168
|
+
segments,
|
|
169
|
+
total
|
|
154
170
|
})]
|
|
155
171
|
});
|
|
156
172
|
}
|
|
173
|
+
function DistributionSegments({ emptyValue = 0, segments, total }) {
|
|
174
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
175
|
+
className: "patternmode-distribution-bar__segments",
|
|
176
|
+
children: [segments.map((segment) => /* @__PURE__ */ jsx("div", {
|
|
177
|
+
"aria-hidden": "true",
|
|
178
|
+
className: "patternmode-distribution-bar__segment",
|
|
179
|
+
style: {
|
|
180
|
+
"--patternmode-distribution-segment-color": segment.color,
|
|
181
|
+
width: total > 0 ? `${getRenderableDistributionValue(segment.value) / total * 100}%` : "0%"
|
|
182
|
+
}
|
|
183
|
+
}, segment.id)), emptyValue > 0 ? /* @__PURE__ */ jsx("div", {
|
|
184
|
+
"aria-hidden": "true",
|
|
185
|
+
className: "patternmode-distribution-bar__segment patternmode-distribution-bar__segment--empty",
|
|
186
|
+
style: { width: total > 0 ? `${getRenderableDistributionValue(emptyValue) / total * 100}%` : "0%" }
|
|
187
|
+
}) : null]
|
|
188
|
+
});
|
|
189
|
+
}
|
|
190
|
+
function DistributionSegmentLegend({ emptyLabel, emptyValue = 0, segments, total }) {
|
|
191
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
192
|
+
className: "patternmode-distribution-bar__legend",
|
|
193
|
+
children: [segments.map((segment) => /* @__PURE__ */ jsxs("span", { children: [
|
|
194
|
+
/* @__PURE__ */ jsx("span", {
|
|
195
|
+
"aria-hidden": "true",
|
|
196
|
+
className: "patternmode-distribution-bar__swatch",
|
|
197
|
+
style: { "--patternmode-distribution-segment-color": segment.color }
|
|
198
|
+
}),
|
|
199
|
+
segment.label ?? segment.id,
|
|
200
|
+
" ",
|
|
201
|
+
getDerivedDistributionPercentage(segment.value, total),
|
|
202
|
+
"%"
|
|
203
|
+
] }, segment.id)), emptyValue > 0 && emptyLabel ? /* @__PURE__ */ jsxs("span", { children: [
|
|
204
|
+
/* @__PURE__ */ jsx("span", {
|
|
205
|
+
"aria-hidden": "true",
|
|
206
|
+
className: "patternmode-distribution-bar__swatch patternmode-distribution-bar__swatch--empty"
|
|
207
|
+
}),
|
|
208
|
+
emptyLabel,
|
|
209
|
+
" ",
|
|
210
|
+
getDerivedDistributionPercentage(emptyValue, total),
|
|
211
|
+
"%"
|
|
212
|
+
] }) : null]
|
|
213
|
+
});
|
|
214
|
+
}
|
|
215
|
+
function DistributionSummaryLegend({ assignedLabel, emptyLabel, emptyValue, total }) {
|
|
216
|
+
const emptyPercentage = getDerivedDistributionPercentage(emptyValue, total);
|
|
217
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
218
|
+
className: "patternmode-distribution-bar__legend",
|
|
219
|
+
children: [/* @__PURE__ */ jsxs("span", { children: [
|
|
220
|
+
Math.max(0, 100 - emptyPercentage),
|
|
221
|
+
"% ",
|
|
222
|
+
assignedLabel
|
|
223
|
+
] }), emptyValue > 0 ? /* @__PURE__ */ jsxs("span", { children: [
|
|
224
|
+
emptyPercentage,
|
|
225
|
+
"% ",
|
|
226
|
+
emptyLabel
|
|
227
|
+
] }) : null]
|
|
228
|
+
});
|
|
229
|
+
}
|
|
230
|
+
function getDistributionDisplayTotal(segments, emptyValue) {
|
|
231
|
+
return getDistributionTotal(segments) + getRenderableDistributionValue(emptyValue);
|
|
232
|
+
}
|
|
233
|
+
function getDistributionDisplayAccessibleLabel(segments, emptyValue, emptyLabel, total) {
|
|
234
|
+
const segmentLabels = segments.map((segment) => `${segment.label ?? segment.id} ${getDerivedDistributionPercentage(segment.value, total)}%`);
|
|
235
|
+
if (emptyValue > 0) segmentLabels.push(`${emptyLabel} ${getDerivedDistributionPercentage(emptyValue, total)}%`);
|
|
236
|
+
return segmentLabels.join(", ");
|
|
237
|
+
}
|
|
157
238
|
function getDerivedDistributionPercentage(value, total) {
|
|
158
239
|
if (!(total > 0 && Number.isFinite(value))) return 0;
|
|
159
240
|
return Math.round(Math.max(0, value) / total * 100);
|
|
160
241
|
}
|
|
242
|
+
function getRenderableDistributionValue(value) {
|
|
243
|
+
return Number.isFinite(value) ? Math.max(0, value) : 0;
|
|
244
|
+
}
|
|
161
245
|
function DistributionBarHandle({ "aria-label": ariaLabel, boundaryPercent, onDrag, onDragEnd, onDragStart, onKeyDown }) {
|
|
162
246
|
return /* @__PURE__ */ jsx(motion.button, {
|
|
163
247
|
"aria-label": ariaLabel,
|
|
@@ -332,6 +416,6 @@ function Swatch({ "aria-label": ariaLabel, background, children, className, colo
|
|
|
332
416
|
});
|
|
333
417
|
}
|
|
334
418
|
//#endregion
|
|
335
|
-
export { DistributionBar, SWATCH_SHAPES, SWATCH_SIZES, SWATCH_SIZE_VALUES, Swatch, getDistributionBoundaryPercent, getDistributionTotal, getSwatchColorsBackground, getSwatchSizeVariableStyle, moveDistributionBoundary, removeDistributionSegment, updateDistributionSegment };
|
|
419
|
+
export { DistributionBar, DistributionDisplay, SWATCH_SHAPES, SWATCH_SIZES, SWATCH_SIZE_VALUES, Swatch, getDistributionBoundaryPercent, getDistributionTotal, getSwatchColorsBackground, getSwatchSizeVariableStyle, moveDistributionBoundary, removeDistributionSegment, updateDistributionSegment };
|
|
336
420
|
|
|
337
421
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../src/DistributionBar/DistributionBarMath.ts","../src/DistributionBar/DistributionBarRoot.tsx","../src/Swatch/SwatchColors.ts","../src/Swatch/SwatchTypes.ts","../src/Swatch/SwatchRoot.tsx"],"sourcesContent":["export interface DistributionBarSegment {\n\tcolor: string;\n\tid: string;\n\tlabel?: string;\n\tvalue: number;\n}\n\nexport type DistributionBarSegmentUpdate = Partial<\n\tOmit<DistributionBarSegment, \"value\">\n> & {\n\tvalue?: never;\n};\n\nexport function getDistributionTotal(\n\tsegments: DistributionBarSegment[],\n): number {\n\treturn segments.reduce(\n\t\t(sum, segment) => sum + sanitizeValue(segment.value),\n\t\t0,\n\t);\n}\n\nexport function getDistributionBoundaryPercent(\n\tsegments: DistributionBarSegment[],\n\tboundaryIndex: number,\n): number {\n\tconst total = getDistributionTotal(segments);\n\tif (total <= 0) {\n\t\treturn 0;\n\t}\n\n\tconst boundaryValue = segments\n\t\t.slice(0, boundaryIndex + 1)\n\t\t.reduce((sum, segment) => sum + sanitizeValue(segment.value), 0);\n\treturn roundValue((boundaryValue / total) * 100);\n}\n\nexport function moveDistributionBoundary(\n\tsegments: DistributionBarSegment[],\n\tboundaryIndex: number,\n\tdeltaValue: number,\n\tminValue: number,\n): DistributionBarSegment[] {\n\tconst left = segments[boundaryIndex];\n\tconst right = segments[boundaryIndex + 1];\n\tif (!(left && right)) {\n\t\treturn segments;\n\t}\n\n\tconst pairTotal = sanitizeValue(left.value) + sanitizeValue(right.value);\n\tconst clampedMin = Math.max(0, Math.min(minValue, pairTotal / 2));\n\tconst nextLeft = clamp(\n\t\tsanitizeValue(left.value) + deltaValue,\n\t\tclampedMin,\n\t\tpairTotal - clampedMin,\n\t);\n\tconst nextRight = pairTotal - nextLeft;\n\n\treturn segments.map((segment, index) => {\n\t\tif (index === boundaryIndex) {\n\t\t\treturn { ...segment, value: roundValue(nextLeft) };\n\t\t}\n\t\tif (index === boundaryIndex + 1) {\n\t\t\treturn { ...segment, value: roundValue(nextRight) };\n\t\t}\n\t\treturn segment;\n\t});\n}\n\nexport function removeDistributionSegment(\n\tsegments: DistributionBarSegment[],\n\tsegmentId: string,\n): DistributionBarSegment[] {\n\tif (segments.length <= 1) {\n\t\treturn segments;\n\t}\n\n\tconst removed = segments.find((segment) => segment.id === segmentId);\n\tif (!removed) {\n\t\treturn segments;\n\t}\n\n\tconst remaining = segments.filter((segment) => segment.id !== segmentId);\n\tconst removedValue = sanitizeValue(removed.value);\n\tconst remainingTotal = getDistributionTotal(remaining);\n\tif (remainingTotal <= 0) {\n\t\tconst equalValue = removedValue / remaining.length;\n\t\treturn remaining.map((segment) => ({\n\t\t\t...segment,\n\t\t\tvalue: roundValue(equalValue),\n\t\t}));\n\t}\n\n\tlet assignedValue = 0;\n\tconst originalTotal = getDistributionTotal(segments);\n\treturn remaining.map((segment, index) => {\n\t\tif (index === remaining.length - 1) {\n\t\t\treturn { ...segment, value: roundValue(originalTotal - assignedValue) };\n\t\t}\n\n\t\tconst nextValue = roundValue(\n\t\t\tsanitizeValue(segment.value) +\n\t\t\t\t(removedValue * sanitizeValue(segment.value)) / remainingTotal,\n\t\t);\n\t\tassignedValue += nextValue;\n\t\treturn { ...segment, value: nextValue };\n\t});\n}\n\nexport function updateDistributionSegment(\n\tsegments: DistributionBarSegment[],\n\tsegmentId: string,\n\tupdate: DistributionBarSegmentUpdate,\n): DistributionBarSegment[] {\n\treturn segments.map((segment) =>\n\t\tsegment.id === segmentId ? { ...segment, ...update } : segment,\n\t);\n}\n\nfunction sanitizeValue(value: number): number {\n\treturn Number.isFinite(value) ? Math.max(0, value) : 0;\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n\treturn Math.min(Math.max(value, min), max);\n}\n\nfunction roundValue(value: number): number {\n\treturn Number(value.toFixed(1));\n}\n","import { joinClassNames } from \"@patternmode/system\";\nimport { motion, type PanInfo } from \"motion/react\";\nimport type { CSSProperties, HTMLAttributes, KeyboardEvent } from \"react\";\nimport { useRef } from \"react\";\n\nimport {\n\ttype DistributionBarSegment,\n\tgetDistributionBoundaryPercent,\n\tgetDistributionTotal,\n\tmoveDistributionBoundary,\n} from \"./DistributionBarMath\";\n\nexport interface DistributionBarProps\n\textends Omit<HTMLAttributes<HTMLFieldSetElement>, \"onChange\"> {\n\tminValue?: number;\n\tonChange?: (segments: DistributionBarSegment[]) => void;\n\tsegments: DistributionBarSegment[];\n\tstep?: number;\n}\n\nexport function DistributionBar({\n\t\"aria-label\": ariaLabel,\n\tclassName,\n\tminValue = 4,\n\tonChange,\n\tsegments,\n\tstep = 1,\n\t...props\n}: DistributionBarProps) {\n\tconst trackRef = useRef<HTMLDivElement>(null);\n\tconst dragStartSegmentsRef = useRef<DistributionBarSegment[] | null>(null);\n\tconst total = getDistributionTotal(segments);\n\n\tfunction moveBoundary(\n\t\tboundaryIndex: number,\n\t\tdeltaValue: number,\n\t\tsourceSegments = segments,\n\t) {\n\t\tonChange?.(\n\t\t\tmoveDistributionBoundary(\n\t\t\t\tsourceSegments,\n\t\t\t\tboundaryIndex,\n\t\t\t\tdeltaValue,\n\t\t\t\tminValue,\n\t\t\t),\n\t\t);\n\t}\n\n\tfunction handleDragStart() {\n\t\tdragStartSegmentsRef.current = segments;\n\t}\n\n\tfunction handleDrag(boundaryIndex: number, info: PanInfo) {\n\t\tconst sourceSegments = dragStartSegmentsRef.current ?? segments;\n\t\tconst sourceTotal = getDistributionTotal(sourceSegments);\n\t\tconst trackWidth = trackRef.current?.getBoundingClientRect().width ?? 0;\n\t\tif (!(trackWidth > 0 && sourceTotal > 0)) {\n\t\t\treturn;\n\t\t}\n\n\t\tmoveBoundary(\n\t\t\tboundaryIndex,\n\t\t\t(info.offset.x / trackWidth) * sourceTotal,\n\t\t\tsourceSegments,\n\t\t);\n\t}\n\n\tfunction handleDragEnd(boundaryIndex: number, info: PanInfo) {\n\t\thandleDrag(boundaryIndex, info);\n\t\tdragStartSegmentsRef.current = null;\n\t}\n\n\tfunction handleKeyDown(\n\t\tevent: KeyboardEvent<HTMLButtonElement>,\n\t\tboundaryIndex: number,\n\t) {\n\t\tif (event.key === \"ArrowLeft\") {\n\t\t\tevent.preventDefault();\n\t\t\tmoveBoundary(boundaryIndex, -step);\n\t\t}\n\t\tif (event.key === \"ArrowRight\") {\n\t\t\tevent.preventDefault();\n\t\t\tmoveBoundary(boundaryIndex, step);\n\t\t}\n\t}\n\n\treturn (\n\t\t<fieldset\n\t\t\t{...props}\n\t\t\taria-label={ariaLabel}\n\t\t\tclassName={joinClassNames(\"patternmode-distribution-bar\", className)}\n\t\t\tdata-slot=\"distribution-bar\"\n\t\t>\n\t\t\t<div className=\"patternmode-distribution-bar__track\" ref={trackRef}>\n\t\t\t\t<div className=\"patternmode-distribution-bar__segments\">\n\t\t\t\t\t{segments.map((segment) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\tclassName=\"patternmode-distribution-bar__segment\"\n\t\t\t\t\t\t\tkey={segment.id}\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\"--patternmode-distribution-segment-color\": segment.color,\n\t\t\t\t\t\t\t\t\twidth: total > 0 ? `${(segment.value / total) * 100}%` : \"0%\",\n\t\t\t\t\t\t\t\t} as CSSProperties\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t\t{segments.slice(0, -1).map((segment, boundaryIndex) => {\n\t\t\t\t\tconst nextSegment = segments[boundaryIndex + 1];\n\t\t\t\t\tconst boundaryPercent = getDistributionBoundaryPercent(\n\t\t\t\t\t\tsegments,\n\t\t\t\t\t\tboundaryIndex,\n\t\t\t\t\t);\n\t\t\t\t\tconst label = `Adjust ${segment.label ?? segment.id} and ${\n\t\t\t\t\t\tnextSegment?.label ?? nextSegment?.id\n\t\t\t\t\t} distribution`;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<DistributionBarHandle\n\t\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\t\tboundaryPercent={boundaryPercent}\n\t\t\t\t\t\t\tkey={`${segment.id}-${nextSegment?.id ?? \"end\"}`}\n\t\t\t\t\t\t\tonDrag={(info) => handleDrag(boundaryIndex, info)}\n\t\t\t\t\t\t\tonDragEnd={(info) => handleDragEnd(boundaryIndex, info)}\n\t\t\t\t\t\t\tonDragStart={handleDragStart}\n\t\t\t\t\t\t\tonKeyDown={(event) => handleKeyDown(event, boundaryIndex)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t\t<div className=\"patternmode-distribution-bar__legend\">\n\t\t\t\t{segments.map((segment) => (\n\t\t\t\t\t<span key={segment.id}>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\tclassName=\"patternmode-distribution-bar__swatch\"\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\"--patternmode-distribution-segment-color\": segment.color,\n\t\t\t\t\t\t\t\t} as CSSProperties\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{segment.label ?? segment.id}{\" \"}\n\t\t\t\t\t\t{getDerivedDistributionPercentage(segment.value, total)}%\n\t\t\t\t\t</span>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</fieldset>\n\t);\n}\n\nfunction getDerivedDistributionPercentage(\n\tvalue: number,\n\ttotal: number,\n): number {\n\tif (!(total > 0 && Number.isFinite(value))) {\n\t\treturn 0;\n\t}\n\n\treturn Math.round((Math.max(0, value) / total) * 100);\n}\n\ninterface DistributionBarHandleProps {\n\t\"aria-label\": string;\n\tboundaryPercent: number;\n\tonDrag: (info: PanInfo) => void;\n\tonDragEnd: (info: PanInfo) => void;\n\tonDragStart: () => void;\n\tonKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;\n}\n\nfunction DistributionBarHandle({\n\t\"aria-label\": ariaLabel,\n\tboundaryPercent,\n\tonDrag,\n\tonDragEnd,\n\tonDragStart,\n\tonKeyDown,\n}: DistributionBarHandleProps) {\n\treturn (\n\t\t<motion.button\n\t\t\taria-label={ariaLabel}\n\t\t\tclassName=\"patternmode-distribution-bar__handle\"\n\t\t\tdrag=\"x\"\n\t\t\tdragElastic={0}\n\t\t\tdragMomentum={false}\n\t\t\tdragSnapToOrigin\n\t\t\tonDrag={(_event, info) => onDrag(info)}\n\t\t\tonDragEnd={(_event, info) => onDragEnd(info)}\n\t\t\tonDragStart={onDragStart}\n\t\t\tonKeyDown={onKeyDown}\n\t\t\tstyle={{ left: `calc(${boundaryPercent}% - 1.375rem)` }}\n\t\t\ttransformTemplate={() => \"none\"}\n\t\t\ttype=\"button\"\n\t\t/>\n\t);\n}\n","import type { SwatchColorStop } from \"./SwatchTypes\";\n\nexport function isLightColor(color: string): boolean {\n\tconst normalized = normalizeHex(color);\n\tif (!normalized) {\n\t\treturn false;\n\t}\n\n\tconst red = Number.parseInt(normalized.slice(0, 2), 16);\n\tconst green = Number.parseInt(normalized.slice(2, 4), 16);\n\tconst blue = Number.parseInt(normalized.slice(4, 6), 16);\n\tconst luminance = (0.299 * red + 0.587 * green + 0.114 * blue) / 255;\n\treturn luminance > 0.62;\n}\n\nexport function getSwatchColorsBackground(\n\tcolors: SwatchColorStop[] | undefined,\n): string | undefined {\n\tif (!colors || colors.length === 0) {\n\t\treturn undefined;\n\t}\n\n\tif (colors.length === 1) {\n\t\treturn toColorStop(colors[0] as SwatchColorStop).color;\n\t}\n\n\tconst stops = colors.map(toColorStop);\n\tconst weights = stops.map((stop) => getRatioWeight(stop.ratio));\n\tconst rawTotal = weights.reduce((sum, ratio) => sum + ratio, 0);\n\tconst useEqualWeights = rawTotal <= 0;\n\tconst total = useEqualWeights ? stops.length : rawTotal;\n\tlet cursor = 0;\n\tconst parts = stops.map((stop, index) => {\n\t\tconst ratio = useEqualWeights ? 1 : (weights[index] ?? 0);\n\t\tconst start = cursor;\n\t\tconst end =\n\t\t\tindex === stops.length - 1 ? 100 : cursor + (ratio / total) * 100;\n\t\tcursor = end;\n\t\treturn `${stop.color} ${formatPercent(start)} ${formatPercent(end)}`;\n\t});\n\n\treturn `linear-gradient(90deg, ${parts.join(\", \")})`;\n}\n\nfunction normalizeHex(hex: string): string | null {\n\tconst value = hex.trim().replace(/^#/, \"\");\n\tif (/^[\\da-f]{3}$/i.test(value)) {\n\t\treturn value\n\t\t\t.split(\"\")\n\t\t\t.map((part) => part + part)\n\t\t\t.join(\"\");\n\t}\n\tif (/^[\\da-f]{6}$/i.test(value)) {\n\t\treturn value;\n\t}\n\treturn null;\n}\n\nfunction toColorStop(stop: SwatchColorStop): { color: string; ratio?: number } {\n\treturn typeof stop === \"string\" ? { color: stop } : stop;\n}\n\nfunction getRatioWeight(ratio: number | undefined): number {\n\tif (ratio === undefined) {\n\t\treturn 1;\n\t}\n\n\treturn Number.isFinite(ratio) ? Math.max(0, ratio) : 0;\n}\n\nfunction formatPercent(value: number): string {\n\treturn `${Number.isInteger(value) ? value : Number(value.toFixed(2))}%`;\n}\n","import {\n\ttype ObjectFit,\n\tPATTERNMODE_SIZE_VALUES,\n\tPATTERNMODE_SIZES,\n} from \"@patternmode/system\";\nimport type { ComponentType, HTMLAttributes, SVGProps } from \"react\";\n\nexport const SWATCH_SIZES = [\n\t...PATTERNMODE_SIZES,\n\t\"4xl\",\n\t\"5xl\",\n\t\"6xl\",\n\t\"7xl\",\n] as const;\n\nexport const SWATCH_SIZE_VALUES = {\n\t...PATTERNMODE_SIZE_VALUES,\n\t\"4xl\": \"4.5rem\",\n\t\"5xl\": \"5rem\",\n\t\"6xl\": \"5.5rem\",\n\t\"7xl\": \"6rem\",\n} as const satisfies Record<SwatchSize, string>;\n\nexport const SWATCH_SHAPES = [\"circle\", \"pill\", \"square\"] as const;\n\nexport type SwatchSize = (typeof SWATCH_SIZES)[number];\nexport type SwatchShape = (typeof SWATCH_SHAPES)[number];\nexport type SwatchColorStop = string | { color: string; ratio?: number };\ntype SwatchIcon = ComponentType<SVGProps<SVGSVGElement>>;\n\nexport function getSwatchSizeVariableStyle(\n\tsize: SwatchSize,\n\tvariableName = \"--patternmode-swatch-size\",\n): Record<string, string> {\n\treturn {\n\t\t[variableName]: SWATCH_SIZE_VALUES[size],\n\t};\n}\n\nexport interface SwatchProps extends HTMLAttributes<HTMLElement> {\n\tbackground?: string;\n\tcolor?: string;\n\tcolors?: SwatchColorStop[];\n\ticon?: SwatchIcon;\n\tisLight?: boolean;\n\tobjectFit?: ObjectFit;\n\tobjectPosition?: string;\n\tonRemove?: () => void;\n\traised?: boolean;\n\tremoveLabel?: string;\n\tselected?: boolean;\n\tshape?: SwatchShape;\n\tshowRing?: boolean;\n\tsize?: SwatchSize;\n\tunavailable?: boolean;\n}\n","import { getObjectSizingStyle, joinClassNames } from \"@patternmode/system\";\nimport type { CSSProperties, MouseEvent } from \"react\";\n\nimport { getSwatchColorsBackground, isLightColor } from \"./SwatchColors\";\nimport { getSwatchSizeVariableStyle, type SwatchProps } from \"./SwatchTypes\";\n\nexport function Swatch({\n\t\"aria-label\": ariaLabel,\n\tbackground,\n\tchildren,\n\tclassName,\n\tcolor,\n\tcolors,\n\ticon: Icon,\n\tisLight,\n\tobjectFit,\n\tobjectPosition,\n\tonRemove,\n\traised = false,\n\tremoveLabel,\n\trole: _role,\n\tselected = false,\n\tshape = \"circle\",\n\tshowRing = true,\n\tsize = \"base\",\n\tstyle,\n\tunavailable = false,\n\t...props\n}: SwatchProps) {\n\tconst colorsBackground = getSwatchColorsBackground(colors);\n\tconst fill = background ?? colorsBackground ?? color;\n\tconst light =\n\t\tisLight ??\n\t\t(color && !background && !colorsBackground\n\t\t\t? isLightColor(color as string)\n\t\t\t: false);\n\tconst resolvedRemoveLabel =\n\t\tremoveLabel ?? (ariaLabel ? `Remove ${ariaLabel}` : \"Remove\");\n\n\tconst rootStyle = {\n\t\t...getSwatchSizeVariableStyle(size),\n\t\t\"--patternmode-swatch-fill\": fill,\n\t\t...style,\n\t} as CSSProperties;\n\tconst mediaStyle = getObjectSizingStyle({\n\t\tfit: objectFit,\n\t\tposition: objectPosition,\n\t}) as CSSProperties;\n\n\tfunction handleRemove(event: MouseEvent<HTMLButtonElement>) {\n\t\tevent.stopPropagation();\n\t\tonRemove?.();\n\t}\n\n\tconst swatchContent = (\n\t\t<>\n\t\t\t<span aria-hidden=\"true\" className=\"patternmode-swatch__fill\" />\n\t\t\t{children ? (\n\t\t\t\t<span className=\"patternmode-swatch__media\" style={mediaStyle}>\n\t\t\t\t\t{children}\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t<span aria-hidden=\"true\" className=\"patternmode-swatch__scrim\" />\n\t\t\t{selected && Icon ? (\n\t\t\t\t<span className=\"patternmode-swatch__icon\">\n\t\t\t\t\t<Icon aria-hidden=\"true\" focusable=\"false\" />\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t{unavailable ? (\n\t\t\t\t<span aria-hidden=\"true\" className=\"patternmode-swatch__slash\" />\n\t\t\t) : null}\n\t\t</>\n\t);\n\n\tif (onRemove) {\n\t\treturn (\n\t\t\t<fieldset\n\t\t\t\t{...props}\n\t\t\t\taria-label={ariaLabel}\n\t\t\t\tclassName={joinClassNames(\"patternmode-swatch\", className)}\n\t\t\t\tdata-raised={raised ? \"true\" : undefined}\n\t\t\t\tdata-selected={selected ? \"true\" : undefined}\n\t\t\t\tdata-shape={shape}\n\t\t\t\tdata-show-ring={showRing ? \"true\" : \"false\"}\n\t\t\t\tdata-size={size}\n\t\t\t\tdata-slot=\"swatch\"\n\t\t\t\tdata-tone={light ? \"light\" : \"dark\"}\n\t\t\t\tdata-unavailable={unavailable ? \"true\" : undefined}\n\t\t\t\tstyle={rootStyle}\n\t\t\t>\n\t\t\t\t{swatchContent}\n\t\t\t\t<button\n\t\t\t\t\taria-label={resolvedRemoveLabel}\n\t\t\t\t\tclassName=\"patternmode-swatch__remove\"\n\t\t\t\t\tonClick={handleRemove}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t>\n\t\t\t\t\t<svg aria-hidden=\"true\" fill=\"none\" viewBox=\"0 0 20 20\">\n\t\t\t\t\t\t<path d=\"M5.5 5.5l9 9M14.5 5.5l-9 9\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</button>\n\t\t\t</fieldset>\n\t\t);\n\t}\n\n\treturn (\n\t\t<span\n\t\t\t{...props}\n\t\t\taria-label={ariaLabel}\n\t\t\tclassName={joinClassNames(\"patternmode-swatch\", className)}\n\t\t\tdata-raised={raised ? \"true\" : undefined}\n\t\t\tdata-selected={selected ? \"true\" : undefined}\n\t\t\tdata-shape={shape}\n\t\t\tdata-show-ring={showRing ? \"true\" : \"false\"}\n\t\t\tdata-size={size}\n\t\t\tdata-slot=\"swatch\"\n\t\t\tdata-tone={light ? \"light\" : \"dark\"}\n\t\t\tdata-unavailable={unavailable ? \"true\" : undefined}\n\t\t\trole=\"img\"\n\t\t\tstyle={rootStyle}\n\t\t>\n\t\t\t{swatchContent}\n\t\t</span>\n\t);\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../src/DistributionBar/DistributionBarMath.ts","../src/DistributionBar/DistributionBarRoot.tsx","../src/Swatch/SwatchColors.ts","../src/Swatch/SwatchTypes.ts","../src/Swatch/SwatchRoot.tsx"],"sourcesContent":["export interface DistributionBarSegment {\n\tcolor: string;\n\tid: string;\n\tlabel?: string;\n\tvalue: number;\n}\n\nexport type DistributionBarSegmentUpdate = Partial<\n\tOmit<DistributionBarSegment, \"value\">\n> & {\n\tvalue?: never;\n};\n\nexport function getDistributionTotal(\n\tsegments: DistributionBarSegment[],\n): number {\n\treturn segments.reduce(\n\t\t(sum, segment) => sum + sanitizeValue(segment.value),\n\t\t0,\n\t);\n}\n\nexport function getDistributionBoundaryPercent(\n\tsegments: DistributionBarSegment[],\n\tboundaryIndex: number,\n): number {\n\tconst total = getDistributionTotal(segments);\n\tif (total <= 0) {\n\t\treturn 0;\n\t}\n\n\tconst boundaryValue = segments\n\t\t.slice(0, boundaryIndex + 1)\n\t\t.reduce((sum, segment) => sum + sanitizeValue(segment.value), 0);\n\treturn roundValue((boundaryValue / total) * 100);\n}\n\nexport function moveDistributionBoundary(\n\tsegments: DistributionBarSegment[],\n\tboundaryIndex: number,\n\tdeltaValue: number,\n\tminValue: number,\n): DistributionBarSegment[] {\n\tconst left = segments[boundaryIndex];\n\tconst right = segments[boundaryIndex + 1];\n\tif (!(left && right)) {\n\t\treturn segments;\n\t}\n\n\tconst pairTotal = sanitizeValue(left.value) + sanitizeValue(right.value);\n\tconst clampedMin = Math.max(0, Math.min(minValue, pairTotal / 2));\n\tconst nextLeft = clamp(\n\t\tsanitizeValue(left.value) + deltaValue,\n\t\tclampedMin,\n\t\tpairTotal - clampedMin,\n\t);\n\tconst nextRight = pairTotal - nextLeft;\n\n\treturn segments.map((segment, index) => {\n\t\tif (index === boundaryIndex) {\n\t\t\treturn { ...segment, value: roundValue(nextLeft) };\n\t\t}\n\t\tif (index === boundaryIndex + 1) {\n\t\t\treturn { ...segment, value: roundValue(nextRight) };\n\t\t}\n\t\treturn segment;\n\t});\n}\n\nexport function removeDistributionSegment(\n\tsegments: DistributionBarSegment[],\n\tsegmentId: string,\n): DistributionBarSegment[] {\n\tif (segments.length <= 1) {\n\t\treturn segments;\n\t}\n\n\tconst removed = segments.find((segment) => segment.id === segmentId);\n\tif (!removed) {\n\t\treturn segments;\n\t}\n\n\tconst remaining = segments.filter((segment) => segment.id !== segmentId);\n\tconst removedValue = sanitizeValue(removed.value);\n\tconst remainingTotal = getDistributionTotal(remaining);\n\tif (remainingTotal <= 0) {\n\t\tconst equalValue = removedValue / remaining.length;\n\t\treturn remaining.map((segment) => ({\n\t\t\t...segment,\n\t\t\tvalue: roundValue(equalValue),\n\t\t}));\n\t}\n\n\tlet assignedValue = 0;\n\tconst originalTotal = getDistributionTotal(segments);\n\treturn remaining.map((segment, index) => {\n\t\tif (index === remaining.length - 1) {\n\t\t\treturn { ...segment, value: roundValue(originalTotal - assignedValue) };\n\t\t}\n\n\t\tconst nextValue = roundValue(\n\t\t\tsanitizeValue(segment.value) +\n\t\t\t\t(removedValue * sanitizeValue(segment.value)) / remainingTotal,\n\t\t);\n\t\tassignedValue += nextValue;\n\t\treturn { ...segment, value: nextValue };\n\t});\n}\n\nexport function updateDistributionSegment(\n\tsegments: DistributionBarSegment[],\n\tsegmentId: string,\n\tupdate: DistributionBarSegmentUpdate,\n): DistributionBarSegment[] {\n\treturn segments.map((segment) =>\n\t\tsegment.id === segmentId ? { ...segment, ...update } : segment,\n\t);\n}\n\nfunction sanitizeValue(value: number): number {\n\treturn Number.isFinite(value) ? Math.max(0, value) : 0;\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n\treturn Math.min(Math.max(value, min), max);\n}\n\nfunction roundValue(value: number): number {\n\treturn Number(value.toFixed(1));\n}\n","import { joinClassNames } from \"@patternmode/system\";\nimport { motion, type PanInfo } from \"motion/react\";\nimport type { CSSProperties, HTMLAttributes, KeyboardEvent } from \"react\";\nimport { useRef } from \"react\";\n\nimport {\n\ttype DistributionBarSegment,\n\tgetDistributionBoundaryPercent,\n\tgetDistributionTotal,\n\tmoveDistributionBoundary,\n} from \"./DistributionBarMath\";\n\nexport interface DistributionDisplayProps\n\textends Omit<HTMLAttributes<HTMLDivElement>, \"role\"> {\n\tassignedLabel?: string;\n\temptyLabel?: string;\n\temptyValue?: number;\n\tlegend?: \"segments\" | \"summary\" | false;\n\tsegments: DistributionBarSegment[];\n}\n\nexport interface DistributionBarProps\n\textends Omit<HTMLAttributes<HTMLFieldSetElement>, \"onChange\"> {\n\tminValue?: number;\n\tonChange?: (segments: DistributionBarSegment[]) => void;\n\tsegments: DistributionBarSegment[];\n\tstep?: number;\n}\n\nexport function DistributionDisplay({\n\t\"aria-label\": ariaLabel,\n\tassignedLabel = \"assigned\",\n\tclassName,\n\temptyLabel = \"unassigned\",\n\temptyValue = 0,\n\tlegend = \"segments\",\n\tsegments,\n\t...props\n}: DistributionDisplayProps) {\n\tconst total = getDistributionDisplayTotal(segments, emptyValue);\n\tconst accessibleLabel =\n\t\tariaLabel ??\n\t\tgetDistributionDisplayAccessibleLabel(\n\t\t\tsegments,\n\t\t\temptyValue,\n\t\t\temptyLabel,\n\t\t\ttotal,\n\t\t);\n\n\treturn (\n\t\t<div\n\t\t\t{...props}\n\t\t\taria-label={accessibleLabel}\n\t\t\tclassName={joinClassNames(\"patternmode-distribution-display\", className)}\n\t\t\tdata-slot=\"distribution-display\"\n\t\t\trole=\"img\"\n\t\t>\n\t\t\t<div className=\"patternmode-distribution-bar__track\">\n\t\t\t\t<DistributionSegments\n\t\t\t\t\temptyValue={emptyValue}\n\t\t\t\t\tsegments={segments}\n\t\t\t\t\ttotal={total}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{legend === \"segments\" ? (\n\t\t\t\t<DistributionSegmentLegend\n\t\t\t\t\temptyLabel={emptyLabel}\n\t\t\t\t\temptyValue={emptyValue}\n\t\t\t\t\tsegments={segments}\n\t\t\t\t\ttotal={total}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t\t{legend === \"summary\" ? (\n\t\t\t\t<DistributionSummaryLegend\n\t\t\t\t\tassignedLabel={assignedLabel}\n\t\t\t\t\temptyLabel={emptyLabel}\n\t\t\t\t\temptyValue={emptyValue}\n\t\t\t\t\ttotal={total}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n\nexport function DistributionBar({\n\t\"aria-label\": ariaLabel,\n\tclassName,\n\tminValue = 4,\n\tonChange,\n\tsegments,\n\tstep = 1,\n\t...props\n}: DistributionBarProps) {\n\tconst trackRef = useRef<HTMLDivElement>(null);\n\tconst dragStartSegmentsRef = useRef<DistributionBarSegment[] | null>(null);\n\tconst total = getDistributionTotal(segments);\n\n\tfunction moveBoundary(\n\t\tboundaryIndex: number,\n\t\tdeltaValue: number,\n\t\tsourceSegments = segments,\n\t) {\n\t\tonChange?.(\n\t\t\tmoveDistributionBoundary(\n\t\t\t\tsourceSegments,\n\t\t\t\tboundaryIndex,\n\t\t\t\tdeltaValue,\n\t\t\t\tminValue,\n\t\t\t),\n\t\t);\n\t}\n\n\tfunction handleDragStart() {\n\t\tdragStartSegmentsRef.current = segments;\n\t}\n\n\tfunction handleDrag(boundaryIndex: number, info: PanInfo) {\n\t\tconst sourceSegments = dragStartSegmentsRef.current ?? segments;\n\t\tconst sourceTotal = getDistributionTotal(sourceSegments);\n\t\tconst trackWidth = trackRef.current?.getBoundingClientRect().width ?? 0;\n\t\tif (!(trackWidth > 0 && sourceTotal > 0)) {\n\t\t\treturn;\n\t\t}\n\n\t\tmoveBoundary(\n\t\t\tboundaryIndex,\n\t\t\t(info.offset.x / trackWidth) * sourceTotal,\n\t\t\tsourceSegments,\n\t\t);\n\t}\n\n\tfunction handleDragEnd(boundaryIndex: number, info: PanInfo) {\n\t\thandleDrag(boundaryIndex, info);\n\t\tdragStartSegmentsRef.current = null;\n\t}\n\n\tfunction handleKeyDown(\n\t\tevent: KeyboardEvent<HTMLButtonElement>,\n\t\tboundaryIndex: number,\n\t) {\n\t\tif (event.key === \"ArrowLeft\") {\n\t\t\tevent.preventDefault();\n\t\t\tmoveBoundary(boundaryIndex, -step);\n\t\t}\n\t\tif (event.key === \"ArrowRight\") {\n\t\t\tevent.preventDefault();\n\t\t\tmoveBoundary(boundaryIndex, step);\n\t\t}\n\t}\n\n\treturn (\n\t\t<fieldset\n\t\t\t{...props}\n\t\t\taria-label={ariaLabel}\n\t\t\tclassName={joinClassNames(\"patternmode-distribution-bar\", className)}\n\t\t\tdata-slot=\"distribution-bar\"\n\t\t>\n\t\t\t<div className=\"patternmode-distribution-bar__track\" ref={trackRef}>\n\t\t\t\t<DistributionSegments segments={segments} total={total} />\n\t\t\t\t{segments.slice(0, -1).map((segment, boundaryIndex) => {\n\t\t\t\t\tconst nextSegment = segments[boundaryIndex + 1];\n\t\t\t\t\tconst boundaryPercent = getDistributionBoundaryPercent(\n\t\t\t\t\t\tsegments,\n\t\t\t\t\t\tboundaryIndex,\n\t\t\t\t\t);\n\t\t\t\t\tconst label = `Adjust ${segment.label ?? segment.id} and ${\n\t\t\t\t\t\tnextSegment?.label ?? nextSegment?.id\n\t\t\t\t\t} distribution`;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<DistributionBarHandle\n\t\t\t\t\t\t\taria-label={label}\n\t\t\t\t\t\t\tboundaryPercent={boundaryPercent}\n\t\t\t\t\t\t\tkey={`${segment.id}-${nextSegment?.id ?? \"end\"}`}\n\t\t\t\t\t\t\tonDrag={(info) => handleDrag(boundaryIndex, info)}\n\t\t\t\t\t\t\tonDragEnd={(info) => handleDragEnd(boundaryIndex, info)}\n\t\t\t\t\t\t\tonDragStart={handleDragStart}\n\t\t\t\t\t\t\tonKeyDown={(event) => handleKeyDown(event, boundaryIndex)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t\t<DistributionSegmentLegend segments={segments} total={total} />\n\t\t</fieldset>\n\t);\n}\n\ninterface DistributionSegmentsProps {\n\temptyValue?: number;\n\tsegments: DistributionBarSegment[];\n\ttotal: number;\n}\n\nfunction DistributionSegments({\n\temptyValue = 0,\n\tsegments,\n\ttotal,\n}: DistributionSegmentsProps) {\n\treturn (\n\t\t<div className=\"patternmode-distribution-bar__segments\">\n\t\t\t{segments.map((segment) => (\n\t\t\t\t<div\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName=\"patternmode-distribution-bar__segment\"\n\t\t\t\t\tkey={segment.id}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"--patternmode-distribution-segment-color\": segment.color,\n\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\ttotal > 0\n\t\t\t\t\t\t\t\t\t? `${(getRenderableDistributionValue(segment.value) / total) * 100}%`\n\t\t\t\t\t\t\t\t\t: \"0%\",\n\t\t\t\t\t\t} as CSSProperties\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t))}\n\t\t\t{emptyValue > 0 ? (\n\t\t\t\t<div\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName=\"patternmode-distribution-bar__segment patternmode-distribution-bar__segment--empty\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\ttotal > 0\n\t\t\t\t\t\t\t\t? `${(getRenderableDistributionValue(emptyValue) / total) * 100}%`\n\t\t\t\t\t\t\t\t: \"0%\",\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n\ninterface DistributionSegmentLegendProps {\n\temptyLabel?: string;\n\temptyValue?: number;\n\tsegments: DistributionBarSegment[];\n\ttotal: number;\n}\n\nfunction DistributionSegmentLegend({\n\temptyLabel,\n\temptyValue = 0,\n\tsegments,\n\ttotal,\n}: DistributionSegmentLegendProps) {\n\treturn (\n\t\t<div className=\"patternmode-distribution-bar__legend\">\n\t\t\t{segments.map((segment) => (\n\t\t\t\t<span key={segment.id}>\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName=\"patternmode-distribution-bar__swatch\"\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\"--patternmode-distribution-segment-color\": segment.color,\n\t\t\t\t\t\t\t} as CSSProperties\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t{segment.label ?? segment.id}{\" \"}\n\t\t\t\t\t{getDerivedDistributionPercentage(segment.value, total)}%\n\t\t\t\t</span>\n\t\t\t))}\n\t\t\t{emptyValue > 0 && emptyLabel ? (\n\t\t\t\t<span>\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName=\"patternmode-distribution-bar__swatch patternmode-distribution-bar__swatch--empty\"\n\t\t\t\t\t/>\n\t\t\t\t\t{emptyLabel} {getDerivedDistributionPercentage(emptyValue, total)}%\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n\ninterface DistributionSummaryLegendProps {\n\tassignedLabel: string;\n\temptyLabel: string;\n\temptyValue: number;\n\ttotal: number;\n}\n\nfunction DistributionSummaryLegend({\n\tassignedLabel,\n\temptyLabel,\n\temptyValue,\n\ttotal,\n}: DistributionSummaryLegendProps) {\n\tconst emptyPercentage = getDerivedDistributionPercentage(emptyValue, total);\n\n\treturn (\n\t\t<div className=\"patternmode-distribution-bar__legend\">\n\t\t\t<span>\n\t\t\t\t{Math.max(0, 100 - emptyPercentage)}% {assignedLabel}\n\t\t\t</span>\n\t\t\t{emptyValue > 0 ? (\n\t\t\t\t<span>\n\t\t\t\t\t{emptyPercentage}% {emptyLabel}\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n\nfunction getDistributionDisplayTotal(\n\tsegments: DistributionBarSegment[],\n\temptyValue: number,\n): number {\n\treturn (\n\t\tgetDistributionTotal(segments) + getRenderableDistributionValue(emptyValue)\n\t);\n}\n\nfunction getDistributionDisplayAccessibleLabel(\n\tsegments: DistributionBarSegment[],\n\temptyValue: number,\n\temptyLabel: string,\n\ttotal: number,\n): string {\n\tconst segmentLabels = segments.map(\n\t\t(segment) =>\n\t\t\t`${segment.label ?? segment.id} ${getDerivedDistributionPercentage(\n\t\t\t\tsegment.value,\n\t\t\t\ttotal,\n\t\t\t)}%`,\n\t);\n\tif (emptyValue > 0) {\n\t\tsegmentLabels.push(\n\t\t\t`${emptyLabel} ${getDerivedDistributionPercentage(emptyValue, total)}%`,\n\t\t);\n\t}\n\n\treturn segmentLabels.join(\", \");\n}\n\nfunction getDerivedDistributionPercentage(\n\tvalue: number,\n\ttotal: number,\n): number {\n\tif (!(total > 0 && Number.isFinite(value))) {\n\t\treturn 0;\n\t}\n\n\treturn Math.round((Math.max(0, value) / total) * 100);\n}\n\nfunction getRenderableDistributionValue(value: number): number {\n\treturn Number.isFinite(value) ? Math.max(0, value) : 0;\n}\n\ninterface DistributionBarHandleProps {\n\t\"aria-label\": string;\n\tboundaryPercent: number;\n\tonDrag: (info: PanInfo) => void;\n\tonDragEnd: (info: PanInfo) => void;\n\tonDragStart: () => void;\n\tonKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;\n}\n\nfunction DistributionBarHandle({\n\t\"aria-label\": ariaLabel,\n\tboundaryPercent,\n\tonDrag,\n\tonDragEnd,\n\tonDragStart,\n\tonKeyDown,\n}: DistributionBarHandleProps) {\n\treturn (\n\t\t<motion.button\n\t\t\taria-label={ariaLabel}\n\t\t\tclassName=\"patternmode-distribution-bar__handle\"\n\t\t\tdrag=\"x\"\n\t\t\tdragElastic={0}\n\t\t\tdragMomentum={false}\n\t\t\tdragSnapToOrigin\n\t\t\tonDrag={(_event, info) => onDrag(info)}\n\t\t\tonDragEnd={(_event, info) => onDragEnd(info)}\n\t\t\tonDragStart={onDragStart}\n\t\t\tonKeyDown={onKeyDown}\n\t\t\tstyle={{ left: `calc(${boundaryPercent}% - 1.375rem)` }}\n\t\t\ttransformTemplate={() => \"none\"}\n\t\t\ttype=\"button\"\n\t\t/>\n\t);\n}\n","import type { SwatchColorStop } from \"./SwatchTypes\";\n\nexport function isLightColor(color: string): boolean {\n\tconst normalized = normalizeHex(color);\n\tif (!normalized) {\n\t\treturn false;\n\t}\n\n\tconst red = Number.parseInt(normalized.slice(0, 2), 16);\n\tconst green = Number.parseInt(normalized.slice(2, 4), 16);\n\tconst blue = Number.parseInt(normalized.slice(4, 6), 16);\n\tconst luminance = (0.299 * red + 0.587 * green + 0.114 * blue) / 255;\n\treturn luminance > 0.62;\n}\n\nexport function getSwatchColorsBackground(\n\tcolors: SwatchColorStop[] | undefined,\n): string | undefined {\n\tif (!colors || colors.length === 0) {\n\t\treturn undefined;\n\t}\n\n\tif (colors.length === 1) {\n\t\treturn toColorStop(colors[0] as SwatchColorStop).color;\n\t}\n\n\tconst stops = colors.map(toColorStop);\n\tconst weights = stops.map((stop) => getRatioWeight(stop.ratio));\n\tconst rawTotal = weights.reduce((sum, ratio) => sum + ratio, 0);\n\tconst useEqualWeights = rawTotal <= 0;\n\tconst total = useEqualWeights ? stops.length : rawTotal;\n\tlet cursor = 0;\n\tconst parts = stops.map((stop, index) => {\n\t\tconst ratio = useEqualWeights ? 1 : (weights[index] ?? 0);\n\t\tconst start = cursor;\n\t\tconst end =\n\t\t\tindex === stops.length - 1 ? 100 : cursor + (ratio / total) * 100;\n\t\tcursor = end;\n\t\treturn `${stop.color} ${formatPercent(start)} ${formatPercent(end)}`;\n\t});\n\n\treturn `linear-gradient(90deg, ${parts.join(\", \")})`;\n}\n\nfunction normalizeHex(hex: string): string | null {\n\tconst value = hex.trim().replace(/^#/, \"\");\n\tif (/^[\\da-f]{3}$/i.test(value)) {\n\t\treturn value\n\t\t\t.split(\"\")\n\t\t\t.map((part) => part + part)\n\t\t\t.join(\"\");\n\t}\n\tif (/^[\\da-f]{6}$/i.test(value)) {\n\t\treturn value;\n\t}\n\treturn null;\n}\n\nfunction toColorStop(stop: SwatchColorStop): { color: string; ratio?: number } {\n\treturn typeof stop === \"string\" ? { color: stop } : stop;\n}\n\nfunction getRatioWeight(ratio: number | undefined): number {\n\tif (ratio === undefined) {\n\t\treturn 1;\n\t}\n\n\treturn Number.isFinite(ratio) ? Math.max(0, ratio) : 0;\n}\n\nfunction formatPercent(value: number): string {\n\treturn `${Number.isInteger(value) ? value : Number(value.toFixed(2))}%`;\n}\n","import {\n\ttype ObjectFit,\n\tPATTERNMODE_SIZE_VALUES,\n\tPATTERNMODE_SIZES,\n} from \"@patternmode/system\";\nimport type { ComponentType, HTMLAttributes, SVGProps } from \"react\";\n\nexport const SWATCH_SIZES = [\n\t...PATTERNMODE_SIZES,\n\t\"4xl\",\n\t\"5xl\",\n\t\"6xl\",\n\t\"7xl\",\n] as const;\n\nexport const SWATCH_SIZE_VALUES = {\n\t...PATTERNMODE_SIZE_VALUES,\n\t\"4xl\": \"4.5rem\",\n\t\"5xl\": \"5rem\",\n\t\"6xl\": \"5.5rem\",\n\t\"7xl\": \"6rem\",\n} as const satisfies Record<SwatchSize, string>;\n\nexport const SWATCH_SHAPES = [\"circle\", \"pill\", \"square\"] as const;\n\nexport type SwatchSize = (typeof SWATCH_SIZES)[number];\nexport type SwatchShape = (typeof SWATCH_SHAPES)[number];\nexport type SwatchColorStop = string | { color: string; ratio?: number };\ntype SwatchIcon = ComponentType<SVGProps<SVGSVGElement>>;\n\nexport function getSwatchSizeVariableStyle(\n\tsize: SwatchSize,\n\tvariableName = \"--patternmode-swatch-size\",\n): Record<string, string> {\n\treturn {\n\t\t[variableName]: SWATCH_SIZE_VALUES[size],\n\t};\n}\n\nexport interface SwatchProps extends HTMLAttributes<HTMLElement> {\n\tbackground?: string;\n\tcolor?: string;\n\tcolors?: SwatchColorStop[];\n\ticon?: SwatchIcon;\n\tisLight?: boolean;\n\tobjectFit?: ObjectFit;\n\tobjectPosition?: string;\n\tonRemove?: () => void;\n\traised?: boolean;\n\tremoveLabel?: string;\n\tselected?: boolean;\n\tshape?: SwatchShape;\n\tshowRing?: boolean;\n\tsize?: SwatchSize;\n\tunavailable?: boolean;\n}\n","import { getObjectSizingStyle, joinClassNames } from \"@patternmode/system\";\nimport type { CSSProperties, MouseEvent } from \"react\";\n\nimport { getSwatchColorsBackground, isLightColor } from \"./SwatchColors\";\nimport { getSwatchSizeVariableStyle, type SwatchProps } from \"./SwatchTypes\";\n\nexport function Swatch({\n\t\"aria-label\": ariaLabel,\n\tbackground,\n\tchildren,\n\tclassName,\n\tcolor,\n\tcolors,\n\ticon: Icon,\n\tisLight,\n\tobjectFit,\n\tobjectPosition,\n\tonRemove,\n\traised = false,\n\tremoveLabel,\n\trole: _role,\n\tselected = false,\n\tshape = \"circle\",\n\tshowRing = true,\n\tsize = \"base\",\n\tstyle,\n\tunavailable = false,\n\t...props\n}: SwatchProps) {\n\tconst colorsBackground = getSwatchColorsBackground(colors);\n\tconst fill = background ?? colorsBackground ?? color;\n\tconst light =\n\t\tisLight ??\n\t\t(color && !background && !colorsBackground\n\t\t\t? isLightColor(color as string)\n\t\t\t: false);\n\tconst resolvedRemoveLabel =\n\t\tremoveLabel ?? (ariaLabel ? `Remove ${ariaLabel}` : \"Remove\");\n\n\tconst rootStyle = {\n\t\t...getSwatchSizeVariableStyle(size),\n\t\t\"--patternmode-swatch-fill\": fill,\n\t\t...style,\n\t} as CSSProperties;\n\tconst mediaStyle = getObjectSizingStyle({\n\t\tfit: objectFit,\n\t\tposition: objectPosition,\n\t}) as CSSProperties;\n\n\tfunction handleRemove(event: MouseEvent<HTMLButtonElement>) {\n\t\tevent.stopPropagation();\n\t\tonRemove?.();\n\t}\n\n\tconst swatchContent = (\n\t\t<>\n\t\t\t<span aria-hidden=\"true\" className=\"patternmode-swatch__fill\" />\n\t\t\t{children ? (\n\t\t\t\t<span className=\"patternmode-swatch__media\" style={mediaStyle}>\n\t\t\t\t\t{children}\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t<span aria-hidden=\"true\" className=\"patternmode-swatch__scrim\" />\n\t\t\t{selected && Icon ? (\n\t\t\t\t<span className=\"patternmode-swatch__icon\">\n\t\t\t\t\t<Icon aria-hidden=\"true\" focusable=\"false\" />\n\t\t\t\t</span>\n\t\t\t) : null}\n\t\t\t{unavailable ? (\n\t\t\t\t<span aria-hidden=\"true\" className=\"patternmode-swatch__slash\" />\n\t\t\t) : null}\n\t\t</>\n\t);\n\n\tif (onRemove) {\n\t\treturn (\n\t\t\t<fieldset\n\t\t\t\t{...props}\n\t\t\t\taria-label={ariaLabel}\n\t\t\t\tclassName={joinClassNames(\"patternmode-swatch\", className)}\n\t\t\t\tdata-raised={raised ? \"true\" : undefined}\n\t\t\t\tdata-selected={selected ? \"true\" : undefined}\n\t\t\t\tdata-shape={shape}\n\t\t\t\tdata-show-ring={showRing ? \"true\" : \"false\"}\n\t\t\t\tdata-size={size}\n\t\t\t\tdata-slot=\"swatch\"\n\t\t\t\tdata-tone={light ? \"light\" : \"dark\"}\n\t\t\t\tdata-unavailable={unavailable ? \"true\" : undefined}\n\t\t\t\tstyle={rootStyle}\n\t\t\t>\n\t\t\t\t{swatchContent}\n\t\t\t\t<button\n\t\t\t\t\taria-label={resolvedRemoveLabel}\n\t\t\t\t\tclassName=\"patternmode-swatch__remove\"\n\t\t\t\t\tonClick={handleRemove}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t>\n\t\t\t\t\t<svg aria-hidden=\"true\" fill=\"none\" viewBox=\"0 0 20 20\">\n\t\t\t\t\t\t<path d=\"M5.5 5.5l9 9M14.5 5.5l-9 9\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</button>\n\t\t\t</fieldset>\n\t\t);\n\t}\n\n\treturn (\n\t\t<span\n\t\t\t{...props}\n\t\t\taria-label={ariaLabel}\n\t\t\tclassName={joinClassNames(\"patternmode-swatch\", className)}\n\t\t\tdata-raised={raised ? \"true\" : undefined}\n\t\t\tdata-selected={selected ? \"true\" : undefined}\n\t\t\tdata-shape={shape}\n\t\t\tdata-show-ring={showRing ? \"true\" : \"false\"}\n\t\t\tdata-size={size}\n\t\t\tdata-slot=\"swatch\"\n\t\t\tdata-tone={light ? \"light\" : \"dark\"}\n\t\t\tdata-unavailable={unavailable ? \"true\" : undefined}\n\t\t\trole=\"img\"\n\t\t\tstyle={rootStyle}\n\t\t>\n\t\t\t{swatchContent}\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;;AAaA,SAAgB,qBACf,UACS;CACT,OAAO,SAAS,QACd,KAAK,YAAY,MAAM,cAAc,QAAQ,KAAK,GACnD,CACD;AACD;AAEA,SAAgB,+BACf,UACA,eACS;CACT,MAAM,QAAQ,qBAAqB,QAAQ;CAC3C,IAAI,SAAS,GACZ,OAAO;CAMR,OAAO,WAHe,SACpB,MAAM,GAAG,gBAAgB,CAAC,EAC1B,QAAQ,KAAK,YAAY,MAAM,cAAc,QAAQ,KAAK,GAAG,CAChC,IAAI,QAAS,GAAG;AAChD;AAEA,SAAgB,yBACf,UACA,eACA,YACA,UAC2B;CAC3B,MAAM,OAAO,SAAS;CACtB,MAAM,QAAQ,SAAS,gBAAgB;CACvC,IAAI,EAAE,QAAQ,QACb,OAAO;CAGR,MAAM,YAAY,cAAc,KAAK,KAAK,IAAI,cAAc,MAAM,KAAK;CACvE,MAAM,aAAa,KAAK,IAAI,GAAG,KAAK,IAAI,UAAU,YAAY,CAAC,CAAC;CAChE,MAAM,WAAW,MAChB,cAAc,KAAK,KAAK,IAAI,YAC5B,YACA,YAAY,UACb;CACA,MAAM,YAAY,YAAY;CAE9B,OAAO,SAAS,KAAK,SAAS,UAAU;EACvC,IAAI,UAAU,eACb,OAAO;GAAE,GAAG;GAAS,OAAO,WAAW,QAAQ;EAAE;EAElD,IAAI,UAAU,gBAAgB,GAC7B,OAAO;GAAE,GAAG;GAAS,OAAO,WAAW,SAAS;EAAE;EAEnD,OAAO;CACR,CAAC;AACF;AAEA,SAAgB,0BACf,UACA,WAC2B;CAC3B,IAAI,SAAS,UAAU,GACtB,OAAO;CAGR,MAAM,UAAU,SAAS,MAAM,YAAY,QAAQ,OAAO,SAAS;CACnE,IAAI,CAAC,SACJ,OAAO;CAGR,MAAM,YAAY,SAAS,QAAQ,YAAY,QAAQ,OAAO,SAAS;CACvE,MAAM,eAAe,cAAc,QAAQ,KAAK;CAChD,MAAM,iBAAiB,qBAAqB,SAAS;CACrD,IAAI,kBAAkB,GAAG;EACxB,MAAM,aAAa,eAAe,UAAU;EAC5C,OAAO,UAAU,KAAK,aAAa;GAClC,GAAG;GACH,OAAO,WAAW,UAAU;EAC7B,EAAE;CACH;CAEA,IAAI,gBAAgB;CACpB,MAAM,gBAAgB,qBAAqB,QAAQ;CACnD,OAAO,UAAU,KAAK,SAAS,UAAU;EACxC,IAAI,UAAU,UAAU,SAAS,GAChC,OAAO;GAAE,GAAG;GAAS,OAAO,WAAW,gBAAgB,aAAa;EAAE;EAGvE,MAAM,YAAY,WACjB,cAAc,QAAQ,KAAK,IACzB,eAAe,cAAc,QAAQ,KAAK,IAAK,cAClD;EACA,iBAAiB;EACjB,OAAO;GAAE,GAAG;GAAS,OAAO;EAAU;CACvC,CAAC;AACF;AAEA,SAAgB,0BACf,UACA,WACA,QAC2B;CAC3B,OAAO,SAAS,KAAK,YACpB,QAAQ,OAAO,YAAY;EAAE,GAAG;EAAS,GAAG;CAAO,IAAI,OACxD;AACD;AAEA,SAAS,cAAc,OAAuB;CAC7C,OAAO,OAAO,SAAS,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI;AACtD;AAEA,SAAS,MAAM,OAAe,KAAa,KAAqB;CAC/D,OAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC1C;AAEA,SAAS,WAAW,OAAuB;CAC1C,OAAO,OAAO,MAAM,QAAQ,CAAC,CAAC;AAC/B;;;ACpGA,SAAgB,oBAAoB,EACnC,cAAc,WACd,gBAAgB,YAChB,WACA,aAAa,cACb,aAAa,GACb,SAAS,YACT,UACA,GAAG,SACyB;CAC5B,MAAM,QAAQ,4BAA4B,UAAU,UAAU;CAC9D,MAAM,kBACL,aACA,sCACC,UACA,YACA,YACA,KACD;CAED,OACC,qBAAC,OAAD;EACC,GAAI;EACJ,cAAY;EACZ,WAAW,eAAe,oCAAoC,SAAS;EACvE,aAAU;EACV,MAAK;YALN;GAOC,oBAAC,OAAD;IAAK,WAAU;cACd,oBAAC,sBAAD;KACa;KACF;KACH;IACP,CAAA;GACG,CAAA;GACJ,WAAW,aACX,oBAAC,2BAAD;IACa;IACA;IACF;IACH;GACP,CAAA,IACE;GACH,WAAW,YACX,oBAAC,2BAAD;IACgB;IACH;IACA;IACL;GACP,CAAA,IACE;EACA;;AAEP;AAEA,SAAgB,gBAAgB,EAC/B,cAAc,WACd,WACA,WAAW,GACX,UACA,UACA,OAAO,GACP,GAAG,SACqB;CACxB,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,uBAAuB,OAAwC,IAAI;CACzE,MAAM,QAAQ,qBAAqB,QAAQ;CAE3C,SAAS,aACR,eACA,YACA,iBAAiB,UAChB;EACD,WACC,yBACC,gBACA,eACA,YACA,QACD,CACD;CACD;CAEA,SAAS,kBAAkB;EAC1B,qBAAqB,UAAU;CAChC;CAEA,SAAS,WAAW,eAAuB,MAAe;EACzD,MAAM,iBAAiB,qBAAqB,WAAW;EACvD,MAAM,cAAc,qBAAqB,cAAc;EACvD,MAAM,aAAa,SAAS,SAAS,sBAAsB,EAAE,SAAS;EACtE,IAAI,EAAE,aAAa,KAAK,cAAc,IACrC;EAGD,aACC,eACC,KAAK,OAAO,IAAI,aAAc,aAC/B,cACD;CACD;CAEA,SAAS,cAAc,eAAuB,MAAe;EAC5D,WAAW,eAAe,IAAI;EAC9B,qBAAqB,UAAU;CAChC;CAEA,SAAS,cACR,OACA,eACC;EACD,IAAI,MAAM,QAAQ,aAAa;GAC9B,MAAM,eAAe;GACrB,aAAa,eAAe,CAAC,IAAI;EAClC;EACA,IAAI,MAAM,QAAQ,cAAc;GAC/B,MAAM,eAAe;GACrB,aAAa,eAAe,IAAI;EACjC;CACD;CAEA,OACC,qBAAC,YAAD;EACC,GAAI;EACJ,cAAY;EACZ,WAAW,eAAe,gCAAgC,SAAS;EACnE,aAAU;YAJX,CAMC,qBAAC,OAAD;GAAK,WAAU;GAAsC,KAAK;aAA1D,CACC,oBAAC,sBAAD;IAAgC;IAAiB;GAAQ,CAAA,GACxD,SAAS,MAAM,GAAG,EAAE,EAAE,KAAK,SAAS,kBAAkB;IACtD,MAAM,cAAc,SAAS,gBAAgB;IAC7C,MAAM,kBAAkB,+BACvB,UACA,aACD;IAIA,OACC,oBAAC,uBAAD;KACC,cAAY,UALU,QAAQ,SAAS,QAAQ,GAAG,OACnD,aAAa,SAAS,aAAa,GACnC;KAIkB;KAEjB,SAAS,SAAS,WAAW,eAAe,IAAI;KAChD,YAAY,SAAS,cAAc,eAAe,IAAI;KACtD,aAAa;KACb,YAAY,UAAU,cAAc,OAAO,aAAa;IACxD,GALK,GAAG,QAAQ,GAAG,GAAG,aAAa,MAAM,OAKzC;GAEH,CAAC,CACG;MACL,oBAAC,2BAAD;GAAqC;GAAiB;EAAQ,CAAA,CACrD;;AAEZ;AAQA,SAAS,qBAAqB,EAC7B,aAAa,GACb,UACA,SAC6B;CAC7B,OACC,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,SAAS,KAAK,YACd,oBAAC,OAAD;GACC,eAAY;GACZ,WAAU;GAEV,OACC;IACC,4CAA4C,QAAQ;IACpD,OACC,QAAQ,IACL,GAAI,+BAA+B,QAAQ,KAAK,IAAI,QAAS,IAAI,KACjE;GACL;EAED,GAVK,QAAQ,EAUb,CACD,GACA,aAAa,IACb,oBAAC,OAAD;GACC,eAAY;GACZ,WAAU;GACV,OAAO,EACN,OACC,QAAQ,IACL,GAAI,+BAA+B,UAAU,IAAI,QAAS,IAAI,KAC9D,KACL;EACA,CAAA,IACE,IACA;;AAEP;AASA,SAAS,0BAA0B,EAClC,YACA,aAAa,GACb,UACA,SACkC;CAClC,OACC,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,SAAS,KAAK,YACd,qBAAC,QAAD,EAAA,UAAA;GACC,oBAAC,QAAD;IACC,eAAY;IACZ,WAAU;IACV,OACC,EACC,4CAA4C,QAAQ,MACrD;GAED,CAAA;GACA,QAAQ,SAAS,QAAQ;GAAI;GAC7B,iCAAiC,QAAQ,OAAO,KAAK;GAAE;EACnD,EAAA,GAZK,QAAQ,EAYb,CACN,GACA,aAAa,KAAK,aAClB,qBAAC,QAAD,EAAA,UAAA;GACC,oBAAC,QAAD;IACC,eAAY;IACZ,WAAU;GACV,CAAA;GACA;GAAW;GAAE,iCAAiC,YAAY,KAAK;GAAE;EAC7D,EAAA,CAAA,IACH,IACA;;AAEP;AASA,SAAS,0BAA0B,EAClC,eACA,YACA,YACA,SACkC;CAClC,MAAM,kBAAkB,iCAAiC,YAAY,KAAK;CAE1E,OACC,qBAAC,OAAD;EAAK,WAAU;YAAf,CACC,qBAAC,QAAD,EAAA,UAAA;GACE,KAAK,IAAI,GAAG,MAAM,eAAe;GAAE;GAAG;EAClC,EAAA,CAAA,GACL,aAAa,IACb,qBAAC,QAAD,EAAA,UAAA;GACE;GAAgB;GAAG;EACf,EAAA,CAAA,IACH,IACA;;AAEP;AAEA,SAAS,4BACR,UACA,YACS;CACT,OACC,qBAAqB,QAAQ,IAAI,+BAA+B,UAAU;AAE5E;AAEA,SAAS,sCACR,UACA,YACA,YACA,OACS;CACT,MAAM,gBAAgB,SAAS,KAC7B,YACA,GAAG,QAAQ,SAAS,QAAQ,GAAG,GAAG,iCACjC,QAAQ,OACR,KACD,EAAE,EACJ;CACA,IAAI,aAAa,GAChB,cAAc,KACb,GAAG,WAAW,GAAG,iCAAiC,YAAY,KAAK,EAAE,EACtE;CAGD,OAAO,cAAc,KAAK,IAAI;AAC/B;AAEA,SAAS,iCACR,OACA,OACS;CACT,IAAI,EAAE,QAAQ,KAAK,OAAO,SAAS,KAAK,IACvC,OAAO;CAGR,OAAO,KAAK,MAAO,KAAK,IAAI,GAAG,KAAK,IAAI,QAAS,GAAG;AACrD;AAEA,SAAS,+BAA+B,OAAuB;CAC9D,OAAO,OAAO,SAAS,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI;AACtD;AAWA,SAAS,sBAAsB,EAC9B,cAAc,WACd,iBACA,QACA,WACA,aACA,aAC8B;CAC9B,OACC,oBAAC,OAAO,QAAR;EACC,cAAY;EACZ,WAAU;EACV,MAAK;EACL,aAAa;EACb,cAAc;EACd,kBAAA;EACA,SAAS,QAAQ,SAAS,OAAO,IAAI;EACrC,YAAY,QAAQ,SAAS,UAAU,IAAI;EAC9B;EACF;EACX,OAAO,EAAE,MAAM,QAAQ,gBAAgB,eAAe;EACtD,yBAAyB;EACzB,MAAK;CACL,CAAA;AAEH;;;AC7XA,SAAgB,aAAa,OAAwB;CACpD,MAAM,aAAa,aAAa,KAAK;CACrC,IAAI,CAAC,YACJ,OAAO;CAGR,MAAM,MAAM,OAAO,SAAS,WAAW,MAAM,GAAG,CAAC,GAAG,EAAE;CACtD,MAAM,QAAQ,OAAO,SAAS,WAAW,MAAM,GAAG,CAAC,GAAG,EAAE;CACxD,MAAM,OAAO,OAAO,SAAS,WAAW,MAAM,GAAG,CAAC,GAAG,EAAE;CAEvD,QADmB,OAAQ,MAAM,OAAQ,QAAQ,OAAQ,QAAQ,MAC9C;AACpB;AAEA,SAAgB,0BACf,QACqB;CACrB,IAAI,CAAC,UAAU,OAAO,WAAW,GAChC;CAGD,IAAI,OAAO,WAAW,GACrB,OAAO,YAAY,OAAO,EAAqB,EAAE;CAGlD,MAAM,QAAQ,OAAO,IAAI,WAAW;CACpC,MAAM,UAAU,MAAM,KAAK,SAAS,eAAe,KAAK,KAAK,CAAC;CAC9D,MAAM,WAAW,QAAQ,QAAQ,KAAK,UAAU,MAAM,OAAO,CAAC;CAC9D,MAAM,kBAAkB,YAAY;CACpC,MAAM,QAAQ,kBAAkB,MAAM,SAAS;CAC/C,IAAI,SAAS;CAUb,OAAO,0BATO,MAAM,KAAK,MAAM,UAAU;EACxC,MAAM,QAAQ,kBAAkB,IAAK,QAAQ,UAAU;EACvD,MAAM,QAAQ;EACd,MAAM,MACL,UAAU,MAAM,SAAS,IAAI,MAAM,SAAU,QAAQ,QAAS;EAC/D,SAAS;EACT,OAAO,GAAG,KAAK,MAAM,GAAG,cAAc,KAAK,EAAE,GAAG,cAAc,GAAG;CAClE,CAEqC,EAAE,KAAK,IAAI,EAAE;AACnD;AAEA,SAAS,aAAa,KAA4B;CACjD,MAAM,QAAQ,IAAI,KAAK,EAAE,QAAQ,MAAM,EAAE;CACzC,IAAI,gBAAgB,KAAK,KAAK,GAC7B,OAAO,MACL,MAAM,EAAE,EACR,KAAK,SAAS,OAAO,IAAI,EACzB,KAAK,EAAE;CAEV,IAAI,gBAAgB,KAAK,KAAK,GAC7B,OAAO;CAER,OAAO;AACR;AAEA,SAAS,YAAY,MAA0D;CAC9E,OAAO,OAAO,SAAS,WAAW,EAAE,OAAO,KAAK,IAAI;AACrD;AAEA,SAAS,eAAe,OAAmC;CAC1D,IAAI,UAAU,KAAA,GACb,OAAO;CAGR,OAAO,OAAO,SAAS,KAAK,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI;AACtD;AAEA,SAAS,cAAc,OAAuB;CAC7C,OAAO,GAAG,OAAO,UAAU,KAAK,IAAI,QAAQ,OAAO,MAAM,QAAQ,CAAC,CAAC,EAAE;AACtE;;;ACjEA,MAAa,eAAe;CAC3B,GAAG;CACH;CACA;CACA;CACA;AACD;AAEA,MAAa,qBAAqB;CACjC,GAAG;CACH,OAAO;CACP,OAAO;CACP,OAAO;CACP,OAAO;AACR;AAEA,MAAa,gBAAgB;CAAC;CAAU;CAAQ;AAAQ;AAOxD,SAAgB,2BACf,MACA,eAAe,6BACU;CACzB,OAAO,GACL,eAAe,mBAAmB,MACpC;AACD;;;AC/BA,SAAgB,OAAO,EACtB,cAAc,WACd,YACA,UACA,WACA,OACA,QACA,MAAM,MACN,SACA,WACA,gBACA,UACA,SAAS,OACT,aACA,MAAM,OACN,WAAW,OACX,QAAQ,UACR,WAAW,MACX,OAAO,QACP,OACA,cAAc,OACd,GAAG,SACY;CACf,MAAM,mBAAmB,0BAA0B,MAAM;CACzD,MAAM,OAAO,cAAc,oBAAoB;CAC/C,MAAM,QACL,YACC,SAAS,CAAC,cAAc,CAAC,mBACvB,aAAa,KAAe,IAC5B;CACJ,MAAM,sBACL,gBAAgB,YAAY,UAAU,cAAc;CAErD,MAAM,YAAY;EACjB,GAAG,2BAA2B,IAAI;EAClC,6BAA6B;EAC7B,GAAG;CACJ;CACA,MAAM,aAAa,qBAAqB;EACvC,KAAK;EACL,UAAU;CACX,CAAC;CAED,SAAS,aAAa,OAAsC;EAC3D,MAAM,gBAAgB;EACtB,WAAW;CACZ;CAEA,MAAM,gBACL,qBAAA,UAAA,EAAA,UAAA;EACC,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;EAA4B,CAAA;EAC9D,WACA,oBAAC,QAAD;GAAM,WAAU;GAA4B,OAAO;GACjD;EACI,CAAA,IACH;EACJ,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;EAA6B,CAAA;EAC/D,YAAY,OACZ,oBAAC,QAAD;GAAM,WAAU;aACf,oBAAC,MAAD;IAAM,eAAY;IAAO,WAAU;GAAS,CAAA;EACvC,CAAA,IACH;EACH,cACA,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;EAA6B,CAAA,IAC7D;CACH,EAAA,CAAA;CAGH,IAAI,UACH,OACC,qBAAC,YAAD;EACC,GAAI;EACJ,cAAY;EACZ,WAAW,eAAe,sBAAsB,SAAS;EACzD,eAAa,SAAS,SAAS,KAAA;EAC/B,iBAAe,WAAW,SAAS,KAAA;EACnC,cAAY;EACZ,kBAAgB,WAAW,SAAS;EACpC,aAAW;EACX,aAAU;EACV,aAAW,QAAQ,UAAU;EAC7B,oBAAkB,cAAc,SAAS,KAAA;EACzC,OAAO;YAZR,CAcE,eACD,oBAAC,UAAD;GACC,cAAY;GACZ,WAAU;GACV,SAAS;GACT,MAAK;aAEL,oBAAC,OAAD;IAAK,eAAY;IAAO,MAAK;IAAO,SAAQ;cAC3C,oBAAC,QAAD,EAAM,GAAE,6BAA8B,CAAA;GAClC,CAAA;EACE,CAAA,CACC;;CAIZ,OACC,oBAAC,QAAD;EACC,GAAI;EACJ,cAAY;EACZ,WAAW,eAAe,sBAAsB,SAAS;EACzD,eAAa,SAAS,SAAS,KAAA;EAC/B,iBAAe,WAAW,SAAS,KAAA;EACnC,cAAY;EACZ,kBAAgB,WAAW,SAAS;EACpC,aAAW;EACX,aAAU;EACV,aAAW,QAAQ,UAAU;EAC7B,oBAAkB,cAAc,SAAS,KAAA;EACzC,MAAK;EACL,OAAO;YAEN;CACI,CAAA;AAER"}
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.patternmode-swatch{--patternmode-swatch-size:2rem;--patternmode-swatch-fill:#e3e1dc;--patternmode-swatch-radius:999px;aspect-ratio:1;border-radius:var(--patternmode-swatch-radius);color:#fff;height:var(--patternmode-swatch-size);vertical-align:middle;min-inline-size:0;width:var(--patternmode-swatch-size);border:0;justify-content:center;align-items:center;margin:0;padding:0;transition:box-shadow .14s,opacity .14s,transform .14s;display:inline-flex;position:relative;box-shadow:0 1px 2px #1118271a}.patternmode-swatch[data-tone=light]{color:#1d1d1b}.patternmode-swatch[data-shape=pill]{--patternmode-swatch-radius:999px;aspect-ratio:auto;width:calc(var(--patternmode-swatch-size) * 3)}.patternmode-swatch[data-shape=square]{--patternmode-swatch-radius:7px}.patternmode-swatch[data-raised=true]{box-shadow:0 1px 2px #1118271a, 0 0 0 2px var(--surface,#fff)}.patternmode-swatch[data-selected=true][data-show-ring=true]{box-shadow:0 1px 2px #1118271a, 0 0 0 2px var(--surface,#fff), 0 0 0 4px var(--accent,#315c4b)}.patternmode-swatch[data-unavailable=true]{opacity:.5}.patternmode-swatch__fill,.patternmode-swatch__media,.patternmode-swatch__scrim{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.patternmode-swatch__fill{background:var(--patternmode-swatch-fill)}.patternmode-swatch__media>*{object-fit:inherit;object-position:inherit;width:100%;height:100%;display:block}.patternmode-swatch__scrim{pointer-events:none;background:linear-gradient(#0000 0%,#0003 100%)}.patternmode-swatch__icon{justify-content:center;align-items:center;display:inline-flex;position:absolute;inset:0}.patternmode-swatch__icon svg{stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.4px;width:48%;height:48%;display:block}.patternmode-swatch__slash{background:currentColor;border-radius:999px;width:112%;height:2px;position:absolute;transform:rotate(-45deg)}.patternmode-swatch__remove{color:var(--surface,#fff);cursor:pointer;opacity:0;background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;width:2.75rem;height:2.75rem;padding:0;transition:opacity .14s;display:inline-flex;position:absolute;top:-1.1rem;right:-1.1rem}.patternmode-swatch__remove:before{background:var(--ink,#1d1d1b);border-radius:inherit;content:"";width:1.25rem;height:1.25rem;transition:background .14s;position:absolute}.patternmode-swatch__remove:focus-visible{opacity:1}@media (hover:hover){.patternmode-swatch:hover .patternmode-swatch__remove{opacity:1}.patternmode-swatch__remove:hover:before{background:var(--accent,#315c4b)}}.patternmode-swatch__remove:focus-visible{outline:2px solid var(--accent,#315c4b);outline-offset:2px}.patternmode-swatch__remove svg{stroke:currentColor;stroke-linecap:round;stroke-width:2px;z-index:1;width:.8rem;height:.8rem}@media (prefers-reduced-motion:reduce){.patternmode-swatch,.patternmode-swatch__remove,.patternmode-swatch__remove:before{transition:none}}.patternmode-distribution-bar{min-inline-size:0;border:0;gap:10px;width:100%;margin:0;padding:0;display:grid}.patternmode-distribution-bar__track{
|
|
1
|
+
@layer components{.patternmode-swatch{--patternmode-swatch-size:2rem;--patternmode-swatch-fill:#e3e1dc;--patternmode-swatch-radius:999px;aspect-ratio:1;border-radius:var(--patternmode-swatch-radius);color:#fff;height:var(--patternmode-swatch-size);vertical-align:middle;min-inline-size:0;width:var(--patternmode-swatch-size);border:0;justify-content:center;align-items:center;margin:0;padding:0;transition:box-shadow .14s,opacity .14s,transform .14s;display:inline-flex;position:relative;box-shadow:0 1px 2px #1118271a}.patternmode-swatch[data-tone=light]{color:#1d1d1b}.patternmode-swatch[data-shape=pill]{--patternmode-swatch-radius:999px;aspect-ratio:auto;width:calc(var(--patternmode-swatch-size) * 3)}.patternmode-swatch[data-shape=square]{--patternmode-swatch-radius:7px}.patternmode-swatch[data-raised=true]{box-shadow:0 1px 2px #1118271a, 0 0 0 2px var(--surface,#fff)}.patternmode-swatch[data-selected=true][data-show-ring=true]{box-shadow:0 1px 2px #1118271a, 0 0 0 2px var(--surface,#fff), 0 0 0 4px var(--accent,#315c4b)}.patternmode-swatch[data-unavailable=true]{opacity:.5}.patternmode-swatch__fill,.patternmode-swatch__media,.patternmode-swatch__scrim{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.patternmode-swatch__fill{background:var(--patternmode-swatch-fill)}.patternmode-swatch__media>*{object-fit:inherit;object-position:inherit;width:100%;height:100%;display:block}.patternmode-swatch__scrim{pointer-events:none;background:linear-gradient(#0000 0%,#0003 100%)}.patternmode-swatch__icon{justify-content:center;align-items:center;display:inline-flex;position:absolute;inset:0}.patternmode-swatch__icon svg{stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.4px;width:48%;height:48%;display:block}.patternmode-swatch__slash{background:currentColor;border-radius:999px;width:112%;height:2px;position:absolute;transform:rotate(-45deg)}.patternmode-swatch__remove{color:var(--surface,#fff);cursor:pointer;opacity:0;background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;width:2.75rem;height:2.75rem;padding:0;transition:opacity .14s;display:inline-flex;position:absolute;top:-1.1rem;right:-1.1rem}.patternmode-swatch__remove:before{background:var(--ink,#1d1d1b);border-radius:inherit;content:"";width:1.25rem;height:1.25rem;transition:background .14s;position:absolute}.patternmode-swatch__remove:focus-visible{opacity:1}@media (hover:hover){.patternmode-swatch:hover .patternmode-swatch__remove{opacity:1}.patternmode-swatch__remove:hover:before{background:var(--accent,#315c4b)}}.patternmode-swatch__remove:focus-visible{outline:2px solid var(--accent,#315c4b);outline-offset:2px}.patternmode-swatch__remove svg{stroke:currentColor;stroke-linecap:round;stroke-width:2px;z-index:1;width:.8rem;height:.8rem}@media (prefers-reduced-motion:reduce){.patternmode-swatch,.patternmode-swatch__remove,.patternmode-swatch__remove:before{transition:none}}.patternmode-distribution-bar,.patternmode-distribution-display{min-inline-size:0;border:0;gap:10px;width:100%;margin:0;padding:0;display:grid}.patternmode-distribution-bar__track{width:100%;height:40px;position:relative}.patternmode-distribution-bar .patternmode-distribution-bar__track{touch-action:none}.patternmode-distribution-bar__segments{border:1px solid var(--border-soft,#1118271f);border-radius:999px;width:100%;height:100%;display:flex;overflow:hidden}.patternmode-distribution-bar__segment{background:var(--patternmode-distribution-segment-color);min-width:0;height:100%}.patternmode-distribution-bar__segment--empty{background-color:var(--surface-soft,#f7f5f0);background-image:repeating-linear-gradient(45deg, transparent, transparent 3px, var(--border-soft,#1118271f) 3px, var(--border-soft,#1118271f) 4px)}.patternmode-distribution-bar__segment+.patternmode-distribution-bar__segment{box-shadow:inset 1px 0 #fff9}.patternmode-distribution-bar__handle{cursor:ew-resize;z-index:1;background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;width:2.75rem;height:2.75rem;padding:0;display:inline-flex;position:absolute;top:calc(50% - 1.375rem)}.patternmode-distribution-bar__handle:before{background:var(--surface,#fff);content:"";border-radius:999px;width:.62rem;height:.62rem;transition:box-shadow .12s,transform .12s;box-shadow:0 1px 4px #1118272e,0 0 0 1px #11182733}.patternmode-distribution-bar__handle:focus-visible{outline:2px solid var(--accent,#315c4b);outline-offset:-4px}@media (hover:hover){.patternmode-distribution-bar__handle:hover:before{transform:scale(1.15);box-shadow:0 5px 14px #1118274d,0 0 0 1px #11182738}}.patternmode-distribution-bar__legend{flex-wrap:wrap;gap:8px 14px;display:flex}.patternmode-distribution-bar__legend>span{color:var(--muted,#595853);align-items:center;gap:6px;font-size:.68rem;font-weight:500;display:inline-flex}.patternmode-distribution-bar__swatch{background:var(--patternmode-distribution-segment-color);border-radius:999px;width:.55rem;height:.55rem;display:inline-flex}.patternmode-distribution-bar__swatch--empty{background-color:var(--surface-soft,#f7f5f0);background-image:repeating-linear-gradient(45deg, transparent, transparent 2px, var(--border-soft,#1118271f) 2px, var(--border-soft,#1118271f) 3px);box-shadow:inset 0 0 0 1px var(--border-soft,#1118271f)}@media (prefers-reduced-motion:reduce){.patternmode-distribution-bar__handle:before{transition:none}}}
|
package/dist/swatch.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { DistributionBar, type DistributionBarProps, type DistributionBarSegment, type DistributionBarSegmentUpdate, getDistributionBoundaryPercent, getDistributionTotal, moveDistributionBoundary, removeDistributionSegment, updateDistributionSegment, } from "./DistributionBar";
|
|
1
|
+
export { DistributionBar, type DistributionBarProps, type DistributionBarSegment, type DistributionBarSegmentUpdate, DistributionDisplay, type DistributionDisplayProps, getDistributionBoundaryPercent, getDistributionTotal, moveDistributionBoundary, removeDistributionSegment, updateDistributionSegment, } from "./DistributionBar";
|
|
2
2
|
export { getSwatchColorsBackground } from "./Swatch/SwatchColors";
|
|
3
3
|
export { Swatch } from "./Swatch/SwatchRoot";
|
|
4
4
|
export { getSwatchSizeVariableStyle, SWATCH_SHAPES, SWATCH_SIZE_VALUES, SWATCH_SIZES, type SwatchColorStop, type SwatchProps, type SwatchShape, type SwatchSize, } from "./Swatch/SwatchTypes";
|
package/dist/swatch.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"swatch.d.ts","sourceRoot":"","sources":["../src/swatch.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,KAAK,4BAA4B,EACjC,8BAA8B,EAC9B,oBAAoB,EACpB,wBAAwB,EACxB,yBAAyB,EACzB,yBAAyB,GACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EACN,0BAA0B,EAC1B,aAAa,EACb,kBAAkB,EAClB,YAAY,EACZ,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,UAAU,GACf,MAAM,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"swatch.d.ts","sourceRoot":"","sources":["../src/swatch.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,KAAK,4BAA4B,EACjC,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,8BAA8B,EAC9B,oBAAoB,EACpB,wBAAwB,EACxB,yBAAyB,EACzB,yBAAyB,GACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EACN,0BAA0B,EAC1B,aAAa,EACb,kBAAkB,EAClB,YAAY,EACZ,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,UAAU,GACf,MAAM,sBAAsB,CAAC"}
|