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

package/README.md

@@ -1,3 +1,58 @@
-# Temporary Holding Version
+# @panneau/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Design tokens, themes and accessible primitives of Panneau, built on [React Aria Components](https://react-spectrum.adobe.com/react-aria/). Icons come from [Lucide](https://lucide.dev).
+
+```bash
+npm install @panneau/ui@^5.0.0-alpha.0 react-aria-components react-intl
+```
+
+```tsx
+import { Button, PanneauRoot, TextInput, bootstrapTheme } from '@panneau/ui';
+
+<PanneauRoot theme={bootstrapTheme} colorScheme="auto">
+    <TextInput label="Title" isRequired />
+    <Button variant="primary">Save</Button>
+</PanneauRoot>;
+```
+
+| Export                | Content                                                                         |
+| --------------------- | ------------------------------------------------------------------------------- |
+| `@panneau/ui`         | `PanneauRoot`, themes, the primitives, `Icon`, `useToast()`, `usePanneauIntl()` |
+| `@panneau/ui/locales` | Deprecated: the UI messages by locale, `en` and `fr`. Use `@panneau/intl`       |
+
+## Root, tokens and themes
+
+Every Panneau interface renders inside a `PanneauRoot`. It scopes the base stylesheet and the design tokens (`--panneau-*` CSS variables) to its element: Panneau adds no global CSS to the page. Overlays (dialogs, popovers, menus, tooltips) and toasts render inside it too.
+
+- `colorScheme`: `light` (default), `dark`, or `auto`, which follows the system.
+- `theme`: tokens that override the default theme. `bootstrapTheme` follows a site's Bootstrap 5.3 variables and color mode.
+- A project can also override any token with its own class on the root: `.my-panneau { --panneau-color-accent: #0a58ca; }`.
+
+The default theme and the icon set are explained in [decision 0020](../../docs/decisions/0020-default-theme-and-icons.md).
+
+## Primitives
+
+`Button`, `IconButton`, `TextInput`, `TextArea`, `NumberInput`, `Select` (single or multiple), `ComboBox`, `Checkbox`, `Switch`, `RadioGroup`, `DatePicker`, `TimeInput`, `Fieldset`, `Dialog`, `Popover`, `Menu`, `Tabs`, `Tooltip`, toasts (`useToast()`), `Alert`, `Badge`, `Spinner`, `Card`, `Disclosure` and `Icon`.
+
+- Every component accepts `className`, and `xxxClassName` props for its inner elements (`labelClassName`, `inputClassName`…).
+- Labelled controls take `label`, `description` and `errors` (a list of messages: any message makes the control invalid and describes it).
+- They work on phones: larger touch targets on touch screens, dialogs as bottom sheets, scrolling tabs.
+
+## Messages
+
+Strings go through react-intl, with English defaults.
+
+- **Without an `IntlProvider`**, `PanneauRoot` provides one, with the messages of every Panneau package in its `locale`: `<PanneauRoot locale="fr">` renders in French. Without a `locale`, or with one that Panneau doesn't translate, it renders in English.
+- **With an `IntlProvider`** (an app that uses react-intl for its own strings), the root keeps it and adds nothing. Add the messages of every Panneau package to the app's with [`@panneau/intl`](../intl):
+
+```tsx
+import { withPanneauMessages } from '@panneau/intl';
+
+<IntlProvider locale="fr" messages={withPanneauMessages('fr', appMessages)}>
+```
+
+## Peer dependencies
+
+`react` and `react-dom` 19.2+, `react-aria-components` 1.22+ and `react-intl` 12+.
+
+The package layout, scripts and API reports are explained in [`docs/packages.md`](../../docs/packages.md). Stories: `npm run storybook` at the root of the repository.

package/dist/alert/Alert.css

