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

package/dist/pill-trigger/tokens.js

@@ -0,0 +1,37 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/pill-trigger/tokens.ts
+/** Tokens of PillTrigger. */
+var pillTriggerTokens = defineComponentTokens("pill-trigger", {
+	/** Background. */
+	bg: "var(--panneau-color-surface-sunken)",
+	/** Background of a hovered, pressed or open trigger. */
+	"bg-hover": "color-mix(in srgb, var(--panneau-color-text) 8%, var(--panneau-color-surface-sunken))",
+	/** Color of the value. */
+	color: "var(--panneau-color-text)",
+	/** Color of the border: none by default. */
+	"border-color": "transparent",
+	/** Corner radius. */
+	radius: "var(--panneau-radius-full)",
+	/** Space between the media, the value and the chevron. */
+	gap: "var(--panneau-space-2)",
+	/** Horizontal padding. */
+	"padding-x": "var(--panneau-space-3)",
+	/** Horizontal padding of the small size. */
+	"padding-x-sm": "var(--panneau-space-2)",
+	/** Font size of the value. */
+	"font-size": "var(--panneau-font-size-md)",
+	/** Font size of the value, small size. */
+	"font-size-sm": "var(--panneau-font-size-sm)",
+	/** Font weight of the value. */
+	"font-weight": "var(--panneau-font-weight-medium)",
+	/** Size of the leading media. */
+	"media-size": "1.5rem",
+	/** Size of the leading media, small size. */
+	"media-size-sm": "1.25rem",
+	/** Corner radius of the leading media: its content is clipped to it. */
+	"media-radius": "var(--panneau-radius-full)"
+});
+//#endregion
+export { pillTriggerTokens };
+
+//# sourceMappingURL=tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/pill-trigger/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of PillTrigger. */\nexport const pillTriggerTokens = defineComponentTokens('pill-trigger', {\n    /** Background. */\n    bg: 'var(--panneau-color-surface-sunken)',\n    /** Background of a hovered, pressed or open trigger. */\n    'bg-hover':\n        'color-mix(in srgb, var(--panneau-color-text) 8%, var(--panneau-color-surface-sunken))',\n    /** Color of the value. */\n    color: 'var(--panneau-color-text)',\n    /** Color of the border: none by default. */\n    'border-color': 'transparent',\n    /** Corner radius. */\n    radius: 'var(--panneau-radius-full)',\n    /** Space between the media, the value and the chevron. */\n    gap: 'var(--panneau-space-2)',\n    /** Horizontal padding. */\n    'padding-x': 'var(--panneau-space-3)',\n    /** Horizontal padding of the small size. */\n    'padding-x-sm': 'var(--panneau-space-2)',\n    /** Font size of the value. */\n    'font-size': 'var(--panneau-font-size-md)',\n    /** Font size of the value, small size. */\n    'font-size-sm': 'var(--panneau-font-size-sm)',\n    /** Font weight of the value. */\n    'font-weight': 'var(--panneau-font-weight-medium)',\n    /** Size of the leading media. */\n    'media-size': '1.5rem',\n    /** Size of the leading media, small size. */\n    'media-size-sm': '1.25rem',\n    /** Corner radius of the leading media: its content is clipped to it. */\n    'media-radius': 'var(--panneau-radius-full)',\n});\n"],"mappings":";;;AAGA,IAAa,oBAAoB,sBAAsB,gBAAgB;;CAEnE,IAAI;;CAEJ,YACI;;CAEJ,OAAO;;CAEP,gBAAgB;;CAEhB,QAAQ;;CAER,KAAK;;CAEL,aAAa;;CAEb,gBAAgB;;CAEhB,aAAa;;CAEb,gBAAgB;;CAEhB,eAAe;;CAEf,cAAc;;CAEd,iBAAiB;;CAEjB,gBAAgB;AACpB,CAAC"}

package/dist/radio-group/RadioGroup.css

@@ -67,11 +67,101 @@
     min-width: 0;
 }
 
+.panneau-radio-group-option-label {
+    overflow-wrap: anywhere;
+}
+
 .panneau-radio-group-description {
     font-size: var(--panneau-font-size-sm);
     color: var(--panneau-color-text-muted);
 }
 
