@charcuterie/ui 1.0.1 → 2.0.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/ColorSchemeSwitcher/ColorSchemeSwitcher.d.ts +35 -0
- package/dist/ColorSchemeSwitcher/ColorSchemeSwitcher.d.ts.map +1 -0
- package/dist/ColorSchemeSwitcher/ColorSchemeSwitcher.js +33 -0
- package/dist/ColorSchemeSwitcher/ColorSchemeSwitcher.js.map +1 -0
- package/dist/ColorSchemeToggle/ColorSchemeToggle.d.ts +54 -0
- package/dist/ColorSchemeToggle/ColorSchemeToggle.d.ts.map +1 -0
- package/dist/ColorSchemeToggle/ColorSchemeToggle.js +30 -0
- package/dist/ColorSchemeToggle/ColorSchemeToggle.js.map +1 -0
- package/dist/Combobox/Combobox.d.ts +54 -0
- package/dist/Combobox/Combobox.d.ts.map +1 -0
- package/dist/Combobox/Combobox.js +216 -0
- package/dist/Combobox/Combobox.js.map +1 -0
- package/dist/Combobox/ComboboxOption.d.ts +36 -0
- package/dist/Combobox/ComboboxOption.d.ts.map +1 -0
- package/dist/Combobox/ComboboxOption.js +32 -0
- package/dist/Combobox/ComboboxOption.js.map +1 -0
- package/dist/Dialog/Dialog.d.ts +47 -0
- package/dist/Dialog/Dialog.d.ts.map +1 -0
- package/dist/Dialog/Dialog.js +52 -0
- package/dist/Dialog/Dialog.js.map +1 -0
- package/dist/Lightbox/Lightbox.d.ts +57 -0
- package/dist/Lightbox/Lightbox.d.ts.map +1 -0
- package/dist/Lightbox/Lightbox.js +50 -0
- package/dist/Lightbox/Lightbox.js.map +1 -0
- package/dist/Listbox/Listbox.d.ts +56 -0
- package/dist/Listbox/Listbox.d.ts.map +1 -0
- package/dist/Listbox/Listbox.js +151 -0
- package/dist/Listbox/Listbox.js.map +1 -0
- package/dist/Listbox/ListboxOption.d.ts +36 -0
- package/dist/Listbox/ListboxOption.d.ts.map +1 -0
- package/dist/Listbox/ListboxOption.js +42 -0
- package/dist/Listbox/ListboxOption.js.map +1 -0
- package/dist/Menu/Menu.d.ts.map +1 -1
- package/dist/Menu/Menu.js +47 -97
- package/dist/Menu/Menu.js.map +1 -1
- package/dist/Modal/Modal.d.ts +11 -59
- package/dist/Modal/Modal.d.ts.map +1 -1
- package/dist/Modal/Modal.js +28 -101
- package/dist/Modal/Modal.js.map +1 -1
- package/dist/Overlay/OverlayPanel.d.ts +50 -0
- package/dist/Overlay/OverlayPanel.d.ts.map +1 -0
- package/dist/Overlay/OverlayPanel.js +72 -0
- package/dist/Overlay/OverlayPanel.js.map +1 -0
- package/dist/Overlay/OverlayStack.d.ts +47 -0
- package/dist/Overlay/OverlayStack.d.ts.map +1 -0
- package/dist/Overlay/OverlayStack.js +46 -0
- package/dist/Overlay/OverlayStack.js.map +1 -0
- package/dist/Overlay/SharedBackdrop.d.ts +24 -0
- package/dist/Overlay/SharedBackdrop.d.ts.map +1 -0
- package/dist/Overlay/SharedBackdrop.js +28 -0
- package/dist/Overlay/SharedBackdrop.js.map +1 -0
- package/dist/Overlay/lockScrollBehind.d.ts.map +1 -0
- package/dist/Overlay/lockScrollBehind.js.map +1 -0
- package/dist/Overlay/overlayPanelClass.d.ts +17 -0
- package/dist/Overlay/overlayPanelClass.d.ts.map +1 -0
- package/dist/Overlay/overlayPanelClass.js +17 -0
- package/dist/Overlay/overlayPanelClass.js.map +1 -0
- package/dist/Overlay/useAnchoredOverlay.d.ts +97 -0
- package/dist/Overlay/useAnchoredOverlay.d.ts.map +1 -0
- package/dist/Overlay/useAnchoredOverlay.js +81 -0
- package/dist/Overlay/useAnchoredOverlay.js.map +1 -0
- package/dist/Popover/Popover.d.ts +16 -24
- package/dist/Popover/Popover.d.ts.map +1 -1
- package/dist/Popover/Popover.js +32 -68
- package/dist/Popover/Popover.js.map +1 -1
- package/dist/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/Tooltip/Tooltip.js +25 -25
- package/dist/Tooltip/Tooltip.js.map +1 -1
- package/dist/index.d.ts +13 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +6 -0
- package/dist/index.js.map +1 -1
- package/dist/mountStory.testHelpers.d.ts +1 -0
- package/dist/mountStory.testHelpers.d.ts.map +1 -1
- package/dist/mountStory.testHelpers.js +21 -1
- package/dist/mountStory.testHelpers.js.map +1 -1
- package/package.json +5 -4
- package/src/ColorSchemeSwitcher/ColorSchemeSwitcher.mdx +70 -0
- package/src/ColorSchemeSwitcher/ColorSchemeSwitcher.stories.tsx +118 -0
- package/src/ColorSchemeSwitcher/ColorSchemeSwitcher.test.tsx +53 -0
- package/src/ColorSchemeSwitcher/ColorSchemeSwitcher.tsx +90 -0
- package/src/ColorSchemeToggle/ColorSchemeToggle.mdx +48 -0
- package/src/ColorSchemeToggle/ColorSchemeToggle.stories.tsx +161 -0
- package/src/ColorSchemeToggle/ColorSchemeToggle.test.tsx +80 -0
- package/src/ColorSchemeToggle/ColorSchemeToggle.tsx +107 -0
- package/src/Combobox/Combobox.mdx +71 -0
- package/src/Combobox/Combobox.stories.tsx +245 -0
- package/src/Combobox/Combobox.test.tsx +289 -0
- package/src/Combobox/Combobox.tsx +513 -0
- package/src/Combobox/ComboboxOption.tsx +88 -0
- package/src/Dialog/Dialog.mdx +87 -0
- package/src/Dialog/Dialog.stories.tsx +347 -0
- package/src/Dialog/Dialog.test.tsx +312 -0
- package/src/Dialog/Dialog.tsx +127 -0
- package/src/Field/Field.test.tsx +6 -4
- package/src/Lightbox/Lightbox.mdx +63 -0
- package/src/Lightbox/Lightbox.stories.tsx +133 -0
- package/src/Lightbox/Lightbox.test.tsx +124 -0
- package/src/Lightbox/Lightbox.tsx +143 -0
- package/src/Listbox/Listbox.mdx +68 -0
- package/src/Listbox/Listbox.stories.tsx +205 -0
- package/src/Listbox/Listbox.test.tsx +198 -0
- package/src/Listbox/Listbox.tsx +295 -0
- package/src/Listbox/ListboxOption.tsx +104 -0
- package/src/Menu/Menu.mdx +11 -13
- package/src/Menu/Menu.test.tsx +47 -38
- package/src/Menu/Menu.tsx +81 -142
- package/src/Modal/Modal.mdx +29 -82
- package/src/Modal/Modal.stories.tsx +55 -188
- package/src/Modal/Modal.test.tsx +44 -177
- package/src/Modal/Modal.tsx +54 -204
- package/src/Overlay/OverlayPanel.tsx +195 -0
- package/src/Overlay/OverlayStack.test.tsx +235 -0
- package/src/Overlay/OverlayStack.tsx +132 -0
- package/src/Overlay/SharedBackdrop.tsx +40 -0
- package/src/Overlay/overlayPanelClass.ts +17 -0
- package/src/Overlay/useAnchoredOverlay.ts +197 -0
- package/src/Popover/Popover.mdx +17 -20
- package/src/Popover/Popover.stories.tsx +33 -0
- package/src/Popover/Popover.test.tsx +68 -32
- package/src/Popover/Popover.tsx +56 -95
- package/src/Tooltip/Tooltip.mdx +12 -9
- package/src/Tooltip/Tooltip.test.tsx +17 -19
- package/src/Tooltip/Tooltip.tsx +35 -32
- package/src/icons.storyHelpers.tsx +22 -0
- package/src/index.ts +22 -4
- package/src/mountStory.testHelpers.ts +25 -1
- package/src/sourceRules.test.ts +26 -1
- package/src/storyControls.test.ts +25 -12
- package/dist/Modal/lockScrollBehind.d.ts.map +0 -1
- package/dist/Modal/lockScrollBehind.js.map +0 -1
- /package/dist/{Modal → Overlay}/lockScrollBehind.d.ts +0 -0
- /package/dist/{Modal → Overlay}/lockScrollBehind.js +0 -0
- /package/src/{Modal → Overlay}/lockScrollBehind.ts +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,cAAc,EACd,aAAa,GACd,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EACL,UAAU,EACV,IAAI,EACJ,MAAM,EACN,KAAK,EACL,UAAU,EACV,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,eAAe,EACf,OAAO,GACR,MAAM,oBAAoB,CAAA;AAI3B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAwB/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,KAAK,GAAG,GAAG,EACX,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,GAAG,iBAAiB,EACP,EAAa,EAAE;IAC5B,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,aAAa,EAAE,CAAA;IAEnD,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,GAAG,WAAW,CAAC;QACpD,iEAAiE;QACjE,oBAAoB;QACpB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,YAAY;QAC1B,SAAS;QACT,UAAU,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;QACtD,QAAQ,EAAE,OAAO;QACjB,oBAAoB,EAAE,UAAU;KACjC,CAAC,CAAA;IAEF,MAAM,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,GAC3C,eAAe,CAAC;QACd,QAAQ,CAAC,OAAO,EAAE;YAChB,sDAAsD;YACtD,2DAA2D;YAC3D,uBAAuB;YACvB,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,KAAK;SACd,CAAC;QACF,uDAAuD;QACvD,2DAA2D;QAC3D,iCAAiC;QACjC,QAAQ,CAAC,OAAO,CAAC;QACjB,UAAU,CAAC,OAAO,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC;QAC9C,OAAO,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;KACtC,CAAC,CAAA;IAEJ,MAAM,aAAa,GAAG,cAAc,CAClC,QAAQ;IACR,iDAAiD;IACjD,kEAAkE;IAClE,2DAA2D;IAC3D,6DAA6D;IAC7D,oCAAoC;IACpC,cAAc,CAAC,iBAAiB,EAAE;QAChC,GAAG,iBAAiB,EAAE;QACtB,GAAG,EAAE,IAAI,CAAC,YAAY;KACvB,CAAC,CACH,CAAA;IAED,OAAO,CACL,8BACG,aAAa,EAEb,SAAS,CAAC,CAAC,CAAC,CACX,iBACM,gBAAgB,EAAE,EACtB,SAAS,EAAE,WAAW;
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,cAAc,EACd,aAAa,GACd,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EACL,UAAU,EACV,cAAc,EACd,IAAI,EACJ,MAAM,EACN,KAAK,EACL,UAAU,EACV,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,eAAe,EACf,OAAO,GACR,MAAM,oBAAoB,CAAA;AAI3B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAwB/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,KAAK,GAAG,GAAG,EACX,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,GAAG,iBAAiB,EACP,EAAa,EAAE;IAC5B,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,aAAa,EAAE,CAAA;IAEnD,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,GAAG,WAAW,CAAC;QACpD,iEAAiE;QACjE,oBAAoB;QACpB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,YAAY;QAC1B,SAAS;QACT,UAAU,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;QACtD,QAAQ,EAAE,OAAO;QACjB,oBAAoB,EAAE,UAAU;KACjC,CAAC,CAAA;IAEF,MAAM,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,GAC3C,eAAe,CAAC;QACd,QAAQ,CAAC,OAAO,EAAE;YAChB,sDAAsD;YACtD,2DAA2D;YAC3D,uBAAuB;YACvB,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,KAAK;SACd,CAAC;QACF,uDAAuD;QACvD,2DAA2D;QAC3D,iCAAiC;QACjC,QAAQ,CAAC,OAAO,CAAC;QACjB,UAAU,CAAC,OAAO,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC;QAC9C,OAAO,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;KACtC,CAAC,CAAA;IAEJ,MAAM,aAAa,GAAG,cAAc,CAClC,QAAQ;IACR,iDAAiD;IACjD,kEAAkE;IAClE,2DAA2D;IAC3D,6DAA6D;IAC7D,oCAAoC;IACpC,cAAc,CAAC,iBAAiB,EAAE;QAChC,GAAG,iBAAiB,EAAE;QACtB,GAAG,EAAE,IAAI,CAAC,YAAY;KACvB,CAAC,CACH,CAAA;IAED,OAAO,CACL,8BACG,aAAa,EAEb,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,cAAc,cACb,iBACM,gBAAgB,EAAE,EACtB,SAAS,EAAE,WAAW;oBACpB,sDAAsD;oBACtD,oDAAoD;oBACpD,sDAAsD;oBACtD,0DAA0D;oBAC1D,oDAAoD;oBACpD,yDAAyD;oBACzD,uDAAuD;oBACvD,eAAe;oBACf,mIAAmI,EACnI,SAAS,CACV;oBACD,yDAAyD;oBACzD,yDAAyD;oBACzD,yDAAyD;oBACzD,0DAA0D;oBAC1D,2DAA2D;oBAC3D,yDAAyD;oBACzD,iBAAiB;oBACjB,GAAG,EAAE,IAAI,CAAC,WAAW;oBACrB,yDAAyD;oBACzD,oDAAoD;oBACpD,0DAA0D;oBAC1D,2DAA2D;oBAC3D,+BAA+B;oBAC/B,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,cAAc,YAEpB,KAAK,GACF,GACS,CAClB,CAAC,CAAC,CAAC,IAAI,IACP,CACJ,CAAA;AACH,CAAC,CAAA"}
|
package/dist/index.d.ts
CHANGED
|
@@ -40,8 +40,16 @@ 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 { ColorSchemeSwitcherProps } from "./ColorSchemeSwitcher/ColorSchemeSwitcher.tsx";
|
|
44
|
+
export { ColorSchemeSwitcher } from "./ColorSchemeSwitcher/ColorSchemeSwitcher.tsx";
|
|
45
|
+
export type { ColorSchemeIcons, ColorSchemeToggleProps, } from "./ColorSchemeToggle/ColorSchemeToggle.tsx";
|
|
46
|
+
export { ColorSchemeToggle } from "./ColorSchemeToggle/ColorSchemeToggle.tsx";
|
|
47
|
+
export type { ComboboxProps } from "./Combobox/Combobox.tsx";
|
|
48
|
+
export { Combobox } from "./Combobox/Combobox.tsx";
|
|
43
49
|
export type { BadgeSize } from "./controlStyles.ts";
|
|
44
50
|
export { BADGE_SIZE_CLASS, CONTROL_SIZE_CLASS, DOT_SIZE_CLASS, ICON_CONTROL_SIZE_CLASS, MIN_TOUCH_TARGET_CLASS, SPINNER_SIZE_CLASS, } from "./controlStyles.ts";
|
|
51
|
+
export type { DialogProps, DialogSize, } from "./Dialog/Dialog.tsx";
|
|
52
|
+
export { Dialog } from "./Dialog/Dialog.tsx";
|
|
45
53
|
export type { EmptyStateProps, EmptyStateSize, } from "./EmptyState/EmptyState.tsx";
|
|
46
54
|
export { EmptyState } from "./EmptyState/EmptyState.tsx";
|
|
47
55
|
export type { FieldProps } from "./Field/Field.tsx";
|
|
@@ -54,6 +62,10 @@ export type { IconButtonProps } from "./IconButton/IconButton.tsx";
|
|
|
54
62
|
export { IconButton } from "./IconButton/IconButton.tsx";
|
|
55
63
|
export type { IntentAppearance } from "./intentStyles.ts";
|
|
56
64
|
export { DISABLED_CLASS, FOCUS_RING_CLASS, INTENT_APPEARANCE_CLASS, INTENT_CONTENT_CLASS, INTENT_HOVER_CLASS, INTENT_SOLID_FILL_CLASS, } from "./intentStyles.ts";
|
|
65
|
+
export type { LightboxProps } from "./Lightbox/Lightbox.tsx";
|
|
66
|
+
export { Lightbox } from "./Lightbox/Lightbox.tsx";
|
|
67
|
+
export type { ListboxItem, ListboxProps, } from "./Listbox/Listbox.tsx";
|
|
68
|
+
export { Listbox } from "./Listbox/Listbox.tsx";
|
|
57
69
|
export type { LiveStatusIndicatorProps, LiveStatusIndicatorSize, } from "./LiveStatusIndicator/LiveStatusIndicator.tsx";
|
|
58
70
|
export { LiveStatusIndicator } from "./LiveStatusIndicator/LiveStatusIndicator.tsx";
|
|
59
71
|
export type { LogLine, LogViewerProps, } from "./LogViewer/LogViewer.tsx";
|
|
@@ -64,7 +76,7 @@ export type { MediaStatus } from "./MediaTile/mediaStatus.ts";
|
|
|
64
76
|
export { mediaTransitions } from "./MediaTile/mediaStatus.ts";
|
|
65
77
|
export type { MenuItem, MenuProps, } from "./Menu/Menu.tsx";
|
|
66
78
|
export { Menu } from "./Menu/Menu.tsx";
|
|
67
|
-
export type { ModalProps
|
|
79
|
+
export type { ModalProps } from "./Modal/Modal.tsx";
|
|
68
80
|
export { Modal } from "./Modal/Modal.tsx";
|
|
69
81
|
export type { PopoverProps } from "./Popover/Popover.tsx";
|
|
70
82
|
export { Popover } from "./Popover/Popover.tsx";
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,YAAY,EACV,qBAAqB,EACrB,aAAa,EACb,cAAc,GACf,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,YAAY,EACV,UAAU,EACV,SAAS,GACV,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,YAAY,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,YAAY,EACV,WAAW,EACX,SAAS,EACT,WAAW,GACZ,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AACtC,YAAY,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,EACd,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,oBAAoB,CAAA;AAC3B,YAAY,EACV,eAAe,EACf,cAAc,GACf,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AACxD,YAAY,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AACnD,YAAY,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC9D,YAAY,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AACxD,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AACzD,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,uBAAuB,EACvB,oBAAoB,EACpB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,mBAAmB,CAAA;AAC1B,YAAY,EACV,wBAAwB,EACxB,uBAAuB,GACxB,MAAM,+CAA+C,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAA;AACnF,YAAY,EACV,OAAO,EACP,cAAc,GACf,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,YAAY,EACV,cAAc,EACd,cAAc,GACf,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,YAAY,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,YAAY,EACV,QAAQ,EACR,SAAS,GACV,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AACtC,YAAY,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -35,13 +35,19 @@ 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 { ColorSchemeSwitcher } from "./ColorSchemeSwitcher/ColorSchemeSwitcher.js";
|
|
39
|
+
export { ColorSchemeToggle } from "./ColorSchemeToggle/ColorSchemeToggle.js";
|
|
40
|
+
export { Combobox } from "./Combobox/Combobox.js";
|
|
38
41
|
export { BADGE_SIZE_CLASS, CONTROL_SIZE_CLASS, DOT_SIZE_CLASS, ICON_CONTROL_SIZE_CLASS, MIN_TOUCH_TARGET_CLASS, SPINNER_SIZE_CLASS, } from "./controlStyles.js";
|
|
42
|
+
export { Dialog } from "./Dialog/Dialog.js";
|
|
39
43
|
export { EmptyState } from "./EmptyState/EmptyState.js";
|
|
40
44
|
export { Field } from "./Field/Field.js";
|
|
41
45
|
export { FieldGroup } from "./Field/FieldGroup.js";
|
|
42
46
|
export { FileDropZone } from "./FileDropZone/FileDropZone.js";
|
|
43
47
|
export { IconButton } from "./IconButton/IconButton.js";
|
|
44
48
|
export { DISABLED_CLASS, FOCUS_RING_CLASS, INTENT_APPEARANCE_CLASS, INTENT_CONTENT_CLASS, INTENT_HOVER_CLASS, INTENT_SOLID_FILL_CLASS, } from "./intentStyles.js";
|
|
49
|
+
export { Lightbox } from "./Lightbox/Lightbox.js";
|
|
50
|
+
export { Listbox } from "./Listbox/Listbox.js";
|
|
45
51
|
export { LiveStatusIndicator } from "./LiveStatusIndicator/LiveStatusIndicator.js";
|
|
46
52
|
export { LogViewer } from "./LogViewer/LogViewer.js";
|
|
47
53
|
export { MediaTile } from "./MediaTile/MediaTile.js";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAOH,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAKrD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAM5C,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAEtC,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,EACd,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,oBAAoB,CAAA;AAK3B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AAExD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAwB,CAAA;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAiC,CAAA;AAE9D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AAExD,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,uBAAuB,EACvB,oBAAoB,EACpB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mountStory.testHelpers.d.ts","sourceRoot":"","sources":["../src/mountStory.testHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEvC,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAA;AAEvC;;;;;GAKG;AACH,KAAK,cAAc,GAAG;IACpB,GAAG,EAAE,CAAC,OAAO,EAAE;QACb,aAAa,EAAE,WAAW,CAAA;KAC3B,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CACpB,CAAA;
|
|
1
|
+
{"version":3,"file":"mountStory.testHelpers.d.ts","sourceRoot":"","sources":["../src/mountStory.testHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEvC,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAA;AAEvC;;;;;GAKG;AACH,KAAK,cAAc,GAAG;IACpB,GAAG,EAAE,CAAC,OAAO,EAAE;QACb,aAAa,EAAE,WAAW,CAAA;KAC3B,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CACpB,CAAA;AAkDD,eAAO,MAAM,UAAU,GACrB,OAAO,cAAc,KACpB,OAAO,CAAC;IACT,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,WAAW,CAAA;CAC3B,CAwBA,CAAA"}
|
|
@@ -31,16 +31,36 @@ import { within } from "storybook/test";
|
|
|
31
31
|
* The stale tree is removed rather than unmounted because portable
|
|
32
32
|
* stories expose no unmount. Detaching is enough: it takes the node
|
|
33
33
|
* out of the layout, which is the entire problem.
|
|
34
|
+
*
|
|
35
|
+
* ### Portalled panels leave the canvas
|
|
36
|
+
*
|
|
37
|
+
* Once the overlays portal to `document.body`, their panels are no
|
|
38
|
+
* longer inside `canvasElement`, and floating-ui's portal roots
|
|
39
|
+
* (`[data-floating-ui-portal]`) are body children a portable story
|
|
40
|
+
* never unmounts. A previous test's panel therefore lingers next to
|
|
41
|
+
* the live one, and `expectAgentDrivable(body, …)` fails with "2
|
|
42
|
+
* elements match" — the portal analogue of the fixed-position
|
|
43
|
+
* `ToastRegion` bug above. So the same cleanup that detaches stale
|
|
44
|
+
* canvases also removes stale portal roots, and `mountStory` now hands
|
|
45
|
+
* back `body` (scoped to `document.body`) for querying the panels the
|
|
46
|
+
* triggers still open from inside `canvas`.
|
|
34
47
|
*/
|
|
35
48
|
const mountedCanvases = [];
|
|
36
49
|
export const mountStory = async (story) => {
|
|
37
50
|
for (const previous of mountedCanvases.splice(0)) {
|
|
38
51
|
previous.remove();
|
|
39
52
|
}
|
|
53
|
+
for (const portalRoot of document.querySelectorAll("[data-floating-ui-portal]")) {
|
|
54
|
+
portalRoot.remove();
|
|
55
|
+
}
|
|
40
56
|
const canvasElement = document.createElement("div");
|
|
41
57
|
document.body.append(canvasElement);
|
|
42
58
|
mountedCanvases.push(canvasElement);
|
|
43
59
|
await story.run({ canvasElement });
|
|
44
|
-
return {
|
|
60
|
+
return {
|
|
61
|
+
body: within(document.body),
|
|
62
|
+
canvas: within(canvasElement),
|
|
63
|
+
canvasElement,
|
|
64
|
+
};
|
|
45
65
|
};
|
|
46
66
|
//# sourceMappingURL=mountStory.testHelpers.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mountStory.testHelpers.js","sourceRoot":"","sources":["../src/mountStory.testHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAgBvC;;;;;;;;;;GAUG;AACH
|
|
1
|
+
{"version":3,"file":"mountStory.testHelpers.js","sourceRoot":"","sources":["../src/mountStory.testHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAgBvC;;;;;;;;;;GAUG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,eAAe,GAAkB,EAAE,CAAA;AAEzC,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,EAC7B,KAAqB,EAKpB,EAAE;IACH,KAAK,MAAM,QAAQ,IAAI,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QACjD,QAAQ,CAAC,MAAM,EAAE,CAAA;IACnB,CAAC;IAED,KAAK,MAAM,UAAU,IAAI,QAAQ,CAAC,gBAAgB,CAChD,2BAA2B,CAC5B,EAAE,CAAC;QACF,UAAU,CAAC,MAAM,EAAE,CAAA;IACrB,CAAC;IAED,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAEnD,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;IAEnC,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;IAEnC,MAAM,KAAK,CAAC,GAAG,CAAC,EAAE,aAAa,EAAE,CAAC,CAAA;IAElC,OAAO;QACL,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;QAC3B,MAAM,EAAE,MAAM,CAAC,aAAa,CAAC;QAC7B,aAAa;KACd,CAAA;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@charcuterie/ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.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,9 +43,10 @@
|
|
|
43
43
|
"typecheck": "tsc --noEmit"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@charcuterie/logic": "1.0
|
|
47
|
-
"@charcuterie/tokens": "1.
|
|
48
|
-
"@floating-ui/react": "^0.27.20"
|
|
46
|
+
"@charcuterie/logic": "1.1.0",
|
|
47
|
+
"@charcuterie/tokens": "1.1.0",
|
|
48
|
+
"@floating-ui/react": "^0.27.20",
|
|
49
|
+
"@tanstack/react-virtual": "^3.13.12"
|
|
49
50
|
},
|
|
50
51
|
"peerDependencies": {
|
|
51
52
|
"react": ">=19",
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { Canvas, Controls, Meta } from "@storybook/addon-docs/blocks";
|
|
2
|
+
|
|
3
|
+
import * as ColorSchemeSwitcherStories from "./ColorSchemeSwitcher.stories";
|
|
4
|
+
|
|
5
|
+
<Meta of={ColorSchemeSwitcherStories} />
|
|
6
|
+
|
|
7
|
+
# ColorSchemeSwitcher
|
|
8
|
+
|
|
9
|
+
The connected switcher — **Layer 3, and the only layer that touches the browser.** It wires
|
|
10
|
+
the [`useColorScheme`](/) hook to the three defaults from `@charcuterie/logic/browser`
|
|
11
|
+
(`matchMedia` + `localStorage` + `data-scheme` on `<html>`) and renders the presentational
|
|
12
|
+
[`ColorSchemeToggle`](?path=/docs/components-colorschemetoggle--docs). Drop it in and the app
|
|
13
|
+
follows the OS, remembers the user's choice, and re-themes with zero React re-render.
|
|
14
|
+
|
|
15
|
+
<Canvas of={ColorSchemeSwitcherStories.Default} />
|
|
16
|
+
|
|
17
|
+
## Props
|
|
18
|
+
|
|
19
|
+
<Controls />
|
|
20
|
+
|
|
21
|
+
## Every seam is overridable — that is the point
|
|
22
|
+
|
|
23
|
+
`resolver`, `persistence`, and `apply` all default to the browser implementations but can be
|
|
24
|
+
replaced. Isolating the browser dependency to this one component is what lets a **non-browser
|
|
25
|
+
host** reuse the entire stack unchanged.
|
|
26
|
+
|
|
27
|
+
### Electron (`nativeTheme`) — copy-paste
|
|
28
|
+
|
|
29
|
+
The image-viewer is Electron, which owns the OS appearance through `nativeTheme`. Pass it as
|
|
30
|
+
the resolver and nothing else changes:
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
import { ColorSchemeSwitcher } from "@charcuterie/ui";
|
|
34
|
+
import type { ColorSchemeResolver } from "@charcuterie/logic";
|
|
35
|
+
import { nativeTheme } from "electron";
|
|
36
|
+
import { Monitor, Moon, Sun } from "lucide-react";
|
|
37
|
+
|
|
38
|
+
const nativeThemeResolver: ColorSchemeResolver = {
|
|
39
|
+
get: () => (nativeTheme.shouldUseDarkColors ? "dark" : "light"),
|
|
40
|
+
subscribe: (listener) => {
|
|
41
|
+
nativeTheme.on("updated", listener);
|
|
42
|
+
return () => nativeTheme.off("updated", listener);
|
|
43
|
+
},
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
<ColorSchemeSwitcher
|
|
47
|
+
resolver={nativeThemeResolver}
|
|
48
|
+
icons={{ light: <Sun />, dark: <Moon />, system: <Monitor /> }}
|
|
49
|
+
/>;
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
`persistence` and `apply` keep their browser defaults in an Electron **renderer** (it has
|
|
53
|
+
`localStorage` and a `document`). Only the resolver needs replacing, because only the OS
|
|
54
|
+
answer comes from outside the DOM.
|
|
55
|
+
|
|
56
|
+
### React-Native — the shape
|
|
57
|
+
|
|
58
|
+
RN has no `data-scheme` and no `matchMedia`. Replace **all three** seams: a resolver over
|
|
59
|
+
`Appearance.getColorScheme()` / `Appearance.addChangeListener`, a persistence over
|
|
60
|
+
`AsyncStorage`, and an `apply` that sets a theme **context value** instead of a DOM
|
|
61
|
+
attribute. `ColorSchemeToggle` renders as-is; only the seams differ.
|
|
62
|
+
|
|
63
|
+
## First paint
|
|
64
|
+
|
|
65
|
+
Following the OS/persisted choice means `<html data-scheme>` must be set **before first
|
|
66
|
+
paint**, or the page flashes the wrong theme for a frame. `@charcuterie/tokens` ships the
|
|
67
|
+
inline snippet — `buildFirstPaintScript(variant, { storageKey })`, emitted to
|
|
68
|
+
`dist/first-paint-script.html`. Paste it into `<head>` before any stylesheet, and keep its
|
|
69
|
+
`storageKey` equal to the one `localStoragePersistence(key)` uses — the shared default is
|
|
70
|
+
`DEFAULT_COLOR_SCHEME_STORAGE_KEY` (`"charcuterie-scheme"`), exported from both packages.
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import type {
|
|
2
|
+
ColorSchemePersistence,
|
|
3
|
+
ColorSchemeResolver,
|
|
4
|
+
ResolvedColorScheme,
|
|
5
|
+
} from "@charcuterie/logic"
|
|
6
|
+
import type { Meta, StoryObj } from "@storybook/react"
|
|
7
|
+
import { useRef, useState } from "react"
|
|
8
|
+
import type { ColorSchemeIcons } from "../ColorSchemeToggle/ColorSchemeToggle.tsx"
|
|
9
|
+
import {
|
|
10
|
+
MonitorIcon,
|
|
11
|
+
MoonIcon,
|
|
12
|
+
SunIcon,
|
|
13
|
+
} from "../icons.storyHelpers.tsx"
|
|
14
|
+
import { ColorSchemeSwitcher } from "./ColorSchemeSwitcher.tsx"
|
|
15
|
+
|
|
16
|
+
const ICONS: ColorSchemeIcons = {
|
|
17
|
+
dark: <MoonIcon />,
|
|
18
|
+
light: <SunIcon />,
|
|
19
|
+
system: <MonitorIcon />,
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* A controllable stand-in for `matchMedia` — the same shape Electron
|
|
24
|
+
* `nativeTheme` and RN `Appearance` satisfy. The stories inject it
|
|
25
|
+
* instead of the real one so the board never reads the CI machine's
|
|
26
|
+
* OS setting and never writes `localStorage`.
|
|
27
|
+
*/
|
|
28
|
+
const makeFakeResolver = (
|
|
29
|
+
initial: ResolvedColorScheme,
|
|
30
|
+
): ColorSchemeResolver => ({
|
|
31
|
+
get: () => initial,
|
|
32
|
+
subscribe: () => () => {},
|
|
33
|
+
})
|
|
34
|
+
|
|
35
|
+
const inMemoryPersistence = (): ColorSchemePersistence => {
|
|
36
|
+
let value:
|
|
37
|
+
| Parameters<ColorSchemePersistence["write"]>[0]
|
|
38
|
+
| null = null
|
|
39
|
+
|
|
40
|
+
return {
|
|
41
|
+
read: () => value,
|
|
42
|
+
write: (mode) => {
|
|
43
|
+
value = mode
|
|
44
|
+
},
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* Drives a **scoped** demo: the switcher writes `data-scheme` onto
|
|
50
|
+
* this panel rather than `<html>`, so the surrounding Storybook
|
|
51
|
+
* chrome is untouched and the effect is contained and visible. In a
|
|
52
|
+
* real app the default `apply` targets `<html>`.
|
|
53
|
+
*/
|
|
54
|
+
const ScopedSwitcherDemo = () => {
|
|
55
|
+
const panelRef = useRef<HTMLDivElement>(null)
|
|
56
|
+
|
|
57
|
+
const [seams] = useState(() => ({
|
|
58
|
+
persistence: inMemoryPersistence(),
|
|
59
|
+
resolver: makeFakeResolver("dark"),
|
|
60
|
+
}))
|
|
61
|
+
|
|
62
|
+
return (
|
|
63
|
+
<div
|
|
64
|
+
className="inline-flex items-center gap-3 rounded-lg border border-border-subtle bg-surface-base p-3 text-content-primary"
|
|
65
|
+
data-scheme="dark"
|
|
66
|
+
ref={panelRef}
|
|
67
|
+
>
|
|
68
|
+
<ColorSchemeSwitcher
|
|
69
|
+
apply={(resolvedScheme) => {
|
|
70
|
+
panelRef.current?.setAttribute(
|
|
71
|
+
"data-scheme",
|
|
72
|
+
resolvedScheme,
|
|
73
|
+
)
|
|
74
|
+
}}
|
|
75
|
+
icons={ICONS}
|
|
76
|
+
persistence={seams.persistence}
|
|
77
|
+
resolver={seams.resolver}
|
|
78
|
+
/>
|
|
79
|
+
|
|
80
|
+
<span className="text-sm text-content-secondary">
|
|
81
|
+
This panel follows the switcher.
|
|
82
|
+
</span>
|
|
83
|
+
</div>
|
|
84
|
+
)
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
const meta = {
|
|
88
|
+
title: "Components/ColorSchemeSwitcher",
|
|
89
|
+
component: ColorSchemeSwitcher,
|
|
90
|
+
parameters: { layout: "padded" },
|
|
91
|
+
// The three injected seams are functions/objects, not values a
|
|
92
|
+
// Controls panel can render — `react-docgen` sees them as opaque
|
|
93
|
+
// names from `@charcuterie/logic`. Disabled explicitly rather than
|
|
94
|
+
// left to fall through to the object control.
|
|
95
|
+
argTypes: {
|
|
96
|
+
apply: { control: false },
|
|
97
|
+
persistence: { control: false },
|
|
98
|
+
resolver: { control: false },
|
|
99
|
+
},
|
|
100
|
+
args: {
|
|
101
|
+
icons: ICONS,
|
|
102
|
+
},
|
|
103
|
+
} satisfies Meta<typeof ColorSchemeSwitcher>
|
|
104
|
+
|
|
105
|
+
export default meta
|
|
106
|
+
|
|
107
|
+
type Story = StoryObj<typeof meta>
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* Connected: the switcher builds its own state through
|
|
111
|
+
* `useColorScheme` and applies the resolved scheme. Here the OS
|
|
112
|
+
* resolver and persistence are injected fakes and the applier is
|
|
113
|
+
* scoped to the demo panel, which is exactly how a non-browser host
|
|
114
|
+
* (Electron `nativeTheme`) wires it — by replacing those seams.
|
|
115
|
+
*/
|
|
116
|
+
export const Default: Story = {
|
|
117
|
+
render: () => <ScopedSwitcherDemo />,
|
|
118
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { composeStories } from "@storybook/react"
|
|
2
|
+
import { expect, userEvent, within } from "storybook/test"
|
|
3
|
+
import { test } from "vitest"
|
|
4
|
+
|
|
5
|
+
import { expectNoAxeViolations } from "../expectNoAxeViolations.testHelpers.ts"
|
|
6
|
+
import { mountStory } from "../mountStory.testHelpers.ts"
|
|
7
|
+
import { expectAgentDrivable } from "../testing/index.ts"
|
|
8
|
+
import * as stories from "./ColorSchemeSwitcher.stories.tsx"
|
|
9
|
+
|
|
10
|
+
const { Default } = composeStories(stories)
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* The connected switcher is agent-drivable and cycles like the
|
|
14
|
+
* toggle — the extra thing proven here is that the resolved scheme
|
|
15
|
+
* reaches the applier: the demo panel's `data-scheme` tracks it.
|
|
16
|
+
*/
|
|
17
|
+
test("it renders a named, drivable button", async () => {
|
|
18
|
+
const { canvas } = await mountStory(Default)
|
|
19
|
+
|
|
20
|
+
expectAgentDrivable(canvas, {
|
|
21
|
+
name: /colour scheme/i,
|
|
22
|
+
role: "button",
|
|
23
|
+
})
|
|
24
|
+
})
|
|
25
|
+
|
|
26
|
+
test("system resolves through the injected resolver to the panel", async () => {
|
|
27
|
+
const { canvasElement } = await mountStory(Default)
|
|
28
|
+
|
|
29
|
+
const panel = canvasElement.querySelector("[data-scheme]")
|
|
30
|
+
|
|
31
|
+
// The injected resolver answers "dark", mode starts on system.
|
|
32
|
+
expect(panel?.getAttribute("data-scheme")).toBe("dark")
|
|
33
|
+
})
|
|
34
|
+
|
|
35
|
+
test("cycling to a concrete mode re-applies the scheme", async () => {
|
|
36
|
+
const { canvasElement } = await mountStory(Default)
|
|
37
|
+
|
|
38
|
+
const canvas = within(canvasElement)
|
|
39
|
+
|
|
40
|
+
const button = expectAgentDrivable(canvas, {
|
|
41
|
+
name: /colour scheme/i,
|
|
42
|
+
role: "button",
|
|
43
|
+
})
|
|
44
|
+
|
|
45
|
+
const panel = canvasElement.querySelector("[data-scheme]")
|
|
46
|
+
|
|
47
|
+
// system → light: resolved scheme is now light regardless of OS.
|
|
48
|
+
await userEvent.click(button)
|
|
49
|
+
|
|
50
|
+
expect(panel?.getAttribute("data-scheme")).toBe("light")
|
|
51
|
+
|
|
52
|
+
await expectNoAxeViolations(canvasElement)
|
|
53
|
+
})
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import type {
|
|
2
|
+
ColorSchemeApplier,
|
|
3
|
+
ColorSchemePersistence,
|
|
4
|
+
ColorSchemeResolver,
|
|
5
|
+
} from "@charcuterie/logic"
|
|
6
|
+
import { useColorScheme } from "@charcuterie/logic"
|
|
7
|
+
import {
|
|
8
|
+
dataSchemeApplier,
|
|
9
|
+
localStoragePersistence,
|
|
10
|
+
matchMediaResolver,
|
|
11
|
+
} from "@charcuterie/logic/browser"
|
|
12
|
+
import type { ReactNode } from "react"
|
|
13
|
+
import { useState } from "react"
|
|
14
|
+
|
|
15
|
+
import type {
|
|
16
|
+
ColorSchemeIcons,
|
|
17
|
+
ColorSchemeToggleProps,
|
|
18
|
+
} from "../ColorSchemeToggle/ColorSchemeToggle.tsx"
|
|
19
|
+
import { ColorSchemeToggle } from "../ColorSchemeToggle/ColorSchemeToggle.tsx"
|
|
20
|
+
|
|
21
|
+
export type ColorSchemeSwitcherProps = Pick<
|
|
22
|
+
ColorSchemeToggleProps,
|
|
23
|
+
| "appearance"
|
|
24
|
+
| "className"
|
|
25
|
+
| "isDisabled"
|
|
26
|
+
| "label"
|
|
27
|
+
| "order"
|
|
28
|
+
| "size"
|
|
29
|
+
> & {
|
|
30
|
+
/** Override where the resolved scheme is written. Default `<html>`. */
|
|
31
|
+
apply?: ColorSchemeApplier
|
|
32
|
+
icons: ColorSchemeIcons
|
|
33
|
+
/** Override persistence. Default `localStorage` under `storageKey`. */
|
|
34
|
+
persistence?: ColorSchemePersistence
|
|
35
|
+
/**
|
|
36
|
+
* Override the OS resolver. Default `matchMedia`. This is the seam
|
|
37
|
+
* the image-viewer passes Electron `nativeTheme` into, and a
|
|
38
|
+
* future React-Native app passes `Appearance` — the whole reason
|
|
39
|
+
* the browser dependency is isolated to this one layer.
|
|
40
|
+
*/
|
|
41
|
+
resolver?: ColorSchemeResolver
|
|
42
|
+
storageKey?: string
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* The connected colour-scheme switcher — Layer 3, and the only
|
|
47
|
+
* layer that touches the browser.
|
|
48
|
+
*
|
|
49
|
+
* It is a thin wrapper: it wires `useColorScheme` to the three
|
|
50
|
+
* browser defaults from `@charcuterie/logic/browser`
|
|
51
|
+
* (`matchMedia` + `localStorage` + `data-scheme` on `<html>`), and
|
|
52
|
+
* renders the presentational `ColorSchemeToggle`. Every seam is
|
|
53
|
+
* overridable, so a non-browser host swaps `resolver`/`persistence`/
|
|
54
|
+
* `apply` and the same component drives Electron or React-Native.
|
|
55
|
+
*
|
|
56
|
+
* The seams are built once (lazy `useState`) so the `matchMedia`
|
|
57
|
+
* query and the core survive re-renders and StrictMode's double
|
|
58
|
+
* mount.
|
|
59
|
+
*/
|
|
60
|
+
export const ColorSchemeSwitcher = ({
|
|
61
|
+
apply,
|
|
62
|
+
icons,
|
|
63
|
+
order,
|
|
64
|
+
persistence,
|
|
65
|
+
resolver,
|
|
66
|
+
storageKey,
|
|
67
|
+
...toggleProps
|
|
68
|
+
}: ColorSchemeSwitcherProps): ReactNode => {
|
|
69
|
+
const [seams] = useState(() => ({
|
|
70
|
+
apply: apply ?? dataSchemeApplier(),
|
|
71
|
+
persistence:
|
|
72
|
+
persistence ?? localStoragePersistence(storageKey),
|
|
73
|
+
resolver: resolver ?? matchMediaResolver(),
|
|
74
|
+
}))
|
|
75
|
+
|
|
76
|
+
const { cycle, mode } = useColorScheme({
|
|
77
|
+
...seams,
|
|
78
|
+
order,
|
|
79
|
+
})
|
|
80
|
+
|
|
81
|
+
return (
|
|
82
|
+
<ColorSchemeToggle
|
|
83
|
+
{...toggleProps}
|
|
84
|
+
icons={icons}
|
|
85
|
+
mode={mode}
|
|
86
|
+
onCycle={cycle}
|
|
87
|
+
order={order}
|
|
88
|
+
/>
|
|
89
|
+
)
|
|
90
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { Canvas, Controls, Meta } from "@storybook/addon-docs/blocks";
|
|
2
|
+
|
|
3
|
+
import * as ColorSchemeToggleStories from "./ColorSchemeToggle.stories";
|
|
4
|
+
|
|
5
|
+
<Meta of={ColorSchemeToggleStories} />
|
|
6
|
+
|
|
7
|
+
# ColorSchemeToggle
|
|
8
|
+
|
|
9
|
+
The cycling colour-scheme button — **light → dark → system → light**. Layer 2 of three:
|
|
10
|
+
presentational and **controlled**, with no `matchMedia`, `localStorage`, or `document` in
|
|
11
|
+
sight. It renders the current `mode` and reports the next one through `onCycle`; it stores
|
|
12
|
+
nothing.
|
|
13
|
+
|
|
14
|
+
That split is deliberate. The browser dependency lives one layer up in
|
|
15
|
+
[`ColorSchemeSwitcher`](?path=/docs/components-colorschemeswitcher--docs), so this component
|
|
16
|
+
runs unchanged in any runtime — a plain React app wires `onCycle` to `useState`, an Electron
|
|
17
|
+
or React-Native host wires it to `useColorScheme` with its own resolver.
|
|
18
|
+
|
|
19
|
+
<Canvas of={ColorSchemeToggleStories.Default} />
|
|
20
|
+
|
|
21
|
+
## Props
|
|
22
|
+
|
|
23
|
+
<Controls />
|
|
24
|
+
|
|
25
|
+
## `mode` vs scheme
|
|
26
|
+
|
|
27
|
+
`mode` is the three-way user preference — `"light" | "dark" | "system"`. It is **not** a
|
|
28
|
+
`data-scheme` value: `data-scheme` only ever holds `"light"` or `"dark"`. Resolving
|
|
29
|
+
`system` to a concrete scheme is the connected layer's job, not this one's.
|
|
30
|
+
|
|
31
|
+
## Icons are yours
|
|
32
|
+
|
|
33
|
+
The library ships **no icons**
|
|
34
|
+
([decision](?path=/docs/foundations-decisions--docs)) — `icons` is a `ReactNode` per mode,
|
|
35
|
+
and an app passes lucide `Sun` / `Moon` / `Monitor` (the fleet recommendation). The glyph is
|
|
36
|
+
`aria-hidden`; the button's name comes from `label`, which states the current mode so the
|
|
37
|
+
control is agent-drivable and a screen reader that lands on it hears "Colour scheme: system"
|
|
38
|
+
rather than a nameless button.
|
|
39
|
+
|
|
40
|
+
<Canvas of={ColorSchemeToggleStories.AllModes} />
|
|
41
|
+
|
|
42
|
+
## Cycling is the only form, for now
|
|
43
|
+
|
|
44
|
+
A segmented, all-three-visible `ColorSchemePicker` was considered and deferred (owner chose
|
|
45
|
+
cycling-only, 2026-08-03). `icons` and `order` are shaped so that form can be added later
|
|
46
|
+
without changing this API.
|
|
47
|
+
|
|
48
|
+
<Canvas of={ColorSchemeToggleStories.Sizes} />
|