@@ -0,0 +1,78 @@
+.panneau-alert-YltdMY {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--panneau-space-3);
+    padding: var(--panneau-space-3) var(--panneau-space-4);
+    color: var(--panneau-color-text);
+    background-color: var(--panneau-color-surface-sunken);
+    border: var(--panneau-border-width) solid var(--panneau-color-border);
+    border-radius: var(--panneau-radius-md);
+}
+
+.panneau-success-Z7VQdb {
+    background-color: var(--panneau-color-success-subtle);
+    border-color: var(--panneau-color-success-border);
+}
+
+.panneau-danger-7fFkRR {
+    background-color: var(--panneau-color-danger-subtle);
+    border-color: var(--panneau-color-danger-border);
+}
+
+.panneau-warning-xvkEcQ {
+    background-color: var(--panneau-color-warning-subtle);
+    border-color: var(--panneau-color-warning-border);
+}
+
+.panneau-info-beWi9v {
+    background-color: var(--panneau-color-info-subtle);
+    border-color: var(--panneau-color-info-border);
+}
+
+.panneau-icon-blRAxm {
+    margin-top: 0.125rem;
+    color: var(--panneau-color-text-muted);
+}
+
+.panneau-success-Z7VQdb .panneau-icon-blRAxm {
+    color: var(--panneau-color-success);
+}
+
+.panneau-danger-7fFkRR .panneau-icon-blRAxm {
+    color: var(--panneau-color-danger);
+}
+
+.panneau-warning-xvkEcQ .panneau-icon-blRAxm {
+    color: var(--panneau-color-warning);
+}
+
+.panneau-info-beWi9v .panneau-icon-blRAxm {
+    color: var(--panneau-color-info);
+}
+
+.panneau-content-dNGM-n {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--panneau-space-1);
+    min-width: 0;
+}
+
+.panneau-title-uRgCXb {
+    font-weight: var(--panneau-font-weight-bold);
+}
+
+.panneau-body-2meig0 {
+    overflow-wrap: anywhere;
+}
+
+.panneau-actions-MXSoKc {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--panneau-space-2);
+    margin-top: var(--panneau-space-2);
+}
+
+.panneau-dismiss-LWaGfl {
+    margin: calc(-1 * var(--panneau-space-1)) calc(-1 * var(--panneau-space-2)) 0 0;
+}

package/dist/alert/Alert.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode, Ref } from 'react';
+import { type IconComponent } from '../icon/Icon';
+export type AlertTone = 'neutral' | 'success' | 'danger' | 'warning' | 'info';
+export interface AlertProps {
+    /** Defaults to `neutral`. */
+    tone?: AlertTone;
+    title?: ReactNode;
+    children?: ReactNode;
+    /** Replaces the icon of the tone. `null` hides it. */
+    icon?: IconComponent | null;
+    /** Buttons under the message. */
+    actions?: ReactNode;
+    /** Shows a close button. */
+    onDismiss?: () => void;
+    /**
+     * `alert` announces the message as soon as it appears, for errors that need attention.
+     * `status` announces it politely. Without a role, it is only read in place.
+     */
+    role?: 'alert' | 'status';
+    id?: string;
+    /** Makes the alert focusable, to move focus to it (an error summary). */
+    tabIndex?: number;
+    ref?: Ref<HTMLDivElement>;
+    className?: string;
+    titleClassName?: string;
+    bodyClassName?: string;
+}
+/** A message inside the page: an error summary, a warning, a confirmation. */
+export declare function Alert({ tone, title, children, icon, actions, onDismiss, role, id, tabIndex, ref, className, titleClassName, bodyClassName, }: AlertProps): import("react").JSX.Element;
+//# sourceMappingURL=Alert.d.ts.map

package/dist/alert/Alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/alert/Alert.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAMxD,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAU9E,MAAM,WAAW,UAAU;IACvB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sDAAsD;IACtD,IAAI,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC5B,iCAAiC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,8EAA8E;AAC9E,wBAAgB,KAAK,CAAC,EAClB,IAAgB,EAChB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,IAAI,EACJ,EAAE,EACF,QAAQ,EACR,GAAG,EACH,SAAS,EACT,cAAc,EACd,aAAa,GAChB,EAAE,UAAU,+BAmCZ"}

package/dist/alert/Alert.js

@@ -0,0 +1,64 @@
+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 { IconButton } from "../icon-button/IconButton.js";
+import Alert_module_default from "./Alert.module.js";
+import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/alert/Alert.tsx
+var TONE_ICONS = {
+	neutral: Info,
+	success: CircleCheck,
+	danger: CircleAlert,
+	warning: TriangleAlert,
+	info: Info
+};
+/** A message inside the page: an error summary, a warning, a confirmation. */
+function Alert({ tone = "neutral", title, children, icon, actions, onDismiss, role, id, tabIndex, ref, className, titleClassName, bodyClassName }) {
+	const intl = usePanneauIntl();
+	const shown = icon === void 0 ? TONE_ICONS[tone] : icon;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		id,
+		role,
+		tabIndex,
+		className: cx(Alert_module_default.alert, Alert_module_default[tone], className),
+		children: [
+			shown !== null ? /* @__PURE__ */ jsx(Icon, {
+				icon: shown,
+				size: "lg",
+				className: Alert_module_default.icon
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: Alert_module_default.content,
+				children: [
+					title !== void 0 && title !== null ? /* @__PURE__ */ jsx("div", {
+						className: cx(Alert_module_default.title, titleClassName),
+						children: title
+					}) : null,
+					children !== void 0 && children !== null ? /* @__PURE__ */ jsx("div", {
+						className: cx(Alert_module_default.body, bodyClassName),
+						children
+					}) : null,
+					actions !== void 0 && actions !== null ? /* @__PURE__ */ jsx("div", {
+						className: Alert_module_default.actions,
+						children: actions
+					}) : null
+				]
+			}),
+			onDismiss !== void 0 ? /* @__PURE__ */ jsx(IconButton, {
+				icon: X,
+				size: "sm",
+				label: intl.formatMessage(messages.close),
+				showTooltip: false,
+				onPress: onDismiss,
+				className: Alert_module_default.dismiss
+			}) : null
+		]
+	});
+}
+//#endregion
+export { Alert };
+
+//# sourceMappingURL=Alert.js.map

