@panneau/ui 5.0.0-alpha.1 → 5.0.0-alpha.3

package/dist/prose/Prose.css

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

package/dist/prose/Prose.d.ts

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

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

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

package/dist/prose/Prose.js

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

package/dist/prose/Prose.js.map

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

package/dist/prose/Prose.module.js

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

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

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

package/dist/prose/tokens.d.ts

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

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

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

package/dist/prose/tokens.js

@@ -0,0 +1,33 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/prose/tokens.ts
+/** Tokens of Prose. Its headings use the tokens of Heading. */
+var proseTokens = defineComponentTokens("prose", {
+	/** Line height of the content. */
+	"line-height": "1.6",
+	/** Space between blocks: paragraphs, lists, tables. */
+	gap: "var(--panneau-space-4)",
+	/** Space above a heading. */
+	"heading-gap": "var(--panneau-space-6)",
+	/** Indent of lists. */
+	"list-indent": "1.5em",
+	/** Color of links. */
+	"link-color": "var(--panneau-color-link)",
+	/** Font size of code, relative to the text around it. */
+	"code-font-size": "0.875em",
+	/** Text color of code: inherited, so that a site's global `code` color doesn't apply. */
+	"code-color": "inherit",
+	/** Background of code and code blocks. */
+	"code-bg": "var(--panneau-color-surface-sunken)",
+	/** Corner radius of code and code blocks. */
+	"code-radius": "var(--panneau-radius-sm)",
+	/** Border of quotes. */
+	"quote-border-color": "var(--panneau-color-border)",
+	/** Text color of quotes and captions. */
+	"quote-color": "var(--panneau-color-text-muted)",
+	/** Color of the borders of tables and of horizontal rules. */
+	"border-color": "var(--panneau-color-border)"
+});
+//#endregion
+export { proseTokens };
+
+//# sourceMappingURL=tokens.js.map

package/dist/prose/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/prose/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of Prose. Its headings use the tokens of Heading. */\nexport const proseTokens = defineComponentTokens('prose', {\n    /** Line height of the content. */\n    'line-height': '1.6',\n    /** Space between blocks: paragraphs, lists, tables. */\n    gap: 'var(--panneau-space-4)',\n    /** Space above a heading. */\n    'heading-gap': 'var(--panneau-space-6)',\n    /** Indent of lists. */\n    'list-indent': '1.5em',\n    /** Color of links. */\n    'link-color': 'var(--panneau-color-link)',\n    /** Font size of code, relative to the text around it. */\n    'code-font-size': '0.875em',\n    /** Text color of code: inherited, so that a site's global `code` color doesn't apply. */\n    'code-color': 'inherit',\n    /** Background of code and code blocks. */\n    'code-bg': 'var(--panneau-color-surface-sunken)',\n    /** Corner radius of code and code blocks. */\n    'code-radius': 'var(--panneau-radius-sm)',\n    /** Border of quotes. */\n    'quote-border-color': 'var(--panneau-color-border)',\n    /** Text color of quotes and captions. */\n    'quote-color': 'var(--panneau-color-text-muted)',\n    /** Color of the borders of tables and of horizontal rules. */\n    'border-color': 'var(--panneau-color-border)',\n});\n"],"mappings":";;;AAGA,IAAa,cAAc,sBAAsB,SAAS;;CAEtD,eAAe;;CAEf,KAAK;;CAEL,eAAe;;CAEf,eAAe;;CAEf,cAAc;;CAEd,kBAAkB;;CAElB,cAAc;;CAEd,WAAW;;CAEX,eAAe;;CAEf,sBAAsB;;CAEtB,eAAe;;CAEf,gBAAgB;AACpB,CAAC"}

package/dist/radio-group/RadioGroup.css

