@rinzai/zen 0.4.2 → 0.6.0

package/dist/popover/index.js

@@ -0,0 +1,75 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useGraphicsMode as t } from "../utils/graphics.js";
+import { Slot as n } from "../utils/slot.js";
+import { anchoredStyle as r, useAnchoredPopup as i } from "../utils/useAnchoredPopup.js";
+import a from "../button/index.js";
+import { POPUP as o } from "../utils/styles.js";
+import { createContext as s, useContext as c, useEffect as l } from "react";
+import { jsx as u } from "react/jsx-runtime";
+//#region packages/popover/index.tsx
+var d = s(null);
+function f(e) {
+	let t = c(d);
+	if (!t) throw Error(`<${e}> must be inside <Popover>`);
+	return t;
+}
+function p({ open: e, defaultOpen: n = !1, onOpenChange: r, children: a }) {
+	t();
+	let o = i({ onOpenChange: r }), { setOpen: s } = o;
+	return l(() => {
+		e !== void 0 && s(e);
+	}, [e, s]), l(() => {
+		n && s(!0);
+	}, []), /* @__PURE__ */ u(d.Provider, {
+		value: o,
+		children: a
+	});
+}
+function m({ asChild: e, style: t, children: r, ...i }) {
+	let a = f("PopoverTrigger"), o = {
+		...a.triggerProps,
+		"aria-haspopup": "dialog",
+		...i,
+		style: {
+			...a.triggerProps.style,
+			...t
+		}
+	};
+	return e ? /* @__PURE__ */ u(n, {
+		...o,
+		children: r
+	}) : /* @__PURE__ */ u("button", {
+		type: "button",
+		...o,
+		children: r
+	});
+}
+function h({ align: t = "center", offset: n = 5, className: i, style: a, children: s, ...c }) {
+	let l = f("PopoverContent");
+	return /* @__PURE__ */ u("div", {
+		role: "dialog",
+		...c,
+		...l.popupProps,
+		style: {
+			...r(l.id, {
+				align: t,
+				offset: n
+			}),
+			...a
+		},
+		className: e("zen__popover fixed z-50 w-[anchor-size(width)] min-w-max overflow-visible p-0", o, i),
+		children: s
+	});
+}
+function g({ onClick: e, ...t }) {
+	let n = f("PopoverClose");
+	return /* @__PURE__ */ u(a, {
+		...t,
+		onClick: (t) => {
+			e?.(t), t.defaultPrevented || n.setOpen(!1);
+		}
+	});
+}
+//#endregion
+export { g as PopoverClose, h as PopoverContent, m as PopoverTrigger, p as default };

package/dist/progress-ring/index.js

@@ -0,0 +1,49 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region packages/progress-ring/index.tsx
+function r({ value: r, size: i = 84, stroke: a = 7, label: o, children: s, className: c }) {
+	let l = (i - a) / 2, u = 2 * Math.PI * l, d = Math.min(Math.max(r, 0), 1);
+	return /* @__PURE__ */ n("div", {
+		role: "progressbar",
+		"aria-label": o,
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": Math.round(d * 100),
+		className: e("zen__progress-ring relative grid shrink-0 place-items-center", c),
+		style: {
+			width: i,
+			height: i
+		},
+		children: [/* @__PURE__ */ n("svg", {
+			width: i,
+			height: i,
+			viewBox: `0 0 ${i} ${i}`,
+			className: "-rotate-90",
+			"aria-hidden": !0,
+			children: [/* @__PURE__ */ t("circle", {
+				cx: i / 2,
+				cy: i / 2,
+				r: l,
+				fill: "none",
+				strokeWidth: a,
+				className: "stroke-tint/[0.07]"
+			}), /* @__PURE__ */ t("circle", {
+				cx: i / 2,
+				cy: i / 2,
+				r: l,
+				fill: "none",
+				strokeWidth: a,
+				strokeLinecap: "round",
+				strokeDasharray: u,
+				strokeDashoffset: u * (1 - d),
+				className: "stroke-primary [filter:drop-shadow(0_0_6px_oklch(var(--glow)/0.45))] transition-[stroke-dashoffset] duration-700 ease-out"
+			})]
+		}), /* @__PURE__ */ t("div", {
+			className: "absolute inset-0 grid place-items-center text-center",
+			children: s
+		})]
+	});
+}
+//#endregion
+export { r as default };

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