package/dist/alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","names":["styles"],"sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from 'lucide-react';\nimport type { ReactNode, Ref } from 'react';\n\nimport { IconButton } from '../icon-button/IconButton';\nimport { Icon, type IconComponent } from '../icon/Icon';\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { cx } from '../utils/cx';\nimport styles from './Alert.module.css';\n\nexport type AlertTone = 'neutral' | 'success' | 'danger' | 'warning' | 'info';\n\nconst TONE_ICONS: Record<AlertTone, IconComponent> = {\n    neutral: Info,\n    success: CircleCheck,\n    danger: CircleAlert,\n    warning: TriangleAlert,\n    info: Info,\n};\n\nexport interface AlertProps {\n    /** Defaults to `neutral`. */\n    tone?: AlertTone;\n    title?: ReactNode;\n    children?: ReactNode;\n    /** Replaces the icon of the tone. `null` hides it. */\n    icon?: IconComponent | null;\n    /** Buttons under the message. */\n    actions?: ReactNode;\n    /** Shows a close button. */\n    onDismiss?: () => void;\n    /**\n     * `alert` announces the message as soon as it appears, for errors that need attention.\n     * `status` announces it politely. Without a role, it is only read in place.\n     */\n    role?: 'alert' | 'status';\n    id?: string;\n    /** Makes the alert focusable, to move focus to it (an error summary). */\n    tabIndex?: number;\n    ref?: Ref<HTMLDivElement>;\n    className?: string;\n    titleClassName?: string;\n    bodyClassName?: string;\n}\n\n/** A message inside the page: an error summary, a warning, a confirmation. */\nexport function Alert({\n    tone = 'neutral',\n    title,\n    children,\n    icon,\n    actions,\n    onDismiss,\n    role,\n    id,\n    tabIndex,\n    ref,\n    className,\n    titleClassName,\n    bodyClassName,\n}: AlertProps) {\n    const intl = usePanneauIntl();\n    const shown = icon === undefined ? TONE_ICONS[tone] : icon;\n    return (\n        <div\n            ref={ref}\n            id={id}\n            role={role}\n            tabIndex={tabIndex}\n            className={cx(styles.alert, styles[tone], className)}\n        >\n            {shown !== null ? <Icon icon={shown} size=\"lg\" className={styles.icon} /> : null}\n            <div className={styles.content}>\n                {title !== undefined && title !== null ? (\n                    <div className={cx(styles.title, titleClassName)}>{title}</div>\n                ) : null}\n                {children !== undefined && children !== null ? (\n                    <div className={cx(styles.body, bodyClassName)}>{children}</div>\n                ) : null}\n                {actions !== undefined && actions !== null ? (\n                    <div className={styles.actions}>{actions}</div>\n                ) : null}\n            </div>\n            {onDismiss !== undefined ? (\n                <IconButton\n                    icon={X}\n                    size=\"sm\"\n                    label={intl.formatMessage(messages.close)}\n                    showTooltip={false}\n                    onPress={onDismiss}\n                    className={styles.dismiss}\n                />\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;AAYA,IAAM,aAA+C;CACjD,SAAS;CACT,SAAS;CACT,QAAQ;CACR,SAAS;CACT,MAAM;AACV;;AA4BA,SAAgB,MAAM,EAClB,OAAO,WACP,OACA,UACA,MACA,SACA,WACA,MACA,IACA,UACA,KACA,WACA,gBACA,iBACW;CACX,MAAM,OAAO,eAAe;CAC5B,MAAM,QAAQ,SAAS,KAAA,IAAY,WAAW,QAAQ;CACtD,OACI,qBAAC,OAAD;EACS;EACD;EACE;EACI;EACV,WAAW,GAAGA,qBAAO,OAAOA,qBAAO,OAAO,SAAS;EALvD,UAAA;GAOK,UAAU,OAAO,oBAAC,MAAD;IAAM,MAAM;IAAO,MAAK;IAAK,WAAWA,qBAAO;GAAK,CAAA,IAAM;GAC5E,qBAAC,OAAD;IAAK,WAAWA,qBAAO;IAAvB,UAAA;KACK,UAAU,KAAA,KAAa,UAAU,OAC9B,oBAAC,OAAD;MAAK,WAAW,GAAGA,qBAAO,OAAO,cAAc;MAAI,UAAA;KAAW,CAAA,IAC9D;KACH,aAAa,KAAA,KAAa,aAAa,OACpC,oBAAC,OAAD;MAAK,WAAW,GAAGA,qBAAO,MAAM,aAAa;MAAI;KAAc,CAAA,IAC/D;KACH,YAAY,KAAA,KAAa,YAAY,OAClC,oBAAC,OAAD;MAAK,WAAWA,qBAAO;MAAU,UAAA;KAAa,CAAA,IAC9C;IACH;;GACJ,cAAc,KAAA,IACX,oBAAC,YAAD;IACI,MAAM;IACN,MAAK;IACL,OAAO,KAAK,cAAc,SAAS,KAAK;IACxC,aAAa;IACb,SAAS;IACT,WAAWA,qBAAO;GAAQ,CAAA,IAE9B;EACH;;AAEb"}

package/dist/alert/Alert.module.js

@@ -0,0 +1,30 @@
+import "./Alert.css";
+//#region src/alert/Alert.module.css
+var alert = "panneau-alert-YltdMY";
+var success = "panneau-success-Z7VQdb";
+var danger = "panneau-danger-7fFkRR";
+var warning = "panneau-warning-xvkEcQ";
+var info = "panneau-info-beWi9v";
+var icon = "panneau-icon-blRAxm";
+var content = "panneau-content-dNGM-n";
+var title = "panneau-title-uRgCXb";
+var body = "panneau-body-2meig0";
+var actions = "panneau-actions-MXSoKc";
+var dismiss = "panneau-dismiss-LWaGfl";
+var Alert_module_default = {
+	alert,
+	success,
+	danger,
+	warning,
+	info,
+	icon,
+	content,
+	title,
+	body,
+	actions,
+	dismiss
+};
+//#endregion
+export { actions, alert, body, content, danger, Alert_module_default as default, dismiss, icon, info, success, title, warning };
+
+//# sourceMappingURL=Alert.module.js.map

package/dist/alert/Alert.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.module.js","names":[],"sources":["../../src/alert/Alert.module.css"],"sourcesContent":[".alert {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-3);\n    padding: var(--panneau-space-3) var(--panneau-space-4);\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-surface-sunken);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-md);\n}\n\n.success {\n    background-color: var(--panneau-color-success-subtle);\n    border-color: var(--panneau-color-success-border);\n}\n\n.danger {\n    background-color: var(--panneau-color-danger-subtle);\n    border-color: var(--panneau-color-danger-border);\n}\n\n.warning {\n    background-color: var(--panneau-color-warning-subtle);\n    border-color: var(--panneau-color-warning-border);\n}\n\n.info {\n    background-color: var(--panneau-color-info-subtle);\n    border-color: var(--panneau-color-info-border);\n}\n\n.icon {\n    margin-top: 0.125rem;\n    color: var(--panneau-color-text-muted);\n}\n\n.success .icon {\n    color: var(--panneau-color-success);\n}\n\n.danger .icon {\n    color: var(--panneau-color-danger);\n}\n\n.warning .icon {\n    color: var(--panneau-color-warning);\n}\n\n.info .icon {\n    color: var(--panneau-color-info);\n}\n\n.content {\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n    min-width: 0;\n}\n\n.title {\n    font-weight: var(--panneau-font-weight-bold);\n}\n\n.body {\n    overflow-wrap: anywhere;\n}\n\n.actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--panneau-space-2);\n    margin-top: var(--panneau-space-2);\n}\n\n.dismiss {\n    margin: calc(-1 * var(--panneau-space-1)) calc(-1 * var(--panneau-space-2)) 0 0;\n}\n"],"mappings":""}

