@charcuterie/ui 2.4.1 → 2.6.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/dist/Checkbox/Checkbox.d.ts +68 -0
- package/dist/Checkbox/Checkbox.d.ts.map +1 -0
- package/dist/Checkbox/Checkbox.js +108 -0
- package/dist/Checkbox/Checkbox.js.map +1 -0
- package/dist/Field/Field.d.ts.map +1 -1
- package/dist/Field/Field.js +12 -1
- package/dist/Field/Field.js.map +1 -1
- package/dist/Menu/Menu.d.ts +60 -2
- package/dist/Menu/Menu.d.ts.map +1 -1
- package/dist/Menu/Menu.js +58 -11
- package/dist/Menu/Menu.js.map +1 -1
- package/dist/RadioGroup/RadioGroup.d.ts +54 -0
- package/dist/RadioGroup/RadioGroup.d.ts.map +1 -0
- package/dist/RadioGroup/RadioGroup.js +121 -0
- package/dist/RadioGroup/RadioGroup.js.map +1 -0
- package/dist/RadioGroup/RadioGroupOption.d.ts +27 -0
- package/dist/RadioGroup/RadioGroupOption.d.ts.map +1 -0
- package/dist/RadioGroup/RadioGroupOption.js +75 -0
- package/dist/RadioGroup/RadioGroupOption.js.map +1 -0
- package/dist/Switch/Switch.d.ts +60 -0
- package/dist/Switch/Switch.d.ts.map +1 -0
- package/dist/Switch/Switch.js +106 -0
- package/dist/Switch/Switch.js.map +1 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -0
- package/dist/index.js.map +1 -1
- package/dist/slotWiring.d.ts +9 -7
- package/dist/slotWiring.d.ts.map +1 -1
- package/dist/slotWiring.js +10 -70
- package/dist/slotWiring.js.map +1 -1
- package/package.json +2 -2
- package/src/Checkbox/Checkbox.mdx +71 -0
- package/src/Checkbox/Checkbox.stories.tsx +122 -0
- package/src/Checkbox/Checkbox.test.tsx +109 -0
- package/src/Checkbox/Checkbox.tsx +205 -0
- package/src/Combobox/Combobox.stories.tsx +19 -4
- package/src/Field/Field.stories.tsx +19 -0
- package/src/Field/Field.test.tsx +30 -2
- package/src/Field/Field.tsx +13 -1
- package/src/Menu/Menu.stories.tsx +80 -2
- package/src/Menu/Menu.test.tsx +102 -0
- package/src/Menu/Menu.tsx +156 -17
- package/src/RadioGroup/RadioGroup.mdx +67 -0
- package/src/RadioGroup/RadioGroup.stories.tsx +140 -0
- package/src/RadioGroup/RadioGroup.test.tsx +232 -0
- package/src/RadioGroup/RadioGroup.tsx +223 -0
- package/src/RadioGroup/RadioGroupOption.tsx +148 -0
- package/src/Switch/Switch.mdx +55 -0
- package/src/Switch/Switch.stories.tsx +116 -0
- package/src/Switch/Switch.test.tsx +115 -0
- package/src/Switch/Switch.tsx +183 -0
- package/src/index.ts +9 -0
- package/src/slotWiring.ts +15 -107
- package/src/sourceRules.test.ts +11 -1
- package/src/tailwindCandidates.test.ts +9 -7
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { ControlSize } from "@charcuterie/tokens";
|
|
2
|
+
import type { ReactNode } from "react";
|
|
3
|
+
import type { RadioItem } from "./RadioGroup.tsx";
|
|
4
|
+
export type RadioGroupOptionProps = {
|
|
5
|
+
isChecked: boolean;
|
|
6
|
+
isReadOnly: boolean;
|
|
7
|
+
item: RadioItem;
|
|
8
|
+
onChoose: (value: string) => void;
|
|
9
|
+
/** `RovingFocus.register` — membership of the arrow-key group. */
|
|
10
|
+
registerFocus: (value: string) => () => void;
|
|
11
|
+
/** `SinglePicker.register` — membership of the choice. */
|
|
12
|
+
registerSelection: (value: string) => () => void;
|
|
13
|
+
size: ControlSize;
|
|
14
|
+
tabIndex: number;
|
|
15
|
+
trackElement: (value: string, element: HTMLButtonElement | null) => void;
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Its own file for the same reason `SegmentedOption` is: **both
|
|
19
|
+
* registrations are effects**, and an effect cannot run in a loop.
|
|
20
|
+
*
|
|
21
|
+
* The ring and the dot are two elements rather than a bordered box
|
|
22
|
+
* with a background, so the checked dot can be centred by the grid
|
|
23
|
+
* and sized independently of the ring — a filled `bg-intent-accent`
|
|
24
|
+
* ring with no inner dot reads as a checkbox, not a radio.
|
|
25
|
+
*/
|
|
26
|
+
export declare const RadioGroupOption: ({ isChecked, isReadOnly, item, onChoose, registerFocus, registerSelection, size, tabIndex, trackElement, }: RadioGroupOptionProps) => ReactNode;
|
|
27
|
+
//# sourceMappingURL=RadioGroupOption.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioGroupOption.d.ts","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroupOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAEjD,MAAM,MAAM,qBAAqB,GAAG;IAClC,SAAS,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,OAAO,CAAA;IACnB,IAAI,EAAE,SAAS,CAAA;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,kEAAkE;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAA;IAC5C,0DAA0D;IAC1D,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAA;IAChD,IAAI,EAAE,WAAW,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,CACZ,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,iBAAiB,GAAG,IAAI,KAC9B,IAAI,CAAA;CACV,CAAA;AAuBD;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,GAAI,4GAU9B,qBAAqB,KAAG,SAkF1B,CAAA"}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect } from "react";
|
|
3
|
+
import { FOCUS_RING_CLASS } from "../intentStyles.js";
|
|
4
|
+
import { toClassName } from "../toClassName.js";
|
|
5
|
+
// Deliberately the `Switch`'s `THUMB_SIZE_CLASS`, value for value — a
|
|
6
|
+
// radio's ring and a switch's knob are then the same circle at every
|
|
7
|
+
// density, which is what makes the family read as one set.
|
|
8
|
+
const RING_SIZE_CLASS = {
|
|
9
|
+
sm: "size-3",
|
|
10
|
+
md: "size-4",
|
|
11
|
+
lg: "size-5",
|
|
12
|
+
};
|
|
13
|
+
const DOT_SIZE_CLASS = {
|
|
14
|
+
sm: "size-1.5",
|
|
15
|
+
md: "size-2",
|
|
16
|
+
lg: "size-2.5",
|
|
17
|
+
};
|
|
18
|
+
const TEXT_SIZE_CLASS = {
|
|
19
|
+
sm: "text-sm",
|
|
20
|
+
md: "text-md",
|
|
21
|
+
lg: "text-lg",
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* Its own file for the same reason `SegmentedOption` is: **both
|
|
25
|
+
* registrations are effects**, and an effect cannot run in a loop.
|
|
26
|
+
*
|
|
27
|
+
* The ring and the dot are two elements rather than a bordered box
|
|
28
|
+
* with a background, so the checked dot can be centred by the grid
|
|
29
|
+
* and sized independently of the ring — a filled `bg-intent-accent`
|
|
30
|
+
* ring with no inner dot reads as a checkbox, not a radio.
|
|
31
|
+
*/
|
|
32
|
+
export const RadioGroupOption = ({ isChecked, isReadOnly, item, onChoose, registerFocus, registerSelection, size, tabIndex, trackElement, }) => {
|
|
33
|
+
const { isDisabled = false, label, value } = item;
|
|
34
|
+
useEffect(() => registerSelection(value), [registerSelection, value]);
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
if (isDisabled) {
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
return registerFocus(value);
|
|
40
|
+
}, [isDisabled, registerFocus, value]);
|
|
41
|
+
return (_jsxs("button", { "aria-checked": isChecked, className: toClassName("inline-flex items-center gap-2 rounded-sm text-content-secondary text-start transition-colors duration-(--duration-fast) ease-standard", TEXT_SIZE_CLASS[size],
|
|
42
|
+
// Disabled turns the whole option down with `opacity-60`, the
|
|
43
|
+
// same family treatment as `Checkbox` and `Switch`, rather than
|
|
44
|
+
// fading the ring to a token that disappeared on a pale theme.
|
|
45
|
+
// Read-only keeps full contrast — only the cursor and the hover
|
|
46
|
+
// affordance say it will not move.
|
|
47
|
+
isDisabled
|
|
48
|
+
? "cursor-not-allowed opacity-60"
|
|
49
|
+
: isReadOnly
|
|
50
|
+
? "cursor-default"
|
|
51
|
+
: "cursor-pointer hover:text-content-primary", FOCUS_RING_CLASS), disabled: isDisabled, onClick: () => {
|
|
52
|
+
onChoose(value);
|
|
53
|
+
}, ref: (element) => {
|
|
54
|
+
trackElement(value, element);
|
|
55
|
+
}, role: "radio", tabIndex: tabIndex, type: "button", children: [_jsx("span", { className: toClassName(
|
|
56
|
+
// `border-2` matches the `Switch` thumb's ring weight and the
|
|
57
|
+
// `Checkbox` box, and `RING_SIZE_CLASS` matches the thumb's
|
|
58
|
+
// diameter — so a radio dot and a switch knob are the same
|
|
59
|
+
// circle. A disabled ring holds `border-default` rather than
|
|
60
|
+
// fading to the `border-subtle` that vanished on a pale theme.
|
|
61
|
+
"grid shrink-0 place-items-center rounded-full border-2 transition-colors duration-(--duration-fast) ease-standard",
|
|
62
|
+
// Read-only wears the neutral intent and a softer resting edge
|
|
63
|
+
// — the same "readable but not an actionable accent" language
|
|
64
|
+
// as `Checkbox` and `Switch`.
|
|
65
|
+
isReadOnly
|
|
66
|
+
? isChecked
|
|
67
|
+
? "border-intent-neutral-solid"
|
|
68
|
+
: "border-border-default"
|
|
69
|
+
: isChecked
|
|
70
|
+
? "border-intent-accent-solid"
|
|
71
|
+
: "border-border-strong", RING_SIZE_CLASS[size]), children: _jsx("span", { className: toClassName("rounded-full transition-transform duration-(--duration-fast) ease-standard", isReadOnly
|
|
72
|
+
? "bg-intent-neutral-solid"
|
|
73
|
+
: "bg-intent-accent-solid", isChecked ? "scale-100" : "scale-0", DOT_SIZE_CLASS[size]) }) }), _jsx("span", { children: label })] }));
|
|
74
|
+
};
|
|
75
|
+
//# sourceMappingURL=RadioGroupOption.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioGroupOption.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroupOption.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import type { ControlSize } from "@charcuterie/tokens";
|
|
2
|
+
import type { ReactNode } from "react";
|
|
3
|
+
export type SwitchProps = {
|
|
4
|
+
className?: string;
|
|
5
|
+
/**
|
|
6
|
+
* **Initial** only. The `Switch` owns it from then on — the same
|
|
7
|
+
* uncontrolled contract as `Checkbox` and `SegmentedControl`, so
|
|
8
|
+
* `onChange` reports the new state and there is no controlled
|
|
9
|
+
* `checked` prop to keep in step.
|
|
10
|
+
*/
|
|
11
|
+
isChecked?: boolean;
|
|
12
|
+
isDisabled?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Shows the state at full contrast but refuses to flip it — a
|
|
15
|
+
* setting you may read here and change elsewhere. Unlike
|
|
16
|
+
* `isDisabled` it does not dim, and it announces `aria-readonly`.
|
|
17
|
+
*/
|
|
18
|
+
isReadOnly?: boolean;
|
|
19
|
+
/** The visible text, and the switch's accessible name. */
|
|
20
|
+
label: ReactNode;
|
|
21
|
+
onChange?: (isChecked: boolean) => void;
|
|
22
|
+
size?: ControlSize;
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* A boolean that takes effect the moment it is flipped — a setting,
|
|
26
|
+
* not a form value.
|
|
27
|
+
*
|
|
28
|
+
* A `Checkbox` and a `Switch` are the same state kind and a
|
|
29
|
+
* different affordance, and the split is meaning rather than looks:
|
|
30
|
+
* a checkbox is a value you submit ("I agree"), a switch is a state
|
|
31
|
+
* you toggle and live with immediately ("dark mode on"). ARIA gives
|
|
32
|
+
* the second its own role, and a screen reader announces "on/off"
|
|
33
|
+
* for a `switch` where it announces "checked/unchecked" for a
|
|
34
|
+
* checkbox.
|
|
35
|
+
*
|
|
36
|
+
* ### A `button role="switch"`, not an `input`
|
|
37
|
+
*
|
|
38
|
+
* The sliding track and thumb are the whole point of the affordance,
|
|
39
|
+
* and a `<button>` styles them without fighting a native control's
|
|
40
|
+
* own rendering. It carries `aria-checked`, `aria-labelledby`, and
|
|
41
|
+
* nothing else the browser would try to own. The value lives in
|
|
42
|
+
* React state seeded once from `isChecked` — the switch is the
|
|
43
|
+
* store, the same as the DOM is for `Checkbox`.
|
|
44
|
+
*
|
|
45
|
+
* ### The thumb is one colour, the track carries the state
|
|
46
|
+
*
|
|
47
|
+
* `bg-surface-raised` in both positions — the knob is the same object
|
|
48
|
+
* sliding, not two differently-painted dots, which is what the first
|
|
49
|
+
* cut looked like when off was `content-secondary` and on was
|
|
50
|
+
* `on-solid`. A themed system has no single colour that is "light" in
|
|
51
|
+
* both schemes, so consistency lives *within* a scheme: `surface-raised`
|
|
52
|
+
* is a white knob in a light one and a raised charcoal knob in a dark
|
|
53
|
+
* one, off and on identical either way. The **track** shows the state —
|
|
54
|
+
* `bg-intent-accent-solid` on, `bg-surface-sunken` with a `ring-2`
|
|
55
|
+
* outline off — which is where a switch's state belongs, and the ring
|
|
56
|
+
* gives the off track the defined edge a bare well would miss on a pale
|
|
57
|
+
* theme.
|
|
58
|
+
*/
|
|
59
|
+
export declare const Switch: ({ className, isChecked, isDisabled, isReadOnly, label, onChange, size, }: SwitchProps) => ReactNode;
|
|
60
|
+
//# sourceMappingURL=Switch.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,0DAA0D;IAC1D,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAA;IACvC,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAkCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,MAAM,GAAI,0EAQpB,WAAW,KAAG,SA6EhB,CAAA"}
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useUniqueId } from "@charcuterie/logic";
|
|
3
|
+
import { useState } from "react";
|
|
4
|
+
import { FOCUS_RING_CLASS } from "../intentStyles.js";
|
|
5
|
+
import { toClassName } from "../toClassName.js";
|
|
6
|
+
// Track and thumb are sized so `p-1` (4px) breathes evenly on every
|
|
7
|
+
// side and the thumb is centred by arithmetic, not by eye: inner
|
|
8
|
+
// height (track − 2·padding) equals the thumb, and the on-translate is
|
|
9
|
+
// (track width − 2·padding − thumb). Break one of those and the thumb
|
|
10
|
+
// clips an edge, which is what the first cut did.
|
|
11
|
+
const TRACK_SIZE_CLASS = {
|
|
12
|
+
sm: "h-5 w-9",
|
|
13
|
+
md: "h-6 w-11",
|
|
14
|
+
lg: "h-7 w-14",
|
|
15
|
+
};
|
|
16
|
+
const THUMB_SIZE_CLASS = {
|
|
17
|
+
sm: "size-3",
|
|
18
|
+
md: "size-4",
|
|
19
|
+
lg: "size-5",
|
|
20
|
+
};
|
|
21
|
+
const THUMB_ON_TRANSLATE_CLASS = {
|
|
22
|
+
sm: "translate-x-4",
|
|
23
|
+
md: "translate-x-5",
|
|
24
|
+
lg: "translate-x-7",
|
|
25
|
+
};
|
|
26
|
+
const TEXT_SIZE_CLASS = {
|
|
27
|
+
sm: "text-sm",
|
|
28
|
+
md: "text-md",
|
|
29
|
+
lg: "text-lg",
|
|
30
|
+
};
|
|
31
|
+
/**
|
|
32
|
+
* A boolean that takes effect the moment it is flipped — a setting,
|
|
33
|
+
* not a form value.
|
|
34
|
+
*
|
|
35
|
+
* A `Checkbox` and a `Switch` are the same state kind and a
|
|
36
|
+
* different affordance, and the split is meaning rather than looks:
|
|
37
|
+
* a checkbox is a value you submit ("I agree"), a switch is a state
|
|
38
|
+
* you toggle and live with immediately ("dark mode on"). ARIA gives
|
|
39
|
+
* the second its own role, and a screen reader announces "on/off"
|
|
40
|
+
* for a `switch` where it announces "checked/unchecked" for a
|
|
41
|
+
* checkbox.
|
|
42
|
+
*
|
|
43
|
+
* ### A `button role="switch"`, not an `input`
|
|
44
|
+
*
|
|
45
|
+
* The sliding track and thumb are the whole point of the affordance,
|
|
46
|
+
* and a `<button>` styles them without fighting a native control's
|
|
47
|
+
* own rendering. It carries `aria-checked`, `aria-labelledby`, and
|
|
48
|
+
* nothing else the browser would try to own. The value lives in
|
|
49
|
+
* React state seeded once from `isChecked` — the switch is the
|
|
50
|
+
* store, the same as the DOM is for `Checkbox`.
|
|
51
|
+
*
|
|
52
|
+
* ### The thumb is one colour, the track carries the state
|
|
53
|
+
*
|
|
54
|
+
* `bg-surface-raised` in both positions — the knob is the same object
|
|
55
|
+
* sliding, not two differently-painted dots, which is what the first
|
|
56
|
+
* cut looked like when off was `content-secondary` and on was
|
|
57
|
+
* `on-solid`. A themed system has no single colour that is "light" in
|
|
58
|
+
* both schemes, so consistency lives *within* a scheme: `surface-raised`
|
|
59
|
+
* is a white knob in a light one and a raised charcoal knob in a dark
|
|
60
|
+
* one, off and on identical either way. The **track** shows the state —
|
|
61
|
+
* `bg-intent-accent-solid` on, `bg-surface-sunken` with a `ring-2`
|
|
62
|
+
* outline off — which is where a switch's state belongs, and the ring
|
|
63
|
+
* gives the off track the defined edge a bare well would miss on a pale
|
|
64
|
+
* theme.
|
|
65
|
+
*/
|
|
66
|
+
export const Switch = ({ className, isChecked = false, isDisabled = false, isReadOnly = false, label, onChange, size = "md", }) => {
|
|
67
|
+
const [isOn, setIsOn] = useState(isChecked);
|
|
68
|
+
const labelId = useUniqueId();
|
|
69
|
+
return (_jsxs("span", { className: toClassName("inline-flex items-center gap-2 text-content-secondary select-none", TEXT_SIZE_CLASS[size],
|
|
70
|
+
// Disabled turns the whole control down with `opacity-60`, the
|
|
71
|
+
// same family treatment as `Checkbox` and `RadioGroup` — the
|
|
72
|
+
// track keeps its full-contrast state colour underneath.
|
|
73
|
+
isDisabled && "opacity-60", className), children: [_jsx("button", { "aria-checked": isOn, "aria-labelledby": labelId, "aria-readonly": isReadOnly || undefined, className: toClassName(
|
|
74
|
+
// `p-1` is the breathing room; `ring-inset` draws the off
|
|
75
|
+
// outline without changing the box size, so the centring
|
|
76
|
+
// arithmetic above stays exact.
|
|
77
|
+
"inline-flex shrink-0 items-center rounded-full p-1 transition-colors duration-(--duration-fast) ease-standard",
|
|
78
|
+
// The track carries the state at full contrast whether or not
|
|
79
|
+
// it is disabled; `opacity-60` on the wrapper does the dimming.
|
|
80
|
+
// Read-only swaps the accent for the neutral intent and softens
|
|
81
|
+
// the off outline — readable, plainly not an actionable accent,
|
|
82
|
+
// the same language as `Checkbox` and `RadioGroup`.
|
|
83
|
+
isReadOnly
|
|
84
|
+
? isOn
|
|
85
|
+
? "bg-intent-neutral-solid"
|
|
86
|
+
: "bg-surface-sunken ring-2 ring-border-default ring-inset"
|
|
87
|
+
: isOn
|
|
88
|
+
? "bg-intent-accent-solid"
|
|
89
|
+
: "bg-surface-sunken ring-2 ring-border-strong ring-inset", isDisabled
|
|
90
|
+
? "cursor-not-allowed"
|
|
91
|
+
: isReadOnly
|
|
92
|
+
? "cursor-default"
|
|
93
|
+
: "cursor-pointer", TRACK_SIZE_CLASS[size], FOCUS_RING_CLASS), disabled: isDisabled, onClick: () => {
|
|
94
|
+
// Read-only shows the state but will not flip it — the switch
|
|
95
|
+
// owns its value, so the guard is just an early return.
|
|
96
|
+
if (isReadOnly) {
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
const isNextOn = !isOn;
|
|
100
|
+
setIsOn(isNextOn);
|
|
101
|
+
onChange?.(isNextOn);
|
|
102
|
+
}, role: "switch", type: "button", children: _jsx("span", { className: toClassName("rounded-full bg-surface-raised transition-transform duration-(--duration-fast) ease-standard", isOn
|
|
103
|
+
? THUMB_ON_TRANSLATE_CLASS[size]
|
|
104
|
+
: "translate-x-0", THUMB_SIZE_CLASS[size]) }) }), _jsx("span", { id: labelId, children: label })] }));
|
|
105
|
+
};
|
|
106
|
+
//# sourceMappingURL=Switch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -40,6 +40,8 @@ export type { ButtonProps } from "./Button/Button.tsx";
|
|
|
40
40
|
export { Button } from "./Button/Button.tsx";
|
|
41
41
|
export type { CardPadding, CardProps, CardSurface, } from "./Card/Card.tsx";
|
|
42
42
|
export { Card } from "./Card/Card.tsx";
|
|
43
|
+
export type { CheckboxProps } from "./Checkbox/Checkbox.tsx";
|
|
44
|
+
export { Checkbox } from "./Checkbox/Checkbox.tsx";
|
|
43
45
|
export type { ColorSchemeSwitcherProps } from "./ColorSchemeSwitcher/ColorSchemeSwitcher.tsx";
|
|
44
46
|
export { ColorSchemeSwitcher } from "./ColorSchemeSwitcher/ColorSchemeSwitcher.tsx";
|
|
45
47
|
export type { ColorSchemeIcons, ColorSchemeToggleProps, } from "./ColorSchemeToggle/ColorSchemeToggle.tsx";
|
|
@@ -84,6 +86,8 @@ export type { ProgressBarProps, ProgressBarSize, } from "./ProgressBar/ProgressB
|
|
|
84
86
|
export { ProgressBar } from "./ProgressBar/ProgressBar.tsx";
|
|
85
87
|
export type { ProgressThreshold } from "./ProgressBar/progressValue.ts";
|
|
86
88
|
export { getProgressIntent, toProgressPercent, toProgressValue, } from "./ProgressBar/progressValue.ts";
|
|
89
|
+
export type { RadioGroupProps, RadioItem, } from "./RadioGroup/RadioGroup.tsx";
|
|
90
|
+
export { RadioGroup } from "./RadioGroup/RadioGroup.tsx";
|
|
87
91
|
export type { SegmentedControlProps, SegmentedItem, } from "./SegmentedControl/SegmentedControl.tsx";
|
|
88
92
|
export { SegmentedControl } from "./SegmentedControl/SegmentedControl.tsx";
|
|
89
93
|
export type { SelectItem, SelectOption, SelectOptionGroup, SelectProps, } from "./Select/Select.tsx";
|
|
@@ -96,6 +100,8 @@ export type { SpinnerProps } from "./Spinner/Spinner.tsx";
|
|
|
96
100
|
export { Spinner } from "./Spinner/Spinner.tsx";
|
|
97
101
|
export type { SwatchAppearance, SwatchProps, SwatchSize, } from "./Swatch/Swatch.tsx";
|
|
98
102
|
export { Swatch } from "./Swatch/Swatch.tsx";
|
|
103
|
+
export type { SwitchProps } from "./Switch/Switch.tsx";
|
|
104
|
+
export { Switch } from "./Switch/Switch.tsx";
|
|
99
105
|
export type { SlotProps } from "./slotProps.ts";
|
|
100
106
|
export { mergeSlotProps } from "./slotProps.ts";
|
|
101
107
|
export { getAsyncIntent, getAsyncLabel, getConnectionIntent, getConnectionLabel, getIsConnectionBusy, } from "./statusIntent.ts";
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -35,6 +35,7 @@ export { Alert } from "./Alert/Alert.js";
|
|
|
35
35
|
export { Badge } from "./Badge/Badge.js";
|
|
36
36
|
export { Button } from "./Button/Button.js";
|
|
37
37
|
export { Card } from "./Card/Card.js";
|
|
38
|
+
export { Checkbox } from "./Checkbox/Checkbox.js";
|
|
38
39
|
export { ColorSchemeSwitcher } from "./ColorSchemeSwitcher/ColorSchemeSwitcher.js";
|
|
39
40
|
export { ColorSchemeToggle } from "./ColorSchemeToggle/ColorSchemeToggle.js";
|
|
40
41
|
export { Combobox } from "./Combobox/Combobox.js";
|
|
@@ -57,12 +58,14 @@ export { Modal } from "./Modal/Modal.js";
|
|
|
57
58
|
export { Popover } from "./Popover/Popover.js";
|
|
58
59
|
export { ProgressBar } from "./ProgressBar/ProgressBar.js";
|
|
59
60
|
export { getProgressIntent, toProgressPercent, toProgressValue, } from "./ProgressBar/progressValue.js";
|
|
61
|
+
export { RadioGroup } from "./RadioGroup/RadioGroup.js";
|
|
60
62
|
export { SegmentedControl } from "./SegmentedControl/SegmentedControl.js";
|
|
61
63
|
export { Select } from "./Select/Select.js";
|
|
62
64
|
export { Skeleton } from "./Skeleton/Skeleton.js";
|
|
63
65
|
export { SortableTableHeader } from "./SortableTableHeader/SortableTableHeader.js";
|
|
64
66
|
export { Spinner } from "./Spinner/Spinner.js";
|
|
65
67
|
export { Swatch } from "./Swatch/Swatch.js";
|
|
68
|
+
export { Switch } from "./Switch/Switch.js";
|
|
66
69
|
export { mergeSlotProps } from "./slotProps.js";
|
|
67
70
|
export { getAsyncIntent, getAsyncLabel, getConnectionIntent, getConnectionLabel, getIsConnectionBusy, } from "./statusIntent.js";
|
|
68
71
|
export { Tabs } from "./Tabs/Tabs.js";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/slotWiring.d.ts
CHANGED
|
@@ -15,14 +15,16 @@
|
|
|
15
15
|
* a CSS bug and is not one.
|
|
16
16
|
* - **`on*`** is a listener, and listeners are plural.
|
|
17
17
|
*
|
|
18
|
-
* ###
|
|
18
|
+
* ### Shared with `@charcuterie/logic`
|
|
19
19
|
*
|
|
20
|
-
* `useClonedChild`'s `mergeClonedProps` applies the
|
|
21
|
-
* level down — between a slot and the element a caller wrote —
|
|
22
|
-
* the
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
20
|
+
* `useClonedChild`'s `mergeClonedProps` applies the identical rule
|
|
21
|
+
* one level down — between a slot and the element a caller wrote —
|
|
22
|
+
* so the `ref`/`on*` primitives (`mergeRefs`, `chainHandlers`, and
|
|
23
|
+
* the two guards) are imported from `@charcuterie/logic` rather than
|
|
24
|
+
* copied here, where they used to be a byte-for-byte duplicate. Only
|
|
25
|
+
* `mergeSlotWiring` stays local: it merges the *other* direction
|
|
26
|
+
* (own over received) and returns just the wiring keys, which is a
|
|
27
|
+
* different function from `mergeClonedProps`.
|
|
26
28
|
*/
|
|
27
29
|
/**
|
|
28
30
|
* The keys of `ownProps` that must not simply replace the ones
|
package/dist/slotWiring.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slotWiring.d.ts","sourceRoot":"","sources":["../src/slotWiring.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"slotWiring.d.ts","sourceRoot":"","sources":["../src/slotWiring.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AASH;;;GAGG;AACH,eAAO,MAAM,eAAe,GAC1B,eAAe,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACtC,UAAU,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAChC,MAAM,CAAC,MAAM,EAAE,OAAO,CAqCtB,CAAA"}
|
package/dist/slotWiring.js
CHANGED
|
@@ -15,78 +15,18 @@
|
|
|
15
15
|
* a CSS bug and is not one.
|
|
16
16
|
* - **`on*`** is a listener, and listeners are plural.
|
|
17
17
|
*
|
|
18
|
-
* ###
|
|
18
|
+
* ### Shared with `@charcuterie/logic`
|
|
19
19
|
*
|
|
20
|
-
* `useClonedChild`'s `mergeClonedProps` applies the
|
|
21
|
-
* level down — between a slot and the element a caller wrote —
|
|
22
|
-
* the
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
20
|
+
* `useClonedChild`'s `mergeClonedProps` applies the identical rule
|
|
21
|
+
* one level down — between a slot and the element a caller wrote —
|
|
22
|
+
* so the `ref`/`on*` primitives (`mergeRefs`, `chainHandlers`, and
|
|
23
|
+
* the two guards) are imported from `@charcuterie/logic` rather than
|
|
24
|
+
* copied here, where they used to be a byte-for-byte duplicate. Only
|
|
25
|
+
* `mergeSlotWiring` stays local: it merges the *other* direction
|
|
26
|
+
* (own over received) and returns just the wiring keys, which is a
|
|
27
|
+
* different function from `mergeClonedProps`.
|
|
26
28
|
*/
|
|
27
|
-
|
|
28
|
-
const isMergeableRef = (value) => typeof value === "function" ||
|
|
29
|
-
(typeof value === "object" &&
|
|
30
|
-
value !== null &&
|
|
31
|
-
"current" in value);
|
|
32
|
-
const setRef = (ref, node) => {
|
|
33
|
-
if (typeof ref === "function") {
|
|
34
|
-
return ref(node);
|
|
35
|
-
}
|
|
36
|
-
ref.current = node;
|
|
37
|
-
return undefined;
|
|
38
|
-
};
|
|
39
|
-
/**
|
|
40
|
-
* Every pair of refs ever merged, so the same two always come back
|
|
41
|
-
* as the **same function** — which is load-bearing rather than
|
|
42
|
-
* frugal.
|
|
43
|
-
*
|
|
44
|
-
* React re-runs a callback ref whenever its identity changes between
|
|
45
|
-
* renders, detaching with the old one and attaching with the new.
|
|
46
|
-
* Both refs here are floating-ui `setReference`s, and calling one
|
|
47
|
-
* sets state; a merged ref rebuilt every render would call both
|
|
48
|
-
* twice per render, each call scheduling the render that rebuilds
|
|
49
|
-
* it. `mergeSlotProps` is a plain function called during render, so
|
|
50
|
-
* it cannot reach for `useMemo` — the memo has to be in the identity
|
|
51
|
-
* of the inputs, which is what a `WeakMap` of `WeakMap`s is.
|
|
52
|
-
*/
|
|
53
|
-
const mergedRefs = new WeakMap();
|
|
54
|
-
const mergeRefs = (first, second) => {
|
|
55
|
-
const bySecond = mergedRefs.get(first) ??
|
|
56
|
-
new WeakMap();
|
|
57
|
-
mergedRefs.set(first, bySecond);
|
|
58
|
-
const cached = bySecond.get(second);
|
|
59
|
-
if (cached) {
|
|
60
|
-
return cached;
|
|
61
|
-
}
|
|
62
|
-
const merged = (node) => {
|
|
63
|
-
const cleanups = [
|
|
64
|
-
setRef(first, node),
|
|
65
|
-
setRef(second, node),
|
|
66
|
-
];
|
|
67
|
-
// Per ref: one that returned a cleanup has opted out of being
|
|
68
|
-
// called with `null`, and one that did not still expects it.
|
|
69
|
-
return () => {
|
|
70
|
-
for (const [index, cleanup] of cleanups.entries()) {
|
|
71
|
-
if (typeof cleanup === "function") {
|
|
72
|
-
cleanup();
|
|
73
|
-
}
|
|
74
|
-
else {
|
|
75
|
-
setRef(index === 0 ? first : second, null);
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
};
|
|
79
|
-
};
|
|
80
|
-
bySecond.set(second, merged);
|
|
81
|
-
return merged;
|
|
82
|
-
};
|
|
83
|
-
const chainHandlers = (first, second) => (...args) => {
|
|
84
|
-
// Outer first, the same order `aria-describedby` is joined in:
|
|
85
|
-
// the merge order is structural — whoever wrapped whom — and the
|
|
86
|
-
// author of the nesting is the one who chose it.
|
|
87
|
-
first(...args);
|
|
88
|
-
second(...args);
|
|
89
|
-
};
|
|
29
|
+
import { chainHandlers, isEventHandlerName, isMergeableRef, mergeRefs, } from "@charcuterie/logic";
|
|
90
30
|
/**
|
|
91
31
|
* The keys of `ownProps` that must not simply replace the ones
|
|
92
32
|
* `receivedProps` arrived with. Spread **last**, over both.
|
package/dist/slotWiring.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slotWiring.js","sourceRoot":"","sources":["../src/slotWiring.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"slotWiring.js","sourceRoot":"","sources":["../src/slotWiring.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,SAAS,GACV,MAAM,oBAAoB,CAAA;AAE3B;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,aAAsC,EACtC,QAAiC,EACR,EAAE,CAC3B,MAAM,CAAC,WAAW,CAChB,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,OAAO,CAC9B,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC,EAAuB,EAAE;IACxC,MAAM,aAAa,GAAG,aAAa,CAAC,IAAI,CAAC,CAAA;IAEzC,IACE,IAAI,KAAK,KAAK;QACd,cAAc,CAAC,aAAa,CAAC;QAC7B,cAAc,CAAC,QAAQ,CAAC,EACxB,CAAC;QACD,OAAO;YACL,CAAC,IAAI,EAAE,SAAS,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;SAC3C,CAAA;IACH,CAAC;IAED,IACE,kBAAkB,CAAC,IAAI,CAAC;QACxB,OAAO,aAAa,KAAK,UAAU;QACnC,OAAO,QAAQ,KAAK,UAAU,EAC9B,CAAC;QACD,OAAO;YACL;gBACE,IAAI;gBACJ,aAAa,CACX,aAEY,EACZ,QAA2C,CAC5C;aACF;SACF,CAAA;IACH,CAAC;IAED,OAAO,EAAE,CAAA;AACX,CAAC,CACF,CACF,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@charcuterie/ui",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.6.0",
|
|
4
4
|
"description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"typecheck": "tsc --noEmit"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@charcuterie/logic": "1.
|
|
46
|
+
"@charcuterie/logic": "1.2.0",
|
|
47
47
|
"@charcuterie/tokens": "1.1.3",
|
|
48
48
|
"@floating-ui/react": "^0.27.20",
|
|
49
49
|
"@tanstack/react-virtual": "^3.13.12"
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { Canvas, Controls, Meta } from "@storybook/addon-docs/blocks";
|
|
2
|
+
|
|
3
|
+
import * as CheckboxStories from "./Checkbox.stories";
|
|
4
|
+
|
|
5
|
+
<Meta of={CheckboxStories} />
|
|
6
|
+
|
|
7
|
+
# Checkbox
|
|
8
|
+
|
|
9
|
+
A single boolean, on or off, that owns nothing but itself.
|
|
10
|
+
|
|
11
|
+
This is the primitive mux-magic's `BooleanField` hand-rolled because the library had no
|
|
12
|
+
checkbox to reach for. Its box was `bg-slate-700 border-slate-500 accent-blue-500` — three
|
|
13
|
+
palette colours with no light mode, the exact M6 defect the token layer exists to delete.
|
|
14
|
+
Here the box is `bg-surface-sunken`, its border `border-border-strong`, and the fill
|
|
15
|
+
`bg-intent-accent-solid`, so one control reads correctly in `daylight`, `midnight`, and on
|
|
16
|
+
the kiosk with no per-app override. `BooleanField` becomes a thin wrapper that binds this
|
|
17
|
+
to a `CommandField`.
|
|
18
|
+
|
|
19
|
+
<Canvas of={CheckboxStories.Default} />
|
|
20
|
+
|
|
21
|
+
## Props
|
|
22
|
+
|
|
23
|
+
<Controls />
|
|
24
|
+
|
|
25
|
+
## The `<label>` wraps the control
|
|
26
|
+
|
|
27
|
+
A checkbox reads to the **left** of its text, which is why it is not a `Field`. `Field`
|
|
28
|
+
stacks label above control in a `flex-col` — right for a text input, wrong for a boolean —
|
|
29
|
+
and stacking every checkbox in a step card (`isRecursive`, `isDryRun`, …) would double the
|
|
30
|
+
card's height for no gain.
|
|
31
|
+
|
|
32
|
+
Wrapping is also the one label association that needs no `for` at all: the control is a
|
|
33
|
+
descendant of its `<label>`, so there is no id to mint, clone, and get wrong. That is the
|
|
34
|
+
whole defect [`Field`](/docs/components-field--docs) exists to prevent, avoided here by
|
|
35
|
+
construction rather than by wiring.
|
|
36
|
+
|
|
37
|
+
<Canvas of={CheckboxStories.AllVariants} />
|
|
38
|
+
|
|
39
|
+
## The `<input>` is the store
|
|
40
|
+
|
|
41
|
+
`defaultChecked`, not `checked`. The DOM owns a checkbox's state natively, so there is no
|
|
42
|
+
second copy to keep in step and no controlled round-trip — reading the value back is the
|
|
43
|
+
`<input>`'s job, and `onChange` reports each change to a consumer that wants to persist it.
|
|
44
|
+
`isChecked` seeds the first paint and nothing after.
|
|
45
|
+
|
|
46
|
+
This is the same refusal `SegmentedControl` makes about `selectedValue`: a controlled prop
|
|
47
|
+
is the thing this library does not have, because a control that cannot hold its own state
|
|
48
|
+
is a control every consumer has to hold it for.
|
|
49
|
+
|
|
50
|
+
<Canvas of={CheckboxStories.AllStates} />
|
|
51
|
+
|
|
52
|
+
## Three ways a box can be inactive
|
|
53
|
+
|
|
54
|
+
`isDisabled` and `isReadOnly` are different states, and the box shows all three:
|
|
55
|
+
|
|
56
|
+
- **Enabled** — the accent intent, a crisp `border-strong` edge.
|
|
57
|
+
- **Disabled** — the same box turned down with `opacity-60`. It dims rather than fading a
|
|
58
|
+
token because the scale has no step between `border-default` and `border-strong`, so a
|
|
59
|
+
muted outline was either invisible or indistinguishable from enabled.
|
|
60
|
+
- **Read-only** — full contrast, because the whole point is that the value stays legible,
|
|
61
|
+
but in the **neutral** intent with a softer edge: an informational value you may read
|
|
62
|
+
here and change elsewhere, not an actionable accent. It announces `aria-readonly`, and
|
|
63
|
+
the toggle is blocked on both pointer and `Space`.
|
|
64
|
+
|
|
65
|
+
## Checkbox or `Switch`
|
|
66
|
+
|
|
67
|
+
Same state kind, different meaning. A checkbox is a value you **submit** — "delete
|
|
68
|
+
originals", "I agree" — and a [`Switch`](/docs/components-switch--docs) is a setting that
|
|
69
|
+
**takes effect the moment it is flipped**. A screen reader announces
|
|
70
|
+
"checked/unchecked" for one and "on/off" for the other, which is the line to hold when
|
|
71
|
+
choosing between them.
|