@brijbyte/agentic-ui 0.0.2 → 0.0.4

package/dist/radio/parts.d.ts

@@ -0,0 +1,18 @@
+import * as react from "react";
+import { ComponentPropsWithoutRef } from "react";
+import { Radio } from "@base-ui/react/radio";
+
+//#region src/radio/parts.d.ts
+type BaseRootProps = ComponentPropsWithoutRef<typeof Radio.Root>;
+type BaseIndicatorProps = ComponentPropsWithoutRef<typeof Radio.Indicator>;
+interface RadioRootProps extends Omit<BaseRootProps, "className"> {
+  className?: string;
+}
+interface RadioIndicatorProps extends Omit<BaseIndicatorProps, "className"> {
+  className?: string;
+}
+declare const RadioRoot: react.ForwardRefExoticComponent<RadioRootProps & react.RefAttributes<HTMLSpanElement>>;
+declare const RadioIndicator: react.ForwardRefExoticComponent<RadioIndicatorProps & react.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { RadioIndicator, RadioIndicatorProps, RadioRoot, RadioRootProps };
+//# sourceMappingURL=parts.d.ts.map

package/dist/radio/parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/radio/parts.tsx"],"mappings":";;;;;KAuBK,aAAA,GAAgB,wBAAA,QAAgC,KAAA,CAAU,IAAA;AAAA,KAC1D,kBAAA,GAAqB,wBAAA,QAAgC,KAAA,CAAU,SAAA;AAAA,UAEnD,cAAA,SAAuB,IAAA,CAAK,aAAA;EAC3C,SAAA;AAAA;AAAA,UAEe,mBAAA,SAA4B,IAAA,CAAK,kBAAA;EAChD,SAAA;AAAA;AAAA,cAGW,SAAA,EAAS,KAAA,CAAA,yBAAA,CAAA,cAAA,GAAA,KAAA,CAAA,aAAA,CAAA,eAAA;AAAA,cAIT,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,mBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,eAAA"}

package/dist/radio/parts.js

@@ -0,0 +1,42 @@
+import radio_module_default from "./radio.module.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Radio } from "@base-ui/react/radio";
+//#region src/radio/parts.tsx
+/**
+* Styled primitives for Radio (single item).
+*
+* @example
+* ```tsx
+* import { RadioGroup } from '@base-ui/react/radio-group';
+* import { RadioRoot, RadioIndicator } from '@brijbyte/agentic-ui/radio';
+*
+* <RadioGroup defaultValue="a">
+*   <label htmlFor="opt-a">
+*     <RadioRoot id="opt-a" value="a">
+*       <RadioIndicator />
+*     </RadioRoot>
+*     Option A
+*   </label>
+* </RadioGroup>
+* ```
+*/
+const RadioRoot = forwardRef(function RadioRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Radio.Root, {
+		ref,
+		className: `${radio_module_default.radio} ${className ?? ""}`,
+		...props
+	});
+});
+const RadioIndicator = forwardRef(function RadioIndicator({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Radio.Indicator, {
+		ref,
+		keepMounted: true,
+		className: `${radio_module_default.indicator} ${className ?? ""}`,
+		...props
+	});
+});
+//#endregion
+export { RadioIndicator, RadioRoot };
+
+//# sourceMappingURL=parts.js.map