package/dist/badge/Badge.css

@@ -0,0 +1,60 @@
+.panneau-badge-ikDSa7 {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--panneau-space-1);
+    min-width: 1.25rem;
+    height: 1.25rem;
+    padding: 0 var(--panneau-space-2);
+    font-size: var(--panneau-font-size-xs);
+    font-weight: var(--panneau-font-weight-medium);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    white-space: nowrap;
+    color: var(--panneau-color-text);
+    background-color: var(--panneau-color-surface-sunken);
+    border: var(--panneau-border-width) solid var(--panneau-color-border);
+    border-radius: var(--panneau-radius-full);
+}
+
+.panneau-success-2NDSCG {
+    color: var(--panneau-color-success);
+    background-color: var(--panneau-color-success-subtle);
+    border-color: var(--panneau-color-success-border);
+}
+
+.panneau-danger-NLo-wP {
+    color: var(--panneau-color-danger);
+    background-color: var(--panneau-color-danger-subtle);
+    border-color: var(--panneau-color-danger-border);
+}
+
+.panneau-warning-3mFhiV {
+    color: var(--panneau-color-warning);
+    background-color: var(--panneau-color-warning-subtle);
+    border-color: var(--panneau-color-warning-border);
+}
+
+.panneau-info-5vE5vu {
+    color: var(--panneau-color-info);
+    background-color: var(--panneau-color-info-subtle);
+    border-color: var(--panneau-color-info-border);
+}
+
+.panneau-accent-cGs8f8 {
+    color: var(--panneau-color-accent-text);
+    background-color: var(--panneau-color-accent);
+    border-color: var(--panneau-color-accent);
+}
+
+.panneau-visuallyHidden-YMPDBq {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+}

