@panneau/ui 5.0.0-alpha.0 → 5.0.0-alpha.2

package/dist/icon/namedIcons.d.ts

@@ -0,0 +1,16 @@
+import type { IconComponent } from './Icon';
+/**
+ * Loads a Lucide icon by its name (`send`, `calendar-days`: the names of lucide.dev/icons), and
+ * resolves with its component, or with `null` for a name Lucide doesn't have. Each icon is its own
+ * module, and so is the list of names: neither is in the bundle until a named icon is used.
+ */
+export declare function loadNamedIcon(name: string): Promise<IconComponent | null>;
+/**
+ * An icon component for a Lucide icon name, as definitions name them (`"icon": "send"`). It goes
+ * wherever an icon component goes (`<Button icon={getNamedIcon('send')}>`), and is the same
+ * component for the same name. It loads the icon the first time it renders (`loadNamedIcon()`),
+ * and renders an empty space of the same size until then. A name Lucide doesn't have renders
+ * nothing.
+ */
+export declare function getNamedIcon(name: string): IconComponent;
+//# sourceMappingURL=namedIcons.d.ts.map

package/dist/icon/namedIcons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"namedIcons.d.ts","sourceRoot":"","sources":["../../src/icon/namedIcons.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAwB5C;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,CAoCzE;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,CAwCxD"}

package/dist/icon/namedIcons.js

@@ -0,0 +1,90 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useSyncExternalStore } from "react";
+//#region src/icon/namedIcons.tsx
+var entries = /* @__PURE__ */ new Map();
+var components = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Set();
+var imports = null;
+function subscribe(listener) {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+}
+function setEntry(name, entry) {
+	entries.set(name, entry);
+	listeners.forEach((listener) => listener());
+}
+/**
+* Loads a Lucide icon by its name (`send`, `calendar-days`: the names of lucide.dev/icons), and
+* resolves with its component, or with `null` for a name Lucide doesn't have. Each icon is its own
+* module, and so is the list of names: neither is in the bundle until a named icon is used.
+*/
+function loadNamedIcon(name) {
+	const entry = entries.get(name);
+	if (entry?.status === "loaded") return Promise.resolve(entry.icon);
+	if (entry?.status === "missing") return Promise.resolve(null);
+	if (entry === void 0) setEntry(name, { status: "loading" });
+	imports ??= import("lucide-react/dynamicIconImports.mjs").then((module) => module.default);
+	return imports.then((all) => {
+		const load = Object.hasOwn(all, name) ? all[name] : void 0;
+		return load !== void 0 ? load().then((module) => module.default) : null;
+	}).then((icon) => {
+		if (icon === null) {
+			console.warn(`[panneau] Lucide has no icon named "${name}".`);
+			setEntry(name, { status: "missing" });
+		} else setEntry(name, {
+			status: "loaded",
+			icon
+		});
+		return icon;
+	}, (error) => {
+		entries.delete(name);
+		imports = null;
+		throw error;
+	});
+}
+/**
+* An icon component for a Lucide icon name, as definitions name them (`"icon": "send"`). It goes
+* wherever an icon component goes (`<Button icon={getNamedIcon('send')}>`), and is the same
+* component for the same name. It loads the icon the first time it renders (`loadNamedIcon()`),
+* and renders an empty space of the same size until then. A name Lucide doesn't have renders
+* nothing.
+*/
+function getNamedIcon(name) {
+	const existing = components.get(name);
+	if (existing !== void 0) return existing;
+	const NamedIcon = ({ size = 24, className, ...props }) => {
+		const entry = useSyncExternalStore(subscribe, () => entries.get(name), () => entries.get(name));
+		useEffect(() => {
+			if (entries.get(name) === void 0) loadNamedIcon(name).catch(() => void 0);
+		}, []);
+		if (entry?.status === "loaded") {
+			const Loaded = entry.icon;
+			return /* @__PURE__ */ jsx(Loaded, {
+				size,
+				className,
+				...props
+			});
+		}
+		if (entry?.status === "missing") return null;
+		const { "aria-hidden": hidden, "aria-label": label, role } = props;
+		return /* @__PURE__ */ jsx("svg", {
+			width: size,
+			height: size,
+			viewBox: "0 0 24 24",
+			className,
+			"aria-hidden": hidden,
+			"aria-label": label,
+			role,
+			"data-loading": ""
+		});
+	};
+	NamedIcon.displayName = `NamedIcon(${name})`;
+	components.set(name, NamedIcon);
+	return NamedIcon;
+}
+//#endregion
+export { getNamedIcon, loadNamedIcon };
+
+//# sourceMappingURL=namedIcons.js.map

