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

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"}

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