@charcuterie/ui 1.0.0 → 1.1.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/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/Select/Select.d.ts +10 -2
- package/dist/Select/Select.d.ts.map +1 -1
- package/dist/Select/Select.js.map +1 -1
- 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/slotProps.d.ts +11 -0
- package/dist/slotProps.d.ts.map +1 -1
- package/dist/slotProps.js +16 -0
- package/dist/slotProps.js.map +1 -1
- package/dist/slotWiring.d.ts +32 -0
- package/dist/slotWiring.d.ts.map +1 -0
- package/dist/slotWiring.js +115 -0
- package/dist/slotWiring.js.map +1 -0
- package/package.json +3 -3
- 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/Lightbox/Lightbox.mdx +62 -0
- package/src/Lightbox/Lightbox.stories.tsx +133 -0
- package/src/Lightbox/Lightbox.test.tsx +135 -0
- package/src/Lightbox/Lightbox.tsx +143 -0
- package/src/Menu/Menu.mdx +23 -0
- package/src/Menu/Menu.stories.tsx +67 -0
- package/src/Menu/Menu.test.tsx +113 -2
- package/src/Popover/Popover.mdx +5 -0
- package/src/Select/Select.stories.tsx +10 -2
- package/src/Select/Select.tsx +10 -2
- package/src/icons.storyHelpers.tsx +22 -0
- package/src/index.ts +9 -0
- package/src/slotProps.ts +20 -0
- package/src/slotWiring.ts +173 -0
- package/src/sourceRules.test.ts +17 -1
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { ColorSchemeApplier, ColorSchemePersistence, ColorSchemeResolver } from "@charcuterie/logic";
|
|
2
|
+
import type { ReactNode } from "react";
|
|
3
|
+
import type { ColorSchemeIcons, ColorSchemeToggleProps } from "../ColorSchemeToggle/ColorSchemeToggle.tsx";
|
|
4
|
+
export type ColorSchemeSwitcherProps = Pick<ColorSchemeToggleProps, "appearance" | "className" | "isDisabled" | "label" | "order" | "size"> & {
|
|
5
|
+
/** Override where the resolved scheme is written. Default `<html>`. */
|
|
6
|
+
apply?: ColorSchemeApplier;
|
|
7
|
+
icons: ColorSchemeIcons;
|
|
8
|
+
/** Override persistence. Default `localStorage` under `storageKey`. */
|
|
9
|
+
persistence?: ColorSchemePersistence;
|
|
10
|
+
/**
|
|
11
|
+
* Override the OS resolver. Default `matchMedia`. This is the seam
|
|
12
|
+
* the image-viewer passes Electron `nativeTheme` into, and a
|
|
13
|
+
* future React-Native app passes `Appearance` — the whole reason
|
|
14
|
+
* the browser dependency is isolated to this one layer.
|
|
15
|
+
*/
|
|
16
|
+
resolver?: ColorSchemeResolver;
|
|
17
|
+
storageKey?: string;
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* The connected colour-scheme switcher — Layer 3, and the only
|
|
21
|
+
* layer that touches the browser.
|
|
22
|
+
*
|
|
23
|
+
* It is a thin wrapper: it wires `useColorScheme` to the three
|
|
24
|
+
* browser defaults from `@charcuterie/logic/browser`
|
|
25
|
+
* (`matchMedia` + `localStorage` + `data-scheme` on `<html>`), and
|
|
26
|
+
* renders the presentational `ColorSchemeToggle`. Every seam is
|
|
27
|
+
* overridable, so a non-browser host swaps `resolver`/`persistence`/
|
|
28
|
+
* `apply` and the same component drives Electron or React-Native.
|
|
29
|
+
*
|
|
30
|
+
* The seams are built once (lazy `useState`) so the `matchMedia`
|
|
31
|
+
* query and the core survive re-renders and StrictMode's double
|
|
32
|
+
* mount.
|
|
33
|
+
*/
|
|
34
|
+
export declare const ColorSchemeSwitcher: ({ apply, icons, order, persistence, resolver, storageKey, ...toggleProps }: ColorSchemeSwitcherProps) => ReactNode;
|
|
35
|
+
//# sourceMappingURL=ColorSchemeSwitcher.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColorSchemeSwitcher.d.ts","sourceRoot":"","sources":["../../src/ColorSchemeSwitcher/ColorSchemeSwitcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,kBAAkB,EAClB,sBAAsB,EACtB,mBAAmB,EACpB,MAAM,oBAAoB,CAAA;AAO3B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EACV,gBAAgB,EAChB,sBAAsB,EACvB,MAAM,4CAA4C,CAAA;AAGnD,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,sBAAsB,EACpB,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,OAAO,GACP,OAAO,GACP,MAAM,CACT,GAAG;IACF,uEAAuE;IACvE,KAAK,CAAC,EAAE,kBAAkB,CAAA;IAC1B,KAAK,EAAE,gBAAgB,CAAA;IACvB,uEAAuE;IACvE,WAAW,CAAC,EAAE,sBAAsB,CAAA;IACpC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,mBAAmB,CAAA;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,mBAAmB,GAAI,4EAQjC,wBAAwB,KAAG,SAsB7B,CAAA"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useColorScheme } from "@charcuterie/logic";
|
|
3
|
+
import { dataSchemeApplier, localStoragePersistence, matchMediaResolver, } from "@charcuterie/logic/browser";
|
|
4
|
+
import { useState } from "react";
|
|
5
|
+
import { ColorSchemeToggle } from "../ColorSchemeToggle/ColorSchemeToggle.js";
|
|
6
|
+
/**
|
|
7
|
+
* The connected colour-scheme switcher — Layer 3, and the only
|
|
8
|
+
* layer that touches the browser.
|
|
9
|
+
*
|
|
10
|
+
* It is a thin wrapper: it wires `useColorScheme` to the three
|
|
11
|
+
* browser defaults from `@charcuterie/logic/browser`
|
|
12
|
+
* (`matchMedia` + `localStorage` + `data-scheme` on `<html>`), and
|
|
13
|
+
* renders the presentational `ColorSchemeToggle`. Every seam is
|
|
14
|
+
* overridable, so a non-browser host swaps `resolver`/`persistence`/
|
|
15
|
+
* `apply` and the same component drives Electron or React-Native.
|
|
16
|
+
*
|
|
17
|
+
* The seams are built once (lazy `useState`) so the `matchMedia`
|
|
18
|
+
* query and the core survive re-renders and StrictMode's double
|
|
19
|
+
* mount.
|
|
20
|
+
*/
|
|
21
|
+
export const ColorSchemeSwitcher = ({ apply, icons, order, persistence, resolver, storageKey, ...toggleProps }) => {
|
|
22
|
+
const [seams] = useState(() => ({
|
|
23
|
+
apply: apply ?? dataSchemeApplier(),
|
|
24
|
+
persistence: persistence ?? localStoragePersistence(storageKey),
|
|
25
|
+
resolver: resolver ?? matchMediaResolver(),
|
|
26
|
+
}));
|
|
27
|
+
const { cycle, mode } = useColorScheme({
|
|
28
|
+
...seams,
|
|
29
|
+
order,
|
|
30
|
+
});
|
|
31
|
+
return (_jsx(ColorSchemeToggle, { ...toggleProps, icons: icons, mode: mode, onCycle: cycle, order: order }));
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=ColorSchemeSwitcher.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColorSchemeSwitcher.js","sourceRoot":"","sources":["../../src/ColorSchemeSwitcher/ColorSchemeSwitcher.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EACL,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,4BAA4B,CAAA;AAEnC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAMhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA4C,CAAA;AA0B9E;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,KAAK,EACL,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACR,UAAU,EACV,GAAG,WAAW,EACW,EAAa,EAAE;IACxC,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;QAC9B,KAAK,EAAE,KAAK,IAAI,iBAAiB,EAAE;QACnC,WAAW,EACT,WAAW,IAAI,uBAAuB,CAAC,UAAU,CAAC;QACpD,QAAQ,EAAE,QAAQ,IAAI,kBAAkB,EAAE;KAC3C,CAAC,CAAC,CAAA;IAEH,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,cAAc,CAAC;QACrC,GAAG,KAAK;QACR,KAAK;KACN,CAAC,CAAA;IAEF,OAAO,CACL,KAAC,iBAAiB,OACZ,WAAW,EACf,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,KAAK,GACZ,CACH,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import type { ColorSchemeMode } from "@charcuterie/logic";
|
|
2
|
+
import type { ControlSize } from "@charcuterie/tokens";
|
|
3
|
+
import type { ReactNode } from "react";
|
|
4
|
+
import type { IntentAppearance } from "../intentStyles.ts";
|
|
5
|
+
/**
|
|
6
|
+
* One `ReactNode` per mode. The library ships **no icons** — lucide
|
|
7
|
+
* (ISC) is the fleet recommendation — so an app passes its own
|
|
8
|
+
* `Sun` / `Moon` / `Monitor`, exactly as `IconButton` takes its
|
|
9
|
+
* glyph as `children`
|
|
10
|
+
* ([decision](../../../../docs/decisions/2026-07-29-ship-no-icons-and-no-symbol-glyphs.md)).
|
|
11
|
+
*/
|
|
12
|
+
export type ColorSchemeIcons = Record<ColorSchemeMode, ReactNode>;
|
|
13
|
+
export type ColorSchemeToggleProps = {
|
|
14
|
+
appearance?: IntentAppearance;
|
|
15
|
+
className?: string;
|
|
16
|
+
icons: ColorSchemeIcons;
|
|
17
|
+
isDisabled?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Builds the accessible name from the current and next mode.
|
|
20
|
+
* Default announces the current mode and where a press goes —
|
|
21
|
+
* "Colour scheme: dark. Activate to switch to system." — so the
|
|
22
|
+
* name updates as the control cycles and
|
|
23
|
+
* `getByRole("button", { name: /colour scheme/i })` resolves.
|
|
24
|
+
*/
|
|
25
|
+
label?: (mode: ColorSchemeMode, nextMode: ColorSchemeMode) => string;
|
|
26
|
+
mode: ColorSchemeMode;
|
|
27
|
+
/**
|
|
28
|
+
* Called with the next mode on activation. **Controlled**: this
|
|
29
|
+
* component stores nothing — it renders `mode` and reports intent,
|
|
30
|
+
* which is what keeps it free of `matchMedia`/`document` and
|
|
31
|
+
* usable in any runtime. `<ColorSchemeSwitcher>` wires this to the
|
|
32
|
+
* `useColorScheme` hook; a plain consumer wires it to its own
|
|
33
|
+
* state.
|
|
34
|
+
*/
|
|
35
|
+
onCycle: (nextMode: ColorSchemeMode) => void;
|
|
36
|
+
order?: readonly ColorSchemeMode[];
|
|
37
|
+
size?: ControlSize;
|
|
38
|
+
};
|
|
39
|
+
/**
|
|
40
|
+
* The cycling colour-scheme button — light → dark → system → light.
|
|
41
|
+
*
|
|
42
|
+
* Layer 2 of the three: presentational and controlled, with no
|
|
43
|
+
* browser coupling. It is an `IconButton`, so it inherits the one
|
|
44
|
+
* rule that makes the fleet agent-drivable — a glyph is not a name,
|
|
45
|
+
* and this control's name states the current mode rather than
|
|
46
|
+
* leaving a screen reader to read a sun path as nothing.
|
|
47
|
+
*
|
|
48
|
+
* A *segmented* all-three-visible form was considered and deferred
|
|
49
|
+
* (owner chose cycling-only, 2026-08-03); `icons` and `order` are
|
|
50
|
+
* shaped so a `ColorSchemePicker` could join later without changing
|
|
51
|
+
* this API.
|
|
52
|
+
*/
|
|
53
|
+
export declare const ColorSchemeToggle: ({ appearance, className, icons, isDisabled, label, mode, onCycle, order, size, }: ColorSchemeToggleProps) => ReactNode;
|
|
54
|
+
//# sourceMappingURL=ColorSchemeToggle.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColorSchemeToggle.d.ts","sourceRoot":"","sources":["../../src/ColorSchemeToggle/ColorSchemeToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAKzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,CACnC,eAAe,EACf,SAAS,CACV,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,gBAAgB,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,CACN,IAAI,EAAE,eAAe,EACrB,QAAQ,EAAE,eAAe,KACtB,MAAM,CAAA;IACX,IAAI,EAAE,eAAe,CAAA;IACrB;;;;;;;OAOG;IACH,OAAO,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAA;IAC5C,KAAK,CAAC,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAcD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,iBAAiB,GAAI,kFAU/B,sBAAsB,KAAG,SAiB3B,CAAA"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { DEFAULT_COLOR_SCHEME_ORDER, nextColorSchemeMode, } from "@charcuterie/logic";
|
|
3
|
+
import { IconButton } from "../IconButton/IconButton.js";
|
|
4
|
+
const MODE_LABEL = {
|
|
5
|
+
dark: "Dark",
|
|
6
|
+
light: "Light",
|
|
7
|
+
system: "System",
|
|
8
|
+
};
|
|
9
|
+
const defaultLabel = (mode, nextMode) => `Colour scheme: ${MODE_LABEL[mode]}. Activate to switch to ${MODE_LABEL[nextMode]}.`;
|
|
10
|
+
/**
|
|
11
|
+
* The cycling colour-scheme button — light → dark → system → light.
|
|
12
|
+
*
|
|
13
|
+
* Layer 2 of the three: presentational and controlled, with no
|
|
14
|
+
* browser coupling. It is an `IconButton`, so it inherits the one
|
|
15
|
+
* rule that makes the fleet agent-drivable — a glyph is not a name,
|
|
16
|
+
* and this control's name states the current mode rather than
|
|
17
|
+
* leaving a screen reader to read a sun path as nothing.
|
|
18
|
+
*
|
|
19
|
+
* A *segmented* all-three-visible form was considered and deferred
|
|
20
|
+
* (owner chose cycling-only, 2026-08-03); `icons` and `order` are
|
|
21
|
+
* shaped so a `ColorSchemePicker` could join later without changing
|
|
22
|
+
* this API.
|
|
23
|
+
*/
|
|
24
|
+
export const ColorSchemeToggle = ({ appearance = "ghost", className, icons, isDisabled = false, label = defaultLabel, mode, onCycle, order = DEFAULT_COLOR_SCHEME_ORDER, size = "md", }) => {
|
|
25
|
+
const nextMode = nextColorSchemeMode(mode, order);
|
|
26
|
+
return (_jsx(IconButton, { appearance: appearance, className: className, isDisabled: isDisabled, label: label(mode, nextMode), onClick: () => {
|
|
27
|
+
onCycle(nextMode);
|
|
28
|
+
}, size: size, children: icons[mode] }));
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=ColorSchemeToggle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColorSchemeToggle.js","sourceRoot":"","sources":["../../src/ColorSchemeToggle/ColorSchemeToggle.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,0BAA0B,EAC1B,mBAAmB,GACpB,MAAM,oBAAoB,CAAA;AAI3B,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA8B,CAAA;AA6CzD,MAAM,UAAU,GAAoC;IAClD,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACjB,CAAA;AAED,MAAM,YAAY,GAAG,CACnB,IAAqB,EACrB,QAAyB,EACzB,EAAE,CACF,kBAAkB,UAAU,CAAC,IAAI,CAAC,2BAA2B,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAA;AAEtF;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,UAAU,GAAG,OAAO,EACpB,SAAS,EACT,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,KAAK,GAAG,YAAY,EACpB,IAAI,EACJ,OAAO,EACP,KAAK,GAAG,0BAA0B,EAClC,IAAI,GAAG,IAAI,GACY,EAAa,EAAE;IACtC,MAAM,QAAQ,GAAG,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;IAEjD,OAAO,CACL,KAAC,UAAU,IACT,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,QAAQ,CAAC,EAC5B,OAAO,EAAE,GAAG,EAAE;YACZ,OAAO,CAAC,QAAQ,CAAC,CAAA;QACnB,CAAC,EACD,IAAI,EAAE,IAAI,YAET,KAAK,CAAC,IAAI,CAAC,GACD,CACd,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
export type LightboxProps = {
|
|
3
|
+
/**
|
|
4
|
+
* Required, and the whole reason this is not a bare `<img>` in a
|
|
5
|
+
* dialog. It names both the enlarged image and — via `heading`'s
|
|
6
|
+
* default below — the dialog itself, and a poster grid of unnamed
|
|
7
|
+
* images is unnavigable rather than merely imperfect. Same rule
|
|
8
|
+
* `MediaTile` makes.
|
|
9
|
+
*/
|
|
10
|
+
alt: string;
|
|
11
|
+
/** Shown under the enlarged image. A year, a source, a filename. */
|
|
12
|
+
caption?: ReactNode;
|
|
13
|
+
/** Applied to the built-in trigger button, not the dialog. */
|
|
14
|
+
className?: string;
|
|
15
|
+
/**
|
|
16
|
+
* The dialog's accessible name and visible heading. Defaults to
|
|
17
|
+
* `alt`, which is right when the thumbnail's alt is already the
|
|
18
|
+
* title ("THE OUTFIT poster"); pass it when the two should differ.
|
|
19
|
+
*/
|
|
20
|
+
heading?: string;
|
|
21
|
+
/**
|
|
22
|
+
* **Controlled** open state. Omit for the uncontrolled default,
|
|
23
|
+
* where the trigger owns it through `useVisibility`. Present means
|
|
24
|
+
* the caller owns it and the built-in trigger becomes a plain
|
|
25
|
+
* button that only *reports* intent through `onOpenChange`.
|
|
26
|
+
*/
|
|
27
|
+
isOpen?: boolean;
|
|
28
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
29
|
+
src: string;
|
|
30
|
+
/**
|
|
31
|
+
* The clickable thumbnail — a smaller `<img>`, usually. Omitted in
|
|
32
|
+
* the controlled, trigger-elsewhere case, where something else in
|
|
33
|
+
* the page opens the lightbox and this renders only the overlay.
|
|
34
|
+
*/
|
|
35
|
+
thumbnail?: ReactNode;
|
|
36
|
+
};
|
|
37
|
+
/**
|
|
38
|
+
* A thumbnail that opens its own full-size view — the one image
|
|
39
|
+
* interaction three apps hand-roll and none get the focus trap or
|
|
40
|
+
* the scroll lock right. It is a **skin over `Modal`**, not a second
|
|
41
|
+
* dialog: `Modal` owns `showModal()`, the top layer, Escape, the
|
|
42
|
+
* `::backdrop` scrim and `lockScrollBehind`, and everything that
|
|
43
|
+
* makes those correct in every browser the fleet runs. What this
|
|
44
|
+
* adds is the image-specific part — a `cursor-zoom-in` trigger and
|
|
45
|
+
* an `object-contain` image clamped to the viewport so a 2:3 poster
|
|
46
|
+
* and a 16:9 still both land whole.
|
|
47
|
+
*
|
|
48
|
+
* ### Controlled and not, one component
|
|
49
|
+
*
|
|
50
|
+
* `useVisibility` runs unconditionally — hooks cannot be conditional
|
|
51
|
+
* — but is *consulted* only when `isOpen` is absent. A caller that
|
|
52
|
+
* passes `isOpen` owns the truth; the internal store is then an
|
|
53
|
+
* unread two-field object, which is cheaper than splitting this into
|
|
54
|
+
* two components that share a Modal body.
|
|
55
|
+
*/
|
|
56
|
+
export declare const Lightbox: ({ alt, caption, className, heading, isOpen, onOpenChange, src, thumbnail, }: LightboxProps) => ReactNode;
|
|
57
|
+
//# sourceMappingURL=Lightbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;;;OAMG;IACH,GAAG,EAAE,MAAM,CAAA;IACX,oEAAoE;IACpE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,GAAG,EAAE,MAAM,CAAA;IACX;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,QAAQ,GAAI,6EAStB,aAAa,KAAG,SAwElB,CAAA"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useVisibility } from "@charcuterie/logic";
|
|
3
|
+
import { Modal } from "../Modal/Modal.js";
|
|
4
|
+
import { toClassName } from "../toClassName.js";
|
|
5
|
+
/**
|
|
6
|
+
* A thumbnail that opens its own full-size view — the one image
|
|
7
|
+
* interaction three apps hand-roll and none get the focus trap or
|
|
8
|
+
* the scroll lock right. It is a **skin over `Modal`**, not a second
|
|
9
|
+
* dialog: `Modal` owns `showModal()`, the top layer, Escape, the
|
|
10
|
+
* `::backdrop` scrim and `lockScrollBehind`, and everything that
|
|
11
|
+
* makes those correct in every browser the fleet runs. What this
|
|
12
|
+
* adds is the image-specific part — a `cursor-zoom-in` trigger and
|
|
13
|
+
* an `object-contain` image clamped to the viewport so a 2:3 poster
|
|
14
|
+
* and a 16:9 still both land whole.
|
|
15
|
+
*
|
|
16
|
+
* ### Controlled and not, one component
|
|
17
|
+
*
|
|
18
|
+
* `useVisibility` runs unconditionally — hooks cannot be conditional
|
|
19
|
+
* — but is *consulted* only when `isOpen` is absent. A caller that
|
|
20
|
+
* passes `isOpen` owns the truth; the internal store is then an
|
|
21
|
+
* unread two-field object, which is cheaper than splitting this into
|
|
22
|
+
* two components that share a Modal body.
|
|
23
|
+
*/
|
|
24
|
+
export const Lightbox = ({ alt, caption, className, heading, isOpen, onOpenChange, src, thumbnail, }) => {
|
|
25
|
+
const isControlled = isOpen !== undefined;
|
|
26
|
+
const { hide, isVisible, show } = useVisibility();
|
|
27
|
+
const isShown = isControlled ? isOpen : isVisible;
|
|
28
|
+
const requestOpen = () => {
|
|
29
|
+
if (!isControlled) {
|
|
30
|
+
show();
|
|
31
|
+
}
|
|
32
|
+
onOpenChange?.(true);
|
|
33
|
+
};
|
|
34
|
+
const requestClose = () => {
|
|
35
|
+
if (!isControlled) {
|
|
36
|
+
hide();
|
|
37
|
+
}
|
|
38
|
+
onOpenChange?.(false);
|
|
39
|
+
};
|
|
40
|
+
return (_jsxs(_Fragment, { children: [thumbnail === undefined ? null : (_jsx("button", { "aria-label": `Enlarge ${heading ?? alt}`, className: toClassName(
|
|
41
|
+
// `cursor-zoom-in` is the affordance a bare `<img>`
|
|
42
|
+
// never had, and the focus ring is the fleet's standard
|
|
43
|
+
// — the same one `MediaTile`'s link wears.
|
|
44
|
+
"group block cursor-zoom-in rounded-md outline-offset-2 focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-focus-ring", className), onClick: requestOpen, type: "button", children: thumbnail })), _jsx(Modal, { heading: heading ?? alt, isVisible: isShown, onClose: requestClose, size: "xl", children: _jsxs("figure", { className: "flex flex-col items-center gap-3", children: [_jsx("img", { alt: alt,
|
|
45
|
+
// `object-contain`, not `cover`: the enlarged view must
|
|
46
|
+
// show the whole image, and the clamp is `dvh` for the
|
|
47
|
+
// same address-bar reason `Modal`'s is.
|
|
48
|
+
className: "max-h-[75dvh] w-auto max-w-full rounded-md object-contain", src: src }), caption ? (_jsx("figcaption", { className: "text-center text-content-muted text-sm", children: caption })) : null] }) })] }));
|
|
49
|
+
};
|
|
50
|
+
//# sourceMappingURL=Lightbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAGlD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAoB,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAsC/C;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,GAAG,EACH,OAAO,EACP,SAAS,EACT,OAAO,EACP,MAAM,EACN,YAAY,EACZ,GAAG,EACH,SAAS,GACK,EAAa,EAAE;IAC7B,MAAM,YAAY,GAAG,MAAM,KAAK,SAAS,CAAA;IAEzC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,aAAa,EAAE,CAAA;IAEjD,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAA;IAEjD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,IAAI,EAAE,CAAA;QACR,CAAC;QAED,YAAY,EAAE,CAAC,IAAI,CAAC,CAAA;IACtB,CAAC,CAAA;IAED,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,IAAI,EAAE,CAAA;QACR,CAAC;QAED,YAAY,EAAE,CAAC,KAAK,CAAC,CAAA;IACvB,CAAC,CAAA;IAED,OAAO,CACL,8BACG,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAChC,+BAMc,WAAW,OAAO,IAAI,GAAG,EAAE,EACvC,SAAS,EAAE,WAAW;gBACpB,oDAAoD;gBACpD,wDAAwD;gBACxD,2CAA2C;gBAC3C,uKAAuK,EACvK,SAAS,CACV,EACD,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,QAAQ,YAEZ,SAAS,GACH,CACV,EAED,KAAC,KAAK,IACJ,OAAO,EAAE,OAAO,IAAI,GAAG,EACvB,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,YAAY,EACrB,IAAI,EAAC,IAAI,YAET,kBAAQ,SAAS,EAAC,kCAAkC,aAClD,cACE,GAAG,EAAE,GAAG;4BACR,wDAAwD;4BACxD,uDAAuD;4BACvD,wCAAwC;4BACxC,SAAS,EAAC,2DAA2D,EACrE,GAAG,EAAE,GAAG,GACR,EAED,OAAO,CAAC,CAAC,CAAC,CACT,qBAAY,SAAS,EAAC,wCAAwC,YAC3D,OAAO,GACG,CACd,CAAC,CAAC,CAAC,IAAI,IACD,GACH,IACP,CACJ,CAAA;AACH,CAAC,CAAA"}
|
package/dist/Select/Select.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ export type SelectOption = {
|
|
|
7
7
|
};
|
|
8
8
|
export type SelectOptionGroup = {
|
|
9
9
|
label: string;
|
|
10
|
-
options: SelectOption[];
|
|
10
|
+
options: readonly SelectOption[];
|
|
11
11
|
};
|
|
12
12
|
export type SelectItem = SelectOption | SelectOptionGroup;
|
|
13
13
|
/**
|
|
@@ -35,7 +35,15 @@ export type SelectProps = Omit<ComponentPropsWithRef<"select">, "disabled" | "on
|
|
|
35
35
|
*/
|
|
36
36
|
label?: string;
|
|
37
37
|
onChange?: (value: string) => void;
|
|
38
|
-
|
|
38
|
+
/**
|
|
39
|
+
* `readonly`, because a caller's list is usually a constant and
|
|
40
|
+
* TypeScript will not hand a `readonly` array to a mutable
|
|
41
|
+
* parameter — image-viewer hit `TS4104` on an `as const` options
|
|
42
|
+
* table and had to spread a copy at every call. This component
|
|
43
|
+
* only ever `.map`s over it, so demanding a mutable array was
|
|
44
|
+
* asking for a permission it never uses.
|
|
45
|
+
*/
|
|
46
|
+
options: readonly SelectItem[];
|
|
39
47
|
/**
|
|
40
48
|
* A disabled first entry, not a real option. Reads as a prompt to
|
|
41
49
|
* a sighted user and cannot be submitted, which is what a
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAEV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAYd,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,YAAY,EAAE,CAAA;
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAEV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAYd,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;CACjC,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,iBAAiB,CAAA;AAEzD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAC3C,GAAG;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC;;;;;;;OAOG;IACH,OAAO,EAAE,SAAS,UAAU,EAAE,CAAA;IAC9B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,MAAM,GAAI,+FAUpB,WAAW,KAAG,SA8EhB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":";AAOA,OAAO,EACL,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,cAAc,EACd,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":";AAOA,OAAO,EACL,kBAAkB,EAClB,sBAAsB,GACvB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,cAAc,EACd,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAgE/C,MAAM,UAAU,GAAG,CACjB,IAAgB,EACW,EAAE,CAAC,SAAS,IAAI,IAAI,CAAA;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAW,EACX,IAAI,GAAG,IAAI,EACX,KAAK,EACL,GAAG,WAAW,EACF,EAAa,EAAE,CAAC,CAC5B,eAAK,SAAS,EAAC,0CAA0C,aACvD,qBACM,WAAW,gBACH,KAAK,EACjB,SAAS,EAAE,WAAW,CACpB,iLAAiL;YACjL,0DAA0D;YAC1D,2DAA2D;YAC3D,2DAA2D;YAC3D,wCAAwC;YACxC,MAAM,EACN,kBAAkB,CAAC,IAAI,CAAC,EACxB,sBAAsB,EACtB,4BAA4B,EAC5B,gBAAgB,EAChB,cAAc,EACd,SAAS,CACV,EACD,YAAY,EACV,KAAK;gBACL,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,EAE9C,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,CACR,WAA2C,EAC3C,EAAE;gBACF,QAAQ,EAAE,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;YAC7C,CAAC,aAEA,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAClC,iBAAQ,QAAQ,QAAC,KAAK,EAAC,EAAE,YACtB,WAAW,GACL,CACV,EAEA,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACpB,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACjB,mBAA2B,KAAK,EAAE,IAAI,CAAC,KAAK,YACzC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC5B,iBACE,QAAQ,EAAE,MAAM,CAAC,UAAU,EAE3B,KAAK,EAAE,MAAM,CAAC,KAAK,YAElB,MAAM,CAAC,KAAK,IAHR,MAAM,CAAC,KAAK,CAIV,CACV,CAAC,IATW,IAAI,CAAC,KAAK,CAUd,CACZ,CAAC,CAAC,CAAC,CACF,iBACE,QAAQ,EAAE,IAAI,CAAC,UAAU,EAEzB,KAAK,EAAE,IAAI,CAAC,KAAK,YAEhB,IAAI,CAAC,KAAK,IAHN,IAAI,CAAC,KAAK,CAIR,CACV,CACF,IACM,EAET,6BAGc,MAAM,EAClB,SAAS,EAAC,kEAAkE,EAC5E,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,KAAK,EAChB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,IAAI,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,YAElC,eAAM,CAAC,EAAC,cAAc,GAAG,GACrB,IACF,CACP,CAAA"}
|
package/dist/index.d.ts
CHANGED
|
@@ -40,6 +40,10 @@ 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";
|
|
43
47
|
export type { BadgeSize } from "./controlStyles.ts";
|
|
44
48
|
export { BADGE_SIZE_CLASS, CONTROL_SIZE_CLASS, DOT_SIZE_CLASS, ICON_CONTROL_SIZE_CLASS, MIN_TOUCH_TARGET_CLASS, SPINNER_SIZE_CLASS, } from "./controlStyles.ts";
|
|
45
49
|
export type { EmptyStateProps, EmptyStateSize, } from "./EmptyState/EmptyState.tsx";
|
|
@@ -54,6 +58,8 @@ export type { IconButtonProps } from "./IconButton/IconButton.tsx";
|
|
|
54
58
|
export { IconButton } from "./IconButton/IconButton.tsx";
|
|
55
59
|
export type { IntentAppearance } from "./intentStyles.ts";
|
|
56
60
|
export { DISABLED_CLASS, FOCUS_RING_CLASS, INTENT_APPEARANCE_CLASS, INTENT_CONTENT_CLASS, INTENT_HOVER_CLASS, INTENT_SOLID_FILL_CLASS, } from "./intentStyles.ts";
|
|
61
|
+
export type { LightboxProps } from "./Lightbox/Lightbox.tsx";
|
|
62
|
+
export { Lightbox } from "./Lightbox/Lightbox.tsx";
|
|
57
63
|
export type { LiveStatusIndicatorProps, LiveStatusIndicatorSize, } from "./LiveStatusIndicator/LiveStatusIndicator.tsx";
|
|
58
64
|
export { LiveStatusIndicator } from "./LiveStatusIndicator/LiveStatusIndicator.tsx";
|
|
59
65
|
export type { LogLine, LogViewerProps, } from "./LogViewer/LogViewer.tsx";
|
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,8 @@ 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";
|
|
38
40
|
export { BADGE_SIZE_CLASS, CONTROL_SIZE_CLASS, DOT_SIZE_CLASS, ICON_CONTROL_SIZE_CLASS, MIN_TOUCH_TARGET_CLASS, SPINNER_SIZE_CLASS, } from "./controlStyles.js";
|
|
39
41
|
export { EmptyState } from "./EmptyState/EmptyState.js";
|
|
40
42
|
export { Field } from "./Field/Field.js";
|
|
@@ -42,6 +44,7 @@ export { FieldGroup } from "./Field/FieldGroup.js";
|
|
|
42
44
|
export { FileDropZone } from "./FileDropZone/FileDropZone.js";
|
|
43
45
|
export { IconButton } from "./IconButton/IconButton.js";
|
|
44
46
|
export { DISABLED_CLASS, FOCUS_RING_CLASS, INTENT_APPEARANCE_CLASS, INTENT_CONTENT_CLASS, INTENT_HOVER_CLASS, INTENT_SOLID_FILL_CLASS, } from "./intentStyles.js";
|
|
47
|
+
export { Lightbox } from "./Lightbox/Lightbox.js";
|
|
45
48
|
export { LiveStatusIndicator } from "./LiveStatusIndicator/LiveStatusIndicator.js";
|
|
46
49
|
export { LogViewer } from "./LogViewer/LogViewer.js";
|
|
47
50
|
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":"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,EAAE,mBAAmB,EAAE,MAAM,8CAA+C,CAAA;AAKnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,0CAA2C,CAAA;AAE7E,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;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAyB,CAAA;AAKlD,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA+C,CAAA;AAKnF,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAKrD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAK7D,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAKtC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAK/C,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA+B,CAAA;AAE3D,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,GAChB,MAAM,gCAAgC,CAAA;AAKvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAyC,CAAA;AAO1E,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAK5C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAyB,CAAA;AAKlD,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA+C,CAAA;AAEnF,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAE/C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EACL,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,mBAAmB,CAAA;AAO1B,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAKzC,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAyB,CAAA;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAqC,CAAA"}
|
package/dist/slotProps.d.ts
CHANGED
|
@@ -105,6 +105,17 @@ export type SlotProps = Pick<InputHTMLAttributes<HTMLElement>, "aria-describedby
|
|
|
105
105
|
* `isRequired || undefined`, so a plain spread would let an inner
|
|
106
106
|
* `Field` with no error erase an outer one's `aria-invalid` — the
|
|
107
107
|
* same silent drop, one level down.
|
|
108
|
+
*
|
|
109
|
+
* ### The wiring is not a value, and does not last-write-win
|
|
110
|
+
*
|
|
111
|
+
* `ref` and the `on*` handlers are merged rather than replaced, by
|
|
112
|
+
* `mergeSlotWiring`. This was the 1.0.0 hole: `mergeSlotProps`
|
|
113
|
+
* settled the five *attributes* and left the two props that are not
|
|
114
|
+
* attributes on last-write-wins, so a `Menu` and a `Tooltip` on one
|
|
115
|
+
* trigger each handed it a floating-ui `refs.setReference` and the
|
|
116
|
+
* inner one won. The outer panel had no anchor and rendered in the
|
|
117
|
+
* corner of the viewport — no error, no failing test, and it looks
|
|
118
|
+
* like a CSS bug.
|
|
108
119
|
*/
|
|
109
120
|
export declare const mergeSlotProps: <OwnProps extends Record<string, unknown>>(receivedProps: SlotProps, ownProps: OwnProps) => OwnProps & SlotProps;
|
|
110
121
|
//# sourceMappingURL=slotProps.d.ts.map
|
package/dist/slotProps.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slotProps.d.ts","sourceRoot":"","sources":["../src/slotProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"slotProps.d.ts","sourceRoot":"","sources":["../src/slotProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAIhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFG;AACH,MAAM,MAAM,SAAS,GAAG,IAAI,CAC1B,mBAAmB,CAAC,WAAW,CAAC,EAC9B,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,IAAI,GACJ,UAAU,CACb,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,cAAc,GACzB,QAAQ,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAExC,eAAe,SAAS,EACxB,UAAU,QAAQ,KACjB,QAAQ,GAAG,SA2Bb,CAAA"}
|
package/dist/slotProps.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { mergeSlotWiring } from "./slotWiring.js";
|
|
1
2
|
/**
|
|
2
3
|
* Merge what arrived from above with what this component writes
|
|
3
4
|
* itself.
|
|
@@ -21,6 +22,17 @@
|
|
|
21
22
|
* `isRequired || undefined`, so a plain spread would let an inner
|
|
22
23
|
* `Field` with no error erase an outer one's `aria-invalid` — the
|
|
23
24
|
* same silent drop, one level down.
|
|
25
|
+
*
|
|
26
|
+
* ### The wiring is not a value, and does not last-write-win
|
|
27
|
+
*
|
|
28
|
+
* `ref` and the `on*` handlers are merged rather than replaced, by
|
|
29
|
+
* `mergeSlotWiring`. This was the 1.0.0 hole: `mergeSlotProps`
|
|
30
|
+
* settled the five *attributes* and left the two props that are not
|
|
31
|
+
* attributes on last-write-wins, so a `Menu` and a `Tooltip` on one
|
|
32
|
+
* trigger each handed it a floating-ui `refs.setReference` and the
|
|
33
|
+
* inner one won. The outer panel had no anchor and rendered in the
|
|
34
|
+
* corner of the viewport — no error, no failing test, and it looks
|
|
35
|
+
* like a CSS bug.
|
|
24
36
|
*/
|
|
25
37
|
export const mergeSlotProps = (receivedProps, ownProps) => {
|
|
26
38
|
const definedOwnProps = Object.fromEntries(Object.entries(ownProps).filter(([, value]) => value !== undefined));
|
|
@@ -34,6 +46,10 @@ export const mergeSlotProps = (receivedProps, ownProps) => {
|
|
|
34
46
|
...receivedProps,
|
|
35
47
|
...definedOwnProps,
|
|
36
48
|
"aria-describedby": describedBy === "" ? undefined : describedBy,
|
|
49
|
+
// Last, because it is the only merge that has to beat
|
|
50
|
+
// `definedOwnProps` — it is composing what that spread would
|
|
51
|
+
// otherwise have thrown away.
|
|
52
|
+
...mergeSlotWiring(receivedProps, definedOwnProps),
|
|
37
53
|
};
|
|
38
54
|
};
|
|
39
55
|
//# sourceMappingURL=slotProps.js.map
|
package/dist/slotProps.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slotProps.js","sourceRoot":"","sources":["../src/slotProps.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"slotProps.js","sourceRoot":"","sources":["../src/slotProps.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AA6FjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAG5B,aAAwB,EACxB,QAAkB,EACI,EAAE;IACxB,MAAM,eAAe,GAAG,MAAM,CAAC,WAAW,CACxC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAC7B,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,KAAK,SAAS,CACnC,CACU,CAAA;IAEb,MAAM,WAAW,GAAG;QAClB,aAAa,CAAC,kBAAkB,CAAC;QACjC,QAAQ,CAAC,kBAAkB,CAAC;KAC7B;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAA;IAEZ,OAAO;QACL,GAAG,aAAa;QAChB,GAAG,eAAe;QAClB,kBAAkB,EAChB,WAAW,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW;QAC9C,sDAAsD;QACtD,6DAA6D;QAC7D,8BAA8B;QAC9B,GAAG,eAAe,CAChB,aAAwC,EACxC,eAAe,CAChB;KACF,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The two props a slot may not overwrite, and how it merges them.
|
|
3
|
+
*
|
|
4
|
+
* `mergeSlotProps` next door settles the five *attributes* two
|
|
5
|
+
* nested slots both write, and last-write-wins is right for four of
|
|
6
|
+
* them. It is not right for the wiring, because neither of these is
|
|
7
|
+
* a value:
|
|
8
|
+
*
|
|
9
|
+
* - **`ref`** is a subscription. `Menu` and `Tooltip` on one trigger
|
|
10
|
+
* both hand it a floating-ui `refs.setReference` — the anchor each
|
|
11
|
+
* of them positions its panel against — and the inner one used to
|
|
12
|
+
* replace the outer one's. Nothing threw. The outer panel simply
|
|
13
|
+
* had no reference element, so floating-ui left it at
|
|
14
|
+
* `left: 0; top: 0` in the corner of the viewport, which reads as
|
|
15
|
+
* a CSS bug and is not one.
|
|
16
|
+
* - **`on*`** is a listener, and listeners are plural.
|
|
17
|
+
*
|
|
18
|
+
* ### Why this is not imported from `@charcuterie/logic`
|
|
19
|
+
*
|
|
20
|
+
* `useClonedChild`'s `mergeClonedProps` applies the same rule one
|
|
21
|
+
* level down — between a slot and the element a caller wrote — and
|
|
22
|
+
* the two are near-identical. Sharing them means a new public export
|
|
23
|
+
* on `@charcuterie/logic`, which is a `minor`; this is a patch, and
|
|
24
|
+
* the duplication is thirty lines against a wrong version number.
|
|
25
|
+
* Queued in `docs/2026-08-02-reported-by-consumers-queued-for-1-1.md`.
|
|
26
|
+
*/
|
|
27
|
+
/**
|
|
28
|
+
* The keys of `ownProps` that must not simply replace the ones
|
|
29
|
+
* `receivedProps` arrived with. Spread **last**, over both.
|
|
30
|
+
*/
|
|
31
|
+
export declare const mergeSlotWiring: (receivedProps: Record<string, unknown>, ownProps: Record<string, unknown>) => Record<string, unknown>;
|
|
32
|
+
//# sourceMappingURL=slotWiring.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"slotWiring.d.ts","sourceRoot":"","sources":["../src/slotWiring.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAuGH;;;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"}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The two props a slot may not overwrite, and how it merges them.
|
|
3
|
+
*
|
|
4
|
+
* `mergeSlotProps` next door settles the five *attributes* two
|
|
5
|
+
* nested slots both write, and last-write-wins is right for four of
|
|
6
|
+
* them. It is not right for the wiring, because neither of these is
|
|
7
|
+
* a value:
|
|
8
|
+
*
|
|
9
|
+
* - **`ref`** is a subscription. `Menu` and `Tooltip` on one trigger
|
|
10
|
+
* both hand it a floating-ui `refs.setReference` — the anchor each
|
|
11
|
+
* of them positions its panel against — and the inner one used to
|
|
12
|
+
* replace the outer one's. Nothing threw. The outer panel simply
|
|
13
|
+
* had no reference element, so floating-ui left it at
|
|
14
|
+
* `left: 0; top: 0` in the corner of the viewport, which reads as
|
|
15
|
+
* a CSS bug and is not one.
|
|
16
|
+
* - **`on*`** is a listener, and listeners are plural.
|
|
17
|
+
*
|
|
18
|
+
* ### Why this is not imported from `@charcuterie/logic`
|
|
19
|
+
*
|
|
20
|
+
* `useClonedChild`'s `mergeClonedProps` applies the same rule one
|
|
21
|
+
* level down — between a slot and the element a caller wrote — and
|
|
22
|
+
* the two are near-identical. Sharing them means a new public export
|
|
23
|
+
* on `@charcuterie/logic`, which is a `minor`; this is a patch, and
|
|
24
|
+
* the duplication is thirty lines against a wrong version number.
|
|
25
|
+
* Queued in `docs/2026-08-02-reported-by-consumers-queued-for-1-1.md`.
|
|
26
|
+
*/
|
|
27
|
+
const isEventHandlerName = (name) => /^on[A-Z]/.test(name);
|
|
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
|
+
};
|
|
90
|
+
/**
|
|
91
|
+
* The keys of `ownProps` that must not simply replace the ones
|
|
92
|
+
* `receivedProps` arrived with. Spread **last**, over both.
|
|
93
|
+
*/
|
|
94
|
+
export const mergeSlotWiring = (receivedProps, ownProps) => Object.fromEntries(Object.entries(ownProps).flatMap(([name, ownValue]) => {
|
|
95
|
+
const receivedValue = receivedProps[name];
|
|
96
|
+
if (name === "ref" &&
|
|
97
|
+
isMergeableRef(receivedValue) &&
|
|
98
|
+
isMergeableRef(ownValue)) {
|
|
99
|
+
return [
|
|
100
|
+
[name, mergeRefs(receivedValue, ownValue)],
|
|
101
|
+
];
|
|
102
|
+
}
|
|
103
|
+
if (isEventHandlerName(name) &&
|
|
104
|
+
typeof receivedValue === "function" &&
|
|
105
|
+
typeof ownValue === "function") {
|
|
106
|
+
return [
|
|
107
|
+
[
|
|
108
|
+
name,
|
|
109
|
+
chainHandlers(receivedValue, ownValue),
|
|
110
|
+
],
|
|
111
|
+
];
|
|
112
|
+
}
|
|
113
|
+
return [];
|
|
114
|
+
}));
|
|
115
|
+
//# sourceMappingURL=slotWiring.js.map
|