@panneau/ui 5.0.0-alpha.4 → 5.0.0-alpha.6

package/dist/menu/Menu.js

@@ -2,45 +2,130 @@ import { cx } from "../utils/cx.js";
 import { Icon } from "../icon/Icon.js";
 import { PopoverSurface } from "../popover/Popover.js";
 import ListBox_module_default from "../select/ListBox.module.js";
-import { Menu, MenuItem, MenuTrigger, Separator, Text } from "react-aria-components";
-import { jsx, jsxs } from "react/jsx-runtime";
+import Menu_module_default from "./Menu.module.js";
+import { Check } from "lucide-react";
+import { Header, Menu, MenuItem, MenuSection, MenuTrigger, Separator, Text } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { c } from "react/compiler-runtime";
 //#region src/menu/Menu.tsx
 /**
 * A menu of actions, inside a `MenuTrigger` with its button as the first child. Arrow keys move
-* between items, and typing a letter jumps to an item.
+* between items, and typing a letter jumps to an item. With `selectionMode` (`single` or
+* `multiple`) and `selectedKeys`, its items are choices, and the selected ones have a check.
 */
-function Menu$1({ className, popoverClassName, placement = "bottom start", ...props }) {
+function Menu$1({ className, popoverClassName, placement = "bottom start", footer, footerClassName, ...props }) {
+	const footerId = useId();
+	const hasFooter = footer !== void 0 && footer !== null;
+	const menu = /* @__PURE__ */ jsx(Menu, {
+		...props,
+		"aria-describedby": hasFooter ? [props["aria-describedby"], footerId].filter(Boolean).join(" ") : props["aria-describedby"],
+		className: cx("panneau-menu", ListBox_module_default.listBox, className)
+	});
 	return /* @__PURE__ */ jsx(PopoverSurface, {
 		placement,
 		className: popoverClassName,
-		children: /* @__PURE__ */ jsx(Menu, {
-			...props,
-			className: cx("panneau-menu", ListBox_module_default.listBox, className)
-		})
+		children: hasFooter ? /* @__PURE__ */ jsxs("div", {
+			className: Menu_module_default.layout,
+			children: [menu, /* @__PURE__ */ jsx("div", {
+				id: footerId,
+				className: cx(Menu_module_default.footer, footerClassName),
+				children: footer
+			})]
+		}) : menu
 	});
 }
-/** An item of a `Menu`. */
-function MenuItem$1({ children, icon, description, isDanger = false, className, textValue, ...props }) {
-	return /* @__PURE__ */ jsxs(MenuItem, {
+/**
+* An item of a `Menu`. In a menu with a `selectionMode`, a selected item has a check at its end,
+* and the role of a radio (single) or a checkbox (multiple) item.
+*/
+function MenuItem$1({ children, icon, media, description, isDanger = false, className, textValue, ...props }) {
+	return /* @__PURE__ */ jsx(MenuItem, {
 		...props,
 		textValue: textValue ?? (typeof children === "string" ? children : void 0),
-		className: cx("panneau-menu-item", ListBox_module_default.item, className),
+		className: cx("panneau-menu-item", ListBox_module_default.item, Menu_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,
-			children: [/* @__PURE__ */ jsx(Text, {
-				slot: "label",
-				className: ListBox_module_default.itemLabel,
-				children
-			}), description !== void 0 ? /* @__PURE__ */ jsx(Text, {
-				slot: "description",
-				className: ListBox_module_default.itemDescription,
-				children: description
-			}) : null]
-		})]
+		children: ({ isSelected, selectionMode }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			media !== void 0 && media !== null ? /* @__PURE__ */ jsx("span", {
+				className: Menu_module_default.media,
+				children: media
+			}) : icon !== void 0 ? /* @__PURE__ */ jsx(Icon, { icon }) : null,
+			/* @__PURE__ */ jsxs("span", {
+				className: ListBox_module_default.itemText,
+				children: [/* @__PURE__ */ jsx(Text, {
+					slot: "label",
+					className: ListBox_module_default.itemLabel,
+					children
+				}), description !== void 0 ? /* @__PURE__ */ jsx(Text, {
+					slot: "description",
+					className: ListBox_module_default.itemDescription,
+					children: description
+				}) : null]
+			}),
+			selectionMode !== "none" ? /* @__PURE__ */ jsx("span", {
+				className: Menu_module_default.check,
+				children: isSelected ? /* @__PURE__ */ jsx(Icon, {
+					icon: Check,
+					size: "sm"
+				}) : null
+			}) : null
+		] })
 	});
 }