package/dist/radio/parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts.js","names":["BaseRadio","styles"],"sources":["../../src/radio/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Radio (single item).\n *\n * @example\n * ```tsx\n * import { RadioGroup } from '@base-ui/react/radio-group';\n * import { RadioRoot, RadioIndicator } from '@brijbyte/agentic-ui/radio';\n *\n * <RadioGroup defaultValue=\"a\">\n *   <label htmlFor=\"opt-a\">\n *     <RadioRoot id=\"opt-a\" value=\"a\">\n *       <RadioIndicator />\n *     </RadioRoot>\n *     Option A\n *   </label>\n * </RadioGroup>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\nimport styles from \"./radio.module.css\";\n\ntype BaseRootProps = ComponentPropsWithoutRef<typeof BaseRadio.Root>;\ntype BaseIndicatorProps = ComponentPropsWithoutRef<typeof BaseRadio.Indicator>;\n\nexport interface RadioRootProps extends Omit<BaseRootProps, \"className\"> {\n  className?: string;\n}\nexport interface RadioIndicatorProps extends Omit<BaseIndicatorProps, \"className\"> {\n  className?: string;\n}\n\nexport const RadioRoot = forwardRef<ComponentRef<typeof BaseRadio.Root>, RadioRootProps>(function RadioRoot({ className, ...props }, ref) {\n  return <BaseRadio.Root ref={ref} className={`${styles.radio} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const RadioIndicator = forwardRef<ComponentRef<typeof BaseRadio.Indicator>, RadioIndicatorProps>(function RadioIndicator(\n  { className, ...props },\n  ref,\n) {\n  return <BaseRadio.Indicator ref={ref} keepMounted className={`${styles.indicator} ${className ?? \"\"}`} {...props} />;\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAa,YAAY,WAAgE,SAAS,UAAU,EAAE,WAAW,GAAG,SAAS,KAAK;AACxI,QAAO,oBAACA,MAAU,MAAX;EAAqB;EAAK,WAAW,GAAGC,qBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAC/F;AAEF,MAAa,iBAAiB,WAA0E,SAAS,eAC/G,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,MAAU,WAAX;EAA0B;EAAK,aAAA;EAAY,WAAW,GAAGC,qBAAO,UAAU,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACpH"}

package/dist/radio/radio.css

@@ -0,0 +1,84 @@
+@layer components {
+  .item_hqwDuG {
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+  }
+
+  .item_hqwDuG:has([data-disabled]) {
+    cursor: not-allowed;
+  }
+
+  .item_hqwDuG:has([data-disabled]) .label_hqwDuG {
+    opacity: .44;
+  }
+
+  .radio_hqwDuG {
+    border-radius: var(--radius-full);
+    border: var(--border-width-base) solid var(--color-line-strong);
+    background-color: var(--color-surface-1);
+    width: 16px;
+    height: 16px;
+    transition: background-color var(--duration-fast) var(--easing-standard),
+      border-color var(--duration-fast) var(--easing-standard),
+      box-shadow var(--duration-fast) var(--easing-standard);
+    outline: none;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    position: relative;
+  }
+
+  .radio_hqwDuG:focus-visible {
+    box-shadow: var(--shadow-focus);
+    border-color: var(--color-accent);
+  }
+
+  .radio_hqwDuG:hover:not([data-disabled]) {
+    border-color: var(--color-accent);
+  }
+
+  .radio_hqwDuG[data-checked] {
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  .radio_hqwDuG[data-checked]:hover:not([data-disabled]) {
+    background-color: var(--color-accent-hover);
+    border-color: var(--color-accent-hover);
+  }
+
+  .radio_hqwDuG[data-disabled] {
+    opacity: .44;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .indicator_hqwDuG {
+    border-radius: var(--radius-full);
+    background-color: var(--color-on-accent);
+    width: 6px;
+    height: 6px;
+    transition: transform var(--duration-fast) var(--easing-spring),
+      opacity var(--duration-fast) var(--easing-standard);
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  .radio_hqwDuG[data-checked] .indicator_hqwDuG {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .label_hqwDuG {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-primary);
+    line-height: var(--line-height-normal);
+  }
+}

package/dist/radio/radio.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+import styles from "./radio.module.css";
+
+//#region src/radio/radio.d.ts
+interface RadioProps {
+  /** Value submitted with the form and matched against the group's value. */
+  value: string;
+  /** Label rendered next to the button. */
+  children?: ReactNode;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  /** Override the auto-generated element id. */
+  id?: string;
+  className?: string;
+}
+/**
+ * A single radio button with an optional label.
+ * Must be placed inside `<RadioGroup>` or a raw base-ui RadioGroup.
+ */
+declare function Radio({
+  value,
+  children,
+  id,
+  className,
+  ...props
+}: RadioProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Radio, RadioProps, styles };
+//# sourceMappingURL=radio.d.ts.map

package/dist/radio/radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","names":[],"sources":["../../src/radio/radio.tsx"],"mappings":";;;;;UAKiB,UAAA;;EAEf,KAAA;EAFe;EAIf,QAAA,GAAW,SAAA;EACX,QAAA;EACA,QAAA;EACA,QAAA;EAHA;EAKA,EAAA;EACA,SAAA;AAAA;;;;;iBAOc,KAAA,CAAA;EAAQ,KAAA;EAAO,QAAA;EAAU,EAAA;EAAI,SAAA;EAAA,GAAc;AAAA,GAAS,UAAA,GAAU,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/radio/radio.js

@@ -0,0 +1,33 @@
+import radio_module_default from "./radio.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Radio } from "@base-ui/react/radio";
+//#region src/radio/radio.tsx
+/**
+* A single radio button with an optional label.
+* Must be placed inside `<RadioGroup>` or a raw base-ui RadioGroup.
+*/
+function Radio$1({ value, children, id, className, ...props }) {
+	const radioId = id ?? useId();
+	return /* @__PURE__ */ jsxs("label", {
+		className: `${radio_module_default.item} ${className ?? ""}`,
+		htmlFor: radioId,
+		children: [/* @__PURE__ */ jsx(Radio.Root, {
+			id: radioId,
+			value,
+			className: radio_module_default.radio,
+			...props,
+			children: /* @__PURE__ */ jsx(Radio.Indicator, {
+				keepMounted: true,
+				className: radio_module_default.indicator
+			})
+		}), children && /* @__PURE__ */ jsx("span", {
+			className: radio_module_default.label,
+			children
+		})]
+	});
+}
+//#endregion
+export { Radio$1 as Radio };
+
+//# sourceMappingURL=radio.js.map

package/dist/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","names":["Radio","styles","BaseRadio"],"sources":["../../src/radio/radio.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\nimport styles from \"./radio.module.css\";\n\nexport interface RadioProps {\n  /** Value submitted with the form and matched against the group's value. */\n  value: string;\n  /** Label rendered next to the button. */\n  children?: ReactNode;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  /** Override the auto-generated element id. */\n  id?: string;\n  className?: string;\n}\n\n/**\n * A single radio button with an optional label.\n * Must be placed inside `<RadioGroup>` or a raw base-ui RadioGroup.\n */\nexport function Radio({ value, children, id, className, ...props }: RadioProps) {\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const radioId = id ?? useId();\n\n  return (\n    <label className={`${styles.item} ${className ?? \"\"}`} htmlFor={radioId}>\n      <BaseRadio.Root id={radioId} value={value} className={styles.radio} {...props}>\n        <BaseRadio.Indicator keepMounted className={styles.indicator} />\n      </BaseRadio.Root>\n      {children && <span className={styles.label}>{children}</span>}\n    </label>\n  );\n}\n\nexport { styles as RadioStyles };\n"],"mappings":";;;;;;;;;AAsBA,SAAgBA,QAAM,EAAE,OAAO,UAAU,IAAI,WAAW,GAAG,SAAqB;CAE9E,MAAM,UAAU,MAAM,OAAO;AAE7B,QACE,qBAAC,SAAD;EAAO,WAAW,GAAGC,qBAAO,KAAK,GAAG,aAAa;EAAM,SAAS;YAAhE,CACE,oBAACC,MAAU,MAAX;GAAgB,IAAI;GAAgB;GAAO,WAAWD,qBAAO;GAAO,GAAI;aACtE,oBAACC,MAAU,WAAX;IAAqB,aAAA;IAAY,WAAWD,qBAAO;IAAa,CAAA;GACjD,CAAA,EAChB,YAAY,oBAAC,QAAD;GAAM,WAAWA,qBAAO;GAAQ;GAAgB,CAAA,CACvD"}

package/dist/radio/radio.module.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: Record<string, string | undefined>;
+export default styles;

package/dist/radio/radio.module.js

@@ -0,0 +1,11 @@
+//#region src/radio/radio.module.css
+var radio_module_default = {
+	"indicator": "indicator_hqwDuG",
+	"item": "item_hqwDuG",
+	"label": "label_hqwDuG",
+	"radio": "radio_hqwDuG"
+};
+//#endregion
+export { radio_module_default as default };
+
+//# sourceMappingURL=radio.module.js.map

package/dist/radio/radio.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.module.js","names":[],"sources":["../../src/radio/radio.module.css"],"sourcesContent":["@layer components {\n  /* ── Single radio item layout ───────────────────────────────────── */\n\n  .item {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .item:has([data-disabled]) {\n    cursor: not-allowed;\n  }\n\n  .item:has([data-disabled]) .label {\n    opacity: 0.44;\n  }\n\n  /* ── Radio button (the circle) ──────────────────────────────────── */\n\n  .radio {\n    flex-shrink: 0;\n    width: 16px;\n    height: 16px;\n    border-radius: var(--radius-full);\n    border: var(--border-width-base) solid var(--color-line-strong);\n    background-color: var(--color-surface-1);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      border-color var(--duration-fast) var(--easing-standard),\n      box-shadow var(--duration-fast) var(--easing-standard);\n    outline: none;\n    position: relative;\n    /* Reset button/span defaults */\n    padding: 0;\n    margin: 0;\n  }\n\n  .radio:focus-visible {\n    box-shadow: var(--shadow-focus);\n    border-color: var(--color-accent);\n  }\n\n  .radio:hover:not([data-disabled]) {\n    border-color: var(--color-accent);\n  }\n\n  .radio[data-checked] {\n    background-color: var(--color-accent);\n    border-color: var(--color-accent);\n  }\n\n  .radio[data-checked]:hover:not([data-disabled]) {\n    background-color: var(--color-accent-hover);\n    border-color: var(--color-accent-hover);\n  }\n\n  .radio[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ── Indicator (inner dot) ──────────────────────────────────────── */\n\n  .indicator {\n    width: 6px;\n    height: 6px;\n    border-radius: var(--radius-full);\n    background-color: var(--color-on-accent);\n    transform: scale(0);\n    transition:\n      transform var(--duration-fast) var(--easing-spring),\n      opacity var(--duration-fast) var(--easing-standard);\n    opacity: 0;\n  }\n\n  /* data-checked is on the Root; the Indicator inherits it */\n  .radio[data-checked] .indicator {\n    transform: scale(1);\n    opacity: 1;\n  }\n\n  /* ── Label text ─────────────────────────────────────────────────── */\n\n  .label {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-primary);\n    line-height: var(--line-height-normal);\n  }\n}\n"],"mappings":";AAQA,IAAA,uBAAe;CAAC,aAAK;CAAA,QAAA;CAAA,SAAA;CAAA,SAAA;CAAA"}

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

@@ -0,0 +1,3 @@
+import { RadioGroup, RadioGroupProps, RadioOption, styles } from "./radio-group.js";
+import { RadioGroupRoot, RadioGroupRootProps } from "./parts.js";
+export { RadioGroup, type RadioGroupProps, RadioGroupRoot, type RadioGroupRootProps, styles as RadioGroupStyles, type RadioOption };

package/dist/radio-group/index.js

@@ -0,0 +1,4 @@
+import radio_group_module_default from "./radio-group.module.js";
+import { RadioGroup } from "./radio-group.js";
+import { RadioGroupRoot } from "./parts.js";
+export { RadioGroup, RadioGroupRoot, radio_group_module_default as RadioGroupStyles };

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

@@ -0,0 +1,13 @@
+import * as react from "react";
+import { ComponentPropsWithoutRef } from "react";
+import { RadioGroup } from "@base-ui/react/radio-group";
+
+//#region src/radio-group/parts.d.ts
+type BaseGroupProps = ComponentPropsWithoutRef<typeof RadioGroup>;
+interface RadioGroupRootProps extends Omit<BaseGroupProps, "className"> {
+  className?: string;
+}
+declare const RadioGroupRoot: react.ForwardRefExoticComponent<RadioGroupRootProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { RadioGroupRoot, RadioGroupRootProps };
+//# sourceMappingURL=parts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/radio-group/parts.tsx"],"mappings":";;;;;KAoBK,cAAA,GAAiB,wBAAA,QAAgC,UAAA;AAAA,UAErC,mBAAA,SAA4B,IAAA,CAAK,cAAA;EAChD,SAAA;AAAA;AAAA,cAGW,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,mBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA"}

package/dist/radio-group/parts.js

@@ -0,0 +1,31 @@
+import radio_group_module_default from "./radio-group.module.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/radio-group/parts.tsx
+/**
+* Styled primitive for RadioGroup.
+*
+* @example
+* ```tsx
+* import { Radio } from '@brijbyte/agentic-ui/radio';
+* import { RadioGroupRoot } from '@brijbyte/agentic-ui/radio-group';
+*
+* <RadioGroupRoot defaultValue="b" name="plan">
+*   <Radio value="a">Hobby</Radio>
+*   <Radio value="b">Pro</Radio>
+*   <Radio value="c">Enterprise</Radio>
+* </RadioGroupRoot>
+* ```
+*/
+const RadioGroupRoot = forwardRef(function RadioGroupRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		ref,
+		className: `${radio_group_module_default.group} ${className ?? ""}`,
+		...props
+	});
+});
+//#endregion
+export { RadioGroupRoot };
+
+//# sourceMappingURL=parts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"parts.js","names":["BaseRadioGroup","styles"],"sources":["../../src/radio-group/parts.tsx"],"sourcesContent":["/**\n * Styled primitive for RadioGroup.\n *\n * @example\n * ```tsx\n * import { Radio } from '@brijbyte/agentic-ui/radio';\n * import { RadioGroupRoot } from '@brijbyte/agentic-ui/radio-group';\n *\n * <RadioGroupRoot defaultValue=\"b\" name=\"plan\">\n *   <Radio value=\"a\">Hobby</Radio>\n *   <Radio value=\"b\">Pro</Radio>\n *   <Radio value=\"c\">Enterprise</Radio>\n * </RadioGroupRoot>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport styles from \"./radio-group.module.css\";\n\ntype BaseGroupProps = ComponentPropsWithoutRef<typeof BaseRadioGroup>;\n\nexport interface RadioGroupRootProps extends Omit<BaseGroupProps, \"className\"> {\n  className?: string;\n}\n\nexport const RadioGroupRoot = forwardRef<ComponentRef<typeof BaseRadioGroup>, RadioGroupRootProps>(function RadioGroupRoot(\n  { className, ...props },\n  ref,\n) {\n  return <BaseRadioGroup ref={ref} className={`${styles.group} ${className ?? \"\"}`} {...props} />;\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,iBAAiB,WAAqE,SAAS,eAC1G,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACA,YAAD;EAAqB;EAAK,WAAW,GAAGC,2BAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAC/F"}

package/dist/radio-group/radio-group.css

@@ -0,0 +1,17 @@
+@layer components {
+  .group_Ps7OCW {
+    gap: var(--space-2);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .group-label_Ps7OCW {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-tertiary);
+    text-transform: uppercase;
+    letter-spacing: var(--letter-spacing-wide);
+    margin-bottom: var(--space-1);
+  }
+}

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

@@ -0,0 +1,37 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+import styles from "./radio-group.module.css";
+
+//#region src/radio-group/radio-group.d.ts
+interface RadioOption {
+  value: string;
+  label: ReactNode;
+  disabled?: boolean;
+}
+interface RadioGroupProps {
+  /** The options to render. Each becomes one `<Radio>` item. */
+  options: RadioOption[];
+  /** Accessible group label rendered above the options. */
+  label?: ReactNode;
+  /** Controlled selected value. */
+  value?: string;
+  /** Initial selected value (uncontrolled). */
+  defaultValue?: string;
+  onValueChange?: (value: string, eventDetails: unknown) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  /** HTML name for form submission. */
+  name?: string;
+  className?: string;
+}
+declare function RadioGroup({
+  options,
+  label,
+  className,
+  onValueChange,
+  ...props
+}: RadioGroupProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { RadioGroup, RadioGroupProps, RadioOption, styles };
+//# sourceMappingURL=radio-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","names":[],"sources":["../../src/radio-group/radio-group.tsx"],"mappings":";;;;;UAMiB,WAAA;EACf,KAAA;EACA,KAAA,EAAO,SAAA;EACP,QAAA;AAAA;AAAA,UAGe,eAAA;EAJC;EAMhB,OAAA,EAAS,WAAA;EANT;EAQA,KAAA,GAAQ,SAAA;EAPR;EASA,KAAA;EATQ;EAWR,YAAA;EACA,aAAA,IAAiB,KAAA,UAAe,YAAA;EAChC,QAAA;EACA,QAAA;EACA,QAAA;EAVS;EAYT,IAAA;EACA,SAAA;AAAA;AAAA,iBAYc,UAAA,CAAA;EAAa,OAAA;EAAS,KAAA;EAAO,SAAA;EAAW,aAAA;EAAA,GAAkB;AAAA,GAAS,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,28 @@
+import { Radio } from "../radio/radio.js";
+import radio_group_module_default from "./radio-group.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/radio-group/radio-group.tsx
+function RadioGroup$1({ options, label, className, onValueChange, ...props }) {
+	const labelId = useId();
+	return /* @__PURE__ */ jsxs(RadioGroup, {
+		"aria-labelledby": label ? labelId : void 0,
+		className: `${radio_group_module_default.group} ${className ?? ""}`,
+		onValueChange,
+		...props,
+		children: [label && /* @__PURE__ */ jsx("div", {
+			id: labelId,
+			className: radio_group_module_default["group-label"],
+			children: label
+		}), options.map((opt) => /* @__PURE__ */ jsx(Radio, {
+			value: opt.value,
+			...opt.disabled !== void 0 && { disabled: opt.disabled },
+			children: opt.label
+		}, opt.value))]
+	});
+}
+//#endregion
+export { RadioGroup$1 as RadioGroup };
+
+//# sourceMappingURL=radio-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","names":["RadioGroup","BaseRadioGroup","styles"],"sources":["../../src/radio-group/radio-group.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { Radio } from \"../radio/radio\";\nimport styles from \"./radio-group.module.css\";\n\nexport interface RadioOption {\n  value: string;\n  label: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface RadioGroupProps {\n  /** The options to render. Each becomes one `<Radio>` item. */\n  options: RadioOption[];\n  /** Accessible group label rendered above the options. */\n  label?: ReactNode;\n  /** Controlled selected value. */\n  value?: string;\n  /** Initial selected value (uncontrolled). */\n  defaultValue?: string;\n  onValueChange?: (value: string, eventDetails: unknown) => void;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  /** HTML name for form submission. */\n  name?: string;\n  className?: string;\n}\n\n/**\n * A labelled group of radio buttons. Renders a base-ui RadioGroup with one\n * `<Radio>` per option.\n *\n * For full control over layout or behaviour use `RadioGroupRoot` with\n * individual `<Radio>` or `<RadioRoot>` elements.\n */\nexport { styles as RadioGroupStyles };\n\nexport function RadioGroup({ options, label, className, onValueChange, ...props }: RadioGroupProps) {\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const labelId = useId();\n\n  return (\n    <BaseRadioGroup\n      aria-labelledby={label ? labelId : undefined}\n      className={`${styles.group} ${className ?? \"\"}`}\n      onValueChange={onValueChange as never}\n      {...props}\n    >\n      {label && (\n        <div id={labelId} className={styles[\"group-label\"]}>\n          {label}\n        </div>\n      )}\n      {options.map((opt) => (\n        <Radio key={opt.value} value={opt.value} {...(opt.disabled !== undefined && { disabled: opt.disabled })}>\n          {opt.label}\n        </Radio>\n      ))}\n    </BaseRadioGroup>\n  );\n}\n"],"mappings":";;;;;;AAuCA,SAAgBA,aAAW,EAAE,SAAS,OAAO,WAAW,eAAe,GAAG,SAA0B;CAElG,MAAM,UAAU,OAAO;AAEvB,QACE,qBAACC,YAAD;EACE,mBAAiB,QAAQ,UAAU,KAAA;EACnC,WAAW,GAAGC,2BAAO,MAAM,GAAG,aAAa;EAC5B;EACf,GAAI;YAJN,CAMG,SACC,oBAAC,OAAD;GAAK,IAAI;GAAS,WAAWA,2BAAO;aACjC;GACG,CAAA,EAEP,QAAQ,KAAK,QACZ,oBAAC,OAAD;GAAuB,OAAO,IAAI;GAAO,GAAK,IAAI,aAAa,KAAA,KAAa,EAAE,UAAU,IAAI,UAAU;aACnG,IAAI;GACC,EAFI,IAAI,MAER,CACR,CACa"}

package/dist/radio-group/radio-group.module.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: Record<string, string | undefined>;
+export default styles;

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

@@ -0,0 +1,9 @@
+//#region src/radio-group/radio-group.module.css
+var radio_group_module_default = {
+	"group": "group_Ps7OCW",
+	"group-label": "group-label_Ps7OCW"
+};
+//#endregion
+export { radio_group_module_default as default };
+
+//# sourceMappingURL=radio-group.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.module.js","names":[],"sources":["../../src/radio-group/radio-group.module.css"],"sourcesContent":["@layer components {\n  .group {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-2);\n  }\n\n  .group-label {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-xs);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-tertiary);\n    text-transform: uppercase;\n    letter-spacing: var(--letter-spacing-wide);\n    margin-bottom: var(--space-1);\n  }\n}\n"],"mappings":";AAIA,IAAA,6BAAe;CAAA,SAAQ;CAAA,eAAA;CAAA"}

package/dist/select/parts.js

@@ -1,6 +1,6 @@
 import select_module_default from "./select.module.js";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Select } from "@base-ui/react/select";
 //#region src/select/parts.tsx
 /**

package/dist/select/select.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
 import styles from "./select.module.css";
 
 //#region src/select/select.d.ts
@@ -13,19 +13,32 @@ interface SelectGroup {
   options: SelectOption[];
 }
 interface SelectProps {
+  /** Currently selected value (controlled). */
   value?: string;
+  /** Initially selected value (uncontrolled). */
   defaultValue?: string;
-  /** `eventDetails` is the base-ui event details object. Value may be null when cleared. */
+  /** Called when the selection changes. `eventDetails` is the base-ui event details object. Value may be null when cleared. */
   onValueChange?: (value: string | null, eventDetails: unknown) => void;
+  /** Prevent interaction. */
   disabled?: boolean;
+  /** Mark the field as required for form validation. */
   required?: boolean;
+  /** HTML name attribute for form submission. */
   name?: string;
+  /** Text shown when no value is selected. */
   placeholder?: string;
+  /** Flat list of options (use `groups` for grouped options). */
   options?: SelectOption[];
+  /** Grouped options with optional section labels. */
   groups?: SelectGroup[];
   className?: string;
+  /** Override the auto-generated element id. */
   id?: string;
 }
