@panneau/ui 0.0.0-stage → 5.0.0-alpha.0

package/dist/tabs/Tabs.css

@@ -0,0 +1,83 @@
+.panneau-tabs-JqDxcK {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-4);
+    min-width: 0;
+}
+
+.panneau-list-uiIzNm {
+    display: flex;
+    gap: var(--panneau-space-1);
+    overflow-x: auto;
+    border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);
+    scrollbar-width: none;
+}
+
+.panneau-list-uiIzNm::-webkit-scrollbar {
+    display: none;
+}
+
+.panneau-tab-dwPfFm {
+    position: relative;
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: var(--panneau-space-2);
+    min-height: var(--panneau-control-height);
+    padding: 0 var(--panneau-space-3);
+    font-size: var(--panneau-font-size-md);
+    font-weight: var(--panneau-font-weight-medium);
+    color: var(--panneau-color-text-muted);
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.panneau-tab-dwPfFm::after {
+    position: absolute;
+    inset-inline: var(--panneau-space-2);
+    bottom: calc(-1 * var(--panneau-border-width));
+    height: 2px;
+    content: '';
+    background-color: transparent;
+    border-radius: 2px 2px 0 0;
+}
+
+.panneau-tab-dwPfFm[data-hovered] {
+    color: var(--panneau-color-text);
+}
+
+.panneau-tab-dwPfFm[data-selected] {
+    color: var(--panneau-color-text);
+}
+
+.panneau-tab-dwPfFm[data-selected]::after {
+    background-color: var(--panneau-color-accent);
+}
+
+.panneau-tab-dwPfFm[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.panneau-tab-dwPfFm[data-focus-visible] {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: -2px;
+    border-radius: var(--panneau-radius-sm);
+}
+
+.panneau-panel-H3uAcq {
+    min-width: 0;
+    outline: none;
+}
+
+.panneau-panel-H3uAcq[data-focus-visible] {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 2px;
+}
+
+.panneau-panel-H3uAcq[data-inert],
+.panneau-panel-H3uAcq[inert] {
+    display: none;
+}

package/dist/tabs/Tabs.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import { type TabListProps as AriaTabListProps, type TabPanelProps as AriaTabPanelProps, type TabProps as AriaTabProps, type TabsProps as AriaTabsProps } from 'react-aria-components';
+export interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style'> {
+    className?: string;
+}
+/** Tabs: a `TabList` of `Tab`s, then a `TabPanel` per tab, matched by `id`. */
+export declare function Tabs({ className, ...props }: TabsProps): import("react").JSX.Element;
+export interface TabListProps<T extends object> extends Omit<AriaTabListProps<T>, 'className' | 'style'> {
+    className?: string;
+}
+/** The row of tabs. It scrolls sideways when the tabs don't fit, on phones. */
+export declare function TabList<T extends object>({ className, ...props }: TabListProps<T>): import("react").JSX.Element;
+export interface TabProps extends Omit<AriaTabProps, 'className' | 'style' | 'children'> {
+    children?: ReactNode;
+    className?: string;
+}
+/** A tab. Put a `Badge` in it for a count, such as the errors of the panel. */
+export declare function Tab({ className, ...props }: TabProps): import("react").JSX.Element;
+export interface TabPanelProps extends Omit<AriaTabPanelProps, 'className' | 'style'> {
+    className?: string;
+}
+/**
+ * The content of a tab. With `shouldForceMount`, the panel stays mounted (and hidden) when another
+ * tab is selected, which keeps the state of its fields.
+ */
+export declare function TabPanel({ className, ...props }: TabPanelProps): import("react").JSX.Element;
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAGH,KAAK,YAAY,IAAI,gBAAgB,EAErC,KAAK,aAAa,IAAI,iBAAiB,EACvC,KAAK,QAAQ,IAAI,YAAY,EAE7B,KAAK,SAAS,IAAI,aAAa,EAClC,MAAM,uBAAuB,CAAC;AAK/B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,aAAa,EAAE,WAAW,GAAG,OAAO,CAAC;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,+EAA+E;AAC/E,wBAAgB,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,+BAEtD;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CACxD,gBAAgB,CAAC,CAAC,CAAC,EACnB,WAAW,GAAG,OAAO,CACxB;IACG,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,+EAA+E;AAC/E,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,+BAEjF;AAED,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,YAAY,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC;IACpF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,+EAA+E;AAC/E,wBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,+BAEpD;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,iBAAiB,EAAE,WAAW,GAAG,OAAO,CAAC;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAE9D"}

package/dist/tabs/Tabs.js

@@ -0,0 +1,141 @@
+import { cx } from "../utils/cx.js";
+import Tabs_module_default from "./Tabs.module.js";
+import { Tab, TabList, TabPanel, Tabs } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+//#region src/tabs/Tabs.tsx
+/** Tabs: a `TabList` of `Tab`s, then a `TabPanel` per tab, matched by `id`. */
+function Tabs$1(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cx(Tabs_module_default.tabs, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Tabs, {
+			...props,
+			className: t1
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+/** The row of tabs. It scrolls sideways when the tabs don't fit, on phones. */
+function TabList$1(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cx(Tabs_module_default.list, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(TabList, {
+			...props,
+			className: t1
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+/** A tab. Put a `Badge` in it for a count, such as the errors of the panel. */
+function Tab$1(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cx(Tabs_module_default.tab, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Tab, {
+			...props,
+			className: t1
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+/**
+* The content of a tab. With `shouldForceMount`, the panel stays mounted (and hidden) when another
+* tab is selected, which keeps the state of its fields.
+*/
+function TabPanel$1(t0) {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cx(Tabs_module_default.panel, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(TabPanel, {
+			...props,
+			className: t1
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+//#endregion
+export { Tab$1 as Tab, TabList$1 as TabList, TabPanel$1 as TabPanel, Tabs$1 as Tabs };
+
+//# sourceMappingURL=Tabs.js.map

package/dist/tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","names":["Tabs","_c","styles","AriaTabs","TabList","AriaTabList","Tab","AriaTab","TabPanel","AriaTabPanel"],"sources":["../../src/tabs/Tabs.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n    Tab as AriaTab,\n    TabList as AriaTabList,\n    type TabListProps as AriaTabListProps,\n    TabPanel as AriaTabPanel,\n    type TabPanelProps as AriaTabPanelProps,\n    type TabProps as AriaTabProps,\n    Tabs as AriaTabs,\n    type TabsProps as AriaTabsProps,\n} from 'react-aria-components';\n\nimport { cx } from '../utils/cx';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style'> {\n    className?: string;\n}\n\n/** Tabs: a `TabList` of `Tab`s, then a `TabPanel` per tab, matched by `id`. */\nexport function Tabs({ className, ...props }: TabsProps) {\n    return <AriaTabs {...props} className={cx(styles.tabs, className)} />;\n}\n\nexport interface TabListProps<T extends object> extends Omit<\n    AriaTabListProps<T>,\n    'className' | 'style'\n> {\n    className?: string;\n}\n\n/** The row of tabs. It scrolls sideways when the tabs don't fit, on phones. */\nexport function TabList<T extends object>({ className, ...props }: TabListProps<T>) {\n    return <AriaTabList {...props} className={cx(styles.list, className)} />;\n}\n\nexport interface TabProps extends Omit<AriaTabProps, 'className' | 'style' | 'children'> {\n    children?: ReactNode;\n    className?: string;\n}\n\n/** A tab. Put a `Badge` in it for a count, such as the errors of the panel. */\nexport function Tab({ className, ...props }: TabProps) {\n    return <AriaTab {...props} className={cx(styles.tab, className)} />;\n}\n\nexport interface TabPanelProps extends Omit<AriaTabPanelProps, 'className' | 'style'> {\n    className?: string;\n}\n\n/**\n * The content of a tab. With `shouldForceMount`, the panel stays mounted (and hidden) when another\n * tab is selected, which keeps the state of its fields.\n */\nexport function TabPanel({ className, ...props }: TabPanelProps) {\n    return <AriaTabPanel {...props} className={cx(styles.panel, className)} />;\n}\n"],"mappings":"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"}

package/dist/tabs/Tabs.module.js

@@ -0,0 +1,16 @@
+import "./Tabs.css";
+//#region src/tabs/Tabs.module.css
+var tabs = "panneau-tabs-JqDxcK";
+var list = "panneau-list-uiIzNm";
+var tab = "panneau-tab-dwPfFm";
+var panel = "panneau-panel-H3uAcq";
+var Tabs_module_default = {
+	tabs,
+	list,
+	tab,
+	panel
+};
+//#endregion
+export { Tabs_module_default as default, list, panel, tab, tabs };
+
+//# sourceMappingURL=Tabs.module.js.map

package/dist/tabs/Tabs.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.module.js","names":[],"sources":["../../src/tabs/Tabs.module.css"],"sourcesContent":[".tabs {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-4);\n    min-width: 0;\n}\n\n.list {\n    display: flex;\n    gap: var(--panneau-space-1);\n    overflow-x: auto;\n    border-bottom: var(--panneau-border-width) solid var(--panneau-color-border);\n    scrollbar-width: none;\n}\n\n.list::-webkit-scrollbar {\n    display: none;\n}\n\n.tab {\n    position: relative;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-height: var(--panneau-control-height);\n    padding: 0 var(--panneau-space-3);\n    font-size: var(--panneau-font-size-md);\n    font-weight: var(--panneau-font-weight-medium);\n    color: var(--panneau-color-text-muted);\n    white-space: nowrap;\n    cursor: pointer;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n}\n\n.tab::after {\n    position: absolute;\n    inset-inline: var(--panneau-space-2);\n    bottom: calc(-1 * var(--panneau-border-width));\n    height: 2px;\n    content: '';\n    background-color: transparent;\n    border-radius: 2px 2px 0 0;\n}\n\n.tab[data-hovered] {\n    color: var(--panneau-color-text);\n}\n\n.tab[data-selected] {\n    color: var(--panneau-color-text);\n}\n\n.tab[data-selected]::after {\n    background-color: var(--panneau-color-accent);\n}\n\n.tab[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n\n.tab[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: -2px;\n    border-radius: var(--panneau-radius-sm);\n}\n\n.panel {\n    min-width: 0;\n    outline: none;\n}\n\n.panel[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.panel[data-inert],\n.panel[inert] {\n    display: none;\n}\n"],"mappings":""}

package/dist/text-area/TextArea.css

@@ -0,0 +1,8 @@
+/* Doubled class: overrides the shared control, whatever the CSS order. */
+.panneau-textArea-ET01uE.panneau-textArea-ET01uE {
+    display: block;
+    min-height: calc(var(--panneau-control-height) * 2);
+    padding: var(--panneau-space-2) var(--panneau-space-3);
+    line-height: var(--panneau-line-height);
+    resize: vertical;
+}

package/dist/text-area/TextArea.d.ts

@@ -0,0 +1,11 @@
+import { type TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
+import { type FieldChromeProps } from '../field/FieldParts';
+export interface TextAreaProps extends Omit<AriaTextFieldProps, 'className' | 'style' | 'children' | 'isInvalid' | 'validate'>, FieldChromeProps {
+    placeholder?: string;
+    /** Visible lines of text. Defaults to 4. */
+    rows?: number;
+    textAreaClassName?: string;
+}
+/** A multi-line text input with its label, description and errors. */
+export declare function TextArea({ label, description, errors, placeholder, rows, className, labelClassName, descriptionClassName, errorsClassName, textAreaClassName, isRequired, ...props }: TextAreaProps): import("react").JSX.Element;
+//# sourceMappingURL=TextArea.d.ts.map

package/dist/text-area/TextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../src/text-area/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,cAAc,IAAI,kBAAkB,EAE5C,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACH,KAAK,gBAAgB,EAKxB,MAAM,qBAAqB,CAAC;AAI7B,MAAM,WAAW,aACb,SACI,IAAI,CAAC,kBAAkB,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,CAAC,EACvF,gBAAgB;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,sEAAsE;AACtE,wBAAgB,QAAQ,CAAC,EACrB,KAAK,EACL,WAAW,EACX,MAAW,EACX,WAAW,EACX,IAAQ,EACR,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,iBAAiB,EACjB,UAAU,EACV,GAAG,KAAK,EACX,EAAE,aAAa,+BAqBf"}

package/dist/text-area/TextArea.js

@@ -0,0 +1,41 @@
+import { cx } from "../utils/cx.js";
+import Field_module_default from "../field/Field.module.js";
+import { FieldDescription, FieldErrors, FieldLabel } from "../field/FieldParts.js";
+import TextArea_module_default from "./TextArea.module.js";
+import { TextArea, TextField } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/text-area/TextArea.tsx
+/** A multi-line text input with its label, description and errors. */
+function TextArea$1({ label, description, errors = [], placeholder, rows = 4, className, labelClassName, descriptionClassName, errorsClassName, textAreaClassName, isRequired, ...props }) {
+	return /* @__PURE__ */ jsxs(TextField, {
+		...props,
+		isRequired,
+		isInvalid: errors.length > 0,
+		validationBehavior: "aria",
+		className: cx(Field_module_default.field, className),
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				isRequired,
+				className: labelClassName,
+				children: label
+			}),
+			/* @__PURE__ */ jsx(TextArea, {
+				placeholder,
+				rows,
+				className: cx(Field_module_default.control, TextArea_module_default.textArea, textAreaClassName)
+			}),
+			/* @__PURE__ */ jsx(FieldDescription, {
+				className: descriptionClassName,
+				children: description
+			}),
+			/* @__PURE__ */ jsx(FieldErrors, {
+				errors,
+				className: errorsClassName
+			})
+		]
+	});
+}
+//#endregion
+export { TextArea$1 as TextArea };
+
+//# sourceMappingURL=TextArea.js.map

package/dist/text-area/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","names":["TextArea","fieldStyles","AriaTextArea","styles"],"sources":["../../src/text-area/TextArea.tsx"],"sourcesContent":["import {\n    TextArea as AriaTextArea,\n    type TextFieldProps as AriaTextFieldProps,\n    TextField,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport { cx } from '../utils/cx';\nimport styles from './TextArea.module.css';\n\nexport interface TextAreaProps\n    extends\n        Omit<AriaTextFieldProps, 'className' | 'style' | 'children' | 'isInvalid' | 'validate'>,\n        FieldChromeProps {\n    placeholder?: string;\n    /** Visible lines of text. Defaults to 4. */\n    rows?: number;\n    textAreaClassName?: string;\n}\n\n/** A multi-line text input with its label, description and errors. */\nexport function TextArea({\n    label,\n    description,\n    errors = [],\n    placeholder,\n    rows = 4,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    textAreaClassName,\n    isRequired,\n    ...props\n}: TextAreaProps) {\n    return (\n        <TextField\n            {...props}\n            isRequired={isRequired}\n            isInvalid={errors.length > 0}\n            validationBehavior=\"aria\"\n            className={cx(fieldStyles.field, className)}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <AriaTextArea\n                placeholder={placeholder}\n                rows={rows}\n                className={cx(fieldStyles.control, styles.textArea, textAreaClassName)}\n            />\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </TextField>\n    );\n}\n"],"mappings":";;;;;;;;AA2BA,SAAgBA,WAAS,EACrB,OACA,aACA,SAAS,CAAA,GACT,aACA,OAAO,GACP,WACA,gBACA,sBACA,iBACA,mBACA,YACA,GAAG,SACW;CACd,OACI,qBAAC,WAAD;EACI,GAAI;EACQ;EACZ,WAAW,OAAO,SAAS;EAC3B,oBAAmB;EACnB,WAAW,GAAGC,qBAAY,OAAO,SAAS;EAL9C,UAAA;GAOI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,oBAACC,UAAD;IACiB;IACP;IACN,WAAW,GAAGD,qBAAY,SAASE,wBAAO,UAAU,iBAAiB;GAAE,CAAA;GAE3E,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EACjD;;AAEnB"}

package/dist/text-area/TextArea.module.js

@@ -0,0 +1,8 @@
+import "./TextArea.css";
+//#region src/text-area/TextArea.module.css
+var textArea = "panneau-textArea-ET01uE";
+var TextArea_module_default = { textArea };
+//#endregion
+export { TextArea_module_default as default, textArea };
+
+//# sourceMappingURL=TextArea.module.js.map

package/dist/text-area/TextArea.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.module.js","names":[],"sources":["../../src/text-area/TextArea.module.css"],"sourcesContent":["/* Doubled class: overrides the shared control, whatever the CSS order. */\n.textArea.textArea {\n    display: block;\n    min-height: calc(var(--panneau-control-height) * 2);\n    padding: var(--panneau-space-2) var(--panneau-space-3);\n    line-height: var(--panneau-line-height);\n    resize: vertical;\n}\n"],"mappings":""}

package/dist/text-input/TextInput.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import { type TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
+import { type FieldChromeProps } from '../field/FieldParts';
+export interface TextInputProps extends Omit<AriaTextFieldProps, 'className' | 'style' | 'children' | 'isInvalid' | 'validate' | 'type'>, FieldChromeProps {
+    type?: 'text' | 'email' | 'url' | 'tel' | 'password' | 'search';
+    placeholder?: string;
+    /** Content before the text, inside the control: a unit, a URL prefix, an icon. */
+    prefix?: ReactNode;
+    /** Content after the text, inside the control. */
+    suffix?: ReactNode;
+    /** Class name of the control (the box around the text). */
+    controlClassName?: string;
+    inputClassName?: string;
+}
+/** A single-line text input with its label, description and errors. */
+export declare function TextInput({ label, description, errors, placeholder, prefix, suffix, className, labelClassName, descriptionClassName, errorsClassName, controlClassName, inputClassName, isRequired, isReadOnly, ...props }: TextInputProps): import("react").JSX.Element;
+//# sourceMappingURL=TextInput.d.ts.map

package/dist/text-input/TextInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/text-input/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACH,KAAK,cAAc,IAAI,kBAAkB,EAI5C,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACH,KAAK,gBAAgB,EAKxB,MAAM,qBAAqB,CAAC;AAG7B,MAAM,WAAW,cACb,SACI,IAAI,CACA,kBAAkB,EAClB,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CACzE,EACD,gBAAgB;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,QAAQ,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kFAAkF;IAClF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,kDAAkD;IAClD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,uEAAuE;AACvE,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,WAAW,EACX,MAAW,EACX,WAAW,EACX,MAAM,EACN,MAAM,EACN,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACX,EAAE,cAAc,+BAwChB"}

package/dist/text-input/TextInput.js

@@ -0,0 +1,61 @@
+import { cx } from "../utils/cx.js";
+import Field_module_default from "../field/Field.module.js";
+import { FieldDescription, FieldErrors, FieldLabel } from "../field/FieldParts.js";
+import { Group, Input, TextField } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/text-input/TextInput.tsx
+/** A single-line text input with its label, description and errors. */
+function TextInput({ label, description, errors = [], placeholder, prefix, suffix, className, labelClassName, descriptionClassName, errorsClassName, controlClassName, inputClassName, isRequired, isReadOnly, ...props }) {
+	const invalid = errors.length > 0;
+	const adorned = prefix !== void 0 || suffix !== void 0;
+	return /* @__PURE__ */ jsxs(TextField, {
+		...props,
+		isRequired,
+		isReadOnly,
+		isInvalid: invalid,
+		validationBehavior: "aria",
+		className: cx(Field_module_default.field, className),
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				isRequired,
+				className: labelClassName,
+				children: label
+			}),
+			adorned ? /* @__PURE__ */ jsxs(Group, {
+				className: cx(Field_module_default.control, controlClassName),
+				"data-invalid": invalid || void 0,
+				"data-readonly": isReadOnly || void 0,
+				isDisabled: props.isDisabled,
+				children: [
+					prefix !== void 0 ? /* @__PURE__ */ jsx("span", {
+						className: Field_module_default.adornment,
+						children: prefix
+					}) : null,
+					/* @__PURE__ */ jsx(Input, {
+						placeholder,
+						className: cx(Field_module_default.bare, inputClassName)
+					}),
+					suffix !== void 0 ? /* @__PURE__ */ jsx("span", {
+						className: Field_module_default.adornment,
+						children: suffix
+					}) : null
+				]
+			}) : /* @__PURE__ */ jsx(Input, {
+				placeholder,
+				className: cx(Field_module_default.control, controlClassName, inputClassName)
+			}),
+			/* @__PURE__ */ jsx(FieldDescription, {
+				className: descriptionClassName,
+				children: description
+			}),
+			/* @__PURE__ */ jsx(FieldErrors, {
+				errors,
+				className: errorsClassName
+			})
+		]
+	});
+}
+//#endregion
+export { TextInput };
+
+//# sourceMappingURL=TextInput.js.map

package/dist/text-input/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","names":["styles"],"sources":["../../src/text-input/TextInput.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n    type TextFieldProps as AriaTextFieldProps,\n    Group,\n    Input,\n    TextField,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles as styles,\n} from '../field/FieldParts';\nimport { cx } from '../utils/cx';\n\nexport interface TextInputProps\n    extends\n        Omit<\n            AriaTextFieldProps,\n            'className' | 'style' | 'children' | 'isInvalid' | 'validate' | 'type'\n        >,\n        FieldChromeProps {\n    type?: 'text' | 'email' | 'url' | 'tel' | 'password' | 'search';\n    placeholder?: string;\n    /** Content before the text, inside the control: a unit, a URL prefix, an icon. */\n    prefix?: ReactNode;\n    /** Content after the text, inside the control. */\n    suffix?: ReactNode;\n    /** Class name of the control (the box around the text). */\n    controlClassName?: string;\n    inputClassName?: string;\n}\n\n/** A single-line text input with its label, description and errors. */\nexport function TextInput({\n    label,\n    description,\n    errors = [],\n    placeholder,\n    prefix,\n    suffix,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    controlClassName,\n    inputClassName,\n    isRequired,\n    isReadOnly,\n    ...props\n}: TextInputProps) {\n    const invalid = errors.length > 0;\n    const adorned = prefix !== undefined || suffix !== undefined;\n    return (\n        <TextField\n            {...props}\n            isRequired={isRequired}\n            isReadOnly={isReadOnly}\n            isInvalid={invalid}\n            validationBehavior=\"aria\"\n            className={cx(styles.field, className)}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            {adorned ? (\n                <Group\n                    className={cx(styles.control, controlClassName)}\n                    data-invalid={invalid || undefined}\n                    data-readonly={isReadOnly || undefined}\n                    isDisabled={props.isDisabled}\n                >\n                    {prefix !== undefined ? (\n                        <span className={styles.adornment}>{prefix}</span>\n                    ) : null}\n                    <Input placeholder={placeholder} className={cx(styles.bare, inputClassName)} />\n                    {suffix !== undefined ? (\n                        <span className={styles.adornment}>{suffix}</span>\n                    ) : null}\n                </Group>\n            ) : (\n                <Input\n                    placeholder={placeholder}\n                    className={cx(styles.control, controlClassName, inputClassName)}\n                />\n            )}\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </TextField>\n    );\n}\n"],"mappings":";;;;;;;AAoCA,SAAgB,UAAU,EACtB,OACA,aACA,SAAS,CAAA,GACT,aACA,QACA,QACA,WACA,gBACA,sBACA,iBACA,kBACA,gBACA,YACA,YACA,GAAG,SACY;CACf,MAAM,UAAU,OAAO,SAAS;CAChC,MAAM,UAAU,WAAW,KAAA,KAAa,WAAW,KAAA;CACnD,OACI,qBAAC,WAAD;EACI,GAAI;EACQ;EACA;EACZ,WAAW;EACX,oBAAmB;EACnB,WAAW,GAAGA,qBAAO,OAAO,SAAS;EANzC,UAAA;GAQI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACX,UACG,qBAAC,OAAD;IACI,WAAW,GAAGA,qBAAO,SAAS,gBAAgB;IAC9C,gBAAc,WAAW,KAAA;IACzB,iBAAe,cAAc,KAAA;IAC7B,YAAY,MAAM;IAJtB,UAAA;KAMK,WAAW,KAAA,IACR,oBAAC,QAAD;MAAM,WAAWA,qBAAO;MAAY,UAAA;KAAa,CAAA,IACjD;KACJ,oBAAC,OAAD;MAAoB;MAAa,WAAW,GAAGA,qBAAO,MAAM,cAAc;KAAE,CAAA;KAC3E,WAAW,KAAA,IACR,oBAAC,QAAD;MAAM,WAAWA,qBAAO;MAAY,UAAA;KAAa,CAAA,IACjD;IACD;GAEP,CAAA,IAAA,oBAAC,OAAD;IACiB;IACb,WAAW,GAAGA,qBAAO,SAAS,kBAAkB,cAAc;GAAE,CAAA;GAGxE,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EACjD;;AAEnB"}

package/dist/theme/bootstrap.d.ts

@@ -0,0 +1,8 @@
+import type { Theme } from './theme';
+/**
+ * Maps Panneau's tokens to the CSS variables of Bootstrap 5.3, for sites that use Bootstrap: Panneau
+ * then follows the site's colors, fonts and radii, and its color mode (`data-bs-theme`), without
+ * using any Bootstrap class. Bootstrap's CSS must be loaded by the site.
+ */
+export declare const bootstrapTheme: Theme;
+//# sourceMappingURL=bootstrap.d.ts.map

package/dist/theme/bootstrap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.d.ts","sourceRoot":"","sources":["../../src/theme/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAErC;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,KAkD5B,CAAC"}

package/dist/theme/bootstrap.js

@@ -0,0 +1,61 @@
+//#region src/theme/bootstrap.ts
+/**
+* Maps Panneau's tokens to the CSS variables of Bootstrap 5.3, for sites that use Bootstrap: Panneau
+* then follows the site's colors, fonts and radii, and its color mode (`data-bs-theme`), without
+* using any Bootstrap class. Bootstrap's CSS must be loaded by the site.
+*/
+var bootstrapTheme = {
+	label: "Bootstrap",
+	tokens: {
+		"panneau-color-bg": "var(--bs-body-bg)",
+		"panneau-color-surface": "var(--bs-body-bg)",
+		"panneau-color-surface-sunken": "var(--bs-tertiary-bg)",
+		"panneau-color-surface-raised": "var(--bs-body-bg)",
+		"panneau-color-hover": "rgba(var(--bs-emphasis-color-rgb), 0.06)",
+		"panneau-color-pressed": "rgba(var(--bs-emphasis-color-rgb), 0.1)",
+		"panneau-color-text": "var(--bs-body-color)",
+		"panneau-color-text-muted": "var(--bs-secondary-color)",
+		"panneau-color-link": "var(--bs-link-color)",
+		"panneau-color-border": "var(--bs-border-color)",
+		"panneau-color-border-control": "var(--bs-border-color)",
+		"panneau-color-accent": "var(--bs-primary)",
+		"panneau-color-accent-hover": "color-mix(in srgb, var(--bs-primary), #000 15%)",
+		"panneau-color-accent-text": "var(--bs-white)",
+		"panneau-color-accent-subtle": "var(--bs-primary-bg-subtle)",
+		"panneau-color-focus": "rgba(var(--bs-primary-rgb), 0.5)",
+		"panneau-color-danger": "var(--bs-danger-text-emphasis)",
+		"panneau-color-danger-subtle": "var(--bs-danger-bg-subtle)",
+		"panneau-color-danger-border": "var(--bs-danger-border-subtle)",
+		"panneau-color-danger-solid": "var(--bs-danger)",
+		"panneau-color-danger-solid-hover": "color-mix(in srgb, var(--bs-danger), #000 15%)",
+		"panneau-color-danger-solid-text": "var(--bs-white)",
+		"panneau-color-success": "var(--bs-success-text-emphasis)",
+		"panneau-color-success-subtle": "var(--bs-success-bg-subtle)",
+		"panneau-color-success-border": "var(--bs-success-border-subtle)",
+		"panneau-color-warning": "var(--bs-warning-text-emphasis)",
+		"panneau-color-warning-subtle": "var(--bs-warning-bg-subtle)",
+		"panneau-color-warning-border": "var(--bs-warning-border-subtle)",
+		"panneau-color-info": "var(--bs-info-text-emphasis)",
+		"panneau-color-info-subtle": "var(--bs-info-bg-subtle)",
+		"panneau-color-info-border": "var(--bs-info-border-subtle)",
+		"panneau-font-family": "var(--bs-body-font-family)",
+		"panneau-font-family-mono": "var(--bs-font-monospace)",
+		"panneau-font-size-md": "var(--bs-body-font-size)",
+		"panneau-font-size-control": "var(--bs-body-font-size)",
+		"panneau-line-height": "var(--bs-body-line-height)",
+		"panneau-radius-sm": "var(--bs-border-radius-sm)",
+		"panneau-radius-md": "var(--bs-border-radius)",
+		"panneau-radius-lg": "var(--bs-border-radius-lg)",
+		"panneau-radius-full": "var(--bs-border-radius-pill)",
+		"panneau-border-width": "var(--bs-border-width)",
+		"panneau-shadow-sm": "var(--bs-box-shadow-sm)",
+		"panneau-shadow-md": "var(--bs-box-shadow)",
+		"panneau-shadow-lg": "var(--bs-box-shadow-lg)",
+		"panneau-control-height": "calc(1.5em + 0.75rem + 2 * var(--bs-border-width))",
+		"panneau-control-height-sm": "calc(1.5em + 0.5rem + 2 * var(--bs-border-width))"
+	}
+};
+//#endregion
+export { bootstrapTheme };
+
+//# sourceMappingURL=bootstrap.js.map

package/dist/theme/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.js","names":[],"sources":["../../src/theme/bootstrap.ts"],"sourcesContent":["import type { Theme } from './theme';\n\n/**\n * Maps Panneau's tokens to the CSS variables of Bootstrap 5.3, for sites that use Bootstrap: Panneau\n * then follows the site's colors, fonts and radii, and its color mode (`data-bs-theme`), without\n * using any Bootstrap class. Bootstrap's CSS must be loaded by the site.\n */\nexport const bootstrapTheme: Theme = {\n    label: 'Bootstrap',\n    tokens: {\n        'panneau-color-bg': 'var(--bs-body-bg)',\n        'panneau-color-surface': 'var(--bs-body-bg)',\n        'panneau-color-surface-sunken': 'var(--bs-tertiary-bg)',\n        'panneau-color-surface-raised': 'var(--bs-body-bg)',\n        'panneau-color-hover': 'rgba(var(--bs-emphasis-color-rgb), 0.06)',\n        'panneau-color-pressed': 'rgba(var(--bs-emphasis-color-rgb), 0.1)',\n        'panneau-color-text': 'var(--bs-body-color)',\n        'panneau-color-text-muted': 'var(--bs-secondary-color)',\n        'panneau-color-link': 'var(--bs-link-color)',\n        'panneau-color-border': 'var(--bs-border-color)',\n        'panneau-color-border-control': 'var(--bs-border-color)',\n        'panneau-color-accent': 'var(--bs-primary)',\n        'panneau-color-accent-hover': 'color-mix(in srgb, var(--bs-primary), #000 15%)',\n        'panneau-color-accent-text': 'var(--bs-white)',\n        'panneau-color-accent-subtle': 'var(--bs-primary-bg-subtle)',\n        'panneau-color-focus': 'rgba(var(--bs-primary-rgb), 0.5)',\n        'panneau-color-danger': 'var(--bs-danger-text-emphasis)',\n        'panneau-color-danger-subtle': 'var(--bs-danger-bg-subtle)',\n        'panneau-color-danger-border': 'var(--bs-danger-border-subtle)',\n        'panneau-color-danger-solid': 'var(--bs-danger)',\n        'panneau-color-danger-solid-hover': 'color-mix(in srgb, var(--bs-danger), #000 15%)',\n        'panneau-color-danger-solid-text': 'var(--bs-white)',\n        'panneau-color-success': 'var(--bs-success-text-emphasis)',\n        'panneau-color-success-subtle': 'var(--bs-success-bg-subtle)',\n        'panneau-color-success-border': 'var(--bs-success-border-subtle)',\n        'panneau-color-warning': 'var(--bs-warning-text-emphasis)',\n        'panneau-color-warning-subtle': 'var(--bs-warning-bg-subtle)',\n        'panneau-color-warning-border': 'var(--bs-warning-border-subtle)',\n        'panneau-color-info': 'var(--bs-info-text-emphasis)',\n        'panneau-color-info-subtle': 'var(--bs-info-bg-subtle)',\n        'panneau-color-info-border': 'var(--bs-info-border-subtle)',\n        'panneau-font-family': 'var(--bs-body-font-family)',\n        'panneau-font-family-mono': 'var(--bs-font-monospace)',\n        'panneau-font-size-md': 'var(--bs-body-font-size)',\n        'panneau-font-size-control': 'var(--bs-body-font-size)',\n        'panneau-line-height': 'var(--bs-body-line-height)',\n        'panneau-radius-sm': 'var(--bs-border-radius-sm)',\n        'panneau-radius-md': 'var(--bs-border-radius)',\n        'panneau-radius-lg': 'var(--bs-border-radius-lg)',\n        'panneau-radius-full': 'var(--bs-border-radius-pill)',\n        'panneau-border-width': 'var(--bs-border-width)',\n        'panneau-shadow-sm': 'var(--bs-box-shadow-sm)',\n        'panneau-shadow-md': 'var(--bs-box-shadow)',\n        'panneau-shadow-lg': 'var(--bs-box-shadow-lg)',\n        'panneau-control-height': 'calc(1.5em + 0.75rem + 2 * var(--bs-border-width))',\n        'panneau-control-height-sm': 'calc(1.5em + 0.5rem + 2 * var(--bs-border-width))',\n    },\n};\n"],"mappings":";;;;;;AAOA,IAAa,iBAAwB;CACjC,OAAO;CACP,QAAQ;EACJ,oBAAoB;EACpB,yBAAyB;EACzB,gCAAgC;EAChC,gCAAgC;EAChC,uBAAuB;EACvB,yBAAyB;EACzB,sBAAsB;EACtB,4BAA4B;EAC5B,sBAAsB;EACtB,wBAAwB;EACxB,gCAAgC;EAChC,wBAAwB;EACxB,8BAA8B;EAC9B,6BAA6B;EAC7B,+BAA+B;EAC/B,uBAAuB;EACvB,wBAAwB;EACxB,+BAA+B;EAC/B,+BAA+B;EAC/B,8BAA8B;EAC9B,oCAAoC;EACpC,mCAAmC;EACnC,yBAAyB;EACzB,gCAAgC;EAChC,gCAAgC;EAChC,yBAAyB;EACzB,gCAAgC;EAChC,gCAAgC;EAChC,sBAAsB;EACtB,6BAA6B;EAC7B,6BAA6B;EAC7B,uBAAuB;EACvB,4BAA4B;EAC5B,wBAAwB;EACxB,6BAA6B;EAC7B,uBAAuB;EACvB,qBAAqB;EACrB,qBAAqB;EACrB,qBAAqB;EACrB,uBAAuB;EACvB,wBAAwB;EACxB,qBAAqB;EACrB,qBAAqB;EACrB,qBAAqB;EACrB,0BAA0B;EAC1B,6BAA6B;CACjC;AACJ"}

package/dist/theme/theme.d.ts

@@ -0,0 +1,23 @@
+/**
+ * A theme: design tokens, as CSS variables without the leading `--`, with optional overrides for
+ * the dark scheme. It has the same shape as the `Theme` of `@panneau/core` plugins.
+ */
+export interface Theme {
+    label?: string;
+    /** Tokens of the light scheme, or of both schemes without `dark`: `{ 'panneau-color-accent': '#05f' }`. */
+    tokens: Record<string, string>;
+    /** Tokens that change in the dark scheme. */
+    dark?: Record<string, string>;
+}
+/** `auto` follows the system setting (`prefers-color-scheme`). */
+export type ColorScheme = 'light' | 'dark' | 'auto';
+/** A short, stable hash of a string, to scope the CSS of a theme. */
+export declare function hashString(value: string): string;
+/**
+ * The CSS of a theme, scoped to the roots that carry `data-panneau-theme="<scope>"`. Its rules are
+ * more specific than the default tokens, and dark overrides more specific than light ones. Token
+ * names must be plain identifiers, and values can't contain `{`, `}`, `;` or `<`: other entries are
+ * ignored.
+ */
+export declare function getThemeCss(theme: Theme, scope: string): string;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,KAAK;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2GAA2G;IAC3G,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACjC;AAED,kEAAkE;AAClE,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AASpD,qEAAqE;AACrE,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMhD;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAW/D"}

package/dist/theme/theme.js

@@ -0,0 +1,30 @@
+//#region src/theme/theme.ts
+function declarations(tokens) {
+	return Object.entries(tokens).filter(([name, value]) => /^[a-zA-Z0-9-_]+$/.test(name) && !/[{};<]/.test(value)).map(([name, value]) => `--${name}:${value};`).join("");
+}
+/** A short, stable hash of a string, to scope the CSS of a theme. */
+function hashString(value) {
+	let hash = 5381;
+	for (let index = 0; index < value.length; index += 1) hash = hash * 33 ^ value.charCodeAt(index);
+	return (hash >>> 0).toString(36);
+}
+/**
+* The CSS of a theme, scoped to the roots that carry `data-panneau-theme="<scope>"`. Its rules are
+* more specific than the default tokens, and dark overrides more specific than light ones. Token
+* names must be plain identifiers, and values can't contain `{`, `}`, `;` or `<`: other entries are
+* ignored.
+*/
+function getThemeCss(theme, scope) {
+	const root = `[data-panneau-theme="${scope}"]`;
+	const light = declarations(theme.tokens);
+	const dark = theme.dark !== void 0 ? declarations(theme.dark) : "";
+	return [
+		light !== "" ? `${root}{${light}}` : "",
+		dark !== "" ? `${root}[data-color-scheme="dark"]{${dark}}` : "",
+		dark !== "" ? `@media (prefers-color-scheme: dark){${root}[data-color-scheme="auto"]{${dark}}}` : ""
+	].join("");
+}
+//#endregion
+export { getThemeCss, hashString };
+
+//# sourceMappingURL=theme.js.map

package/dist/theme/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/theme/theme.ts"],"sourcesContent":["/**\n * A theme: design tokens, as CSS variables without the leading `--`, with optional overrides for\n * the dark scheme. It has the same shape as the `Theme` of `@panneau/core` plugins.\n */\nexport interface Theme {\n    label?: string;\n    /** Tokens of the light scheme, or of both schemes without `dark`: `{ 'panneau-color-accent': '#05f' }`. */\n    tokens: Record<string, string>;\n    /** Tokens that change in the dark scheme. */\n    dark?: Record<string, string>;\n}\n\n/** `auto` follows the system setting (`prefers-color-scheme`). */\nexport type ColorScheme = 'light' | 'dark' | 'auto';\n\nfunction declarations(tokens: Record<string, string>): string {\n    return Object.entries(tokens)\n        .filter(([name, value]) => /^[a-zA-Z0-9-_]+$/.test(name) && !/[{};<]/.test(value))\n        .map(([name, value]) => `--${name}:${value};`)\n        .join('');\n}\n\n/** A short, stable hash of a string, to scope the CSS of a theme. */\nexport function hashString(value: string): string {\n    let hash = 5381;\n    for (let index = 0; index < value.length; index += 1) {\n        hash = (hash * 33) ^ value.charCodeAt(index);\n    }\n    return (hash >>> 0).toString(36);\n}\n\n/**\n * The CSS of a theme, scoped to the roots that carry `data-panneau-theme=\"<scope>\"`. Its rules are\n * more specific than the default tokens, and dark overrides more specific than light ones. Token\n * names must be plain identifiers, and values can't contain `{`, `}`, `;` or `<`: other entries are\n * ignored.\n */\nexport function getThemeCss(theme: Theme, scope: string): string {\n    const root = `[data-panneau-theme=\"${scope}\"]`;\n    const light = declarations(theme.tokens);\n    const dark = theme.dark !== undefined ? declarations(theme.dark) : '';\n    return [\n        light !== '' ? `${root}{${light}}` : '',\n        dark !== '' ? `${root}[data-color-scheme=\"dark\"]{${dark}}` : '',\n        dark !== ''\n            ? `@media (prefers-color-scheme: dark){${root}[data-color-scheme=\"auto\"]{${dark}}}`\n            : '',\n    ].join('');\n}\n"],"mappings":";AAeA,SAAS,aAAa,QAAwC;CAC1D,OAAO,OAAO,QAAQ,MAAM,CAAC,CACxB,QAAQ,CAAC,MAAM,WAAW,mBAAmB,KAAK,IAAI,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CACjF,KAAK,CAAC,MAAM,WAAW,KAAK,KAAI,GAAI,MAAK,EAAG,CAAC,CAC7C,KAAK,EAAE;AAChB;;AAGA,SAAgB,WAAW,OAAuB;CAC9C,IAAI,OAAO;CACX,KAAK,IAAI,QAAQ,GAAG,QAAQ,MAAM,QAAQ,SAAS,GAC/C,OAAQ,OAAO,KAAM,MAAM,WAAW,KAAK;CAE/C,QAAQ,SAAS,EAAA,CAAG,SAAS,EAAE;AACnC;;;;;;;AAQA,SAAgB,YAAY,OAAc,OAAuB;CAC7D,MAAM,OAAO,wBAAwB,MAAK;CAC1C,MAAM,QAAQ,aAAa,MAAM,MAAM;CACvC,MAAM,OAAO,MAAM,SAAS,KAAA,IAAY,aAAa,MAAM,IAAI,IAAI;CACnE,OAAO;EACH,UAAU,KAAK,GAAG,KAAI,GAAI,MAAK,KAAM;EACrC,SAAS,KAAK,GAAG,KAAI,6BAA8B,KAAI,KAAM;EAC7D,SAAS,KACH,uCAAuC,KAAI,6BAA8B,KAAI,MAC7E;CAAE,CACX,CAAC,KAAK,EAAE;AACb"}