package/dist/badge/Badge.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export type BadgeTone = 'neutral' | 'accent' | 'success' | 'danger' | 'warning' | 'info';
+export interface BadgeProps {
+    tone?: BadgeTone;
+    children?: ReactNode;
+    /**
+     * Accessible text, when the visible content isn't enough on its own (a count of errors: "2
+     * errors"). The visible content is then hidden from assistive technologies.
+     */
+    label?: string;
+    className?: string;
+}
+/** A short status or a count. */
+export declare function Badge({ tone, children, label, className }: BadgeProps): import("react").JSX.Element;
+//# sourceMappingURL=Badge.d.ts.map

package/dist/badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAEzF,MAAM,WAAW,UAAU;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,iCAAiC;AACjC,wBAAgB,KAAK,CAAC,EAAE,IAAgB,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,UAAU,+BAajF"}

package/dist/badge/Badge.js

@@ -0,0 +1,21 @@
+import { cx } from "../utils/cx.js";
+import Badge_module_default from "./Badge.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/badge/Badge.tsx
+/** A short status or a count. */
+function Badge({ tone = "neutral", children, label, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cx(Badge_module_default.badge, Badge_module_default[tone], className),
+		children: label !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			children
+		}), /* @__PURE__ */ jsx("span", {
+			className: Badge_module_default.visuallyHidden,
+			children: label
+		})] }) : children
+	});
+}
+//#endregion
+export { Badge };
+
+//# sourceMappingURL=Badge.js.map

package/dist/badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":["styles","_Fragment"],"sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '../utils/cx';\nimport styles from './Badge.module.css';\n\nexport type BadgeTone = 'neutral' | 'accent' | 'success' | 'danger' | 'warning' | 'info';\n\nexport interface BadgeProps {\n    tone?: BadgeTone;\n    children?: ReactNode;\n    /**\n     * Accessible text, when the visible content isn't enough on its own (a count of errors: \"2\n     * errors\"). The visible content is then hidden from assistive technologies.\n     */\n    label?: string;\n    className?: string;\n}\n\n/** A short status or a count. */\nexport function Badge({ tone = 'neutral', children, label, className }: BadgeProps) {\n    return (\n        <span className={cx(styles.badge, styles[tone], className)}>\n            {label !== undefined ? (\n                <>\n                    <span aria-hidden=\"true\">{children}</span>\n                    <span className={styles.visuallyHidden}>{label}</span>\n                </>\n            ) : (\n                children\n            )}\n        </span>\n    );\n}\n"],"mappings":";;;;;AAmBA,SAAgB,MAAM,EAAE,OAAO,WAAW,UAAU,OAAO,aAAyB;CAChF,OACI,oBAAC,QAAD;EAAM,WAAW,GAAGA,qBAAO,OAAOA,qBAAO,OAAO,SAAS;EACpD,UAAA,UAAU,KAAA,IACP,qBAAAC,UAAA,EAAA,UAAA,CACI,oBAAC,QAAD;GAAM,eAAY;GAAQ;EAAe,CAAA,GACzC,oBAAC,QAAD;GAAM,WAAWD,qBAAO;GAAiB,UAAA;EAAY,CAAA,CACzD,EAAA,CAAA,IAEA;CAEF,CAAA;AAEd"}

package/dist/badge/Badge.module.js

@@ -0,0 +1,22 @@
+import "./Badge.css";
+//#region src/badge/Badge.module.css
+var badge = "panneau-badge-ikDSa7";
+var success = "panneau-success-2NDSCG";
+var danger = "panneau-danger-NLo-wP";
+var warning = "panneau-warning-3mFhiV";
+var info = "panneau-info-5vE5vu";
+var accent = "panneau-accent-cGs8f8";
+var visuallyHidden = "panneau-visuallyHidden-YMPDBq";
+var Badge_module_default = {
+	badge,
+	success,
+	danger,
+	warning,
+	info,
+	accent,
+	visuallyHidden
+};
+//#endregion
+export { accent, badge, danger, Badge_module_default as default, info, success, visuallyHidden, warning };
+
+//# sourceMappingURL=Badge.module.js.map

package/dist/badge/Badge.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.module.js","names":[],"sources":["../../src/badge/Badge.module.css"],"sourcesContent":[".badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--panneau-space-1);\n    min-width: 1.25rem;\n    height: 1.25rem;\n    padding: 0 var(--panneau-space-2);\n    font-size: var(--panneau-font-size-xs);\n    font-weight: var(--panneau-font-weight-medium);\n    font-variant-numeric: tabular-nums;\n    line-height: 1;\n    white-space: nowrap;\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-surface-sunken);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-full);\n}\n\n.success {\n    color: var(--panneau-color-success);\n    background-color: var(--panneau-color-success-subtle);\n    border-color: var(--panneau-color-success-border);\n}\n\n.danger {\n    color: var(--panneau-color-danger);\n    background-color: var(--panneau-color-danger-subtle);\n    border-color: var(--panneau-color-danger-border);\n}\n\n.warning {\n    color: var(--panneau-color-warning);\n    background-color: var(--panneau-color-warning-subtle);\n    border-color: var(--panneau-color-warning-border);\n}\n\n.info {\n    color: var(--panneau-color-info);\n    background-color: var(--panneau-color-info-subtle);\n    border-color: var(--panneau-color-info-border);\n}\n\n.accent {\n    color: var(--panneau-color-accent-text);\n    background-color: var(--panneau-color-accent);\n    border-color: var(--panneau-color-accent);\n}\n\n.visuallyHidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n}\n"],"mappings":""}