+/**
+ * Dropdown select with keyboard navigation, grouping, and search. Pass
+ * `options` for a flat list or `groups` for sections with optional labels.
+ */
 declare function Select({
   placeholder,
   options,

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

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","names":[],"sources":["../../src/select/select.tsx"],"mappings":";;;;;UAIiB,YAAA;EACf,KAAA;EACA,KAAA,EAAO,SAAA;EACP,QAAA;AAAA;AAAA,UAGe,WAAA;EACf,KAAA,GAAQ,SAAA;EACR,OAAA,EAAS,YAAA;AAAA;AAAA,UAGM,WAAA;EACf,KAAA;EACA,YAAA;EAVQ;EAYR,aAAA,IAAiB,KAAA,iBAAsB,YAAA;EACvC,QAAA;EACA,QAAA;EACA,IAAA;EACA,WAAA;EACA,OAAA,GAAU,YAAA;EACV,MAAA,GAAS,WAAA;EACT,SAAA;EACA,EAAA;AAAA;AAAA,iBA8Bc,MAAA,CAAA;EAAS,WAAA;EAAyB,OAAA;EAAS,MAAA;EAAQ,SAAA;EAAW,aAAA;EAAe,KAAA;EAAO,YAAA;EAAA,GAAiB;AAAA,GAAS,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"select.d.ts","names":[],"sources":["../../src/select/select.tsx"],"mappings":";;;;;UAIiB,YAAA;EACf,KAAA;EACA,KAAA,EAAO,SAAA;EACP,QAAA;AAAA;AAAA,UAGe,WAAA;EACf,KAAA,GAAQ,SAAA;EACR,OAAA,EAAS,YAAA;AAAA;AAAA,UAGM,WAAA;EARf;EAUA,KAAA;EAVQ;EAYR,YAAA;EAT0B;EAW1B,aAAA,IAAiB,KAAA,iBAAsB,YAAA;EATlB;EAWrB,QAAA;EAZQ;EAcR,QAAA;EAbS;EAeT,IAAA;EAfqB;EAiBrB,WAAA;EAd0B;EAgB1B,OAAA,GAAU,YAAA;EAEU;EAApB,MAAA,GAAS,WAAA;EACT,SAAA;EAbA;EAeA,EAAA;AAAA;;;;;iBAkCc,MAAA,CAAA;EAAS,WAAA;EAAyB,OAAA;EAAS,MAAA;EAAQ,SAAA;EAAW,aAAA;EAAe,KAAA;EAAO,YAAA;EAAA,GAAiB;AAAA,GAAS,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/select/select.js

@@ -1,6 +1,6 @@
 import select_module_default from "./select.module.js";
-import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { Select } from "@base-ui/react/select";
 //#region src/select/select.tsx
 function ChevronIcon() {
@@ -45,6 +45,10 @@ function SelectItem({ option }) {
 		})]
 	});
 }
