@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
|
@@ -18,10 +18,11 @@ export type CheckboxGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onC
|
|
|
18
18
|
onValueChange?: (value: string[]) => void;
|
|
19
19
|
/** Layout orientation */
|
|
20
20
|
orientation?: "vertical" | "horizontal";
|
|
21
|
-
/**
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
/**
|
|
22
|
+
* How the options render: `control` (the default) is one `Checkbox` per option;
|
|
23
|
+
* `segmented` and `separate` are a row or column of buttons, joined or apart.
|
|
24
|
+
*/
|
|
25
|
+
appearance?: "control" | "segmented" | "separate";
|
|
25
26
|
/** Input name for form submission */
|
|
26
27
|
name?: string;
|
|
27
28
|
/** Disable all options */
|
|
@@ -34,17 +35,19 @@ export type CheckboxGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onC
|
|
|
34
35
|
* selection, via the `value`/`defaultValue`/`onValueChange` triad
|
|
35
36
|
* (`useControllableState`).
|
|
36
37
|
*
|
|
37
|
-
* `
|
|
38
|
+
* `appearance="control"` (the default) renders one `Checkbox` per option, each
|
|
38
39
|
* with its own visible label, laid out in a column or row per
|
|
39
|
-
* `orientation`. `
|
|
40
|
-
* re-skinned `Checkbox` — a row/column of plain
|
|
41
|
-
* `role="checkbox"` and no separate label; contiguous buttons
|
|
42
|
-
* share borders (`
|
|
43
|
-
*
|
|
40
|
+
* `orientation`. `appearance="segmented"` or `"separate"` is a separate
|
|
41
|
+
* rendering path — not a re-skinned `Checkbox` — a row/column of plain
|
|
42
|
+
* buttons with `role="checkbox"` and no separate label; contiguous buttons
|
|
43
|
+
* touch and share borders (`segmented`) or sit apart with their own rounded
|
|
44
|
+
* corners (`separate`). One prop rather than a
|
|
45
|
+
* `variant` + `appearance` pair, so "appearance without buttons" — which
|
|
46
|
+
* used to mean nothing — cannot be written.
|
|
44
47
|
*
|
|
45
|
-
* Form submission only happens when `name` is set.
|
|
48
|
+
* Form submission only happens when `name` is set. With `control`
|
|
46
49
|
* that means each underlying `Checkbox` gets `name`, so one hidden native
|
|
47
|
-
* checkbox input is rendered per option;
|
|
50
|
+
* checkbox input is rendered per option; with the button appearances the group
|
|
48
51
|
* itself renders one hidden `<input type="checkbox">` per *currently
|
|
49
52
|
* selected* value.
|
|
50
53
|
*
|
|
@@ -62,10 +65,11 @@ declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<React.HTMLAttr
|
|
|
62
65
|
onValueChange?: (value: string[]) => void;
|
|
63
66
|
/** Layout orientation */
|
|
64
67
|
orientation?: "vertical" | "horizontal";
|
|
65
|
-
/**
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
68
|
+
/**
|
|
69
|
+
* How the options render: `control` (the default) is one `Checkbox` per option;
|
|
70
|
+
* `segmented` and `separate` are a row or column of buttons, joined or apart.
|
|
71
|
+
*/
|
|
72
|
+
appearance?: "control" | "segmented" | "separate";
|
|
69
73
|
/** Input name for form submission */
|
|
70
74
|
name?: string;
|
|
71
75
|
/** Disable all options */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,mBAAmB,GAAG;IAChC,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC,GAAG;IACnG,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,wBAAwB;IACxB,OAAO,EAAE,SAAS,mBAAmB,EAAE,CAAC;IACxC,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,yBAAyB;IACzB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC
|
|
1
|
+
{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,mBAAmB,GAAG;IAChC,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC,GAAG;IACnG,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,wBAAwB;IACxB,OAAO,EAAE,SAAS,mBAAmB,EAAE,CAAC;IACxC,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,yBAAyB;IACzB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAClD,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,QAAA,MAAM,aAAa;IA/CjB,iCAAiC;YACzB,MAAM,EAAE;IAChB,oDAAoD;mBACrC,MAAM,EAAE;IACvB,wBAAwB;aACf,SAAS,mBAAmB,EAAE;IACvC,oCAAoC;oBACpB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI;IACzC,yBAAyB;kBACX,UAAU,GAAG,YAAY;IACvC;;;OAGG;iBACU,SAAS,GAAG,WAAW,GAAG,UAAU;IACjD,qCAAqC;WAC9B,MAAM;IACb,0BAA0B;eACf,OAAO;IAClB,kDAAkD;aACzC,MAAM,IAAI;wCA6JpB,CAAC;AAGF,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -9,24 +9,26 @@ import * as React from "react";
|
|
|
9
9
|
* selection, via the `value`/`defaultValue`/`onValueChange` triad
|
|
10
10
|
* (`useControllableState`).
|
|
11
11
|
*
|
|
12
|
-
* `
|
|
12
|
+
* `appearance="control"` (the default) renders one `Checkbox` per option, each
|
|
13
13
|
* with its own visible label, laid out in a column or row per
|
|
14
|
-
* `orientation`. `
|
|
15
|
-
* re-skinned `Checkbox` — a row/column of plain
|
|
16
|
-
* `role="checkbox"` and no separate label; contiguous buttons
|
|
17
|
-
* share borders (`
|
|
18
|
-
*
|
|
14
|
+
* `orientation`. `appearance="segmented"` or `"separate"` is a separate
|
|
15
|
+
* rendering path — not a re-skinned `Checkbox` — a row/column of plain
|
|
16
|
+
* buttons with `role="checkbox"` and no separate label; contiguous buttons
|
|
17
|
+
* touch and share borders (`segmented`) or sit apart with their own rounded
|
|
18
|
+
* corners (`separate`). One prop rather than a
|
|
19
|
+
* `variant` + `appearance` pair, so "appearance without buttons" — which
|
|
20
|
+
* used to mean nothing — cannot be written.
|
|
19
21
|
*
|
|
20
|
-
* Form submission only happens when `name` is set.
|
|
22
|
+
* Form submission only happens when `name` is set. With `control`
|
|
21
23
|
* that means each underlying `Checkbox` gets `name`, so one hidden native
|
|
22
|
-
* checkbox input is rendered per option;
|
|
24
|
+
* checkbox input is rendered per option; with the button appearances the group
|
|
23
25
|
* itself renders one hidden `<input type="checkbox">` per *currently
|
|
24
26
|
* selected* value.
|
|
25
27
|
*
|
|
26
28
|
* Renders `role="group"`; focus leaving the whole group — not just moving
|
|
27
29
|
* between options — fires `onBlur`.
|
|
28
30
|
*/
|
|
29
|
-
const CheckboxGroup = React.forwardRef(({ value: controlledValue, defaultValue = [], options, onValueChange, orientation = "vertical",
|
|
31
|
+
const CheckboxGroup = React.forwardRef(({ value: controlledValue, defaultValue = [], options, onValueChange, orientation = "vertical", appearance = "control", name, disabled, onBlur, className, ...props }, ref) => {
|
|
30
32
|
const [value, setValue] = useControllableState({
|
|
31
33
|
value: controlledValue,
|
|
32
34
|
defaultValue,
|
|
@@ -53,7 +55,7 @@ const CheckboxGroup = React.forwardRef(({ value: controlledValue, defaultValue =
|
|
|
53
55
|
setValue(value.filter((v) => v !== optionValue));
|
|
54
56
|
}
|
|
55
57
|
};
|
|
56
|
-
if (
|
|
58
|
+
if (appearance === "segmented" || appearance === "separate") {
|
|
57
59
|
const isVertical = orientation === "vertical";
|
|
58
60
|
const isSegmented = appearance === "segmented";
|
|
59
61
|
return (
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoC/B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CACpC,CACE,EACE,KAAK,EAAE,eAAe,EACtB,YAAY,GAAG,EAAE,EACjB,OAAO,EACP,aAAa,EACb,WAAW,GAAG,UAAU,EACxB,UAAU,GAAG,SAAS,EACtB,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,oBAAoB,CAAC;QAC7C,KAAK,EAAE,eAAe;QACtB,YAAY;QACZ,QAAQ,EAAE,aAAa;KACxB,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC3D,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,IAA2B,EAAE,EAAE;QAC9B,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;QACxB,IAAI,OAAO,GAAG,KAAK,UAAU;YAAE,GAAG,CAAC,IAAI,CAAC,CAAC;aACpC,IAAI,GAAG;YAAG,GAAgD,CAAC,OAAO,GAAG,IAAI,CAAC;IACjF,CAAC,EACD,CAAC,GAAG,CAAC,CACN,CAAC;IAEF,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,CAAmB,EAAE,EAAE;QACtB,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAqB,CAAC,EAAE,CAAC;YACzD,MAAM,EAAE,EAAE,CAAC;QACb,CAAC;IACH,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,WAAmB,EAAE,OAAgB,EAAE,EAAE;QACnE,IAAI,OAAO,EAAE,CAAC;YACZ,QAAQ,CAAC,CAAC,GAAG,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;QACpC,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC;QACnD,CAAC;IACH,CAAC,CAAC;IAEF,IAAI,UAAU,KAAK,WAAW,IAAI,UAAU,KAAK,UAAU,EAAE,CAAC;QAC5D,MAAM,UAAU,GAAG,WAAW,KAAK,UAAU,CAAC;QAC9C,MAAM,WAAW,GAAG,UAAU,KAAK,WAAW,CAAC;QAE/C,OAAO;QACL,2GAA2G;QAC3G,eACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,OAAO,EACZ,aAAa,EAAE,cAAc,EAC7B,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,WAAW,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,KAC3H,KAAK,aAER,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;oBAC7B,MAAM,SAAS,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;oBAC/C,MAAM,UAAU,GAAG,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC;oBAC/C,MAAM,OAAO,GAAG,KAAK,KAAK,CAAC,CAAC;oBAC5B,MAAM,MAAM,GAAG,KAAK,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;oBAE5C,OAAO;oBACL,0HAA0H;oBAC1H,iBAEE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,kBACD,SAAS,EACvB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,SAAS,CAAC,EAC3D,SAAS,EAAE,EAAE,CACX,yFAAyF,EACzF,6GAA6G,EAC7G,iDAAiD,EACjD,WAAW;4BACT,CAAC,CAAC,EAAE,CACA,QAAQ,EACR,UAAU;gCACR,CAAC,CAAC,EAAE,CAAC,OAAO,IAAI,cAAc,EAAE,MAAM,IAAI,cAAc,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC;gCAC/E,CAAC,CAAC,EAAE,CAAC,OAAO,IAAI,cAAc,EAAE,MAAM,IAAI,cAAc,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,CAClF;4BACH,CAAC,CAAC,mBAAmB,EACvB,SAAS,CAAC,CAAC,CAAC,kDAAkD,CAAC,CAAC,CAAC,qEAAqE,CACvI,YAEA,MAAM,CAAC,KAAK,IArBR,MAAM,CAAC,KAAK,CAsBV,CACV,CAAC;gBACJ,CAAC,CAAC,EACD,IAAI,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAe,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAArC,CAAC,CAAwC,CAAC,IAC5E,CACP,CAAC;IACJ,CAAC;IAED,OAAO;IACL,mGAAmG;IACnG,cACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,OAAO,EACZ,aAAa,EAAE,cAAc,EAC7B,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,EAAE,SAAS,CAAC,KAC9F,KAAK,YAER,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YACtB,MAAM,SAAS,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC/C,MAAM,UAAU,GAAG,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC;YAE/C,OAAO,CACL,KAAC,QAAQ,OAEH,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC1B,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,SAAS,EAClB,eAAe,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,kBAAkB,CAAC,MAAM,CAAC,KAAK,EAAE,OAAkB,CAAC,EAClF,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,MAAM,CAAC,KAAK,IANd,MAAM,CAAC,KAAK,CAOjB,CACH,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AACF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import type { HTMLAttributes, ReactNode } from "react";
|
|
2
|
+
import { type ButtonVariant } from "../../Button/index.js";
|
|
2
3
|
export type Action = {
|
|
3
4
|
id: string;
|
|
4
5
|
label: string;
|
|
5
6
|
icon?: ReactNode;
|
|
6
7
|
onClick: () => void;
|
|
7
8
|
disabled?: boolean;
|
|
8
|
-
variant?:
|
|
9
|
+
variant?: ButtonVariant;
|
|
9
10
|
};
|
|
10
11
|
export type ToolbarProps = HTMLAttributes<HTMLDivElement> & {
|
|
11
12
|
actions?: Action[] | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Code/Workspace/Toolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Code/Workspace/Toolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAE1D,MAAM,MAAM,MAAM,GAAG;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC1D,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,+EAAqF,YAAY,gCAwBpH,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components/Code/Workspace/Toolbar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../src/components/Code/Workspace/Toolbar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,MAAM,EAAsB,MAAM,cAAc,CAAC;AAkB1D;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IACvH,OAAO,CACL,kBAAS,KAAK,EAAE,SAAS,EAAE,0FAA0F,SAAS,IAAI,EAAE,EAAE,aAEpI,cAAK,SAAS,EAAC,yBAAyB,YAAE,WAAW,GAAO,EAG5D,eAAK,SAAS,EAAC,yBAAyB,aACrC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,MAAC,MAAM,IAAiB,OAAO,EAAE,MAAM,CAAC,OAAO,IAAI,OAAO,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,aACrH,MAAM,CAAC,IAAI,IAAI,eAAM,SAAS,EAAC,MAAM,YAAE,MAAM,CAAC,IAAI,GAAQ,EAC1D,MAAM,CAAC,KAAK,KAFF,MAAM,CAAC,EAAE,CAGb,CACV,CAAC,EACD,aAAa,IAAI,CAChB,MAAC,MAAM,IAAC,OAAO,EAAE,aAAa,CAAC,OAAO,IAAI,OAAO,EAAE,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,aAAa,CAAC,OAAO,EAAE,QAAQ,EAAE,aAAa,CAAC,QAAQ,aAC1H,aAAa,CAAC,IAAI,IAAI,eAAM,SAAS,EAAC,MAAM,YAAE,aAAa,CAAC,IAAI,GAAQ,EACxE,aAAa,CAAC,KAAK,IACb,CACV,EACA,YAAY,IACT,IACF,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
+
import { type MessageIntentName } from "@sixthshift/design-system/message";
|
|
1
2
|
import * as React from "react";
|
|
2
3
|
export type FormFieldFeedback = {
|
|
3
4
|
message: string;
|
|
4
|
-
|
|
5
|
+
/** Message's intents, less `neutral` — feedback always reports an outcome. */
|
|
6
|
+
intent: Exclude<MessageIntentName, "neutral">;
|
|
5
7
|
};
|
|
6
8
|
export type FormFieldProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
7
9
|
label: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAW,KAAK,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAGpF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,8EAA8E;IAC9E,MAAM,EAAE,OAAO,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAClE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,4EAA4E;AAC5E,MAAM,MAAM,qBAAqB,GAAG;IAClC,yEAAyE;IACzE,EAAE,EAAE,MAAM,CAAC;IACX,sHAAsH;IACtH,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,yFAAyF;IACzF,OAAO,EAAE,OAAO,CAAC;IACjB,kFAAkF;IAClF,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAIF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,oCAA2C,CAAC;AAErE;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,SAAS;WA9CN,KAAK,CAAC,SAAS;kBACR,KAAK,CAAC,SAAS;eAClB,iBAAiB;eACjB,OAAO;wCAqGnB,CAAC;AAGF,OAAO,EAAE,SAAS,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -8,15 +8,15 @@ export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
|
|
|
8
8
|
*
|
|
9
9
|
* Renders a plain `<input>` unless `iconLeft` or `iconRight` is supplied, in
|
|
10
10
|
* which case it wraps the input in a relatively positioned container so an
|
|
11
|
-
* icon — or an icon-styled button
|
|
12
|
-
*
|
|
11
|
+
* icon — or an icon-styled button — can sit inside the field's padding
|
|
12
|
+
* without affecting layout.
|
|
13
13
|
*
|
|
14
14
|
* Controlled or uncontrolled exactly like a native input (`value`/`onChange`
|
|
15
15
|
* or `defaultValue`), and `type` is forwarded as-is, so `type="password"`,
|
|
16
16
|
* `type="number"`, etc. all work.
|
|
17
17
|
*
|
|
18
18
|
* Meant to be wrapped by `FormField` for label, description and validation
|
|
19
|
-
* wiring,
|
|
19
|
+
* wiring. For search, use `SearchInput`, which draws its own field.
|
|
20
20
|
*/
|
|
21
21
|
declare const Input: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
|
|
22
22
|
iconLeft?: React.ReactNode;
|
|
@@ -10,15 +10,15 @@ const iconSlotStyles = `absolute top-1/2 -translate-y-1/2 text-(--input-icon-fg)
|
|
|
10
10
|
*
|
|
11
11
|
* Renders a plain `<input>` unless `iconLeft` or `iconRight` is supplied, in
|
|
12
12
|
* which case it wraps the input in a relatively positioned container so an
|
|
13
|
-
* icon — or an icon-styled button
|
|
14
|
-
*
|
|
13
|
+
* icon — or an icon-styled button — can sit inside the field's padding
|
|
14
|
+
* without affecting layout.
|
|
15
15
|
*
|
|
16
16
|
* Controlled or uncontrolled exactly like a native input (`value`/`onChange`
|
|
17
17
|
* or `defaultValue`), and `type` is forwarded as-is, so `type="password"`,
|
|
18
18
|
* `type="number"`, etc. all work.
|
|
19
19
|
*
|
|
20
20
|
* Meant to be wrapped by `FormField` for label, description and validation
|
|
21
|
-
* wiring,
|
|
21
|
+
* wiring. For search, use `SearchInput`, which draws its own field.
|
|
22
22
|
*/
|
|
23
23
|
const Input = React.forwardRef(({ className, type, iconLeft, iconRight, ...props }, ref) => {
|
|
24
24
|
if (iconLeft || iconRight) {
|
|
@@ -31,7 +31,7 @@ export const Markdown = React.forwardRef(({ children, className }, ref) => (_jsx
|
|
|
31
31
|
ul: ({ children }) => _jsx("ul", { className: "mt-2 flex list-disc flex-col gap-1 pl-5", children: children }),
|
|
32
32
|
ol: ({ children }) => _jsx("ol", { className: "mt-2 flex list-decimal flex-col gap-1 pl-5", children: children }),
|
|
33
33
|
li: ({ children }) => _jsx("li", { className: "text-fg-default text-sm", children: children }),
|
|
34
|
-
code: ({ children }) => _jsx("code", { className: "rounded bg-bg-subtle px-1.5 py-0.5 font-mono text-fg-emphasis text-xs", children: children }),
|
|
34
|
+
code: ({ children }) => _jsx("code", { className: "rounded-sm bg-bg-subtle px-1.5 py-0.5 font-mono text-fg-emphasis text-xs", children: children }),
|
|
35
35
|
pre: ({ children }) => _jsx("pre", { className: "mt-2 overflow-x-auto rounded-md bg-bg-subtle p-3 font-mono text-xs", children: children }),
|
|
36
36
|
}, children: children }) })));
|
|
37
37
|
Markdown.displayName = "Markdown";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Markdown.js","sourceRoot":"","sources":["../../../src/components/Markdown/Markdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAC5D,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,aAAa,MAAM,gBAAgB,CAAC;AAO3C;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAgC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACxG,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,YACtD,KAAC,aAAa,IACZ,UAAU,EAAE;YACV,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAC,OAAO,IAAC,EAAE,EAAC,IAAI,YAAE,QAAQ,GAAW;YAC3D,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAC,OAAO,IAAC,EAAE,EAAC,IAAI,YAAE,QAAQ,GAAW;YAC3D,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,YAAE,QAAQ,GAAY;YACvE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACnB,KAAC,IAAI,IAAC,EAAE,EAAC,GAAG,EAAC,SAAS,EAAC,MAAM,YAC1B,QAAQ,GACJ,CACR;YACD,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACzB,YAAG,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,EAAC,SAAS,EAAC,yBAAyB,YACzF,QAAQ,GACP,CACL;YACD,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,aAAI,SAAS,EAAC,yCAAyC,YAAE,QAAQ,GAAM;YAC7F,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,aAAI,SAAS,EAAC,4CAA4C,YAAE,QAAQ,GAAM;YAChG,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,aAAI,SAAS,EAAC,yBAAyB,YAAE,QAAQ,GAAM;YAC7E,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,eAAM,SAAS,EAAC,
|
|
1
|
+
{"version":3,"file":"Markdown.js","sourceRoot":"","sources":["../../../src/components/Markdown/Markdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAC5D,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,aAAa,MAAM,gBAAgB,CAAC;AAO3C;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAgC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACxG,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,YACtD,KAAC,aAAa,IACZ,UAAU,EAAE;YACV,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAC,OAAO,IAAC,EAAE,EAAC,IAAI,YAAE,QAAQ,GAAW;YAC3D,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAC,OAAO,IAAC,EAAE,EAAC,IAAI,YAAE,QAAQ,GAAW;YAC3D,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,YAAE,QAAQ,GAAY;YACvE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACnB,KAAC,IAAI,IAAC,EAAE,EAAC,GAAG,EAAC,SAAS,EAAC,MAAM,YAC1B,QAAQ,GACJ,CACR;YACD,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACzB,YAAG,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,EAAC,SAAS,EAAC,yBAAyB,YACzF,QAAQ,GACP,CACL;YACD,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,aAAI,SAAS,EAAC,yCAAyC,YAAE,QAAQ,GAAM;YAC7F,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,aAAI,SAAS,EAAC,4CAA4C,YAAE,QAAQ,GAAM;YAChG,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,aAAI,SAAS,EAAC,yBAAyB,YAAE,QAAQ,GAAM;YAC7E,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,eAAM,SAAS,EAAC,0EAA0E,YAAE,QAAQ,GAAQ;YACpI,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,cAAK,SAAS,EAAC,oEAAoE,YAAE,QAAQ,GAAO;SAC5H,YAEA,QAAQ,GACK,GACZ,CACP,CAAC,CAAC;AACH,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}
|
|
@@ -52,7 +52,7 @@ export type NumberStepperProps = Omit<React.InputHTMLAttributes<HTMLInputElement
|
|
|
52
52
|
* input — so `FormField`'s `id`/`aria-describedby` wiring reaches the control
|
|
53
53
|
* — while `className` styles the surrounding group.
|
|
54
54
|
*/
|
|
55
|
-
export declare const NumberStepper: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "
|
|
55
|
+
export declare const NumberStepper: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "defaultValue" | "onChange" | "step" | "type" | "value" | "max" | "min"> & VariantProps<(props?: ({
|
|
56
56
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
57
57
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
|
|
58
58
|
/** Controlled value. */
|
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
export type ProgressBarIntentName = "neutral" | "brand" | "danger" | "success" | "warning";
|
|
3
|
+
/** Widened, like every intent prop: a consumer adds an intent in CSS, not in a release. */
|
|
4
|
+
export type ProgressBarIntent = ProgressBarIntentName | (string & {});
|
|
2
5
|
export type ProgressBarProps = {
|
|
3
6
|
completed: number;
|
|
4
7
|
total: number;
|
|
5
8
|
showFraction?: boolean;
|
|
9
|
+
/** The fill's colour family. Defaults to `brand`. */
|
|
10
|
+
intent?: ProgressBarIntent | undefined;
|
|
11
|
+
/** Name of a brand the theme defines, rendered as `data-brand`. Omitted, the bar follows the nearest `data-brand` ancestor. */
|
|
12
|
+
brand?: string | undefined;
|
|
6
13
|
/** Accessible name for the progress bar. */
|
|
7
14
|
label?: string;
|
|
8
15
|
className?: string;
|
|
@@ -20,6 +27,10 @@ export type ProgressBarProps = {
|
|
|
20
27
|
* invalid CSS or an impossible reported value — though the fraction text
|
|
21
28
|
* still shows the raw, unclamped numbers. When `total` is not positive the
|
|
22
29
|
* bar renders as indeterminate: no `aria-valuenow`/`aria-valuemax`, 0% fill.
|
|
30
|
+
*
|
|
31
|
+
* `intent` colours the fill and defaults to `brand`: progress is not an
|
|
32
|
+
* outcome, so a bar at 40% is not `success`. Pass `success` when completion
|
|
33
|
+
* really is the good news, or `danger` for a quota running out.
|
|
23
34
|
*/
|
|
24
35
|
export declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
|
|
25
36
|
//# sourceMappingURL=ProgressBar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AAC3F,2FAA2F;AAC3F,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qDAAqD;IACrD,MAAM,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACvC,+HAA+H;IAC/H,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,WAAW,yFA+BvB,CAAC"}
|
|
@@ -15,14 +15,18 @@ import * as React from "react";
|
|
|
15
15
|
* invalid CSS or an impossible reported value — though the fraction text
|
|
16
16
|
* still shows the raw, unclamped numbers. When `total` is not positive the
|
|
17
17
|
* bar renders as indeterminate: no `aria-valuenow`/`aria-valuemax`, 0% fill.
|
|
18
|
+
*
|
|
19
|
+
* `intent` colours the fill and defaults to `brand`: progress is not an
|
|
20
|
+
* outcome, so a bar at 40% is not `success`. Pass `success` when completion
|
|
21
|
+
* really is the good news, or `danger` for a quota running out.
|
|
18
22
|
*/
|
|
19
|
-
export const ProgressBar = React.forwardRef(({ completed, total, showFraction = true, label = "Progress", className }, ref) => {
|
|
23
|
+
export const ProgressBar = React.forwardRef(({ completed, total, intent = "brand", brand, showFraction = true, label = "Progress", className }, ref) => {
|
|
20
24
|
// A caller can hand us anything; the bar must not render an out-of-range
|
|
21
25
|
// width (a negative `width` is invalid CSS) or report impossible progress.
|
|
22
26
|
const isMeasurable = total > 0;
|
|
23
27
|
const clamped = isMeasurable ? Math.min(Math.max(completed, 0), total) : 0;
|
|
24
28
|
const percentage = isMeasurable ? (clamped / total) * 100 : 0;
|
|
25
|
-
return (_jsxs("div", { ref: ref, className: cn("flex items-center gap-3", className), children: [_jsx("div", { role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": isMeasurable ? total : undefined, "aria-valuenow": isMeasurable ? clamped : undefined, "aria-valuetext": isMeasurable ? `${clamped} of ${total}` : undefined, className: "h-2 flex-1 overflow-hidden rounded-full bg-bg
|
|
29
|
+
return (_jsxs("div", { ref: ref, "data-intent": intent, "data-brand": brand, className: cn("progress-bar flex items-center gap-3", className), children: [_jsx("div", { role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": isMeasurable ? total : undefined, "aria-valuenow": isMeasurable ? clamped : undefined, "aria-valuetext": isMeasurable ? `${clamped} of ${total}` : undefined, className: "h-2 flex-1 overflow-hidden rounded-full bg-(--progress-bar-track-bg)", children: _jsx("div", { className: "h-full rounded-full bg-(--progress-bar-fill-bg) transition-all", style: { width: `${percentage}%` } }) }), showFraction && (_jsxs(Caption, { className: "shrink-0", children: [completed, "/", total] }))] }));
|
|
26
30
|
});
|
|
27
31
|
ProgressBar.displayName = "ProgressBar";
|
|
28
32
|
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAC5D,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAC5D,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,EAAE,KAAK,EAAE,YAAY,GAAG,IAAI,EAAE,KAAK,GAAG,UAAU,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE;IACzG,yEAAyE;IACzE,2EAA2E;IAC3E,MAAM,YAAY,GAAG,KAAK,GAAG,CAAC,CAAC;IAC/B,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3E,MAAM,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAE9D,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,iBAAe,MAAM,gBAAc,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,sCAAsC,EAAE,SAAS,CAAC,aACrH,cACE,IAAI,EAAC,aAAa,gBACN,KAAK,mBACF,CAAC,mBACD,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,mBAGhC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,oBACjC,YAAY,CAAC,CAAC,CAAC,GAAG,OAAO,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,EACnE,SAAS,EAAC,sEAAsE,YAEhF,cAAK,SAAS,EAAC,gEAAgE,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,UAAU,GAAG,EAAE,GAAI,GAClH,EACL,YAAY,IAAI,CACf,MAAC,OAAO,IAAC,SAAS,EAAC,UAAU,aAC1B,SAAS,OAAG,KAAK,IACV,CACX,IACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AACF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { ProgressBar, type ProgressBarProps } from "./ProgressBar.js";
|
|
1
|
+
export { ProgressBar, type ProgressBarIntent, type ProgressBarIntentName, type ProgressBarProps } from "./ProgressBar.js";
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,iBAAiB,EAAE,KAAK,qBAAqB,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ProgressBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ProgressBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA6E,MAAM,eAAe,CAAC"}
|
|
@@ -18,10 +18,11 @@ export type RadioButtonGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "
|
|
|
18
18
|
onValueChange?: (value: string) => void;
|
|
19
19
|
/** Layout orientation */
|
|
20
20
|
orientation?: "vertical" | "horizontal";
|
|
21
|
-
/**
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
/**
|
|
22
|
+
* How the options render: `control` (the default) is one `RadioButton` per option;
|
|
23
|
+
* `segmented` and `separate` are a row or column of buttons, joined or apart.
|
|
24
|
+
*/
|
|
25
|
+
appearance?: "control" | "segmented" | "separate";
|
|
25
26
|
/** Input name for form submission */
|
|
26
27
|
name?: string;
|
|
27
28
|
/** Disable all options */
|
|
@@ -34,21 +35,22 @@ export type RadioButtonGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "
|
|
|
34
35
|
* uncontrolled `string` selection, via the `value`/`defaultValue`/
|
|
35
36
|
* `onValueChange` triad (`useControllableState`).
|
|
36
37
|
*
|
|
37
|
-
* `
|
|
38
|
-
* `
|
|
39
|
-
* `RadioButton` — a row/column of plain buttons with
|
|
40
|
-
* contiguous buttons touch and share borders (`
|
|
41
|
-
*
|
|
42
|
-
*
|
|
38
|
+
* `appearance="control"` (the default) renders one `RadioButton` per option.
|
|
39
|
+
* `appearance="segmented"` or `"separate"` is a separate rendering path — not
|
|
40
|
+
* a re-skinned `RadioButton` — a row/column of plain buttons with
|
|
41
|
+
* `role="radio"`; contiguous buttons touch and share borders (`segmented`) or
|
|
42
|
+
* sit apart with their own rounded corners (`separate`). One prop rather than
|
|
43
|
+
* a `variant` + `appearance` pair, so "appearance without buttons" — which
|
|
44
|
+
* used to mean nothing — cannot be written.
|
|
43
45
|
*
|
|
44
46
|
* Implements the WAI-ARIA radiogroup keyboard pattern: the group is one tab
|
|
45
47
|
* stop, landing on the checked option (or the first enabled option if none
|
|
46
48
|
* is checked), and arrow/Home/End keys move focus *and* selection between
|
|
47
49
|
* enabled options, wrapping at the ends.
|
|
48
50
|
*
|
|
49
|
-
* Form submission only happens when `name` is set.
|
|
51
|
+
* Form submission only happens when `name` is set. With `control`
|
|
50
52
|
* that means each underlying `RadioButton` gets `name`, so one hidden
|
|
51
|
-
* native radio input is rendered per option;
|
|
53
|
+
* native radio input is rendered per option; with the button appearances the
|
|
52
54
|
* group itself renders a single hidden `<input type="hidden">` carrying the
|
|
53
55
|
* selected value.
|
|
54
56
|
*
|
|
@@ -66,10 +68,11 @@ declare const RadioButtonGroup: React.ForwardRefExoticComponent<Omit<React.HTMLA
|
|
|
66
68
|
onValueChange?: (value: string) => void;
|
|
67
69
|
/** Layout orientation */
|
|
68
70
|
orientation?: "vertical" | "horizontal";
|
|
69
|
-
/**
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
71
|
+
/**
|
|
72
|
+
* How the options render: `control` (the default) is one `RadioButton` per option;
|
|
73
|
+
* `segmented` and `separate` are a row or column of buttons, joined or apart.
|
|
74
|
+
*/
|
|
75
|
+
appearance?: "control" | "segmented" | "separate";
|
|
73
76
|
/** Input name for form submission */
|
|
74
77
|
name?: string;
|
|
75
78
|
/** Disable all options */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,sBAAsB,GAAG;IACnC,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC,GAAG;IACtG,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wBAAwB;IACxB,OAAO,EAAE,SAAS,sBAAsB,EAAE,CAAC;IAC3C,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,yBAAyB;IACzB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC
|
|
1
|
+
{"version":3,"file":"RadioButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,sBAAsB,GAAG;IACnC,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC,GAAG;IACtG,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wBAAwB;IACxB,OAAO,EAAE,SAAS,sBAAsB,EAAE,CAAC;IAC3C,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,yBAAyB;IACzB,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAClD,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,QAAA,MAAM,gBAAgB;IAlDpB,gCAAgC;YACxB,MAAM;IACd,mDAAmD;mBACpC,MAAM;IACrB,wBAAwB;aACf,SAAS,sBAAsB,EAAE;IAC1C,oCAAoC;oBACpB,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IACvC,yBAAyB;kBACX,UAAU,GAAG,YAAY;IACvC;;;OAGG;iBACU,SAAS,GAAG,WAAW,GAAG,UAAU;IACjD,qCAAqC;WAC9B,MAAM;IACb,0BAA0B;eACf,OAAO;IAClB,kDAAkD;aACzC,MAAM,IAAI;wCAyLpB,CAAC;AAGF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -10,28 +10,29 @@ import { getRovingTargetIndex } from "../../internal/rovingFocus.js";
|
|
|
10
10
|
* uncontrolled `string` selection, via the `value`/`defaultValue`/
|
|
11
11
|
* `onValueChange` triad (`useControllableState`).
|
|
12
12
|
*
|
|
13
|
-
* `
|
|
14
|
-
* `
|
|
15
|
-
* `RadioButton` — a row/column of plain buttons with
|
|
16
|
-
* contiguous buttons touch and share borders (`
|
|
17
|
-
*
|
|
18
|
-
*
|
|
13
|
+
* `appearance="control"` (the default) renders one `RadioButton` per option.
|
|
14
|
+
* `appearance="segmented"` or `"separate"` is a separate rendering path — not
|
|
15
|
+
* a re-skinned `RadioButton` — a row/column of plain buttons with
|
|
16
|
+
* `role="radio"`; contiguous buttons touch and share borders (`segmented`) or
|
|
17
|
+
* sit apart with their own rounded corners (`separate`). One prop rather than
|
|
18
|
+
* a `variant` + `appearance` pair, so "appearance without buttons" — which
|
|
19
|
+
* used to mean nothing — cannot be written.
|
|
19
20
|
*
|
|
20
21
|
* Implements the WAI-ARIA radiogroup keyboard pattern: the group is one tab
|
|
21
22
|
* stop, landing on the checked option (or the first enabled option if none
|
|
22
23
|
* is checked), and arrow/Home/End keys move focus *and* selection between
|
|
23
24
|
* enabled options, wrapping at the ends.
|
|
24
25
|
*
|
|
25
|
-
* Form submission only happens when `name` is set.
|
|
26
|
+
* Form submission only happens when `name` is set. With `control`
|
|
26
27
|
* that means each underlying `RadioButton` gets `name`, so one hidden
|
|
27
|
-
* native radio input is rendered per option;
|
|
28
|
+
* native radio input is rendered per option; with the button appearances the
|
|
28
29
|
* group itself renders a single hidden `<input type="hidden">` carrying the
|
|
29
30
|
* selected value.
|
|
30
31
|
*
|
|
31
32
|
* Renders `role="radiogroup"`; focus leaving the whole group — not just
|
|
32
33
|
* moving between options — fires `onBlur`.
|
|
33
34
|
*/
|
|
34
|
-
const RadioButtonGroup = React.forwardRef(({ value: controlledValue, defaultValue = "", options, onValueChange, orientation = "vertical",
|
|
35
|
+
const RadioButtonGroup = React.forwardRef(({ value: controlledValue, defaultValue = "", options, onValueChange, orientation = "vertical", appearance = "control", name, disabled, onBlur, className, ...props }, ref) => {
|
|
35
36
|
const [value, setValue] = useControllableState({
|
|
36
37
|
value: controlledValue,
|
|
37
38
|
defaultValue,
|
|
@@ -53,8 +54,8 @@ const RadioButtonGroup = React.forwardRef(({ value: controlledValue, defaultValu
|
|
|
53
54
|
const handleOptionSelect = (optionValue) => {
|
|
54
55
|
// Re-selecting the current option reports nothing, as a native radio does
|
|
55
56
|
// not. The guard lives here as well as in `RadioButton` because the button
|
|
56
|
-
//
|
|
57
|
-
// the two
|
|
57
|
+
// appearances are a separate rendering path that never goes through it —
|
|
58
|
+
// and the two paths must not disagree about this. `ToggleGroup` in
|
|
58
59
|
// `"single"` mode already works this way.
|
|
59
60
|
if (optionValue === value)
|
|
60
61
|
return;
|
|
@@ -79,7 +80,7 @@ const RadioButtonGroup = React.forwardRef(({ value: controlledValue, defaultValu
|
|
|
79
80
|
const firstEnabledValue = options.find((option) => !(disabled || option.disabled))?.value;
|
|
80
81
|
const hasCheckedOption = options.some((option) => option.value === value);
|
|
81
82
|
const tabStopValue = hasCheckedOption ? value : firstEnabledValue;
|
|
82
|
-
if (
|
|
83
|
+
if (appearance === "segmented" || appearance === "separate") {
|
|
83
84
|
const isVertical = orientation === "vertical";
|
|
84
85
|
const isSegmented = appearance === "segmented";
|
|
85
86
|
return (_jsxs("div", { ref: mergedRef, role: "radiogroup", onBlurCapture: handleFocusOut, onKeyDown: handleKeyDown, className: cn("inline-flex", isVertical ? "flex-col" : "flex-row", !isSegmented && (isVertical ? "gap-2" : "gap-2"), className), ...props, children: [options.map((option, index) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonGroup.js","sourceRoot":"","sources":["../../../src/components/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"RadioButtonGroup.js","sourceRoot":"","sources":["../../../src/components/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":"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"}
|
|
@@ -11,8 +11,9 @@ export type SearchInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>,
|
|
|
11
11
|
* Text input specialised for search: a search icon fixed on the left and,
|
|
12
12
|
* once there is a value, a clear button on the right.
|
|
13
13
|
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
14
|
+
* Its own field, not a wrapped `Input`: the markup and classes are duplicated
|
|
15
|
+
* from Input on purpose, so importing SearchInput pulls in nothing else and
|
|
16
|
+
* its colours are its own `--search-input-*` tokens. Always controlled — `value` is required and
|
|
16
17
|
* there is no `defaultValue`/uncontrolled mode. `onValueChange` receives the
|
|
17
18
|
* string value directly; the native `onChange` keeps its event signature and
|
|
18
19
|
* fires too if passed. Clearing calls `onClear` if provided, otherwise calls
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,GAAG;IACzF,KAAK,EAAE,MAAM,CAAC;IACd,gHAAgH;IAChH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAQF;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,WAAW;WA1BR,MAAM;IACb,gHAAgH;mBACjG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;cAC5B,MAAM,IAAI;IACpB,8DAA8D;iBACjD,MAAM;0CA6DpB,CAAC;AAGF,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { Input } from "@sixthshift/design-system/input";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
3
|
import { cn } from "@sixthshift/design-system/utils";
|
|
5
4
|
import { Search, X } from "lucide-react";
|
|
6
5
|
import * as React from "react";
|
|
6
|
+
/** The icon slots, duplicated from Input's. */
|
|
7
|
+
const iconSlotStyles = `absolute top-1/2 -translate-y-1/2 text-(--search-input-icon-fg)
|
|
8
|
+
[&_svg]:h-4 [&_svg]:w-4
|
|
9
|
+
[&_button]:flex [&_button]:cursor-pointer [&_button]:appearance-none
|
|
10
|
+
[&_button]:border-0 [&_button]:bg-transparent`;
|
|
7
11
|
/**
|
|
8
12
|
* Text input specialised for search: a search icon fixed on the left and,
|
|
9
13
|
* once there is a value, a clear button on the right.
|
|
10
14
|
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
15
|
+
* Its own field, not a wrapped `Input`: the markup and classes are duplicated
|
|
16
|
+
* from Input on purpose, so importing SearchInput pulls in nothing else and
|
|
17
|
+
* its colours are its own `--search-input-*` tokens. Always controlled — `value` is required and
|
|
13
18
|
* there is no `defaultValue`/uncontrolled mode. `onValueChange` receives the
|
|
14
19
|
* string value directly; the native `onChange` keeps its event signature and
|
|
15
20
|
* fires too if passed. Clearing calls `onClear` if provided, otherwise calls
|
|
@@ -24,10 +29,10 @@ const SearchInput = React.forwardRef(({ className, value, onValueChange, onChang
|
|
|
24
29
|
onValueChange("");
|
|
25
30
|
}
|
|
26
31
|
};
|
|
27
|
-
return (_jsx(
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
32
|
+
return (_jsxs("div", { className: cn("search-input relative h-9 w-full text-sm", className), children: [_jsx("span", { className: cn(iconSlotStyles, "left-3"), children: _jsx(Search, {}) }), _jsx("input", { ref: ref, type: "text", value: value, onChange: (e) => {
|
|
33
|
+
onValueChange(e.target.value);
|
|
34
|
+
onChange?.(e);
|
|
35
|
+
}, className: cn("border-(color:--search-input-border) focus-visible:ring-(color:--search-input-ring) flex h-full w-full rounded-md border bg-(--search-input-bg) py-1 text-[length:inherit] shadow-xs transition-colors placeholder:text-(--search-input-placeholder-fg) focus-visible:outline-hidden focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50", "pl-9", value ? "pr-9" : "pr-3"), ...props }), value && (_jsx("span", { className: cn(iconSlotStyles, "right-3"), children: _jsx("button", { type: "button", onClick: handleClear, "aria-label": clearLabel, className: "rounded-sm hover:bg-(--search-input-clear-bg-hovered)", children: _jsx(X, {}) }) }))] }));
|
|
31
36
|
});
|
|
32
37
|
SearchInput.displayName = "SearchInput";
|
|
33
38
|
export { SearchInput };
|