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

package/dist/root/PanneauRoot.js

@@ -0,0 +1,84 @@
+import { cx } from "../utils/cx.js";
+import { getThemeCss, hashString } from "../theme/theme.js";
+import { ToastProvider } from "../toast/Toast.js";
+import PanneauRoot_module_default from "./PanneauRoot.module.js";
+import { I18nProvider } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getPanneauMessages } from "@panneau/intl";
+import { createContext, use, useState } from "react";
+import { IntlContext, IntlProvider } from "react-intl";
+//#region src/root/PanneauRoot.tsx
+/** `undefined` outside of a root, `null` while the root's container isn't mounted yet. */
+var PortalContext = createContext(void 0);
+/**
+* The element overlays render into: the closest `PanneauRoot`'s, or `undefined` for the body
+* without a root. It is `null` during the first render of a root: overlays wait for it, since
+* React Aria hides everything outside of a modal from assistive technologies when it opens.
+*/
+function usePortalContainer() {
+	return use(PortalContext);
+}
+/**
+* An `IntlProvider` with Panneau's messages in a locale, for a root without one above it. A locale
+* Panneau doesn't translate gets English, so that react-intl doesn't report every message as
+* missing.
+*/
+function PanneauIntlProvider({ locale = "en", children }) {
+	const messages = getPanneauMessages(locale);
+	const translated = Object.keys(messages).length > 0;
+	return /* @__PURE__ */ jsx(IntlProvider, {
+		locale: translated ? locale : "en",
+		defaultLocale: "en",
+		messages: translated ? messages : getPanneauMessages("en"),
+		children
+	});
+}
+/**
+* The root of every Panneau interface. It scopes the base stylesheet and the design tokens to its
+* element (no global CSS), applies a theme and a color scheme, and hosts overlays and toasts so
+* that they get the tokens too. Panneau components must render inside one. A project can override
+* any token with its own class on the root. Without an `IntlProvider` above it, it provides one
+* with Panneau's messages in its `locale`.
+*/
+function PanneauRoot({ theme = null, colorScheme = "light", locale, className, children, ...props }) {
+	const intl = use(IntlContext);
+	const [container, setContainer] = useState(null);
+	const css = theme !== null ? getThemeCss(theme, "§") : "";
+	const scope = css !== "" ? hashString(css) : void 0;
+	const root = /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cx(PanneauRoot_module_default.root, className),
+		"data-color-scheme": colorScheme,
+		"data-panneau-theme": scope,
+		children: [scope !== void 0 ? /* @__PURE__ */ jsx("style", {
+			href: `panneau-theme-${scope}`,
+			precedence: "panneau",
+			children: css.replaceAll("§", scope)
+		}) : null, /* @__PURE__ */ jsxs(I18nProvider, {
+			locale: locale ?? intl?.locale,
+			children: [/* @__PURE__ */ jsx(PortalContext, {
+				value: container,
+				children: /* @__PURE__ */ jsx(ToastProvider, {
+					regionClassName: PanneauRoot_module_default.root,
+					regionProps: {
+						"data-color-scheme": colorScheme,
+						"data-panneau-theme": scope
+					},
+					children
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				ref: setContainer,
+				className: PanneauRoot_module_default.portal
+			})]
+		})]
+	});
+	if (intl === null || intl === void 0) return /* @__PURE__ */ jsx(PanneauIntlProvider, {
+		locale,
+		children: root
+	});
+	return root;
+}
+//#endregion
+export { PanneauRoot, usePortalContainer };
+
+//# sourceMappingURL=PanneauRoot.js.map