+/* Leading media of an option, between the radio and the label. */
+.panneau-radio-group-media {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: var(--panneau-radio-media-size, 2rem);
+    height: var(--panneau-radio-media-size, 2rem);
+    overflow: hidden;
+    border-radius: var(--panneau-radio-media-radius, var(--panneau-radius-full));
+}
+
+.panneau-radio-group-media > :is(img, svg, video, picture) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/*
+ * Cards: the options in a grid of --_panneau-radio-group-columns columns, inside a size container
+ * of their own, so that they become a single column when the group is narrow, wherever it is.
+ */
+
+.panneau-radio-group-grid {
+    container-type: inline-size;
+}
+
+.panneau-radio-group-cards .panneau-radio-group-options {
+    display: grid;
+    grid-template-columns: repeat(var(--_panneau-radio-group-columns, 2), minmax(0, 1fr));
+    gap: var(--panneau-radio-card-gap, var(--panneau-space-2));
+}
+
+@container (max-width: 28rem) {
+    .panneau-radio-group-cards .panneau-radio-group-options {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
+.panneau-radio-group-card {
+    display: flex;
+    align-items: center;
+    gap: var(--panneau-space-3);
+    padding: var(--panneau-radio-card-padding, var(--panneau-space-3));
+    background-color: var(--panneau-radio-card-bg, var(--panneau-color-surface));
+    border: var(--panneau-border-width) solid
+        var(--panneau-radio-card-border-color, var(--panneau-color-border));
+    border-radius: var(--panneau-radio-card-radius, var(--panneau-radius-md));
+    transition:
+        border-color var(--panneau-duration),
+        box-shadow var(--panneau-duration);
+}
+
+.panneau-radio-group-card .panneau-radio-group-circle {
+    margin-top: 0;
+}
+
+.panneau-radio-group-card .panneau-radio-group-option-label {
+    font-weight: var(--panneau-radio-card-label-font-weight, var(--panneau-font-weight-medium));
+}
+
+.panneau-radio-group-card[data-hovered] {
+    border-color: var(--panneau-radio-card-border-color-hover, var(--panneau-color-border-control));
+}
+
+/* The selected card: a border of twice the width, drawn inside so that nothing moves. */
+.panneau-radio-group-card[data-selected] {
+    border-color: var(--panneau-radio-card-border-color-selected, var(--panneau-color-accent));
+    box-shadow: inset 0 0 0 var(--panneau-border-width)
+        var(--panneau-radio-card-border-color-selected, var(--panneau-color-accent));
+}
+
+.panneau-radio-group-card[data-invalid] {
+    border-color: var(--panneau-color-danger);
+}
+
+/* A card shows the focus ring around itself, instead of around its radio. */
+.panneau-radio-group-card[data-focus-visible] {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 2px;
+}
+
+.panneau-radio-group-card[data-focus-visible] .panneau-radio-group-circle {
+    outline: none;
+}
+
 @media (pointer: coarse) {
     .panneau-radio-group-radio {
         min-height: 2.75rem;

package/dist/radio-group/RadioGroup.d.ts

@@ -1,12 +1,31 @@
+import type { ReactNode } from 'react';
 import { type RadioGroupProps as AriaRadioGroupProps } from 'react-aria-components';
 import { type FieldChromeProps } from '../field/FieldParts';
 import type { OptionValue, SelectOption } from '../select/Select';
+/** An option of a `RadioGroup`: a `SelectOption`, with an optional leading media. */
+export interface RadioGroupOption extends SelectOption {
+    /** Leading media, such as an avatar or an image, between the radio and the label. */
+    media?: ReactNode;
+}
+/** How a `RadioGroup` shows its options: a list of radios, or bordered cards in a grid. */
+export type RadioGroupAppearance = 'list' | 'cards';
 export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' | 'style' | 'children' | 'isInvalid' | 'validate' | 'value' | 'defaultValue' | 'onChange'>, FieldChromeProps {
-    options: readonly SelectOption[];
+    options: readonly RadioGroupOption[];
     value?: OptionValue | null;
     onChange?: (value: OptionValue) => void;
+    /**
+     * `list` (default) shows the options as radios, one under the other or side by side with
+     * `orientation="horizontal"`. `cards` shows them as bordered cards in a grid of `columns`, which
+     * becomes a single column in a narrow container. The selected card has a stronger border.
+     */
+    appearance?: RadioGroupAppearance;
+    /** Columns of cards, with `appearance="cards"`. Defaults to 2. */
+    columns?: number;
     radioClassName?: string;
 }
-/** A set of options where one can be picked, all visible at once. */
-export declare function RadioGroup({ options, value, onChange, label, description, errors, orientation, isRequired, className, labelClassName, descriptionClassName, errorsClassName, radioClassName, ...props }: RadioGroupProps): import("react").JSX.Element;
+/**
+ * A set of options where one can be picked, all visible at once, as a list of radios or as cards
+ * (`appearance="cards"`). Arrow keys move between options in both appearances.
+ */
+export declare function RadioGroup({ options, value, onChange, label, description, errors, orientation, appearance, columns, isRequired, className, labelClassName, descriptionClassName, errorsClassName, radioClassName, ...props }: RadioGroupProps): import("react").JSX.Element;
 //# sourceMappingURL=RadioGroup.d.ts.map

package/dist/radio-group/RadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/radio-group/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,eAAe,IAAI,mBAAmB,EAE9C,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACH,KAAK,gBAAgB,EAKxB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAIlE,MAAM,WAAW,eACb,SACI,IAAI,CACA,mBAAmB,EACjB,WAAW,GACX,OAAO,GACP,UAAU,GACV,WAAW,GACX,UAAU,GACV,OAAO,GACP,cAAc,GACd,UAAU,CACf,EACD,gBAAgB;IACpB,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,qEAAqE;AACrE,wBAAgB,UAAU,CAAC,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAAW,EACX,MAAW,EACX,WAAwB,EACxB,UAAU,EACV,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,cAAc,EACd,GAAG,KAAK,EACX,EAAE,eAAe,+BAgDjB"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/radio-group/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAEH,KAAK,eAAe,IAAI,mBAAmB,EAE9C,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACH,KAAK,gBAAgB,EAKxB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAIlE,qFAAqF;AACrF,MAAM,WAAW,gBAAiB,SAAQ,YAAY;IAClD,qFAAqF;IACrF,KAAK,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,2FAA2F;AAC3F,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEpD,MAAM,WAAW,eACb,SACI,IAAI,CACA,mBAAmB,EACjB,WAAW,GACX,OAAO,GACP,UAAU,GACV,WAAW,GACX,UAAU,GACV,OAAO,GACP,cAAc,GACd,UAAU,CACf,EACD,gBAAgB;IACpB,OAAO,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACrC,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAAW,EACX,MAAW,EACX,WAAwB,EACxB,UAAmB,EACnB,OAAW,EACX,UAAU,EACV,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,cAAc,EACd,GAAG,KAAK,EACX,EAAE,eAAe,+BA0EjB"}

package/dist/radio-group/RadioGroup.js

@@ -5,8 +5,36 @@ import RadioGroup_module_default from "./RadioGroup.module.js";
 import { Radio, RadioGroup } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/radio-group/RadioGroup.tsx
-/** A set of options where one can be picked, all visible at once. */
-function RadioGroup$1({ options, value, onChange, label, description, errors = [], orientation = "vertical", isRequired, className, labelClassName, descriptionClassName, errorsClassName, radioClassName, ...props }) {
+/**
+* A set of options where one can be picked, all visible at once, as a list of radios or as cards
+* (`appearance="cards"`). Arrow keys move between options in both appearances.
+*/
+function RadioGroup$1({ options, value, onChange, label, description, errors = [], orientation = "vertical", appearance = "list", columns = 2, isRequired, className, labelClassName, descriptionClassName, errorsClassName, radioClassName, ...props }) {
+	const radios = options.map((option, position) => /* @__PURE__ */ jsxs(Radio, {
+		value: String(position),
+		isDisabled: option.disabled,
+		className: cx("panneau-radio", RadioGroup_module_default.radio, appearance === "cards" && RadioGroup_module_default.card, radioClassName),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: RadioGroup_module_default.circle,
+				"aria-hidden": "true"
+			}),
+			option.media !== void 0 && option.media !== null ? /* @__PURE__ */ jsx("span", {
+				className: RadioGroup_module_default.media,
+				children: option.media
+			}) : null,
+			/* @__PURE__ */ jsxs("span", {
+				className: RadioGroup_module_default.text,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: RadioGroup_module_default.optionLabel,
+					children: option.label
+				}), option.description !== void 0 ? /* @__PURE__ */ jsx("span", {
+					className: RadioGroup_module_default.description,
+					children: option.description
+				}) : null]
+			})
+		]
+	}, position));
 	const index = value === void 0 ? void 0 : options.findIndex((o) => o.value === value);
 	return /* @__PURE__ */ jsxs(RadioGroup, {
 		...props,
@@ -14,35 +42,28 @@ function RadioGroup$1({ options, value, onChange, label, description, errors = [
 		isRequired,
 		value: index === void 0 ? void 0 : index === -1 ? null : String(index),
 		onChange: (key) => {
-			const option = options[Number(key)];
-			if (option !== void 0) onChange?.(option.value);
+			const option_0 = options[Number(key)];
+			if (option_0 !== void 0) onChange?.(option_0.value);
 		},
 		isInvalid: errors.length > 0,
 		validationBehavior: "aria",
-		className: cx("panneau-radio-group", Field_module_default.field, orientation === "horizontal" && RadioGroup_module_default.horizontal, className),
+		className: cx("panneau-radio-group", Field_module_default.field, appearance === "cards" ? RadioGroup_module_default.cards : orientation === "horizontal" && RadioGroup_module_default.horizontal, className),
 		children: [
 			/* @__PURE__ */ jsx(FieldLabel, {
 				isRequired,
 				className: labelClassName,
 				children: label
 			}),
-			/* @__PURE__ */ jsx("div", {
+			appearance === "cards" ? /* @__PURE__ */ jsx("div", {
+				className: RadioGroup_module_default.grid,
+				children: /* @__PURE__ */ jsx("div", {
+					className: RadioGroup_module_default.options,
+					style: { "--_panneau-radio-group-columns": String(Math.max(1, Math.floor(columns))) },
+					children: radios
+				})
+			}) : /* @__PURE__ */ jsx("div", {
 				className: RadioGroup_module_default.options,
-				children: options.map((option_0, position) => /* @__PURE__ */ jsxs(Radio, {
-					value: String(position),
-					isDisabled: option_0.disabled,
-					className: cx("panneau-radio", RadioGroup_module_default.radio, radioClassName),
-					children: [/* @__PURE__ */ jsx("span", {
-						className: RadioGroup_module_default.circle,
-						"aria-hidden": "true"
-					}), /* @__PURE__ */ jsxs("span", {
-						className: RadioGroup_module_default.text,
-						children: [/* @__PURE__ */ jsx("span", { children: option_0.label }), option_0.description !== void 0 ? /* @__PURE__ */ jsx("span", {
-							className: RadioGroup_module_default.description,
-							children: option_0.description
-						}) : null]
-					})]
-				}, position))
+				children: radios
 			}),
 			/* @__PURE__ */ jsx(FieldDescription, {
 				className: descriptionClassName,

package/dist/radio-group/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["option","RadioGroup","AriaRadioGroup","fieldStyles","styles"],"sources":["../../src/radio-group/RadioGroup.tsx"],"sourcesContent":["import {\n    RadioGroup as AriaRadioGroup,\n    type RadioGroupProps as AriaRadioGroupProps,\n    Radio,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport type { OptionValue, SelectOption } from '../select/Select';\nimport { cx } from '../utils/cx';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps\n    extends\n        Omit<\n            AriaRadioGroupProps,\n            | 'className'\n            | 'style'\n            | 'children'\n            | 'isInvalid'\n            | 'validate'\n            | 'value'\n            | 'defaultValue'\n            | 'onChange'\n        >,\n        FieldChromeProps {\n    options: readonly SelectOption[];\n    value?: OptionValue | null;\n    onChange?: (value: OptionValue) => void;\n    radioClassName?: string;\n}\n\n/** A set of options where one can be picked, all visible at once. */\nexport function RadioGroup({\n    options,\n    value,\n    onChange,\n    label,\n    description,\n    errors = [],\n    orientation = 'vertical',\n    isRequired,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    radioClassName,\n    ...props\n}: RadioGroupProps) {\n    const index = value === undefined ? undefined : options.findIndex((o) => o.value === value);\n    return (\n        <AriaRadioGroup\n            {...props}\n            orientation={orientation}\n            isRequired={isRequired}\n            value={index === undefined ? undefined : index === -1 ? null : String(index)}\n            onChange={(key) => {\n                const option = options[Number(key)];\n                if (option !== undefined) {\n                    onChange?.(option.value);\n                }\n            }}\n            isInvalid={errors.length > 0}\n            validationBehavior=\"aria\"\n            className={cx(\n                'panneau-radio-group',\n                fieldStyles.field,\n                orientation === 'horizontal' && styles.horizontal,\n                className,\n            )}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <div className={styles.options}>\n                {options.map((option, position) => (\n                    <Radio\n                        key={position}\n                        value={String(position)}\n                        isDisabled={option.disabled}\n                        className={cx('panneau-radio', styles.radio, radioClassName)}\n                    >\n                        <span className={styles.circle} aria-hidden=\"true\" />\n                        <span className={styles.text}>\n                            <span>{option.label}</span>\n                            {option.description !== undefined ? (\n                                <span className={styles.description}>{option.description}</span>\n                            ) : null}\n                        </span>\n                    </Radio>\n                ))}\n            </div>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </AriaRadioGroup>\n    );\n}\n"],"mappings":";;;;;;;;AAsCA,SAAgBC,aAAW,EACvB,SACA,OACA,UACA,OACA,aACA,SAAS,CAAA,GACT,cAAc,YACd,YACA,WACA,gBACA,sBACA,iBACA,gBACA,GAAG,SACa;CAChB,MAAM,QAAQ,UAAU,KAAA,IAAY,KAAA,IAAY,QAAQ,WAAW,MAAM,EAAE,UAAU,KAAK;CAC1F,OACI,qBAACC,YAAD;EACI,GAAI;EACS;EACD;EACZ,OAAO,UAAU,KAAA,IAAY,KAAA,IAAY,UAAU,KAAK,OAAO,OAAO,KAAK;EAC3E,WAAW,QAAQ;GACf,MAAM,SAAS,QAAQ,OAAO,GAAG;GACjC,IAAI,WAAW,KAAA,GACX,WAAW,OAAO,KAAK;EAE/B;EACA,WAAW,OAAO,SAAS;EAC3B,oBAAmB;EACnB,WAAW,GACP,uBACAC,qBAAY,OACZ,gBAAgB,gBAAgBC,0BAAO,YACvC,SACJ;EAlBJ,UAAA;GAoBI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACZ,oBAAC,OAAD;IAAK,WAAWA,0BAAO;IAClB,UAAA,QAAQ,KAAKJ,UAAQ,aAClB,qBAAC,OAAD;KAEI,OAAO,OAAO,QAAQ;KACtB,YAAYA,SAAO;KACnB,WAAW,GAAG,iBAAiBI,0BAAO,OAAO,cAAc;KAJ/D,UAAA,CAMI,oBAAC,QAAD;MAAM,WAAWA,0BAAO;MAAQ,eAAY;KAAM,CAAA,GAClD,qBAAC,QAAD;MAAM,WAAWA,0BAAO;MAAxB,UAAA,CACI,oBAAC,QAAD,EAAA,UAAOJ,SAAO,MAAY,CAAA,GACzBA,SAAO,gBAAgB,KAAA,IACpB,oBAAC,QAAD;OAAM,WAAWI,0BAAO;OAAcJ,UAAAA,SAAO;MAAkB,CAAA,IAC/D,IACF;KACH,CAAA,CAAA;IAZE,GAAA,QAYF,CACV;GACA,CAAA;GACL,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EAC5C;;AAExB"}
+{"version":3,"file":"RadioGroup.js","names":["option","RadioGroup","styles","AriaRadioGroup","fieldStyles"],"sources":["../../src/radio-group/RadioGroup.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport {\n    RadioGroup as AriaRadioGroup,\n    type RadioGroupProps as AriaRadioGroupProps,\n    Radio,\n} from 'react-aria-components';\n\nimport {\n    type FieldChromeProps,\n    FieldDescription,\n    FieldErrors,\n    FieldLabel,\n    fieldStyles,\n} from '../field/FieldParts';\nimport type { OptionValue, SelectOption } from '../select/Select';\nimport { cx } from '../utils/cx';\nimport styles from './RadioGroup.module.css';\n\n/** An option of a `RadioGroup`: a `SelectOption`, with an optional leading media. */\nexport interface RadioGroupOption extends SelectOption {\n    /** Leading media, such as an avatar or an image, between the radio and the label. */\n    media?: ReactNode;\n}\n\n/** How a `RadioGroup` shows its options: a list of radios, or bordered cards in a grid. */\nexport type RadioGroupAppearance = 'list' | 'cards';\n\nexport interface RadioGroupProps\n    extends\n        Omit<\n            AriaRadioGroupProps,\n            | 'className'\n            | 'style'\n            | 'children'\n            | 'isInvalid'\n            | 'validate'\n            | 'value'\n            | 'defaultValue'\n            | 'onChange'\n        >,\n        FieldChromeProps {\n    options: readonly RadioGroupOption[];\n    value?: OptionValue | null;\n    onChange?: (value: OptionValue) => void;\n    /**\n     * `list` (default) shows the options as radios, one under the other or side by side with\n     * `orientation=\"horizontal\"`. `cards` shows them as bordered cards in a grid of `columns`, which\n     * becomes a single column in a narrow container. The selected card has a stronger border.\n     */\n    appearance?: RadioGroupAppearance;\n    /** Columns of cards, with `appearance=\"cards\"`. Defaults to 2. */\n    columns?: number;\n    radioClassName?: string;\n}\n\n/**\n * A set of options where one can be picked, all visible at once, as a list of radios or as cards\n * (`appearance=\"cards\"`). Arrow keys move between options in both appearances.\n */\nexport function RadioGroup({\n    options,\n    value,\n    onChange,\n    label,\n    description,\n    errors = [],\n    orientation = 'vertical',\n    appearance = 'list',\n    columns = 2,\n    isRequired,\n    className,\n    labelClassName,\n    descriptionClassName,\n    errorsClassName,\n    radioClassName,\n    ...props\n}: RadioGroupProps) {\n    const radios = options.map((option, position) => (\n        <Radio\n            key={position}\n            value={String(position)}\n            isDisabled={option.disabled}\n            className={cx(\n                'panneau-radio',\n                styles.radio,\n                appearance === 'cards' && styles.card,\n                radioClassName,\n            )}\n        >\n            <span className={styles.circle} aria-hidden=\"true\" />\n            {option.media !== undefined && option.media !== null ? (\n                <span className={styles.media}>{option.media}</span>\n            ) : null}\n            <span className={styles.text}>\n                <span className={styles.optionLabel}>{option.label}</span>\n                {option.description !== undefined ? (\n                    <span className={styles.description}>{option.description}</span>\n                ) : null}\n            </span>\n        </Radio>\n    ));\n    const index = value === undefined ? undefined : options.findIndex((o) => o.value === value);\n    return (\n        <AriaRadioGroup\n            {...props}\n            orientation={orientation}\n            isRequired={isRequired}\n            value={index === undefined ? undefined : index === -1 ? null : String(index)}\n            onChange={(key) => {\n                const option = options[Number(key)];\n                if (option !== undefined) {\n                    onChange?.(option.value);\n                }\n            }}\n            isInvalid={errors.length > 0}\n            validationBehavior=\"aria\"\n            className={cx(\n                'panneau-radio-group',\n                fieldStyles.field,\n                appearance === 'cards'\n                    ? styles.cards\n                    : orientation === 'horizontal' && styles.horizontal,\n                className,\n            )}\n        >\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            {appearance === 'cards' ? (\n                <div className={styles.grid}>\n                    <div\n                        className={styles.options}\n                        style={\n                            {\n                                '--_panneau-radio-group-columns': String(\n                                    Math.max(1, Math.floor(columns)),\n                                ),\n                            } as CSSProperties\n                        }\n                    >\n                        {radios}\n                    </div>\n                </div>\n            ) : (\n                <div className={styles.options}>{radios}</div>\n            )}\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n        </AriaRadioGroup>\n    );\n}\n"],"mappings":";;;;;;;;;;;AA2DA,SAAgBC,aAAW,EACvB,SACA,OACA,UACA,OACA,aACA,SAAS,CAAA,GACT,cAAc,YACd,aAAa,QACb,UAAU,GACV,YACA,WACA,gBACA,sBACA,iBACA,gBACA,GAAG,SACa;CAChB,MAAM,SAAS,QAAQ,KAAK,QAAQ,aAChC,qBAAC,OAAD;EAEI,OAAO,OAAO,QAAQ;EACtB,YAAY,OAAO;EACnB,WAAW,GACP,iBACAC,0BAAO,OACP,eAAe,WAAWA,0BAAO,MACjC,cACJ;EATJ,UAAA;GAWI,oBAAC,QAAD;IAAM,WAAWA,0BAAO;IAAQ,eAAY;GAAM,CAAA;GACjD,OAAO,UAAU,KAAA,KAAa,OAAO,UAAU,OAC5C,oBAAC,QAAD;IAAM,WAAWA,0BAAO;IAAQ,UAAA,OAAO;GAAY,CAAA,IACnD;GACJ,qBAAC,QAAD;IAAM,WAAWA,0BAAO;IAAxB,UAAA,CACI,oBAAC,QAAD;KAAM,WAAWA,0BAAO;KAAc,UAAA,OAAO;IAAY,CAAA,GACxD,OAAO,gBAAgB,KAAA,IACpB,oBAAC,QAAD;KAAM,WAAWA,0BAAO;KAAc,UAAA,OAAO;IAAkB,CAAA,IAC/D,IACF;;EACH;CApBE,GAAA,QAoBF,CACV;CACD,MAAM,QAAQ,UAAU,KAAA,IAAY,KAAA,IAAY,QAAQ,WAAW,MAAM,EAAE,UAAU,KAAK;CAC1F,OACI,qBAACC,YAAD;EACI,GAAI;EACS;EACD;EACZ,OAAO,UAAU,KAAA,IAAY,KAAA,IAAY,UAAU,KAAK,OAAO,OAAO,KAAK;EAC3E,WAAW,QAAQ;GACf,MAAMH,WAAS,QAAQ,OAAO,GAAG;GACjC,IAAIA,aAAW,KAAA,GACX,WAAWA,SAAO,KAAK;EAE/B;EACA,WAAW,OAAO,SAAS;EAC3B,oBAAmB;EACnB,WAAW,GACP,uBACAI,qBAAY,OACZ,eAAe,UACTF,0BAAO,QACP,gBAAgB,gBAAgBA,0BAAO,YAC7C,SACJ;EApBJ,UAAA;GAsBI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACX,eAAe,UACZ,oBAAC,OAAD;IAAK,WAAWA,0BAAO;IACnB,UAAA,oBAAC,OAAD;KACI,WAAWA,0BAAO;KAClB,OACI,EACI,kCAAkC,OAC9B,KAAK,IAAI,GAAG,KAAK,MAAM,OAAO,CAAC,CACnC,EACJ;KAGH,UAAA;IACA,CAAA;GACJ,CAAA,IAEL,oBAAC,OAAD;IAAK,WAAWA,0BAAO;IAAU,UAAA;GAAY,CAAA;GAEjD,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EAC5C;;AAExB"}

package/dist/radio-group/RadioGroup.module.js

@@ -5,16 +5,26 @@ var horizontal = "panneau-radio-group-horizontal";
 var radio = "panneau-radio-group-radio";
 var circle = "panneau-radio-group-circle";
 var text = "panneau-radio-group-text";
+var optionLabel = "panneau-radio-group-option-label";
 var description = "panneau-radio-group-description";
+var media = "panneau-radio-group-media";
+var grid = "panneau-radio-group-grid";
+var cards = "panneau-radio-group-cards";
+var card = "panneau-radio-group-card";
 var RadioGroup_module_default = {
 	options,
 	horizontal,
 	radio,
 	circle,
 	text,
-	description
+	optionLabel,
+	description,
+	media,
+	grid,
+	cards,
+	card
 };
 //#endregion
-export { circle, RadioGroup_module_default as default, description, horizontal, options, radio, text };
+export { card, cards, circle, RadioGroup_module_default as default, description, grid, horizontal, media, optionLabel, options, radio, text };
 
 //# sourceMappingURL=RadioGroup.module.js.map

package/dist/radio-group/RadioGroup.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.module.js","names":[],"sources":["../../src/radio-group/RadioGroup.module.css"],"sourcesContent":[".options {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n}\n\n.horizontal .options {\n    flex-flow: row wrap;\n    gap: var(--panneau-space-1) var(--panneau-space-4);\n}\n\n.radio {\n    display: inline-flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-2);\n    min-height: 1.5rem;\n    font-size: var(--panneau-font-size-md);\n    color: var(--panneau-color-text);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n}\n\n.radio[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.radio[data-readonly] {\n    cursor: default;\n}\n\n.circle {\n    flex: 0 0 auto;\n    width: var(--panneau-radio-size, 1.125rem);\n    height: var(--panneau-radio-size, 1.125rem);\n    margin-top: 0.125rem;\n    background-color: var(--panneau-radio-bg, var(--panneau-color-surface));\n    border: var(--panneau-border-width) solid\n        var(--panneau-radio-border-color, var(--panneau-color-border-control));\n    border-radius: var(--panneau-radius-full);\n    transition:\n        border-color var(--panneau-duration),\n        border-width var(--panneau-duration);\n}\n\n.radio[data-hovered] .circle {\n    border-color: var(--panneau-color-text-muted);\n}\n\n.radio[data-selected] .circle {\n    border-color: var(--panneau-radio-checked-color, var(--panneau-color-accent));\n    border-width: var(--panneau-radio-checked-border-width, 0.3125rem);\n}\n\n.radio[data-invalid] .circle {\n    border-color: var(--panneau-color-danger);\n}\n\n.radio[data-focus-visible] .circle {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.text {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n}\n\n.description {\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n@media (pointer: coarse) {\n    .radio {\n        min-height: 2.75rem;\n        align-items: center;\n    }\n\n    .circle {\n        margin-top: 0;\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"RadioGroup.module.js","names":[],"sources":["../../src/radio-group/RadioGroup.module.css"],"sourcesContent":[".options {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n}\n\n.horizontal .options {\n    flex-flow: row wrap;\n    gap: var(--panneau-space-1) var(--panneau-space-4);\n}\n\n.radio {\n    display: inline-flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-2);\n    min-height: 1.5rem;\n    font-size: var(--panneau-font-size-md);\n    color: var(--panneau-color-text);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n}\n\n.radio[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.radio[data-readonly] {\n    cursor: default;\n}\n\n.circle {\n    flex: 0 0 auto;\n    width: var(--panneau-radio-size, 1.125rem);\n    height: var(--panneau-radio-size, 1.125rem);\n    margin-top: 0.125rem;\n    background-color: var(--panneau-radio-bg, var(--panneau-color-surface));\n    border: var(--panneau-border-width) solid\n        var(--panneau-radio-border-color, var(--panneau-color-border-control));\n    border-radius: var(--panneau-radius-full);\n    transition:\n        border-color var(--panneau-duration),\n        border-width var(--panneau-duration);\n}\n\n.radio[data-hovered] .circle {\n    border-color: var(--panneau-color-text-muted);\n}\n\n.radio[data-selected] .circle {\n    border-color: var(--panneau-radio-checked-color, var(--panneau-color-accent));\n    border-width: var(--panneau-radio-checked-border-width, 0.3125rem);\n}\n\n.radio[data-invalid] .circle {\n    border-color: var(--panneau-color-danger);\n}\n\n.radio[data-focus-visible] .circle {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.text {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n}\n\n.optionLabel {\n    overflow-wrap: anywhere;\n}\n\n.description {\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n/* Leading media of an option, between the radio and the label. */\n.media {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    width: var(--panneau-radio-media-size, 2rem);\n    height: var(--panneau-radio-media-size, 2rem);\n    overflow: hidden;\n    border-radius: var(--panneau-radio-media-radius, var(--panneau-radius-full));\n}\n\n.media > :is(img, svg, video, picture) {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n/*\n * Cards: the options in a grid of --_panneau-radio-group-columns columns, inside a size container\n * of their own, so that they become a single column when the group is narrow, wherever it is.\n */\n\n.grid {\n    container-type: inline-size;\n}\n\n.cards .options {\n    display: grid;\n    grid-template-columns: repeat(var(--_panneau-radio-group-columns, 2), minmax(0, 1fr));\n    gap: var(--panneau-radio-card-gap, var(--panneau-space-2));\n}\n\n@container (max-width: 28rem) {\n    .cards .options {\n        grid-template-columns: minmax(0, 1fr);\n    }\n}\n\n.card {\n    display: flex;\n    align-items: center;\n    gap: var(--panneau-space-3);\n    padding: var(--panneau-radio-card-padding, var(--panneau-space-3));\n    background-color: var(--panneau-radio-card-bg, var(--panneau-color-surface));\n    border: var(--panneau-border-width) solid\n        var(--panneau-radio-card-border-color, var(--panneau-color-border));\n    border-radius: var(--panneau-radio-card-radius, var(--panneau-radius-md));\n    transition:\n        border-color var(--panneau-duration),\n        box-shadow var(--panneau-duration);\n}\n\n.card .circle {\n    margin-top: 0;\n}\n\n.card .optionLabel {\n    font-weight: var(--panneau-radio-card-label-font-weight, var(--panneau-font-weight-medium));\n}\n\n.card[data-hovered] {\n    border-color: var(--panneau-radio-card-border-color-hover, var(--panneau-color-border-control));\n}\n\n/* The selected card: a border of twice the width, drawn inside so that nothing moves. */\n.card[data-selected] {\n    border-color: var(--panneau-radio-card-border-color-selected, var(--panneau-color-accent));\n    box-shadow: inset 0 0 0 var(--panneau-border-width)\n        var(--panneau-radio-card-border-color-selected, var(--panneau-color-accent));\n}\n\n.card[data-invalid] {\n    border-color: var(--panneau-color-danger);\n}\n\n/* A card shows the focus ring around itself, instead of around its radio. */\n.card[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.card[data-focus-visible] .circle {\n    outline: none;\n}\n\n@media (pointer: coarse) {\n    .radio {\n        min-height: 2.75rem;\n        align-items: center;\n    }\n\n    .circle {\n        margin-top: 0;\n    }\n}\n"],"mappings":""}

package/dist/radio-group/tokens.d.ts

@@ -1,3 +1,3 @@
-/** Tokens of RadioGroup. */
-export declare const radioTokens: import("..").ComponentTokens<"radio", "panneau-radio-size" | "panneau-radio-bg" | "panneau-radio-border-color" | "panneau-radio-checked-color" | "panneau-radio-checked-border-width">;
+/** Tokens of RadioGroup: its radios, the media of its options, and its cards. */
+export declare const radioTokens: import("..").ComponentTokens<"radio", "panneau-radio-size" | "panneau-radio-bg" | "panneau-radio-border-color" | "panneau-radio-checked-color" | "panneau-radio-media-size" | "panneau-radio-media-radius" | "panneau-radio-checked-border-width" | "panneau-radio-card-gap" | "panneau-radio-card-padding" | "panneau-radio-card-bg" | "panneau-radio-card-border-color" | "panneau-radio-card-border-color-hover" | "panneau-radio-card-border-color-selected" | "panneau-radio-card-radius" | "panneau-radio-card-label-font-weight">;
 //# sourceMappingURL=tokens.d.ts.map

package/dist/radio-group/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/radio-group/tokens.ts"],"names":[],"mappings":"AAEA,4BAA4B;AAC5B,eAAO,MAAM,WAAW,wLAWtB,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/radio-group/tokens.ts"],"names":[],"mappings":"AAEA,iFAAiF;AACjF,eAAO,MAAM,WAAW,0gBA+BtB,CAAC"}

package/dist/radio-group/tokens.js

@@ -1,6 +1,6 @@
 import { defineComponentTokens } from "../theme/componentTokens.js";
 //#region src/radio-group/tokens.ts
-/** Tokens of RadioGroup. */
+/** Tokens of RadioGroup: its radios, the media of its options, and its cards. */
 var radioTokens = defineComponentTokens("radio", {
 	/** Size of the circle. */
 	size: "1.125rem",
@@ -11,7 +11,27 @@ var radioTokens = defineComponentTokens("radio", {
 	/** Color of a selected circle. */
 	"checked-color": "var(--panneau-color-accent)",
 	/** Border width of a selected circle, which draws the dot. */
-	"checked-border-width": "0.3125rem"
+	"checked-border-width": "0.3125rem",
+	/** Size of the leading media of an option. */
+	"media-size": "2rem",
+	/** Corner radius of the leading media of an option: its content is clipped to it. */
+	"media-radius": "var(--panneau-radius-full)",
+	/** Space between the cards, with `appearance="cards"`. */
+	"card-gap": "var(--panneau-space-2)",
+	/** Padding of a card. */
+	"card-padding": "var(--panneau-space-3)",
+	/** Background of a card. */
+	"card-bg": "var(--panneau-color-surface)",
+	/** Border color of a card. */
+	"card-border-color": "var(--panneau-color-border)",
+	/** Border color of a hovered card. */
+	"card-border-color-hover": "var(--panneau-color-border-control)",
+	/** Border color of the selected card, which is twice as wide. */
+	"card-border-color-selected": "var(--panneau-color-accent)",
+	/** Corner radius of a card. */
+	"card-radius": "var(--panneau-radius-md)",
+	/** Font weight of the label of a card. */
+	"card-label-font-weight": "var(--panneau-font-weight-medium)"
 });
 //#endregion
 export { radioTokens };

package/dist/radio-group/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","names":[],"sources":["../../src/radio-group/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of RadioGroup. */\nexport const radioTokens = defineComponentTokens('radio', {\n    /** Size of the circle. */\n    size: '1.125rem',\n    /** Background of the circle. */\n    bg: 'var(--panneau-color-surface)',\n    /** Border color of the circle. */\n    'border-color': 'var(--panneau-color-border-control)',\n    /** Color of a selected circle. */\n    'checked-color': 'var(--panneau-color-accent)',\n    /** Border width of a selected circle, which draws the dot. */\n    'checked-border-width': '0.3125rem',\n});\n"],"mappings":";;;AAGA,IAAa,cAAc,sBAAsB,SAAS;;CAEtD,MAAM;;CAEN,IAAI;;CAEJ,gBAAgB;;CAEhB,iBAAiB;;CAEjB,wBAAwB;AAC5B,CAAC"}
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/radio-group/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of RadioGroup: its radios, the media of its options, and its cards. */\nexport const radioTokens = defineComponentTokens('radio', {\n    /** Size of the circle. */\n    size: '1.125rem',\n    /** Background of the circle. */\n    bg: 'var(--panneau-color-surface)',\n    /** Border color of the circle. */\n    'border-color': 'var(--panneau-color-border-control)',\n    /** Color of a selected circle. */\n    'checked-color': 'var(--panneau-color-accent)',\n    /** Border width of a selected circle, which draws the dot. */\n    'checked-border-width': '0.3125rem',\n    /** Size of the leading media of an option. */\n    'media-size': '2rem',\n    /** Corner radius of the leading media of an option: its content is clipped to it. */\n    'media-radius': 'var(--panneau-radius-full)',\n    /** Space between the cards, with `appearance=\"cards\"`. */\n    'card-gap': 'var(--panneau-space-2)',\n    /** Padding of a card. */\n    'card-padding': 'var(--panneau-space-3)',\n    /** Background of a card. */\n    'card-bg': 'var(--panneau-color-surface)',\n    /** Border color of a card. */\n    'card-border-color': 'var(--panneau-color-border)',\n    /** Border color of a hovered card. */\n    'card-border-color-hover': 'var(--panneau-color-border-control)',\n    /** Border color of the selected card, which is twice as wide. */\n    'card-border-color-selected': 'var(--panneau-color-accent)',\n    /** Corner radius of a card. */\n    'card-radius': 'var(--panneau-radius-md)',\n    /** Font weight of the label of a card. */\n    'card-label-font-weight': 'var(--panneau-font-weight-medium)',\n});\n"],"mappings":";;;AAGA,IAAa,cAAc,sBAAsB,SAAS;;CAEtD,MAAM;;CAEN,IAAI;;CAEJ,gBAAgB;;CAEhB,iBAAiB;;CAEjB,wBAAwB;;CAExB,cAAc;;CAEd,gBAAgB;;CAEhB,YAAY;;CAEZ,gBAAgB;;CAEhB,WAAW;;CAEX,qBAAqB;;CAErB,2BAA2B;;CAE3B,8BAA8B;;CAE9B,eAAe;;CAEf,0BAA0B;AAC9B,CAAC"}

package/dist/segmented-control/SegmentedControl.css

@@ -0,0 +1,83 @@
+.panneau-segmented-control-group {
+    --segmented-control-height: var(--panneau-control-height);
+
+    display: inline-flex;
+    gap: 2px;
+    max-width: 100%;
+    padding: var(--panneau-segmented-control-padding, 2px);
+    background-color: var(--panneau-segmented-control-bg, var(--panneau-color-surface-sunken));
+    border: var(--panneau-border-width) solid
+        var(--panneau-segmented-control-border-color, var(--panneau-color-border));
+    border-radius: var(--panneau-segmented-control-radius, var(--panneau-radius-md));
+}
+
+.panneau-segmented-control-sm {
+    --segmented-control-height: var(--panneau-control-height-sm);
+}
+
+.panneau-segmented-control-full-width {
+    display: flex;
+    width: 100%;
+}
+
+.panneau-segmented-control-segment {
+    display: inline-flex;
+    flex: 0 1 auto;
+    align-items: center;
+    justify-content: center;
+    gap: var(--panneau-space-2);
+    min-width: 0;
+    min-height: calc(
+        var(--segmented-control-height) - 2 * var(--panneau-segmented-control-padding, 2px) - 2 *
+            var(--panneau-border-width)
+    );
+    padding: 0 var(--panneau-segmented-control-segment-padding-x, var(--panneau-space-3));
+    font: inherit;
+    font-size: var(--panneau-font-size-control);
+    font-weight: var(
+        --panneau-segmented-control-segment-font-weight,
+        var(--panneau-font-weight-medium)
+    );
+    line-height: var(--panneau-line-height-tight);
+    color: var(--panneau-segmented-control-segment-color, var(--panneau-color-text-muted));
+    white-space: nowrap;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    border-radius: calc(
+        var(--panneau-segmented-control-radius, var(--panneau-radius-md)) -
+            var(--panneau-segmented-control-padding, 2px)
+    );
+    outline: none;
+    transition:
+        background-color var(--panneau-duration),
+        color var(--panneau-duration);
+    -webkit-tap-highlight-color: transparent;
+}
+
+.panneau-segmented-control-full-width .panneau-segmented-control-segment {
+    flex: 1 1 0;
+}
+
+.panneau-segmented-control-segment[data-hovered],
+.panneau-segmented-control-segment[data-selected] {
+    color: var(--panneau-segmented-control-segment-color-selected, var(--panneau-color-text));
+}
+
+.panneau-segmented-control-segment[data-selected] {
+    background-color: var(
+        --panneau-segmented-control-segment-bg-selected,
+        var(--panneau-color-surface-raised)
+    );
+    box-shadow: var(--panneau-segmented-control-segment-shadow-selected, var(--panneau-shadow-sm));
+}
+
+.panneau-segmented-control-segment[data-focus-visible] {
+    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
+    outline-offset: 1px;
+}
+
+.panneau-segmented-control-segment[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+}

package/dist/segmented-control/SegmentedControl.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react';
+import { type IconComponent } from '../icon/Icon';
+/** One choice of a segmented control. */
+export interface SegmentedControlOption {
+    value: string;
+    label: ReactNode;
+    /** Text for typeahead and assistive technologies, when `label` isn't a string. */
+    textValue?: string;
+    icon?: IconComponent;
+    isDisabled?: boolean;
+}
+export interface SegmentedControlProps {
+    options: readonly SegmentedControlOption[];
+    /** The selected option. Controlled with `onChange`. */
+    value?: string;
+    /** The option selected first, when uncontrolled. Defaults to the first one. */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Accessible name of the group. Without a visible label, it is required. */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    size?: 'sm' | 'md';
+    /** Takes the width of its container, with segments of equal width. */
+    fullWidth?: boolean;
+    isDisabled?: boolean;
+    className?: string;
+    segmentClassName?: string;
+}
+/**
+ * A row of a few choices, one of which is always selected: a view, a mode, a library. For more
+ * than four or five choices, or long labels, use a `Select`. It is a radio group for assistive
+ * technologies, moved through with the arrow keys.
+ */
+export declare function SegmentedControl({ options, value, defaultValue, onChange, size, fullWidth, isDisabled, className, segmentClassName, ...props }: SegmentedControlProps): import("react").JSX.Element;
+//# sourceMappingURL=SegmentedControl.d.ts.map

package/dist/segmented-control/SegmentedControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/segmented-control/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAIxD,yCAAyC;AACzC,MAAM,WAAW,sBAAsB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,qBAAqB;IAClC,OAAO,EAAE,SAAS,sBAAsB,EAAE,CAAC;IAC3C,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC7B,OAAO,EACP,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,IAAW,EACX,SAAiB,EACjB,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,GAAG,KAAK,EACX,EAAE,qBAAqB,+BA6CvB"}

package/dist/segmented-control/SegmentedControl.js

@@ -0,0 +1,44 @@
+import { cx } from "../utils/cx.js";
+import { Icon } from "../icon/Icon.js";
+import SegmentedControl_module_default from "./SegmentedControl.module.js";
+import { ToggleButton, ToggleButtonGroup } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/segmented-control/SegmentedControl.tsx
+/**
+* A row of a few choices, one of which is always selected: a view, a mode, a library. For more
+* than four or five choices, or long labels, use a `Select`. It is a radio group for assistive
+* technologies, moved through with the arrow keys.
+*/
+function SegmentedControl({ options, value, defaultValue, onChange, size = "md", fullWidth = false, isDisabled, className, segmentClassName, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(() => defaultValue ?? options.find((option) => option.isDisabled !== true)?.value);
+	const selected = value ?? uncontrolled;
+	return /* @__PURE__ */ jsx(ToggleButtonGroup, {
+		...props,
+		selectionMode: "single",
+		disallowEmptySelection: true,
+		isDisabled,
+		selectedKeys: selected !== void 0 ? [selected] : [],
+		onSelectionChange: (keys) => {
+			const [key] = [...keys];
+			if (key === void 0 || String(key) === selected) return;
+			setUncontrolled(String(key));
+			onChange?.(String(key));
+		},
+		className: cx("panneau-segmented-control", SegmentedControl_module_default.group, SegmentedControl_module_default[size], fullWidth && SegmentedControl_module_default.fullWidth, className),
+		children: options.map((option_0) => /* @__PURE__ */ jsxs(ToggleButton, {
+			id: option_0.value,
+			isDisabled: option_0.isDisabled,
+			...option_0.textValue !== void 0 ? { "aria-label": option_0.textValue } : {},
+			className: cx("panneau-segment", SegmentedControl_module_default.segment, segmentClassName),
+			children: [option_0.icon !== void 0 ? /* @__PURE__ */ jsx(Icon, {
+				icon: option_0.icon,
+				size: size === "sm" ? "sm" : "md"
+			}) : null, option_0.label]
+		}, option_0.value))
+	});
+}
+//#endregion
+export { SegmentedControl };
+
+//# sourceMappingURL=SegmentedControl.js.map

package/dist/segmented-control/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","names":["option","styles"],"sources":["../../src/segmented-control/SegmentedControl.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\nimport { ToggleButton, ToggleButtonGroup } from 'react-aria-components';\n\nimport { Icon, type IconComponent } from '../icon/Icon';\nimport { cx } from '../utils/cx';\nimport styles from './SegmentedControl.module.css';\n\n/** One choice of a segmented control. */\nexport interface SegmentedControlOption {\n    value: string;\n    label: ReactNode;\n    /** Text for typeahead and assistive technologies, when `label` isn't a string. */\n    textValue?: string;\n    icon?: IconComponent;\n    isDisabled?: boolean;\n}\n\nexport interface SegmentedControlProps {\n    options: readonly SegmentedControlOption[];\n    /** The selected option. Controlled with `onChange`. */\n    value?: string;\n    /** The option selected first, when uncontrolled. Defaults to the first one. */\n    defaultValue?: string;\n    onChange?: (value: string) => void;\n    /** Accessible name of the group. Without a visible label, it is required. */\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    size?: 'sm' | 'md';\n    /** Takes the width of its container, with segments of equal width. */\n    fullWidth?: boolean;\n    isDisabled?: boolean;\n    className?: string;\n    segmentClassName?: string;\n}\n\n/**\n * A row of a few choices, one of which is always selected: a view, a mode, a library. For more\n * than four or five choices, or long labels, use a `Select`. It is a radio group for assistive\n * technologies, moved through with the arrow keys.\n */\nexport function SegmentedControl({\n    options,\n    value,\n    defaultValue,\n    onChange,\n    size = 'md',\n    fullWidth = false,\n    isDisabled,\n    className,\n    segmentClassName,\n    ...props\n}: SegmentedControlProps) {\n    const [uncontrolled, setUncontrolled] = useState(\n        () => defaultValue ?? options.find((option) => option.isDisabled !== true)?.value,\n    );\n    const selected = value ?? uncontrolled;\n    return (\n        <ToggleButtonGroup\n            {...props}\n            selectionMode=\"single\"\n            disallowEmptySelection\n            isDisabled={isDisabled}\n            selectedKeys={selected !== undefined ? [selected] : []}\n            onSelectionChange={(keys) => {\n                const [key] = [...keys];\n                // React Aria reports the selected segment again when it is pressed.\n                if (key === undefined || String(key) === selected) {\n                    return;\n                }\n                setUncontrolled(String(key));\n                onChange?.(String(key));\n            }}\n            className={cx(\n                'panneau-segmented-control',\n                styles.group,\n                styles[size],\n                fullWidth && styles.fullWidth,\n                className,\n            )}\n        >\n            {options.map((option) => (\n                <ToggleButton\n                    key={option.value}\n                    id={option.value}\n                    isDisabled={option.isDisabled}\n                    {...(option.textValue !== undefined ? { 'aria-label': option.textValue } : {})}\n                    className={cx('panneau-segment', styles.segment, segmentClassName)}\n                >\n                    {option.icon !== undefined ? (\n                        <Icon icon={option.icon} size={size === 'sm' ? 'sm' : 'md'} />\n                    ) : null}\n                    {option.label}\n                </ToggleButton>\n            ))}\n        </ToggleButtonGroup>\n    );\n}\n"],"mappings":";;;;;;;;;;;;AAwCA,SAAgB,iBAAiB,EAC7B,SACA,OACA,cACA,UACA,OAAO,MACP,YAAY,OACZ,YACA,WACA,kBACA,GAAG,SACmB;CACtB,MAAM,CAAC,cAAc,mBAAmB,eAC9B,gBAAgB,QAAQ,MAAM,WAAW,OAAO,eAAe,IAAI,CAAC,EAAE,KAChF;CACA,MAAM,WAAW,SAAS;CAC1B,OACI,oBAAC,mBAAD;EACI,GAAI;EACJ,eAAc;EACd,wBAAA;EACY;EACZ,cAAc,aAAa,KAAA,IAAY,CAAC,QAAQ,IAAI,CAAA;EACpD,oBAAoB,SAAS;GACzB,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI;GAEtB,IAAI,QAAQ,KAAA,KAAa,OAAO,GAAG,MAAM,UACrC;GAEJ,gBAAgB,OAAO,GAAG,CAAC;GAC3B,WAAW,OAAO,GAAG,CAAC;EAC1B;EACA,WAAW,GACP,6BACAC,gCAAO,OACPA,gCAAO,OACP,aAAaA,gCAAO,WACpB,SACJ;EAEC,UAAA,QAAQ,KAAKD,aACV,qBAAC,cAAD;GAEI,IAAIA,SAAO;GACX,YAAYA,SAAO;GACnB,GAAKA,SAAO,cAAc,KAAA,IAAY,EAAE,cAAcA,SAAO,UAAU,IAAI,CAAC;GAC5E,WAAW,GAAG,mBAAmBC,gCAAO,SAAS,gBAAgB;GALrE,UAAA,CAOKD,SAAO,SAAS,KAAA,IACb,oBAAC,MAAD;IAAM,MAAMA,SAAO;IAAM,MAAM,SAAS,OAAO,OAAO;GAAK,CAAA,IAC3D,MACHA,SAAO,KACE;EAVLA,GAAAA,SAAO,KAUF,CACjB;CACc,CAAA;AAE3B"}

package/dist/segmented-control/SegmentedControl.module.js

@@ -0,0 +1,16 @@
+import "./SegmentedControl.css";
+//#region src/segmented-control/SegmentedControl.module.css
+var group = "panneau-segmented-control-group";
+var sm = "panneau-segmented-control-sm";
+var fullWidth = "panneau-segmented-control-full-width";
+var segment = "panneau-segmented-control-segment";
+var SegmentedControl_module_default = {
+	group,
+	sm,
+	fullWidth,
+	segment
+};
+//#endregion
+export { SegmentedControl_module_default as default, fullWidth, group, segment, sm };
+
+//# sourceMappingURL=SegmentedControl.module.js.map

package/dist/segmented-control/SegmentedControl.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.module.js","names":[],"sources":["../../src/segmented-control/SegmentedControl.module.css"],"sourcesContent":[".group {\n    --segmented-control-height: var(--panneau-control-height);\n\n    display: inline-flex;\n    gap: 2px;\n    max-width: 100%;\n    padding: var(--panneau-segmented-control-padding, 2px);\n    background-color: var(--panneau-segmented-control-bg, var(--panneau-color-surface-sunken));\n    border: var(--panneau-border-width) solid\n        var(--panneau-segmented-control-border-color, var(--panneau-color-border));\n    border-radius: var(--panneau-segmented-control-radius, var(--panneau-radius-md));\n}\n\n.sm {\n    --segmented-control-height: var(--panneau-control-height-sm);\n}\n\n.fullWidth {\n    display: flex;\n    width: 100%;\n}\n\n.segment {\n    display: inline-flex;\n    flex: 0 1 auto;\n    align-items: center;\n    justify-content: center;\n    gap: var(--panneau-space-2);\n    min-width: 0;\n    min-height: calc(\n        var(--segmented-control-height) - 2 * var(--panneau-segmented-control-padding, 2px) - 2 *\n            var(--panneau-border-width)\n    );\n    padding: 0 var(--panneau-segmented-control-segment-padding-x, var(--panneau-space-3));\n    font: inherit;\n    font-size: var(--panneau-font-size-control);\n    font-weight: var(\n        --panneau-segmented-control-segment-font-weight,\n        var(--panneau-font-weight-medium)\n    );\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-segmented-control-segment-color, var(--panneau-color-text-muted));\n    white-space: nowrap;\n    cursor: pointer;\n    background: transparent;\n    border: 0;\n    border-radius: calc(\n        var(--panneau-segmented-control-radius, var(--panneau-radius-md)) -\n            var(--panneau-segmented-control-padding, 2px)\n    );\n    outline: none;\n    transition:\n        background-color var(--panneau-duration),\n        color var(--panneau-duration);\n    -webkit-tap-highlight-color: transparent;\n}\n\n.fullWidth .segment {\n    flex: 1 1 0;\n}\n\n.segment[data-hovered],\n.segment[data-selected] {\n    color: var(--panneau-segmented-control-segment-color-selected, var(--panneau-color-text));\n}\n\n.segment[data-selected] {\n    background-color: var(\n        --panneau-segmented-control-segment-bg-selected,\n        var(--panneau-color-surface-raised)\n    );\n    box-shadow: var(--panneau-segmented-control-segment-shadow-selected, var(--panneau-shadow-sm));\n}\n\n.segment[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 1px;\n}\n\n.segment[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n}\n"],"mappings":""}