package/dist/button/Button.css

@@ -0,0 +1,112 @@
+.panneau-button-eiKKZV {
+    position: relative;
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    gap: var(--panneau-space-2);
+    min-height: var(--panneau-control-height);
+    padding: 0 var(--panneau-space-4);
+    font-size: var(--panneau-font-size-md);
+    font-weight: var(--panneau-font-weight-medium);
+    line-height: var(--panneau-line-height-tight);
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    border: var(--panneau-border-width) solid transparent;
+    border-radius: var(--panneau-radius-md);
+    transition:
+        background-color var(--panneau-duration),
+        border-color var(--panneau-duration),
+        color var(--panneau-duration);
+    -webkit-tap-highlight-color: transparent;
+}
+
+.panneau-button-eiKKZV[data-focus-visible] {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 2px;
+}
+
+.panneau-button-eiKKZV[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.55;
+}
+
+.panneau-sm-Y4qjxi {
+    min-height: var(--panneau-control-height-sm);
+    padding: 0 var(--panneau-space-3);
+    font-size: var(--panneau-font-size-sm);
+}
+
+.panneau-fullWidth-TLKFBq {
+    display: flex;
+    width: 100%;
+}
+
+.panneau-primary-EU45ZN {
+    color: var(--panneau-color-accent-text);
+    background-color: var(--panneau-color-accent);
+}
+
+.panneau-primary-EU45ZN[data-hovered],
+.panneau-primary-EU45ZN[data-pressed] {
+    background-color: var(--panneau-color-accent-hover);
+}
+
+.panneau-secondary-5BZ2i9 {
+    color: var(--panneau-color-text);
+    background-color: var(--panneau-color-surface);
+    border-color: var(--panneau-color-border-control);
+}
+
+.panneau-secondary-5BZ2i9[data-hovered] {
+    background-color: var(--panneau-color-hover);
+}
+
+.panneau-secondary-5BZ2i9[data-pressed] {
+    background-color: var(--panneau-color-pressed);
+}
+
+.panneau-ghost-OX4KsD {
+    color: var(--panneau-color-text);
+    background-color: transparent;
+}
+
+.panneau-ghost-OX4KsD[data-hovered] {
+    background-color: var(--panneau-color-hover);
+}
+
+.panneau-ghost-OX4KsD[data-pressed] {
+    background-color: var(--panneau-color-pressed);
+}
+
+.panneau-danger-57n-Hg {
+    color: var(--panneau-color-danger-solid-text);
+    background-color: var(--panneau-color-danger-solid);
+}
+
+.panneau-danger-57n-Hg[data-hovered],
+.panneau-danger-57n-Hg[data-pressed] {
+    background-color: var(--panneau-color-danger-solid-hover);
+}
+
+.panneau-content-SVjwiQ {
+    display: inline-flex;
+    align-items: center;
+    gap: inherit;
+    min-width: 0;
+}
+
+.panneau-pending-j5UroX .panneau-content-SVjwiQ {
+    visibility: hidden;
+}
+
+.panneau-spinner-QToZmM {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: inherit;
+}

package/dist/button/Button.d.ts