package/dist/root/PanneauRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanneauRoot.js","names":["styles"],"sources":["../../src/root/PanneauRoot.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, createContext, use, useState } from 'react';\nimport { I18nProvider } from 'react-aria-components';\nimport { IntlContext, IntlProvider, type IntlShape } from 'react-intl';\n\nimport { getPanneauMessages } from '@panneau/intl';\n\nimport { type ColorScheme, type Theme, getThemeCss, hashString } from '../theme/theme';\nimport { ToastProvider } from '../toast/Toast';\nimport { cx } from '../utils/cx';\nimport styles from './PanneauRoot.module.css';\n\nexport interface PanneauRootProps extends HTMLAttributes<HTMLDivElement> {\n    /** Tokens that override the default theme: `bootstrapTheme`, or a project's own. */\n    theme?: Theme | null;\n    /** Defaults to `light`. `auto` follows the system setting. */\n    colorScheme?: ColorScheme;\n    /**\n     * Locale of dates and numbers in React Aria components. Defaults to the react-intl locale, or\n     * to the browser's without an `IntlProvider`.\n     *\n     * Without an `IntlProvider` above it, the root provides one, with the messages of every Panneau\n     * package in this locale (English without a locale, or for a locale Panneau doesn't translate).\n     * An app with its own `IntlProvider` adds them with `withPanneauMessages()` from\n     * `@panneau/intl`.\n     */\n    locale?: string;\n    children?: ReactNode;\n}\n\n/** `undefined` outside of a root, `null` while the root's container isn't mounted yet. */\nconst PortalContext = createContext<Element | null | undefined>(undefined);\n\n/**\n * The element overlays render into: the closest `PanneauRoot`'s, or `undefined` for the body\n * without a root. It is `null` during the first render of a root: overlays wait for it, since\n * React Aria hides everything outside of a modal from assistive technologies when it opens.\n */\nexport function usePortalContainer(): Element | null | undefined {\n    return use(PortalContext);\n}\n\n/**\n * An `IntlProvider` with Panneau's messages in a locale, for a root without one above it. A locale\n * Panneau doesn't translate gets English, so that react-intl doesn't report every message as\n * missing.\n */\nfunction PanneauIntlProvider({\n    locale = 'en',\n    children,\n}: {\n    locale?: string;\n    children: ReactNode;\n}) {\n    const messages = getPanneauMessages(locale);\n    const translated = Object.keys(messages).length > 0;\n    return (\n        <IntlProvider\n            locale={translated ? locale : 'en'}\n            defaultLocale=\"en\"\n            messages={translated ? messages : getPanneauMessages('en')}\n        >\n            {children}\n        </IntlProvider>\n    );\n}\n\n/**\n * The root of every Panneau interface. It scopes the base stylesheet and the design tokens to its\n * element (no global CSS), applies a theme and a color scheme, and hosts overlays and toasts so\n * that they get the tokens too. Panneau components must render inside one. A project can override\n * any token with its own class on the root. Without an `IntlProvider` above it, it provides one\n * with Panneau's messages in its `locale`.\n */\nexport function PanneauRoot({\n    theme = null,\n    colorScheme = 'light',\n    locale,\n    className,\n    children,\n    ...props\n}: PanneauRootProps) {\n    const intl = use(IntlContext) as IntlShape | null | undefined;\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n    const css = theme !== null ? getThemeCss(theme, '§') : '';\n    const scope = css !== '' ? hashString(css) : undefined;\n    const root = (\n        <div\n            {...props}\n            className={cx(styles.root, className)}\n            data-color-scheme={colorScheme}\n            data-panneau-theme={scope}\n        >\n            {scope !== undefined ? (\n                <style href={`panneau-theme-${scope}`} precedence=\"panneau\">\n                    {css.replaceAll('§', scope)}\n                </style>\n            ) : null}\n            <I18nProvider locale={locale ?? intl?.locale}>\n                <PortalContext value={container}>\n                    <ToastProvider\n                        regionClassName={styles.root}\n                        regionProps={{\n                            'data-color-scheme': colorScheme,\n                            'data-panneau-theme': scope,\n                        }}\n                    >\n                        {children}\n                    </ToastProvider>\n                </PortalContext>\n                <div ref={setContainer} className={styles.portal} />\n            </I18nProvider>\n        </div>\n    );\n    if (intl === null || intl === undefined) {\n        return <PanneauIntlProvider locale={locale}>{root}</PanneauIntlProvider>;\n    }\n    return root;\n}\n"],"mappings":";;;;;;;;;;;AA8BA,IAAM,gBAAgB,cAA0C,KAAA,CAAS;;;;;;AAOzE,SAAgB,qBAAiD;CAC7D,OAAO,IAAI,aAAa;AAC5B;;;;;;AAOA,SAAS,oBAAoB,EACzB,SAAS,MACT,YAID;CACC,MAAM,WAAW,mBAAmB,MAAM;CAC1C,MAAM,aAAa,OAAO,KAAK,QAAQ,CAAC,CAAC,SAAS;CAClD,OACI,oBAAC,cAAD;EACI,QAAQ,aAAa,SAAS;EAC9B,eAAc;EACd,UAAU,aAAa,WAAW,mBAAmB,IAAI;EAExD;CACS,CAAA;AAEtB;;;;;;;;AASA,SAAgB,YAAY,EACxB,QAAQ,MACR,cAAc,SACd,QACA,WACA,UACA,GAAG,SACc;CACjB,MAAM,OAAO,IAAI,WAAW;CAC5B,MAAM,CAAC,WAAW,gBAAgB,SAAgC,IAAI;CACtE,MAAM,MAAM,UAAU,OAAO,YAAY,OAAO,GAAG,IAAI;CACvD,MAAM,QAAQ,QAAQ,KAAK,WAAW,GAAG,IAAI,KAAA;CAC7C,MAAM,OACF,qBAAC,OAAD;EACI,GAAI;EACJ,WAAW,GAAGA,2BAAO,MAAM,SAAS;EACpC,qBAAmB;EACnB,sBAAoB;EAJxB,UAAA,CAMK,UAAU,KAAA,IACP,oBAAC,SAAD;GAAO,MAAM,iBAAiB;GAAS,YAAW;GAC7C,UAAA,IAAI,WAAW,KAAK,KAAK;EACvB,CAAA,IACP,MACJ,qBAAC,cAAD;GAAc,QAAQ,UAAU,MAAM;GAAtC,UAAA,CACI,oBAAC,eAAD;IAAe,OAAO;IAClB,UAAA,oBAAC,eAAD;KACI,iBAAiBA,2BAAO;KACxB,aAAa;MACT,qBAAqB;MACrB,sBAAsB;KAC1B;KAEC;IACU,CAAA;GACJ,CAAA,GACf,oBAAC,OAAD;IAAK,KAAK;IAAc,WAAWA,2BAAO;GAAO,CAAA,CACvC;EACb,CAAA,CAAA;;CAET,IAAI,SAAS,QAAQ,SAAS,KAAA,GAC1B,OAAO,oBAAC,qBAAD;EAA6B;EAAS,UAAA;CAA0B,CAAA;CAE3E,OAAO;AACX"}

package/dist/root/PanneauRoot.module.js

@@ -0,0 +1,12 @@
+import "./PanneauRoot.css";
+//#region src/root/PanneauRoot.module.css
+var root = "panneau-root--wA35w";
+var portal = "panneau-portal-keLcJN";
+var PanneauRoot_module_default = {
+	root,
+	portal
+};
+//#endregion
+export { PanneauRoot_module_default as default, portal, root };
+
+//# sourceMappingURL=PanneauRoot.module.js.map

