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

package/dist/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["item","key","value","onChange","Select","fieldStyles","_Fragment","styles","AriaSelect"],"sources":["../../src/select/Select.tsx"],"sourcesContent":["import { Check, ChevronDown } from 'lucide-react';\nimport type { Key } from 'react-aria-components';\nimport {\n    Select as AriaSelect,\n    Button,\n    ListBox,\n    ListBoxItem,\n    SelectValue,\n    Text,\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 { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { PopoverSurface } from '../popover/Popover';\nimport { cx } from '../utils/cx';\nimport styles from './ListBox.module.css';\n\n/** The value of an option. */\nexport type OptionValue = string | number | boolean;\n\n/** A choice of a select, a radio group or a combo box. Same shape as the protocol's `Option`. */\nexport interface SelectOption {\n    value: OptionValue;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n}\n\n/** Props of both single and multiple selects. */\nexport interface SelectBaseProps extends FieldChromeProps {\n    options: readonly SelectOption[];\n    /** Text shown without a value. Defaults to \"Select…\". */\n    placeholder?: string;\n    isRequired?: boolean;\n    isDisabled?: boolean;\n    name?: string;\n    autoFocus?: boolean;\n    onBlur?: () => void;\n    'aria-label'?: string;\n    id?: string;\n    /** Class name of the button that opens the options. */\n    triggerClassName?: string;\n    popoverClassName?: string;\n}\n\nexport interface SingleSelectProps extends SelectBaseProps {\n    multiple?: false;\n    /** The selected value, or `null`. */\n    value?: OptionValue | null;\n    onChange?: (value: OptionValue | null) => void;\n}\n\nexport interface MultipleSelectProps extends SelectBaseProps {\n    /** Several values can be selected. */\n    multiple: true;\n    value?: readonly OptionValue[];\n    onChange?: (value: OptionValue[]) => void;\n}\n\nexport type SelectProps = SingleSelectProps | MultipleSelectProps;\n\nconst EMPTY_KEY = '__panneau_empty__';\n\nfunction keyOf(options: readonly SelectOption[], value: OptionValue): Key | null {\n    const index = options.findIndex((option) => option.value === value);\n    return index === -1 ? null : String(index);\n}\n\nfunction valueOf(options: readonly SelectOption[], key: Key | null): OptionValue | null {\n    if (key === null || key === EMPTY_KEY) {\n        return null;\n    }\n    return options[Number(key)]?.value ?? null;\n}\n\n/**\n * A dropdown to pick one option, or several with `multiple`. Option values can be strings,\n * numbers or booleans. Unless `isRequired`, a single select has an empty choice first.\n */\nexport function Select(props: SelectProps) {\n    const intl = usePanneauIntl();\n    const {\n        options,\n        label,\n        description,\n        errors = [],\n        placeholder = intl.formatMessage(messages.selectPlaceholder),\n        isRequired = false,\n        isDisabled,\n        name,\n        autoFocus,\n        onBlur,\n        id,\n        className,\n        labelClassName,\n        descriptionClassName,\n        errorsClassName,\n        triggerClassName,\n        popoverClassName,\n    } = props;\n    const invalid = errors.length > 0;\n    const items = options.map((option, index) => ({ ...option, key: String(index) }));\n    const withEmpty = props.multiple !== true && !isRequired;\n\n    const shared = {\n        id,\n        name,\n        autoFocus,\n        isDisabled,\n        isRequired,\n        isInvalid: invalid,\n        placeholder,\n        'aria-label': props['aria-label'],\n        validationBehavior: 'aria' as const,\n        onBlur: onBlur !== undefined ? () => onBlur() : undefined,\n        disabledKeys: items.filter((item) => item.disabled === true).map((item) => item.key),\n        className: cx(fieldStyles.field, className),\n    };\n\n    const content = (\n        <>\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <Button className={cx(fieldStyles.control, styles.trigger, triggerClassName)}>\n                <SelectValue className={styles.value} />\n                <Icon icon={ChevronDown} className={styles.chevron} />\n            </Button>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n            <PopoverSurface className={popoverClassName}>\n                <ListBox className={styles.listBox}>\n                    {withEmpty ? (\n                        <ListBoxItem id={EMPTY_KEY} textValue={placeholder} className={styles.item}>\n                            <span className={styles.check} />\n                            <span className={styles.placeholder}>{placeholder}</span>\n                        </ListBoxItem>\n                    ) : null}\n                    {items.map((item) => (\n                        <ListBoxItem\n                            key={item.key}\n                            id={item.key}\n                            textValue={item.label}\n                            className={styles.item}\n                        >\n                            {({ isSelected }) => (\n                                <>\n                                    <span className={styles.check}>\n                                        {isSelected ? <Icon icon={Check} size=\"sm\" /> : null}\n                                    </span>\n                                    <span className={styles.itemText}>\n                                        <Text slot=\"label\" className={styles.itemLabel}>\n                                            {item.label}\n                                        </Text>\n                                        {item.description !== undefined ? (\n                                            <Text\n                                                slot=\"description\"\n                                                className={styles.itemDescription}\n                                            >\n                                                {item.description}\n                                            </Text>\n                                        ) : null}\n                                    </span>\n                                </>\n                            )}\n                        </ListBoxItem>\n                    ))}\n                </ListBox>\n            </PopoverSurface>\n        </>\n    );\n\n    if (props.multiple === true) {\n        const { value, onChange } = props;\n        return (\n            <AriaSelect\n                {...shared}\n                selectionMode=\"multiple\"\n                value={\n                    value !== undefined\n                        ? value.flatMap((item) => {\n                              const key = keyOf(options, item);\n                              return key !== null ? [key] : [];\n                          })\n                        : undefined\n                }\n                onChange={(keys) =>\n                    onChange?.(\n                        keys.flatMap((key) => {\n                            const item = valueOf(options, key);\n                            return item !== null ? [item] : [];\n                        }),\n                    )\n                }\n            >\n                {content}\n            </AriaSelect>\n        );\n    }\n\n    const { value, onChange } = props;\n    return (\n        <AriaSelect\n            {...shared}\n            selectionMode=\"single\"\n            value={\n                value !== undefined ? (value !== null ? keyOf(options, value) : null) : undefined\n            }\n            onChange={(key) => onChange?.(valueOf(options, key))}\n        >\n            {content}\n        </AriaSelect>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":["item","key","value","onChange","Select","fieldStyles","_Fragment","styles","AriaSelect"],"sources":["../../src/select/Select.tsx"],"sourcesContent":["import { Check, ChevronDown } from 'lucide-react';\nimport type { Key } from 'react-aria-components';\nimport {\n    Select as AriaSelect,\n    Button,\n    ListBox,\n    ListBoxItem,\n    SelectValue,\n    Text,\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 { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { PopoverSurface } from '../popover/Popover';\nimport { cx } from '../utils/cx';\nimport styles from './ListBox.module.css';\n\n/** The value of an option. */\nexport type OptionValue = string | number | boolean;\n\n/** A choice of a select, a radio group or a combo box. Same shape as the protocol's `Option`. */\nexport interface SelectOption {\n    value: OptionValue;\n    label: string;\n    description?: string;\n    disabled?: boolean;\n}\n\n/** Props of both single and multiple selects. */\nexport interface SelectBaseProps extends FieldChromeProps {\n    options: readonly SelectOption[];\n    /** Text shown without a value. Defaults to \"Select…\". */\n    placeholder?: string;\n    isRequired?: boolean;\n    isDisabled?: boolean;\n    name?: string;\n    autoFocus?: boolean;\n    onBlur?: () => void;\n    'aria-label'?: string;\n    id?: string;\n    /** Class name of the button that opens the options. */\n    triggerClassName?: string;\n    popoverClassName?: string;\n}\n\nexport interface SingleSelectProps extends SelectBaseProps {\n    multiple?: false;\n    /** The selected value, or `null`. */\n    value?: OptionValue | null;\n    onChange?: (value: OptionValue | null) => void;\n}\n\nexport interface MultipleSelectProps extends SelectBaseProps {\n    /** Several values can be selected. */\n    multiple: true;\n    value?: readonly OptionValue[];\n    onChange?: (value: OptionValue[]) => void;\n}\n\nexport type SelectProps = SingleSelectProps | MultipleSelectProps;\n\nconst EMPTY_KEY = '__panneau_empty__';\n\nfunction keyOf(options: readonly SelectOption[], value: OptionValue): Key | null {\n    const index = options.findIndex((option) => option.value === value);\n    return index === -1 ? null : String(index);\n}\n\nfunction valueOf(options: readonly SelectOption[], key: Key | null): OptionValue | null {\n    if (key === null || key === EMPTY_KEY) {\n        return null;\n    }\n    return options[Number(key)]?.value ?? null;\n}\n\n/**\n * A dropdown to pick one option, or several with `multiple`. Option values can be strings,\n * numbers or booleans. Unless `isRequired`, a single select has an empty choice first.\n */\nexport function Select(props: SelectProps) {\n    const intl = usePanneauIntl();\n    const {\n        options,\n        label,\n        description,\n        errors = [],\n        placeholder = intl.formatMessage(messages.selectPlaceholder),\n        isRequired = false,\n        isDisabled,\n        name,\n        autoFocus,\n        onBlur,\n        id,\n        className,\n        labelClassName,\n        descriptionClassName,\n        errorsClassName,\n        triggerClassName,\n        popoverClassName,\n    } = props;\n    const invalid = errors.length > 0;\n    const items = options.map((option, index) => ({ ...option, key: String(index) }));\n    const withEmpty = props.multiple !== true && !isRequired;\n\n    const shared = {\n        id,\n        name,\n        autoFocus,\n        isDisabled,\n        isRequired,\n        isInvalid: invalid,\n        placeholder,\n        'aria-label': props['aria-label'],\n        validationBehavior: 'aria' as const,\n        onBlur: onBlur !== undefined ? () => onBlur() : undefined,\n        disabledKeys: items.filter((item) => item.disabled === true).map((item) => item.key),\n        className: cx('panneau-select', fieldStyles.field, className),\n    };\n\n    const content = (\n        <>\n            <FieldLabel isRequired={isRequired} className={labelClassName}>\n                {label}\n            </FieldLabel>\n            <Button className={cx(fieldStyles.control, styles.trigger, triggerClassName)}>\n                <SelectValue className={styles.value} />\n                <Icon icon={ChevronDown} className={styles.chevron} />\n            </Button>\n            <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n            <FieldErrors errors={errors} className={errorsClassName} />\n            <PopoverSurface className={popoverClassName}>\n                <ListBox className={styles.listBox}>\n                    {withEmpty ? (\n                        <ListBoxItem id={EMPTY_KEY} textValue={placeholder} className={styles.item}>\n                            <span className={styles.check} />\n                            <span className={styles.placeholder}>{placeholder}</span>\n                        </ListBoxItem>\n                    ) : null}\n                    {items.map((item) => (\n                        <ListBoxItem\n                            key={item.key}\n                            id={item.key}\n                            textValue={item.label}\n                            className={styles.item}\n                        >\n                            {({ isSelected }) => (\n                                <>\n                                    <span className={styles.check}>\n                                        {isSelected ? <Icon icon={Check} size=\"sm\" /> : null}\n                                    </span>\n                                    <span className={styles.itemText}>\n                                        <Text slot=\"label\" className={styles.itemLabel}>\n                                            {item.label}\n                                        </Text>\n                                        {item.description !== undefined ? (\n                                            <Text\n                                                slot=\"description\"\n                                                className={styles.itemDescription}\n                                            >\n                                                {item.description}\n                                            </Text>\n                                        ) : null}\n                                    </span>\n                                </>\n                            )}\n                        </ListBoxItem>\n                    ))}\n                </ListBox>\n            </PopoverSurface>\n        </>\n    );\n\n    if (props.multiple === true) {\n        const { value, onChange } = props;\n        return (\n            <AriaSelect\n                {...shared}\n                selectionMode=\"multiple\"\n                value={\n                    value !== undefined\n                        ? value.flatMap((item) => {\n                              const key = keyOf(options, item);\n                              return key !== null ? [key] : [];\n                          })\n                        : undefined\n                }\n                onChange={(keys) =>\n                    onChange?.(\n                        keys.flatMap((key) => {\n                            const item = valueOf(options, key);\n                            return item !== null ? [item] : [];\n                        }),\n                    )\n                }\n            >\n                {content}\n            </AriaSelect>\n        );\n    }\n\n    const { value, onChange } = props;\n    return (\n        <AriaSelect\n            {...shared}\n            selectionMode=\"single\"\n            value={\n                value !== undefined ? (value !== null ? keyOf(options, value) : null) : undefined\n            }\n            onChange={(key) => onChange?.(valueOf(options, key))}\n        >\n            {content}\n        </AriaSelect>\n    );\n}\n"],"mappings":"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"}

