@sixthshift/design-system 0.8.0 → 0.9.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 +5 -4
- package/dist/components/Badge/Badge.d.ts +17 -35
- package/dist/components/Badge/Badge.d.ts.map +1 -1
- package/dist/components/Badge/Badge.js +19 -22
- package/dist/components/Badge/Badge.js.map +1 -1
- package/dist/components/Badge/index.d.ts +1 -1
- package/dist/components/Badge/index.d.ts.map +1 -1
- package/dist/components/Badge/index.js +1 -1
- package/dist/components/Badge/index.js.map +1 -1
- package/dist/components/Button/Button.d.ts +23 -41
- package/dist/components/Button/Button.d.ts.map +1 -1
- package/dist/components/Button/Button.js +28 -35
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Button/index.d.ts +1 -1
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +1 -1
- package/dist/components/Button/index.js.map +1 -1
- package/dist/components/Card/Card.d.ts +2 -2
- package/dist/components/Card/Card.js +1 -1
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/CheckboxGroup/CheckboxGroup.d.ts +20 -16
- package/dist/components/CheckboxGroup/CheckboxGroup.d.ts.map +1 -1
- package/dist/components/CheckboxGroup/CheckboxGroup.js +12 -10
- package/dist/components/CheckboxGroup/CheckboxGroup.js.map +1 -1
- package/dist/components/Code/Workspace/Toolbar.d.ts +2 -1
- package/dist/components/Code/Workspace/Toolbar.d.ts.map +1 -1
- package/dist/components/Code/Workspace/Toolbar.js.map +1 -1
- package/dist/components/FormField/FormField.d.ts +3 -1
- package/dist/components/FormField/FormField.d.ts.map +1 -1
- package/dist/components/FormField/FormField.js.map +1 -1
- package/dist/components/Input/Input.d.ts +3 -3
- package/dist/components/Input/Input.js +3 -3
- package/dist/components/Markdown/Markdown.js +1 -1
- package/dist/components/Markdown/Markdown.js.map +1 -1
- package/dist/components/NumberStepper/NumberStepper.d.ts +1 -1
- package/dist/components/ProgressBar/ProgressBar.d.ts +11 -0
- package/dist/components/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/components/ProgressBar/ProgressBar.js +6 -2
- package/dist/components/ProgressBar/ProgressBar.js.map +1 -1
- package/dist/components/ProgressBar/index.d.ts +1 -1
- package/dist/components/ProgressBar/index.d.ts.map +1 -1
- package/dist/components/ProgressBar/index.js.map +1 -1
- package/dist/components/RadioButtonGroup/RadioButtonGroup.d.ts +19 -16
- package/dist/components/RadioButtonGroup/RadioButtonGroup.d.ts.map +1 -1
- package/dist/components/RadioButtonGroup/RadioButtonGroup.js +13 -12
- package/dist/components/RadioButtonGroup/RadioButtonGroup.js.map +1 -1
- package/dist/components/SearchInput/SearchInput.d.ts +3 -2
- package/dist/components/SearchInput/SearchInput.d.ts.map +1 -1
- package/dist/components/SearchInput/SearchInput.js +13 -8
- package/dist/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/components/Sparkline/Sparkline.d.ts +8 -4
- package/dist/components/Sparkline/Sparkline.d.ts.map +1 -1
- package/dist/components/Sparkline/Sparkline.js +1 -1
- package/dist/components/Sparkline/Sparkline.js.map +1 -1
- package/dist/components/Sparkline/index.d.ts +1 -1
- package/dist/components/Sparkline/index.d.ts.map +1 -1
- package/dist/components/Sparkline/index.js.map +1 -1
- package/dist/components/TagChip/TagChip.d.ts +0 -13
- package/dist/components/TagChip/TagChip.d.ts.map +1 -1
- package/dist/components/TagChip/TagChip.js +10 -4
- package/dist/components/TagChip/TagChip.js.map +1 -1
- package/dist/components/TextInline/TextInline.d.ts +2 -2
- package/dist/components/Toast/Toast.js +1 -1
- package/dist/components/Toast/Toast.js.map +1 -1
- package/dist/components/Toggle/Toggle.d.ts +29 -18
- package/dist/components/Toggle/Toggle.d.ts.map +1 -1
- package/dist/components/Toggle/Toggle.js +48 -11
- package/dist/components/Toggle/Toggle.js.map +1 -1
- package/dist/components/Toggle/index.d.ts +1 -1
- package/dist/components/Toggle/index.d.ts.map +1 -1
- package/dist/components/Toggle/index.js +1 -1
- package/dist/components/Toggle/index.js.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroup.d.ts +4 -4
- package/dist/components/ToggleGroup/ToggleGroup.js +4 -4
- package/dist/components/ToggleGroup/ToggleGroupItem.d.ts +1 -1
- package/dist/components/ToggleGroup/ToggleGroupItem.d.ts.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupItem.js +37 -7
- package/dist/components/ToggleGroup/ToggleGroupItem.js.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupMultiple.d.ts +3 -3
- package/dist/components/ToggleGroup/ToggleGroupSingle.d.ts +3 -3
- package/dist/components/ToggleGroup/index.d.ts +1 -1
- package/dist/components/ToggleGroup/index.d.ts.map +1 -1
- package/dist/components/ToggleGroup/toggleGroup.types.d.ts +18 -16
- package/dist/components/ToggleGroup/toggleGroup.types.d.ts.map +1 -1
- package/dist/typography/Code.js +1 -1
- package/dist/typography/Code.js.map +1 -1
- package/package.json +2 -1
- package/src/components/Badge/Badge.tsx +38 -45
- package/src/components/Badge/badge.recipe.css +20 -101
- package/src/components/Badge/index.ts +0 -1
- package/src/components/Button/Button.tsx +57 -51
- package/src/components/Button/button.recipe.css +39 -122
- package/src/components/Button/index.ts +0 -1
- package/src/components/Card/Card.tsx +1 -1
- package/src/components/CheckboxGroup/CheckboxGroup.tsx +17 -15
- package/src/components/Code/Workspace/Toolbar.tsx +2 -2
- package/src/components/FormField/FormField.tsx +3 -2
- package/src/components/Input/Input.tsx +3 -3
- package/src/components/Markdown/Markdown.tsx +1 -1
- package/src/components/Message/message.recipe.css +13 -28
- package/src/components/ProgressBar/ProgressBar.tsx +16 -4
- package/src/components/ProgressBar/index.ts +1 -1
- package/src/components/ProgressBar/progress-bar.recipe.css +29 -0
- package/src/components/RadioButtonGroup/RadioButtonGroup.tsx +18 -17
- package/src/components/SearchInput/SearchInput.tsx +34 -20
- package/src/components/SearchInput/search-input.recipe.css +14 -6
- package/src/components/Sparkline/Sparkline.tsx +9 -4
- package/src/components/Sparkline/index.ts +1 -1
- package/src/components/TagChip/TagChip.tsx +17 -8
- package/src/components/TagChip/tag-chip.recipe.css +12 -12
- package/src/components/Toast/Toast.tsx +1 -1
- package/src/components/Toggle/Toggle.tsx +67 -21
- package/src/components/Toggle/index.ts +9 -1
- package/src/components/Toggle/toggle.recipe.css +45 -73
- package/src/components/ToggleGroup/ToggleGroup.tsx +4 -4
- package/src/components/ToggleGroup/ToggleGroupItem.tsx +46 -11
- package/src/components/ToggleGroup/index.ts +9 -1
- package/src/components/ToggleGroup/toggle-group.recipe.css +62 -0
- package/src/components/ToggleGroup/toggleGroup.types.ts +18 -16
- package/src/theme/linen/theme.css +21 -0
- package/src/theming/intents.css +112 -0
- package/src/theming/tailwind.css +17 -1
- package/src/typography/Code.tsx +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,+CAA+C;AAC/C,MAAM,cAAc,GAAG;;;gDAGyB,CAAC;AAEjD;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,GAAG,cAAc,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACrG,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,EAAE,CAAC;QACZ,CAAC;aAAM,CAAC;YACN,aAAa,CAAC,EAAE,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,0CAA0C,EAAE,SAAS,CAAC,aACvE,eAAM,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,QAAQ,CAAC,YAC3C,KAAC,MAAM,KAAG,GACL,EACP,gBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;oBAC9B,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC;gBAChB,CAAC,EACD,SAAS,EAAE,EAAE,CACX,2VAA2V,EAC3V,MAAM,EACN,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CACxB,KACG,KAAK,GACT,EACD,KAAK,IAAI,CACR,eAAM,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,YAC5C,iBAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,gBAAc,UAAU,EAAE,SAAS,EAAC,uDAAuD,YACnI,KAAC,CAAC,KAAG,GACE,GACJ,CACR,IACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AACF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAExC,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
import type { Interpolation } from "@sixthshift/design-system/line-chart";
|
|
2
1
|
import * as React from "react";
|
|
2
|
+
/**
|
|
3
|
+
* How the line joins its points. The same four as LineChart's — duplicated, not
|
|
4
|
+
* imported, so a sparkline does not pull in the chart.
|
|
5
|
+
*/
|
|
6
|
+
export type SparklineInterpolation = "linear" | "monotone" | "stepBefore" | "stepAfter";
|
|
3
7
|
export type SparklineProps = React.HTMLAttributes<HTMLSpanElement> & {
|
|
4
8
|
data: number[];
|
|
5
9
|
width?: number;
|
|
6
10
|
height?: number;
|
|
7
11
|
color?: string;
|
|
8
12
|
fillArea?: boolean;
|
|
9
|
-
interpolation?:
|
|
13
|
+
interpolation?: SparklineInterpolation;
|
|
10
14
|
strokeWidth?: number;
|
|
11
15
|
};
|
|
12
16
|
/**
|
|
@@ -16,7 +20,7 @@ export type SparklineProps = React.HTMLAttributes<HTMLSpanElement> & {
|
|
|
16
20
|
*
|
|
17
21
|
* Requires at least 2 data points; with fewer it renders nothing (`null`).
|
|
18
22
|
* `color` is a single CSS color string (default `var(--fg-brand)`), and
|
|
19
|
-
* `interpolation`
|
|
23
|
+
* `interpolation` takes the same four values as `LineChart`'s. The
|
|
20
24
|
* accessible name is a static `aria-label="Trend line"` — it does not
|
|
21
25
|
* describe the actual values.
|
|
22
26
|
*/
|
|
@@ -26,7 +30,7 @@ export declare const Sparkline: React.ForwardRefExoticComponent<React.HTMLAttrib
|
|
|
26
30
|
height?: number;
|
|
27
31
|
color?: string;
|
|
28
32
|
fillArea?: boolean;
|
|
29
|
-
interpolation?:
|
|
33
|
+
interpolation?: SparklineInterpolation;
|
|
30
34
|
strokeWidth?: number;
|
|
31
35
|
} & React.RefAttributes<HTMLSpanElement>>;
|
|
32
36
|
//# sourceMappingURL=Sparkline.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../../src/components/Sparkline/Sparkline.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../../src/components/Sparkline/Sparkline.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,QAAQ,GAAG,UAAU,GAAG,YAAY,GAAG,WAAW,CAAC;AAExF,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG;IACnE,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAyCF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;UA3Dd,MAAM,EAAE;YACN,MAAM;aACL,MAAM;YACP,MAAM;eACH,OAAO;oBACF,sBAAsB;kBACxB,MAAM;yCAoFrB,CAAC"}
|
|
@@ -45,7 +45,7 @@ function buildPath(points, interpolation) {
|
|
|
45
45
|
*
|
|
46
46
|
* Requires at least 2 data points; with fewer it renders nothing (`null`).
|
|
47
47
|
* `color` is a single CSS color string (default `var(--fg-brand)`), and
|
|
48
|
-
* `interpolation`
|
|
48
|
+
* `interpolation` takes the same four values as `LineChart`'s. The
|
|
49
49
|
* accessible name is a static `aria-label="Trend line"` — it does not
|
|
50
50
|
* describe the actual values.
|
|
51
51
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sparkline.js","sourceRoot":"","sources":["../../../src/components/Sparkline/Sparkline.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Sparkline.js","sourceRoot":"","sources":["../../../src/components/Sparkline/Sparkline.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { Sparkline, type SparklineProps } from "./Sparkline.js";
|
|
1
|
+
export { Sparkline, type SparklineInterpolation, type SparklineProps } from "./Sparkline.js";
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sparkline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sparkline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,sBAAsB,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Sparkline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Sparkline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAoD,MAAM,aAAa,CAAC"}
|
|
@@ -7,18 +7,5 @@ export type TagChipProps = {
|
|
|
7
7
|
size?: "sm" | "md";
|
|
8
8
|
className?: string;
|
|
9
9
|
};
|
|
10
|
-
/**
|
|
11
|
-
* One tag, rendered prettily. A `namespace:value` tag (`project:website`)
|
|
12
|
-
* shows the namespace muted; a plain tag (`urgent`) renders as-is.
|
|
13
|
-
*
|
|
14
|
-
* Pure presentation. Entity-reference tags (`person:per_…`) are NOT rendered
|
|
15
|
-
* here — the consuming app is expected to intercept those and resolve them to
|
|
16
|
-
* a name chip; TagChip never shows a raw id.
|
|
17
|
-
*
|
|
18
|
-
* Two disjoint modes, chosen by whether `onRemove` is passed: navigable (no
|
|
19
|
-
* `onRemove`; the caller wraps it in a link) or removable (`onRemove` renders
|
|
20
|
-
* an × — used by `TagInput` and edit surfaces). Built on `Badge`
|
|
21
|
-
* (`variant="outline" intent="muted"`).
|
|
22
|
-
*/
|
|
23
10
|
export declare const TagChip: React.ForwardRefExoticComponent<TagChipProps & React.RefAttributes<HTMLSpanElement>>;
|
|
24
11
|
//# sourceMappingURL=TagChip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagChip.d.ts","sourceRoot":"","sources":["../../../src/components/TagChip/TagChip.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TagChip.d.ts","sourceRoot":"","sources":["../../../src/components/TagChip/TagChip.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,sDAAsD;IACtD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAuBF,eAAO,MAAM,OAAO,sFA4BlB,CAAC"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { Badge } from "@sixthshift/design-system/badge";
|
|
4
3
|
import { cn } from "@sixthshift/design-system/utils";
|
|
5
4
|
import { X } from "lucide-react";
|
|
6
5
|
import * as React from "react";
|
|
@@ -14,14 +13,21 @@ import * as React from "react";
|
|
|
14
13
|
*
|
|
15
14
|
* Two disjoint modes, chosen by whether `onRemove` is passed: navigable (no
|
|
16
15
|
* `onRemove`; the caller wraps it in a link) or removable (`onRemove` renders
|
|
17
|
-
* an × — used by `TagInput` and edit surfaces).
|
|
18
|
-
*
|
|
16
|
+
* an × — used by `TagInput` and edit surfaces). It looks like an outline
|
|
17
|
+
* Badge but is not one: the shape is duplicated here and every colour is its
|
|
18
|
+
* own `--tag-chip-*` token, so importing TagChip pulls in nothing else. A tag
|
|
19
|
+
* is metadata, not a status, so it takes no intent.
|
|
19
20
|
*/
|
|
21
|
+
/** Duplicated from Badge's sizes, which TagChip used to borrow. */
|
|
22
|
+
const sizeStyles = {
|
|
23
|
+
sm: "px-1.5 py-0 text-[10px]",
|
|
24
|
+
md: "px-2.5 py-0.5 text-xs",
|
|
25
|
+
};
|
|
20
26
|
export const TagChip = React.forwardRef(({ tag, onRemove, size = "sm", className }, ref) => {
|
|
21
27
|
const sep = tag.indexOf(":");
|
|
22
28
|
const namespace = sep > 0 ? tag.slice(0, sep) : null;
|
|
23
29
|
const value = sep > 0 ? tag.slice(sep + 1) : tag;
|
|
24
|
-
return (_jsxs(
|
|
30
|
+
return (_jsxs("span", { ref: ref, className: cn("tag-chip border-(color:--tag-chip-border) focus:ring-(color:--tag-chip-ring) inline-flex items-center gap-1 rounded-md border bg-(--tag-chip-bg) font-normal text-(--tag-chip-fg) transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2", sizeStyles[size], className), children: [namespace && _jsxs("span", { className: "text-(--tag-chip-namespace-fg)", children: [namespace, ":"] }), _jsx("span", { children: value }), onRemove && (_jsx("button", { type: "button", onClick: onRemove, "aria-label": `Remove ${tag}`, className: "focus-visible:ring-(color:--tag-chip-remove-ring) -mr-0.5 ml-0.5 rounded-sm text-(--tag-chip-remove-fg) hover:text-(--tag-chip-remove-fg-hovered) focus-visible:outline-none focus-visible:ring-2", children: _jsx(X, { className: "h-3 w-3" }) }))] }));
|
|
25
31
|
});
|
|
26
32
|
TagChip.displayName = "TagChip";
|
|
27
33
|
//# sourceMappingURL=TagChip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagChip.js","sourceRoot":"","sources":["../../../src/components/TagChip/TagChip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"TagChip.js","sourceRoot":"","sources":["../../../src/components/TagChip/TagChip.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AACjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B;;;;;;;;;;;;;;GAcG;AACH,mEAAmE;AACnE,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE,yBAAyB;IAC7B,EAAE,EAAE,uBAAuB;CACnB,CAAC;AAEX,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAgC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE;IACxH,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAC7B,MAAM,SAAS,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACrD,MAAM,KAAK,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAEjD,OAAO,CACL,gBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,2PAA2P,EAC3P,UAAU,CAAC,IAAI,CAAC,EAChB,SAAS,CACV,aAEA,SAAS,IAAI,gBAAM,SAAS,EAAC,gCAAgC,aAAE,SAAS,SAAS,EAClF,yBAAO,KAAK,GAAQ,EACnB,QAAQ,IAAI,CACX,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,QAAQ,gBACL,UAAU,GAAG,EAAE,EAC3B,SAAS,EAAC,mMAAmM,YAE7M,KAAC,CAAC,IAAC,SAAS,EAAC,SAAS,GAAG,GAClB,CACV,IACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type VariantProps } from "class-variance-authority";
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
declare const textInlineVariants: (props?: ({
|
|
4
|
-
gap?: "
|
|
4
|
+
gap?: "sm" | "md" | "none" | "xs" | "lg" | "xl" | null | undefined;
|
|
5
5
|
align?: "center" | "start" | "end" | "baseline" | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
7
|
export type TextInlineProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof textInlineVariants>;
|
|
@@ -17,7 +17,7 @@ export type TextInlineProps = React.HTMLAttributes<HTMLSpanElement> & VariantPro
|
|
|
17
17
|
* inline children, not about styling the text itself.
|
|
18
18
|
*/
|
|
19
19
|
declare const TextInline: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
|
|
20
|
-
gap?: "
|
|
20
|
+
gap?: "sm" | "md" | "none" | "xs" | "lg" | "xl" | null | undefined;
|
|
21
21
|
align?: "center" | "start" | "end" | "baseline" | null | undefined;
|
|
22
22
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLSpanElement>>;
|
|
23
23
|
export { TextInline, textInlineVariants };
|
|
@@ -72,7 +72,7 @@ export const Toast = React.forwardRef(({ className, intent = "neutral", brand, t
|
|
|
72
72
|
return null;
|
|
73
73
|
const isEntering = state === "entering";
|
|
74
74
|
const isExiting = state === "exiting";
|
|
75
|
-
const content = (_jsx("div", { ref: mergedRef, className: cn("max-w-sm shadow-lg", standalone && "fixed bottom-6 left-1/2 z-toast -translate-x-1/2", isEntering && "animate-fade-in", isExiting && "animate-fade-out", className), "data-brand": brand, ...props, children: _jsxs(Message, { intent: intent, children: [icon && _jsx(MessageIcon, { children: icon }), _jsxs(MessageBody, { children: [title && _jsx(MessageTitle, { children: title }), _jsxs(MessageDescription, { children: [children, action && (_jsx("div", { className: "mt-2", children: _jsx(Button, {
|
|
75
|
+
const content = (_jsx("div", { ref: mergedRef, className: cn("max-w-sm shadow-lg", standalone && "fixed bottom-6 left-1/2 z-toast -translate-x-1/2", isEntering && "animate-fade-in", isExiting && "animate-fade-out", className), "data-brand": brand, ...props, children: _jsxs(Message, { intent: intent, children: [icon && _jsx(MessageIcon, { children: icon }), _jsxs(MessageBody, { children: [title && _jsx(MessageTitle, { children: title }), _jsxs(MessageDescription, { children: [children, action && (_jsx("div", { className: "mt-2", children: _jsx(Button, { inline: true, size: "sm", className: "font-medium", onClick: onAction, children: action }) }))] })] }), onClose && (_jsx(Button, { variant: "ghost", iconOnly: true, className: "h-6 w-6 shrink-0 opacity-70 hover:opacity-100", onClick: handleClose, "aria-label": "Dismiss", children: _jsx(X, { className: "h-4 w-4" }) }))] }) }));
|
|
76
76
|
if (standalone) {
|
|
77
77
|
return _jsx(FloatingPortal, { ...(root ? { root } : {}), children: content });
|
|
78
78
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,14 +1,25 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type VariantProps } from "class-variance-authority";
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
import { type ButtonIntent, type ButtonVariant, type buttonVariants } from "../Button/Button.js";
|
|
4
3
|
/**
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
4
|
+
* Geometry and behaviour only; every colour reads a `--toggle-*` token decided
|
|
5
|
+
* by src/components/Toggle/toggle.recipe.css.
|
|
6
|
+
*
|
|
7
|
+
* Duplicated from Button on purpose, not shared: a toggle looks like a button
|
|
8
|
+
* but is its own component, so importing Toggle must not pull in Button. The
|
|
9
|
+
* two start identical and are free to drift.
|
|
8
10
|
*/
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
declare const toggleVariants: (props?: ({
|
|
12
|
+
size?: "sm" | "md" | "xs" | "lg" | "xl" | null | undefined;
|
|
13
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
14
|
+
/** Widened deliberately, as on every component: a consumer adds a variant or intent in CSS. */
|
|
15
|
+
type Loose<T extends string> = T | (string & {});
|
|
16
|
+
export type ToggleVariantName = "solid" | "outline" | "ghost";
|
|
17
|
+
export type ToggleIntentName = "neutral" | "brand" | "danger" | "success" | "warning";
|
|
18
|
+
export type ToggleVariant = Loose<ToggleVariantName>;
|
|
19
|
+
export type ToggleIntent = Loose<ToggleIntentName>;
|
|
20
|
+
export type ToggleProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value"> & VariantProps<typeof toggleVariants> & {
|
|
21
|
+
variant?: ToggleVariant | undefined;
|
|
22
|
+
intent?: ToggleIntent | undefined;
|
|
12
23
|
/** Name of a brand the theme defines, rendered as `data-brand`. Omitted, the toggle follows the nearest `data-brand` ancestor. */
|
|
13
24
|
brand?: string | undefined;
|
|
14
25
|
/** Square the toggle at its current size, for an icon with no label. */
|
|
@@ -26,21 +37,21 @@ export type ToggleProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "o
|
|
|
26
37
|
* for a set of mutually exclusive or multi-select options, use `ToggleGroup`
|
|
27
38
|
* instead.
|
|
28
39
|
*
|
|
29
|
-
*
|
|
30
|
-
* `
|
|
31
|
-
*
|
|
32
|
-
* pressed
|
|
33
|
-
* keyed off the `data-state="on" |
|
|
34
|
-
* alongside `aria-pressed`.
|
|
40
|
+
* Looks like a Button and takes the same `variant`/`intent`/`size` axes, plus
|
|
41
|
+
* `iconOnly` for a toolbar toggle whose whole content is an icon — but it is
|
|
42
|
+
* its own component, with its own classes and `--toggle-*` tokens, and
|
|
43
|
+
* imports nothing from Button. Every colour, pressed state included, lives in
|
|
44
|
+
* `src/components/Toggle/toggle.recipe.css`, keyed off the `data-state="on" |
|
|
45
|
+
* "off"` attribute this component renders alongside `aria-pressed`.
|
|
35
46
|
*
|
|
36
47
|
* Controlled via `pressed`/`defaultPressed`/`onPressedChange`
|
|
37
48
|
* (`useControllableState`).
|
|
38
49
|
*/
|
|
39
50
|
declare const Toggle: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value"> & VariantProps<(props?: ({
|
|
40
|
-
size?: "
|
|
51
|
+
size?: "sm" | "md" | "xs" | "lg" | "xl" | null | undefined;
|
|
41
52
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
|
|
42
|
-
variant?:
|
|
43
|
-
intent?:
|
|
53
|
+
variant?: ToggleVariant | undefined;
|
|
54
|
+
intent?: ToggleIntent | undefined;
|
|
44
55
|
/** Name of a brand the theme defines, rendered as `data-brand`. Omitted, the toggle follows the nearest `data-brand` ancestor. */
|
|
45
56
|
brand?: string | undefined;
|
|
46
57
|
/** Square the toggle at its current size, for an icon with no label. */
|
|
@@ -52,5 +63,5 @@ declare const Toggle: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttri
|
|
|
52
63
|
/** Called when pressed state changes */
|
|
53
64
|
onPressedChange?: (pressed: boolean) => void;
|
|
54
65
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
55
|
-
export { Toggle };
|
|
66
|
+
export { Toggle, toggleVariants };
|
|
56
67
|
//# sourceMappingURL=Toggle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;GAOG;AACH,QAAA,MAAM,cAAc;;8EAiBnB,CAAC;AAkBF,+FAA+F;AAC/F,KAAK,KAAK,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAC9D,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AACtF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;AACrD,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;AAEnD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GACjG,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACpC,MAAM,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAClC,kIAAkI;IAClI,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wCAAwC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEJ;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,MAAM;;;cA9BE,aAAa,GAAG,SAAS;aAC1B,YAAY,GAAG,SAAS;IACjC,kIAAkI;YAC1H,MAAM,GAAG,SAAS;IAC1B,wEAAwE;eAC7D,OAAO;IAClB,+BAA+B;cACrB,OAAO;IACjB,kDAAkD;qBACjC,OAAO;IACxB,wCAAwC;sBACtB,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI;2CA8D/C,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -2,33 +2,70 @@
|
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { useControllableState } from "@sixthshift/design-system/hooks";
|
|
4
4
|
import { cn } from "@sixthshift/design-system/utils";
|
|
5
|
+
import { cva } from "class-variance-authority";
|
|
5
6
|
import * as React from "react";
|
|
6
|
-
|
|
7
|
+
/**
|
|
8
|
+
* Geometry and behaviour only; every colour reads a `--toggle-*` token decided
|
|
9
|
+
* by src/components/Toggle/toggle.recipe.css.
|
|
10
|
+
*
|
|
11
|
+
* Duplicated from Button on purpose, not shared: a toggle looks like a button
|
|
12
|
+
* but is its own component, so importing Toggle must not pull in Button. The
|
|
13
|
+
* two start identical and are free to drift.
|
|
14
|
+
*/
|
|
15
|
+
const toggleVariants = cva(
|
|
16
|
+
// One literal, deliberately — see Button.tsx for the sorter trap.
|
|
17
|
+
"toggle border-(color:--toggle-border) focus-visible:ring-(color:--toggle-ring) inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md bg-(--toggle-bg) font-medium text-(--toggle-fg) text-sm transition-colors hover:bg-(--toggle-bg-hovered) focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 active:bg-(--toggle-bg-pressed) disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
|
|
18
|
+
variants: {
|
|
19
|
+
size: {
|
|
20
|
+
xs: "h-7 rounded-md px-2 text-xs",
|
|
21
|
+
sm: "h-8 rounded-md px-3 text-xs",
|
|
22
|
+
md: "h-9 px-4 py-2",
|
|
23
|
+
lg: "h-10 rounded-md px-8",
|
|
24
|
+
xl: "h-12 rounded-md px-10 text-base",
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
defaultVariants: {
|
|
28
|
+
size: "md",
|
|
29
|
+
},
|
|
30
|
+
});
|
|
31
|
+
/** The non-colour half of `variant` — border width and elevation. */
|
|
32
|
+
const variantStructure = {
|
|
33
|
+
solid: "shadow",
|
|
34
|
+
outline: "border shadow-xs",
|
|
35
|
+
ghost: "",
|
|
36
|
+
};
|
|
37
|
+
/** Squares the box at whatever size is set, and drops the horizontal padding. */
|
|
38
|
+
const iconOnlyGeometry = {
|
|
39
|
+
xs: "w-7 px-0",
|
|
40
|
+
sm: "w-8 px-0",
|
|
41
|
+
md: "w-9 px-0",
|
|
42
|
+
lg: "w-10 px-0",
|
|
43
|
+
xl: "w-12 px-0",
|
|
44
|
+
};
|
|
7
45
|
/**
|
|
8
46
|
* A single button that toggles between pressed and unpressed, for a binary
|
|
9
47
|
* setting styled like an action (e.g. a bold/italic button in a toolbar) —
|
|
10
48
|
* for a set of mutually exclusive or multi-select options, use `ToggleGroup`
|
|
11
49
|
* instead.
|
|
12
50
|
*
|
|
13
|
-
*
|
|
14
|
-
* `
|
|
15
|
-
*
|
|
16
|
-
* pressed
|
|
17
|
-
* keyed off the `data-state="on" |
|
|
18
|
-
* alongside `aria-pressed`.
|
|
51
|
+
* Looks like a Button and takes the same `variant`/`intent`/`size` axes, plus
|
|
52
|
+
* `iconOnly` for a toolbar toggle whose whole content is an icon — but it is
|
|
53
|
+
* its own component, with its own classes and `--toggle-*` tokens, and
|
|
54
|
+
* imports nothing from Button. Every colour, pressed state included, lives in
|
|
55
|
+
* `src/components/Toggle/toggle.recipe.css`, keyed off the `data-state="on" |
|
|
56
|
+
* "off"` attribute this component renders alongside `aria-pressed`.
|
|
19
57
|
*
|
|
20
58
|
* Controlled via `pressed`/`defaultPressed`/`onPressedChange`
|
|
21
59
|
* (`useControllableState`).
|
|
22
60
|
*/
|
|
23
|
-
const Toggle = React.forwardRef(({ className, variant, intent, brand, size, iconOnly = false, pressed: controlledPressed, defaultPressed = false, onPressedChange, disabled, children, ...props }, ref) => {
|
|
61
|
+
const Toggle = React.forwardRef(({ className, variant = "solid", intent = "neutral", brand, size, iconOnly = false, pressed: controlledPressed, defaultPressed = false, onPressedChange, disabled, children, ...props }, ref) => {
|
|
24
62
|
const [pressed, setPressed] = useControllableState({
|
|
25
63
|
value: controlledPressed,
|
|
26
64
|
defaultValue: defaultPressed,
|
|
27
65
|
onChange: onPressedChange,
|
|
28
66
|
});
|
|
29
|
-
|
|
30
|
-
return (_jsx("button", { type: "button", "aria-pressed": pressed, "data-state": pressed ? "on" : "off", disabled: disabled, ref: ref, onClick: () => setPressed(!pressed), ...recipe, className: cn(recipe.className, className), ...props, children: children }));
|
|
67
|
+
return (_jsx("button", { type: "button", "aria-pressed": pressed, "data-state": pressed ? "on" : "off", "data-variant": variant, "data-intent": intent, "data-brand": brand, disabled: disabled, ref: ref, onClick: () => setPressed(!pressed), className: cn(variantStructure[variant], toggleVariants({ size, className: cn(iconOnly ? iconOnlyGeometry[size ?? "md"] : undefined, className) })), ...props, children: children }));
|
|
31
68
|
});
|
|
32
69
|
Toggle.displayName = "Toggle";
|
|
33
|
-
export { Toggle };
|
|
70
|
+
export { Toggle, toggleVariants };
|
|
34
71
|
//# sourceMappingURL=Toggle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;GAOG;AACH,MAAM,cAAc,GAAG,GAAG;AACxB,kEAAkE;AAClE,8eAA8e,EAC9e;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,6BAA6B;YACjC,EAAE,EAAE,6BAA6B;YACjC,EAAE,EAAE,eAAe;YACnB,EAAE,EAAE,sBAAsB;YAC1B,EAAE,EAAE,iCAAiC;SACtC;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;KACX;CACF,CACF,CAAC;AAEF,qEAAqE;AACrE,MAAM,gBAAgB,GAA2B;IAC/C,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,kBAAkB;IAC3B,KAAK,EAAE,EAAE;CACV,CAAC;AAEF,iFAAiF;AACjF,MAAM,gBAAgB,GAA2B;IAC/C,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,WAAW;IACf,EAAE,EAAE,WAAW;CAChB,CAAC;AA0BF;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CACE,EACE,SAAS,EACT,OAAO,GAAG,OAAO,EACjB,MAAM,GAAG,SAAS,EAClB,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,OAAO,EAAE,iBAAiB,EAC1B,cAAc,GAAG,KAAK,EACtB,eAAe,EACf,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,oBAAoB,CAAC;QACjD,KAAK,EAAE,iBAAiB;QACxB,YAAY,EAAE,cAAc;QAC5B,QAAQ,EAAE,eAAe;KAC1B,CAAC,CAAC;IAEH,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,kBACC,OAAO,gBAET,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,kBACpB,OAAO,iBACR,MAAM,gBACP,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,EACnC,SAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,cAAc,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,CAAC,CAAC,KAC/I,KAAK,YAER,QAAQ,GACF,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AACF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { Toggle, type ToggleProps } from "./Toggle.js";
|
|
1
|
+
export { Toggle, type ToggleIntent, type ToggleIntentName, type ToggleProps, type ToggleVariant, type ToggleVariantName, toggleVariants, } from "./Toggle.js";
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,cAAc,GACf,MAAM,UAAU,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { Toggle } from "./Toggle.js";
|
|
1
|
+
export { Toggle, toggleVariants, } from "./Toggle.js";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EAMN,cAAc,GACf,MAAM,UAAU,CAAC"}
|
|
@@ -10,10 +10,10 @@ import type { ToggleGroupProps } from "./toggleGroup.types.js";
|
|
|
10
10
|
* `defaultValue`/`onValueChange` follow `type`: a string for single, a
|
|
11
11
|
* string array for multiple (`useControllableState`).
|
|
12
12
|
*
|
|
13
|
-
* Items
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
13
|
+
* Items look like Toggles but carry their own duplicated styling and
|
|
14
|
+
* `--toggle-group-item-*` tokens (toggle-group.recipe.css), and take
|
|
15
|
+
* the same `variant`/`intent`, with one difference: `size` excludes `"xl"`
|
|
16
|
+
* (too large for grouped toggles) — see
|
|
17
17
|
* `toggleGroup.types.ts`. `appearance` chooses `"segmented"` (items joined
|
|
18
18
|
* into one border) or `"separate"` (individually bordered, gapped) rendering.
|
|
19
19
|
*/
|
|
@@ -12,10 +12,10 @@ import { ToggleGroupSingle } from "./ToggleGroupSingle.js";
|
|
|
12
12
|
* `defaultValue`/`onValueChange` follow `type`: a string for single, a
|
|
13
13
|
* string array for multiple (`useControllableState`).
|
|
14
14
|
*
|
|
15
|
-
* Items
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
15
|
+
* Items look like Toggles but carry their own duplicated styling and
|
|
16
|
+
* `--toggle-group-item-*` tokens (toggle-group.recipe.css), and take
|
|
17
|
+
* the same `variant`/`intent`, with one difference: `size` excludes `"xl"`
|
|
18
|
+
* (too large for grouped toggles) — see
|
|
19
19
|
* `toggleGroup.types.ts`. `appearance` chooses `"segmented"` (items joined
|
|
20
20
|
* into one border) or `"separate"` (individually bordered, gapped) rendering.
|
|
21
21
|
*/
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import type { ToggleGroupBaseProps, ToggleGroupOption } from "./toggleGroup.types.js";
|
|
3
|
-
declare const ToggleGroupItem: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & Required<Pick<ToggleGroupBaseProps, "
|
|
3
|
+
declare const ToggleGroupItem: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & Required<Pick<ToggleGroupBaseProps, "size" | "variant" | "intent" | "iconOnly" | "orientation" | "appearance">> & {
|
|
4
4
|
option: ToggleGroupOption;
|
|
5
5
|
selected: boolean;
|
|
6
6
|
groupDisabled?: boolean | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleGroupItem.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToggleGroupItem.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AA+CnF,QAAA,MAAM,eAAe;YAPT,iBAAiB;cACf,OAAO;oBACD,OAAO,GAAG,SAAS;WAC5B,MAAM;WACN,MAAM;2CAwChB,CAAC;AAGF,OAAO,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -1,19 +1,49 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from "@sixthshift/design-system/utils";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
3
4
|
import * as React from "react";
|
|
4
|
-
|
|
5
|
+
/**
|
|
6
|
+
* An item's geometry. Duplicated from Button's on purpose — ToggleGroup is its
|
|
7
|
+
* own component and imports neither Button nor Toggle. Every colour reads a
|
|
8
|
+
* `--toggle-group-item-*` token from toggle-group.recipe.css.
|
|
9
|
+
*/
|
|
10
|
+
const itemVariants = cva(
|
|
11
|
+
// One literal, deliberately — see Button.tsx for the sorter trap.
|
|
12
|
+
"toggle-group-item border-(color:--toggle-group-item-border) focus-visible:ring-(color:--toggle-group-item-ring) inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md bg-(--toggle-group-item-bg) font-medium text-(--toggle-group-item-fg) text-sm transition-colors hover:bg-(--toggle-group-item-bg-hovered) focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 active:bg-(--toggle-group-item-bg-pressed) disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
|
|
13
|
+
variants: {
|
|
14
|
+
size: {
|
|
15
|
+
xs: "h-7 rounded-md px-2 text-xs",
|
|
16
|
+
sm: "h-8 rounded-md px-3 text-xs",
|
|
17
|
+
md: "h-9 px-4 py-2",
|
|
18
|
+
lg: "h-10 rounded-md px-8",
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
defaultVariants: { size: "md" },
|
|
22
|
+
});
|
|
23
|
+
/** The non-colour half of `variant` — border width and elevation. */
|
|
24
|
+
const variantStructure = {
|
|
25
|
+
solid: "shadow",
|
|
26
|
+
outline: "border shadow-xs",
|
|
27
|
+
ghost: "",
|
|
28
|
+
};
|
|
29
|
+
/** Squares the item at whatever size is set, and drops the horizontal padding. */
|
|
30
|
+
const iconOnlyGeometry = {
|
|
31
|
+
xs: "w-7 px-0",
|
|
32
|
+
sm: "w-8 px-0",
|
|
33
|
+
md: "w-9 px-0",
|
|
34
|
+
lg: "w-10 px-0",
|
|
35
|
+
};
|
|
5
36
|
const ToggleGroupItem = React.forwardRef(({ option, selected, groupDisabled, appearance, orientation, variant, intent, size, iconOnly, index, total, ...props }, ref) => {
|
|
6
37
|
const isDisabled = groupDisabled || option.disabled;
|
|
7
38
|
const isFirst = index === 0;
|
|
8
39
|
const isLast = index === total - 1;
|
|
9
40
|
const isVertical = orientation === "vertical";
|
|
10
41
|
const isSegmented = appearance === "segmented";
|
|
11
|
-
// Both
|
|
12
|
-
//
|
|
13
|
-
//
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
// Segmented: only override rounding (let buttonVariants handle border/color).
|
|
42
|
+
// Both appearances share the same base and the pressed-state cells in
|
|
43
|
+
// toggle-group.recipe.css. Segmented just overrides the rounding so items
|
|
44
|
+
// join cleanly.
|
|
45
|
+
return (_jsx("button", { ref: ref, "data-variant": variant, "data-intent": intent, type: "button", "data-state": selected ? "on" : "off", disabled: isDisabled, "aria-label": option.ariaLabel, className: cn(variantStructure[variant], itemVariants({ size, className: iconOnly ? iconOnlyGeometry[size] : undefined }),
|
|
46
|
+
// Segmented: only override rounding (the variant handles border/colour).
|
|
17
47
|
// Negative margin collapses double borders between outline items.
|
|
18
48
|
isSegmented &&
|
|
19
49
|
(isVertical
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleGroupItem.js","sourceRoot":"","sources":["../../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ToggleGroupItem.js","sourceRoot":"","sources":["../../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;GAIG;AACH,MAAM,YAAY,GAAG,GAAG;AACtB,kEAAkE;AAClE,2jBAA2jB,EAC3jB;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,6BAA6B;YACjC,EAAE,EAAE,6BAA6B;YACjC,EAAE,EAAE,eAAe;YACnB,EAAE,EAAE,sBAAsB;SAC3B;KACF;IACD,eAAe,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE;CAChC,CACF,CAAC;AAEF,qEAAqE;AACrE,MAAM,gBAAgB,GAA2B;IAC/C,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,kBAAkB;IAC3B,KAAK,EAAE,EAAE;CACV,CAAC;AAEF,kFAAkF;AAClF,MAAM,gBAAgB,GAA2B;IAC/C,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,WAAW;CAChB,CAAC;AAWF,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC7H,MAAM,UAAU,GAAG,aAAa,IAAI,MAAM,CAAC,QAAQ,CAAC;IACpD,MAAM,OAAO,GAAG,KAAK,KAAK,CAAC,CAAC;IAC5B,MAAM,MAAM,GAAG,KAAK,KAAK,KAAK,GAAG,CAAC,CAAC;IACnC,MAAM,UAAU,GAAG,WAAW,KAAK,UAAU,CAAC;IAC9C,MAAM,WAAW,GAAG,UAAU,KAAK,WAAW,CAAC;IAE/C,sEAAsE;IACtE,0EAA0E;IAC1E,gBAAgB;IAChB,OAAO,CACL,iBACE,GAAG,EAAE,GAAG,kBACM,OAAO,iBACR,MAAM,EACnB,IAAI,EAAC,QAAQ,gBAED,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACnC,QAAQ,EAAE,UAAU,gBACR,MAAM,CAAC,SAAS,EAC5B,SAAS,EAAE,EAAE,CACX,gBAAgB,CAAC,OAAO,CAAC,EACzB,YAAY,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;QAChF,yEAAyE;QACzE,kEAAkE;QAClE,WAAW;YACT,CAAC,UAAU;gBACT,CAAC,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,IAAI,cAAc,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC;gBAC/F,CAAC,CAAC,EAAE,CAAC,cAAc,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,IAAI,cAAc,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,CAAC,CACrG,KACG,KAAK,YAER,MAAM,CAAC,KAAK,GACN,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AACF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -3,10 +3,10 @@ declare const ToggleGroupMultiple: React.ForwardRefExoticComponent<Omit<React.HT
|
|
|
3
3
|
options: readonly import("./toggleGroup.types.js").ToggleGroupOption[];
|
|
4
4
|
appearance?: "segmented" | "separate";
|
|
5
5
|
orientation?: "vertical" | "horizontal";
|
|
6
|
-
variant?:
|
|
7
|
-
intent?: import("
|
|
6
|
+
variant?: import("./toggleGroup.types.js").ToggleGroupVariant;
|
|
7
|
+
intent?: import("./toggleGroup.types.js").ToggleGroupIntent;
|
|
8
8
|
brand?: string | undefined;
|
|
9
|
-
size?:
|
|
9
|
+
size?: import("./toggleGroup.types.js").ToggleGroupSize;
|
|
10
10
|
iconOnly?: boolean;
|
|
11
11
|
disabled?: boolean;
|
|
12
12
|
name?: string;
|
|
@@ -3,10 +3,10 @@ declare const ToggleGroupSingle: React.ForwardRefExoticComponent<Omit<React.HTML
|
|
|
3
3
|
options: readonly import("./toggleGroup.types.js").ToggleGroupOption[];
|
|
4
4
|
appearance?: "segmented" | "separate";
|
|
5
5
|
orientation?: "vertical" | "horizontal";
|
|
6
|
-
variant?:
|
|
7
|
-
intent?: import("
|
|
6
|
+
variant?: import("./toggleGroup.types.js").ToggleGroupVariant;
|
|
7
|
+
intent?: import("./toggleGroup.types.js").ToggleGroupIntent;
|
|
8
8
|
brand?: string | undefined;
|
|
9
|
-
size?:
|
|
9
|
+
size?: import("./toggleGroup.types.js").ToggleGroupSize;
|
|
10
10
|
iconOnly?: boolean;
|
|
11
11
|
disabled?: boolean;
|
|
12
12
|
name?: string;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { ToggleGroup } from "./ToggleGroup.js";
|
|
2
|
-
export type { ToggleGroupOption, ToggleGroupProps } from "./toggleGroup.types.js";
|
|
2
|
+
export type { ToggleGroupIntent, ToggleGroupIntentName, ToggleGroupOption, ToggleGroupProps, ToggleGroupSize, ToggleGroupVariant, ToggleGroupVariantName, } from "./toggleGroup.types.js";
|
|
3
3
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,iBAAiB,EACjB,qBAAqB,EACrB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,qBAAqB,CAAC"}
|