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

package/dist/layout/responsive.js

@@ -0,0 +1,49 @@
+//#region src/layout/responsive.ts
+/**
+* Breakpoints of the layout primitives, like Bootstrap's `$grid-breakpoints`: the minimum width of
+* the nearest container at which a responsive value applies. They are constants, since CSS
+* variables can't be used in queries; the stylesheets of the primitives use the same values.
+*/
+var BREAKPOINTS = Object.freeze({
+	sm: "40rem",
+	md: "48rem",
+	lg: "64rem",
+	xl: "80rem"
+});
+/** The CSS value of a step of the space scale. */
+function space(step) {
+	return step === 0 ? "0" : `var(--panneau-space-${step})`;
+}
+var KEYS = ["base", ...Object.keys(BREAKPOINTS)];
+function isByBreakpoint(value) {
+	return typeof value === "object" && value !== null;
+}
+/**
+* The inline variables of a responsive prop, `--_panneau-<component>-<prop>-<breakpoint>`, which
+* the static rules of the component read in each container query. Unset breakpoints fall back to
+* smaller ones in CSS.
+*/
+function responsiveVariables(component, prop, value, toCss) {
+	if (value === void 0) return {};
+	const values = isByBreakpoint(value) ? value : { base: value };
+	return Object.fromEntries(KEYS.flatMap((key) => {
+		const item = values[key];
+		return item !== void 0 ? [[`--_panneau-${component}-${prop}-${key}`, toCss(item)]] : [];
+	}));
+}
+/** Merges inline variables with the `style` prop, which wins. */
+function withVariables(variables, style) {
+	const merged = Object.assign({}, ...variables);
+	return Object.keys(merged).length > 0 ? {
+		...merged,
+		...style
+	} : style;
+}
+/** The CSS value of a justification. */
+function justification(value) {
+	return value === "between" ? "space-between" : value;
+}
+//#endregion
+export { BREAKPOINTS, justification, responsiveVariables, space, withVariables };
+
+//# sourceMappingURL=responsive.js.map

package/dist/layout/responsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.js","names":[],"sources":["../../src/layout/responsive.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\n/**\n * Breakpoints of the layout primitives, like Bootstrap's `$grid-breakpoints`: the minimum width of\n * the nearest container at which a responsive value applies. They are constants, since CSS\n * variables can't be used in queries; the stylesheets of the primitives use the same values.\n */\nexport const BREAKPOINTS = Object.freeze({\n    sm: '40rem',\n    md: '48rem',\n    lg: '64rem',\n    xl: '80rem',\n});\n\n/** A breakpoint: `sm`, `md`, `lg` or `xl`. */\nexport type Breakpoint = keyof typeof BREAKPOINTS;\n\n/**\n * A value, or values by breakpoint: `{ base: 1, md: 2, lg: 3 }`. Each value applies from its\n * breakpoint up, until a larger one sets another. Breakpoints are widths of the nearest container\n * (`PanneauRoot`, `Container`, a form, a list), not of the viewport, so that a grid in a narrow\n * sidebar behaves as on a phone.\n */\nexport type Responsive<T> = T | Partial<Record<'base' | Breakpoint, T>>;\n\n/** A step of the space scale of the theme (`--panneau-space-<step>`), or 0. */\nexport type Space = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10;\n\n/** The CSS value of a step of the space scale. */\nexport function space(step: Space): string {\n    return step === 0 ? '0' : `var(--panneau-space-${step})`;\n}\n\nconst KEYS = ['base', ...(Object.keys(BREAKPOINTS) as Breakpoint[])] as const;\n\nfunction isByBreakpoint<T>(value: Responsive<T>): value is Partial<Record<'base' | Breakpoint, T>> {\n    return typeof value === 'object' && value !== null;\n}\n\n/**\n * The inline variables of a responsive prop, `--_panneau-<component>-<prop>-<breakpoint>`, which\n * the static rules of the component read in each container query. Unset breakpoints fall back to\n * smaller ones in CSS.\n */\nexport function responsiveVariables<T>(\n    component: string,\n    prop: string,\n    value: Responsive<T> | undefined,\n    toCss: (value: T) => string,\n): Record<string, string> {\n    if (value === undefined) {\n        return {};\n    }\n    const values: Partial<Record<'base' | Breakpoint, T>> = isByBreakpoint(value)\n        ? value\n        : { base: value };\n    return Object.fromEntries(\n        KEYS.flatMap((key) => {\n            const item = values[key];\n            return item !== undefined\n                ? [[`--_panneau-${component}-${prop}-${key}`, toCss(item)]]\n                : [];\n        }),\n    );\n}\n\n/** Merges inline variables with the `style` prop, which wins. */\nexport function withVariables(\n    variables: Record<string, string>[],\n    style: CSSProperties | undefined,\n): CSSProperties | undefined {\n    const merged = Object.assign({}, ...variables) as Record<string, string>;\n    return Object.keys(merged).length > 0 ? { ...merged, ...style } : style;\n}\n\n/** How the primitives distribute items along their axis: `between` is `space-between`. */\nexport type Justification = 'start' | 'center' | 'end' | 'between';\n\n/** The CSS value of a justification. */\nexport function justification(value: Justification): string {\n    return value === 'between' ? 'space-between' : value;\n}\n"],"mappings":";;;;;;AAOA,IAAa,cAAc,OAAO,OAAO;CACrC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACR,CAAC;;AAiBD,SAAgB,MAAM,MAAqB;CACvC,OAAO,SAAS,IAAI,MAAM,uBAAuB,KAAI;AACzD;AAEA,IAAM,OAAO,CAAC,QAAQ,GAAI,OAAO,KAAK,WAAW,CAAkB;AAEnE,SAAS,eAAkB,OAAwE;CAC/F,OAAO,OAAO,UAAU,YAAY,UAAU;AAClD;;;;;;AAOA,SAAgB,oBACZ,WACA,MACA,OACA,OACsB;CACtB,IAAI,UAAU,KAAA,GACV,OAAO,CAAC;CAEZ,MAAM,SAAkD,eAAe,KAAK,IACtE,QACA,EAAE,MAAM,MAAM;CACpB,OAAO,OAAO,YACV,KAAK,SAAS,QAAQ;EAClB,MAAM,OAAO,OAAO;EACpB,OAAO,SAAS,KAAA,IACV,CAAC,CAAC,cAAc,UAAS,GAAI,KAAI,GAAI,OAAO,MAAM,IAAI,CAAC,CAAC,IACxD,CAAA;CACV,CAAC,CACL;AACJ;;AAGA,SAAgB,cACZ,WACA,OACyB;CACzB,MAAM,SAAS,OAAO,OAAO,CAAC,GAAG,GAAG,SAAS;CAC7C,OAAO,OAAO,KAAK,MAAM,CAAC,CAAC,SAAS,IAAI;EAAE,GAAG;EAAQ,GAAG;CAAM,IAAI;AACtE;;AAMA,SAAgB,cAAc,OAA8B;CACxD,OAAO,UAAU,YAAY,kBAAkB;AACnD"}

package/dist/menu/Menu.js

@@ -16,7 +16,7 @@ function Menu$1({ className, popoverClassName, placement = "bottom start", ...pr
 		className: popoverClassName,
 		children: /* @__PURE__ */ jsx(Menu, {
 			...props,
-			className: cx(ListBox_module_default.listBox, className)
+			className: cx("panneau-menu", ListBox_module_default.listBox, className)
 		})
 	});
 }