package/dist/icon/namedIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"namedIcons.js","names":[],"sources":["../../src/icon/namedIcons.tsx"],"sourcesContent":["import { useEffect, useSyncExternalStore } from 'react';\n\nimport type { IconComponent } from './Icon';\n\ntype IconImports = Readonly<Record<string, () => Promise<{ default: IconComponent }>>>;\n\ntype Entry =\n    { status: 'loading' } | { status: 'loaded'; icon: IconComponent } | { status: 'missing' };\n\nconst entries = new Map<string, Entry>();\nconst components = new Map<string, IconComponent>();\nconst listeners = new Set<() => void>();\nlet imports: Promise<IconImports> | null = null;\n\nfunction subscribe(listener: () => void): () => void {\n    listeners.add(listener);\n    return () => {\n        listeners.delete(listener);\n    };\n}\n\nfunction setEntry(name: string, entry: Entry) {\n    entries.set(name, entry);\n    listeners.forEach((listener) => listener());\n}\n\n/**\n * Loads a Lucide icon by its name (`send`, `calendar-days`: the names of lucide.dev/icons), and\n * resolves with its component, or with `null` for a name Lucide doesn't have. Each icon is its own\n * module, and so is the list of names: neither is in the bundle until a named icon is used.\n */\nexport function loadNamedIcon(name: string): Promise<IconComponent | null> {\n    const entry = entries.get(name);\n    if (entry?.status === 'loaded') {\n        return Promise.resolve(entry.icon);\n    }\n    if (entry?.status === 'missing') {\n        return Promise.resolve(null);\n    }\n    if (entry === undefined) {\n        setEntry(name, { status: 'loading' });\n    }\n    imports ??= import('lucide-react/dynamicIconImports.mjs').then(\n        (module) => module.default as unknown as IconImports,\n    );\n    return imports\n        .then((all) => {\n            const load = Object.hasOwn(all, name) ? all[name] : undefined;\n            return load !== undefined ? load().then((module) => module.default) : null;\n        })\n        .then(\n            (icon) => {\n                if (icon === null) {\n                    console.warn(`[panneau] Lucide has no icon named \"${name}\".`);\n                    setEntry(name, { status: 'missing' });\n                } else {\n                    setEntry(name, { status: 'loaded', icon });\n                }\n                return icon;\n            },\n            (error: unknown) => {\n                // A chunk that failed to load (offline): the icon is loaded again when it mounts.\n                entries.delete(name);\n                imports = null;\n                throw error;\n            },\n        );\n}\n\n/**\n * An icon component for a Lucide icon name, as definitions name them (`\"icon\": \"send\"`). It goes\n * wherever an icon component goes (`<Button icon={getNamedIcon('send')}>`), and is the same\n * component for the same name. It loads the icon the first time it renders (`loadNamedIcon()`),\n * and renders an empty space of the same size until then. A name Lucide doesn't have renders\n * nothing.\n */\nexport function getNamedIcon(name: string): IconComponent {\n    const existing = components.get(name);\n    if (existing !== undefined) {\n        return existing;\n    }\n    const NamedIcon: IconComponent = ({ size = 24, className, ...props }) => {\n        const entry = useSyncExternalStore(\n            subscribe,\n            () => entries.get(name),\n            () => entries.get(name),\n        );\n        useEffect(() => {\n            if (entries.get(name) === undefined) {\n                loadNamedIcon(name).catch(() => undefined);\n            }\n        }, []);\n        if (entry?.status === 'loaded') {\n            const Loaded = entry.icon;\n            return <Loaded size={size} className={className} {...props} />;\n        }\n        if (entry?.status === 'missing') {\n            return null;\n        }\n        const { 'aria-hidden': hidden, 'aria-label': label, role } = props;\n        return (\n            <svg\n                width={size}\n                height={size}\n                viewBox=\"0 0 24 24\"\n                className={className}\n                aria-hidden={hidden}\n                aria-label={label}\n                role={role}\n                data-loading=\"\"\n            />\n        );\n    };\n    NamedIcon.displayName = `NamedIcon(${name})`;\n    components.set(name, NamedIcon);\n    return NamedIcon;\n}\n"],"mappings":";;;AASA,IAAM,0BAAU,IAAI,IAAmB;AACvC,IAAM,6BAAa,IAAI,IAA2B;AAClD,IAAM,4BAAY,IAAI,IAAgB;AACtC,IAAI,UAAuC;AAE3C,SAAS,UAAU,UAAkC;CACjD,UAAU,IAAI,QAAQ;CACtB,aAAa;EACT,UAAU,OAAO,QAAQ;CAC7B;AACJ;AAEA,SAAS,SAAS,MAAc,OAAc;CAC1C,QAAQ,IAAI,MAAM,KAAK;CACvB,UAAU,SAAS,aAAa,SAAS,CAAC;AAC9C;;;;;;AAOA,SAAgB,cAAc,MAA6C;CACvE,MAAM,QAAQ,QAAQ,IAAI,IAAI;CAC9B,IAAI,OAAO,WAAW,UAClB,OAAO,QAAQ,QAAQ,MAAM,IAAI;CAErC,IAAI,OAAO,WAAW,WAClB,OAAO,QAAQ,QAAQ,IAAI;CAE/B,IAAI,UAAU,KAAA,GACV,SAAS,MAAM,EAAE,QAAQ,UAAU,CAAC;CAExC,YAAY,OAAO,sCAAsC,CAAC,MACrD,WAAW,OAAO,OACvB;CACA,OAAO,QACF,MAAM,QAAQ;EACX,MAAM,OAAO,OAAO,OAAO,KAAK,IAAI,IAAI,IAAI,QAAQ,KAAA;EACpD,OAAO,SAAS,KAAA,IAAY,KAAK,CAAC,CAAC,MAAM,WAAW,OAAO,OAAO,IAAI;CAC1E,CAAC,CAAC,CACD,MACI,SAAS;EACN,IAAI,SAAS,MAAM;GACf,QAAQ,KAAK,uCAAuC,KAAI,GAAI;GAC5D,SAAS,MAAM,EAAE,QAAQ,UAAU,CAAC;EACxC,OACI,SAAS,MAAM;GAAE,QAAQ;GAAU;EAAK,CAAC;EAE7C,OAAO;CACX,IACC,UAAmB;EAEhB,QAAQ,OAAO,IAAI;EACnB,UAAU;EACV,MAAM;CACV,CACJ;AACR;;;;;;;;AASA,SAAgB,aAAa,MAA6B;CACtD,MAAM,WAAW,WAAW,IAAI,IAAI;CACpC,IAAI,aAAa,KAAA,GACb,OAAO;CAEX,MAAM,aAA4B,EAAE,OAAO,IAAI,WAAW,GAAG,YAAY;EACrE,MAAM,QAAQ,qBACV,iBACM,QAAQ,IAAI,IAAI,SAChB,QAAQ,IAAI,IAAI,CAC1B;EACA,gBAAgB;GACZ,IAAI,QAAQ,IAAI,IAAI,MAAM,KAAA,GACtB,cAAc,IAAI,CAAC,CAAC,YAAY,KAAA,CAAS;EAEjD,GAAG,CAAA,CAAE;EACL,IAAI,OAAO,WAAW,UAAU;GAC5B,MAAM,SAAS,MAAM;GACrB,OAAO,oBAAC,QAAD;IAAc;IAAiB;IAAW,GAAI;GAAM,CAAA;EAC/D;EACA,IAAI,OAAO,WAAW,WAClB,OAAO;EAEX,MAAM,EAAE,eAAe,QAAQ,cAAc,OAAO,SAAS;EAC7D,OACI,oBAAC,OAAD;GACI,OAAO;GACP,QAAQ;GACR,SAAQ;GACG;GACX,eAAa;GACb,cAAY;GACN;GACN,gBAAa;EAAE,CAAA;CAG3B;CACA,UAAU,cAAc,aAAa,KAAI;CACzC,WAAW,IAAI,MAAM,SAAS;CAC9B,OAAO;AACX"}