@@ -0,0 +1,34 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * A choice of one among a few cards, each showing what it picks (a palette, a
+ * plan). Native radio inputs underneath, so arrow keys and forms work as for any
+ * radio group. Lay the cards out with className (e.g. a grid); fill it with
+ * RadioCard. For short text options, use Segmented.
+ */
+export default function RadioCards<V extends string>({ label, value, onChange, name, className, children, }: RadioCardsProps<V>): import('react').JSX.Element;
+/**
+ * One card: a native radio covering whatever you put inside, so the whole card
+ * is the click target. Outlined, lit when chosen; style it further with
+ * className and style (e.g. a background showing the choice).
+ */
+export declare function RadioCard({ value, disabled, className, style, children }: RadioCardProps): import('react').JSX.Element;
+export interface RadioCardsProps<V extends string> {
+    label: string;
+    value: V;
+    onChange: (value: V) => void;
+    /** Form field name; defaults to a generated one. */
+    name?: string;
+    /** Classes for the cards' container: its layout (e.g. a grid). */
+    className?: string;
+    /** The RadioCards. */
+    children: ReactNode;
+}
+export interface RadioCardProps {
+    value: string;
+    /** Can't be chosen (and the arrow keys skip it). */
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/radio-cards/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/radio-cards/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,aAAa,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAUnF;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,EACjD,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,QAAQ,GACX,EAAE,eAAe,CAAC,CAAC,CAAC,+BAgBpB;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,cAAc,+BAyBxF;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC;CACvB"}

package/dist/radio-cards/index.js

@@ -0,0 +1,48 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { createContext as t, useContext as n, useId as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region packages/radio-cards/index.tsx
+var o = t(null);
+function s({ label: e, value: t, onChange: n, name: s, className: c, children: l }) {
+	let u = r();
+	return /* @__PURE__ */ a("div", {
+		className: "zen__radio-cards flex flex-col gap-2",
+		children: [/* @__PURE__ */ i("span", {
+			id: u,
+			className: "text-sm font-medium",
+			children: e
+		}), /* @__PURE__ */ i("div", {
+			role: "radiogroup",
+			"aria-labelledby": u,
+			className: c,
+			children: /* @__PURE__ */ i(o.Provider, {
+				value: {
+					name: s ?? u,
+					value: t,
+					onChange: n
+				},
+				children: l
+			})
+		})]
+	});
+}
+function c({ value: t, disabled: r, className: s, style: c, children: l }) {
+	let u = n(o);
+	if (!u) throw Error("<RadioCard> must be inside <RadioCards>");
+	return /* @__PURE__ */ a("label", {
+		style: c,
+		className: e("zen__radio-card border-tint/10 relative flex items-center gap-3 rounded-xl border p-2.5 text-left text-sm transition-[border-color,box-shadow] duration-200", "hover:has-enabled:border-tint/20 has-checked:border-primary/60 has-checked:shadow-[0_0_0_3px_oklch(var(--primary)/0.15)]", "has-focus-visible:ring-ring/50 has-focus-visible:ring-2 has-disabled:opacity-60", s),
+		children: [/* @__PURE__ */ i("input", {
+			type: "radio",
+			name: u.name,
+			value: t,
+			checked: u.value === t,
+			disabled: r,
+			onChange: () => u.onChange(t),
+			className: "absolute inset-0 z-10 m-0 size-full cursor-pointer appearance-none rounded-[inherit] opacity-0 disabled:cursor-not-allowed"
+		}), l]
+	});
+}
+//#endregion
+export { c as RadioCard, s as default };

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

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+/**
+ * Choose one of a list: native radios underneath, so arrow keys move and pick
+ * within the group, and forms work as usual. Fill it with Radio. For a few
+ * short options side by side use Segmented; for options that show themselves,
+ * RadioCards.
+ */
+export default function RadioGroup<V extends string>({ label, value, onChange, name, disabled, orientation, className, children, ...aria }: RadioGroupProps<V>): import('react').JSX.Element;
+/** One option: a round radio that fills with a glowing dot when chosen, its label, and an optional description. */
+export declare function Radio({ value, disabled, description, className, children }: RadioProps): import('react').JSX.Element;
+export interface RadioGroupProps<V extends string> {
+    /** Shown above the options, naming the group. Without it, give the group an aria-label. */
+    label?: ReactNode;
+    /** The chosen option, or null for none yet. */
+    value: V | null;
+    onChange: (value: V) => void;
+    /** Form field name; defaults to a generated one. */
+    name?: string;
+    disabled?: boolean;
+    /** Options in a column (default) or wrapping in a row. */
+    orientation?: 'vertical' | 'horizontal';
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    /** Classes for the options' container. */
+    className?: string;
+    /** The Radios. */
+    children: ReactNode;
+}
+export interface RadioProps {
+    value: string;
+    /** Can't be chosen (and the arrow keys skip it). */
+    disabled?: boolean;
+    /** A muted line under the label. */
+    description?: ReactNode;
+    className?: string;
+    /** The label. */
+    children: ReactNode;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/radio-group/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,SAAS,EAAqB,MAAM,OAAO,CAAC;AAWpE;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,EACjD,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAgB,EAChB,WAAwB,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,eAAe,CAAC,CAAC,CAAC,+BA6BpB;AAED,mHAAmH;AACnH,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,UAAU,+BAoCtF;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM;IAC7C,2FAA2F;IAC3F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB;IACjB,QAAQ,EAAE,SAAS,CAAC;CACvB"}

package/dist/radio-group/index.js

@@ -0,0 +1,63 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { createContext as t, useContext as n, useId as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region packages/radio-group/index.tsx
+var o = t(null);
+function s({ label: t, value: n, onChange: s, name: c, disabled: l = !1, orientation: u = "vertical", className: d, children: f, ...p }) {
+	let m = r();
+	return /* @__PURE__ */ a("div", {
+		className: "zen__radio-group flex flex-col gap-2",
+		children: [t && /* @__PURE__ */ i("span", {
+			id: m,
+			className: "text-sm font-medium",
+			children: t
+		}), /* @__PURE__ */ i("div", {
+			role: "radiogroup",
+			"aria-labelledby": t ? m : void 0,
+			"aria-orientation": u,
+			"aria-disabled": l || void 0,
+			...p,
+			className: e("flex", u === "vertical" ? "flex-col gap-2.5" : "flex-wrap gap-x-5 gap-y-2", d),
+			children: /* @__PURE__ */ i(o.Provider, {
+				value: {
+					name: c ?? m,
+					value: n,
+					onChange: s,
+					disabled: l
+				},
+				children: f
+			})
+		})]
+	});
+}
+function c({ value: t, disabled: r, description: s, className: c, children: l }) {
+	let u = n(o);
+	if (!u) throw Error("<Radio> must be inside <RadioGroup>");
+	return /* @__PURE__ */ a("label", {
+		className: e("inline-flex cursor-pointer items-start gap-2.5 text-sm has-disabled:cursor-not-allowed has-disabled:opacity-60", c),
+		children: [/* @__PURE__ */ a("span", {
+			className: "relative mt-px inline-grid size-[1.125rem] shrink-0 place-items-center",
+			children: [/* @__PURE__ */ i("input", {
+				type: "radio",
+				name: u.name,
+				value: t,
+				checked: u.value === t,
+				disabled: r || u.disabled,
+				onChange: () => u.onChange(t),
+				className: e("peer border-tint/20 bg-tint/[0.04] m-0 size-full cursor-pointer appearance-none rounded-full border outline-hidden", "transition-[border-color,box-shadow] duration-200", "hover:enabled:border-tint/35 focus-visible:ring-ring/50 focus-visible:ring-2", "checked:border-primary checked:shadow-[0_0_14px_-3px_oklch(var(--glow)/0.8)] disabled:cursor-not-allowed")
+			}), /* @__PURE__ */ i("span", {
+				"aria-hidden": !0,
+				className: "bg-primary pointer-events-none absolute size-2 scale-0 rounded-full shadow-[0_0_8px_oklch(var(--glow)/0.9)] transition-transform duration-200 ease-[cubic-bezier(0.3,1.6,0.5,1)] peer-checked:scale-100"
+			})]
+		}), /* @__PURE__ */ a("span", {
+			className: "flex flex-col gap-0.5",
+			children: [l, s && /* @__PURE__ */ i("span", {
+				className: "text-muted-foreground text-xs",
+				children: s
+			})]
+		})]
+	});
+}
+//#endregion
+export { c as Radio, s as default };

package/dist/segmented/index.d.ts

@@ -1,19 +1,29 @@
+import { ReactNode } from 'react';
 /**
  * A small set of mutually exclusive options, shown as a pill row. Native radio
  * inputs underneath, so arrow keys and forms work as for any radio group. The
- * selection slides between options, like NavPills.
+ * selection slides between options, like Pills. Fill it with
+ * SegmentedItem (any content: text, icons, a disabled option).
  */
-export default function Segmented<V extends string>({ label, value, options, onChange, name, className, }: SegmentedProps<V>): import('react').JSX.Element;
+export default function Segmented<V extends string>({ label, value, onChange, name, className, children, }: SegmentedProps<V>): import('react').JSX.Element;
+/** One option of a Segmented: a native radio covering whatever you put inside. */
+export declare function SegmentedItem({ value, disabled, className, children }: SegmentedItemProps): import('react').JSX.Element;
 export interface SegmentedProps<V extends string> {
     label: string;
     value: V;
-    options: readonly {
-        value: V;
-        label: string;
-    }[];
     onChange: (value: V) => void;
     /** Form field name; defaults to a generated one. */
     name?: string;
     className?: string;
+    /** The SegmentedItems. */
+    children: ReactNode;
+}
+export interface SegmentedItemProps {
+    value: string;
+    /** Skipped by the arrow keys and can't be chosen. */
+    disabled?: boolean;
+    className?: string;
+    /** What the option shows: text, an icon, both. */
+    children: ReactNode;
 }
 //# sourceMappingURL=index.d.ts.map

package/dist/segmented/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/segmented/index.tsx"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,EAChD,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,SAAS,GACZ,EAAE,cAAc,CAAC,CAAC,CAAC,+BAmEnB;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,OAAO,EAAE,SAAS;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/segmented/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,SAAS,EAA6B,MAAM,OAAO,CAAC;AAY5E;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,EAChD,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,QAAQ,GACX,EAAE,cAAc,CAAC,CAAC,CAAC,+BAuCnB;AAED,kFAAkF;AAClF,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,+BA4BzF;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,QAAQ,EAAE,SAAS,CAAC;CACvB"}

package/dist/segmented/index.js

@@ -0,0 +1,58 @@
+"use client";
+import { cx as e } from "../utils/cx.js";
+import { useIndicator as t } from "../utils/indicator.js";
+import { createContext as n, useContext as r, useId as i, useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region packages/segmented/index.tsx
+var c = n(null);
+function l({ label: n, value: r, onChange: l, name: u, className: d, children: f }) {
+	let p = i(), m = a(null), h = t(m, "label:has(input:checked)", [r, f]);
+	return /* @__PURE__ */ s("div", {
+		className: e("zen__segmented flex flex-col gap-2", d),
+		children: [/* @__PURE__ */ o("span", {
+			id: p,
+			className: "text-sm font-medium",
+			children: n
+		}), /* @__PURE__ */ s("div", {
+			ref: m,
+			role: "radiogroup",
+			"aria-labelledby": p,
+			className: "glow-edge border-tint/10 bg-tint/[0.03] relative inline-flex w-fit flex-wrap gap-1 rounded-xl border p-1",
+			children: [h && /* @__PURE__ */ o("span", {
+				"aria-hidden": !0,
+				className: "bg-primary/15 absolute top-0 left-0 rounded-lg shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.4)] transition-[translate,width,height] duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)]",
+				style: {
+					translate: `${h.x}px ${h.y}px`,
+					width: h.w,
+					height: h.h
+				}
+			}), /* @__PURE__ */ o(c.Provider, {
+				value: {
+					name: u ?? p,
+					value: r,
+					onChange: l,
+					measured: h !== null
+				},
+				children: f
+			})]
+		})]
+	});
+}
+function u({ value: t, disabled: n, className: i, children: a }) {
+	let l = r(c);
+	if (!l) throw Error("SegmentedItem must be inside a Segmented");
+	return /* @__PURE__ */ s("label", {
+		className: e("text-muted-foreground relative cursor-pointer rounded-lg px-3 py-1.5 text-sm transition-colors duration-300", "hover:text-foreground has-checked:text-foreground has-focus-visible:ring-ring/50 has-focus-visible:ring-2", "has-disabled:hover:text-muted-foreground has-disabled:cursor-not-allowed has-disabled:opacity-50", !l.measured && "has-checked:bg-primary/15 has-checked:shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.4)]", i),
+		children: [/* @__PURE__ */ o("input", {
+			type: "radio",
+			className: "absolute inset-0 z-10 m-0 size-full cursor-pointer appearance-none rounded-[inherit] opacity-0 disabled:cursor-not-allowed",
+			name: l.name,
+			value: t,
+			checked: l.value === t,
+			disabled: n,
+			onChange: () => l.onChange(t)
+		}), a]
+	});
+}
+//#endregion
+export { u as SegmentedItem, l as default };

package/dist/select/index.d.ts

@@ -1,25 +1,30 @@
-import { ReactNode } from 'react';
-export interface SelectOption<V extends string> {
-    value: V;
-    /** Text shown, and matched when the user types to jump to an option. */
-    label: string;
-    disabled?: boolean;
-}
+import { ComponentProps, ReactNode } from 'react';
 /**
  * Pick one value from a short list: a field-styled button that opens a list
  * below it. Keyboard: arrows, Home/End, type to jump, Enter to choose, Escape
- * to close. For long or searchable lists, use Dropdown.
+ * to close. Fill it with SelectItem, organised with SelectGroup and
+ * SelectSeparator. For long or searchable lists, use Combobox.
+ */
+export default function Select<V extends string>({ value, onChange, placeholder, disabled, name, id, className, listClassName, children, style, onKeyDown, ...rest }: SelectProps<V>): import('react').JSX.Element;
+/**
+ * One choice in a Select. Its `label` (or its text, when that's all it holds)
+ * shows in the field once chosen and is matched when typing to jump.
  */
-export default function Select<V extends string>({ value, options, onChange, placeholder, disabled, renderOption, name, id, className, listClassName, 'aria-label': ariaLabel, }: SelectProps<V>): import('react').JSX.Element;
-export interface SelectProps<V extends string> {
+export declare function SelectItem({ value, label, disabled, className, children }: SelectItemProps): import('react').JSX.Element;
+/** A labelled group of SelectItems. */
+export declare function SelectGroup({ label, children }: {
+    label: ReactNode;
+    children: ReactNode;
+}): import('react').JSX.Element;
+/** A hairline between items or groups. */
+export declare function SelectSeparator(): import('react').JSX.Element;
+/** Also takes the trigger button's props (aria-*, data-*, onBlur…), so Field can wire it up. */
+export interface SelectProps<V extends string> extends Omit<ComponentProps<'button'>, 'value' | 'onChange' | 'children' | 'defaultValue' | 'name'> {
     value: V | null;
-    options: readonly SelectOption<V>[];
     onChange: (value: V) => void;
     /** Shown while nothing is chosen. */
     placeholder?: string;
     disabled?: boolean;
-    /** Custom content for each option (the label is still used for typing to jump). */
-    renderOption?: (option: SelectOption<V>) => ReactNode;
     /** Form field name: adds a hidden input with the value. */
     name?: string;
     id?: string;
@@ -27,6 +32,15 @@ export interface SelectProps<V extends string> {
     className?: string;
     /** Classes for the popup list. */
     listClassName?: string;
-    'aria-label'?: string;
+    /** SelectItem, SelectGroup and SelectSeparator. */
+    children: ReactNode;
+}
+export interface SelectItemProps {
+    value: string;
+    /** Text for the field and for typing to jump (defaults to the item's text). */
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+    children: ReactNode;
 }
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/select/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAiB,SAAS,EAA+B,MAAM,OAAO,CAAC;AAE9E,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM;IAC1C,KAAK,EAAE,CAAC,CAAC;IACT,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,CAAC,SAAS,MAAM,EAAE,EAC7C,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAuB,EACvB,QAAgB,EAChB,YAAY,EACZ,IAAI,EACJ,EAAE,EACF,SAAS,EACT,aAAa,EACb,YAAY,EAAE,SAAS,GAC1B,EAAE,WAAW,CAAC,CAAC,CAAC,+BA6HhB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,MAAM;IACzC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,OAAO,EAAE,SAAS,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mFAAmF;IACnF,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IACtD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/select/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAMH,cAAc,EAEd,SAAS,EAQZ,MAAM,OAAO,CAAC;AAaf;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,CAAC,SAAS,MAAM,EAAE,EAC7C,KAAK,EACL,QAAQ,EACR,WAAuB,EACvB,QAAgB,EAChB,IAAI,EACJ,EAAE,EACF,SAAS,EACT,aAAa,EACb,QAAQ,EACR,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACV,EAAE,WAAW,CAAC,CAAC,CAAC,+BAsIhB;AAuBD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,eAAe,+BAiC1F;AAED,uCAAuC;AACvC,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,SAAS,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BASzF;AAED,0CAA0C;AAC1C,wBAAgB,eAAe,gCAE9B;AAED,gGAAgG;AAChG,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,IAAI,CACvD,cAAc,CAAC,QAAQ,CAAC,EACxB,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,MAAM,CAC9D;IACG,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mDAAmD;IACnD,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,eAAe;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACvB"}