package/dist/select/listBoxTokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of the options of `Select`, `ComboBox` and `Menu`. */
+export declare const listBoxTokens: import("..").ComponentTokens<"list-box", "panneau-list-box-padding" | "panneau-list-box-item-padding-y" | "panneau-list-box-item-padding-x" | "panneau-list-box-item-radius" | "panneau-list-box-item-bg-hover">;
+//# sourceMappingURL=listBoxTokens.d.ts.map

package/dist/select/listBoxTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listBoxTokens.d.ts","sourceRoot":"","sources":["../../src/select/listBoxTokens.ts"],"names":[],"mappings":"AAEA,gEAAgE;AAChE,eAAO,MAAM,aAAa,kNAWxB,CAAC"}

package/dist/select/listBoxTokens.js

@@ -0,0 +1,19 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/select/listBoxTokens.ts
+/** Tokens of the options of `Select`, `ComboBox` and `Menu`. */
+var listBoxTokens = defineComponentTokens("list-box", {
+	/** Padding around the options. */
+	padding: "var(--panneau-space-1)",
+	/** Vertical padding of an option. */
+	"item-padding-y": "calc(var(--panneau-row-padding-y) / 2)",
+	/** Horizontal padding of an option. */
+	"item-padding-x": "var(--panneau-space-2)",
+	/** Corner radius of an option. */
+	"item-radius": "var(--panneau-radius-sm)",
+	/** Background of a focused or hovered option. */
+	"item-bg-hover": "var(--panneau-color-hover)"
+});
+//#endregion
+export { listBoxTokens };
+
+//# sourceMappingURL=listBoxTokens.js.map