+/**
+* Dropdown select with keyboard navigation, grouping, and search. Pass
+* `options` for a flat list or `groups` for sections with optional labels.
+*/
 function Select$1({ placeholder = "Select…", options, groups, className, onValueChange, value, defaultValue, ...props }) {
 	const allOptions = useMemo(() => [...options ?? [], ...groups?.flatMap((g) => g.options) ?? []], [options, groups]);
 	return /* @__PURE__ */ jsxs(Select.Root, {

package/dist/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["BaseSelect","styles","Select"],"sources":["../../src/select/select.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from \"react\";\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport styles from \"./select.module.css\";\n\nexport interface SelectOption {\n  value: string;\n  label: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface SelectGroup {\n  label?: ReactNode;\n  options: SelectOption[];\n}\n\nexport interface SelectProps {\n  value?: string;\n  defaultValue?: string;\n  /** `eventDetails` is the base-ui event details object. Value may be null when cleared. */\n  onValueChange?: (value: string | null, eventDetails: unknown) => void;\n  disabled?: boolean;\n  required?: boolean;\n  name?: string;\n  placeholder?: string;\n  options?: SelectOption[];\n  groups?: SelectGroup[];\n  className?: string;\n  id?: string;\n}\n\nfunction ChevronIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M2.5 4.5L6 8L9.5 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <path d=\"M2 6L4.5 8.5L10 3\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nfunction SelectItem({ option }: { option: SelectOption }) {\n  return (\n    <BaseSelect.Item className={styles.item} value={option.value} disabled={option.disabled}>\n      <BaseSelect.ItemText>{option.label}</BaseSelect.ItemText>\n      <BaseSelect.ItemIndicator className={styles[\"item-indicator\"]}>\n        <CheckIcon />\n      </BaseSelect.ItemIndicator>\n    </BaseSelect.Item>\n  );\n}\n\nexport function Select({ placeholder = \"Select…\", options, groups, className, onValueChange, value, defaultValue, ...props }: SelectProps) {\n  const allOptions = useMemo(() => [...(options ?? []), ...(groups?.flatMap((g) => g.options) ?? [])], [options, groups]);\n\n  return (\n    <BaseSelect.Root onValueChange={onValueChange as never} value={value} defaultValue={defaultValue} {...props}>\n      <BaseSelect.Trigger className={`${styles.trigger} ${className ?? \"\"}`}>\n        <BaseSelect.Value className={styles[\"trigger-value\"]} placeholder={placeholder}>\n          {(currentValue: string | null) => {\n            if (!currentValue) return placeholder;\n            const match = allOptions.find((o) => o.value === currentValue);\n            return match ? match.label : currentValue;\n          }}\n        </BaseSelect.Value>\n        <span className={styles[\"trigger-icon\"]}>\n          <ChevronIcon />\n        </span>\n      </BaseSelect.Trigger>\n      <BaseSelect.Portal>\n        <BaseSelect.Positioner className={styles.positioner} sideOffset={4}>\n          <BaseSelect.Popup className={styles.popup}>\n            <BaseSelect.List>\n              {options?.map((opt) => (\n                <SelectItem key={opt.value} option={opt} />\n              ))}\n              {groups?.map((group, i) => (\n                <BaseSelect.Group key={i}>\n                  {group.label && <BaseSelect.GroupLabel className={styles[\"group-label\"]}>{group.label}</BaseSelect.GroupLabel>}\n                  {group.options.map((opt) => (\n                    <SelectItem key={opt.value} option={opt} />\n                  ))}\n                  {i < (groups?.length ?? 0) - 1 && <BaseSelect.Separator className={styles.separator} />}\n                </BaseSelect.Group>\n              ))}\n            </BaseSelect.List>\n          </BaseSelect.Popup>\n        </BaseSelect.Positioner>\n      </BaseSelect.Portal>\n    </BaseSelect.Root>\n  );\n}\nexport { styles as SelectStyles };\n"],"mappings":";;;;;AA8BA,SAAS,cAAc;AACrB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,OAAM;YAChE,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EAClH,CAAA;;AAIV,SAAS,YAAY;AACnB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACnD,oBAAC,QAAD;GAAM,GAAE;GAAoB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EAC/G,CAAA;;AAIV,SAAS,WAAW,EAAE,UAAoC;AACxD,QACE,qBAACA,OAAW,MAAZ;EAAiB,WAAWC,sBAAO;EAAM,OAAO,OAAO;EAAO,UAAU,OAAO;YAA/E,CACE,oBAACD,OAAW,UAAZ,EAAA,UAAsB,OAAO,OAA4B,CAAA,EACzD,oBAACA,OAAW,eAAZ;GAA0B,WAAWC,sBAAO;aAC1C,oBAAC,WAAD,EAAa,CAAA;GACY,CAAA,CACX;;;AAItB,SAAgBC,SAAO,EAAE,cAAc,WAAW,SAAS,QAAQ,WAAW,eAAe,OAAO,cAAc,GAAG,SAAsB;CACzI,MAAM,aAAa,cAAc,CAAC,GAAI,WAAW,EAAE,EAAG,GAAI,QAAQ,SAAS,MAAM,EAAE,QAAQ,IAAI,EAAE,CAAE,EAAE,CAAC,SAAS,OAAO,CAAC;AAEvH,QACE,qBAACF,OAAW,MAAZ;EAAgC;EAA+B;EAAqB;EAAc,GAAI;YAAtG,CACE,qBAACA,OAAW,SAAZ;GAAoB,WAAW,GAAGC,sBAAO,QAAQ,GAAG,aAAa;aAAjE,CACE,oBAACD,OAAW,OAAZ;IAAkB,WAAWC,sBAAO;IAA+B;eAC/D,iBAAgC;AAChC,SAAI,CAAC,aAAc,QAAO;KAC1B,MAAM,QAAQ,WAAW,MAAM,MAAM,EAAE,UAAU,aAAa;AAC9D,YAAO,QAAQ,MAAM,QAAQ;;IAEd,CAAA,EACnB,oBAAC,QAAD;IAAM,WAAWA,sBAAO;cACtB,oBAAC,aAAD,EAAe,CAAA;IACV,CAAA,CACY;MACrB,oBAACD,OAAW,QAAZ,EAAA,UACE,oBAACA,OAAW,YAAZ;GAAuB,WAAWC,sBAAO;GAAY,YAAY;aAC/D,oBAACD,OAAW,OAAZ;IAAkB,WAAWC,sBAAO;cAClC,qBAACD,OAAW,MAAZ,EAAA,UAAA,CACG,SAAS,KAAK,QACb,oBAAC,YAAD,EAA4B,QAAQ,KAAO,EAA1B,IAAI,MAAsB,CAC3C,EACD,QAAQ,KAAK,OAAO,MACnB,qBAACA,OAAW,OAAZ,EAAA,UAAA;KACG,MAAM,SAAS,oBAACA,OAAW,YAAZ;MAAuB,WAAWC,sBAAO;gBAAiB,MAAM;MAA8B,CAAA;KAC7G,MAAM,QAAQ,KAAK,QAClB,oBAAC,YAAD,EAA4B,QAAQ,KAAO,EAA1B,IAAI,MAAsB,CAC3C;KACD,KAAK,QAAQ,UAAU,KAAK,KAAK,oBAACD,OAAW,WAAZ,EAAsB,WAAWC,sBAAO,WAAa,CAAA;KACtE,EAAA,EANI,EAMJ,CACnB,CACc,EAAA,CAAA;IACD,CAAA;GACG,CAAA,EACN,CAAA,CACJ"}
+{"version":3,"file":"select.js","names":["BaseSelect","styles","Select"],"sources":["../../src/select/select.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from \"react\";\nimport { Select as BaseSelect } from \"@base-ui/react/select\";\nimport styles from \"./select.module.css\";\n\nexport interface SelectOption {\n  value: string;\n  label: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface SelectGroup {\n  label?: ReactNode;\n  options: SelectOption[];\n}\n\nexport interface SelectProps {\n  /** Currently selected value (controlled). */\n  value?: string;\n  /** Initially selected value (uncontrolled). */\n  defaultValue?: string;\n  /** Called when the selection changes. `eventDetails` is the base-ui event details object. Value may be null when cleared. */\n  onValueChange?: (value: string | null, eventDetails: unknown) => void;\n  /** Prevent interaction. */\n  disabled?: boolean;\n  /** Mark the field as required for form validation. */\n  required?: boolean;\n  /** HTML name attribute for form submission. */\n  name?: string;\n  /** Text shown when no value is selected. */\n  placeholder?: string;\n  /** Flat list of options (use `groups` for grouped options). */\n  options?: SelectOption[];\n  /** Grouped options with optional section labels. */\n  groups?: SelectGroup[];\n  className?: string;\n  /** Override the auto-generated element id. */\n  id?: string;\n}\n\nfunction ChevronIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M2.5 4.5L6 8L9.5 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <path d=\"M2 6L4.5 8.5L10 3\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nfunction SelectItem({ option }: { option: SelectOption }) {\n  return (\n    <BaseSelect.Item className={styles.item} value={option.value} disabled={option.disabled}>\n      <BaseSelect.ItemText>{option.label}</BaseSelect.ItemText>\n      <BaseSelect.ItemIndicator className={styles[\"item-indicator\"]}>\n        <CheckIcon />\n      </BaseSelect.ItemIndicator>\n    </BaseSelect.Item>\n  );\n}\n\n/**\n * Dropdown select with keyboard navigation, grouping, and search. Pass\n * `options` for a flat list or `groups` for sections with optional labels.\n */\nexport function Select({ placeholder = \"Select…\", options, groups, className, onValueChange, value, defaultValue, ...props }: SelectProps) {\n  const allOptions = useMemo(() => [...(options ?? []), ...(groups?.flatMap((g) => g.options) ?? [])], [options, groups]);\n\n  return (\n    <BaseSelect.Root onValueChange={onValueChange as never} value={value} defaultValue={defaultValue} {...props}>\n      <BaseSelect.Trigger className={`${styles.trigger} ${className ?? \"\"}`}>\n        <BaseSelect.Value className={styles[\"trigger-value\"]} placeholder={placeholder}>\n          {(currentValue: string | null) => {\n            if (!currentValue) return placeholder;\n            const match = allOptions.find((o) => o.value === currentValue);\n            return match ? match.label : currentValue;\n          }}\n        </BaseSelect.Value>\n        <span className={styles[\"trigger-icon\"]}>\n          <ChevronIcon />\n        </span>\n      </BaseSelect.Trigger>\n      <BaseSelect.Portal>\n        <BaseSelect.Positioner className={styles.positioner} sideOffset={4}>\n          <BaseSelect.Popup className={styles.popup}>\n            <BaseSelect.List>\n              {options?.map((opt) => (\n                <SelectItem key={opt.value} option={opt} />\n              ))}\n              {groups?.map((group, i) => (\n                <BaseSelect.Group key={i}>\n                  {group.label && <BaseSelect.GroupLabel className={styles[\"group-label\"]}>{group.label}</BaseSelect.GroupLabel>}\n                  {group.options.map((opt) => (\n                    <SelectItem key={opt.value} option={opt} />\n                  ))}\n                  {i < (groups?.length ?? 0) - 1 && <BaseSelect.Separator className={styles.separator} />}\n                </BaseSelect.Group>\n              ))}\n            </BaseSelect.List>\n          </BaseSelect.Popup>\n        </BaseSelect.Positioner>\n      </BaseSelect.Portal>\n    </BaseSelect.Root>\n  );\n}\nexport { styles as SelectStyles };\n"],"mappings":";;;;;AAuCA,SAAS,cAAc;AACrB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,OAAM;YAChE,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EAClH,CAAA;;AAIV,SAAS,YAAY;AACnB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACnD,oBAAC,QAAD;GAAM,GAAE;GAAoB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EAC/G,CAAA;;AAIV,SAAS,WAAW,EAAE,UAAoC;AACxD,QACE,qBAACA,OAAW,MAAZ;EAAiB,WAAWC,sBAAO;EAAM,OAAO,OAAO;EAAO,UAAU,OAAO;YAA/E,CACE,oBAACD,OAAW,UAAZ,EAAA,UAAsB,OAAO,OAA4B,CAAA,EACzD,oBAACA,OAAW,eAAZ;GAA0B,WAAWC,sBAAO;aAC1C,oBAAC,WAAD,EAAa,CAAA;GACY,CAAA,CACX;;;;;;;AAQtB,SAAgBC,SAAO,EAAE,cAAc,WAAW,SAAS,QAAQ,WAAW,eAAe,OAAO,cAAc,GAAG,SAAsB;CACzI,MAAM,aAAa,cAAc,CAAC,GAAI,WAAW,EAAE,EAAG,GAAI,QAAQ,SAAS,MAAM,EAAE,QAAQ,IAAI,EAAE,CAAE,EAAE,CAAC,SAAS,OAAO,CAAC;AAEvH,QACE,qBAACF,OAAW,MAAZ;EAAgC;EAA+B;EAAqB;EAAc,GAAI;YAAtG,CACE,qBAACA,OAAW,SAAZ;GAAoB,WAAW,GAAGC,sBAAO,QAAQ,GAAG,aAAa;aAAjE,CACE,oBAACD,OAAW,OAAZ;IAAkB,WAAWC,sBAAO;IAA+B;eAC/D,iBAAgC;AAChC,SAAI,CAAC,aAAc,QAAO;KAC1B,MAAM,QAAQ,WAAW,MAAM,MAAM,EAAE,UAAU,aAAa;AAC9D,YAAO,QAAQ,MAAM,QAAQ;;IAEd,CAAA,EACnB,oBAAC,QAAD;IAAM,WAAWA,sBAAO;cACtB,oBAAC,aAAD,EAAe,CAAA;IACV,CAAA,CACY;MACrB,oBAACD,OAAW,QAAZ,EAAA,UACE,oBAACA,OAAW,YAAZ;GAAuB,WAAWC,sBAAO;GAAY,YAAY;aAC/D,oBAACD,OAAW,OAAZ;IAAkB,WAAWC,sBAAO;cAClC,qBAACD,OAAW,MAAZ,EAAA,UAAA,CACG,SAAS,KAAK,QACb,oBAAC,YAAD,EAA4B,QAAQ,KAAO,EAA1B,IAAI,MAAsB,CAC3C,EACD,QAAQ,KAAK,OAAO,MACnB,qBAACA,OAAW,OAAZ,EAAA,UAAA;KACG,MAAM,SAAS,oBAACA,OAAW,YAAZ;MAAuB,WAAWC,sBAAO;gBAAiB,MAAM;MAA8B,CAAA;KAC7G,MAAM,QAAQ,KAAK,QAClB,oBAAC,YAAD,EAA4B,QAAQ,KAAO,EAA1B,IAAI,MAAsB,CAC3C;KACD,KAAK,QAAQ,UAAU,KAAK,KAAK,oBAACD,OAAW,WAAZ,EAAsB,WAAWC,sBAAO,WAAa,CAAA;KACtE,EAAA,EANI,EAMJ,CACnB,CACc,EAAA,CAAA;IACD,CAAA;GACG,CAAA,EACN,CAAA,CACJ"}

package/dist/separator/separator.d.ts

@@ -10,6 +10,10 @@ interface SeparatorProps extends Omit<BaseSeparatorProps, "className"> {
   orientation?: "horizontal" | "vertical";
   className?: string;
 }
+/**
+ * A semantic divider accessible to screen readers. Renders a horizontal
+ * line by default; switch to vertical for inline layouts.
+ */
 declare const Separator$1: react.ForwardRefExoticComponent<SeparatorProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Separator$1 as Separator, SeparatorProps, styles };

package/dist/separator/separator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"separator.d.ts","names":[],"sources":["../../src/separator/separator.tsx"],"mappings":";;;;;;KAKK,kBAAA,GAAqB,wBAAA,QAAgC,SAAA;AAAA,UAEzC,cAAA,SAAuB,IAAA,CAAK,kBAAA;;EAE3C,WAAA;EACA,SAAA;AAAA;AAAA,cAGW,WAAA,EAAS,KAAA,CAAA,yBAAA,CAAA,cAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA"}
+{"version":3,"file":"separator.d.ts","names":[],"sources":["../../src/separator/separator.tsx"],"mappings":";;;;;;KAKK,kBAAA,GAAqB,wBAAA,QAAgC,SAAA;AAAA,UAEzC,cAAA,SAAuB,IAAA,CAAK,kBAAA;;EAE3C,WAAA;EACA,SAAA;AAAA;;;AAHF;;cAUa,WAAA,EAAS,KAAA,CAAA,yBAAA,CAAA,cAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA"}

