@patternmode/swatch 0.9.2 → 0.10.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.
Files changed (34) hide show
  1. package/README.md +38 -0
  2. package/dist/DistributionBar/distribution-bar-math.d.ts +29 -0
  3. package/dist/DistributionBar/distribution-bar-math.d.ts.map +1 -0
  4. package/dist/DistributionBar/distribution-bar-root.d.ts +56 -0
  5. package/dist/DistributionBar/distribution-bar-root.d.ts.map +1 -0
  6. package/dist/DistributionBar/index.d.ts +2 -2
  7. package/dist/DistributionBar/index.d.ts.map +1 -1
  8. package/dist/Swatch/swatch-atmosphere.d.ts +9 -0
  9. package/dist/Swatch/swatch-atmosphere.d.ts.map +1 -0
  10. package/dist/Swatch/swatch-colors.d.ts +4 -0
  11. package/dist/Swatch/swatch-colors.d.ts.map +1 -0
  12. package/dist/Swatch/swatch-root.d.ts +3 -0
  13. package/dist/Swatch/swatch-root.d.ts.map +1 -0
  14. package/dist/Swatch/swatch-types.d.ts +158 -0
  15. package/dist/Swatch/swatch-types.d.ts.map +1 -0
  16. package/dist/index.d.ts +1 -1
  17. package/dist/index.d.ts.map +1 -1
  18. package/dist/index.mjs +267 -239
  19. package/dist/index.mjs.map +1 -1
  20. package/dist/swatch.d.ts +4 -4
  21. package/dist/swatch.d.ts.map +1 -1
  22. package/package.json +4 -3
  23. package/dist/DistributionBar/DistributionBarMath.d.ts +0 -15
  24. package/dist/DistributionBar/DistributionBarMath.d.ts.map +0 -1
  25. package/dist/DistributionBar/DistributionBarRoot.d.ts +0 -28
  26. package/dist/DistributionBar/DistributionBarRoot.d.ts.map +0 -1
  27. package/dist/Swatch/SwatchAtmosphere.d.ts +0 -15
  28. package/dist/Swatch/SwatchAtmosphere.d.ts.map +0 -1
  29. package/dist/Swatch/SwatchColors.d.ts +0 -4
  30. package/dist/Swatch/SwatchColors.d.ts.map +0 -1
  31. package/dist/Swatch/SwatchRoot.d.ts +0 -3
  32. package/dist/Swatch/SwatchRoot.d.ts.map +0 -1
  33. package/dist/Swatch/SwatchTypes.d.ts +0 -69
  34. package/dist/Swatch/SwatchTypes.d.ts.map +0 -1