package/dist/select/listBoxTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listBoxTokens.js","names":[],"sources":["../../src/select/listBoxTokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of the options of `Select`, `ComboBox` and `Menu`. */\nexport const listBoxTokens = defineComponentTokens('list-box', {\n    /** Padding around the options. */\n    padding: 'var(--panneau-space-1)',\n    /** Vertical padding of an option. */\n    'item-padding-y': 'calc(var(--panneau-row-padding-y) / 2)',\n    /** Horizontal padding of an option. */\n    'item-padding-x': 'var(--panneau-space-2)',\n    /** Corner radius of an option. */\n    'item-radius': 'var(--panneau-radius-sm)',\n    /** Background of a focused or hovered option. */\n    'item-bg-hover': 'var(--panneau-color-hover)',\n});\n"],"mappings":";;;AAGA,IAAa,gBAAgB,sBAAsB,YAAY;;CAE3D,SAAS;;CAET,kBAAkB;;CAElB,kBAAkB;;CAElB,eAAe;;CAEf,iBAAiB;AACrB,CAAC"}

package/dist/spinner/Spinner.css

@@ -1,40 +1,40 @@
-.panneau-spinner-iIx6pg {
+.panneau-spinner {
     display: inline-flex;
     align-items: center;
     gap: var(--panneau-space-2);
     color: var(--panneau-color-text-muted);
 }
 
-.panneau-circle-A2p14W {
+.panneau-spinner-circle {
     display: inline-block;
     flex: 0 0 auto;
     width: 1.25em;
     height: 1.25em;
-    border: 2px solid currentColor;
+    border: var(--panneau-spinner-border-width, 2px) solid currentColor;
     border-right-color: transparent;
     border-radius: var(--panneau-radius-full);
-    animation: panneau-spin-qVmYu0 0.7s linear infinite;
+    animation: panneau-spinner-spin 0.7s linear infinite;
 }
 
-.panneau-sm-JoTrRC .panneau-circle-A2p14W {
+.panneau-spinner-sm .panneau-spinner-circle {
     width: 1em;
     height: 1em;
 }
 
-.panneau-lg-PkO03p .panneau-circle-A2p14W {
+.panneau-spinner-lg .panneau-spinner-circle {
     width: 2em;
     height: 2em;
     border-width: 3px;
 }
 
-@keyframes panneau-spin-qVmYu0 {
+@keyframes panneau-spinner-spin {
     to {
         transform: rotate(360deg);
     }
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .panneau-circle-A2p14W {
+    .panneau-spinner-circle {
         animation-duration: 2s;
     }
 }

package/dist/spinner/Spinner.js

@@ -12,7 +12,7 @@ function Spinner({ label, showLabel = false, size = "md", className }) {
 	return /* @__PURE__ */ jsxs(ProgressBar, {
 		isIndeterminate: true,
 		"aria-label": text,
-		className: cx(Spinner_module_default.spinner, Spinner_module_default[size], className),
+		className: cx("panneau-spinner", Spinner_module_default.spinner, Spinner_module_default[size], className),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: Spinner_module_default.circle,
 			"aria-hidden": "true"

package/dist/spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","names":["styles"],"sources":["../../src/spinner/Spinner.tsx"],"sourcesContent":["import { ProgressBar } from 'react-aria-components';\n\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { cx } from '../utils/cx';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps {\n    /** Accessible label, and visible text with `showLabel`. Defaults to \"Loading…\". */\n    label?: string;\n    /** Shows the label next to the spinner. */\n    showLabel?: boolean;\n    size?: 'sm' | 'md' | 'lg';\n    className?: string;\n}\n\n/** An indeterminate progress indicator, announced as loading. */\nexport function Spinner({ label, showLabel = false, size = 'md', className }: SpinnerProps) {\n    const intl = usePanneauIntl();\n    const text = label ?? intl.formatMessage(messages.loading);\n    return (\n        <ProgressBar\n            isIndeterminate\n            aria-label={text}\n            className={cx(styles.spinner, styles[size], className)}\n        >\n            <span className={styles.circle} aria-hidden=\"true\" />\n            {showLabel ? <span>{text}</span> : null}\n        </ProgressBar>\n    );\n}\n"],"mappings":";;;;;;;;AAiBA,SAAgB,QAAQ,EAAE,OAAO,YAAY,OAAO,OAAO,MAAM,aAA2B;CACxF,MAAM,OAAO,eAAe;CAC5B,MAAM,OAAO,SAAS,KAAK,cAAc,SAAS,OAAO;CACzD,OACI,qBAAC,aAAD;EACI,iBAAA;EACA,cAAY;EACZ,WAAW,GAAGA,uBAAO,SAASA,uBAAO,OAAO,SAAS;EAHzD,UAAA,CAKI,oBAAC,QAAD;GAAM,WAAWA,uBAAO;GAAQ,eAAY;EAAM,CAAA,GACjD,YAAY,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,IAAI,IAC1B;;AAErB"}
+{"version":3,"file":"Spinner.js","names":["styles"],"sources":["../../src/spinner/Spinner.tsx"],"sourcesContent":["import { ProgressBar } from 'react-aria-components';\n\nimport { messages } from '../intl/messages';\nimport { usePanneauIntl } from '../intl/usePanneauIntl';\nimport { cx } from '../utils/cx';\nimport styles from './Spinner.module.css';\n\nexport interface SpinnerProps {\n    /** Accessible label, and visible text with `showLabel`. Defaults to \"Loading…\". */\n    label?: string;\n    /** Shows the label next to the spinner. */\n    showLabel?: boolean;\n    size?: 'sm' | 'md' | 'lg';\n    className?: string;\n}\n\n/** An indeterminate progress indicator, announced as loading. */\nexport function Spinner({ label, showLabel = false, size = 'md', className }: SpinnerProps) {\n    const intl = usePanneauIntl();\n    const text = label ?? intl.formatMessage(messages.loading);\n    return (\n        <ProgressBar\n            isIndeterminate\n            aria-label={text}\n            className={cx('panneau-spinner', styles.spinner, styles[size], className)}\n        >\n            <span className={styles.circle} aria-hidden=\"true\" />\n            {showLabel ? <span>{text}</span> : null}\n        </ProgressBar>\n    );\n}\n"],"mappings":";;;;;;;;AAiBA,SAAgB,QAAQ,EAAE,OAAO,YAAY,OAAO,OAAO,MAAM,aAA2B;CACxF,MAAM,OAAO,eAAe;CAC5B,MAAM,OAAO,SAAS,KAAK,cAAc,SAAS,OAAO;CACzD,OACI,qBAAC,aAAD;EACI,iBAAA;EACA,cAAY;EACZ,WAAW,GAAG,mBAAmBA,uBAAO,SAASA,uBAAO,OAAO,SAAS;EAH5E,UAAA,CAKI,oBAAC,QAAD;GAAM,WAAWA,uBAAO;GAAQ,eAAY;EAAM,CAAA,GACjD,YAAY,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA,IAAI,IAC1B;;AAErB"}

package/dist/spinner/Spinner.module.js

@@ -1,10 +1,10 @@
 import "./Spinner.css";
 //#region src/spinner/Spinner.module.css
-var spinner = "panneau-spinner-iIx6pg";
-var circle = "panneau-circle-A2p14W";
-var spin = "panneau-spin-qVmYu0";
-var sm = "panneau-sm-JoTrRC";
-var lg = "panneau-lg-PkO03p";
+var spinner = "panneau-spinner";
+var circle = "panneau-spinner-circle";
+var spin = "panneau-spinner-spin";
+var sm = "panneau-spinner-sm";
+var lg = "panneau-spinner-lg";
 var Spinner_module_default = {
 	spinner,
 	circle,

package/dist/spinner/Spinner.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.module.js","names":[],"sources":["../../src/spinner/Spinner.module.css"],"sourcesContent":[".spinner {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    color: var(--panneau-color-text-muted);\n}\n\n.circle {\n    display: inline-block;\n    flex: 0 0 auto;\n    width: 1.25em;\n    height: 1.25em;\n    border: 2px solid currentColor;\n    border-right-color: transparent;\n    border-radius: var(--panneau-radius-full);\n    animation: spin 0.7s linear infinite;\n}\n\n.sm .circle {\n    width: 1em;\n    height: 1em;\n}\n\n.lg .circle {\n    width: 2em;\n    height: 2em;\n    border-width: 3px;\n}\n\n@keyframes spin {\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .circle {\n        animation-duration: 2s;\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"Spinner.module.js","names":[],"sources":["../../src/spinner/Spinner.module.css"],"sourcesContent":[".spinner {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    color: var(--panneau-color-text-muted);\n}\n\n.circle {\n    display: inline-block;\n    flex: 0 0 auto;\n    width: 1.25em;\n    height: 1.25em;\n    border: var(--panneau-spinner-border-width, 2px) solid currentColor;\n    border-right-color: transparent;\n    border-radius: var(--panneau-radius-full);\n    animation: spin 0.7s linear infinite;\n}\n\n.sm .circle {\n    width: 1em;\n    height: 1em;\n}\n\n.lg .circle {\n    width: 2em;\n    height: 2em;\n    border-width: 3px;\n}\n\n@keyframes spin {\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .circle {\n        animation-duration: 2s;\n    }\n}\n"],"mappings":""}

package/dist/spinner/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Spinner. */
+export declare const spinnerTokens: import("..").ComponentTokens<"spinner", "panneau-spinner-border-width">;
+//# sourceMappingURL=tokens.d.ts.map

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

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

package/dist/spinner/tokens.js

@@ -0,0 +1,10 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/spinner/tokens.ts
+/** Tokens of Spinner. */
+var spinnerTokens = defineComponentTokens("spinner", { 
+/** Width of the ring. */
+"border-width": "2px" });
+//#endregion
+export { spinnerTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/spinner/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/spinner/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Spinner. */\nexport const spinnerTokens = defineComponentTokens('spinner', {\n    /** Width of the ring. */\n    'border-width': '2px',\n});\n"],"mappings":";;;AAGA,IAAa,gBAAgB,sBAAsB,WAAW;;AAE1D,gBAAgB,MACpB,CAAC"}

package/dist/stack/Stack.css

@@ -0,0 +1,135 @@
+/* A vertical stack: each prop can change at the breakpoints of the nearest container. */
+
+.panneau-stack {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+/* Responsive values are set inline; children reset them so that they aren't inherited. */
+.panneau-stack > * {
+    --_panneau-stack-gap-base: initial;
+    --_panneau-stack-gap-sm: initial;
+    --_panneau-stack-gap-md: initial;
+    --_panneau-stack-gap-lg: initial;
+    --_panneau-stack-gap-xl: initial;
+    --_panneau-stack-align-base: initial;
+    --_panneau-stack-align-sm: initial;
+    --_panneau-stack-align-md: initial;
+    --_panneau-stack-align-lg: initial;
+    --_panneau-stack-align-xl: initial;
+    --_panneau-stack-justify-base: initial;
+    --_panneau-stack-justify-sm: initial;
+    --_panneau-stack-justify-md: initial;
+    --_panneau-stack-justify-lg: initial;
+    --_panneau-stack-justify-xl: initial;
+}
+
+.panneau-stack {
+    gap: var(--_panneau-stack-gap-base, var(--panneau-stack-gap, var(--panneau-space-4)));
+    align-items: var(--_panneau-stack-align-base, stretch);
+    justify-content: var(--_panneau-stack-justify-base, start);
+}
+
+@container (min-width: 40rem) {
+    .panneau-stack {
+        gap: var(
+            --_panneau-stack-gap-sm,
+            var(--_panneau-stack-gap-base, var(--panneau-stack-gap, var(--panneau-space-4)))
+        );
+        align-items: var(--_panneau-stack-align-sm, var(--_panneau-stack-align-base, stretch));
+        justify-content: var(
+            --_panneau-stack-justify-sm,
+            var(--_panneau-stack-justify-base, start)
+        );
+    }
+}
+
+@container (min-width: 48rem) {
+    .panneau-stack {
+        gap: var(
+            --_panneau-stack-gap-md,
+            var(
+                --_panneau-stack-gap-sm,
+                var(--_panneau-stack-gap-base, var(--panneau-stack-gap, var(--panneau-space-4)))
+            )
+        );
+        align-items: var(
+            --_panneau-stack-align-md,
+            var(--_panneau-stack-align-sm, var(--_panneau-stack-align-base, stretch))
+        );
+        justify-content: var(
+            --_panneau-stack-justify-md,
+            var(--_panneau-stack-justify-sm, var(--_panneau-stack-justify-base, start))
+        );
+    }
+}
+
+@container (min-width: 64rem) {
+    .panneau-stack {
+        gap: var(
+            --_panneau-stack-gap-lg,
+            var(
+                --_panneau-stack-gap-md,
+                var(
+                    --_panneau-stack-gap-sm,
+                    var(--_panneau-stack-gap-base, var(--panneau-stack-gap, var(--panneau-space-4)))
+                )
+            )
+        );
+        align-items: var(
+            --_panneau-stack-align-lg,
+            var(
+                --_panneau-stack-align-md,
+                var(--_panneau-stack-align-sm, var(--_panneau-stack-align-base, stretch))
+            )
+        );
+        justify-content: var(
+            --_panneau-stack-justify-lg,
+            var(
+                --_panneau-stack-justify-md,
+                var(--_panneau-stack-justify-sm, var(--_panneau-stack-justify-base, start))
+            )
+        );
+    }
+}
+
+@container (min-width: 80rem) {
+    .panneau-stack {
+        gap: var(
+            --_panneau-stack-gap-xl,
+            var(
+                --_panneau-stack-gap-lg,
+                var(
+                    --_panneau-stack-gap-md,
+                    var(
+                        --_panneau-stack-gap-sm,
+                        var(
+                            --_panneau-stack-gap-base,
+                            var(--panneau-stack-gap, var(--panneau-space-4))
+                        )
+                    )
+                )
+            )
+        );
+        align-items: var(
+            --_panneau-stack-align-xl,
+            var(
+                --_panneau-stack-align-lg,
+                var(
+                    --_panneau-stack-align-md,
+                    var(--_panneau-stack-align-sm, var(--_panneau-stack-align-base, stretch))
+                )
+            )
+        );
+        justify-content: var(
+            --_panneau-stack-justify-xl,
+            var(
+                --_panneau-stack-justify-lg,
+                var(
+                    --_panneau-stack-justify-md,
+                    var(--_panneau-stack-justify-sm, var(--_panneau-stack-justify-base, start))
+                )
+            )
+        );
+    }
+}

package/dist/stack/Stack.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'react';
+import { type Justification, type Responsive, type Space } from '../layout/responsive';
+export interface StackProps extends HTMLAttributes<HTMLElement> {
+    /** Element to render. Defaults to `div`. */
+    as?: 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'nav' | 'main' | 'ul' | 'ol' | 'form';
+    /** Space between items, from the space scale. Defaults to the `--panneau-stack-gap` token. */
+    gap?: Responsive<Space>;
+    /** Horizontal alignment of the items. Defaults to `stretch`. */
+    align?: Responsive<'start' | 'center' | 'end' | 'stretch'>;
+    /** Vertical distribution of the items, when the stack is taller than them. Defaults to `start`. */
+    justify?: Responsive<Justification>;
+}
+/** Items one under the other, with space between them, like Bootstrap's `.vstack`. */
+export declare function Stack({ as: Element, gap, align, justify, className, style, ...props }: StackProps): import("react").JSX.Element;
+//# sourceMappingURL=Stack.d.ts.map

package/dist/stack/Stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../src/stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EACH,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,KAAK,EAKb,MAAM,sBAAsB,CAAC;AAI9B,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC3D,4CAA4C;IAC5C,EAAE,CAAC,EACG,KAAK,GACL,SAAS,GACT,SAAS,GACT,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,KAAK,GACL,MAAM,GACN,IAAI,GACJ,IAAI,GACJ,MAAM,CAAC;IACb,8FAA8F;IAC9F,GAAG,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IACxB,gEAAgE;IAChE,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC,CAAC;IAC3D,mGAAmG;IACnG,OAAO,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;CACvC;AAED,sFAAsF;AACtF,wBAAgB,KAAK,CAAC,EAClB,EAAE,EAAE,OAAe,EACnB,GAAG,EACH,KAAK,EACL,OAAO,EACP,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACX,EAAE,UAAU,+BAeZ"}

package/dist/stack/Stack.js

@@ -0,0 +1,21 @@
+import { cx } from "../utils/cx.js";
+import { justification, responsiveVariables, space, withVariables } from "../layout/responsive.js";
+import Stack_module_default from "./Stack.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/stack/Stack.tsx
+/** Items one under the other, with space between them, like Bootstrap's `.vstack`. */
+function Stack({ as: Element = "div", gap, align, justify, className, style, ...props }) {
+	return /* @__PURE__ */ jsx(Element, {
+		...props,
+		className: cx("panneau-stack", Stack_module_default.stack, className),
+		style: withVariables([
+			responsiveVariables("stack", "gap", gap, space),
+			responsiveVariables("stack", "align", align, String),
+			responsiveVariables("stack", "justify", justify, justification)
+		], style)
+	});
+}
+//#endregion
+export { Stack };
+
+//# sourceMappingURL=Stack.js.map

package/dist/stack/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","names":["styles"],"sources":["../../src/stack/Stack.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport {\n    type Justification,\n    type Responsive,\n    type Space,\n    justification,\n    responsiveVariables,\n    space,\n    withVariables,\n} from '../layout/responsive';\nimport { cx } from '../utils/cx';\nimport styles from './Stack.module.css';\n\nexport interface StackProps extends HTMLAttributes<HTMLElement> {\n    /** Element to render. Defaults to `div`. */\n    as?:\n        | 'div'\n        | 'section'\n        | 'article'\n        | 'aside'\n        | 'header'\n        | 'footer'\n        | 'nav'\n        | 'main'\n        | 'ul'\n        | 'ol'\n        | 'form';\n    /** Space between items, from the space scale. Defaults to the `--panneau-stack-gap` token. */\n    gap?: Responsive<Space>;\n    /** Horizontal alignment of the items. Defaults to `stretch`. */\n    align?: Responsive<'start' | 'center' | 'end' | 'stretch'>;\n    /** Vertical distribution of the items, when the stack is taller than them. Defaults to `start`. */\n    justify?: Responsive<Justification>;\n}\n\n/** Items one under the other, with space between them, like Bootstrap's `.vstack`. */\nexport function Stack({\n    as: Element = 'div',\n    gap,\n    align,\n    justify,\n    className,\n    style,\n    ...props\n}: StackProps) {\n    return (\n        <Element\n            {...props}\n            className={cx('panneau-stack', styles.stack, className)}\n            style={withVariables(\n                [\n                    responsiveVariables('stack', 'gap', gap, space),\n                    responsiveVariables('stack', 'align', align, String),\n                    responsiveVariables('stack', 'justify', justify, justification),\n                ],\n                style,\n            )}\n        />\n    );\n}\n"],"mappings":";;;;;;AAqCA,SAAgB,MAAM,EAClB,IAAI,UAAU,OACd,KACA,OACA,SACA,WACA,OACA,GAAG,SACQ;CACX,OACI,oBAAC,SAAD;EACI,GAAI;EACJ,WAAW,GAAG,iBAAiBA,qBAAO,OAAO,SAAS;EACtD,OAAO,cACH;GACI,oBAAoB,SAAS,OAAO,KAAK,KAAK;GAC9C,oBAAoB,SAAS,SAAS,OAAO,MAAM;GACnD,oBAAoB,SAAS,WAAW,SAAS,aAAa;EAAC,GAEnE,KACJ;CAAE,CAAA;AAGd"}

package/dist/stack/Stack.module.js

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

package/dist/stack/Stack.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.module.js","names":[],"sources":["../../src/stack/Stack.module.css"],"sourcesContent":["/* A vertical stack: each prop can change at the breakpoints of the nearest container. */\n\n.stack {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n}\n/* Responsive values are set inline; children reset them so that they aren't inherited. */\n.stack > * {\n    --_panneau-stack-gap-base: initial;\n    --_panneau-stack-gap-sm: initial;\n    --_panneau-stack-gap-md: initial;\n    --_panneau-stack-gap-lg: initial;\n    --_panneau-stack-gap-xl: initial;\n    --_panneau-stack-align-base: initial;\n    --_panneau-stack-align-sm: initial;\n    --_panneau-stack-align-md: initial;\n    --_panneau-stack-align-lg: initial;\n    --_panneau-stack-align-xl: initial;\n    --_panneau-stack-justify-base: initial;\n    --_panneau-stack-justify-sm: initial;\n    --_panneau-stack-justify-md: initial;\n    --_panneau-stack-justify-lg: initial;\n    --_panneau-stack-justify-xl: initial;\n}\n\n.stack {\n    gap: var(--_panneau-stack-gap-base, var(--panneau-stack-gap, var(--panneau-space-4)));\n    align-items: var(--_panneau-stack-align-base, stretch);\n    justify-content: var(--_panneau-stack-justify-base, start);\n}\n\n@container (min-width: 40rem) {\n    .stack {\n        gap: var(\n            --_panneau-stack-gap-sm,\n            var(--_panneau-stack-gap-base, var(--panneau-stack-gap, var(--panneau-space-4)))\n        );\n        align-items: var(--_panneau-stack-align-sm, var(--_panneau-stack-align-base, stretch));\n        justify-content: var(\n            --_panneau-stack-justify-sm,\n            var(--_panneau-stack-justify-base, start)\n        );\n    }\n}\n\n@container (min-width: 48rem) {\n    .stack {\n        gap: var(\n            --_panneau-stack-gap-md,\n            var(\n                --_panneau-stack-gap-sm,\n                var(--_panneau-stack-gap-base, var(--panneau-stack-gap, var(--panneau-space-4)))\n            )\n        );\n        align-items: var(\n            --_panneau-stack-align-md,\n            var(--_panneau-stack-align-sm, var(--_panneau-stack-align-base, stretch))\n        );\n        justify-content: var(\n            --_panneau-stack-justify-md,\n            var(--_panneau-stack-justify-sm, var(--_panneau-stack-justify-base, start))\n        );\n    }\n}\n\n@container (min-width: 64rem) {\n    .stack {\n        gap: var(\n            --_panneau-stack-gap-lg,\n            var(\n                --_panneau-stack-gap-md,\n                var(\n                    --_panneau-stack-gap-sm,\n                    var(--_panneau-stack-gap-base, var(--panneau-stack-gap, var(--panneau-space-4)))\n                )\n            )\n        );\n        align-items: var(\n            --_panneau-stack-align-lg,\n            var(\n                --_panneau-stack-align-md,\n                var(--_panneau-stack-align-sm, var(--_panneau-stack-align-base, stretch))\n            )\n        );\n        justify-content: var(\n            --_panneau-stack-justify-lg,\n            var(\n                --_panneau-stack-justify-md,\n                var(--_panneau-stack-justify-sm, var(--_panneau-stack-justify-base, start))\n            )\n        );\n    }\n}\n\n@container (min-width: 80rem) {\n    .stack {\n        gap: var(\n            --_panneau-stack-gap-xl,\n            var(\n                --_panneau-stack-gap-lg,\n                var(\n                    --_panneau-stack-gap-md,\n                    var(\n                        --_panneau-stack-gap-sm,\n                        var(\n                            --_panneau-stack-gap-base,\n                            var(--panneau-stack-gap, var(--panneau-space-4))\n                        )\n                    )\n                )\n            )\n        );\n        align-items: var(\n            --_panneau-stack-align-xl,\n            var(\n                --_panneau-stack-align-lg,\n                var(\n                    --_panneau-stack-align-md,\n                    var(--_panneau-stack-align-sm, var(--_panneau-stack-align-base, stretch))\n                )\n            )\n        );\n        justify-content: var(\n            --_panneau-stack-justify-xl,\n            var(\n                --_panneau-stack-justify-lg,\n                var(\n                    --_panneau-stack-justify-md,\n                    var(--_panneau-stack-justify-sm, var(--_panneau-stack-justify-base, start))\n                )\n            )\n        );\n    }\n}\n"],"mappings":""}

package/dist/stack/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Stack. */
+export declare const stackTokens: import("..").ComponentTokens<"stack", "panneau-stack-gap">;
+//# sourceMappingURL=tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/stack/tokens.ts"],"names":[],"mappings":"AAEA,uBAAuB;AACvB,eAAO,MAAM,WAAW,4DAGtB,CAAC"}

package/dist/stack/tokens.js

@@ -0,0 +1,10 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/stack/tokens.ts
+/** Tokens of Stack. */
+var stackTokens = defineComponentTokens("stack", { 
+/** Space between items, when the `gap` prop is not set. */
+gap: "var(--panneau-space-4)" });
+//#endregion
+export { stackTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/stack/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/stack/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Stack. */\nexport const stackTokens = defineComponentTokens('stack', {\n    /** Space between items, when the `gap` prop is not set. */\n    gap: 'var(--panneau-space-4)',\n});\n"],"mappings":";;;AAGA,IAAa,cAAc,sBAAsB,SAAS;;AAEtD,KAAK,yBACT,CAAC"}

package/dist/switch/Switch.css

@@ -1,4 +1,4 @@
-.panneau-switch-pwmftu {
+.panneau-switch {
     display: inline-flex;
     align-items: center;
     gap: var(--panneau-space-2);
@@ -9,61 +9,70 @@
     -webkit-tap-highlight-color: transparent;
 }
 
-.panneau-switch-pwmftu[data-disabled] {
+.panneau-switch[data-disabled] {
     cursor: not-allowed;
     opacity: 0.55;
 }
 
-.panneau-switch-pwmftu[data-readonly] {
+.panneau-switch[data-readonly] {
     cursor: default;
 }
 
-.panneau-track-PtpuqW {
+.panneau-switch-track {
     position: relative;
     flex: 0 0 auto;
-    width: 2.25rem;
-    height: 1.25rem;
-    background-color: var(--panneau-color-border-control);
-    border-radius: var(--panneau-radius-full);
+    width: var(--panneau-switch-width, 2.25rem);
+    height: var(--panneau-switch-height, 1.25rem);
+    background-color: var(--panneau-switch-track-bg, var(--panneau-color-border-control));
+    border-radius: var(--panneau-switch-radius, var(--panneau-radius-full));
     transition: background-color var(--panneau-duration);
 }
 
-.panneau-thumb-pQGDyC {
+.panneau-switch-thumb {
     position: absolute;
-    top: 0.125rem;
-    left: 0.125rem;
-    width: 1rem;
-    height: 1rem;
-    background-color: var(--panneau-color-surface);
-    border-radius: var(--panneau-radius-full);
+    top: calc((var(--panneau-switch-height, 1.25rem) - var(--panneau-switch-thumb-size, 1rem)) / 2);
+    left: calc(
+        (var(--panneau-switch-height, 1.25rem) - var(--panneau-switch-thumb-size, 1rem)) / 2
+    );
+    width: var(--panneau-switch-thumb-size, 1rem);
+    height: var(--panneau-switch-thumb-size, 1rem);
+    background-color: var(--panneau-switch-thumb-bg, var(--panneau-color-surface));
+    border-radius: var(--panneau-switch-radius, var(--panneau-radius-full));
     box-shadow: var(--panneau-shadow-sm);
     transition: transform var(--panneau-duration);
 }
 
-.panneau-switch-pwmftu[data-selected] .panneau-track-PtpuqW {
-    background-color: var(--panneau-color-accent);
+.panneau-switch[data-selected] .panneau-switch-track {
+    background-color: var(--panneau-switch-checked-bg, var(--panneau-color-accent));
 }
 
-.panneau-switch-pwmftu[data-selected] .panneau-thumb-pQGDyC {
-    background-color: var(--panneau-color-accent-text);
-    transform: translateX(1rem);
+.panneau-switch[data-selected] .panneau-switch-thumb {
+    background-color: var(--panneau-switch-checked-thumb-bg, var(--panneau-color-accent-text));
+    /* The thumb travels the width of the track minus its height (both ends keep the same inset). */
+    transform: translateX(
+        calc(var(--panneau-switch-width, 2.25rem) - var(--panneau-switch-height, 1.25rem))
+    );
 }
 
-.panneau-switch-pwmftu[data-selected] .panneau-thumb-pQGDyC:dir(rtl) {
-    transform: translateX(-1rem);
+.panneau-switch[data-selected] .panneau-switch-thumb:dir(rtl) {
+    transform: translateX(
+        calc(
+            -1 * calc(var(--panneau-switch-width, 2.25rem) - var(--panneau-switch-height, 1.25rem))
+        )
+    );
 }
 
-.panneau-switch-pwmftu[data-focus-visible] .panneau-track-PtpuqW {
+.panneau-switch[data-focus-visible] .panneau-switch-track {
     outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
     outline-offset: 2px;
 }
 
-.panneau-label-L3fUnh {
+.panneau-switch-label {
     overflow-wrap: anywhere;
 }
 
 @media (pointer: coarse) {
-    .panneau-switch-pwmftu {
+    .panneau-switch {
         min-height: 2.75rem;
     }
 }

package/dist/switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAwB,KAAK,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElG,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAIhF,MAAM,WAAW,WACb,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC,EAAE,iBAAiB;IACpF,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,6DAA6D;AAC7D,wBAAgB,MAAM,CAAC,EACnB,QAAQ,EACR,WAAW,EACX,MAAW,EACX,SAAS,EACT,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,GAAG,KAAK,EACX,EAAE,WAAW,+BAyBb"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAwB,KAAK,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElG,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAIhF,MAAM,WAAW,WACb,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC,EAAE,iBAAiB;IACpF,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,6DAA6D;AAC7D,wBAAgB,MAAM,CAAC,EACnB,QAAQ,EACR,WAAW,EACX,MAAW,EACX,SAAS,EACT,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,GAAG,KAAK,EACX,EAAE,WAAW,+BA0Bb"}

package/dist/switch/Switch.js

@@ -7,6 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /** An on and off switch, for settings that apply at once. */
 function Switch$1({ children, description, errors = [], className, switchClassName, descriptionClassName, errorsClassName, ...props }) {
 	return /* @__PURE__ */ jsx(ChoiceChrome, {
+		component: "switch",
 		description,
 		errors,
 		className,

package/dist/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["Switch","AriaSwitch","styles"],"sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Switch as AriaSwitch, type SwitchProps as AriaSwitchProps } from 'react-aria-components';\n\nimport { ChoiceChrome, type ChoiceChromeProps } from '../checkbox/ChoiceChrome';\nimport { cx } from '../utils/cx';\nimport styles from './Switch.module.css';\n\nexport interface SwitchProps\n    extends Omit<AriaSwitchProps, 'className' | 'style' | 'children'>, ChoiceChromeProps {\n    /** Label, next to the switch. */\n    children?: ReactNode;\n    switchClassName?: string;\n}\n\n/** An on and off switch, for settings that apply at once. */\nexport function Switch({\n    children,\n    description,\n    errors = [],\n    className,\n    switchClassName,\n    descriptionClassName,\n    errorsClassName,\n    ...props\n}: SwitchProps) {\n    return (\n        <ChoiceChrome\n            description={description}\n            errors={errors}\n            className={className}\n            descriptionClassName={descriptionClassName}\n            errorsClassName={errorsClassName}\n        >\n            {(describedBy) => (\n                <AriaSwitch\n                    {...props}\n                    aria-describedby={describedBy}\n                    className={cx(styles.switch, switchClassName)}\n                >\n                    <span className={styles.track} aria-hidden=\"true\">\n                        <span className={styles.thumb} />\n                    </span>\n                    {children !== undefined ? (\n                        <span className={styles.label}>{children}</span>\n                    ) : null}\n                </AriaSwitch>\n            )}\n        </ChoiceChrome>\n    );\n}\n"],"mappings":";;;;;;;AAeA,SAAgBA,SAAO,EACnB,UACA,aACA,SAAS,CAAA,GACT,WACA,iBACA,sBACA,iBACA,GAAG,SACS;CACZ,OACI,oBAAC,cAAD;EACiB;EACL;EACG;EACW;EACL;EAEf,WAAA,gBACE,qBAACC,QAAD;GACI,GAAI;GACJ,oBAAkB;GAClB,WAAW,GAAGC,sBAAO,QAAQ,eAAe;GAHhD,UAAA,CAKI,oBAAC,QAAD;IAAM,WAAWA,sBAAO;IAAO,eAAY;IACvC,UAAA,oBAAC,QAAD,EAAM,WAAWA,sBAAO,MAAM,CAAA;GAC5B,CAAA,GACL,aAAa,KAAA,IACV,oBAAC,QAAD;IAAM,WAAWA,sBAAO;IAAQ;GAAe,CAAA,IAC/C,IACI;;CAEN,CAAA;AAEtB"}
+{"version":3,"file":"Switch.js","names":["Switch","AriaSwitch","styles"],"sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { Switch as AriaSwitch, type SwitchProps as AriaSwitchProps } from 'react-aria-components';\n\nimport { ChoiceChrome, type ChoiceChromeProps } from '../checkbox/ChoiceChrome';\nimport { cx } from '../utils/cx';\nimport styles from './Switch.module.css';\n\nexport interface SwitchProps\n    extends Omit<AriaSwitchProps, 'className' | 'style' | 'children'>, ChoiceChromeProps {\n    /** Label, next to the switch. */\n    children?: ReactNode;\n    switchClassName?: string;\n}\n\n/** An on and off switch, for settings that apply at once. */\nexport function Switch({\n    children,\n    description,\n    errors = [],\n    className,\n    switchClassName,\n    descriptionClassName,\n    errorsClassName,\n    ...props\n}: SwitchProps) {\n    return (\n        <ChoiceChrome\n            component=\"switch\"\n            description={description}\n            errors={errors}\n            className={className}\n            descriptionClassName={descriptionClassName}\n            errorsClassName={errorsClassName}\n        >\n            {(describedBy) => (\n                <AriaSwitch\n                    {...props}\n                    aria-describedby={describedBy}\n                    className={cx(styles.switch, switchClassName)}\n                >\n                    <span className={styles.track} aria-hidden=\"true\">\n                        <span className={styles.thumb} />\n                    </span>\n                    {children !== undefined ? (\n                        <span className={styles.label}>{children}</span>\n                    ) : null}\n                </AriaSwitch>\n            )}\n        </ChoiceChrome>\n    );\n}\n"],"mappings":";;;;;;;AAeA,SAAgBA,SAAO,EACnB,UACA,aACA,SAAS,CAAA,GACT,WACA,iBACA,sBACA,iBACA,GAAG,SACS;CACZ,OACI,oBAAC,cAAD;EACI,WAAU;EACG;EACL;EACG;EACW;EACL;EAEf,WAAA,gBACE,qBAACC,QAAD;GACI,GAAI;GACJ,oBAAkB;GAClB,WAAW,GAAGC,sBAAO,QAAQ,eAAe;GAHhD,UAAA,CAKI,oBAAC,QAAD;IAAM,WAAWA,sBAAO;IAAO,eAAY;IACvC,UAAA,oBAAC,QAAD,EAAM,WAAWA,sBAAO,MAAM,CAAA;GAC5B,CAAA,GACL,aAAa,KAAA,IACV,oBAAC,QAAD;IAAM,WAAWA,sBAAO;IAAQ;GAAe,CAAA,IAC/C,IACI;;CAEN,CAAA;AAEtB"}

package/dist/switch/Switch.module.js

@@ -1,10 +1,10 @@
 import "./Switch.css";
 //#region src/switch/Switch.module.css
-var track = "panneau-track-PtpuqW";
-var thumb = "panneau-thumb-pQGDyC";
-var label = "panneau-label-L3fUnh";
+var track = "panneau-switch-track";
+var thumb = "panneau-switch-thumb";
+var label = "panneau-switch-label";
 var Switch_module_default = {
-	"switch": "panneau-switch-pwmftu",
+	"switch": "panneau-switch",
 	track,
 	thumb,
 	label

package/dist/switch/Switch.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.module.js","names":[],"sources":["../../src/switch/Switch.module.css"],"sourcesContent":[".switch {\n    display: inline-flex;\n    align-items: center;\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.switch[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.switch[data-readonly] {\n    cursor: default;\n}\n\n.track {\n    position: relative;\n    flex: 0 0 auto;\n    width: 2.25rem;\n    height: 1.25rem;\n    background-color: var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-full);\n    transition: background-color var(--panneau-duration);\n}\n\n.thumb {\n    position: absolute;\n    top: 0.125rem;\n    left: 0.125rem;\n    width: 1rem;\n    height: 1rem;\n    background-color: var(--panneau-color-surface);\n    border-radius: var(--panneau-radius-full);\n    box-shadow: var(--panneau-shadow-sm);\n    transition: transform var(--panneau-duration);\n}\n\n.switch[data-selected] .track {\n    background-color: var(--panneau-color-accent);\n}\n\n.switch[data-selected] .thumb {\n    background-color: var(--panneau-color-accent-text);\n    transform: translateX(1rem);\n}\n\n.switch[data-selected] .thumb:dir(rtl) {\n    transform: translateX(-1rem);\n}\n\n.switch[data-focus-visible] .track {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.label {\n    overflow-wrap: anywhere;\n}\n\n@media (pointer: coarse) {\n    .switch {\n        min-height: 2.75rem;\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"Switch.module.js","names":[],"sources":["../../src/switch/Switch.module.css"],"sourcesContent":[".switch {\n    display: inline-flex;\n    align-items: center;\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.switch[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.switch[data-readonly] {\n    cursor: default;\n}\n\n.track {\n    position: relative;\n    flex: 0 0 auto;\n    width: var(--panneau-switch-width, 2.25rem);\n    height: var(--panneau-switch-height, 1.25rem);\n    background-color: var(--panneau-switch-track-bg, var(--panneau-color-border-control));\n    border-radius: var(--panneau-switch-radius, var(--panneau-radius-full));\n    transition: background-color var(--panneau-duration);\n}\n\n.thumb {\n    position: absolute;\n    top: calc((var(--panneau-switch-height, 1.25rem) - var(--panneau-switch-thumb-size, 1rem)) / 2);\n    left: calc(\n        (var(--panneau-switch-height, 1.25rem) - var(--panneau-switch-thumb-size, 1rem)) / 2\n    );\n    width: var(--panneau-switch-thumb-size, 1rem);\n    height: var(--panneau-switch-thumb-size, 1rem);\n    background-color: var(--panneau-switch-thumb-bg, var(--panneau-color-surface));\n    border-radius: var(--panneau-switch-radius, var(--panneau-radius-full));\n    box-shadow: var(--panneau-shadow-sm);\n    transition: transform var(--panneau-duration);\n}\n\n.switch[data-selected] .track {\n    background-color: var(--panneau-switch-checked-bg, var(--panneau-color-accent));\n}\n\n.switch[data-selected] .thumb {\n    background-color: var(--panneau-switch-checked-thumb-bg, var(--panneau-color-accent-text));\n    /* The thumb travels the width of the track minus its height (both ends keep the same inset). */\n    transform: translateX(\n        calc(var(--panneau-switch-width, 2.25rem) - var(--panneau-switch-height, 1.25rem))\n    );\n}\n\n.switch[data-selected] .thumb:dir(rtl) {\n    transform: translateX(\n        calc(\n            -1 * calc(var(--panneau-switch-width, 2.25rem) - var(--panneau-switch-height, 1.25rem))\n        )\n    );\n}\n\n.switch[data-focus-visible] .track {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.label {\n    overflow-wrap: anywhere;\n}\n\n@media (pointer: coarse) {\n    .switch {\n        min-height: 2.75rem;\n    }\n}\n"],"mappings":""}

package/dist/switch/tokens.d.ts

@@ -0,0 +1,3 @@
+/** Tokens of Switch. */
+export declare const switchTokens: import("..").ComponentTokens<"switch", "panneau-switch-height" | "panneau-switch-width" | "panneau-switch-radius" | "panneau-switch-checked-bg" | "panneau-switch-track-bg" | "panneau-switch-thumb-size" | "panneau-switch-thumb-bg" | "panneau-switch-checked-thumb-bg">;
+//# sourceMappingURL=tokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/switch/tokens.ts"],"names":[],"mappings":"AAEA,wBAAwB;AACxB,eAAO,MAAM,YAAY,4QAiBvB,CAAC"}