package/dist/root/PanneauRoot.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanneauRoot.module.js","names":[],"sources":["../../src/root/PanneauRoot.module.css"],"sourcesContent":["/*\n * Design tokens of the default theme, and the base stylesheet of Panneau. Everything is scoped to\n * the root element: nothing here applies outside of it (decision 0005).\n *\n * Defaults are wrapped in :where() so that they have no specificity: a theme, or a project's own\n * class on the root, overrides any token without fighting the cascade.\n */\n\n:where(.root) {\n    /* Surfaces */\n    --panneau-color-bg: #ffffff;\n    --panneau-color-surface: #ffffff;\n    --panneau-color-surface-sunken: #f4f4f5;\n    --panneau-color-surface-raised: #ffffff;\n    --panneau-color-hover: rgb(24 24 27 / 0.06);\n    --panneau-color-pressed: rgb(24 24 27 / 0.1);\n    --panneau-color-backdrop: rgb(9 9 11 / 0.45);\n\n    /* Text */\n    --panneau-color-text: #18181b;\n    --panneau-color-text-muted: #52525b;\n    --panneau-color-link: #1d4ed8;\n\n    /* Borders: separators, and the outline of controls (3:1 against the surface) */\n    --panneau-color-border: #e4e4e7;\n    --panneau-color-border-control: #8b8b94;\n\n    /* Accent: primary buttons, checked controls, selection */\n    --panneau-color-accent: #18181b;\n    --panneau-color-accent-hover: #3f3f46;\n    --panneau-color-accent-text: #ffffff;\n    --panneau-color-accent-subtle: #f4f4f5;\n    --panneau-color-focus: #2563eb;\n\n    /* Tones: text on surfaces, subtle backgrounds, borders */\n    --panneau-color-danger: #b91c1c;\n    --panneau-color-danger-subtle: #fef2f2;\n    --panneau-color-danger-border: #fca5a5;\n    --panneau-color-danger-solid: #b91c1c;\n    --panneau-color-danger-solid-hover: #991b1b;\n    --panneau-color-danger-solid-text: #ffffff;\n    --panneau-color-success: #15803d;\n    --panneau-color-success-subtle: #f0fdf4;\n    --panneau-color-success-border: #86efac;\n    --panneau-color-warning: #a16207;\n    --panneau-color-warning-subtle: #fefce8;\n    --panneau-color-warning-border: #fcd34d;\n    --panneau-color-info: #1d4ed8;\n    --panneau-color-info-subtle: #eff6ff;\n    --panneau-color-info-border: #93c5fd;\n\n    /* Typography */\n    --panneau-font-family:\n        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n    --panneau-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n    --panneau-font-size-xs: 0.75rem;\n    --panneau-font-size-sm: 0.8125rem;\n    --panneau-font-size-md: 0.875rem;\n    --panneau-font-size-lg: 1rem;\n    --panneau-font-size-xl: 1.25rem;\n    --panneau-font-size-control: 0.875rem;\n    --panneau-line-height: 1.5;\n    --panneau-line-height-tight: 1.25;\n    --panneau-font-weight-normal: 400;\n    --panneau-font-weight-medium: 500;\n    --panneau-font-weight-bold: 600;\n\n    /* Spacing, on a 4px scale */\n    --panneau-space-1: 0.25rem;\n    --panneau-space-2: 0.5rem;\n    --panneau-space-3: 0.75rem;\n    --panneau-space-4: 1rem;\n    --panneau-space-5: 1.25rem;\n    --panneau-space-6: 1.5rem;\n    --panneau-space-8: 2rem;\n    --panneau-space-10: 2.5rem;\n\n    /* Shapes */\n    --panneau-radius-sm: 0.25rem;\n    --panneau-radius-md: 0.375rem;\n    --panneau-radius-lg: 0.5rem;\n    --panneau-radius-full: 9999px;\n    --panneau-border-width: 1px;\n    --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);\n    --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.08), 0 4px 12px rgb(0 0 0 / 0.08);\n    --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.08), 0 16px 40px rgb(0 0 0 / 0.16);\n\n    /* Controls */\n    --panneau-control-height: 2.25rem;\n    --panneau-control-height-sm: 1.875rem;\n    --panneau-focus-width: 2px;\n\n    /* Motion and layers */\n    --panneau-duration: 150ms;\n    --panneau-z-overlay: 1000;\n    --panneau-z-toast: 1100;\n\n    color-scheme: light;\n}\n\n:where(.root[data-color-scheme='dark']) {\n    --panneau-color-bg: #09090b;\n    --panneau-color-surface: #18181b;\n    --panneau-color-surface-sunken: #111113;\n    --panneau-color-surface-raised: #232326;\n    --panneau-color-hover: rgb(255 255 255 / 0.07);\n    --panneau-color-pressed: rgb(255 255 255 / 0.12);\n    --panneau-color-backdrop: rgb(0 0 0 / 0.6);\n    --panneau-color-text: #fafafa;\n    --panneau-color-text-muted: #a1a1aa;\n    --panneau-color-link: #93c5fd;\n    --panneau-color-border: #2e2e33;\n    --panneau-color-border-control: #71717a;\n    --panneau-color-accent: #fafafa;\n    --panneau-color-accent-hover: #d4d4d8;\n    --panneau-color-accent-text: #18181b;\n    --panneau-color-accent-subtle: #2e2e33;\n    --panneau-color-focus: #60a5fa;\n    --panneau-color-danger: #fca5a5;\n    --panneau-color-danger-subtle: rgb(127 29 29 / 0.35);\n    --panneau-color-danger-border: #b91c1c;\n    --panneau-color-danger-solid: #dc2626;\n    --panneau-color-danger-solid-hover: #b91c1c;\n    --panneau-color-danger-solid-text: #ffffff;\n    --panneau-color-success: #86efac;\n    --panneau-color-success-subtle: rgb(20 83 45 / 0.35);\n    --panneau-color-success-border: #15803d;\n    --panneau-color-warning: #fcd34d;\n    --panneau-color-warning-subtle: rgb(113 63 18 / 0.35);\n    --panneau-color-warning-border: #a16207;\n    --panneau-color-info: #93c5fd;\n    --panneau-color-info-subtle: rgb(30 58 138 / 0.35);\n    --panneau-color-info-border: #1d4ed8;\n    --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n    --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.4);\n    --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.4), 0 16px 40px rgb(0 0 0 / 0.5);\n\n    color-scheme: dark;\n}\n\n@media (prefers-color-scheme: dark) {\n    :where(.root[data-color-scheme='auto']) {\n        --panneau-color-bg: #09090b;\n        --panneau-color-surface: #18181b;\n        --panneau-color-surface-sunken: #111113;\n        --panneau-color-surface-raised: #232326;\n        --panneau-color-hover: rgb(255 255 255 / 0.07);\n        --panneau-color-pressed: rgb(255 255 255 / 0.12);\n        --panneau-color-backdrop: rgb(0 0 0 / 0.6);\n        --panneau-color-text: #fafafa;\n        --panneau-color-text-muted: #a1a1aa;\n        --panneau-color-link: #93c5fd;\n        --panneau-color-border: #2e2e33;\n        --panneau-color-border-control: #71717a;\n        --panneau-color-accent: #fafafa;\n        --panneau-color-accent-hover: #d4d4d8;\n        --panneau-color-accent-text: #18181b;\n        --panneau-color-accent-subtle: #2e2e33;\n        --panneau-color-focus: #60a5fa;\n        --panneau-color-danger: #fca5a5;\n        --panneau-color-danger-subtle: rgb(127 29 29 / 0.35);\n        --panneau-color-danger-border: #b91c1c;\n        --panneau-color-danger-solid: #dc2626;\n        --panneau-color-danger-solid-hover: #b91c1c;\n        --panneau-color-danger-solid-text: #ffffff;\n        --panneau-color-success: #86efac;\n        --panneau-color-success-subtle: rgb(20 83 45 / 0.35);\n        --panneau-color-success-border: #15803d;\n        --panneau-color-warning: #fcd34d;\n        --panneau-color-warning-subtle: rgb(113 63 18 / 0.35);\n        --panneau-color-warning-border: #a16207;\n        --panneau-color-info: #93c5fd;\n        --panneau-color-info-subtle: rgb(30 58 138 / 0.35);\n        --panneau-color-info-border: #1d4ed8;\n        --panneau-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);\n        --panneau-shadow-md: 0 1px 3px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.4);\n        --panneau-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.4), 0 16px 40px rgb(0 0 0 / 0.5);\n\n        color-scheme: dark;\n    }\n}\n\n/* Touch screens: larger targets, and 16px text in inputs so that iOS doesn't zoom on focus. */\n@media (pointer: coarse) {\n    :where(.root) {\n        --panneau-control-height: 2.75rem;\n        --panneau-control-height-sm: 2.25rem;\n        --panneau-font-size-control: 1rem;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    :where(.root) {\n        --panneau-duration: 0ms;\n    }\n}\n\n/* Base stylesheet, scoped to the root, without specificity: components and projects override it. */\n\n.root {\n    /* The class is mostly a hook for the rules below, which use :where(). */\n    display: block;\n}\n\n:where(.root) {\n    font-family: var(--panneau-font-family);\n    font-size: var(--panneau-font-size-md);\n    line-height: var(--panneau-line-height);\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-bg);\n    -webkit-font-smoothing: antialiased;\n    -webkit-text-size-adjust: 100%;\n    text-size-adjust: 100%;\n}\n\n:where(.root) :where(*, *::before, *::after) {\n    box-sizing: border-box;\n}\n\n:where(.root) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, fieldset, legend) {\n    margin: 0;\n    padding: 0;\n}\n\n:where(.root) :where(fieldset) {\n    border: 0;\n    min-width: 0;\n}\n\n:where(.root) :where(button, input, select, textarea) {\n    font: inherit;\n    color: inherit;\n}\n\n:where(.root) :where(a) {\n    color: var(--panneau-color-link);\n}\n\n:where(.root) :where(img, svg, video) {\n    max-width: 100%;\n}\n\n:where(.root) :where(:focus-visible) {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n/* Overlays (dialogs, popovers, menus, tooltips) render here, so that they get the tokens. */\n.portal {\n    display: contents;\n}\n"],"mappings":""}

package/dist/select/ListBox.css

@@ -0,0 +1,104 @@
+/* Options of selects, combo boxes and menus. */
+
+.panneau-listBox-8esRuh {
+    display: flex;
+    flex-direction: column;
+    max-height: inherit;
+    padding: var(--panneau-space-1);
+    overflow: auto;
+    outline: none;
+}
+
+.panneau-item-Zfuva9 {
+    display: flex;
+    align-items: center;
+    gap: var(--panneau-space-2);
+    min-height: var(--panneau-control-height-sm);
+    padding: var(--panneau-space-1) var(--panneau-space-2);
+    font-size: var(--panneau-font-size-control);
+    line-height: var(--panneau-line-height-tight);
+    color: var(--panneau-color-text);
+    cursor: default;
+    border-radius: var(--panneau-radius-sm);
+    outline: none;
+}
+
+.panneau-item-Zfuva9[data-focused],
+.panneau-item-Zfuva9[data-hovered] {
+    background-color: var(--panneau-color-hover);
+}
+
+.panneau-item-Zfuva9[data-focus-visible] {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: -2px;
+}
+
+.panneau-item-Zfuva9[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.panneau-item-Zfuva9[data-danger] {
+    color: var(--panneau-color-danger);
+}
+
+.panneau-itemText-P7FtjI {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.panneau-itemLabel-nLMoU0 {
+    overflow-wrap: anywhere;
+}
+
+.panneau-itemDescription--u64pt {
+    font-size: var(--panneau-font-size-sm);
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-check-o1OMYv {
+    flex: 0 0 auto;
+    width: 1rem;
+    color: var(--panneau-color-text);
+}
+
+.panneau-placeholder-Ln7J3j {
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-empty-4GCKMh {
+    padding: var(--panneau-space-2);
+    font-size: var(--panneau-font-size-sm);
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-separator-FjQdQ6 {
+    height: 1px;
+    margin: var(--panneau-space-1) 0;
+    background-color: var(--panneau-color-border);
+}
+
+.panneau-trigger-3OeZeM {
+    justify-content: space-between;
+    gap: var(--panneau-space-2);
+    text-align: start;
+    cursor: pointer;
+}
+
+.panneau-value-J-b74F {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.panneau-value-J-b74F[data-placeholder] {
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-chevron-w-papm {
+    color: var(--panneau-color-text-muted);
+}

package/dist/select/ListBox.module.js

@@ -0,0 +1,32 @@
+import "./ListBox.css";
+//#region src/select/ListBox.module.css
+var listBox = "panneau-listBox-8esRuh";
+var item = "panneau-item-Zfuva9";
+var itemText = "panneau-itemText-P7FtjI";
+var itemLabel = "panneau-itemLabel-nLMoU0";
+var itemDescription = "panneau-itemDescription--u64pt";
+var check = "panneau-check-o1OMYv";
+var placeholder = "panneau-placeholder-Ln7J3j";
+var empty = "panneau-empty-4GCKMh";
+var separator = "panneau-separator-FjQdQ6";
+var trigger = "panneau-trigger-3OeZeM";
+var value = "panneau-value-J-b74F";
+var chevron = "panneau-chevron-w-papm";
+var ListBox_module_default = {
+	listBox,
+	item,
+	itemText,
+	itemLabel,
+	itemDescription,
+	check,
+	placeholder,
+	empty,
+	separator,
+	trigger,
+	value,
+	chevron
+};
+//#endregion
+export { check, chevron, ListBox_module_default as default, empty, item, itemDescription, itemLabel, itemText, listBox, placeholder, separator, trigger, value };
+
+//# sourceMappingURL=ListBox.module.js.map

package/dist/select/ListBox.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBox.module.js","names":[],"sources":["../../src/select/ListBox.module.css"],"sourcesContent":["/* Options of selects, combo boxes and menus. */\n\n.listBox {\n    display: flex;\n    flex-direction: column;\n    max-height: inherit;\n    padding: var(--panneau-space-1);\n    overflow: auto;\n    outline: none;\n}\n\n.item {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    min-height: var(--panneau-control-height-sm);\n    padding: var(--panneau-space-1) var(--panneau-space-2);\n    font-size: var(--panneau-font-size-control);\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-text);\n    cursor: default;\n    border-radius: var(--panneau-radius-sm);\n    outline: none;\n}\n\n.item[data-focused],\n.item[data-hovered] {\n    background-color: var(--panneau-color-hover);\n}\n\n.item[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: -2px;\n}\n\n.item[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n\n.item[data-danger] {\n    color: var(--panneau-color-danger);\n}\n\n.itemText {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    min-width: 0;\n}\n\n.itemLabel {\n    overflow-wrap: anywhere;\n}\n\n.itemDescription {\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.check {\n    flex: 0 0 auto;\n    width: 1rem;\n    color: var(--panneau-color-text);\n}\n\n.placeholder {\n    color: var(--panneau-color-text-muted);\n}\n\n.empty {\n    padding: var(--panneau-space-2);\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n.separator {\n    height: 1px;\n    margin: var(--panneau-space-1) 0;\n    background-color: var(--panneau-color-border);\n}\n\n.trigger {\n    justify-content: space-between;\n    gap: var(--panneau-space-2);\n    text-align: start;\n    cursor: pointer;\n}\n\n.value {\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.value[data-placeholder] {\n    color: var(--panneau-color-text-muted);\n}\n\n.chevron {\n    color: var(--panneau-color-text-muted);\n}\n"],"mappings":""}

package/dist/select/Select.d.ts

@@ -0,0 +1,45 @@
+import { type FieldChromeProps } from '../field/FieldParts';
+/** The value of an option. */
+export type OptionValue = string | number | boolean;
+/** A choice of a select, a radio group or a combo box. Same shape as the protocol's `Option`. */
+export interface SelectOption {
+    value: OptionValue;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+/** Props of both single and multiple selects. */
+export interface SelectBaseProps extends FieldChromeProps {
+    options: readonly SelectOption[];
+    /** Text shown without a value. Defaults to "Select…". */
+    placeholder?: string;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    name?: string;
+    autoFocus?: boolean;
+    onBlur?: () => void;
+    'aria-label'?: string;
+    id?: string;
+    /** Class name of the button that opens the options. */
+    triggerClassName?: string;
+    popoverClassName?: string;
+}
+export interface SingleSelectProps extends SelectBaseProps {
+    multiple?: false;
+    /** The selected value, or `null`. */
+    value?: OptionValue | null;
+    onChange?: (value: OptionValue | null) => void;
+}
+export interface MultipleSelectProps extends SelectBaseProps {
+    /** Several values can be selected. */
+    multiple: true;
+    value?: readonly OptionValue[];
+    onChange?: (value: OptionValue[]) => void;
+}
+export type SelectProps = SingleSelectProps | MultipleSelectProps;
+/**
+ * A dropdown to pick one option, or several with `multiple`. Option values can be strings,
+ * numbers or booleans. Unless `isRequired`, a single select has an empty choice first.
+ */
+export declare function Select(props: SelectProps): import("react").JSX.Element;
+//# sourceMappingURL=Select.d.ts.map

package/dist/select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/select/Select.tsx"],"names":[],"mappings":"AAWA,OAAO,EACH,KAAK,gBAAgB,EAKxB,MAAM,qBAAqB,CAAC;AAQ7B,8BAA8B;AAC9B,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAEpD,iGAAiG;AACjG,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,iDAAiD;AACjD,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACrD,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;IACjC,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,qCAAqC;IACrC,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAClD;AAED,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IACxD,sCAAsC;IACtC,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,WAAW,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;CAC7C;AAED,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAgBlE;;;GAGG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,+BAsIxC"}

package/dist/select/Select.js

@@ -0,0 +1,136 @@
+import { cx } from "../utils/cx.js";
+import { Icon } from "../icon/Icon.js";
+import { messages } from "../intl/messages.js";
+import { usePanneauIntl } from "../intl/usePanneauIntl.js";
+import Field_module_default from "../field/Field.module.js";
+import { FieldDescription, FieldErrors, FieldLabel } from "../field/FieldParts.js";
+import { PopoverSurface } from "../popover/Popover.js";
+import ListBox_module_default from "./ListBox.module.js";
+import { Check, ChevronDown } from "lucide-react";
+import { Button, ListBox, ListBoxItem, Select, SelectValue, Text } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/select/Select.tsx
+var EMPTY_KEY = "__panneau_empty__";
+function keyOf(options, value) {
+	const index = options.findIndex((option) => option.value === value);
+	return index === -1 ? null : String(index);
+}
+function valueOf(options, key) {
+	if (key === null || key === EMPTY_KEY) return null;
+	return options[Number(key)]?.value ?? null;
+}
+/**
+* A dropdown to pick one option, or several with `multiple`. Option values can be strings,
+* numbers or booleans. Unless `isRequired`, a single select has an empty choice first.
+*/
+function Select$1(props) {
+	const intl = usePanneauIntl();
+	const { options, label, description, errors = [], placeholder = intl.formatMessage(messages.selectPlaceholder), isRequired = false, isDisabled, name, autoFocus, onBlur, id, className, labelClassName, descriptionClassName, errorsClassName, triggerClassName, popoverClassName } = props;
+	const invalid = errors.length > 0;
+	const items = options.map((option, index) => ({
+		...option,
+		key: String(index)
+	}));
+	const withEmpty = props.multiple !== true && !isRequired;
+	const shared = {
+		id,
+		name,
+		autoFocus,
+		isDisabled,
+		isRequired,
+		isInvalid: invalid,
+		placeholder,
+		"aria-label": props["aria-label"],
+		validationBehavior: "aria",
+		onBlur: onBlur !== void 0 ? () => onBlur() : void 0,
+		disabledKeys: items.filter((item) => item.disabled === true).map((item_0) => item_0.key),
+		className: cx(Field_module_default.field, className)
+	};
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(FieldLabel, {
+			isRequired,
+			className: labelClassName,
+			children: label
+		}),
+		/* @__PURE__ */ jsxs(Button, {
+			className: cx(Field_module_default.control, ListBox_module_default.trigger, triggerClassName),
+			children: [/* @__PURE__ */ jsx(SelectValue, { className: ListBox_module_default.value }), /* @__PURE__ */ jsx(Icon, {
+				icon: ChevronDown,
+				className: ListBox_module_default.chevron
+			})]
+		}),
+		/* @__PURE__ */ jsx(FieldDescription, {
+			className: descriptionClassName,
+			children: description
+		}),
+		/* @__PURE__ */ jsx(FieldErrors, {
+			errors,
+			className: errorsClassName
+		}),
+		/* @__PURE__ */ jsx(PopoverSurface, {
+			className: popoverClassName,
+			children: /* @__PURE__ */ jsxs(ListBox, {
+				className: ListBox_module_default.listBox,
+				children: [withEmpty ? /* @__PURE__ */ jsxs(ListBoxItem, {
+					id: EMPTY_KEY,
+					textValue: placeholder,
+					className: ListBox_module_default.item,
+					children: [/* @__PURE__ */ jsx("span", { className: ListBox_module_default.check }), /* @__PURE__ */ jsx("span", {
+						className: ListBox_module_default.placeholder,
+						children: placeholder
+					})]
+				}) : null, items.map((item_1) => /* @__PURE__ */ jsx(ListBoxItem, {
+					id: item_1.key,
+					textValue: item_1.label,
+					className: ListBox_module_default.item,
+					children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: ListBox_module_default.check,
+						children: isSelected ? /* @__PURE__ */ jsx(Icon, {
+							icon: Check,
+							size: "sm"
+						}) : null
+					}), /* @__PURE__ */ jsxs("span", {
+						className: ListBox_module_default.itemText,
+						children: [/* @__PURE__ */ jsx(Text, {
+							slot: "label",
+							className: ListBox_module_default.itemLabel,
+							children: item_1.label
+						}), item_1.description !== void 0 ? /* @__PURE__ */ jsx(Text, {
+							slot: "description",
+							className: ListBox_module_default.itemDescription,
+							children: item_1.description
+						}) : null]
+					})] })
+				}, item_1.key))]
+			})
+		})
+	] });
+	if (props.multiple === true) {
+		const { value, onChange } = props;
+		return /* @__PURE__ */ jsx(Select, {
+			...shared,
+			selectionMode: "multiple",
+			value: value !== void 0 ? value.flatMap((item_2) => {
+				const key = keyOf(options, item_2);
+				return key !== null ? [key] : [];
+			}) : void 0,
+			onChange: (keys) => onChange?.(keys.flatMap((key_0) => {
+				const item_3 = valueOf(options, key_0);
+				return item_3 !== null ? [item_3] : [];
+			})),
+			children: content
+		});
+	}
+	const { value: value_0, onChange: onChange_0 } = props;
+	return /* @__PURE__ */ jsx(Select, {
+		...shared,
+		selectionMode: "single",
+		value: value_0 !== void 0 ? value_0 !== null ? keyOf(options, value_0) : null : void 0,
+		onChange: (key_1) => onChange_0?.(valueOf(options, key_1)),
+		children: content
+	});
+}
+//#endregion
+export { Select$1 as Select };
+
+//# sourceMappingURL=Select.js.map

package/dist/select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","names":["item","key","value","onChange","Select","fieldStyles","_Fragment","styles","AriaSelect"],"sources":["../../src/select/Select.tsx"],"sourcesContent":["import { Check, ChevronDown } from 'lucide-react';\nimport type { Key } from 'react-aria-components';\nimport {\n    Select as AriaSelect,\n    Button,\n    ListBox,\n    ListBoxItem,\n    SelectValue,\n    Text,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport { Icon } from '../icon/Icon';\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { PopoverSurface } from '../popover/Popover';\nimport { cx } from '../utils/cx';\nimport styles from './ListBox.module.css';\n\n/** The value of an option. */\nexport type OptionValue = string | number | boolean;\n\n/** A choice of a select, a radio group or a combo box. Same shape as the protocol's `Option`. */\nexport interface SelectOption {\n    value: OptionValue;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n}\n\n/** Props of both single and multiple selects. */\nexport interface SelectBaseProps extends FieldChromeProps {\n    options: readonly SelectOption[];\n    /** Text shown without a value. Defaults to \"Select…\". */\n    placeholder?: string;\n    isRequired?: boolean;\n    isDisabled?: boolean;\n    name?: string;\n    autoFocus?: boolean;\n    onBlur?: () => void;\n    'aria-label'?: string;\n    id?: string;\n    /** Class name of the button that opens the options. */\n    triggerClassName?: string;\n    popoverClassName?: string;\n}\n\nexport interface SingleSelectProps extends SelectBaseProps {\n    multiple?: false;\n    /** The selected value, or `null`. */\n    value?: OptionValue | null;\n    onChange?: (value: OptionValue | null) => void;\n}\n\nexport interface MultipleSelectProps extends SelectBaseProps {\n    /** Several values can be selected. */\n    multiple: true;\n    value?: readonly OptionValue[];\n    onChange?: (value: OptionValue[]) => void;\n}\n\nexport type SelectProps = SingleSelectProps | MultipleSelectProps;\n\nconst EMPTY_KEY = '__panneau_empty__';\n\nfunction keyOf(options: readonly SelectOption[], value: OptionValue): Key | null {\n    const index = options.findIndex((option) => option.value === value);\n    return index === -1 ? null : String(index);\n}\n\nfunction valueOf(options: readonly SelectOption[], key: Key | null): OptionValue | null {\n    if (key === null || key === EMPTY_KEY) {\n        return null;\n    }\n    return options[Number(key)]?.value ?? null;\n}\n\n/**\n * A dropdown to pick one option, or several with `multiple`. Option values can be strings,\n * numbers or booleans. Unless `isRequired`, a single select has an empty choice first.\n */\nexport function Select(props: SelectProps) {\n    const intl = usePanneauIntl();\n    const {\n        options,\n        label,\n        description,\n        errors = [],\n        placeholder = intl.formatMessage(messages.selectPlaceholder),\n        isRequired = false,\n        isDisabled,\n        name,\n        autoFocus,\n        onBlur,\n        id,\n        className,\n        labelClassName,\n        descriptionClassName,\n        errorsClassName,\n        triggerClassName,\n        popoverClassName,\n    } = props;\n    const invalid = errors.length > 0;\n    const items = options.map((option, index) => ({ ...option, key: String(index) }));\n    const withEmpty = props.multiple !== true && !isRequired;\n\n    const shared = {\n        id,\n        name,\n        autoFocus,\n        isDisabled,\n        isRequired,\n        isInvalid: invalid,\n        placeholder,\n        'aria-label': props['aria-label'],\n        validationBehavior: 'aria' as const,\n        onBlur: onBlur !== undefined ? () => onBlur() : undefined,\n        disabledKeys: items.filter((item) => item.disabled === true).map((item) => item.key),\n        className: cx(fieldStyles.field, className),\n    };\n\n    const content = (\n        <>\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <Button className={cx(fieldStyles.control, styles.trigger, triggerClassName)}>\n                <SelectValue className={styles.value} />\n                <Icon icon={ChevronDown} className={styles.chevron} />\n            </Button>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n            <PopoverSurface className={popoverClassName}>\n                <ListBox className={styles.listBox}>\n                    {withEmpty ? (\n                        <ListBoxItem id={EMPTY_KEY} textValue={placeholder} className={styles.item}>\n                            <span className={styles.check} />\n                            <span className={styles.placeholder}>{placeholder}</span>\n                        </ListBoxItem>\n                    ) : null}\n                    {items.map((item) => (\n                        <ListBoxItem\n                            key={item.key}\n                            id={item.key}\n                            textValue={item.label}\n                            className={styles.item}\n                        >\n                            {({ isSelected }) => (\n                                <>\n                                    <span className={styles.check}>\n                                        {isSelected ? <Icon icon={Check} size=\"sm\" /> : null}\n                                    </span>\n                                    <span className={styles.itemText}>\n                                        <Text slot=\"label\" className={styles.itemLabel}>\n                                            {item.label}\n                                        </Text>\n                                        {item.description !== undefined ? (\n                                            <Text\n                                                slot=\"description\"\n                                                className={styles.itemDescription}\n                                            >\n                                                {item.description}\n                                            </Text>\n                                        ) : null}\n                                    </span>\n                                </>\n                            )}\n                        </ListBoxItem>\n                    ))}\n                </ListBox>\n            </PopoverSurface>\n        </>\n    );\n\n    if (props.multiple === true) {\n        const { value, onChange } = props;\n        return (\n            <AriaSelect\n                {...shared}\n                selectionMode=\"multiple\"\n                value={\n                    value !== undefined\n                        ? value.flatMap((item) => {\n                              const key = keyOf(options, item);\n                              return key !== null ? [key] : [];\n                          })\n                        : undefined\n                }\n                onChange={(keys) =>\n                    onChange?.(\n                        keys.flatMap((key) => {\n                            const item = valueOf(options, key);\n                            return item !== null ? [item] : [];\n                        }),\n                    )\n                }\n            >\n                {content}\n            </AriaSelect>\n        );\n    }\n\n    const { value, onChange } = props;\n    return (\n        <AriaSelect\n            {...shared}\n            selectionMode=\"single\"\n            value={\n                value !== undefined ? (value !== null ? keyOf(options, value) : null) : undefined\n            }\n            onChange={(key) => onChange?.(valueOf(options, key))}\n        >\n            {content}\n        </AriaSelect>\n    );\n}\n"],"mappings":"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"}

package/dist/spinner/Spinner.css

@@ -0,0 +1,40 @@
+.panneau-spinner-iIx6pg {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--panneau-space-2);
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-circle-A2p14W {
+    display: inline-block;
+    flex: 0 0 auto;
+    width: 1.25em;
+    height: 1.25em;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: var(--panneau-radius-full);
+    animation: panneau-spin-qVmYu0 0.7s linear infinite;
+}
+
+.panneau-sm-JoTrRC .panneau-circle-A2p14W {
+    width: 1em;
+    height: 1em;
+}
+
+.panneau-lg-PkO03p .panneau-circle-A2p14W {
+    width: 2em;
+    height: 2em;
+    border-width: 3px;
+}
+
+@keyframes panneau-spin-qVmYu0 {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .panneau-circle-A2p14W {
+        animation-duration: 2s;
+    }
+}

package/dist/spinner/Spinner.d.ts

@@ -0,0 +1,11 @@
+export interface SpinnerProps {
+    /** Accessible label, and visible text with `showLabel`. Defaults to "Loading…". */
+    label?: string;
+    /** Shows the label next to the spinner. */
+    showLabel?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+/** An indeterminate progress indicator, announced as loading. */
+export declare function Spinner({ label, showLabel, size, className }: SpinnerProps): import("react").JSX.Element;
+//# sourceMappingURL=Spinner.d.ts.map

package/dist/spinner/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/spinner/Spinner.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,YAAY;IACzB,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,iEAAiE;AACjE,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,SAAiB,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE,YAAY,+BAazF"}

package/dist/spinner/Spinner.js

@@ -0,0 +1,25 @@
+import { cx } from "../utils/cx.js";
+import { messages } from "../intl/messages.js";
+import { usePanneauIntl } from "../intl/usePanneauIntl.js";
+import Spinner_module_default from "./Spinner.module.js";
+import { ProgressBar } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/spinner/Spinner.tsx
+/** An indeterminate progress indicator, announced as loading. */
+function Spinner({ label, showLabel = false, size = "md", className }) {
+	const intl = usePanneauIntl();
+	const text = label ?? intl.formatMessage(messages.loading);
+	return /* @__PURE__ */ jsxs(ProgressBar, {
+		isIndeterminate: true,
+		"aria-label": text,
+		className: cx(Spinner_module_default.spinner, Spinner_module_default[size], className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: Spinner_module_default.circle,
+			"aria-hidden": "true"
+		}), showLabel ? /* @__PURE__ */ jsx("span", { children: text }) : null]
+	});
+}
+//#endregion
+export { Spinner };
+
+//# sourceMappingURL=Spinner.js.map

package/dist/spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","names":["styles"],"sources":["../../src/spinner/Spinner.tsx"],"sourcesContent":["import { ProgressBar } from 'react-aria-components';\n\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { cx } from '../utils/cx';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps {\n    /** Accessible label, and visible text with `showLabel`. Defaults to \"Loading…\". */\n    label?: string;\n    /** Shows the label next to the spinner. */\n    showLabel?: boolean;\n    size?: 'sm' | 'md' | 'lg';\n    className?: string;\n}\n\n/** An indeterminate progress indicator, announced as loading. */\nexport function Spinner({ label, showLabel = false, size = 'md', className }: SpinnerProps) {\n    const intl = usePanneauIntl();\n    const text = label ?? intl.formatMessage(messages.loading);\n    return (\n        <ProgressBar\n            isIndeterminate\n            aria-label={text}\n            className={cx(styles.spinner, styles[size], className)}\n        >\n            <span className={styles.circle} aria-hidden=\"true\" />\n            {showLabel ? <span>{text}</span> : null}\n        </ProgressBar>\n    );\n}\n"],"mappings":";;;;;;;;AAiBA,SAAgB,QAAQ,EAAE,OAAO,YAAY,OAAO,OAAO,MAAM,aAA2B;CACxF,MAAM,OAAO,eAAe;CAC5B,MAAM,OAAO,SAAS,KAAK,cAAc,SAAS,OAAO;CACzD,OACI,qBAAC,aAAD;EACI,iBAAA;EACA,cAAY;EACZ,WAAW,GAAGA,uBAAO,SAASA,uBAAO,OAAO,SAAS;EAHzD,UAAA,CAKI,oBAAC,QAAD;GAAM,WAAWA,uBAAO;GAAQ,eAAY;EAAM,CAAA,GACjD,YAAY,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,IAAI,IAC1B;;AAErB"}

package/dist/spinner/Spinner.module.js

@@ -0,0 +1,18 @@
+import "./Spinner.css";
+//#region src/spinner/Spinner.module.css
+var spinner = "panneau-spinner-iIx6pg";
+var circle = "panneau-circle-A2p14W";
+var spin = "panneau-spin-qVmYu0";
+var sm = "panneau-sm-JoTrRC";
+var lg = "panneau-lg-PkO03p";
+var Spinner_module_default = {
+	spinner,
+	circle,
+	spin,
+	sm,
+	lg
+};
+//#endregion
+export { circle, Spinner_module_default as default, lg, sm, spin, spinner };
+
+//# sourceMappingURL=Spinner.module.js.map

package/dist/spinner/Spinner.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.module.js","names":[],"sources":["../../src/spinner/Spinner.module.css"],"sourcesContent":[".spinner {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    color: var(--panneau-color-text-muted);\n}\n\n.circle {\n    display: inline-block;\n    flex: 0 0 auto;\n    width: 1.25em;\n    height: 1.25em;\n    border: 2px solid currentColor;\n    border-right-color: transparent;\n    border-radius: var(--panneau-radius-full);\n    animation: spin 0.7s linear infinite;\n}\n\n.sm .circle {\n    width: 1em;\n    height: 1em;\n}\n\n.lg .circle {\n    width: 2em;\n    height: 2em;\n    border-width: 3px;\n}\n\n@keyframes spin {\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .circle {\n        animation-duration: 2s;\n    }\n}\n"],"mappings":""}