@@ -0,0 +1,26 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type ButtonProps as AriaButtonProps } from 'react-aria-components';
+import { type IconComponent } from '../icon/Icon';
+import styles from './Button.module.css';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+export interface ButtonProps extends Omit<AriaButtonProps, 'className' | 'style' | 'children'> {
+    /** Defaults to `secondary`. */
+    variant?: ButtonVariant;
+    size?: 'sm' | 'md';
+    /** Icon before the label. */
+    icon?: IconComponent;
+    /** Icon after the label. */
+    iconEnd?: IconComponent;
+    /** Takes the full width of its container. */
+    fullWidth?: boolean;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A button. With `isPending`, it shows a spinner, keeps its size and focus, and ignores presses
+ * while assistive technologies announce the pending state.
+ */
+export declare function Button({ variant, size, icon, iconEnd, fullWidth, isPending, children, className, ...props }: ButtonProps): import("react").JSX.Element;
+export { styles as buttonStyles };
+//# sourceMappingURL=Button.d.ts.map

package/dist/button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAwB,KAAK,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElG,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAGxD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEzE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC;IAC1F,+BAA+B;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB;AAED;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EACnB,OAAqB,EACrB,IAAW,EACX,IAAI,EACJ,OAAO,EACP,SAAiB,EACjB,SAAiB,EACjB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACX,EAAE,WAAW,+BA8Bb;AAED,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,CAAC"}

package/dist/button/Button.js

@@ -0,0 +1,39 @@
+import { cx } from "../utils/cx.js";
+import { Icon } from "../icon/Icon.js";
+import { Spinner } from "../spinner/Spinner.js";
+import Button_module_default from "./Button.module.js";
+import { Button } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/button/Button.tsx
+/**
+* A button. With `isPending`, it shows a spinner, keeps its size and focus, and ignores presses
+* while assistive technologies announce the pending state.
+*/
+function Button$1({ variant = "secondary", size = "md", icon, iconEnd, fullWidth = false, isPending = false, children, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		...props,
+		isPending,
+		className: cx(Button_module_default.button, Button_module_default[variant], size === "sm" && Button_module_default.sm, fullWidth && Button_module_default.fullWidth, isPending && Button_module_default.pending, className),
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: Button_module_default.content,
+			children: [
+				icon !== void 0 ? /* @__PURE__ */ jsx(Icon, {
+					icon,
+					size: size === "sm" ? "sm" : "md"
+				}) : null,
+				children,
+				iconEnd !== void 0 ? /* @__PURE__ */ jsx(Icon, {
+					icon: iconEnd,
+					size: size === "sm" ? "sm" : "md"
+				}) : null
+			]
+		}), isPending ? /* @__PURE__ */ jsx("span", {
+			className: Button_module_default.spinner,
+			children: /* @__PURE__ */ jsx(Spinner, { size: "sm" })
+		}) : null]
+	});
+}
+//#endregion
+export { Button$1 as Button, Button_module_default as buttonStyles };
+
+//# sourceMappingURL=Button.js.map

package/dist/button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":["Button","AriaButton","styles"],"sources":["../../src/button/Button.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { Button as AriaButton, type ButtonProps as AriaButtonProps } from 'react-aria-components';\n\nimport { Icon, type IconComponent } from '../icon/Icon';\nimport { Spinner } from '../spinner/Spinner';\nimport { cx } from '../utils/cx';\nimport styles from './Button.module.css';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';\n\nexport interface ButtonProps extends Omit<AriaButtonProps, 'className' | 'style' | 'children'> {\n    /** Defaults to `secondary`. */\n    variant?: ButtonVariant;\n    size?: 'sm' | 'md';\n    /** Icon before the label. */\n    icon?: IconComponent;\n    /** Icon after the label. */\n    iconEnd?: IconComponent;\n    /** Takes the full width of its container. */\n    fullWidth?: boolean;\n    children?: ReactNode;\n    className?: string;\n    style?: CSSProperties;\n}\n\n/**\n * A button. With `isPending`, it shows a spinner, keeps its size and focus, and ignores presses\n * while assistive technologies announce the pending state.\n */\nexport function Button({\n    variant = 'secondary',\n    size = 'md',\n    icon,\n    iconEnd,\n    fullWidth = false,\n    isPending = false,\n    children,\n    className,\n    ...props\n}: ButtonProps) {\n    return (\n        <AriaButton\n            {...props}\n            isPending={isPending}\n            className={cx(\n                styles.button,\n                styles[variant],\n                size === 'sm' && styles.sm,\n                fullWidth && styles.fullWidth,\n                isPending && styles.pending,\n                className,\n            )}\n        >\n            <span className={styles.content}>\n                {icon !== undefined ? (\n                    <Icon icon={icon} size={size === 'sm' ? 'sm' : 'md'} />\n                ) : null}\n                {children}\n                {iconEnd !== undefined ? (\n                    <Icon icon={iconEnd} size={size === 'sm' ? 'sm' : 'md'} />\n                ) : null}\n            </span>\n            {isPending ? (\n                <span className={styles.spinner}>\n                    <Spinner size=\"sm\" />\n                </span>\n            ) : null}\n        </AriaButton>\n    );\n}\n\nexport { styles as buttonStyles };\n"],"mappings":";;;;;;;;;;;AA6BA,SAAgBA,SAAO,EACnB,UAAU,aACV,OAAO,MACP,MACA,SACA,YAAY,OACZ,YAAY,OACZ,UACA,WACA,GAAG,SACS;CACZ,OACI,qBAACC,QAAD;EACI,GAAI;EACO;EACX,WAAW,GACPC,sBAAO,QACPA,sBAAO,UACP,SAAS,QAAQA,sBAAO,IACxB,aAAaA,sBAAO,WACpB,aAAaA,sBAAO,SACpB,SACJ;EAVJ,UAAA,CAYI,qBAAC,QAAD;GAAM,WAAWA,sBAAO;GAAxB,UAAA;IACK,SAAS,KAAA,IACN,oBAAC,MAAD;KAAY;KAAM,MAAM,SAAS,OAAO,OAAO;IAAK,CAAA,IACpD;IACH;IACA,YAAY,KAAA,IACT,oBAAC,MAAD;KAAM,MAAM;KAAS,MAAM,SAAS,OAAO,OAAO;IAAK,CAAA,IACvD;GACF;EACL,CAAA,GAAA,YACG,oBAAC,QAAD;GAAM,WAAWA,sBAAO;GACpB,UAAA,oBAAC,SAAD,EAAS,MAAK,KAAI,CAAA;EAChB,CAAA,IACN,IACI;;AAEpB"}