package/dist/icon-button/IconButton.css

@@ -1,9 +1,9 @@
 /* Doubled classes: more specific than the button's own padding, whatever the CSS order. */
-.panneau-iconButton-eXWLoz.panneau-iconButton-eXWLoz {
+.panneau-icon-button.panneau-icon-button {
     width: var(--panneau-control-height);
     padding: 0;
 }
 
-.panneau-iconButton-eXWLoz.panneau-sm-i6-bGf {
+.panneau-icon-button.panneau-icon-button-sm {
     width: var(--panneau-control-height-sm);
 }

package/dist/icon-button/IconButton.d.ts

@@ -11,5 +11,5 @@ export interface IconButtonProps extends Omit<ButtonProps, 'icon' | 'iconEnd' |
     style?: CSSProperties;
 }
 /** A square button with only an icon. Its label is announced and shown as a tooltip. */
-export declare function IconButton({ icon, label, variant, size, showTooltip, className, ...props }: IconButtonProps): import("react").JSX.Element;
+export declare function IconButton({ icon, label, appearance, size, showTooltip, className, ...props }: IconButtonProps): import("react").JSX.Element;
 //# sourceMappingURL=IconButton.d.ts.map

package/dist/icon-button/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/icon-button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAKlD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CACzC,WAAW,EACX,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,YAAY,CAC/D;IACG,IAAI,EAAE,aAAa,CAAC;IACpB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,wFAAwF;AACxF,wBAAgB,UAAU,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,OAAiB,EACjB,IAAW,EACX,WAAkB,EAClB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,eAAe,+BAejB"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/icon-button/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAKlD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CACzC,WAAW,EACX,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,YAAY,CAC/D;IACG,IAAI,EAAE,aAAa,CAAC;IACpB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,wFAAwF;AACxF,wBAAgB,UAAU,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,UAAoB,EACpB,IAAW,EACX,WAAkB,EAClB,SAAS,EACT,GAAG,KAAK,EACX,EAAE,eAAe,+BAoBjB"}

package/dist/icon-button/IconButton.js

@@ -5,14 +5,14 @@ import IconButton_module_default from "./IconButton.module.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/icon-button/IconButton.tsx
 /** A square button with only an icon. Its label is announced and shown as a tooltip. */