@@ -1,15 +1,15 @@
-.panneau-options-QPuFOV {
+.panneau-radio-group-options {
     display: flex;
     flex-direction: column;
     gap: var(--panneau-space-1);
 }
 
-.panneau-horizontal-KgXsCy .panneau-options-QPuFOV {
+.panneau-radio-group-horizontal .panneau-radio-group-options {
     flex-flow: row wrap;
     gap: var(--panneau-space-1) var(--panneau-space-4);
 }
 
-.panneau-radio-zz4Tx- {
+.panneau-radio-group-radio {
     display: inline-flex;
     align-items: flex-start;
     gap: var(--panneau-space-2);
@@ -20,64 +20,65 @@
     -webkit-tap-highlight-color: transparent;
 }
 
-.panneau-radio-zz4Tx-[data-disabled] {
+.panneau-radio-group-radio[data-disabled] {
     cursor: not-allowed;
     opacity: 0.55;
 }
 
-.panneau-radio-zz4Tx-[data-readonly] {
+.panneau-radio-group-radio[data-readonly] {
     cursor: default;
 }
 
-.panneau-circle-IySLxv {
+.panneau-radio-group-circle {
     flex: 0 0 auto;
-    width: 1.125rem;
-    height: 1.125rem;
+    width: var(--panneau-radio-size, 1.125rem);
+    height: var(--panneau-radio-size, 1.125rem);
     margin-top: 0.125rem;
-    background-color: var(--panneau-color-surface);
-    border: var(--panneau-border-width) solid var(--panneau-color-border-control);
+    background-color: var(--panneau-radio-bg, var(--panneau-color-surface));
+    border: var(--panneau-border-width) solid
+        var(--panneau-radio-border-color, var(--panneau-color-border-control));
     border-radius: var(--panneau-radius-full);
     transition:
         border-color var(--panneau-duration),
         border-width var(--panneau-duration);
 }
 
-.panneau-radio-zz4Tx-[data-hovered] .panneau-circle-IySLxv {
+.panneau-radio-group-radio[data-hovered] .panneau-radio-group-circle {
     border-color: var(--panneau-color-text-muted);
 }
 
-.panneau-radio-zz4Tx-[data-selected] .panneau-circle-IySLxv {
-    border-color: var(--panneau-color-accent);
-    border-width: 0.3125rem;
+.panneau-radio-group-radio[data-selected] .panneau-radio-group-circle {
+    border-color: var(--panneau-radio-checked-color, var(--panneau-color-accent));
+    border-width: var(--panneau-radio-checked-border-width, 0.3125rem);
 }
 
-.panneau-radio-zz4Tx-[data-invalid] .panneau-circle-IySLxv {
+.panneau-radio-group-radio[data-invalid] .panneau-radio-group-circle {
     border-color: var(--panneau-color-danger);
 }
 
-.panneau-radio-zz4Tx-[data-focus-visible] .panneau-circle-IySLxv {
+.panneau-radio-group-radio[data-focus-visible] .panneau-radio-group-circle {
     outline: var(--panneau-focus-width) solid var(--panneau-color-focus);
     outline-offset: 2px;
 }
 
-.panneau-text-W98R9k {
+.panneau-radio-group-text {
     display: flex;
     flex-direction: column;
     min-width: 0;
 }
 
-.panneau-description-SPgnUk {
+.panneau-radio-group-description {
     font-size: var(--panneau-font-size-sm);
     color: var(--panneau-color-text-muted);
 }
 
 @media (pointer: coarse) {
-    .panneau-radio-zz4Tx- {
+    .panneau-radio-group-radio {
         min-height: 2.75rem;
         align-items: center;
     }
 
-    .panneau-circle-IySLxv {
+    .panneau-radio-group-circle {
         margin-top: 0;
     }
 }

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,+BA+CjB"}
+{"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"}

package/dist/radio-group/RadioGroup.js

@@ -19,7 +19,7 @@ function RadioGroup$1({ options, value, onChange, label, description, errors = [
 		},
 		isInvalid: errors.length > 0,
 		validationBehavior: "aria",
-		className: cx(Field_module_default.field, orientation === "horizontal" && RadioGroup_module_default.horizontal, className),
+		className: cx("panneau-radio-group", Field_module_default.field, orientation === "horizontal" && RadioGroup_module_default.horizontal, className),
 		children: [
 			/* @__PURE__ */ jsx(FieldLabel, {
 				isRequired,
@@ -31,7 +31,7 @@ function RadioGroup$1({ options, value, onChange, label, description, errors = [
 				children: options.map((option_0, position) => /* @__PURE__ */ jsxs(Radio, {
 					value: String(position),
 					isDisabled: option_0.disabled,
-					className: cx(RadioGroup_module_default.radio, radioClassName),
+					className: cx("panneau-radio", RadioGroup_module_default.radio, radioClassName),
 					children: [/* @__PURE__ */ jsx("span", {
 						className: RadioGroup_module_default.circle,
 						"aria-hidden": "true"

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                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(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,GACPC,qBAAY,OACZ,gBAAgB,gBAAgBC,0BAAO,YACvC,SACJ;EAjBJ,UAAA;GAmBI,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,GAAGI,0BAAO,OAAO,cAAc;KAJ9C,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","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"}

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

@@ -1,11 +1,11 @@
 import "./RadioGroup.css";
 //#region src/radio-group/RadioGroup.module.css
-var options = "panneau-options-QPuFOV";
-var horizontal = "panneau-horizontal-KgXsCy";
-var radio = "panneau-radio-zz4Tx-";
-var circle = "panneau-circle-IySLxv";
-var text = "panneau-text-W98R9k";
-var description = "panneau-description-SPgnUk";
+var options = "panneau-radio-group-options";
+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 description = "panneau-radio-group-description";
 var RadioGroup_module_default = {
 	options,
 	horizontal,

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.module.js","names":[],"sources":["../../src/radio-group/RadioGroup.module.css"],"sourcesContent":[".options {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n}\n\n.horizontal .options {\n    flex-flow: row wrap;\n    gap: var(--panneau-space-1) var(--panneau-space-4);\n}\n\n.radio {\n    display: inline-flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-2);\n    min-height: 1.5rem;\n    font-size: var(--panneau-font-size-md);\n    color: var(--panneau-color-text);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n}\n\n.radio[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.radio[data-readonly] {\n    cursor: default;\n}\n\n.circle {\n    flex: 0 0 auto;\n    width: 1.125rem;\n    height: 1.125rem;\n    margin-top: 0.125rem;\n    background-color: var(--panneau-color-surface);\n    border: var(--panneau-border-width) solid var(--panneau-color-border-control);\n    border-radius: var(--panneau-radius-full);\n    transition:\n        border-color var(--panneau-duration),\n        border-width var(--panneau-duration);\n}\n\n.radio[data-hovered] .circle {\n    border-color: var(--panneau-color-text-muted);\n}\n\n.radio[data-selected] .circle {\n    border-color: var(--panneau-color-accent);\n    border-width: 0.3125rem;\n}\n\n.radio[data-invalid] .circle {\n    border-color: var(--panneau-color-danger);\n}\n\n.radio[data-focus-visible] .circle {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.text {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n}\n\n.description {\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n@media (pointer: coarse) {\n    .radio {\n        min-height: 2.75rem;\n        align-items: center;\n    }\n\n    .circle {\n        margin-top: 0;\n    }\n}\n"],"mappings":""}
+{"version":3,"file":"RadioGroup.module.js","names":[],"sources":["../../src/radio-group/RadioGroup.module.css"],"sourcesContent":[".options {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n}\n\n.horizontal .options {\n    flex-flow: row wrap;\n    gap: var(--panneau-space-1) var(--panneau-space-4);\n}\n\n.radio {\n    display: inline-flex;\n    align-items: flex-start;\n    gap: var(--panneau-space-2);\n    min-height: 1.5rem;\n    font-size: var(--panneau-font-size-md);\n    color: var(--panneau-color-text);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n}\n\n.radio[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.55;\n}\n\n.radio[data-readonly] {\n    cursor: default;\n}\n\n.circle {\n    flex: 0 0 auto;\n    width: var(--panneau-radio-size, 1.125rem);\n    height: var(--panneau-radio-size, 1.125rem);\n    margin-top: 0.125rem;\n    background-color: var(--panneau-radio-bg, var(--panneau-color-surface));\n    border: var(--panneau-border-width) solid\n        var(--panneau-radio-border-color, var(--panneau-color-border-control));\n    border-radius: var(--panneau-radius-full);\n    transition:\n        border-color var(--panneau-duration),\n        border-width var(--panneau-duration);\n}\n\n.radio[data-hovered] .circle {\n    border-color: var(--panneau-color-text-muted);\n}\n\n.radio[data-selected] .circle {\n    border-color: var(--panneau-radio-checked-color, var(--panneau-color-accent));\n    border-width: var(--panneau-radio-checked-border-width, 0.3125rem);\n}\n\n.radio[data-invalid] .circle {\n    border-color: var(--panneau-color-danger);\n}\n\n.radio[data-focus-visible] .circle {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 2px;\n}\n\n.text {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n}\n\n.description {\n    font-size: var(--panneau-font-size-sm);\n    color: var(--panneau-color-text-muted);\n}\n\n@media (pointer: coarse) {\n    .radio {\n        min-height: 2.75rem;\n        align-items: center;\n    }\n\n    .circle {\n        margin-top: 0;\n    }\n}\n"],"mappings":""}

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

@@ -0,0 +1,3 @@
+/** Tokens of RadioGroup. */
+export declare const radioTokens: import("..").ComponentTokens<"radio", "panneau-radio-size" | "panneau-radio-bg" | "panneau-radio-border-color" | "panneau-radio-checked-color" | "panneau-radio-checked-border-width">;
+//# sourceMappingURL=tokens.d.ts.map

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

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

package/dist/radio-group/tokens.js

@@ -0,0 +1,19 @@
+import { defineComponentTokens } from "../theme/componentTokens.js";
+//#region src/radio-group/tokens.ts
+/** Tokens of RadioGroup. */
+var radioTokens = defineComponentTokens("radio", {
+	/** Size of the circle. */
+	size: "1.125rem",
+	/** Background of the circle. */
+	bg: "var(--panneau-color-surface)",
+	/** Border color of the circle. */
+	"border-color": "var(--panneau-color-border-control)",
+	/** Color of a selected circle. */
+	"checked-color": "var(--panneau-color-accent)",
+	/** Border width of a selected circle, which draws the dot. */
+	"checked-border-width": "0.3125rem"
+});
+//#endregion
+export { radioTokens };
+
+//# sourceMappingURL=tokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","names":[],"sources":["../../src/radio-group/tokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of RadioGroup. */\nexport const radioTokens = defineComponentTokens('radio', {\n    /** Size of the circle. */\n    size: '1.125rem',\n    /** Background of the circle. */\n    bg: 'var(--panneau-color-surface)',\n    /** Border color of the circle. */\n    'border-color': 'var(--panneau-color-border-control)',\n    /** Color of a selected circle. */\n    'checked-color': 'var(--panneau-color-accent)',\n    /** Border width of a selected circle, which draws the dot. */\n    'checked-border-width': '0.3125rem',\n});\n"],"mappings":";;;AAGA,IAAa,cAAc,sBAAsB,SAAS;;CAEtD,MAAM;;CAEN,IAAI;;CAEJ,gBAAgB;;CAEhB,iBAAiB;;CAEjB,wBAAwB;AAC5B,CAAC"}