@patternmode/swatch 0.9.1 → 0.9.3
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 +36 -21
- 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/{SwatchTypes.d.ts → swatch-types.d.ts} +59 -10
- package/dist/Swatch/swatch-types.d.ts.map +1 -0
- package/dist/index.mjs +258 -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 +27 -28
- 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.map +0 -1
package/README.md
CHANGED
|
@@ -7,32 +7,47 @@ import { DistributionBar, Swatch } from "@patternmode/swatch";
|
|
|
7
7
|
import "@patternmode/swatch/styles.css";
|
|
8
8
|
|
|
9
9
|
export function Example() {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
10
|
+
return (
|
|
11
|
+
<>
|
|
12
|
+
<Swatch
|
|
13
|
+
aria-label="Palette"
|
|
14
|
+
colors={[
|
|
15
|
+
{ color: "#315c4b", ratio: 60 },
|
|
16
|
+
{ color: "#e1ebe5", ratio: 40 },
|
|
17
|
+
]}
|
|
18
|
+
shape="pill"
|
|
19
|
+
size="2xl"
|
|
20
|
+
/>
|
|
21
|
+
<DistributionBar
|
|
22
|
+
aria-label="Finish distribution"
|
|
23
|
+
segments={[
|
|
24
|
+
{ id: "evergreen", color: "#315c4b", label: "Evergreen", value: 48 },
|
|
25
|
+
{ id: "saffron", color: "#d9a441", label: "Saffron", value: 30 },
|
|
26
|
+
{ id: "oxblood", color: "#9b3d32", label: "Oxblood", value: 22 },
|
|
27
|
+
]}
|
|
28
|
+
/>
|
|
29
|
+
</>
|
|
30
|
+
);
|
|
31
31
|
}
|
|
32
32
|
```
|
|
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
|
+
## Optimized images
|
|
37
|
+
|
|
38
|
+
Swatch can frame media via `children`, but it does not optimize images itself.
|
|
39
|
+
If your app uses Next.js, pass your own `next/image` `Image` component as the
|
|
40
|
+
child:
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
import { Swatch } from "@patternmode/swatch";
|
|
44
|
+
import Image from "next/image";
|
|
45
|
+
|
|
46
|
+
<Swatch aria-label="Oak veneer" objectFit="cover" shape="square" size="4xl">
|
|
47
|
+
<Image alt="" fill sizes="4.5rem" src="/finishes/oak.jpg" />
|
|
48
|
+
</Swatch>;
|
|
49
|
+
```
|
|
50
|
+
|
|
36
51
|
Use `DistributionBar` as a sibling primitive when a weighted visual distribution should be edited with draggable boundary handles.
|
|
37
52
|
|
|
38
53
|
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, 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":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AA4GlD,eAAO,MAAM,MAAM,GAAI,yQA0BpB,WAAW,4CAyFb,CAAC"}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import type { ComponentType, HTMLAttributes, SVGProps } from "react";
|
|
1
|
+
import type { ObjectFit } from "@patternmode/system";
|
|
2
|
+
import type { ComponentType, HTMLAttributes, ReactNode, SVGProps } from "react";
|
|
3
3
|
export declare const SWATCH_SIZES: readonly ["2xs", "xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl"];
|
|
4
4
|
export declare const SWATCH_SIZE_VALUES: {
|
|
5
5
|
readonly "4xl": "4.5rem";
|
|
6
6
|
readonly "5xl": "5rem";
|
|
7
7
|
readonly "6xl": "5.5rem";
|
|
8
8
|
readonly "7xl": "6rem";
|
|
9
|
+
readonly "2xl": "3.5rem";
|
|
9
10
|
readonly "2xs": "1rem";
|
|
10
|
-
readonly
|
|
11
|
-
readonly sm: "1.5rem";
|
|
11
|
+
readonly "3xl": "4rem";
|
|
12
12
|
readonly base: "2rem";
|
|
13
13
|
readonly lg: "2.5rem";
|
|
14
|
+
readonly sm: "1.5rem";
|
|
14
15
|
readonly xl: "3rem";
|
|
15
|
-
readonly
|
|
16
|
-
readonly "3xl": "4rem";
|
|
16
|
+
readonly xs: "1.25rem";
|
|
17
17
|
};
|
|
18
18
|
export declare const SWATCH_SHAPES: readonly ["circle", "pill", "square", "block"];
|
|
19
19
|
export declare const SWATCH_TEXTURES: readonly ["atmosphere"];
|
|
@@ -25,37 +25,81 @@ export type SwatchColorStop = string | {
|
|
|
25
25
|
ratio?: number;
|
|
26
26
|
};
|
|
27
27
|
type SwatchIcon = ComponentType<SVGProps<SVGSVGElement>>;
|
|
28
|
-
export declare
|
|
28
|
+
export declare const getSwatchSizeVariableStyle: (size: SwatchSize, variableName?: string) => Record<string, string>;
|
|
29
29
|
export interface SwatchProps extends HTMLAttributes<HTMLElement> {
|
|
30
30
|
background?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Optional media rendered inside the swatch frame.
|
|
33
|
+
*
|
|
34
|
+
* Swatch does not optimize image elements itself. Next.js consumers can pass
|
|
35
|
+
* their own `next/image` `Image` component here and use `objectFit` /
|
|
36
|
+
* `objectPosition` to align it with the swatch shape.
|
|
37
|
+
*/
|
|
38
|
+
children?: ReactNode;
|
|
31
39
|
color?: string;
|
|
32
40
|
colors?: SwatchColorStop[];
|
|
33
41
|
/**
|
|
34
42
|
* Atmosphere density (0 = diffuse wash, 1 = dense pools). Only applies when
|
|
35
|
-
* `texture="atmosphere"`.
|
|
43
|
+
* `texture="atmosphere"`.
|
|
44
|
+
*
|
|
45
|
+
* Default `0.5`.
|
|
36
46
|
*/
|
|
37
47
|
density?: number;
|
|
38
48
|
/**
|
|
39
49
|
* Render a precise, flat color block: no top-to-bottom scrim gradient and
|
|
40
50
|
* no drop shadow. Use for data visualisation where the fill must read as
|
|
41
51
|
* the exact color value.
|
|
52
|
+
*
|
|
53
|
+
* Default `false`.
|
|
42
54
|
*/
|
|
43
55
|
flat?: boolean;
|
|
44
56
|
/**
|
|
45
57
|
* Atmosphere gravity (-1 = pools sink, 1 = pools rise). Only applies when
|
|
46
|
-
* `texture="atmosphere"`.
|
|
58
|
+
* `texture="atmosphere"`.
|
|
59
|
+
*
|
|
60
|
+
* Default `0`.
|
|
47
61
|
*/
|
|
48
62
|
gravity?: number;
|
|
49
63
|
icon?: SwatchIcon;
|
|
50
64
|
isLight?: boolean;
|
|
65
|
+
/**
|
|
66
|
+
* Object-fit mode applied to media children through CSS variables.
|
|
67
|
+
*
|
|
68
|
+
* Default `"cover"`.
|
|
69
|
+
*/
|
|
51
70
|
objectFit?: ObjectFit;
|
|
71
|
+
/**
|
|
72
|
+
* Object-position value applied to media children through CSS variables.
|
|
73
|
+
*
|
|
74
|
+
* Default `"center"`.
|
|
75
|
+
*/
|
|
52
76
|
objectPosition?: string;
|
|
53
77
|
onRemove?: () => void;
|
|
54
78
|
raised?: boolean;
|
|
55
79
|
removeLabel?: string;
|
|
80
|
+
/**
|
|
81
|
+
* Shows selected state and optional icon overlay.
|
|
82
|
+
*
|
|
83
|
+
* Default `false`.
|
|
84
|
+
*/
|
|
56
85
|
selected?: boolean;
|
|
86
|
+
/**
|
|
87
|
+
* Rendered swatch shape.
|
|
88
|
+
*
|
|
89
|
+
* Default `"circle"`.
|
|
90
|
+
*/
|
|
57
91
|
shape?: SwatchShape;
|
|
92
|
+
/**
|
|
93
|
+
* Whether selected swatches render their ring treatment.
|
|
94
|
+
*
|
|
95
|
+
* Default `true`.
|
|
96
|
+
*/
|
|
58
97
|
showRing?: boolean;
|
|
98
|
+
/**
|
|
99
|
+
* Size token used for the swatch dimensions.
|
|
100
|
+
*
|
|
101
|
+
* Default `"base"`.
|
|
102
|
+
*/
|
|
59
103
|
size?: SwatchSize;
|
|
60
104
|
/**
|
|
61
105
|
* Render supplied colors as a soft, layered radial atmosphere — overlapping
|
|
@@ -63,7 +107,12 @@ export interface SwatchProps extends HTMLAttributes<HTMLElement> {
|
|
|
63
107
|
* `density` and `gravity` to shape the pools.
|
|
64
108
|
*/
|
|
65
109
|
texture?: SwatchTexture;
|
|
110
|
+
/**
|
|
111
|
+
* Marks the swatch as unavailable.
|
|
112
|
+
*
|
|
113
|
+
* Default `false`.
|
|
114
|
+
*/
|
|
66
115
|
unavailable?: boolean;
|
|
67
116
|
}
|
|
68
117
|
export {};
|
|
69
|
-
//# sourceMappingURL=
|
|
118
|
+
//# 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,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhF,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,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,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,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;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"}
|