-function IconButton({ icon, label, variant = "ghost", size = "md", showTooltip = true, className, ...props }) {
+function IconButton({ icon, label, appearance = "ghost", size = "md", showTooltip = true, className, ...props }) {
 	const button = /* @__PURE__ */ jsx(Button, {
 		...props,
-		variant,
+		appearance,
 		size,
 		icon,
 		"aria-label": label,
-		className: cx(IconButton_module_default.iconButton, size === "sm" && IconButton_module_default.sm, className)
+		className: cx("panneau-icon-button", IconButton_module_default.iconButton, size === "sm" && IconButton_module_default.sm, className)
 	});
 	if (!showTooltip) return button;
 	return /* @__PURE__ */ jsx(Tooltip, {

package/dist/icon-button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","names":["styles"],"sources":["../../src/icon-button/IconButton.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nimport { Button, type ButtonProps } from '../button/Button';\nimport type { IconComponent } from '../icon/Icon';\nimport { Tooltip } from '../tooltip/Tooltip';\nimport { cx } from '../utils/cx';\nimport styles from './IconButton.module.css';\n\nexport interface IconButtonProps extends Omit<\n    ButtonProps,\n    'icon' | 'iconEnd' | 'children' | 'fullWidth' | 'aria-label'\n> {\n    icon: IconComponent;\n    /** Accessible label, also shown as a tooltip. */\n    label: string;\n    /** Shows the label in a tooltip on hover and focus. Defaults to true. */\n    showTooltip?: boolean;\n    className?: string;\n    style?: CSSProperties;\n}\n\n/** A square button with only an icon. Its label is announced and shown as a tooltip. */\nexport function IconButton({\n    icon,\n    label,\n    variant = 'ghost',\n    size = 'md',\n    showTooltip = true,\n    className,\n    ...props\n}: IconButtonProps) {\n    const button = (\n        <Button\n            {...props}\n            variant={variant}\n            size={size}\n            icon={icon}\n            aria-label={label}\n            className={cx(styles.iconButton, size === 'sm' && styles.sm, className)}\n        />\n    );\n    if (!showTooltip) {\n        return button;\n    }\n    return <Tooltip content={label}>{button}</Tooltip>;\n}\n"],"mappings":";;;;;;;AAsBA,SAAgB,WAAW,EACvB,MACA,OACA,UAAU,SACV,OAAO,MACP,cAAc,MACd,WACA,GAAG,SACa;CAChB,MAAM,SACF,oBAAC,QAAD;EACI,GAAI;EACK;EACH;EACA;EACN,cAAY;EACZ,WAAW,GAAGA,0BAAO,YAAY,SAAS,QAAQA,0BAAO,IAAI,SAAS;CAAE,CAAA;CAGhF,IAAI,CAAC,aACD,OAAO;CAEX,OAAO,oBAAC,SAAD;EAAS,SAAS;EAAQ,UAAA;CAAgB,CAAA;AACrD"}
+{"version":3,"file":"IconButton.js","names":["styles"],"sources":["../../src/icon-button/IconButton.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nimport { Button, type ButtonProps } from '../button/Button';\nimport type { IconComponent } from '../icon/Icon';\nimport { Tooltip } from '../tooltip/Tooltip';\nimport { cx } from '../utils/cx';\nimport styles from './IconButton.module.css';\n\nexport interface IconButtonProps extends Omit<\n    ButtonProps,\n    'icon' | 'iconEnd' | 'children' | 'fullWidth' | 'aria-label'\n> {\n    icon: IconComponent;\n    /** Accessible label, also shown as a tooltip. */\n    label: string;\n    /** Shows the label in a tooltip on hover and focus. Defaults to true. */\n    showTooltip?: boolean;\n    className?: string;\n    style?: CSSProperties;\n}\n\n/** A square button with only an icon. Its label is announced and shown as a tooltip. */\nexport function IconButton({\n    icon,\n    label,\n    appearance = 'ghost',\n    size = 'md',\n    showTooltip = true,\n    className,\n    ...props\n}: IconButtonProps) {\n    const button = (\n        <Button\n            {...props}\n            appearance={appearance}\n            size={size}\n            icon={icon}\n            aria-label={label}\n            className={cx(\n                'panneau-icon-button',\n                styles.iconButton,\n                size === 'sm' && styles.sm,\n                className,\n            )}\n        />\n    );\n    if (!showTooltip) {\n        return button;\n    }\n    return <Tooltip content={label}>{button}</Tooltip>;\n}\n"],"mappings":";;;;;;;AAsBA,SAAgB,WAAW,EACvB,MACA,OACA,aAAa,SACb,OAAO,MACP,cAAc,MACd,WACA,GAAG,SACa;CAChB,MAAM,SACF,oBAAC,QAAD;EACI,GAAI;EACQ;EACN;EACA;EACN,cAAY;EACZ,WAAW,GACP,uBACAA,0BAAO,YACP,SAAS,QAAQA,0BAAO,IACxB,SACJ;CAAE,CAAA;CAGV,IAAI,CAAC,aACD,OAAO;CAEX,OAAO,oBAAC,SAAD;EAAS,SAAS;EAAQ,UAAA;CAAgB,CAAA;AACrD"}

package/dist/icon-button/IconButton.module.js

@@ -1,7 +1,7 @@
 import "./IconButton.css";
 //#region src/icon-button/IconButton.module.css
-var iconButton = "panneau-iconButton-eXWLoz";
-var sm = "panneau-sm-i6-bGf";
+var iconButton = "panneau-icon-button";
+var sm = "panneau-icon-button-sm";
 var IconButton_module_default = {
 	iconButton,
 	sm

package/dist/index.d.ts

@@ -1,7 +1,11 @@
-export { Alert, type AlertProps, type AlertTone } from './alert/Alert';
-export { Badge, type BadgeProps, type BadgeTone } from './badge/Badge';
-export { Button, type ButtonProps, type ButtonVariant } from './button/Button';
+export { Alert, type AlertAppearance, type AlertProps, type AlertTone, type AlertVariants, } from './alert/Alert';
+export { Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, type BadgeVariants, } from './badge/Badge';
+export { Button, type ButtonAppearance, type ButtonProps, type ButtonVariant, type ButtonVariants, } from './button/Button';
 export { Card, type CardProps } from './card/Card';
+export { Container, type ContainerProps } from './container/Container';
+export { Divider, type DividerProps } from './divider/Divider';
+export { Grid, GridItem, type GridItemProps, type GridProps } from './grid/Grid';
+export { Heading, type HeadingLevel, type HeadingProps, type HeadingSize } from './heading/Heading';
 export { Checkbox, type CheckboxProps } from './checkbox/Checkbox';
 export { type ChoiceChromeProps } from './checkbox/ChoiceChrome';
 export { ComboBox, type ComboBoxItem, type ComboBoxProps } from './combo-box/ComboBox';
@@ -11,6 +15,7 @@ export { Disclosure, type DisclosureProps } from './disclosure/Disclosure';
 export { type FieldChromeProps } from './field/FieldParts';
 export { Fieldset, type FieldsetProps } from './field/Fieldset';
 export { Icon, type IconComponent, type IconProps, type IconSize } from './icon/Icon';
+export { getNamedIcon, loadNamedIcon } from './icon/namedIcons';
 export { IconButton, type IconButtonProps } from './icon-button/IconButton';
 export { usePanneauIntl } from './intl/usePanneauIntl';
 export { Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator, MenuTrigger, } from './menu/Menu';
@@ -18,14 +23,30 @@ export { NumberInput, type NumberInputProps } from './number-input/NumberInput';
 export { Popover, type PopoverProps, PopoverTrigger } from './popover/Popover';
 export { RadioGroup, type RadioGroupProps } from './radio-group/RadioGroup';
 export { PanneauRoot, type PanneauRootProps, usePortalContainer } from './root/PanneauRoot';
+export { ThemeScope, type ThemeScopeProps } from './root/ThemeScope';
 export { type MultipleSelectProps, type OptionValue, Select, type SelectBaseProps, type SelectOption, type SelectProps, type SingleSelectProps, } from './select/Select';
+export { Inline, type InlineProps } from './inline/Inline';
+export { BREAKPOINTS, type Breakpoint, type Justification, type Responsive, type Space, } from './layout/responsive';
+export { Prose, type ProseProps } from './prose/Prose';
 export { Spinner, type SpinnerProps } from './spinner/Spinner';
+export { Stack, type StackProps } from './stack/Stack';
 export { Switch, type SwitchProps } from './switch/Switch';
 export { Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, } from './tabs/Tabs';
+export { Text, type TextFamily, type TextProps, type TextSize } from './text/Text';
 export { TextArea, type TextAreaProps } from './text-area/TextArea';
 export { TextInput, type TextInputProps } from './text-input/TextInput';
-export { bootstrapTheme } from './theme/bootstrap';
-export { type ColorScheme, type Theme } from './theme/theme';
+export { bootstrapTheme, bootstrapTone } from './theme/bootstrap';
+export { CHART_CATEGORICAL_COUNT, CHART_SEQUENTIAL_COUNT, chartColors } from './theme/chartColors';
+export { type ThemeContrastCheck, type ThemeReport, checkTheme } from './theme/checkTheme';
+export { type ColorDifferenceCheck, type ColorVisionDeficiency, checkColorDifferences, } from './theme/colorVision';
+export { type Rgb } from './theme/color';
+export { type ComponentTokens, defineComponentTokens } from './theme/componentTokens';
+export { type ComponentTokenName, componentTokens } from './theme/components';
+export { type PaletteTokenName, type PanneauTokens, type ThemeDefinition, type ThemeTokens, type TokenName, defineTheme, findUnknownTokens, mergeThemes, } from './theme/defineTheme';
+export { SEMANTIC_TOKENS, type SemanticTokenName } from './theme/semanticTokens';
+export { type ThemeFont, type ThemeFontFace, type ThemeFontStylesheet } from './theme/fonts';
+export { type ColorScheme, type Density, type Theme } from './theme/theme';
+export { BUILT_IN_TONES, type PanneauTones, type Tone, type ToneInput, type ToneSurfaces, type ToneValues, deriveTone, toneClassName, } from './theme/tones';
 export { TimeInput, type TimeInputProps } from './time-input/TimeInput';
 export { type ToastContent, type ToastOptions, type ToastTone, type Toasts, useToast, } from './toast/Toast';
 export { Tooltip, type TooltipProps } from './tooltip/Tooltip';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,6 +1,7 @@
 import { Icon } from "./icon/Icon.js";
 import { usePanneauIntl } from "./intl/usePanneauIntl.js";
 import { Spinner } from "./spinner/Spinner.js";
+import { BUILT_IN_TONES, deriveTone, toneClassName } from "./theme/tones.js";
 import { Button } from "./button/Button.js";
 import { useToast } from "./toast/Toast.js";
 import { PanneauRoot, usePortalContainer } from "./root/PanneauRoot.js";
@@ -9,6 +10,11 @@ import { IconButton } from "./icon-button/IconButton.js";
 import { Alert } from "./alert/Alert.js";
 import { Badge } from "./badge/Badge.js";
 import { Card } from "./card/Card.js";
+import { Container } from "./container/Container.js";
+import { Divider } from "./divider/Divider.js";
+import { BREAKPOINTS } from "./layout/responsive.js";
+import { Grid, GridItem } from "./grid/Grid.js";
+import { Heading } from "./heading/Heading.js";
 import { Checkbox } from "./checkbox/Checkbox.js";
 import { Popover, PopoverTrigger } from "./popover/Popover.js";
 import { ComboBox } from "./combo-box/ComboBox.js";
@@ -16,14 +22,27 @@ import { DatePicker } from "./date-picker/DatePicker.js";
 import { Dialog, DialogTrigger } from "./dialog/Dialog.js";
 import { Disclosure } from "./disclosure/Disclosure.js";
 import { Fieldset } from "./field/Fieldset.js";
+import { getNamedIcon, loadNamedIcon } from "./icon/namedIcons.js";
 import { Menu, MenuItem, MenuSeparator, MenuTrigger } from "./menu/Menu.js";
 import { NumberInput } from "./number-input/NumberInput.js";
 import { RadioGroup } from "./radio-group/RadioGroup.js";
+import { ThemeScope } from "./root/ThemeScope.js";
 import { Select } from "./select/Select.js";
+import { Inline } from "./inline/Inline.js";
+import { Prose } from "./prose/Prose.js";
+import { Stack } from "./stack/Stack.js";
 import { Switch } from "./switch/Switch.js";
 import { Tab, TabList, TabPanel, Tabs } from "./tabs/Tabs.js";
+import { Text } from "./text/Text.js";
 import { TextArea } from "./text-area/TextArea.js";
 import { TextInput } from "./text-input/TextInput.js";
-import { bootstrapTheme } from "./theme/bootstrap.js";
+import { bootstrapTheme, bootstrapTone } from "./theme/bootstrap.js";
+import { CHART_CATEGORICAL_COUNT, CHART_SEQUENTIAL_COUNT, chartColors } from "./theme/chartColors.js";
+import { checkColorDifferences } from "./theme/colorVision.js";
+import { checkTheme } from "./theme/checkTheme.js";
+import { defineComponentTokens } from "./theme/componentTokens.js";
+import { componentTokens } from "./theme/components.js";
+import { SEMANTIC_TOKENS } from "./theme/semanticTokens.js";
+import { defineTheme, findUnknownTokens, mergeThemes } from "./theme/defineTheme.js";
 import { TimeInput } from "./time-input/TimeInput.js";
-export { Alert, Badge, Button, Card, Checkbox, ComboBox, DatePicker, Dialog, DialogTrigger, Disclosure, Fieldset, Icon, IconButton, Menu, MenuItem, MenuSeparator, MenuTrigger, NumberInput, PanneauRoot, Popover, PopoverTrigger, RadioGroup, Select, Spinner, Switch, Tab, TabList, TabPanel, Tabs, TextArea, TextInput, TimeInput, Tooltip, bootstrapTheme, usePanneauIntl, usePortalContainer, useToast };
+export { Alert, BREAKPOINTS, BUILT_IN_TONES, Badge, Button, CHART_CATEGORICAL_COUNT, CHART_SEQUENTIAL_COUNT, Card, Checkbox, ComboBox, Container, DatePicker, Dialog, DialogTrigger, Disclosure, Divider, Fieldset, Grid, GridItem, Heading, Icon, IconButton, Inline, Menu, MenuItem, MenuSeparator, MenuTrigger, NumberInput, PanneauRoot, Popover, PopoverTrigger, Prose, RadioGroup, SEMANTIC_TOKENS, Select, Spinner, Stack, Switch, Tab, TabList, TabPanel, Tabs, Text, TextArea, TextInput, ThemeScope, TimeInput, Tooltip, bootstrapTheme, bootstrapTone, chartColors, checkColorDifferences, checkTheme, componentTokens, defineComponentTokens, defineTheme, deriveTone, findUnknownTokens, getNamedIcon, loadNamedIcon, mergeThemes, toneClassName, usePanneauIntl, usePortalContainer, useToast };

package/dist/inline/Inline.css

@@ -0,0 +1,142 @@
+/* A horizontal row that wraps: each prop can change at the breakpoints of the nearest container. */
+
+.panneau-inline {
+    display: flex;
+    flex-wrap: wrap;
+    min-width: 0;
+}
+
+.panneau-inline-nowrap {
+    flex-wrap: nowrap;
+}
+/* Responsive values are set inline; children reset them so that they aren't inherited. */
+.panneau-inline > * {
+    --_panneau-inline-gap-base: initial;
+    --_panneau-inline-gap-sm: initial;
+    --_panneau-inline-gap-md: initial;
+    --_panneau-inline-gap-lg: initial;
+    --_panneau-inline-gap-xl: initial;
+    --_panneau-inline-align-base: initial;
+    --_panneau-inline-align-sm: initial;
+    --_panneau-inline-align-md: initial;
+    --_panneau-inline-align-lg: initial;
+    --_panneau-inline-align-xl: initial;
+    --_panneau-inline-justify-base: initial;
+    --_panneau-inline-justify-sm: initial;
+    --_panneau-inline-justify-md: initial;
+    --_panneau-inline-justify-lg: initial;
+    --_panneau-inline-justify-xl: initial;
+}
+
+.panneau-inline {
+    gap: var(--_panneau-inline-gap-base, var(--panneau-inline-gap, var(--panneau-space-2)));
+    align-items: var(--_panneau-inline-align-base, center);
+    justify-content: var(--_panneau-inline-justify-base, start);
+}
+
+@container (min-width: 40rem) {
+    .panneau-inline {
+        gap: var(
+            --_panneau-inline-gap-sm,
+            var(--_panneau-inline-gap-base, var(--panneau-inline-gap, var(--panneau-space-2)))
+        );
+        align-items: var(--_panneau-inline-align-sm, var(--_panneau-inline-align-base, center));
+        justify-content: var(
+            --_panneau-inline-justify-sm,
+            var(--_panneau-inline-justify-base, start)
+        );
+    }
+}
+
+@container (min-width: 48rem) {
+    .panneau-inline {
+        gap: var(
+            --_panneau-inline-gap-md,
+            var(
+                --_panneau-inline-gap-sm,
+                var(--_panneau-inline-gap-base, var(--panneau-inline-gap, var(--panneau-space-2)))
+            )
+        );
+        align-items: var(
+            --_panneau-inline-align-md,
+            var(--_panneau-inline-align-sm, var(--_panneau-inline-align-base, center))
+        );
+        justify-content: var(
+            --_panneau-inline-justify-md,
+            var(--_panneau-inline-justify-sm, var(--_panneau-inline-justify-base, start))
+        );
+    }
+}
+
+@container (min-width: 64rem) {
+    .panneau-inline {
+        gap: var(
+            --_panneau-inline-gap-lg,
+            var(
+                --_panneau-inline-gap-md,
+                var(
+                    --_panneau-inline-gap-sm,
+                    var(
+                        --_panneau-inline-gap-base,
+                        var(--panneau-inline-gap, var(--panneau-space-2))
+                    )
+                )
+            )
+        );
+        align-items: var(
+            --_panneau-inline-align-lg,
+            var(
+                --_panneau-inline-align-md,
+                var(--_panneau-inline-align-sm, var(--_panneau-inline-align-base, center))
+            )
+        );
+        justify-content: var(
+            --_panneau-inline-justify-lg,
+            var(
+                --_panneau-inline-justify-md,
+                var(--_panneau-inline-justify-sm, var(--_panneau-inline-justify-base, start))
+            )
+        );
+    }
+}
+
+@container (min-width: 80rem) {
+    .panneau-inline {
+        gap: var(
+            --_panneau-inline-gap-xl,
+            var(
+                --_panneau-inline-gap-lg,
+                var(
+                    --_panneau-inline-gap-md,
+                    var(
+                        --_panneau-inline-gap-sm,
+                        var(
+                            --_panneau-inline-gap-base,
+                            var(--panneau-inline-gap, var(--panneau-space-2))
+                        )
+                    )
+                )
+            )
+        );
+        align-items: var(
+            --_panneau-inline-align-xl,
+            var(
+                --_panneau-inline-align-lg,
+                var(
+                    --_panneau-inline-align-md,
+                    var(--_panneau-inline-align-sm, var(--_panneau-inline-align-base, center))
+                )
+            )
+        );
+        justify-content: var(
+            --_panneau-inline-justify-xl,
+            var(
+                --_panneau-inline-justify-lg,
+                var(
+                    --_panneau-inline-justify-md,
+                    var(--_panneau-inline-justify-sm, var(--_panneau-inline-justify-base, start))
+                )
+            )
+        );
+    }
+}

package/dist/inline/Inline.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'react';
+import { type Justification, type Responsive, type Space } from '../layout/responsive';
+export interface InlineProps extends HTMLAttributes<HTMLElement> {
+    /** Element to render. Defaults to `div`. */
+    as?: 'div' | 'section' | 'header' | 'footer' | 'nav' | 'ul' | 'ol' | 'span';
+    /** Space between items, from the space scale. Defaults to the `--panneau-inline-gap` token. */
+    gap?: Responsive<Space>;
+    /** Vertical alignment of the items. Defaults to `center`. */
+    align?: Responsive<'start' | 'center' | 'end' | 'stretch' | 'baseline'>;
+    /** Horizontal distribution of the items. Defaults to `start`. */
+    justify?: Responsive<Justification>;
+    /** Items wrap to the next line when they don't fit. Defaults to `true`. */
+    wrap?: boolean;
+}
+/** Items side by side, wrapping when they don't fit, like Bootstrap's `.hstack`. */
+export declare function Inline({ as: Element, gap, align, justify, wrap, className, style, ...props }: InlineProps): import("react").JSX.Element;
+//# sourceMappingURL=Inline.d.ts.map

package/dist/inline/Inline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Inline.d.ts","sourceRoot":"","sources":["../../src/inline/Inline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EACH,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,KAAK,EAKb,MAAM,sBAAsB,CAAC;AAI9B,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC5D,4CAA4C;IAC5C,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC5E,+FAA+F;IAC/F,GAAG,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IACxB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;IACxE,iEAAiE;IACjE,OAAO,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;IACpC,2EAA2E;IAC3E,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,oFAAoF;AACpF,wBAAgB,MAAM,CAAC,EACnB,EAAE,EAAE,OAAe,EACnB,GAAG,EACH,KAAK,EACL,OAAO,EACP,IAAW,EACX,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACX,EAAE,WAAW,+BAeb"}

package/dist/inline/Inline.js

@@ -0,0 +1,21 @@
+import { cx } from "../utils/cx.js";
+import { justification, responsiveVariables, space, withVariables } from "../layout/responsive.js";
+import Inline_module_default from "./Inline.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/inline/Inline.tsx
+/** Items side by side, wrapping when they don't fit, like Bootstrap's `.hstack`. */
+function Inline({ as: Element = "div", gap, align, justify, wrap = true, className, style, ...props }) {
+	return /* @__PURE__ */ jsx(Element, {
+		...props,
+		className: cx("panneau-inline", Inline_module_default.inline, !wrap && Inline_module_default.nowrap, className),
+		style: withVariables([
+			responsiveVariables("inline", "gap", gap, space),
+			responsiveVariables("inline", "align", align, String),
+			responsiveVariables("inline", "justify", justify, justification)
+		], style)
+	});
+}
+//#endregion
+export { Inline };
+
+//# sourceMappingURL=Inline.js.map

package/dist/inline/Inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Inline.js","names":["styles"],"sources":["../../src/inline/Inline.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport {\n    type Justification,\n    type Responsive,\n    type Space,\n    justification,\n    responsiveVariables,\n    space,\n    withVariables,\n} from '../layout/responsive';\nimport { cx } from '../utils/cx';\nimport styles from './Inline.module.css';\n\nexport interface InlineProps extends HTMLAttributes<HTMLElement> {\n    /** Element to render. Defaults to `div`. */\n    as?: 'div' | 'section' | 'header' | 'footer' | 'nav' | 'ul' | 'ol' | 'span';\n    /** Space between items, from the space scale. Defaults to the `--panneau-inline-gap` token. */\n    gap?: Responsive<Space>;\n    /** Vertical alignment of the items. Defaults to `center`. */\n    align?: Responsive<'start' | 'center' | 'end' | 'stretch' | 'baseline'>;\n    /** Horizontal distribution of the items. Defaults to `start`. */\n    justify?: Responsive<Justification>;\n    /** Items wrap to the next line when they don't fit. Defaults to `true`. */\n    wrap?: boolean;\n}\n\n/** Items side by side, wrapping when they don't fit, like Bootstrap's `.hstack`. */\nexport function Inline({\n    as: Element = 'div',\n    gap,\n    align,\n    justify,\n    wrap = true,\n    className,\n    style,\n    ...props\n}: InlineProps) {\n    return (\n        <Element\n            {...props}\n            className={cx('panneau-inline', styles.inline, !wrap && styles.nowrap, className)}\n            style={withVariables(\n                [\n                    responsiveVariables('inline', 'gap', gap, space),\n                    responsiveVariables('inline', 'align', align, String),\n                    responsiveVariables('inline', 'justify', justify, justification),\n                ],\n                style,\n            )}\n        />\n    );\n}\n"],"mappings":";;;;;;AA4BA,SAAgB,OAAO,EACnB,IAAI,UAAU,OACd,KACA,OACA,SACA,OAAO,MACP,WACA,OACA,GAAG,SACS;CACZ,OACI,oBAAC,SAAD;EACI,GAAI;EACJ,WAAW,GAAG,kBAAkBA,sBAAO,QAAQ,CAAC,QAAQA,sBAAO,QAAQ,SAAS;EAChF,OAAO,cACH;GACI,oBAAoB,UAAU,OAAO,KAAK,KAAK;GAC/C,oBAAoB,UAAU,SAAS,OAAO,MAAM;GACpD,oBAAoB,UAAU,WAAW,SAAS,aAAa;EAAC,GAEpE,KACJ;CAAE,CAAA;AAGd"}

package/dist/inline/Inline.module.js

@@ -0,0 +1,12 @@
+import "./Inline.css";
+//#region src/inline/Inline.module.css
+var inline = "panneau-inline";
+var nowrap = "panneau-inline-nowrap";
+var Inline_module_default = {
+	inline,
+	nowrap
+};
+//#endregion
+export { Inline_module_default as default, inline, nowrap };
+
+//# sourceMappingURL=Inline.module.js.map

package/dist/inline/Inline.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Inline.module.js","names":[],"sources":["../../src/inline/Inline.module.css"],"sourcesContent":["/* A horizontal row that wraps: each prop can change at the breakpoints of the nearest container. */\n\n.inline {\n    display: flex;\n    flex-wrap: wrap;\n    min-width: 0;\n}\n\n.nowrap {\n    flex-wrap: nowrap;\n}\n/* Responsive values are set inline; children reset them so that they aren't inherited. */\n.inline > * {\n    --_panneau-inline-gap-base: initial;\n    --_panneau-inline-gap-sm: initial;\n    --_panneau-inline-gap-md: initial;\n    --_panneau-inline-gap-lg: initial;\n    --_panneau-inline-gap-xl: initial;\n    --_panneau-inline-align-base: initial;\n    --_panneau-inline-align-sm: initial;\n    --_panneau-inline-align-md: initial;\n    --_panneau-inline-align-lg: initial;\n    --_panneau-inline-align-xl: initial;\n    --_panneau-inline-justify-base: initial;\n    --_panneau-inline-justify-sm: initial;\n    --_panneau-inline-justify-md: initial;\n    --_panneau-inline-justify-lg: initial;\n    --_panneau-inline-justify-xl: initial;\n}\n\n.inline {\n    gap: var(--_panneau-inline-gap-base, var(--panneau-inline-gap, var(--panneau-space-2)));\n    align-items: var(--_panneau-inline-align-base, center);\n    justify-content: var(--_panneau-inline-justify-base, start);\n}\n\n@container (min-width: 40rem) {\n    .inline {\n        gap: var(\n            --_panneau-inline-gap-sm,\n            var(--_panneau-inline-gap-base, var(--panneau-inline-gap, var(--panneau-space-2)))\n        );\n        align-items: var(--_panneau-inline-align-sm, var(--_panneau-inline-align-base, center));\n        justify-content: var(\n            --_panneau-inline-justify-sm,\n            var(--_panneau-inline-justify-base, start)\n        );\n    }\n}\n\n@container (min-width: 48rem) {\n    .inline {\n        gap: var(\n            --_panneau-inline-gap-md,\n            var(\n                --_panneau-inline-gap-sm,\n                var(--_panneau-inline-gap-base, var(--panneau-inline-gap, var(--panneau-space-2)))\n            )\n        );\n        align-items: var(\n            --_panneau-inline-align-md,\n            var(--_panneau-inline-align-sm, var(--_panneau-inline-align-base, center))\n        );\n        justify-content: var(\n            --_panneau-inline-justify-md,\n            var(--_panneau-inline-justify-sm, var(--_panneau-inline-justify-base, start))\n        );\n    }\n}\n\n@container (min-width: 64rem) {\n    .inline {\n        gap: var(\n            --_panneau-inline-gap-lg,\n            var(\n                --_panneau-inline-gap-md,\n                var(\n                    --_panneau-inline-gap-sm,\n                    var(\n                        --_panneau-inline-gap-base,\n                        var(--panneau-inline-gap, var(--panneau-space-2))\n                    )\n                )\n            )\n        );\n        align-items: var(\n            --_panneau-inline-align-lg,\n            var(\n                --_panneau-inline-align-md,\n                var(--_panneau-inline-align-sm, var(--_panneau-inline-align-base, center))\n            )\n        );\n        justify-content: var(\n            --_panneau-inline-justify-lg,\n            var(\n                --_panneau-inline-justify-md,\n                var(--_panneau-inline-justify-sm, var(--_panneau-inline-justify-base, start))\n            )\n        );\n    }\n}\n\n@container (min-width: 80rem) {\n    .inline {\n        gap: var(\n            --_panneau-inline-gap-xl,\n            var(\n                --_panneau-inline-gap-lg,\n                var(\n                    --_panneau-inline-gap-md,\n                    var(\n                        --_panneau-inline-gap-sm,\n                        var(\n                            --_panneau-inline-gap-base,\n                            var(--panneau-inline-gap, var(--panneau-space-2))\n                        )\n                    )\n                )\n            )\n        );\n        align-items: var(\n            --_panneau-inline-align-xl,\n            var(\n                --_panneau-inline-align-lg,\n                var(\n                    --_panneau-inline-align-md,\n                    var(--_panneau-inline-align-sm, var(--_panneau-inline-align-base, center))\n                )\n            )\n        );\n        justify-content: var(\n            --_panneau-inline-justify-xl,\n            var(\n                --_panneau-inline-justify-lg,\n                var(\n                    --_panneau-inline-justify-md,\n                    var(--_panneau-inline-justify-sm, var(--_panneau-inline-justify-base, start))\n                )\n            )\n        );\n    }\n}\n"],"mappings":""}

package/dist/inline/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Inline. */
+export declare const inlineTokens: import("..").ComponentTokens<"inline", "panneau-inline-gap">;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/inline/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/inline/tokens.ts"],"names":[],"mappings":"AAEA,wBAAwB;AACxB,eAAO,MAAM,YAAY,8DAGvB,CAAC"}

package/dist/inline/tokens.js

@@ -0,0 +1,10 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/inline/tokens.ts
+/** Tokens of Inline. */
+var inlineTokens = defineComponentTokens("inline", { 
+/** Space between items, in both directions, when the `gap` prop is not set. */
+gap: "var(--panneau-space-2)" });
+//#endregion
+export { inlineTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/inline/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/inline/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Inline. */\nexport const inlineTokens = defineComponentTokens('inline', {\n    /** Space between items, in both directions, when the `gap` prop is not set. */\n    gap: 'var(--panneau-space-2)',\n});\n"],"mappings":";;;AAGA,IAAa,eAAe,sBAAsB,UAAU;;AAExD,KAAK,yBACT,CAAC"}

package/dist/layout/responsive.d.ts

@@ -0,0 +1,38 @@
+import type { CSSProperties } from 'react';
+/**
+ * Breakpoints of the layout primitives, like Bootstrap's `$grid-breakpoints`: the minimum width of
+ * the nearest container at which a responsive value applies. They are constants, since CSS
+ * variables can't be used in queries; the stylesheets of the primitives use the same values.
+ */
+export declare const BREAKPOINTS: Readonly<{
+    sm: "40rem";
+    md: "48rem";
+    lg: "64rem";
+    xl: "80rem";
+}>;
+/** A breakpoint: `sm`, `md`, `lg` or `xl`. */
+export type Breakpoint = keyof typeof BREAKPOINTS;
+/**
+ * A value, or values by breakpoint: `{ base: 1, md: 2, lg: 3 }`. Each value applies from its
+ * breakpoint up, until a larger one sets another. Breakpoints are widths of the nearest container
+ * (`PanneauRoot`, `Container`, a form, a list), not of the viewport, so that a grid in a narrow
+ * sidebar behaves as on a phone.
+ */
+export type Responsive<T> = T | Partial<Record<'base' | Breakpoint, T>>;
+/** A step of the space scale of the theme (`--panneau-space-<step>`), or 0. */
+export type Space = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10;
+/** The CSS value of a step of the space scale. */
+export declare function space(step: Space): string;
+/**
+ * The inline variables of a responsive prop, `--_panneau-<component>-<prop>-<breakpoint>`, which
+ * the static rules of the component read in each container query. Unset breakpoints fall back to
+ * smaller ones in CSS.
+ */
+export declare function responsiveVariables<T>(component: string, prop: string, value: Responsive<T> | undefined, toCss: (value: T) => string): Record<string, string>;
+/** Merges inline variables with the `style` prop, which wins. */
+export declare function withVariables(variables: Record<string, string>[], style: CSSProperties | undefined): CSSProperties | undefined;
+/** How the primitives distribute items along their axis: `between` is `space-between`. */
+export type Justification = 'start' | 'center' | 'end' | 'between';
+/** The CSS value of a justification. */
+export declare function justification(value: Justification): string;
+//# sourceMappingURL=responsive.d.ts.map

package/dist/layout/responsive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.d.ts","sourceRoot":"","sources":["../../src/layout/responsive.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;GAIG;AACH,eAAO,MAAM,WAAW;;;;;EAKtB,CAAC;AAEH,8CAA8C;AAC9C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAElD;;;;;GAKG;AACH,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,GAAG,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;AAExE,+EAA+E;AAC/E,MAAM,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;AAEvD,kDAAkD;AAClD,wBAAgB,KAAK,CAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CAEzC;AAQD;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,EACjC,SAAS,EAAE,MAAM,EACjB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,EAChC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,GAC5B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAexB;AAED,iEAAiE;AACjE,wBAAgB,aAAa,CACzB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,EACnC,KAAK,EAAE,aAAa,GAAG,SAAS,GACjC,aAAa,GAAG,SAAS,CAG3B;AAED,0FAA0F;AAC1F,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEnE,wCAAwC;AACxC,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAE1D"}