@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.
- package/README.md +38 -0
- package/dist/DistributionBar/distribution-bar-math.d.ts +29 -0
- package/dist/DistributionBar/distribution-bar-math.d.ts.map +1 -0
- package/dist/DistributionBar/distribution-bar-root.d.ts +56 -0
- package/dist/DistributionBar/distribution-bar-root.d.ts.map +1 -0
- package/dist/DistributionBar/index.d.ts +2 -2
- package/dist/DistributionBar/index.d.ts.map +1 -1
- package/dist/Swatch/swatch-atmosphere.d.ts +9 -0
- package/dist/Swatch/swatch-atmosphere.d.ts.map +1 -0
- package/dist/Swatch/swatch-colors.d.ts +4 -0
- package/dist/Swatch/swatch-colors.d.ts.map +1 -0
- package/dist/Swatch/swatch-root.d.ts +3 -0
- package/dist/Swatch/swatch-root.d.ts.map +1 -0
- package/dist/Swatch/swatch-types.d.ts +158 -0
- package/dist/Swatch/swatch-types.d.ts.map +1 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +267 -239
- package/dist/index.mjs.map +1 -1
- package/dist/swatch.d.ts +4 -4
- package/dist/swatch.d.ts.map +1 -1
- package/package.json +4 -3
- package/dist/DistributionBar/DistributionBarMath.d.ts +0 -15
- package/dist/DistributionBar/DistributionBarMath.d.ts.map +0 -1
- package/dist/DistributionBar/DistributionBarRoot.d.ts +0 -28
- package/dist/DistributionBar/DistributionBarRoot.d.ts.map +0 -1
- package/dist/Swatch/SwatchAtmosphere.d.ts +0 -15
- package/dist/Swatch/SwatchAtmosphere.d.ts.map +0 -1
- package/dist/Swatch/SwatchColors.d.ts +0 -4
- package/dist/Swatch/SwatchColors.d.ts.map +0 -1
- package/dist/Swatch/SwatchRoot.d.ts +0 -3
- package/dist/Swatch/SwatchRoot.d.ts.map +0 -1
- package/dist/Swatch/SwatchTypes.d.ts +0 -69
- 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 "./
|
|
2
|
-
export { DistributionBar, type DistributionBarProps, DistributionDisplay, type DistributionDisplayProps, } from "./
|
|
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,
|
|
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
|
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,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"}
|