@@ -25,7 +25,7 @@ function MenuItem$1({ children, icon, description, isDanger = false, className,
 	return /* @__PURE__ */ jsxs(MenuItem, {
 		...props,
 		textValue: textValue ?? (typeof children === "string" ? children : void 0),
-		className: cx(ListBox_module_default.item, className),
+		className: cx("panneau-menu-item", ListBox_module_default.item, className),
 		"data-danger": isDanger || void 0,
 		children: [icon !== void 0 ? /* @__PURE__ */ jsx(Icon, { icon }) : null, /* @__PURE__ */ jsxs("span", {
 			className: ListBox_module_default.itemText,

package/dist/menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","names":["Menu","AriaMenu","styles","MenuItem","AriaMenuItem","_c"],"sources":["../../src/menu/Menu.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n    Menu as AriaMenu,\n    MenuItem as AriaMenuItem,\n    type MenuItemProps as AriaMenuItemProps,\n    type MenuProps as AriaMenuProps,\n    Separator,\n    Text,\n} from 'react-aria-components';\n\nimport { Icon, type IconComponent } from '../icon/Icon';\nimport { PopoverSurface } from '../popover/Popover';\nimport styles from '../select/ListBox.module.css';\nimport { cx } from '../utils/cx';\n\nexport interface MenuProps<T extends object> extends Omit<AriaMenuProps<T>, 'className' | 'style'> {\n    className?: string;\n    popoverClassName?: string;\n    placement?: 'bottom start' | 'bottom end' | 'top start' | 'top end';\n}\n\n/**\n * A menu of actions, inside a `MenuTrigger` with its button as the first child. Arrow keys move\n * between items, and typing a letter jumps to an item.\n */\nexport function Menu<T extends object>({\n    className,\n    popoverClassName,\n    placement = 'bottom start',\n    ...props\n}: MenuProps<T>) {\n    return (\n        <PopoverSurface placement={placement} className={popoverClassName}>\n            <AriaMenu {...props} className={cx(styles.listBox, className)} />\n        </PopoverSurface>\n    );\n}\n\nexport interface MenuItemProps extends Omit<AriaMenuItemProps, 'className' | 'style' | 'children'> {\n    children?: ReactNode;\n    icon?: IconComponent;\n    description?: string;\n    /** Styles the item as destructive. */\n    isDanger?: boolean;\n    className?: string;\n}\n\n/** An item of a `Menu`. */\nexport function MenuItem({\n    children,\n    icon,\n    description,\n    isDanger = false,\n    className,\n    textValue,\n    ...props\n}: MenuItemProps) {\n    return (\n        <AriaMenuItem\n            {...props}\n            textValue={textValue ?? (typeof children === 'string' ? children : undefined)}\n            className={cx(styles.item, className)}\n            data-danger={isDanger || undefined}\n        >\n            {icon !== undefined ? <Icon icon={icon} /> : null}\n            <span className={styles.itemText}>\n                <Text slot=\"label\" className={styles.itemLabel}>\n                    {children}\n                </Text>\n                {description !== undefined ? (\n                    <Text slot=\"description\" className={styles.itemDescription}>\n                        {description}\n                    </Text>\n                ) : null}\n            </span>\n        </AriaMenuItem>\n    );\n}\n\n/** A line between groups of menu items. */\nexport function MenuSeparator() {\n    return <Separator className={styles.separator} />;\n}\n\nexport { MenuTrigger } from 'react-aria-components';\n"],"mappings":";;;;;;;;;;;;AAyBA,SAAgBA,OAAuB,EACnC,WACA,kBACA,YAAY,gBACZ,GAAG,SACU;CACb,OACI,oBAAC,gBAAD;EAA2B;EAAW,WAAW;EAC7C,UAAA,oBAACC,MAAD;GAAU,GAAI;GAAO,WAAW,GAAGC,uBAAO,SAAS,SAAS;EAAE,CAAA;CAClD,CAAA;AAExB;;AAYA,SAAgBC,WAAS,EACrB,UACA,MACA,aACA,WAAW,OACX,WACA,WACA,GAAG,SACW;CACd,OACI,qBAACC,UAAD;EACI,GAAI;EACJ,WAAW,cAAc,OAAO,aAAa,WAAW,WAAW,KAAA;EACnE,WAAW,GAAGF,uBAAO,MAAM,SAAS;EACpC,eAAa,YAAY,KAAA;EAJ7B,UAAA,CAMK,SAAS,KAAA,IAAY,oBAAC,MAAD,EAAY,KAAK,CAAA,IAAM,MAC7C,qBAAC,QAAD;GAAM,WAAWA,uBAAO;GAAxB,UAAA,CACI,oBAAC,MAAD;IAAM,MAAK;IAAQ,WAAWA,uBAAO;IAChC;GACC,CAAA,GACL,gBAAgB,KAAA,IACb,oBAAC,MAAD;IAAM,MAAK;IAAc,WAAWA,uBAAO;IACtC,UAAA;GACC,CAAA,IACN,IACF;EACI,CAAA,CAAA;;AAEtB;;AAGA,SAAO,gBAAA;CAAA,MAAA,IAAAG,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EACI,KAAA,oBAAC,WAAD,EAAsB,WAAAH,uBAAM,UAAU,CAAA;EAAI,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAA1C;AAA0C"}
+{"version":3,"file":"Menu.js","names":["Menu","AriaMenu","styles","MenuItem","AriaMenuItem","_c"],"sources":["../../src/menu/Menu.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n    Menu as AriaMenu,\n    MenuItem as AriaMenuItem,\n    type MenuItemProps as AriaMenuItemProps,\n    type MenuProps as AriaMenuProps,\n    Separator,\n    Text,\n} from 'react-aria-components';\n\nimport { Icon, type IconComponent } from '../icon/Icon';\nimport { PopoverSurface } from '../popover/Popover';\nimport styles from '../select/ListBox.module.css';\nimport { cx } from '../utils/cx';\n\nexport interface MenuProps<T extends object> extends Omit<AriaMenuProps<T>, 'className' | 'style'> {\n    className?: string;\n    popoverClassName?: string;\n    placement?: 'bottom start' | 'bottom end' | 'top start' | 'top end';\n}\n\n/**\n * A menu of actions, inside a `MenuTrigger` with its button as the first child. Arrow keys move\n * between items, and typing a letter jumps to an item.\n */\nexport function Menu<T extends object>({\n    className,\n    popoverClassName,\n    placement = 'bottom start',\n    ...props\n}: MenuProps<T>) {\n    return (\n        <PopoverSurface placement={placement} className={popoverClassName}>\n            <AriaMenu {...props} className={cx('panneau-menu', styles.listBox, className)} />\n        </PopoverSurface>\n    );\n}\n\nexport interface MenuItemProps extends Omit<AriaMenuItemProps, 'className' | 'style' | 'children'> {\n    children?: ReactNode;\n    icon?: IconComponent;\n    description?: string;\n    /** Styles the item as destructive. */\n    isDanger?: boolean;\n    className?: string;\n}\n\n/** An item of a `Menu`. */\nexport function MenuItem({\n    children,\n    icon,\n    description,\n    isDanger = false,\n    className,\n    textValue,\n    ...props\n}: MenuItemProps) {\n    return (\n        <AriaMenuItem\n            {...props}\n            textValue={textValue ?? (typeof children === 'string' ? children : undefined)}\n            className={cx('panneau-menu-item', styles.item, className)}\n            data-danger={isDanger || undefined}\n        >\n            {icon !== undefined ? <Icon icon={icon} /> : null}\n            <span className={styles.itemText}>\n                <Text slot=\"label\" className={styles.itemLabel}>\n                    {children}\n                </Text>\n                {description !== undefined ? (\n                    <Text slot=\"description\" className={styles.itemDescription}>\n                        {description}\n                    </Text>\n                ) : null}\n            </span>\n        </AriaMenuItem>\n    );\n}\n\n/** A line between groups of menu items. */\nexport function MenuSeparator() {\n    return <Separator className={styles.separator} />;\n}\n\nexport { MenuTrigger } from 'react-aria-components';\n"],"mappings":";;;;;;;;;;;;AAyBA,SAAgBA,OAAuB,EACnC,WACA,kBACA,YAAY,gBACZ,GAAG,SACU;CACb,OACI,oBAAC,gBAAD;EAA2B;EAAW,WAAW;EAC7C,UAAA,oBAACC,MAAD;GAAU,GAAI;GAAO,WAAW,GAAG,gBAAgBC,uBAAO,SAAS,SAAS;EAAE,CAAA;CAClE,CAAA;AAExB;;AAYA,SAAgBC,WAAS,EACrB,UACA,MACA,aACA,WAAW,OACX,WACA,WACA,GAAG,SACW;CACd,OACI,qBAACC,UAAD;EACI,GAAI;EACJ,WAAW,cAAc,OAAO,aAAa,WAAW,WAAW,KAAA;EACnE,WAAW,GAAG,qBAAqBF,uBAAO,MAAM,SAAS;EACzD,eAAa,YAAY,KAAA;EAJ7B,UAAA,CAMK,SAAS,KAAA,IAAY,oBAAC,MAAD,EAAY,KAAK,CAAA,IAAM,MAC7C,qBAAC,QAAD;GAAM,WAAWA,uBAAO;GAAxB,UAAA,CACI,oBAAC,MAAD;IAAM,MAAK;IAAQ,WAAWA,uBAAO;IAChC;GACC,CAAA,GACL,gBAAgB,KAAA,IACb,oBAAC,MAAD;IAAM,MAAK;IAAc,WAAWA,uBAAO;IACtC,UAAA;GACC,CAAA,IACN,IACF;EACI,CAAA,CAAA;;AAEtB;;AAGA,SAAO,gBAAA;CAAA,MAAA,IAAAG,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EACI,KAAA,oBAAC,WAAD,EAAsB,WAAAH,uBAAM,UAAU,CAAA;EAAI,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAA1C;AAA0C"}

package/dist/number-input/NumberInput.css

@@ -1,25 +1,25 @@
-.panneau-control-4aptNi.panneau-control-4aptNi {
+.panneau-number-input-control.panneau-number-input-control {
     padding-inline-end: 0;
     overflow: hidden;
 }
 
-.panneau-input-qqs-MV {
-    font-variant-numeric: tabular-nums;
+.panneau-number-input-input {
+    font-variant-numeric: var(--panneau-font-numeric);
 }
 
-.panneau-steppers-JoTs6w {
+.panneau-number-input-steppers {
     display: flex;
     flex-direction: column;
     align-self: stretch;
     border-inline-start: var(--panneau-border-width) solid var(--panneau-color-border);
 }
 
-.panneau-stepper-sAGR2f {
+.panneau-number-input-stepper {
     display: flex;
     flex: 1 1 0;
     align-items: center;
     justify-content: center;
-    width: 1.75rem;
+    width: var(--panneau-number-input-stepper-width, 1.75rem);
     padding: 0;
     color: var(--panneau-color-text-muted);
     cursor: pointer;
@@ -27,31 +27,31 @@
     border: 0;
 }
 
-.panneau-stepper-sAGR2f + .panneau-stepper-sAGR2f {
+.panneau-number-input-stepper + .panneau-number-input-stepper {
     border-top: var(--panneau-border-width) solid var(--panneau-color-border);
 }
 
-.panneau-stepper-sAGR2f[data-hovered] {
+.panneau-number-input-stepper[data-hovered] {
     color: var(--panneau-color-text);
     background-color: var(--panneau-color-hover);
 }
 
-.panneau-stepper-sAGR2f[data-pressed] {
+.panneau-number-input-stepper[data-pressed] {
     background-color: var(--panneau-color-pressed);
 }
 
-.panneau-stepper-sAGR2f[data-disabled] {
+.panneau-number-input-stepper[data-disabled] {
     cursor: not-allowed;
     opacity: 0.5;
 }
 
 /* Touch screens have their own keyboard for numbers: the steppers would be too small. */
 @media (pointer: coarse) {
-    .panneau-steppers-JoTs6w {
+    .panneau-number-input-steppers {
         display: none;
     }
 
-    .panneau-control-4aptNi.panneau-control-4aptNi {
+    .panneau-number-input-control.panneau-number-input-control {
         padding-inline-end: var(--panneau-space-3);
     }
 }

package/dist/number-input/NumberInput.js

@@ -25,7 +25,7 @@ function NumberInput({ label, description, errors = [], value, defaultValue, onC
 		isReadOnly,
 		isInvalid: invalid,
 		validationBehavior: "aria",
-		className: cx(Field_module_default.field, className),
+		className: cx("panneau-number-input", Field_module_default.field, className),
 		children: [
 			/* @__PURE__ */ jsx(FieldLabel, {
 				isRequired,

package/dist/number-input/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","names":["fieldStyles","styles"],"sources":["../../src/number-input/NumberInput.tsx"],"sourcesContent":["import { ChevronDown, ChevronUp } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport {\n    type NumberFieldProps as AriaNumberFieldProps,\n    Button,\n    Group,\n    Input,\n    NumberField,\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 { cx } from '../utils/cx';\nimport styles from './NumberInput.module.css';\n\nexport interface NumberInputProps\n    extends\n        Omit<\n            AriaNumberFieldProps,\n            | 'className'\n            | 'style'\n            | 'children'\n            | 'isInvalid'\n            | 'validate'\n            | 'value'\n            | 'defaultValue'\n            | 'onChange'\n        >,\n        FieldChromeProps {\n    /** The number, or `null` when empty. */\n    value?: number | null;\n    defaultValue?: number | null;\n    /** Called with the number, or `null` when the input is cleared. */\n    onChange?: (value: number | null) => void;\n    placeholder?: string;\n    /** Content after the number, inside the control: a unit. */\n    suffix?: ReactNode;\n    controlClassName?: string;\n    inputClassName?: string;\n}\n\nfunction toAria(value: number | null | undefined): number | undefined {\n    return value === null ? Number.NaN : value;\n}\n\n/**\n * A number input, formatted for the locale, with steppers and arrow keys. An empty input is\n * `null`, not `NaN`.\n */\nexport function NumberInput({\n    label,\n    description,\n    errors = [],\n    value,\n    defaultValue,\n    onChange,\n    placeholder,\n    suffix,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    controlClassName,\n    inputClassName,\n    isRequired,\n    isReadOnly,\n    ...props\n}: NumberInputProps) {\n    const invalid = errors.length > 0;\n    return (\n        <NumberField\n            {...props}\n            value={toAria(value)}\n            defaultValue={toAria(defaultValue)}\n            onChange={(next) => onChange?.(Number.isNaN(next) ? null : next)}\n            isRequired={isRequired}\n            isReadOnly={isReadOnly}\n            isInvalid={invalid}\n            validationBehavior=\"aria\"\n            className={cx(fieldStyles.field, className)}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <Group\n                className={cx(fieldStyles.control, styles.control, controlClassName)}\n                data-invalid={invalid || undefined}\n                data-readonly={isReadOnly || undefined}\n            >\n                <Input\n                    placeholder={placeholder}\n                    className={cx(fieldStyles.bare, styles.input, inputClassName)}\n                />\n                {suffix !== undefined ? (\n                    <span className={fieldStyles.adornment}>{suffix}</span>\n                ) : null}\n                {isReadOnly !== true ? (\n                    <span className={styles.steppers}>\n                        <Button slot=\"increment\" className={styles.stepper}>\n                            <Icon icon={ChevronUp} size=\"xs\" />\n                        </Button>\n                        <Button slot=\"decrement\" className={styles.stepper}>\n                            <Icon icon={ChevronDown} size=\"xs\" />\n                        </Button>\n                    </span>\n                ) : null}\n            </Group>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </NumberField>\n    );\n}\n"],"mappings":";;;;;;;;;AA+CA,SAAS,OAAO,OAAsD;CAClE,OAAO,UAAU,OAAO,MAAa;AACzC;;;;;AAMA,SAAgB,YAAY,EACxB,OACA,aACA,SAAS,CAAA,GACT,OACA,cACA,UACA,aACA,QACA,WACA,gBACA,sBACA,iBACA,kBACA,gBACA,YACA,YACA,GAAG,SACc;CACjB,MAAM,UAAU,OAAO,SAAS;CAChC,OACI,qBAAC,aAAD;EACI,GAAI;EACJ,OAAO,OAAO,KAAK;EACnB,cAAc,OAAO,YAAY;EACjC,WAAW,SAAS,WAAW,OAAO,MAAM,IAAI,IAAI,OAAO,IAAI;EACnD;EACA;EACZ,WAAW;EACX,oBAAmB;EACnB,WAAW,GAAGA,qBAAY,OAAO,SAAS;EAT9C,UAAA;GAWI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,qBAAC,OAAD;IACI,WAAW,GAAGA,qBAAY,SAASC,2BAAO,SAAS,gBAAgB;IACnE,gBAAc,WAAW,KAAA;IACzB,iBAAe,cAAc,KAAA;IAHjC,UAAA;KAKI,oBAAC,OAAD;MACiB;MACb,WAAW,GAAGD,qBAAY,MAAMC,2BAAO,OAAO,cAAc;KAAE,CAAA;KAEjE,WAAW,KAAA,IACR,oBAAC,QAAD;MAAM,WAAWD,qBAAY;MAAY,UAAA;KAAa,CAAA,IACtD;KACH,eAAe,OACZ,qBAAC,QAAD;MAAM,WAAWC,2BAAO;MAAxB,UAAA,CACI,oBAAC,QAAD;OAAQ,MAAK;OAAY,WAAWA,2BAAO;OACvC,UAAA,oBAAC,MAAD;QAAM,MAAM;QAAW,MAAK;OAAI,CAAA;MAC5B,CAAA,GACR,oBAAC,QAAD;OAAQ,MAAK;OAAY,WAAWA,2BAAO;OACvC,UAAA,oBAAC,MAAD;QAAM,MAAM;QAAa,MAAK;OAAI,CAAA;MAC9B,CAAA,CACN;KACN,CAAA,IAAA;IACD;;GACP,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EAC/C;;AAErB"}
+{"version":3,"file":"NumberInput.js","names":["fieldStyles","styles"],"sources":["../../src/number-input/NumberInput.tsx"],"sourcesContent":["import { ChevronDown, ChevronUp } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport {\n    type NumberFieldProps as AriaNumberFieldProps,\n    Button,\n    Group,\n    Input,\n    NumberField,\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 { cx } from '../utils/cx';\nimport styles from './NumberInput.module.css';\n\nexport interface NumberInputProps\n    extends\n        Omit<\n            AriaNumberFieldProps,\n            | 'className'\n            | 'style'\n            | 'children'\n            | 'isInvalid'\n            | 'validate'\n            | 'value'\n            | 'defaultValue'\n            | 'onChange'\n        >,\n        FieldChromeProps {\n    /** The number, or `null` when empty. */\n    value?: number | null;\n    defaultValue?: number | null;\n    /** Called with the number, or `null` when the input is cleared. */\n    onChange?: (value: number | null) => void;\n    placeholder?: string;\n    /** Content after the number, inside the control: a unit. */\n    suffix?: ReactNode;\n    controlClassName?: string;\n    inputClassName?: string;\n}\n\nfunction toAria(value: number | null | undefined): number | undefined {\n    return value === null ? Number.NaN : value;\n}\n\n/**\n * A number input, formatted for the locale, with steppers and arrow keys. An empty input is\n * `null`, not `NaN`.\n */\nexport function NumberInput({\n    label,\n    description,\n    errors = [],\n    value,\n    defaultValue,\n    onChange,\n    placeholder,\n    suffix,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    controlClassName,\n    inputClassName,\n    isRequired,\n    isReadOnly,\n    ...props\n}: NumberInputProps) {\n    const invalid = errors.length > 0;\n    return (\n        <NumberField\n            {...props}\n            value={toAria(value)}\n            defaultValue={toAria(defaultValue)}\n            onChange={(next) => onChange?.(Number.isNaN(next) ? null : next)}\n            isRequired={isRequired}\n            isReadOnly={isReadOnly}\n            isInvalid={invalid}\n            validationBehavior=\"aria\"\n            className={cx('panneau-number-input', fieldStyles.field, className)}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <Group\n                className={cx(fieldStyles.control, styles.control, controlClassName)}\n                data-invalid={invalid || undefined}\n                data-readonly={isReadOnly || undefined}\n            >\n                <Input\n                    placeholder={placeholder}\n                    className={cx(fieldStyles.bare, styles.input, inputClassName)}\n                />\n                {suffix !== undefined ? (\n                    <span className={fieldStyles.adornment}>{suffix}</span>\n                ) : null}\n                {isReadOnly !== true ? (\n                    <span className={styles.steppers}>\n                        <Button slot=\"increment\" className={styles.stepper}>\n                            <Icon icon={ChevronUp} size=\"xs\" />\n                        </Button>\n                        <Button slot=\"decrement\" className={styles.stepper}>\n                            <Icon icon={ChevronDown} size=\"xs\" />\n                        </Button>\n                    </span>\n                ) : null}\n            </Group>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </NumberField>\n    );\n}\n"],"mappings":";;;;;;;;;AA+CA,SAAS,OAAO,OAAsD;CAClE,OAAO,UAAU,OAAO,MAAa;AACzC;;;;;AAMA,SAAgB,YAAY,EACxB,OACA,aACA,SAAS,CAAA,GACT,OACA,cACA,UACA,aACA,QACA,WACA,gBACA,sBACA,iBACA,kBACA,gBACA,YACA,YACA,GAAG,SACc;CACjB,MAAM,UAAU,OAAO,SAAS;CAChC,OACI,qBAAC,aAAD;EACI,GAAI;EACJ,OAAO,OAAO,KAAK;EACnB,cAAc,OAAO,YAAY;EACjC,WAAW,SAAS,WAAW,OAAO,MAAM,IAAI,IAAI,OAAO,IAAI;EACnD;EACA;EACZ,WAAW;EACX,oBAAmB;EACnB,WAAW,GAAG,wBAAwBA,qBAAY,OAAO,SAAS;EATtE,UAAA;GAWI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,qBAAC,OAAD;IACI,WAAW,GAAGA,qBAAY,SAASC,2BAAO,SAAS,gBAAgB;IACnE,gBAAc,WAAW,KAAA;IACzB,iBAAe,cAAc,KAAA;IAHjC,UAAA;KAKI,oBAAC,OAAD;MACiB;MACb,WAAW,GAAGD,qBAAY,MAAMC,2BAAO,OAAO,cAAc;KAAE,CAAA;KAEjE,WAAW,KAAA,IACR,oBAAC,QAAD;MAAM,WAAWD,qBAAY;MAAY,UAAA;KAAa,CAAA,IACtD;KACH,eAAe,OACZ,qBAAC,QAAD;MAAM,WAAWC,2BAAO;MAAxB,UAAA,CACI,oBAAC,QAAD;OAAQ,MAAK;OAAY,WAAWA,2BAAO;OACvC,UAAA,oBAAC,MAAD;QAAM,MAAM;QAAW,MAAK;OAAI,CAAA;MAC5B,CAAA,GACR,oBAAC,QAAD;OAAQ,MAAK;OAAY,WAAWA,2BAAO;OACvC,UAAA,oBAAC,MAAD;QAAM,MAAM;QAAa,MAAK;OAAI,CAAA;MAC9B,CAAA,CACN;KACN,CAAA,IAAA;IACD;;GACP,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EAC/C;;AAErB"}

package/dist/number-input/NumberInput.module.js

@@ -1,9 +1,9 @@
 import "./NumberInput.css";
 //#region src/number-input/NumberInput.module.css
-var control = "panneau-control-4aptNi";
-var input = "panneau-input-qqs-MV";
-var steppers = "panneau-steppers-JoTs6w";
-var stepper = "panneau-stepper-sAGR2f";
+var control = "panneau-number-input-control";
+var input = "panneau-number-input-input";
+var steppers = "panneau-number-input-steppers";
+var stepper = "panneau-number-input-stepper";
 var NumberInput_module_default = {
 	control,
 	input,

package/dist/number-input/NumberInput.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.module.js","names":[],"sources":["../../src/number-input/NumberInput.module.css"],"sourcesContent":[".control.control {\n    padding-inline-end: 0;\n    overflow: hidden;\n}\n\n.input {\n    font-variant-numeric: tabular-nums;\n}\n\n.steppers {\n    display: flex;\n    flex-direction: column;\n    align-self: stretch;\n    border-inline-start: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.stepper {\n    display: flex;\n    flex: 1 1 0;\n    align-items: center;\n    justify-content: center;\n    width: 1.75rem;\n    padding: 0;\n    color: var(--panneau-color-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n}\n\n.stepper + .stepper {\n    border-top: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.stepper[data-hovered] {\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-hover);\n}\n\n.stepper[data-pressed] {\n    background-color: var(--panneau-color-pressed);\n}\n\n.stepper[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n\n/* Touch screens have their own keyboard for numbers: the steppers would be too small. */\n@media (pointer: coarse) {\n    .steppers {\n        display: none;\n    }\n\n    .control.control {\n        padding-inline-end: var(--panneau-space-3);\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"NumberInput.module.js","names":[],"sources":["../../src/number-input/NumberInput.module.css"],"sourcesContent":[".control.control {\n    padding-inline-end: 0;\n    overflow: hidden;\n}\n\n.input {\n    font-variant-numeric: var(--panneau-font-numeric);\n}\n\n.steppers {\n    display: flex;\n    flex-direction: column;\n    align-self: stretch;\n    border-inline-start: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.stepper {\n    display: flex;\n    flex: 1 1 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--panneau-number-input-stepper-width, 1.75rem);\n    padding: 0;\n    color: var(--panneau-color-text-muted);\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n}\n\n.stepper + .stepper {\n    border-top: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.stepper[data-hovered] {\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-hover);\n}\n\n.stepper[data-pressed] {\n    background-color: var(--panneau-color-pressed);\n}\n\n.stepper[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n\n/* Touch screens have their own keyboard for numbers: the steppers would be too small. */\n@media (pointer: coarse) {\n    .steppers {\n        display: none;\n    }\n\n    .control.control {\n        padding-inline-end: var(--panneau-space-3);\n    }\n}\n"],"mappings":""}

package/dist/number-input/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of NumberInput. */
+export declare const numberInputTokens: import("..").ComponentTokens<"number-input", "panneau-number-input-stepper-width">;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/number-input/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/number-input/tokens.ts"],"names":[],"mappings":"AAEA,6BAA6B;AAC7B,eAAO,MAAM,iBAAiB,oFAG5B,CAAC"}

package/dist/number-input/tokens.js

@@ -0,0 +1,10 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/number-input/tokens.ts
+/** Tokens of NumberInput. */
+var numberInputTokens = defineComponentTokens("number-input", { 
+/** Width of the increment and decrement buttons. */
+"stepper-width": "1.75rem" });
+//#endregion
+export { numberInputTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/number-input/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/number-input/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of NumberInput. */\nexport const numberInputTokens = defineComponentTokens('number-input', {\n    /** Width of the increment and decrement buttons. */\n    'stepper-width': '1.75rem',\n});\n"],"mappings":";;;AAGA,IAAa,oBAAoB,sBAAsB,gBAAgB;;AAEnE,iBAAiB,UACrB,CAAC"}

package/dist/popover/Popover.css

@@ -1,30 +1,31 @@
-.panneau-popover-KacUIM {
+.panneau-popover {
     min-width: var(--trigger-width, 10rem);
     max-width: calc(100vw - 2 * var(--panneau-space-4));
     color: var(--panneau-color-text);
-    background-color: var(--panneau-color-surface-raised);
-    border: var(--panneau-border-width) solid var(--panneau-color-border);
-    border-radius: var(--panneau-radius-lg);
-    box-shadow: var(--panneau-shadow-lg);
+    background-color: var(--panneau-popover-bg, var(--panneau-color-surface-raised));
+    border: var(--panneau-border-width) solid
+        var(--panneau-popover-border-color, var(--panneau-color-border));
+    border-radius: var(--panneau-popover-radius, var(--panneau-radius-lg));
+    box-shadow: var(--panneau-popover-shadow, var(--panneau-shadow-lg));
     outline: none;
     overflow: auto;
     z-index: var(--panneau-z-overlay);
 }
 
-.panneau-popover-KacUIM[data-entering] {
-    animation: panneau-pop-fB47s- var(--panneau-duration) ease-out;
+.panneau-popover[data-entering] {
+    animation: panneau-popover-pop var(--panneau-duration) ease-out;
 }
 
-.panneau-popover-KacUIM[data-exiting] {
-    animation: panneau-pop-fB47s- var(--panneau-duration) ease-in reverse;
+.panneau-popover[data-exiting] {
+    animation: panneau-popover-pop var(--panneau-duration) ease-in reverse;
 }
 
-.panneau-dialog-2cVt0D {
-    padding: var(--panneau-space-3);
+.panneau-popover-dialog {
+    padding: var(--panneau-popover-padding, var(--panneau-space-3));
     outline: none;
 }
 
-@keyframes panneau-pop-fB47s- {
+@keyframes panneau-popover-pop {
     from {
         opacity: 0;
         transform: scale(0.97);

package/dist/popover/Popover.js

@@ -14,7 +14,7 @@ function Popover$1({ children, "aria-label": ariaLabel, className, dialogClassNa
 	return /* @__PURE__ */ jsx(Popover, {
 		...props,
 		offset,
-		className: cx(Popover_module_default.popover, className),
+		className: cx("panneau-popover", Popover_module_default.popover, className),
 		UNSTABLE_portalContainer: container,
 		children: /* @__PURE__ */ jsx(Dialog, {
 			"aria-label": ariaLabel,
@@ -30,7 +30,7 @@ function PopoverSurface({ children, className, offset = 6, ...props }) {
 	return /* @__PURE__ */ jsx(Popover, {
 		...props,
 		offset,
-		className: cx(Popover_module_default.popover, className),
+		className: cx("panneau-popover", Popover_module_default.popover, className),
 		UNSTABLE_portalContainer: container,
 		children
 	});

package/dist/popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":["Popover","AriaPopover","styles"],"sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n    Popover as AriaPopover,\n    type PopoverProps as AriaPopoverProps,\n    Dialog,\n} from 'react-aria-components';\n\nimport { usePortalContainer } from '../root/PanneauRoot';\nimport { cx } from '../utils/cx';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps extends Omit<\n    AriaPopoverProps,\n    'className' | 'style' | 'children' | 'UNSTABLE_portalContainer'\n> {\n    children?: ReactNode;\n    /** Accessible label of the popover's dialog, when it has no heading. */\n    'aria-label'?: string;\n    className?: string;\n    dialogClassName?: string;\n}\n\n/**\n * A popover with free content, inside a `PopoverTrigger` with its button as the first child. Its\n * content is a non-modal dialog: focus moves into it and comes back to the button when it closes.\n */\nexport function Popover({\n    children,\n    'aria-label': ariaLabel,\n    className,\n    dialogClassName,\n    offset = 6,\n    ...props\n}: PopoverProps) {\n    const container = usePortalContainer();\n    if (container === null) {\n        return null;\n    }\n    return (\n        <AriaPopover\n            {...props}\n            offset={offset}\n            className={cx(styles.popover, className)}\n            UNSTABLE_portalContainer={container}\n        >\n            <Dialog aria-label={ariaLabel} className={cx(styles.dialog, dialogClassName)}>\n                {children}\n            </Dialog>\n        </AriaPopover>\n    );\n}\n\n/** The popover surface without a dialog, for listboxes and menus. */\nexport function PopoverSurface({\n    children,\n    className,\n    offset = 6,\n    ...props\n}: Omit<PopoverProps, 'aria-label' | 'dialogClassName'>) {\n    const container = usePortalContainer();\n    if (container === null) {\n        return null;\n    }\n    return (\n        <AriaPopover\n            {...props}\n            offset={offset}\n            className={cx(styles.popover, className)}\n            UNSTABLE_portalContainer={container}\n        >\n            {children}\n        </AriaPopover>\n    );\n}\n\nexport { DialogTrigger as PopoverTrigger } from 'react-aria-components';\n"],"mappings":";;;;;;;;;;AA0BA,SAAgBA,UAAQ,EACpB,UACA,cAAc,WACd,WACA,iBACA,SAAS,GACT,GAAG,SACU;CACb,MAAM,YAAY,mBAAmB;CACrC,IAAI,cAAc,MACd,OAAO;CAEX,OACI,oBAACC,SAAD;EACI,GAAI;EACI;EACR,WAAW,GAAGC,uBAAO,SAAS,SAAS;EACvC,0BAA0B;EAE1B,UAAA,oBAAC,QAAD;GAAQ,cAAY;GAAW,WAAW,GAAGA,uBAAO,QAAQ,eAAe;GACtE;EACG,CAAA;CACC,CAAA;AAErB;;AAGA,SAAgB,eAAe,EAC3B,UACA,WACA,SAAS,GACT,GAAG,SACkD;CACrD,MAAM,YAAY,mBAAmB;CACrC,IAAI,cAAc,MACd,OAAO;CAEX,OACI,oBAACD,SAAD;EACI,GAAI;EACI;EACR,WAAW,GAAGC,uBAAO,SAAS,SAAS;EACvC,0BAA0B;EAEzB;CACQ,CAAA;AAErB"}
+{"version":3,"file":"Popover.js","names":["Popover","AriaPopover","styles"],"sources":["../../src/popover/Popover.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n    Popover as AriaPopover,\n    type PopoverProps as AriaPopoverProps,\n    Dialog,\n} from 'react-aria-components';\n\nimport { usePortalContainer } from '../root/PanneauRoot';\nimport { cx } from '../utils/cx';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps extends Omit<\n    AriaPopoverProps,\n    'className' | 'style' | 'children' | 'UNSTABLE_portalContainer'\n> {\n    children?: ReactNode;\n    /** Accessible label of the popover's dialog, when it has no heading. */\n    'aria-label'?: string;\n    className?: string;\n    dialogClassName?: string;\n}\n\n/**\n * A popover with free content, inside a `PopoverTrigger` with its button as the first child. Its\n * content is a non-modal dialog: focus moves into it and comes back to the button when it closes.\n */\nexport function Popover({\n    children,\n    'aria-label': ariaLabel,\n    className,\n    dialogClassName,\n    offset = 6,\n    ...props\n}: PopoverProps) {\n    const container = usePortalContainer();\n    if (container === null) {\n        return null;\n    }\n    return (\n        <AriaPopover\n            {...props}\n            offset={offset}\n            className={cx('panneau-popover', styles.popover, className)}\n            UNSTABLE_portalContainer={container}\n        >\n            <Dialog aria-label={ariaLabel} className={cx(styles.dialog, dialogClassName)}>\n                {children}\n            </Dialog>\n        </AriaPopover>\n    );\n}\n\n/** The popover surface without a dialog, for listboxes and menus. */\nexport function PopoverSurface({\n    children,\n    className,\n    offset = 6,\n    ...props\n}: Omit<PopoverProps, 'aria-label' | 'dialogClassName'>) {\n    const container = usePortalContainer();\n    if (container === null) {\n        return null;\n    }\n    return (\n        <AriaPopover\n            {...props}\n            offset={offset}\n            className={cx('panneau-popover', styles.popover, className)}\n            UNSTABLE_portalContainer={container}\n        >\n            {children}\n        </AriaPopover>\n    );\n}\n\nexport { DialogTrigger as PopoverTrigger } from 'react-aria-components';\n"],"mappings":";;;;;;;;;;AA0BA,SAAgBA,UAAQ,EACpB,UACA,cAAc,WACd,WACA,iBACA,SAAS,GACT,GAAG,SACU;CACb,MAAM,YAAY,mBAAmB;CACrC,IAAI,cAAc,MACd,OAAO;CAEX,OACI,oBAACC,SAAD;EACI,GAAI;EACI;EACR,WAAW,GAAG,mBAAmBC,uBAAO,SAAS,SAAS;EAC1D,0BAA0B;EAE1B,UAAA,oBAAC,QAAD;GAAQ,cAAY;GAAW,WAAW,GAAGA,uBAAO,QAAQ,eAAe;GACtE;EACG,CAAA;CACC,CAAA;AAErB;;AAGA,SAAgB,eAAe,EAC3B,UACA,WACA,SAAS,GACT,GAAG,SACkD;CACrD,MAAM,YAAY,mBAAmB;CACrC,IAAI,cAAc,MACd,OAAO;CAEX,OACI,oBAACD,SAAD;EACI,GAAI;EACI;EACR,WAAW,GAAG,mBAAmBC,uBAAO,SAAS,SAAS;EAC1D,0BAA0B;EAEzB;CACQ,CAAA;AAErB"}

package/dist/popover/Popover.module.js

@@ -1,8 +1,8 @@
 import "./Popover.css";
 //#region src/popover/Popover.module.css
-var popover = "panneau-popover-KacUIM";
-var pop = "panneau-pop-fB47s-";
-var dialog = "panneau-dialog-2cVt0D";
+var popover = "panneau-popover";
+var pop = "panneau-popover-pop";
+var dialog = "panneau-popover-dialog";
 var Popover_module_default = {
 	popover,
 	pop,

package/dist/popover/Popover.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.module.js","names":[],"sources":["../../src/popover/Popover.module.css"],"sourcesContent":[".popover {\n    min-width: var(--trigger-width, 10rem);\n    max-width: calc(100vw - 2 * var(--panneau-space-4));\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-surface-raised);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-lg);\n    box-shadow: var(--panneau-shadow-lg);\n    outline: none;\n    overflow: auto;\n    z-index: var(--panneau-z-overlay);\n}\n\n.popover[data-entering] {\n    animation: pop var(--panneau-duration) ease-out;\n}\n\n.popover[data-exiting] {\n    animation: pop var(--panneau-duration) ease-in reverse;\n}\n\n.dialog {\n    padding: var(--panneau-space-3);\n    outline: none;\n}\n\n@keyframes pop {\n    from {\n        opacity: 0;\n        transform: scale(0.97);\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"Popover.module.js","names":[],"sources":["../../src/popover/Popover.module.css"],"sourcesContent":[".popover {\n    min-width: var(--trigger-width, 10rem);\n    max-width: calc(100vw - 2 * var(--panneau-space-4));\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-popover-bg, var(--panneau-color-surface-raised));\n    border: var(--panneau-border-width) solid\n        var(--panneau-popover-border-color, var(--panneau-color-border));\n    border-radius: var(--panneau-popover-radius, var(--panneau-radius-lg));\n    box-shadow: var(--panneau-popover-shadow, var(--panneau-shadow-lg));\n    outline: none;\n    overflow: auto;\n    z-index: var(--panneau-z-overlay);\n}\n\n.popover[data-entering] {\n    animation: pop var(--panneau-duration) ease-out;\n}\n\n.popover[data-exiting] {\n    animation: pop var(--panneau-duration) ease-in reverse;\n}\n\n.dialog {\n    padding: var(--panneau-popover-padding, var(--panneau-space-3));\n    outline: none;\n}\n\n@keyframes pop {\n    from {\n        opacity: 0;\n        transform: scale(0.97);\n    }\n}\n"],"mappings":""}

package/dist/popover/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Popover. */
+export declare const popoverTokens: import("..").ComponentTokens<"popover", "panneau-popover-radius" | "panneau-popover-padding" | "panneau-popover-bg" | "panneau-popover-border-color" | "panneau-popover-shadow">;
+//# sourceMappingURL=tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/popover/tokens.ts"],"names":[],"mappings":"AAEA,yBAAyB;AACzB,eAAO,MAAM,aAAa,kLAWxB,CAAC"}

package/dist/popover/tokens.js

@@ -0,0 +1,19 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/popover/tokens.ts
+/** Tokens of Popover. */
+var popoverTokens = defineComponentTokens("popover", {
+	/** Background. */
+	bg: "var(--panneau-color-surface-raised)",
+	/** Border color. */
+	"border-color": "var(--panneau-color-border)",
+	/** Corner radius. */
+	radius: "var(--panneau-radius-lg)",
+	/** Shadow. */
+	shadow: "var(--panneau-shadow-lg)",
+	/** Padding of the content. */
+	padding: "var(--panneau-space-3)"
+});
+//#endregion
+export { popoverTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/popover/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/popover/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Popover. */\nexport const popoverTokens = defineComponentTokens('popover', {\n    /** Background. */\n    bg: 'var(--panneau-color-surface-raised)',\n    /** Border color. */\n    'border-color': 'var(--panneau-color-border)',\n    /** Corner radius. */\n    radius: 'var(--panneau-radius-lg)',\n    /** Shadow. */\n    shadow: 'var(--panneau-shadow-lg)',\n    /** Padding of the content. */\n    padding: 'var(--panneau-space-3)',\n});\n"],"mappings":";;;AAGA,IAAa,gBAAgB,sBAAsB,WAAW;;CAE1D,IAAI;;CAEJ,gBAAgB;;CAEhB,QAAQ;;CAER,QAAQ;;CAER,SAAS;AACb,CAAC"}

package/dist/prose/Prose.css

@@ -0,0 +1,141 @@
+/*
+ * Rich content: Panneau styles no element outside of this container, since it is often embedded in
+ * someone else's page. Rules use :where() on the elements, so a class on any of them wins.
+ */
+
+.panneau-prose {
+    line-height: var(--panneau-prose-line-height, 1.6);
+    overflow-wrap: break-word;
+}
+
+.panneau-prose > * + * {
+    margin-top: var(--panneau-prose-gap, var(--panneau-space-4));
+}
+
+.panneau-prose > :where(h1, h2, h3, h4, h5, h6):not(:first-child) {
+    margin-top: var(--panneau-prose-heading-gap, var(--panneau-space-6));
+}
+
+.panneau-prose :where(h1, h2, h3, h4, h5, h6) {
+    font-family: var(--panneau-heading-font-family, var(--panneau-font-family-heading));
+    color: var(--panneau-heading-color, inherit);
+}
+
+.panneau-prose :where(h1) {
+    font-size: var(--panneau-heading-1-font-size, 1.75rem);
+    font-weight: var(--panneau-heading-1-font-weight, var(--panneau-font-weight-bold));
+    line-height: var(--panneau-heading-1-line-height, var(--panneau-line-height-tight));
+    letter-spacing: var(--panneau-heading-1-letter-spacing, -0.015em);
+}
+
+.panneau-prose :where(h2) {
+    font-size: var(--panneau-heading-2-font-size, 1.375rem);
+    font-weight: var(--panneau-heading-2-font-weight, var(--panneau-font-weight-bold));
+    line-height: var(--panneau-heading-2-line-height, var(--panneau-line-height-tight));
+    letter-spacing: var(--panneau-heading-2-letter-spacing, -0.01em);
+}
+
+.panneau-prose :where(h3) {
+    font-size: var(--panneau-heading-3-font-size, 1.125rem);
+    font-weight: var(--panneau-heading-3-font-weight, var(--panneau-font-weight-bold));
+    line-height: var(--panneau-heading-3-line-height, var(--panneau-line-height-tight));
+    letter-spacing: var(--panneau-heading-3-letter-spacing, normal);
+}
+
+.panneau-prose :where(h4, h5, h6) {
+    font-size: var(--panneau-heading-4-font-size, var(--panneau-font-size-lg));
+    font-weight: var(--panneau-heading-4-font-weight, var(--panneau-font-weight-bold));
+    line-height: var(--panneau-heading-4-line-height, var(--panneau-line-height-tight));
+    letter-spacing: var(--panneau-heading-4-letter-spacing, normal);
+}
+
+.panneau-prose :where(ul, ol) {
+    padding-inline-start: var(--panneau-prose-list-indent, 1.5em);
+}
+
+.panneau-prose :where(ul) {
+    list-style: disc;
+}
+
+.panneau-prose :where(ol) {
+    list-style: decimal;
+}
+
+.panneau-prose :where(li + li, li > ul, li > ol) {
+    margin-top: var(--panneau-space-1);
+}
+
+.panneau-prose :where(a) {
+    color: var(--panneau-prose-link-color, var(--panneau-color-link));
+    text-decoration: underline;
+}
+
+.panneau-prose :where(strong, b) {
+    font-weight: var(--panneau-font-weight-bold);
+}
+
+.panneau-prose :where(code, kbd, samp, pre) {
+    color: var(--panneau-prose-code-color, inherit);
+    font-family: var(--panneau-font-family-mono);
+    font-size: var(--panneau-prose-code-font-size, 0.875em);
+}
+
+.panneau-prose :where(:not(pre) > code) {
+    padding: 0.1em 0.3em;
+    border-radius: var(--panneau-prose-code-radius, var(--panneau-radius-sm));
+    background-color: var(--panneau-prose-code-bg, var(--panneau-color-surface-sunken));
+}
+
+.panneau-prose :where(pre) {
+    overflow-x: auto;
+    padding: var(--panneau-space-3) var(--panneau-space-4);
+    border-radius: var(--panneau-prose-code-radius, var(--panneau-radius-sm));
+    background-color: var(--panneau-prose-code-bg, var(--panneau-color-surface-sunken));
+    line-height: var(--panneau-line-height);
+}
+
+.panneau-prose :where(pre code) {
+    font-size: inherit;
+}
+
+.panneau-prose :where(blockquote) {
+    margin-inline: 0;
+    padding-inline-start: var(--panneau-space-4);
+    border-inline-start: 3px solid
+        var(--panneau-prose-quote-border-color, var(--panneau-color-border));
+    color: var(--panneau-prose-quote-color, var(--panneau-color-text-muted));
+}
+
+.panneau-prose :where(figcaption) {
+    margin-top: var(--panneau-space-2);
+    color: var(--panneau-prose-quote-color, var(--panneau-color-text-muted));
+    font-size: var(--panneau-font-size-sm);
+}
+
+.panneau-prose :where(hr) {
+    border: 0;
+    border-top: var(--panneau-border-width) solid
+        var(--panneau-prose-border-color, var(--panneau-color-border));
+}
+
+.panneau-prose :where(table) {
+    width: 100%;
+    border-collapse: collapse;
+    font-variant-numeric: var(--panneau-font-numeric);
+}
+
+.panneau-prose :where(th, td) {
+    padding: var(--panneau-space-2) var(--panneau-space-3);
+    border-bottom: var(--panneau-border-width) solid
+        var(--panneau-prose-border-color, var(--panneau-color-border));
+    text-align: start;
+    vertical-align: top;
+}
+
+.panneau-prose :where(th) {
+    font-weight: var(--panneau-font-weight-bold);
+}
+
+.panneau-prose :where(img, video) {
+    height: auto;
+}

package/dist/prose/Prose.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react';
+export interface ProseProps extends HTMLAttributes<HTMLElement> {
+    /** Element to render. Defaults to `div`. */
+    as?: 'div' | 'article' | 'section';
+}
+/**
+ * Styles the elements of rich content (headings, paragraphs, lists, links, quotes, code, tables):
+ * the output of an editor, Markdown, or a help page. Outside of it, Panneau styles no element.
+ */
+export declare function Prose({ as: Element, className, ...props }: ProseProps): import("react").JSX.Element;
+//# sourceMappingURL=Prose.d.ts.map

package/dist/prose/Prose.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Prose.d.ts","sourceRoot":"","sources":["../../src/prose/Prose.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAK5C,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC3D,4CAA4C;IAC5C,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;CACtC;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,EAAE,EAAE,EAAE,OAAe,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAE7E"}

package/dist/prose/Prose.js

@@ -0,0 +1,18 @@
+import { cx } from "../utils/cx.js";
+import Prose_module_default from "./Prose.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/prose/Prose.tsx
+/**
+* Styles the elements of rich content (headings, paragraphs, lists, links, quotes, code, tables):
+* the output of an editor, Markdown, or a help page. Outside of it, Panneau styles no element.
+*/
+function Prose({ as: Element = "div", className, ...props }) {
+	return /* @__PURE__ */ jsx(Element, {
+		...props,
+		className: cx("panneau-prose", Prose_module_default.prose, className)
+	});
+}
+//#endregion
+export { Prose };
+
+//# sourceMappingURL=Prose.js.map

package/dist/prose/Prose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Prose.js","names":["styles"],"sources":["../../src/prose/Prose.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport { cx } from '../utils/cx';\nimport styles from './Prose.module.css';\n\nexport interface ProseProps extends HTMLAttributes<HTMLElement> {\n    /** Element to render. Defaults to `div`. */\n    as?: 'div' | 'article' | 'section';\n}\n\n/**\n * Styles the elements of rich content (headings, paragraphs, lists, links, quotes, code, tables):\n * the output of an editor, Markdown, or a help page. Outside of it, Panneau styles no element.\n */\nexport function Prose({ as: Element = 'div', className, ...props }: ProseProps) {\n    return <Element {...props} className={cx('panneau-prose', styles.prose, className)} />;\n}\n"],"mappings":";;;;;;;;AAcA,SAAgB,MAAM,EAAE,IAAI,UAAU,OAAO,WAAW,GAAG,SAAqB;CAC5E,OAAO,oBAAC,SAAD;EAAS,GAAI;EAAO,WAAW,GAAG,iBAAiBA,qBAAO,OAAO,SAAS;CAAE,CAAA;AACvF"}

package/dist/prose/Prose.module.js

@@ -0,0 +1,8 @@
+import "./Prose.css";
+//#region src/prose/Prose.module.css
+var prose = "panneau-prose";
+var Prose_module_default = { prose };
+//#endregion
+export { Prose_module_default as default, prose };
+
+//# sourceMappingURL=Prose.module.js.map

package/dist/prose/Prose.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Prose.module.js","names":[],"sources":["../../src/prose/Prose.module.css"],"sourcesContent":["/*\n * Rich content: Panneau styles no element outside of this container, since it is often embedded in\n * someone else's page. Rules use :where() on the elements, so a class on any of them wins.\n */\n\n.prose {\n    line-height: var(--panneau-prose-line-height, 1.6);\n    overflow-wrap: break-word;\n}\n\n.prose > * + * {\n    margin-top: var(--panneau-prose-gap, var(--panneau-space-4));\n}\n\n.prose > :where(h1, h2, h3, h4, h5, h6):not(:first-child) {\n    margin-top: var(--panneau-prose-heading-gap, var(--panneau-space-6));\n}\n\n.prose :where(h1, h2, h3, h4, h5, h6) {\n    font-family: var(--panneau-heading-font-family, var(--panneau-font-family-heading));\n    color: var(--panneau-heading-color, inherit);\n}\n\n.prose :where(h1) {\n    font-size: var(--panneau-heading-1-font-size, 1.75rem);\n    font-weight: var(--panneau-heading-1-font-weight, var(--panneau-font-weight-bold));\n    line-height: var(--panneau-heading-1-line-height, var(--panneau-line-height-tight));\n    letter-spacing: var(--panneau-heading-1-letter-spacing, -0.015em);\n}\n\n.prose :where(h2) {\n    font-size: var(--panneau-heading-2-font-size, 1.375rem);\n    font-weight: var(--panneau-heading-2-font-weight, var(--panneau-font-weight-bold));\n    line-height: var(--panneau-heading-2-line-height, var(--panneau-line-height-tight));\n    letter-spacing: var(--panneau-heading-2-letter-spacing, -0.01em);\n}\n\n.prose :where(h3) {\n    font-size: var(--panneau-heading-3-font-size, 1.125rem);\n    font-weight: var(--panneau-heading-3-font-weight, var(--panneau-font-weight-bold));\n    line-height: var(--panneau-heading-3-line-height, var(--panneau-line-height-tight));\n    letter-spacing: var(--panneau-heading-3-letter-spacing, normal);\n}\n\n.prose :where(h4, h5, h6) {\n    font-size: var(--panneau-heading-4-font-size, var(--panneau-font-size-lg));\n    font-weight: var(--panneau-heading-4-font-weight, var(--panneau-font-weight-bold));\n    line-height: var(--panneau-heading-4-line-height, var(--panneau-line-height-tight));\n    letter-spacing: var(--panneau-heading-4-letter-spacing, normal);\n}\n\n.prose :where(ul, ol) {\n    padding-inline-start: var(--panneau-prose-list-indent, 1.5em);\n}\n\n.prose :where(ul) {\n    list-style: disc;\n}\n\n.prose :where(ol) {\n    list-style: decimal;\n}\n\n.prose :where(li + li, li > ul, li > ol) {\n    margin-top: var(--panneau-space-1);\n}\n\n.prose :where(a) {\n    color: var(--panneau-prose-link-color, var(--panneau-color-link));\n    text-decoration: underline;\n}\n\n.prose :where(strong, b) {\n    font-weight: var(--panneau-font-weight-bold);\n}\n\n.prose :where(code, kbd, samp, pre) {\n    color: var(--panneau-prose-code-color, inherit);\n    font-family: var(--panneau-font-family-mono);\n    font-size: var(--panneau-prose-code-font-size, 0.875em);\n}\n\n.prose :where(:not(pre) > code) {\n    padding: 0.1em 0.3em;\n    border-radius: var(--panneau-prose-code-radius, var(--panneau-radius-sm));\n    background-color: var(--panneau-prose-code-bg, var(--panneau-color-surface-sunken));\n}\n\n.prose :where(pre) {\n    overflow-x: auto;\n    padding: var(--panneau-space-3) var(--panneau-space-4);\n    border-radius: var(--panneau-prose-code-radius, var(--panneau-radius-sm));\n    background-color: var(--panneau-prose-code-bg, var(--panneau-color-surface-sunken));\n    line-height: var(--panneau-line-height);\n}\n\n.prose :where(pre code) {\n    font-size: inherit;\n}\n\n.prose :where(blockquote) {\n    margin-inline: 0;\n    padding-inline-start: var(--panneau-space-4);\n    border-inline-start: 3px solid\n        var(--panneau-prose-quote-border-color, var(--panneau-color-border));\n    color: var(--panneau-prose-quote-color, var(--panneau-color-text-muted));\n}\n\n.prose :where(figcaption) {\n    margin-top: var(--panneau-space-2);\n    color: var(--panneau-prose-quote-color, var(--panneau-color-text-muted));\n    font-size: var(--panneau-font-size-sm);\n}\n\n.prose :where(hr) {\n    border: 0;\n    border-top: var(--panneau-border-width) solid\n        var(--panneau-prose-border-color, var(--panneau-color-border));\n}\n\n.prose :where(table) {\n    width: 100%;\n    border-collapse: collapse;\n    font-variant-numeric: var(--panneau-font-numeric);\n}\n\n.prose :where(th, td) {\n    padding: var(--panneau-space-2) var(--panneau-space-3);\n    border-bottom: var(--panneau-border-width) solid\n        var(--panneau-prose-border-color, var(--panneau-color-border));\n    text-align: start;\n    vertical-align: top;\n}\n\n.prose :where(th) {\n    font-weight: var(--panneau-font-weight-bold);\n}\n\n.prose :where(img, video) {\n    height: auto;\n}\n"],"mappings":""}

package/dist/prose/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Prose. Its headings use the tokens of Heading. */
+export declare const proseTokens: import("..").ComponentTokens<"prose", "panneau-prose-gap" | "panneau-prose-border-color" | "panneau-prose-line-height" | "panneau-prose-heading-gap" | "panneau-prose-list-indent" | "panneau-prose-link-color" | "panneau-prose-code-font-size" | "panneau-prose-code-color" | "panneau-prose-code-bg" | "panneau-prose-code-radius" | "panneau-prose-quote-border-color" | "panneau-prose-quote-color">;
+//# sourceMappingURL=tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/prose/tokens.ts"],"names":[],"mappings":"AAEA,+DAA+D;AAC/D,eAAO,MAAM,WAAW,2YAyBtB,CAAC"}