package/dist/separator/separator.js

@@ -1,8 +1,12 @@
 import separator_module_default from "./separator.module.js";
-import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Separator } from "@base-ui/react/separator";
 //#region src/separator/separator.tsx
+/**
+* A semantic divider accessible to screen readers. Renders a horizontal
+* line by default; switch to vertical for inline layouts.
+*/
 const Separator$1 = forwardRef(function Separator$2({ className, orientation = "horizontal", ...props }, ref) {
 	return /* @__PURE__ */ jsx(Separator, {
 		ref,

package/dist/separator/separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator.js","names":["Separator","BaseSeparator","styles"],"sources":["../../src/separator/separator.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { Separator as BaseSeparator } from \"@base-ui/react/separator\";\nimport styles from \"./separator.module.css\";\n\ntype BaseSeparatorProps = ComponentPropsWithoutRef<typeof BaseSeparator>;\n\nexport interface SeparatorProps extends Omit<BaseSeparatorProps, \"className\"> {\n  /** @default \"horizontal\" */\n  orientation?: \"horizontal\" | \"vertical\";\n  className?: string;\n}\n\nexport const Separator = forwardRef<ComponentRef<typeof BaseSeparator>, SeparatorProps>(function Separator(\n  { className, orientation = \"horizontal\", ...props },\n  ref,\n) {\n  return <BaseSeparator ref={ref} orientation={orientation} className={`${styles.separator} ${className ?? \"\"}`} {...props} />;\n});\nexport { styles as SeparatorStyles };\n"],"mappings":";;;;;AAaA,MAAaA,cAAY,WAA+D,SAASA,YAC/F,EAAE,WAAW,cAAc,cAAc,GAAG,SAC5C,KACA;AACA,QAAO,oBAACC,WAAD;EAAoB;EAAkB;EAAa,WAAW,GAAGC,yBAAO,UAAU,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAC5H"}
+{"version":3,"file":"separator.js","names":["Separator","BaseSeparator","styles"],"sources":["../../src/separator/separator.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { Separator as BaseSeparator } from \"@base-ui/react/separator\";\nimport styles from \"./separator.module.css\";\n\ntype BaseSeparatorProps = ComponentPropsWithoutRef<typeof BaseSeparator>;\n\nexport interface SeparatorProps extends Omit<BaseSeparatorProps, \"className\"> {\n  /** @default \"horizontal\" */\n  orientation?: \"horizontal\" | \"vertical\";\n  className?: string;\n}\n\n/**\n * A semantic divider accessible to screen readers. Renders a horizontal\n * line by default; switch to vertical for inline layouts.\n */\nexport const Separator = forwardRef<ComponentRef<typeof BaseSeparator>, SeparatorProps>(function Separator(\n  { className, orientation = \"horizontal\", ...props },\n  ref,\n) {\n  return <BaseSeparator ref={ref} orientation={orientation} className={`${styles.separator} ${className ?? \"\"}`} {...props} />;\n});\nexport { styles as SeparatorStyles };\n"],"mappings":";;;;;;;;;AAiBA,MAAaA,cAAY,WAA+D,SAASA,YAC/F,EAAE,WAAW,cAAc,cAAc,GAAG,SAC5C,KACA;AACA,QAAO,oBAACC,WAAD;EAAoB;EAAkB;EAAa,WAAW,GAAGC,yBAAO,UAAU,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAC5H"}

package/dist/shared/PopupArrow.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/shared/PopupArrow.tsx
+function PopupArrow({ fillClass, seamClass }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "20",
+		height: "10",
+		viewBox: "0 0 20 10",
+		fill: "none",
+		"aria-hidden": true,
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+			className: fillClass
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
+			className: seamClass
+		})]
+	});
+}
+//#endregion
+export { PopupArrow };
+
+//# sourceMappingURL=PopupArrow.js.map