+/** A group of items of a `Menu`, with a header. */
+function MenuSection$1(t0) {
+	const $ = c(16);
+	let children;
+	let className;
+	let headerClassName;
+	let props;
+	let title;
+	if ($[0] !== t0) {
+		({title, children, className, headerClassName, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = headerClassName;
+		$[4] = props;
+		$[5] = title;
+	} else {
+		children = $[1];
+		className = $[2];
+		headerClassName = $[3];
+		props = $[4];
+		title = $[5];
+	}
+	let t1;
+	if ($[6] !== className) {
+		t1 = cx(Menu_module_default.section, className);
+		$[6] = className;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== headerClassName || $[9] !== title) {
+		t2 = title !== void 0 && title !== null ? /* @__PURE__ */ jsx(Header, {
+			className: cx(Menu_module_default.header, headerClassName),
+			children: title
+		}) : null;
+		$[8] = headerClassName;
+		$[9] = title;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] !== children || $[12] !== props || $[13] !== t1 || $[14] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(MenuSection, {
+			...props,
+			className: t1,
+			children: [t2, children]
+		});
+		$[11] = children;
+		$[12] = props;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
+}
 /** A line between groups of menu items. */
 function MenuSeparator() {
 	const $ = c(1);
@@ -52,6 +137,6 @@ function MenuSeparator() {
 	return t0;
 }
 //#endregion
-export { Menu$1 as Menu, MenuItem$1 as MenuItem, MenuSeparator, MenuTrigger };
+export { Menu$1 as Menu, MenuItem$1 as MenuItem, MenuSection$1 as MenuSection, MenuSeparator, MenuTrigger };
 
 //# sourceMappingURL=Menu.js.map

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('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"}
+{"version":3,"file":"Menu.js","names":["title","children","Menu","AriaMenu","listBoxStyles","styles","MenuItem","AriaMenuItem","_Fragment","MenuSection","_c","AriaMenuSection"],"sources":["../../src/menu/Menu.tsx"],"sourcesContent":["import { Check } from 'lucide-react';\nimport { type ReactNode, useId } from 'react';\nimport {\n    Menu as AriaMenu,\n    MenuItem as AriaMenuItem,\n    type MenuItemProps as AriaMenuItemProps,\n    type MenuProps as AriaMenuProps,\n    MenuSection as AriaMenuSection,\n    type MenuSectionProps as AriaMenuSectionProps,\n    Header,\n    Separator,\n    Text,\n} from 'react-aria-components';\n\nimport { Icon, type IconComponent } from '../icon/Icon';\nimport { PopoverSurface } from '../popover/Popover';\nimport listBoxStyles from '../select/ListBox.module.css';\nimport { cx } from '../utils/cx';\nimport styles from './Menu.module.css';\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     * A short note under the items, after a line, such as \"Only this step changes.\". It isn't an\n     * item and can't be focused: the menu is described by it.\n     */\n    footer?: ReactNode;\n    footerClassName?: string;\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. With `selectionMode` (`single` or\n * `multiple`) and `selectedKeys`, its items are choices, and the selected ones have a check.\n */\nexport function Menu<T extends object>({\n    className,\n    popoverClassName,\n    placement = 'bottom start',\n    footer,\n    footerClassName,\n    ...props\n}: MenuProps<T>) {\n    const footerId = useId();\n    const hasFooter = footer !== undefined && footer !== null;\n    const menu = (\n        <AriaMenu\n            {...props}\n            aria-describedby={\n                hasFooter\n                    ? [props['aria-describedby'], footerId].filter(Boolean).join(' ')\n                    : props['aria-describedby']\n            }\n            className={cx('panneau-menu', listBoxStyles.listBox, className)}\n        />\n    );\n    return (\n        <PopoverSurface placement={placement} className={popoverClassName}>\n            {hasFooter ? (\n                <div className={styles.layout}>\n                    {menu}\n                    <div id={footerId} className={cx(styles.footer, footerClassName)}>\n                        {footer}\n                    </div>\n                </div>\n            ) : (\n                menu\n            )}\n        </PopoverSurface>\n    );\n}\n\nexport interface MenuItemProps extends Omit<AriaMenuItemProps, 'className' | 'style' | 'children'> {\n    children?: ReactNode;\n    icon?: IconComponent;\n    /**\n     * Leading media instead of an icon, such as an avatar or an image, sized with the item: larger\n     * when the item has a description.\n     */\n    media?: ReactNode;\n    description?: string;\n    /** Styles the item as destructive. */\n    isDanger?: boolean;\n    className?: string;\n}\n\n/**\n * An item of a `Menu`. In a menu with a `selectionMode`, a selected item has a check at its end,\n * and the role of a radio (single) or a checkbox (multiple) item.\n */\nexport function MenuItem({\n    children,\n    icon,\n    media,\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', listBoxStyles.item, styles.item, className)}\n            data-danger={isDanger || undefined}\n        >\n            {({ isSelected, selectionMode }) => (\n                <>\n                    {media !== undefined && media !== null ? (\n                        <span className={styles.media}>{media}</span>\n                    ) : icon !== undefined ? (\n                        <Icon icon={icon} />\n                    ) : null}\n                    <span className={listBoxStyles.itemText}>\n                        <Text slot=\"label\" className={listBoxStyles.itemLabel}>\n                            {children}\n                        </Text>\n                        {description !== undefined ? (\n                            <Text slot=\"description\" className={listBoxStyles.itemDescription}>\n                                {description}\n                            </Text>\n                        ) : null}\n                    </span>\n                    {selectionMode !== 'none' ? (\n                        <span className={styles.check}>\n                            {isSelected ? <Icon icon={Check} size=\"sm\" /> : null}\n                        </span>\n                    ) : null}\n                </>\n            )}\n        </AriaMenuItem>\n    );\n}\n\nexport interface MenuSectionProps<T extends object> extends Omit<\n    AriaMenuSectionProps<T>,\n    'className' | 'style' | 'children' | 'items'\n> {\n    /**\n     * The header of the section, a small muted eyebrow above its items, such as \"Publish on\". It\n     * labels the group. Without it, give the section an `aria-label`.\n     */\n    title?: ReactNode;\n    children?: ReactNode;\n    className?: string;\n    headerClassName?: string;\n}\n\n/** A group of items of a `Menu`, with a header. */\nexport function MenuSection<T extends object>({\n    title,\n    children,\n    className,\n    headerClassName,\n    ...props\n}: MenuSectionProps<T>) {\n    return (\n        <AriaMenuSection {...props} className={cx(styles.section, className)}>\n            {title !== undefined && title !== null ? (\n                <Header className={cx(styles.header, headerClassName)}>{title}</Header>\n            ) : null}\n            {children}\n        </AriaMenuSection>\n    );\n}\n\n/** A line between groups of menu items. */\nexport function MenuSeparator() {\n    return <Separator className={listBoxStyles.separator} />;\n}\n\nexport { MenuTrigger } from 'react-aria-components';\n"],"mappings":"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"}

package/dist/menu/Menu.module.js

@@ -0,0 +1,22 @@
+import "./Menu.css";
+//#region src/menu/Menu.module.css
+var layout = "panneau-menu-layout";
+var section = "panneau-menu-section";
+var header = "panneau-menu-header";
+var footer = "panneau-menu-footer";
+var media = "panneau-menu-media";
+var item = "panneau-menu-item";
+var check = "panneau-menu-check";
+var Menu_module_default = {
+	layout,
+	section,
+	header,
+	footer,
+	media,
+	item,
+	check
+};
+//#endregion
+export { check, Menu_module_default as default, footer, header, item, layout, media, section };
+
+//# sourceMappingURL=Menu.module.js.map

package/dist/menu/Menu.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.module.js","names":[],"sources":["../../src/menu/Menu.module.css"],"sourcesContent":["/* Parts of menus on top of the options of ListBox.module.css: sections, footer, media, selection. */\n\n/* A menu with a footer: the items scroll, the footer stays under them. */\n.layout {\n    display: flex;\n    flex-direction: column;\n    max-height: inherit;\n}\n\n.layout > [role='menu'] {\n    flex: 1 1 auto;\n    min-height: 0;\n}\n\n.section + .section {\n    margin-top: var(--panneau-space-1);\n}\n\n.header {\n    padding: var(--panneau-space-2) var(--panneau-list-box-item-padding-x, var(--panneau-space-2))\n        var(--panneau-space-1);\n    font-size: var(--panneau-menu-header-font-size, var(--panneau-font-size-xs));\n    font-weight: var(--panneau-menu-header-font-weight, var(--panneau-font-weight-medium));\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-menu-header-color, var(--panneau-color-text-muted));\n    text-transform: var(--panneau-menu-header-text-transform, uppercase);\n    letter-spacing: var(--panneau-menu-header-letter-spacing, 0.04em);\n}\n\n.footer {\n    flex: 0 0 auto;\n    padding: var(--panneau-space-2)\n        calc(\n            var(--panneau-list-box-padding, var(--panneau-space-1)) +\n                var(--panneau-list-box-item-padding-x, var(--panneau-space-2))\n        );\n    font-size: var(--panneau-menu-footer-font-size, var(--panneau-font-size-xs));\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-menu-footer-color, var(--panneau-color-text-muted));\n    border-top: var(--panneau-border-width) solid var(--panneau-color-border);\n}\n\n.media {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: var(--panneau-menu-media-size, 1.5rem);\n    height: var(--panneau-menu-media-size, 1.5rem);\n    overflow: hidden;\n    border-radius: var(--panneau-menu-media-radius, var(--panneau-radius-full));\n}\n\n.item:has([slot='description']) .media {\n    width: var(--panneau-menu-media-size-described, 2rem);\n    height: var(--panneau-menu-media-size-described, 2rem);\n}\n\n.media > :is(img, svg, video, picture) {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n/* The check of a selected item, at its end. */\n.check {\n    display: inline-flex;\n    flex: 0 0 auto;\n    justify-content: flex-end;\n    width: 1rem;\n    color: var(--panneau-color-text);\n}\n\n.item[data-selected] {\n    background-color: var(--panneau-menu-item-bg-selected, var(--panneau-color-surface-sunken));\n}\n\n/* A focused or hovered selected item: the hover color over the selected background. */\n.item[data-selected]:is([data-focused], [data-hovered]) {\n    background-image: linear-gradient(\n        var(--panneau-list-box-item-bg-hover, var(--panneau-color-hover)),\n        var(--panneau-list-box-item-bg-hover, var(--panneau-color-hover))\n    );\n}\n"],"mappings":""}

package/dist/menu/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Menu: its sections, its footer, and the media and selection of its items. */
+export declare const menuTokens: import("..").ComponentTokens<"menu", "panneau-menu-header-font-size" | "panneau-menu-header-font-weight" | "panneau-menu-header-color" | "panneau-menu-header-text-transform" | "panneau-menu-header-letter-spacing" | "panneau-menu-footer-font-size" | "panneau-menu-footer-color" | "panneau-menu-media-size" | "panneau-menu-media-size-described" | "panneau-menu-media-radius" | "panneau-menu-item-bg-selected">;
+//# sourceMappingURL=tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/menu/tokens.ts"],"names":[],"mappings":"AAEA,0FAA0F;AAC1F,eAAO,MAAM,UAAU,yZAuBrB,CAAC"}

package/dist/menu/tokens.js

@@ -0,0 +1,31 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/menu/tokens.ts
+/** Tokens of Menu: its sections, its footer, and the media and selection of its items. */
+var menuTokens = defineComponentTokens("menu", {
+	/** Font size of the header of a section. */
+	"header-font-size": "var(--panneau-font-size-xs)",
+	/** Font weight of the header of a section. */
+	"header-font-weight": "var(--panneau-font-weight-medium)",
+	/** Color of the header of a section. */
+	"header-color": "var(--panneau-color-text-muted)",
+	/** Case of the header of a section: `uppercase` makes it an eyebrow, `none` keeps its text. */
+	"header-text-transform": "uppercase",
+	/** Letter spacing of the header of a section. */
+	"header-letter-spacing": "0.04em",
+	/** Font size of the footer note. */
+	"footer-font-size": "var(--panneau-font-size-xs)",
+	/** Color of the footer note. */
+	"footer-color": "var(--panneau-color-text-muted)",
+	/** Size of the leading media of an item. */
+	"media-size": "1.5rem",
+	/** Size of the leading media of an item with a description, on two lines. */
+	"media-size-described": "2rem",
+	/** Corner radius of the leading media of an item: its content is clipped to it. */
+	"media-radius": "var(--panneau-radius-full)",
+	/** Background of a selected item. */
+	"item-bg-selected": "var(--panneau-color-surface-sunken)"
+});
+//#endregion
+export { menuTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/menu/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/menu/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Menu: its sections, its footer, and the media and selection of its items. */\nexport const menuTokens = defineComponentTokens('menu', {\n    /** Font size of the header of a section. */\n    'header-font-size': 'var(--panneau-font-size-xs)',\n    /** Font weight of the header of a section. */\n    'header-font-weight': 'var(--panneau-font-weight-medium)',\n    /** Color of the header of a section. */\n    'header-color': 'var(--panneau-color-text-muted)',\n    /** Case of the header of a section: `uppercase` makes it an eyebrow, `none` keeps its text. */\n    'header-text-transform': 'uppercase',\n    /** Letter spacing of the header of a section. */\n    'header-letter-spacing': '0.04em',\n    /** Font size of the footer note. */\n    'footer-font-size': 'var(--panneau-font-size-xs)',\n    /** Color of the footer note. */\n    'footer-color': 'var(--panneau-color-text-muted)',\n    /** Size of the leading media of an item. */\n    'media-size': '1.5rem',\n    /** Size of the leading media of an item with a description, on two lines. */\n    'media-size-described': '2rem',\n    /** Corner radius of the leading media of an item: its content is clipped to it. */\n    'media-radius': 'var(--panneau-radius-full)',\n    /** Background of a selected item. */\n    'item-bg-selected': 'var(--panneau-color-surface-sunken)',\n});\n"],"mappings":";;;AAGA,IAAa,aAAa,sBAAsB,QAAQ;;CAEpD,oBAAoB;;CAEpB,sBAAsB;;CAEtB,gBAAgB;;CAEhB,yBAAyB;;CAEzB,yBAAyB;;CAEzB,oBAAoB;;CAEpB,gBAAgB;;CAEhB,cAAc;;CAEd,wBAAwB;;CAExB,gBAAgB;;CAEhB,oBAAoB;AACxB,CAAC"}

package/dist/number-input/NumberInput.css

@@ -3,10 +3,24 @@
     overflow: hidden;
 }
 
+/* Without steppers, the control has its padding back. */
+.panneau-number-input-control.panneau-number-input-control[data-readonly] {
+    padding-inline-end: var(--panneau-input-padding-x, var(--panneau-control-padding-x));
+}
+
 .panneau-number-input-input {
     font-variant-numeric: var(--panneau-font-numeric);
 }
 
+/* The suffix sits between the value and the steppers, which have no padding of their own. */
+.panneau-number-input-suffix.panneau-number-input-suffix {
+    margin-inline: var(--panneau-space-2);
+}
+
+.panneau-number-input-control[data-readonly] .panneau-number-input-suffix {
+    margin-inline-end: 0;
+}
+
 .panneau-number-input-steppers {
     display: flex;
     flex-direction: column;
@@ -54,4 +68,8 @@
     .panneau-number-input-control.panneau-number-input-control {
         padding-inline-end: var(--panneau-space-3);
     }
+
+    .panneau-number-input-suffix.panneau-number-input-suffix {
+        margin-inline-end: 0;
+    }
 }

package/dist/number-input/NumberInput.js

@@ -42,7 +42,7 @@ function NumberInput({ label, description, errors = [], value, defaultValue, onC
 						className: cx(Field_module_default.bare, NumberInput_module_default.input, inputClassName)
 					}),
 					suffix !== void 0 ? /* @__PURE__ */ jsx("span", {
-						className: Field_module_default.adornment,
+						className: cx(Field_module_default.adornment, NumberInput_module_default.suffix),
 						children: suffix
 					}) : null,
 					isReadOnly !== true ? /* @__PURE__ */ jsxs("span", {

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('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"}
+{"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={cx(fieldStyles.adornment, styles.suffix)}>{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,WAAW,GAAGD,qBAAY,WAAWC,2BAAO,MAAM;MAAI,UAAA;KAAa,CAAA,IACzE;KACH,eAAe,OACZ,qBAAC,QAAD;MAAM,WAAWA,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

@@ -2,15 +2,17 @@ import "./NumberInput.css";
 //#region src/number-input/NumberInput.module.css
 var control = "panneau-number-input-control";
 var input = "panneau-number-input-input";
+var suffix = "panneau-number-input-suffix";
 var steppers = "panneau-number-input-steppers";
 var stepper = "panneau-number-input-stepper";
 var NumberInput_module_default = {
 	control,
 	input,
+	suffix,
 	steppers,
 	stepper
 };
 //#endregion
-export { control, NumberInput_module_default as default, input, stepper, steppers };
+export { control, NumberInput_module_default as default, input, stepper, steppers, suffix };
 
 //# sourceMappingURL=NumberInput.module.js.map

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: 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":""}
+{"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/* Without steppers, the control has its padding back. */\n.control.control[data-readonly] {\n    padding-inline-end: var(--panneau-input-padding-x, var(--panneau-control-padding-x));\n}\n\n.input {\n    font-variant-numeric: var(--panneau-font-numeric);\n}\n\n/* The suffix sits between the value and the steppers, which have no padding of their own. */\n.suffix.suffix {\n    margin-inline: var(--panneau-space-2);\n}\n\n.control[data-readonly] .suffix {\n    margin-inline-end: 0;\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    .suffix.suffix {\n        margin-inline-end: 0;\n    }\n}\n"],"mappings":""}

package/dist/pill-trigger/PillTrigger.css

@@ -0,0 +1,104 @@
+/* A compact rounded button that shows a current value: the trigger of a menu or a popover. */
+
+.panneau-pill-trigger {
+    display: inline-flex;
+    flex: 0 1 auto;
+    align-items: center;
+    gap: var(--panneau-pill-trigger-gap, var(--panneau-space-2));
+    max-width: 100%;
+    min-height: var(--panneau-control-height);
+    padding: 0 var(--panneau-pill-trigger-padding-x, var(--panneau-space-3));
+    font-family: inherit;
+    font-size: var(--panneau-pill-trigger-font-size, var(--panneau-font-size-md));
+    font-weight: var(--panneau-pill-trigger-font-weight, var(--panneau-font-weight-medium));
+    line-height: var(--panneau-line-height-tight);
+    color: var(--panneau-pill-trigger-color, var(--panneau-color-text));
+    text-align: start;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    background-color: var(--panneau-pill-trigger-bg, var(--panneau-color-surface-sunken));
+    border: var(--panneau-border-width) solid var(--panneau-pill-trigger-border-color, transparent);
+    border-radius: var(--panneau-pill-trigger-radius, var(--panneau-radius-full));
+    transition: background-color var(--panneau-duration);
+    -webkit-tap-highlight-color: transparent;
+}
+
+.panneau-pill-trigger[data-hovered],
+.panneau-pill-trigger[data-pressed],
+.panneau-pill-trigger[aria-expanded='true'] {
+    background-color: var(
+        --panneau-pill-trigger-bg-hover,
+        color-mix(in srgb, var(--panneau-color-text) 8%, var(--panneau-color-surface-sunken))
+    );
+}
+
+.panneau-pill-trigger[data-focus-visible] {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 2px;
+}
+
+.panneau-pill-trigger[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.55;
+}
+
+/* With media, the media sits as far from the start as from the top and the bottom. */
+.panneau-pill-trigger:has(.panneau-pill-trigger-media) {
+    padding-inline-start: calc(
+        (var(--panneau-control-height) - var(--panneau-pill-trigger-media-size, 1.5rem)) / 2 -
+            var(--panneau-border-width)
+    );
+}
+
+.panneau-pill-trigger-sm {
+    min-height: var(--panneau-control-height-sm);
+    padding: 0 var(--panneau-pill-trigger-padding-x-sm, var(--panneau-space-2));
+    font-size: var(--panneau-pill-trigger-font-size-sm, var(--panneau-font-size-sm));
+}
+
+.panneau-pill-trigger-sm:has(.panneau-pill-trigger-media) {
+    padding-inline-start: calc(
+        (var(--panneau-control-height-sm) - var(--panneau-pill-trigger-media-size-sm, 1.25rem)) /
+            2 - var(--panneau-border-width)
+    );
+}
+
+.panneau-pill-trigger-media {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: var(--panneau-pill-trigger-media-size, 1.5rem);
+    height: var(--panneau-pill-trigger-media-size, 1.5rem);
+    overflow: hidden;
+    border-radius: var(--panneau-pill-trigger-media-radius, var(--panneau-radius-full));
+}
+
+.panneau-pill-trigger-sm .panneau-pill-trigger-media {
+    width: var(--panneau-pill-trigger-media-size-sm, 1.25rem);
+    height: var(--panneau-pill-trigger-media-size-sm, 1.25rem);
+}
+
+.panneau-pill-trigger-media > :is(img, svg, video, picture) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.panneau-pill-trigger-value {
+    flex: 0 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.panneau-pill-trigger-chevron {
+    flex: 0 0 auto;
+    color: var(--panneau-color-text-muted);
+    transition: rotate var(--panneau-duration);
+}
+
+.panneau-pill-trigger[aria-expanded='true'] .panneau-pill-trigger-chevron {
+    rotate: 180deg;
+}

package/dist/pill-trigger/PillTrigger.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type ButtonProps as AriaButtonProps } from 'react-aria-components';
+export interface PillTriggerProps extends Omit<AriaButtonProps, 'className' | 'style' | 'children'> {
+    /** The current value, shown inline. */
+    children?: ReactNode;
+    /** Leading media, such as an avatar or an image, clipped to a circle by default. */
+    media?: ReactNode;
+    /** Defaults to `md`, the height of a control. */
+    size?: 'sm' | 'md';
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A compact rounded button that shows a current value, with an optional leading media and a
+ * chevron: the trigger of a `Menu` (in a `MenuTrigger`) or a `Popover` (in a `PopoverTrigger`).
+ * Its accessible name is its value: give it an `aria-label` that contains the value when the
+ * value alone doesn't say what it picks.
+ */
+export declare function PillTrigger({ children, media, size, className, ...props }: PillTriggerProps): import("react").JSX.Element;
+//# sourceMappingURL=PillTrigger.d.ts.map

package/dist/pill-trigger/PillTrigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillTrigger.d.ts","sourceRoot":"","sources":["../../src/pill-trigger/PillTrigger.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAwB,KAAK,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAMlG,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC1C,eAAe,EACf,WAAW,GAAG,OAAO,GAAG,UAAU,CACrC;IACG,uCAAuC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,oFAAoF;IACpF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,iDAAiD;IACjD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EACxB,QAAQ,EACR,KAAK,EACL,IAAW,EACX,SAAS,EACT,GAAG,KAAK,EACX,EAAE,gBAAgB,+BAkBlB"}

package/dist/pill-trigger/PillTrigger.js

@@ -0,0 +1,38 @@
+import { cx } from "../utils/cx.js";
+import { Icon } from "../icon/Icon.js";
+import PillTrigger_module_default from "./PillTrigger.module.js";
+import { ChevronDown } from "lucide-react";
+import { Button } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/pill-trigger/PillTrigger.tsx
+/**
+* A compact rounded button that shows a current value, with an optional leading media and a
+* chevron: the trigger of a `Menu` (in a `MenuTrigger`) or a `Popover` (in a `PopoverTrigger`).
+* Its accessible name is its value: give it an `aria-label` that contains the value when the
+* value alone doesn't say what it picks.
+*/
+function PillTrigger({ children, media, size = "md", className, ...props }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		...props,
+		className: cx("panneau-pill-trigger", PillTrigger_module_default.pillTrigger, size === "sm" && PillTrigger_module_default.sm, className),
+		children: [
+			media !== void 0 && media !== null ? /* @__PURE__ */ jsx("span", {
+				className: PillTrigger_module_default.media,
+				children: media
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: PillTrigger_module_default.value,
+				children
+			}),
+			/* @__PURE__ */ jsx(Icon, {
+				icon: ChevronDown,
+				size: "sm",
+				className: PillTrigger_module_default.chevron
+			})
+		]
+	});
+}
+//#endregion
+export { PillTrigger };
+
+//# sourceMappingURL=PillTrigger.js.map

package/dist/pill-trigger/PillTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillTrigger.js","names":["AriaButton","styles"],"sources":["../../src/pill-trigger/PillTrigger.tsx"],"sourcesContent":["import { ChevronDown } from 'lucide-react';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { Button as AriaButton, type ButtonProps as AriaButtonProps } from 'react-aria-components';\n\nimport { Icon } from '../icon/Icon';\nimport { cx } from '../utils/cx';\nimport styles from './PillTrigger.module.css';\n\nexport interface PillTriggerProps extends Omit<\n    AriaButtonProps,\n    'className' | 'style' | 'children'\n> {\n    /** The current value, shown inline. */\n    children?: ReactNode;\n    /** Leading media, such as an avatar or an image, clipped to a circle by default. */\n    media?: ReactNode;\n    /** Defaults to `md`, the height of a control. */\n    size?: 'sm' | 'md';\n    className?: string;\n    style?: CSSProperties;\n}\n\n/**\n * A compact rounded button that shows a current value, with an optional leading media and a\n * chevron: the trigger of a `Menu` (in a `MenuTrigger`) or a `Popover` (in a `PopoverTrigger`).\n * Its accessible name is its value: give it an `aria-label` that contains the value when the\n * value alone doesn't say what it picks.\n */\nexport function PillTrigger({\n    children,\n    media,\n    size = 'md',\n    className,\n    ...props\n}: PillTriggerProps) {\n    return (\n        <AriaButton\n            {...props}\n            className={cx(\n                'panneau-pill-trigger',\n                styles.pillTrigger,\n                size === 'sm' && styles.sm,\n                className,\n            )}\n        >\n            {media !== undefined && media !== null ? (\n                <span className={styles.media}>{media}</span>\n            ) : null}\n            <span className={styles.value}>{children}</span>\n            <Icon icon={ChevronDown} size=\"sm\" className={styles.chevron} />\n        </AriaButton>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;AA4BA,SAAgB,YAAY,EACxB,UACA,OACA,OAAO,MACP,WACA,GAAG,SACc;CACjB,OACI,qBAACA,QAAD;EACI,GAAI;EACJ,WAAW,GACP,wBACAC,2BAAO,aACP,SAAS,QAAQA,2BAAO,IACxB,SACJ;EAPJ,UAAA;GASK,UAAU,KAAA,KAAa,UAAU,OAC9B,oBAAC,QAAD;IAAM,WAAWA,2BAAO;IAAQ,UAAA;GAAY,CAAA,IAC5C;GACJ,oBAAC,QAAD;IAAM,WAAWA,2BAAO;IAAQ;GAAe,CAAA;GAC/C,oBAAC,MAAD;IAAM,MAAM;IAAa,MAAK;IAAK,WAAWA,2BAAO;GAAQ,CAAA;EACrD;;AAEpB"}

package/dist/pill-trigger/PillTrigger.module.js

@@ -0,0 +1,18 @@
+import "./PillTrigger.css";
+//#region src/pill-trigger/PillTrigger.module.css
+var pillTrigger = "panneau-pill-trigger";
+var media = "panneau-pill-trigger-media";
+var sm = "panneau-pill-trigger-sm";
+var value = "panneau-pill-trigger-value";
+var chevron = "panneau-pill-trigger-chevron";
+var PillTrigger_module_default = {
+	pillTrigger,
+	media,
+	sm,
+	value,
+	chevron
+};
+//#endregion
+export { chevron, PillTrigger_module_default as default, media, pillTrigger, sm, value };
+
+//# sourceMappingURL=PillTrigger.module.js.map

package/dist/pill-trigger/PillTrigger.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillTrigger.module.js","names":[],"sources":["../../src/pill-trigger/PillTrigger.module.css"],"sourcesContent":["/* A compact rounded button that shows a current value: the trigger of a menu or a popover. */\n\n.pillTrigger {\n    display: inline-flex;\n    flex: 0 1 auto;\n    align-items: center;\n    gap: var(--panneau-pill-trigger-gap, var(--panneau-space-2));\n    max-width: 100%;\n    min-height: var(--panneau-control-height);\n    padding: 0 var(--panneau-pill-trigger-padding-x, var(--panneau-space-3));\n    font-family: inherit;\n    font-size: var(--panneau-pill-trigger-font-size, var(--panneau-font-size-md));\n    font-weight: var(--panneau-pill-trigger-font-weight, var(--panneau-font-weight-medium));\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-pill-trigger-color, var(--panneau-color-text));\n    text-align: start;\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    background-color: var(--panneau-pill-trigger-bg, var(--panneau-color-surface-sunken));\n    border: var(--panneau-border-width) solid var(--panneau-pill-trigger-border-color, transparent);\n    border-radius: var(--panneau-pill-trigger-radius, var(--panneau-radius-full));\n    transition: background-color var(--panneau-duration);\n    -webkit-tap-highlight-color: transparent;\n}\n\n.pillTrigger[data-hovered],\n.pillTrigger[data-pressed],\n.pillTrigger[aria-expanded='true'] {\n    background-color: var(\n        --panneau-pill-trigger-bg-hover,\n        color-mix(in srgb, var(--panneau-color-text) 8%, var(--panneau-color-surface-sunken))\n    );\n}\n\n.pillTrigger[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.pillTrigger[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n/* With media, the media sits as far from the start as from the top and the bottom. */\n.pillTrigger:has(.media) {\n    padding-inline-start: calc(\n        (var(--panneau-control-height) - var(--panneau-pill-trigger-media-size, 1.5rem)) / 2 -\n            var(--panneau-border-width)\n    );\n}\n\n.sm {\n    min-height: var(--panneau-control-height-sm);\n    padding: 0 var(--panneau-pill-trigger-padding-x-sm, var(--panneau-space-2));\n    font-size: var(--panneau-pill-trigger-font-size-sm, var(--panneau-font-size-sm));\n}\n\n.sm:has(.media) {\n    padding-inline-start: calc(\n        (var(--panneau-control-height-sm) - var(--panneau-pill-trigger-media-size-sm, 1.25rem)) /\n            2 - var(--panneau-border-width)\n    );\n}\n\n.media {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: var(--panneau-pill-trigger-media-size, 1.5rem);\n    height: var(--panneau-pill-trigger-media-size, 1.5rem);\n    overflow: hidden;\n    border-radius: var(--panneau-pill-trigger-media-radius, var(--panneau-radius-full));\n}\n\n.sm .media {\n    width: var(--panneau-pill-trigger-media-size-sm, 1.25rem);\n    height: var(--panneau-pill-trigger-media-size-sm, 1.25rem);\n}\n\n.media > :is(img, svg, video, picture) {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n.value {\n    flex: 0 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.chevron {\n    flex: 0 0 auto;\n    color: var(--panneau-color-text-muted);\n    transition: rotate var(--panneau-duration);\n}\n\n.pillTrigger[aria-expanded='true'] .chevron {\n    rotate: 180deg;\n}\n"],"mappings":""}

package/dist/pill-trigger/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of PillTrigger. */
+export declare const pillTriggerTokens: import("..").ComponentTokens<"pill-trigger", "panneau-pill-trigger-color" | "panneau-pill-trigger-radius" | "panneau-pill-trigger-gap" | "panneau-pill-trigger-padding-x" | "panneau-pill-trigger-font-size" | "panneau-pill-trigger-font-weight" | "panneau-pill-trigger-padding-x-sm" | "panneau-pill-trigger-font-size-sm" | "panneau-pill-trigger-bg" | "panneau-pill-trigger-border-color" | "panneau-pill-trigger-media-size" | "panneau-pill-trigger-media-radius" | "panneau-pill-trigger-bg-hover" | "panneau-pill-trigger-media-size-sm">;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/pill-trigger/tokens.d.ts.map

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