package/dist/button/Button.module.js

@@ -0,0 +1,28 @@
+import "./Button.css";
+//#region src/button/Button.module.css
+var button = "panneau-button-eiKKZV";
+var sm = "panneau-sm-Y4qjxi";
+var fullWidth = "panneau-fullWidth-TLKFBq";
+var primary = "panneau-primary-EU45ZN";
+var secondary = "panneau-secondary-5BZ2i9";
+var ghost = "panneau-ghost-OX4KsD";
+var danger = "panneau-danger-57n-Hg";
+var content = "panneau-content-SVjwiQ";
+var pending = "panneau-pending-j5UroX";
+var spinner = "panneau-spinner-QToZmM";
+var Button_module_default = {
+	button,
+	sm,
+	fullWidth,
+	primary,
+	secondary,
+	ghost,
+	danger,
+	content,
+	pending,
+	spinner
+};
+//#endregion
+export { button, content, danger, Button_module_default as default, fullWidth, ghost, pending, primary, secondary, sm, spinner };
+
+//# sourceMappingURL=Button.module.js.map

package/dist/button/Button.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.module.js","names":[],"sources":["../../src/button/Button.module.css"],"sourcesContent":[".button {\n    position: relative;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    gap: var(--panneau-space-2);\n    min-height: var(--panneau-control-height);\n    padding: 0 var(--panneau-space-4);\n    font-size: var(--panneau-font-size-md);\n    font-weight: var(--panneau-font-weight-medium);\n    line-height: var(--panneau-line-height-tight);\n    text-decoration: none;\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    border: var(--panneau-border-width) solid transparent;\n    border-radius: var(--panneau-radius-md);\n    transition:\n        background-color var(--panneau-duration),\n        border-color var(--panneau-duration),\n        color var(--panneau-duration);\n    -webkit-tap-highlight-color: transparent;\n}\n\n.button[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.button[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.sm {\n    min-height: var(--panneau-control-height-sm);\n    padding: 0 var(--panneau-space-3);\n    font-size: var(--panneau-font-size-sm);\n}\n\n.fullWidth {\n    display: flex;\n    width: 100%;\n}\n\n.primary {\n    color: var(--panneau-color-accent-text);\n    background-color: var(--panneau-color-accent);\n}\n\n.primary[data-hovered],\n.primary[data-pressed] {\n    background-color: var(--panneau-color-accent-hover);\n}\n\n.secondary {\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-surface);\n    border-color: var(--panneau-color-border-control);\n}\n\n.secondary[data-hovered] {\n    background-color: var(--panneau-color-hover);\n}\n\n.secondary[data-pressed] {\n    background-color: var(--panneau-color-pressed);\n}\n\n.ghost {\n    color: var(--panneau-color-text);\n    background-color: transparent;\n}\n\n.ghost[data-hovered] {\n    background-color: var(--panneau-color-hover);\n}\n\n.ghost[data-pressed] {\n    background-color: var(--panneau-color-pressed);\n}\n\n.danger {\n    color: var(--panneau-color-danger-solid-text);\n    background-color: var(--panneau-color-danger-solid);\n}\n\n.danger[data-hovered],\n.danger[data-pressed] {\n    background-color: var(--panneau-color-danger-solid-hover);\n}\n\n.content {\n    display: inline-flex;\n    align-items: center;\n    gap: inherit;\n    min-width: 0;\n}\n\n.pending .content {\n    visibility: hidden;\n}\n\n.spinner {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: inherit;\n}\n"],"mappings":""}