package/README.md CHANGED
@@ -33,6 +33,44 @@ export function Example() {
33
33
 
34
34
  Use `color` for a solid fill, `background` for a CSS background value, or `colors` for weighted palette stops. `Swatch` remains representation-only: compose selection around it, or pass `onRemove` when the swatch should expose its built-in remove request affordance.
35
35
 
36
+ ## Rendering as a child element
37
+
38
+ By default `Swatch` renders its own `<figure>` wrapper. Pass `asChild` to render
39
+ the swatch styling _through_ a single child element instead — the Radix Slot
40
+ pattern. Swatch merges its `className`, `style` (including the
41
+ `--patternmode-swatch-size` / `--patternmode-swatch-fill` variables), `data-*`
42
+ attributes, and remaining props onto the child, and injects the fill / scrim
43
+ layers inside it. The child's own props win on conflict, and event handlers are
44
+ composed.
45
+
46
+ Use this when the swatch must _be_ an interactive element, such as a `<button>`
47
+ cell in a color matrix:
48
+
49
+ ```tsx
50
+ <Swatch asChild color="#315c4b" flat shape="block" size="lg">
51
+ <button onClick={() => select("#315c4b")} type="button" />
52
+ </Swatch>
53
+ ```
54
+
55
+ `asChild` requires exactly one React element child and does not support
56
+ `onRemove` (its remove affordance cannot be composed into an arbitrary slotted
57
+ element). Wrap a default Swatch when a remove control is required.
58
+
59
+ ## Optimized images
60
+
61
+ Swatch can frame media via `children`, but it does not optimize images itself.
62
+ If your app uses Next.js, pass your own `next/image` `Image` component as the
63
+ child:
64
+
65
+ ```tsx
66
+ import { Swatch } from "@patternmode/swatch";
67
+ import Image from "next/image";
68
+
69
+ <Swatch aria-label="Oak veneer" objectFit="cover" shape="square" size="4xl">
70
+ <Image alt="" fill sizes="4.5rem" src="/finishes/oak.jpg" />
71
+ </Swatch>;
72
+ ```
73
+
36
74
  Use `DistributionBar` as a sibling primitive when a weighted visual distribution should be edited with draggable boundary handles.
37
75
 
38
76
  Distribution segment values are weights, not persisted percentages. The bar renders segment widths proportionally and its legend displays derived percentages.
@@ -0,0 +1,29 @@
1
+ /** Weighted segment used by DistributionBar and DistributionDisplay. */
2
+ export interface DistributionBarSegment {
3
+ color: string;
4
+ id: string;
5
+ label?: string;
6
+ /** Relative weight, not a persisted percentage. Invalid or negative values render as 0. */
7
+ value: number;
8
+ }
9
+ /** Segment metadata update; weight changes happen through boundary movement. */
10
+ export type DistributionBarSegmentUpdate = Partial<Omit<DistributionBarSegment, "value">> & {
11
+ value?: never;
12
+ };
13
+ /** Sums sanitized segment weights, treating invalid or negative values as 0. */
14
+ export declare const getDistributionTotal: (segments: DistributionBarSegment[]) => number;
15
+ /** Returns the percentage position of the boundary after `boundaryIndex`. */
16
+ export declare const getDistributionBoundaryPercent: (segments: DistributionBarSegment[], boundaryIndex: number) => number;
17
+ /**
18
+ * Moves the boundary between two adjacent segments while preserving their sum.
19
+ *
20
+ * `deltaValue` is applied to the left segment and subtracted from the right
21
+ * segment. `minValue` prevents either side of the pair from collapsing below a
22
+ * caller-defined minimum.
23
+ */
24
+ export declare const moveDistributionBoundary: (segments: DistributionBarSegment[], boundaryIndex: number, deltaValue: number, minValue: number) => DistributionBarSegment[];
25
+ /** Removes a segment and redistributes its weight proportionally to the rest. */
26
+ export declare const removeDistributionSegment: (segments: DistributionBarSegment[], segmentId: string) => DistributionBarSegment[];
27
+ /** Updates non-weight segment metadata such as label or color. */
28
+ export declare const updateDistributionSegment: (segments: DistributionBarSegment[], segmentId: string, update: DistributionBarSegmentUpdate) => DistributionBarSegment[];
29
+ //# sourceMappingURL=distribution-bar-math.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"distribution-bar-math.d.ts","sourceRoot":"","sources":["../../src/DistributionBar/distribution-bar-math.ts"],"names":[],"mappings":"AAAA,wEAAwE;AACxE,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2FAA2F;IAC3F,KAAK,EAAE,MAAM,CAAC;CACf;AAED,gFAAgF;AAChF,MAAM,MAAM,4BAA4B,GAAG,OAAO,CAAC,IAAI,CAAC,sBAAsB,EAAE,OAAO,CAAC,CAAC,GAAG;IAC1F,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AASF,gFAAgF;AAChF,eAAO,MAAM,oBAAoB,GAAI,UAAU,sBAAsB,EAAE,KAAG,MACA,CAAC;AAE3E,6EAA6E;AAC7E,eAAO,MAAM,8BAA8B,GACzC,UAAU,sBAAsB,EAAE,EAClC,eAAe,MAAM,KACpB,MAUF,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,GACnC,UAAU,sBAAsB,EAAE,EAClC,eAAe,MAAM,EACrB,YAAY,MAAM,EAClB,UAAU,MAAM,KACf,sBAAsB,EAyBxB,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,yBAAyB,GACpC,UAAU,sBAAsB,EAAE,EAClC,WAAW,MAAM,KAChB,sBAAsB,EAkCxB,CAAC;AAEF,kEAAkE;AAClE,eAAO,MAAM,yBAAyB,GACpC,UAAU,sBAAsB,EAAE,EAClC,WAAW,MAAM,EACjB,QAAQ,4BAA4B,KACnC,sBAAsB,EACoE,CAAC"}
@@ -0,0 +1,56 @@
1
+ import type { HTMLAttributes } from "react";
2
+ import type { DistributionBarSegment } from "./distribution-bar-math";
3
+ export interface DistributionDisplayProps extends Omit<HTMLAttributes<HTMLDivElement>, "role" | "onSelect"> {
4
+ /** Label used in summary legends for assigned segment weight. */
5
+ assignedLabel?: string;
6
+ /** Label used when `emptyValue` contributes unassigned weight. */
7
+ emptyLabel?: string;
8
+ /**
9
+ * Extra unassigned weight included in derived percentage calculations.
10
+ *
11
+ * Default `0`.
12
+ */
13
+ emptyValue?: number;
14
+ /**
15
+ * Legend style for the read-only display.
16
+ *
17
+ * Default `"segments"`.
18
+ */
19
+ legend?: "segments" | "summary" | false;
20
+ /**
21
+ * When provided, each segment renders as a button and selecting one
22
+ * invokes this callback. Pair with `selectedSegmentId` to mark a segment
23
+ * as selected (renders a ring). Read-only by default.
24
+ */
25
+ onSegmentSelect?: (segment: DistributionBarSegment) => void;
26
+ segments: DistributionBarSegment[];
27
+ /** Id of the selected segment — renders a ring on that segment. */
28
+ selectedSegmentId?: string;
29
+ }
30
+ export interface DistributionBarProps extends Omit<HTMLAttributes<HTMLFieldSetElement>, "onChange"> {
31
+ /**
32
+ * Show the per-segment legend below the bar, or hide it.
33
+ *
34
+ * Default `"segments"`.
35
+ */
36
+ legend?: "segments" | false;
37
+ /**
38
+ * Minimum weight each side of a dragged boundary must retain.
39
+ *
40
+ * Default `4`.
41
+ */
42
+ minValue?: number;
43
+ /** Receives the full next segment list after drag or keyboard boundary moves. */
44
+ onChange?: (segments: DistributionBarSegment[]) => void;
45
+ /** Weighted segments; displayed percentages are derived from their total. */
46
+ segments: DistributionBarSegment[];
47
+ /**
48
+ * Keyboard adjustment amount for boundary handles.
49
+ *
50
+ * Default `1`.
51
+ */
52
+ step?: number;
53
+ }
54
+ export declare const DistributionDisplay: ({ "aria-label": ariaLabel, assignedLabel, className, emptyLabel, emptyValue, legend, onSegmentSelect, segments, selectedSegmentId, ...props }: DistributionDisplayProps) => import("react/jsx-runtime").JSX.Element;
55
+ export declare const DistributionBar: ({ "aria-label": ariaLabel, className, legend, minValue, onChange, segments, step, ...props }: DistributionBarProps) => import("react/jsx-runtime").JSX.Element;
56
+ //# sourceMappingURL=distribution-bar-root.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"distribution-bar-root.d.ts","sourceRoot":"","sources":["../../src/DistributionBar/distribution-bar-root.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,cAAc,EAAiB,MAAM,OAAO,CAAC;AAQ1E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,cAAc,CAAC,cAAc,CAAC,EAC9B,MAAM,GAAG,UAAU,CACpB;IACC,iEAAiE;IACjE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,KAAK,CAAC;IACxC;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,sBAAsB,KAAK,IAAI,CAAC;IAC5D,QAAQ,EAAE,sBAAsB,EAAE,CAAC;IACnC,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,cAAc,CAAC,mBAAmB,CAAC,EACnC,UAAU,CACX;IACC;;;;OAIG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,sBAAsB,EAAE,KAAK,IAAI,CAAC;IACxD,6EAA6E;IAC7E,QAAQ,EAAE,sBAAsB,EAAE,CAAC;IACnC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AA0MD,eAAO,MAAM,mBAAmB,GAAI,+IAWjC,wBAAwB,4CAwD1B,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,8FAS7B,oBAAoB,4CAyEtB,CAAC"}
@@ -1,3 +1,3 @@
1
- export { type DistributionBarSegment, type DistributionBarSegmentUpdate, getDistributionBoundaryPercent, getDistributionTotal, moveDistributionBoundary, removeDistributionSegment, updateDistributionSegment, } from "./DistributionBarMath";
2
- export { DistributionBar, type DistributionBarProps, DistributionDisplay, type DistributionDisplayProps, } from "./DistributionBarRoot";
1
+ export { type DistributionBarSegment, type DistributionBarSegmentUpdate, getDistributionBoundaryPercent, getDistributionTotal, moveDistributionBoundary, removeDistributionSegment, updateDistributionSegment, } from "./distribution-bar-math";
2
+ export { DistributionBar, type DistributionBarProps, DistributionDisplay, type DistributionDisplayProps, } from "./distribution-bar-root";
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,EACL,KAAK,sBAAsB,EAC3B,KAAK,4BAA4B,EACjC,8BAA8B,EAC9B,oBAAoB,EACpB,wBAAwB,EACxB,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,EACzB,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,uBAAuB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DistributionBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,sBAAsB,EAC3B,KAAK,4BAA4B,EACjC,8BAA8B,EAC9B,oBAAoB,EACpB,wBAAwB,EACxB,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,EACzB,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,yBAAyB,CAAC"}
@@ -0,0 +1,9 @@
1
+ import type { SwatchColorStop } from "./swatch-types";
2
+ export interface SwatchAtmosphereOptions {
3
+ /** 0 = diffuse, wide wash · 1 = dense, tight pools. Default 0.5. */
4
+ density?: number;
5
+ /** -1 = grounds (pools sink) · 1 = lifts (pools rise). Default 0. */
6
+ gravity?: number;
7
+ }
8
+ export declare const getSwatchAtmosphereBackground: (colors: SwatchColorStop[] | undefined, options?: SwatchAtmosphereOptions) => string | undefined;
9
+ //# sourceMappingURL=swatch-atmosphere.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"swatch-atmosphere.d.ts","sourceRoot":"","sources":["../../src/Swatch/swatch-atmosphere.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,MAAM,WAAW,uBAAuB;IACtC,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAoDD,eAAO,MAAM,6BAA6B,GACxC,QAAQ,eAAe,EAAE,GAAG,SAAS,EACrC,UAAS,uBAA4B,KACpC,MAAM,GAAG,SA0BX,CAAC"}
@@ -0,0 +1,4 @@
1
+ import type { SwatchColorStop } from "./swatch-types";
2
+ export declare const isLightColor: (color: string) => boolean;
3
+ export declare const getSwatchColorsBackground: (colors: SwatchColorStop[] | undefined) => string | undefined;
4
+ //# sourceMappingURL=swatch-colors.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"swatch-colors.d.ts","sourceRoot":"","sources":["../../src/Swatch/swatch-colors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AA2BtD,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,KAAG,OAW5C,CAAC;AAEF,eAAO,MAAM,yBAAyB,GACpC,QAAQ,eAAe,EAAE,GAAG,SAAS,KACpC,MAAM,GAAG,SAwBX,CAAC"}
@@ -0,0 +1,3 @@
1
+ import type { SwatchProps } from "./swatch-types";
2
+ export declare const Swatch: ({ "aria-label": ariaLabel, asChild, background, children, className, color, colors, density, flat, gravity, icon: Icon, isLight, objectFit, objectPosition, onRemove, raised, removeLabel, role: _role, selected, shape, showRing, size, style, texture, unavailable, ...props }: SwatchProps) => import("react/jsx-runtime").JSX.Element;
3
+ //# sourceMappingURL=swatch-root.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"swatch-root.d.ts","sourceRoot":"","sources":["../../src/Swatch/swatch-root.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AA4GlD,eAAO,MAAM,MAAM,GAAI,kRA2BpB,WAAW,4CAwGb,CAAC"}
@@ -0,0 +1,158 @@
1
+ import type { ObjectFit } from "@patternmode/system";
2
+ import type { ComponentType, HTMLAttributes, ReactElement, ReactNode, SVGProps } from "react";
3
+ export declare const SWATCH_SIZES: readonly ["2xs", "xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl"];
4
+ export declare const SWATCH_SIZE_VALUES: {
5
+ readonly "4xl": "4.5rem";
6
+ readonly "5xl": "5rem";
7
+ readonly "6xl": "5.5rem";
8
+ readonly "7xl": "6rem";
9
+ readonly "2xl": "3.5rem";
10
+ readonly "2xs": "1rem";
11
+ readonly "3xl": "4rem";
12
+ readonly base: "2rem";
13
+ readonly lg: "2.5rem";
14
+ readonly sm: "1.5rem";
15
+ readonly xl: "3rem";
16
+ readonly xs: "1.25rem";
17
+ };
18
+ export declare const SWATCH_SHAPES: readonly ["circle", "pill", "square", "block"];
19
+ export declare const SWATCH_TEXTURES: readonly ["atmosphere"];
20
+ export type SwatchSize = (typeof SWATCH_SIZES)[number];
21
+ export type SwatchShape = (typeof SWATCH_SHAPES)[number];
22
+ export type SwatchTexture = (typeof SWATCH_TEXTURES)[number];
23
+ export type SwatchColorStop = string | {
24
+ color: string;
25
+ ratio?: number;
26
+ };
27
+ type SwatchIcon = ComponentType<SVGProps<SVGSVGElement>>;
28
+ export declare const getSwatchSizeVariableStyle: (size: SwatchSize, variableName?: string) => Record<string, string>;
29
+ /**
30
+ * Visual and behavioural props shared by every Swatch rendering mode. These
31
+ * map deterministically to the fill, scrim, shape, and size treatment
32
+ * regardless of whether the swatch renders its own wrapper or an `asChild`
33
+ * element.
34
+ */
35
+ export interface SwatchSharedProps extends HTMLAttributes<HTMLElement> {
36
+ background?: string;
37
+ color?: string;
38
+ colors?: SwatchColorStop[];
39
+ /**
40
+ * Atmosphere density (0 = diffuse wash, 1 = dense pools). Only applies when
41
+ * `texture="atmosphere"`.
42
+ *
43
+ * Default `0.5`.
44
+ */
45
+ density?: number;
46
+ /**
47
+ * Render a precise, flat color block: no top-to-bottom scrim gradient and
48
+ * no drop shadow. Use for data visualisation where the fill must read as
49
+ * the exact color value.
50
+ *
51
+ * Default `false`.
52
+ */
53
+ flat?: boolean;
54
+ /**
55
+ * Atmosphere gravity (-1 = pools sink, 1 = pools rise). Only applies when
56
+ * `texture="atmosphere"`.
57
+ *
58
+ * Default `0`.
59
+ */
60
+ gravity?: number;
61
+ icon?: SwatchIcon;
62
+ isLight?: boolean;
63
+ /**
64
+ * Object-fit mode applied to media children through CSS variables.
65
+ *
66
+ * Default `"cover"`.
67
+ */
68
+ objectFit?: ObjectFit;
69
+ /**
70
+ * Object-position value applied to media children through CSS variables.
71
+ *
72
+ * Default `"center"`.
73
+ */
74
+ objectPosition?: string;
75
+ raised?: boolean;
76
+ /**
77
+ * Shows selected state and optional icon overlay.
78
+ *
79
+ * Default `false`.
80
+ */
81
+ selected?: boolean;
82
+ /**
83
+ * Rendered swatch shape.
84
+ *
85
+ * Default `"circle"`.
86
+ */
87
+ shape?: SwatchShape;
88
+ /**
89
+ * Whether selected swatches render their ring treatment.
90
+ *
91
+ * Default `true`.
92
+ */
93
+ showRing?: boolean;
94
+ /**
95
+ * Size token used for the swatch dimensions.
96
+ *
97
+ * Default `"base"`.
98
+ */
99
+ size?: SwatchSize;
100
+ /**
101
+ * Render supplied colors as a soft, layered radial atmosphere — overlapping
102
+ * color pools — instead of a ratio-encoded weighted palette. Pair with
103
+ * `density` and `gravity` to shape the pools.
104
+ */
105
+ texture?: SwatchTexture;
106
+ /**
107
+ * Marks the swatch as unavailable.
108
+ *
109
+ * Default `false`.
110
+ */
111
+ unavailable?: boolean;
112
+ }
113
+ /**
114
+ * Default Swatch props: the swatch renders its own wrapper element
115
+ * (`<figure>`, or `<fieldset>` when `onRemove` is set).
116
+ */
117
+ export interface SwatchDefaultProps extends SwatchSharedProps {
118
+ /**
119
+ * Render the swatch styling onto a provided child element instead of an
120
+ * own wrapper. See {@link SwatchAsChildProps}.
121
+ *
122
+ * Default `false`.
123
+ */
124
+ asChild?: false;
125
+ /**
126
+ * Optional media rendered inside the swatch frame.
127
+ *
128
+ * Swatch does not optimize image elements itself. Next.js consumers can pass
129
+ * their own `next/image` `Image` component here and use `objectFit` /
130
+ * `objectPosition` to align it with the swatch shape.
131
+ */
132
+ children?: ReactNode;
133
+ /** Renders a remove affordance and calls this after stopping propagation. */
134
+ onRemove?: () => void;
135
+ /** Accessible label for the remove affordance. Defaults to the swatch label. */
136
+ removeLabel?: string;
137
+ }
138
+ /**
139
+ * `asChild` Swatch props: the swatch merges its className, style (size/fill
140
+ * CSS variables), data attributes, and other props onto the single React
141
+ * element passed as `children`, rendering through it (Radix Slot pattern)
142
+ * instead of emitting its own wrapper. Use this when the swatch must *be* an
143
+ * interactive element, such as a `<button>` cell in a color matrix.
144
+ *
145
+ * `onRemove` is unsupported in this mode — its remove affordance cannot be
146
+ * composed into an arbitrary slotted element. Wrap a default Swatch instead
147
+ * when a remove control is required.
148
+ */
149
+ export interface SwatchAsChildProps extends SwatchSharedProps {
150
+ asChild: true;
151
+ /** The single element the swatch styling is merged onto and rendered through. */
152
+ children: ReactElement;
153
+ onRemove?: never;
154
+ removeLabel?: never;
155
+ }
156
+ export type SwatchProps = SwatchDefaultProps | SwatchAsChildProps;
157
+ export {};
158
+ //# sourceMappingURL=swatch-types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"swatch-types.d.ts","sourceRoot":"","sources":["../../src/Swatch/swatch-types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9F,eAAO,MAAM,YAAY,4FAA8D,CAAC;AAExF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;CAMgB,CAAC;AAEhD,eAAO,MAAM,aAAa,gDAAiD,CAAC;AAE5E,eAAO,MAAM,eAAe,yBAA0B,CAAC;AAEvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AACvD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AACzD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAC7D,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACzE,KAAK,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAEzD,eAAO,MAAM,0BAA0B,GACrC,MAAM,UAAU,EAChB,qBAA0C,KACzC,MAAM,CAAC,MAAM,EAAE,MAAM,CAEtB,CAAC;AAEH;;;;;GAKG;AACH,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACpE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,eAAe,EAAE,CAAC;IAC3B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D;;;;;OAKG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,gFAAgF;IAChF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;GAUG;AACH,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,OAAO,EAAE,IAAI,CAAC;IACd,iFAAiF;IACjF,QAAQ,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;AAED,MAAM,MAAM,WAAW,GAAG,kBAAkB,GAAG,kBAAkB,CAAC"}
package/dist/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export { DistributionBar, type DistributionBarProps, type DistributionBarSegment, type DistributionBarSegmentUpdate, DistributionDisplay, type DistributionDisplayProps, getDistributionBoundaryPercent, getDistributionTotal, getSwatchAtmosphereBackground, getSwatchColorsBackground, getSwatchSizeVariableStyle, moveDistributionBoundary, removeDistributionSegment, SWATCH_SHAPES, SWATCH_SIZE_VALUES, SWATCH_SIZES, SWATCH_TEXTURES, Swatch, type SwatchAtmosphereOptions, type SwatchColorStop, type SwatchProps, type SwatchShape, type SwatchSize, type SwatchTexture, updateDistributionSegment, } from "./swatch";
1
+ export { DistributionBar, type DistributionBarProps, type DistributionBarSegment, type DistributionBarSegmentUpdate, DistributionDisplay, type DistributionDisplayProps, getDistributionBoundaryPercent, getDistributionTotal, getSwatchAtmosphereBackground, getSwatchColorsBackground, getSwatchSizeVariableStyle, moveDistributionBoundary, removeDistributionSegment, SWATCH_SHAPES, SWATCH_SIZE_VALUES, SWATCH_SIZES, SWATCH_TEXTURES, Swatch, type SwatchAsChildProps, type SwatchAtmosphereOptions, type SwatchColorStop, type SwatchDefaultProps, type SwatchProps, type SwatchShape, type SwatchSharedProps, type SwatchSize, type SwatchTexture, updateDistributionSegment, } from "./swatch";
2
2
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,KAAK,4BAA4B,EACjC,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,8BAA8B,EAC9B,oBAAoB,EACpB,6BAA6B,EAC7B,yBAAyB,EACzB,0BAA0B,EAC1B,wBAAwB,EACxB,yBAAyB,EACzB,aAAa,EACb,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,MAAM,EACN,KAAK,uBAAuB,EAC5B,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,yBAAyB,GAC1B,MAAM,UAAU,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,KAAK,4BAA4B,EACjC,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,8BAA8B,EAC9B,oBAAoB,EACpB,6BAA6B,EAC7B,yBAAyB,EACzB,0BAA0B,EAC1B,wBAAwB,EACxB,yBAAyB,EACzB,aAAa,EACb,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,MAAM,EACN,KAAK,kBAAkB,EACvB,KAAK,uBAAuB,EAC5B,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACvB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,yBAAyB,GAC1B,MAAM,UAAU,CAAC"}