package/dist/shared/PopupArrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupArrow.js","names":[],"sources":["../../src/shared/PopupArrow.tsx"],"sourcesContent":["/**\n * Shared arrow SVG used by Menu and Popover.\n *\n * Two paths:\n *   1. Fill — the arrow body, matches the popup surface colour.\n *   2. Seam — a thin strip in the border colour at the base, covering\n *      the popup border at the junction so it doesn't bleed through.\n *\n * All CSS classes come from the importing component's own CSS module\n * so the rules are bundled into the component's CSS file, not a\n * separate shared chunk that consumers would need to import separately.\n *\n * @example\n * ```tsx\n * <BaseMenu.Arrow className={styles.arrow}>\n *   <PopupArrow fillClass={styles[\"arrow-fill\"]!} seamClass={styles[\"arrow-seam\"]!} />\n * </BaseMenu.Arrow>\n * ```\n */\n\ninterface PopupArrowProps {\n  fillClass: string;\n  seamClass: string;\n}\n\nexport function PopupArrow({ fillClass, seamClass }: PopupArrowProps) {\n  return (\n    <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" aria-hidden>\n      {/* Body — surface colour */}\n      <path\n        d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n        className={fillClass}\n      />\n      {/* Seam — border colour strip at the base, covers the popup border at the junction */}\n      <path\n        d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n        className={seamClass}\n      />\n    </svg>\n  );\n}\n"],"mappings":";;AAyBA,SAAgB,WAAW,EAAE,WAAW,aAA8B;AACpE,QACE,qBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,eAAA;YAA5D,CAEE,oBAAC,QAAD;GACE,GAAE;GACF,WAAW;GACX,CAAA,EAEF,oBAAC,QAAD;GACE,GAAE;GACF,WAAW;GACX,CAAA,CACE"}