@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/phone-input/phone-input.js

@@ -0,0 +1,171 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Glyph as t } from "../lib/glyphs.js";
+import { controlClasses as n } from "../input/field-styles.js";
+import { useFieldProps as r } from "../input/input.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useMemo as o, useState as s } from "react";
+//#region src/phone-input/phone-input.tsx
+var c = [
+	{
+		code: "US",
+		name: "United States",
+		dial: "1"
+	},
+	{
+		code: "CA",
+		name: "Canada",
+		dial: "1"
+	},
+	{
+		code: "MX",
+		name: "Mexico",
+		dial: "52"
+	},
+	{
+		code: "EC",
+		name: "Ecuador",
+		dial: "593"
+	},
+	{
+		code: "CO",
+		name: "Colombia",
+		dial: "57"
+	},
+	{
+		code: "PE",
+		name: "Peru",
+		dial: "51"
+	},
+	{
+		code: "CL",
+		name: "Chile",
+		dial: "56"
+	},
+	{
+		code: "AR",
+		name: "Argentina",
+		dial: "54"
+	},
+	{
+		code: "BR",
+		name: "Brazil",
+		dial: "55"
+	},
+	{
+		code: "UY",
+		name: "Uruguay",
+		dial: "598"
+	},
+	{
+		code: "PA",
+		name: "Panama",
+		dial: "507"
+	},
+	{
+		code: "CR",
+		name: "Costa Rica",
+		dial: "506"
+	},
+	{
+		code: "GT",
+		name: "Guatemala",
+		dial: "502"
+	},
+	{
+		code: "DO",
+		name: "Dominican Republic",
+		dial: "1"
+	},
+	{
+		code: "BO",
+		name: "Bolivia",
+		dial: "591"
+	},
+	{
+		code: "PY",
+		name: "Paraguay",
+		dial: "595"
+	},
+	{
+		code: "VE",
+		name: "Venezuela",
+		dial: "58"
+	},
+	{
+		code: "ES",
+		name: "Spain",
+		dial: "34"
+	},
+	{
+		code: "GB",
+		name: "United Kingdom",
+		dial: "44"
+	}
+], l = (e, t = c) => {
+	let n = t.find((t) => t.code === e.country);
+	return n && e.number ? `+${n.dial}${e.number.replace(/^0+/, "")}` : "";
+};
+function u({ value: l, onChange: u, countries: d = c, size: f = "md", placeholder: p, countryLabel: m = "Country code", className: h, ...g }) {
+	let { invalid: _, ...v } = r(g), [y, b] = s(!1), x = o(() => d.find((e) => e.code === l.country) ?? d[0], [d, l.country]);
+	return /* @__PURE__ */ a("div", {
+		className: e(n(f, _), "flex items-stretch", y && "border-primary", h),
+		children: [/* @__PURE__ */ a("div", {
+			className: "relative flex shrink-0 items-center border-r border-border",
+			children: [
+				/* @__PURE__ */ i("select", {
+					"aria-label": m,
+					value: x.code,
+					disabled: v.disabled,
+					onChange: (e) => u({
+						...l,
+						country: e.target.value
+					}),
+					className: "h-full w-[6.75rem] cursor-pointer appearance-none rounded-l-sm border-0 bg-transparent py-0 pr-8 pl-3 font-[inherit] text-[length:inherit] font-medium text-transparent outline-none [&>option]:text-fg focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-focus",
+					children: d.map((e) => /* @__PURE__ */ a("option", {
+						value: e.code,
+						children: [
+							e.code,
+							" +",
+							e.dial,
+							" — ",
+							e.name
+						]
+					}, e.code))
+				}),
+				/* @__PURE__ */ a("span", {
+					"aria-hidden": "true",
+					className: "pointer-events-none absolute inset-y-0 left-3 flex items-center bg-bg pr-1 font-medium",
+					children: [
+						x.code,
+						" +",
+						x.dial
+					]
+				}),
+				/* @__PURE__ */ i(t, {
+					name: "chevron-down",
+					size: 14,
+					className: "pointer-events-none absolute right-2.5 text-fg-muted"
+				})
+			]
+		}), /* @__PURE__ */ i("input", {
+			...v,
+			type: "tel",
+			inputMode: "tel",
+			autoComplete: "tel-national",
+			placeholder: p,
+			value: l.number,
+			onFocus: () => b(!0),
+			onBlur: () => b(!1),
+			onChange: (e) => u({
+				...l,
+				number: e.target.value.replace(/[^\d]/g, "").slice(0, 15)
+			}),
+			className: "min-w-0 flex-1 border-0 bg-transparent px-3 font-[inherit] text-[length:inherit] text-fg tabular-nums outline-none placeholder:text-fg-muted/80"
+		})]
+	});
+}
+//#endregion
+export { c as DEFAULT_COUNTRIES, u as PhoneInput, l as toE164 };
+
+//# sourceMappingURL=phone-input.js.map

package/dist/phone-input/phone-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-input.js","names":["DEFAULT_COUNTRIES","toE164","c","countries","x","value","PhoneInput","rest","field","useFieldProps","focused","setFocused","useState","country","useMemo","cx","controlClasses","size","invalid","className","countryLabel","onChange","Glyph"],"sources":["../../src/phone-input/phone-input.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, useState } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\nimport { useFieldProps } from '../input/input';\nimport { controlClasses, type ControlSize } from '../input/field-styles';\n\nexport interface Country {\n  /** ISO 3166-1 alpha-2. */\n  code: string;\n  name: string;\n  dial: string;\n}\n\n/** Kodffe's markets first (US, LATAM, Spain). Pass `countries` to change the list. */\nexport const DEFAULT_COUNTRIES: Country[] = [\n  { code: 'US', name: 'United States', dial: '1' },\n  { code: 'CA', name: 'Canada', dial: '1' },\n  { code: 'MX', name: 'Mexico', dial: '52' },\n  { code: 'EC', name: 'Ecuador', dial: '593' },\n  { code: 'CO', name: 'Colombia', dial: '57' },\n  { code: 'PE', name: 'Peru', dial: '51' },\n  { code: 'CL', name: 'Chile', dial: '56' },\n  { code: 'AR', name: 'Argentina', dial: '54' },\n  { code: 'BR', name: 'Brazil', dial: '55' },\n  { code: 'UY', name: 'Uruguay', dial: '598' },\n  { code: 'PA', name: 'Panama', dial: '507' },\n  { code: 'CR', name: 'Costa Rica', dial: '506' },\n  { code: 'GT', name: 'Guatemala', dial: '502' },\n  { code: 'DO', name: 'Dominican Republic', dial: '1' },\n  { code: 'BO', name: 'Bolivia', dial: '591' },\n  { code: 'PY', name: 'Paraguay', dial: '595' },\n  { code: 'VE', name: 'Venezuela', dial: '58' },\n  { code: 'ES', name: 'Spain', dial: '34' },\n  { code: 'GB', name: 'United Kingdom', dial: '44' },\n];\n\nexport interface PhoneValue {\n  country: string;\n  /** National number, digits only. */\n  number: string;\n}\n\nexport interface PhoneInputProps {\n  value: PhoneValue;\n  onChange: (value: PhoneValue) => void;\n  countries?: Country[];\n  size?: ControlSize;\n  id?: string;\n  disabled?: boolean;\n  required?: boolean;\n  invalid?: boolean;\n  placeholder?: string;\n  countryLabel?: string;\n  className?: string;\n}\n\n/** E.164 string for APIs (Brevo, WhatsApp, Twilio): `+593991234567`. */\nexport const toE164 = (value: PhoneValue, countries: Country[] = DEFAULT_COUNTRIES) => {\n  const c = countries.find((x) => x.code === value.country);\n  return c && value.number ? `+${c.dial}${value.number.replace(/^0+/, '')}` : '';\n};\n\n/**\n * Country code + national number. The country is a native select (fast on every device); the\n * number keeps digits only and uses the phone keypad (`type=\"tel\"`). Validate length on submit.\n */\nexport function PhoneInput({\n  value,\n  onChange,\n  countries = DEFAULT_COUNTRIES,\n  size = 'md',\n  placeholder,\n  countryLabel = 'Country code',\n  className,\n  ...rest\n}: PhoneInputProps) {\n  const { invalid, ...field } = useFieldProps(rest);\n  const [focused, setFocused] = useState(false);\n  const country = useMemo(\n    () => countries.find((c) => c.code === value.country) ?? countries[0]!,\n    [countries, value.country],\n  );\n  return (\n    <div className={cx(controlClasses(size, invalid), 'flex items-stretch', focused && 'border-primary', className)}>\n      <div className=\"relative flex shrink-0 items-center border-r border-border\">\n        <select\n          aria-label={countryLabel}\n          value={country.code}\n          disabled={field.disabled}\n          onChange={(e) => onChange({ ...value, country: e.target.value })}\n          className=\"h-full w-[6.75rem] cursor-pointer appearance-none rounded-l-sm border-0 bg-transparent py-0 pr-8 pl-3 font-[inherit] text-[length:inherit] font-medium text-transparent outline-none [&>option]:text-fg focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-focus\"\n        >\n          {countries.map((c) => (\n            <option key={c.code} value={c.code}>\n              {c.code} +{c.dial} — {c.name}\n            </option>\n          ))}\n        </select>\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 left-3 flex items-center bg-bg pr-1 font-medium\"\n        >\n          {country.code} +{country.dial}\n        </span>\n        <Glyph name=\"chevron-down\" size={14} className=\"pointer-events-none absolute right-2.5 text-fg-muted\" />\n      </div>\n      <input\n        {...field}\n        type=\"tel\"\n        inputMode=\"tel\"\n        autoComplete=\"tel-national\"\n        placeholder={placeholder}\n        value={value.number}\n        onFocus={() => setFocused(true)}\n        onBlur={() => setFocused(false)}\n        onChange={(e) => onChange({ ...value, number: e.target.value.replace(/[^\\d]/g, '').slice(0, 15) })}\n        className=\"min-w-0 flex-1 border-0 bg-transparent px-3 font-[inherit] text-[length:inherit] text-fg tabular-nums outline-none placeholder:text-fg-muted/80\"\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/popover/popover.d.ts

@@ -0,0 +1,23 @@
+import * as RadixPopover from '@radix-ui/react-popover';
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+/** Shared surface for floating panels (Popover, HoverCard). */
+export declare const floatingSurface = "z-50 rounded-md border border-border bg-surface font-sans text-fg shadow-overlay focus:outline-none max-w-[calc(100vw-2rem)]";
+export declare const Popover: import("react").FC<RadixPopover.PopoverProps>;
+/** Element that toggles the popover. Use `asChild` with a Button. */
+export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<RadixPopover.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PopoverClose: import("react").ForwardRefExoticComponent<RadixPopover.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** Positions the popover against another element than the trigger. */
+export declare const PopoverAnchor: import("react").ForwardRefExoticComponent<RadixPopover.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface PopoverContentProps extends Omit<ComponentPropsWithoutRef<typeof RadixPopover.Content>, 'title'> {
+    /** Optional heading; it also names the popover for screen readers. */
+    title?: ReactNode;
+    /** Width preset; content wraps inside it. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Show the pointer arrow. */
+    arrow?: boolean;
+}
+/**
+ * Non-modal floating panel anchored to a trigger: help text, quick settings, small forms, pickers.
+ * Opens on click (and tap), closes on Escape or outside click, returns focus to the trigger.
+ */
+export declare function PopoverContent({ title, size, arrow, side, align, sideOffset, collisionPadding, className, children, ...rest }: PopoverContentProps): import("react").JSX.Element;

package/dist/popover/popover.js

@@ -0,0 +1,40 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useId as r } from "react";
+import * as i from "@radix-ui/react-popover";
+//#region src/popover/popover.tsx
+var a = "z-50 rounded-md border border-border bg-surface font-sans text-fg shadow-overlay focus:outline-none max-w-[calc(100vw-2rem)]", o = i.Root, s = i.Trigger, c = i.Close, l = i.Anchor, u = {
+	sm: "w-64",
+	md: "w-80",
+	lg: "w-[26rem]"
+};
+function d({ title: o, size: s = "md", arrow: c = !1, side: l = "bottom", align: d = "center", sideOffset: f = 8, collisionPadding: p = 16, className: m, children: h, ...g }) {
+	let _ = r();
+	return /* @__PURE__ */ t(i.Portal, { children: /* @__PURE__ */ n(i.Content, {
+		side: l,
+		align: d,
+		sideOffset: f,
+		collisionPadding: p,
+		"aria-labelledby": o ? _ : void 0,
+		className: e("kf-popover p-4 text-sm", a, u[s], m),
+		...g,
+		children: [
+			o && /* @__PURE__ */ t("p", {
+				id: _,
+				className: "m-0 mb-1.5 font-display text-[15px] font-bold",
+				children: o
+			}),
+			h,
+			c && /* @__PURE__ */ t(i.Arrow, {
+				width: 14,
+				height: 7,
+				className: "fill-surface"
+			})
+		]
+	}) });
+}
+//#endregion
+export { o as Popover, l as PopoverAnchor, c as PopoverClose, d as PopoverContent, s as PopoverTrigger, a as floatingSurface };
+
+//# sourceMappingURL=popover.js.map

package/dist/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","names":["RadixPopover","floatingSurface","Popover","PopoverTrigger","PopoverClose","PopoverAnchor","SIZES","PopoverContent","rest","titleId","useId","title","cx","size","className","children","arrow"],"sources":["../../src/popover/popover.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { useId, type ComponentPropsWithoutRef, type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\n\n/** Shared surface for floating panels (Popover, HoverCard). */\nexport const floatingSurface =\n  'z-50 rounded-md border border-border bg-surface font-sans text-fg shadow-overlay focus:outline-none max-w-[calc(100vw-2rem)]';\n\nexport const Popover = RadixPopover.Root;\n/** Element that toggles the popover. Use `asChild` with a Button. */\nexport const PopoverTrigger = RadixPopover.Trigger;\nexport const PopoverClose = RadixPopover.Close;\n/** Positions the popover against another element than the trigger. */\nexport const PopoverAnchor = RadixPopover.Anchor;\n\nexport interface PopoverContentProps extends Omit<ComponentPropsWithoutRef<typeof RadixPopover.Content>, 'title'> {\n  /** Optional heading; it also names the popover for screen readers. */\n  title?: ReactNode;\n  /** Width preset; content wraps inside it. */\n  size?: 'sm' | 'md' | 'lg';\n  /** Show the pointer arrow. */\n  arrow?: boolean;\n}\n\nconst SIZES = { sm: 'w-64', md: 'w-80', lg: 'w-[26rem]' };\n\n/**\n * Non-modal floating panel anchored to a trigger: help text, quick settings, small forms, pickers.\n * Opens on click (and tap), closes on Escape or outside click, returns focus to the trigger.\n */\nexport function PopoverContent({\n  title,\n  size = 'md',\n  arrow = false,\n  side = 'bottom',\n  align = 'center',\n  sideOffset = 8,\n  collisionPadding = 16,\n  className,\n  children,\n  ...rest\n}: PopoverContentProps) {\n  const titleId = useId();\n  return (\n    <RadixPopover.Portal>\n      <RadixPopover.Content\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        collisionPadding={collisionPadding}\n        aria-labelledby={title ? titleId : undefined}\n        className={cx('kf-popover p-4 text-sm', floatingSurface, SIZES[size], className)}\n        {...rest}\n      >\n        {title && <p id={titleId} className=\"m-0 mb-1.5 font-display text-[15px] font-bold\">{title}</p>}\n        {children}\n        {arrow && <RadixPopover.Arrow width={14} height={7} className=\"fill-surface\" />}\n      </RadixPopover.Content>\n    </RadixPopover.Portal>\n  );\n}\n"],"mappings":";;;;;;AAOA,IAAaC,IACX,gIAEWC,IAAUF,EAAa,MAEvBG,IAAiBH,EAAa,SAC9BI,IAAeJ,EAAa,OAE5BK,IAAgBL,EAAa,QAWpCM,IAAQ;CAAE,IAAI;CAAQ,IAAI;CAAQ,IAAI;AAAY;AAMxD,SAAgBC,EAAe,EAC7B,UACA,UAAO,MACP,WAAQ,IACR,UAAO,UACP,WAAQ,UACR,gBAAa,GACb,sBAAmB,IACnB,cACA,aACA,GAAGC,KACmB;CACtB,IAAMC,IAAUC,EAAM;CACtB,OACE,kBAACV,EAAa,QAAd,EAAA,UACE,kBAACA,EAAa,SAAd;EACQ;EACC;EACK;EACM;EAClB,mBAAiBW,IAAQF,IAAU,KAAA;EACnC,WAAWG,EAAG,0BAA0BX,GAAiBK,EAAMO,IAAOC,CAAS;EAC/E,GAAIN;EAPN,UAAA;GASGG,KAAS,kBAAC,KAAD;IAAG,IAAIF;IAAS,WAAU;IAAiD,UAAAE;GAAS,CAAA;GAC7FI;GACAC,KAAS,kBAAChB,EAAa,OAAd;IAAoB,OAAO;IAAI,QAAQ;IAAG,WAAU;GAAgB,CAAA;EAC1D;CACH,CAAA,EAAA,CAAA;AAEzB"}

package/dist/progress/progress.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type ProgressTone = 'primary' | 'accent' | 'success' | 'warning' | 'danger';
+export type ProgressSize = 'sm' | 'md' | 'lg';
+export interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Current value. Omit (or `null`) for an indeterminate bar when the duration is unknown. */
+    value?: number | null;
+    max?: number;
+    /** Visible label above the bar; also its accessible name. */
+    label?: ReactNode;
+    /** Accessible name when there is no visible label. */
+    'aria-label'?: string;
+    /** Text for the value, e.g. "3 of 12 files". Defaults to a percentage. Set `false` to hide it. */
+    valueText?: string | false;
+    tone?: ProgressTone;
+    size?: ProgressSize;
+}
+/**
+ * Linear progress for tasks that take more than ~2 seconds: imports, uploads, onboarding, quotas.
+ * Use `Spinner` for short waits inside buttons, and `Skeleton` for loading content.
+ */
+export declare function Progress({ value, max, label, valueText, tone, size, className, ...rest }: ProgressProps): import("react").JSX.Element;

package/dist/progress/progress.js

@@ -0,0 +1,49 @@
+import { cx as e } from "../lib/cx.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useId as r } from "react";
+//#region src/progress/progress.tsx
+var i = {
+	primary: "bg-primary",
+	accent: "bg-accent",
+	success: "bg-success-icon",
+	warning: "bg-warning-icon",
+	danger: "bg-danger-icon"
+}, a = {
+	sm: "h-1",
+	md: "h-2",
+	lg: "h-3"
+};
+function o({ value: o = null, max: s = 100, label: c, valueText: l, tone: u = "primary", size: d = "md", className: f, ...p }) {
+	let m = r(), h = typeof o == "number", g = h ? Math.min(s, Math.max(0, o)) : 0, _ = h ? Math.round(g / s * 100) : 0, v = l === !1 ? void 0 : l ?? (h ? `${_}%` : void 0);
+	return /* @__PURE__ */ n("div", {
+		className: e("grid gap-1.5 font-sans", f),
+		children: [(c || v) && /* @__PURE__ */ n("div", {
+			className: "flex items-baseline justify-between gap-3 text-sm",
+			children: [c && /* @__PURE__ */ t("span", {
+				id: m,
+				className: "font-medium text-fg",
+				children: c
+			}), v && /* @__PURE__ */ t("span", {
+				className: "ml-auto text-fg-muted tabular-nums",
+				children: v
+			})]
+		}), /* @__PURE__ */ t("div", {
+			role: "progressbar",
+			"aria-valuemin": 0,
+			"aria-valuemax": s,
+			"aria-valuenow": h ? g : void 0,
+			"aria-valuetext": h ? v : void 0,
+			"aria-labelledby": c ? m : void 0,
+			...p,
+			className: e("relative w-full overflow-hidden rounded-full bg-surface-muted", a[d]),
+			children: h ? /* @__PURE__ */ t("div", {
+				className: e("h-full rounded-full transition-[width] duration-300 ease-standard motion-reduce:transition-none", i[u]),
+				style: { width: `${_}%` }
+			}) : /* @__PURE__ */ t("div", { className: e("kf-progress-indeterminate absolute inset-y-0 left-0 w-full origin-left rounded-full", i[u]) })
+		})]
+	});
+}
+//#endregion
+export { o as Progress };
+
+//# sourceMappingURL=progress.js.map

package/dist/progress/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","names":["TONES","SIZES","Progress","rest","labelId","useId","determinate","value","clamped","max","percent","text","valueText","cx","className","label","size","tone"],"sources":["../../src/progress/progress.tsx"],"sourcesContent":["import { useId, type HTMLAttributes, type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\n\nexport type ProgressTone = 'primary' | 'accent' | 'success' | 'warning' | 'danger';\nexport type ProgressSize = 'sm' | 'md' | 'lg';\n\nconst TONES: Record<ProgressTone, string> = {\n  primary: 'bg-primary',\n  accent: 'bg-accent',\n  success: 'bg-success-icon',\n  warning: 'bg-warning-icon',\n  danger: 'bg-danger-icon',\n};\n\nconst SIZES: Record<ProgressSize, string> = { sm: 'h-1', md: 'h-2', lg: 'h-3' };\n\nexport interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Current value. Omit (or `null`) for an indeterminate bar when the duration is unknown. */\n  value?: number | null;\n  max?: number;\n  /** Visible label above the bar; also its accessible name. */\n  label?: ReactNode;\n  /** Accessible name when there is no visible label. */\n  'aria-label'?: string;\n  /** Text for the value, e.g. \"3 of 12 files\". Defaults to a percentage. Set `false` to hide it. */\n  valueText?: string | false;\n  tone?: ProgressTone;\n  size?: ProgressSize;\n}\n\n/**\n * Linear progress for tasks that take more than ~2 seconds: imports, uploads, onboarding, quotas.\n * Use `Spinner` for short waits inside buttons, and `Skeleton` for loading content.\n */\nexport function Progress({ value = null, max = 100, label, valueText, tone = 'primary', size = 'md', className, ...rest }: ProgressProps) {\n  const labelId = useId();\n  const determinate = typeof value === 'number';\n  const clamped = determinate ? Math.min(max, Math.max(0, value)) : 0;\n  const percent = determinate ? Math.round((clamped / max) * 100) : 0;\n  const text = valueText === false ? undefined : (valueText ?? (determinate ? `${percent}%` : undefined));\n\n  return (\n    <div className={cx('grid gap-1.5 font-sans', className)}>\n      {(label || text) && (\n        <div className=\"flex items-baseline justify-between gap-3 text-sm\">\n          {label && (\n            <span id={labelId} className=\"font-medium text-fg\">\n              {label}\n            </span>\n          )}\n          {text && <span className=\"ml-auto text-fg-muted tabular-nums\">{text}</span>}\n        </div>\n      )}\n      <div\n        role=\"progressbar\"\n        aria-valuemin={0}\n        aria-valuemax={max}\n        aria-valuenow={determinate ? clamped : undefined}\n        aria-valuetext={determinate ? text : undefined}\n        aria-labelledby={label ? labelId : undefined}\n        {...rest}\n        className={cx('relative w-full overflow-hidden rounded-full bg-surface-muted', SIZES[size])}\n      >\n        {determinate ? (\n          <div\n            className={cx('h-full rounded-full transition-[width] duration-300 ease-standard motion-reduce:transition-none', TONES[tone])}\n            style={{ width: `${percent}%` }}\n          />\n        ) : (\n          <div className={cx('kf-progress-indeterminate absolute inset-y-0 left-0 w-full origin-left rounded-full', TONES[tone])} />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAMA,IAAMA,IAAsC;CAC1C,SAAS;CACT,QAAQ;CACR,SAAS;CACT,SAAS;CACT,QAAQ;AACV,GAEMC,IAAsC;CAAE,IAAI;CAAO,IAAI;CAAO,IAAI;AAAM;AAoB9E,SAAgBC,EAAS,EAAE,WAAQ,MAAM,SAAM,KAAK,UAAO,cAAW,UAAO,WAAW,UAAO,MAAM,cAAW,GAAGC,KAAuB;CACxI,IAAMC,IAAUC,EAAM,GAChBC,IAAc,OAAOC,KAAU,UAC/BC,IAAUF,IAAc,KAAK,IAAIG,GAAK,KAAK,IAAI,GAAGF,CAAK,CAAC,IAAI,GAC5DG,IAAUJ,IAAc,KAAK,MAAOE,IAAUC,IAAO,GAAG,IAAI,GAC5DE,IAAOC,MAAc,KAAQ,KAAA,IAAaA,MAAcN,IAAc,GAAGI,EAAQ,KAAK,KAAA;CAE5F,OACE,kBAAC,OAAD;EAAK,WAAWG,EAAG,0BAA0BC,CAAS;EAAtD,UAAA,EACIC,KAASJ,MACT,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACGI,KACC,kBAAC,QAAD;IAAM,IAAIX;IAAS,WAAU;IAC1B,UAAAW;GACG,CAAA,GAEPJ,KAAQ,kBAAC,QAAD;IAAM,WAAU;IAAsC,UAAAA;GAAW,CAAA,CACvE;EAEP,CAAA,GAAA,kBAAC,OAAD;GACE,MAAK;GACL,iBAAe;GACf,iBAAeF;GACf,iBAAeH,IAAcE,IAAU,KAAA;GACvC,kBAAgBF,IAAcK,IAAO,KAAA;GACrC,mBAAiBI,IAAQX,IAAU,KAAA;GACnC,GAAID;GACJ,WAAWU,EAAG,iEAAiEZ,EAAMe,EAAK;GAEzF,UAAAV,IACC,kBAAC,OAAD;IACE,WAAWO,EAAG,mGAAmGb,EAAMiB,EAAK;IAC5H,OAAO,EAAE,OAAO,GAAGP,EAAQ,GAAG;GAC/B,CAAA,IAED,kBAAC,OAAD,EAAK,WAAWG,EAAG,uFAAuFb,EAAMiB,EAAK,EAAI,CAAA;EAExH,CAAA,CACF;;AAET"}

package/dist/segmented-control/segmented-control.d.ts

@@ -0,0 +1,32 @@
+import { type IconName } from '../icon/icon';
+export interface SegmentedOption {
+    value: string;
+    label: string;
+    icon?: IconName;
+    disabled?: boolean;
+}
+export interface SegmentedControlProps {
+    /** Two to five mutually exclusive options. */
+    options: SegmentedOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Required unless `aria-labelledby` is set (e.g. the label of a `SettingsRow`). */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    name?: string;
+    disabled?: boolean;
+    /** `sm` 32 px, `md` 40 px. Touch screens get at least 44 px. */
+    size?: 'sm' | 'md';
+    /** `inverse` on a brand surface (white active option). */
+    tone?: 'default' | 'inverse';
+    /** Stretch options to fill the width. */
+    fullWidth?: boolean;
+    className?: string;
+}
+/**
+ * Pick one of 2–5 options in a single pill ("Informative / Blocking", a language). Applies immediately; a radio
+ * group underneath, so arrow keys move the choice. For views of a page use `Tabs`; for longer lists, `Select`.
+ */
+export declare function SegmentedControl({ options, size, tone, fullWidth, className, ...rest }: SegmentedControlProps): import("react").JSX.Element;

package/dist/segmented-control/segmented-control.js

@@ -0,0 +1,29 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { SEGMENTED_ITEM as n, SEGMENTED_TRACK as r } from "../lib/segmented-styles.js";
+import { selectOnArrow as i } from "../lib/select-on-arrow.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import * as s from "@radix-ui/react-radio-group";
+//#region src/segmented-control/segmented-control.tsx
+function c({ options: c, size: l = "md", tone: u = "default", fullWidth: d, className: f, ...p }) {
+	return /* @__PURE__ */ a(s.Root, {
+		orientation: "horizontal",
+		onKeyDown: i,
+		className: e("font-sans", d ? "flex w-full" : "inline-flex w-fit max-w-full overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", r[u], f),
+		...p,
+		children: c.map((r) => /* @__PURE__ */ o(s.Item, {
+			value: r.value,
+			disabled: r.disabled,
+			className: e("inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-xs border-0 bg-transparent px-3 text-sm font-semibold whitespace-nowrap transition-colors duration-150", "focus-visible:outline-3 focus-visible:outline-offset-1 disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:min-h-11", l === "sm" ? "h-8" : "h-10", d && "flex-1", n[u]),
+			children: [r.icon && /* @__PURE__ */ a(t, {
+				name: r.icon,
+				size: 16
+			}), r.label]
+		}, r.value))
+	});
+}
+//#endregion
+export { c as SegmentedControl };
+
+//# sourceMappingURL=segmented-control.js.map

package/dist/segmented-control/segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.js","names":["RadixRadio","SegmentedControl","rest","selectOnArrow","cx","fullWidth","SEGMENTED_TRACK","tone","className","options","o","size","SEGMENTED_ITEM","Icon"],"sources":["../../src/segmented-control/segmented-control.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixRadio from '@radix-ui/react-radio-group';\nimport { cx } from '../lib/cx';\nimport { SEGMENTED_ITEM, SEGMENTED_TRACK } from '../lib/segmented-styles';\nimport { Icon, type IconName } from '../icon/icon';\nimport { selectOnArrow } from '../lib/select-on-arrow';\n\nexport interface SegmentedOption {\n  value: string;\n  label: string;\n  icon?: IconName;\n  disabled?: boolean;\n}\n\nexport interface SegmentedControlProps {\n  /** Two to five mutually exclusive options. */\n  options: SegmentedOption[];\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** Required unless `aria-labelledby` is set (e.g. the label of a `SettingsRow`). */\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n  name?: string;\n  disabled?: boolean;\n  /** `sm` 32 px, `md` 40 px. Touch screens get at least 44 px. */\n  size?: 'sm' | 'md';\n  /** `inverse` on a brand surface (white active option). */\n  tone?: 'default' | 'inverse';\n  /** Stretch options to fill the width. */\n  fullWidth?: boolean;\n  className?: string;\n}\n\n\n/**\n * Pick one of 2–5 options in a single pill (\"Informative / Blocking\", a language). Applies immediately; a radio\n * group underneath, so arrow keys move the choice. For views of a page use `Tabs`; for longer lists, `Select`.\n */\nexport function SegmentedControl({\n  options,\n  size = 'md',\n  tone = 'default',\n  fullWidth,\n  className,\n  ...rest\n}: SegmentedControlProps) {\n  return (\n    <RadixRadio.Root\n      orientation=\"horizontal\"\n      onKeyDown={selectOnArrow}\n      className={cx(\n        'font-sans',\n        // Never wider than its container: scrolls sideways on narrow screens, like Tabs.\n        fullWidth ? 'flex w-full' : 'inline-flex w-fit max-w-full overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',\n        SEGMENTED_TRACK[tone],\n        className,\n      )}\n      {...rest}\n    >\n      {options.map((o) => (\n        <RadixRadio.Item\n          key={o.value}\n          value={o.value}\n          disabled={o.disabled}\n          className={cx(\n            'inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-xs border-0 bg-transparent px-3 text-sm font-semibold whitespace-nowrap transition-colors duration-150',\n            'focus-visible:outline-3 focus-visible:outline-offset-1 disabled:cursor-not-allowed disabled:opacity-50 pointer-coarse:min-h-11',\n            size === 'sm' ? 'h-8' : 'h-10',\n            fullWidth && 'flex-1',\n            SEGMENTED_ITEM[tone],\n          )}\n        >\n          {o.icon && <Icon name={o.icon} size={16} />}\n          {o.label}\n        </RadixRadio.Item>\n      ))}\n    </RadixRadio.Root>\n  );\n}\n"],"mappings":";;;;;;;;AAyCA,SAAgBC,EAAiB,EAC/B,YACA,UAAO,MACP,UAAO,WACP,cACA,cACA,GAAGC,KACqB;CACxB,OACE,kBAACF,EAAW,MAAZ;EACE,aAAY;EACZ,WAAWG;EACX,WAAWC,EACT,aAEAC,IAAY,gBAAgB,qGAC5BC,EAAgBC,IAChBC,CACF;EACA,GAAIN;EAEH,UAAAO,EAAQ,KAAK,MACZ,kBAACT,EAAW,MAAZ;GAEE,OAAOU,EAAE;GACT,UAAUA,EAAE;GACZ,WAAWN,EACT,0LACA,kIACAO,MAAS,OAAO,QAAQ,QACxBN,KAAa,UACbO,EAAeL,EACjB;GAVF,UAAA,CAYGG,EAAE,QAAQ,kBAACG,GAAD;IAAM,MAAMH,EAAE;IAAM,MAAM;GAAK,CAAA,GACzCA,EAAE,KACY;EAbV,GAAAA,EAAE,KAaQ,CAClB;CACc,CAAA;AAErB"}

package/dist/select/select.d.ts

@@ -0,0 +1,48 @@
+import type { SelectHTMLAttributes } from 'react';
+import { type IconName } from '../icon/icon';
+import { type ControlSize } from '../input/field-styles';
+export interface SelectOption {
+    value: string;
+    label: string;
+    icon?: IconName;
+    /** Secondary text after the label, also in the closed select ("Guayaquil" + "UTC−05:00"). */
+    hint?: string;
+    disabled?: boolean;
+}
+export interface SelectGroup {
+    label: string;
+    options: SelectOption[];
+}
+export interface SelectProps {
+    options: (SelectOption | SelectGroup)[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    size?: ControlSize;
+    /** Maximum width: `full` (default, fills the field), `xs` (currency, 7rem), `sm` (language, 11rem), `md` (18rem). */
+    width?: SelectWidth;
+    name?: string;
+    id?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    'aria-label'?: string;
+    /** `auto` (default): native `<select>` on touch screens, custom listbox with a pointer. */
+    native?: 'auto' | boolean;
+    className?: string;
+}
+export type SelectWidth = 'full' | 'xs' | 'sm' | 'md';
+/**
+ * Pick one option from a short list (up to ~15). Uses the OS picker on touch screens and a styled
+ * listbox (Radix Select) with a mouse. For long or searchable lists use `Combobox`.
+ */
+export declare function Select({ options, value, defaultValue, onValueChange, placeholder, size, width, native, className, ...props }: SelectProps): import("react").JSX.Element;
+export interface NativeSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    size?: ControlSize;
+    invalid?: boolean;
+    /** Classes for the wrapper (e.g. a `max-w-*` to narrow it). */
+    wrapperClassName?: string;
+}
+/** Styled native `<select>`: best on mobile and for very simple forms. */
+export declare function NativeSelect({ size, invalid: invalidProp, wrapperClassName, className, children, ...rest }: NativeSelectProps): import("react").JSX.Element;

package/dist/select/select.js

@@ -0,0 +1,136 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { Icon as t } from "../icon/icon.js";
+import { useMediaQuery as n } from "../lib/use-media-query.js";
+import { Glyph as r } from "../lib/glyphs.js";
+import { controlClasses as i } from "../input/field-styles.js";
+import { useFieldProps as a } from "../input/input.js";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import * as l from "@radix-ui/react-select";
+//#region src/select/select.tsx
+var u = {
+	full: "",
+	xs: "max-w-28",
+	sm: "max-w-44",
+	md: "max-w-72"
+}, d = (e) => "options" in e;
+function f({ options: f, value: m, defaultValue: h, onValueChange: g, placeholder: _ = "Select…", size: v = "md", width: y = "full", native: b = "auto", className: x, ...S }) {
+	let C = n("(pointer: coarse)", !1), { invalid: w, ...T } = a(S), E = b === !0 || b === "auto" && C, D = f.flatMap((e) => d(e) ? e.options : [e]);
+	if (E) return /* @__PURE__ */ c(p, {
+		...T,
+		name: S.name,
+		"aria-label": S["aria-label"],
+		value: m,
+		defaultValue: m === void 0 ? h ?? "" : void 0,
+		onChange: (e) => g?.(e.target.value),
+		size: v,
+		invalid: w,
+		wrapperClassName: u[y],
+		className: x,
+		children: [/* @__PURE__ */ s("option", {
+			value: "",
+			disabled: !0,
+			children: _
+		}), f.map((e) => d(e) ? /* @__PURE__ */ s("optgroup", {
+			label: e.label,
+			children: e.options.map((e) => /* @__PURE__ */ s("option", {
+				value: e.value,
+				disabled: e.disabled,
+				children: e.hint ? `${e.label} ${e.hint}` : e.label
+			}, e.value))
+		}, e.label) : /* @__PURE__ */ s("option", {
+			value: e.value,
+			disabled: e.disabled,
+			children: e.hint ? `${e.label} ${e.hint}` : e.label
+		}, e.value))]
+	});
+	let O = (e) => /* @__PURE__ */ c(l.Item, {
+		value: e.value,
+		disabled: e.disabled,
+		className: "relative flex min-h-9 cursor-pointer items-center gap-2.5 rounded-sm py-1.5 pr-8 pl-2.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[highlighted]:bg-surface-muted data-[state=checked]:font-semibold",
+		children: [
+			e.icon && /* @__PURE__ */ s(t, {
+				name: e.icon,
+				size: 20
+			}),
+			/* @__PURE__ */ c(l.ItemText, { children: [e.label, e.hint && /* @__PURE__ */ c(o, { children: [" ", /* @__PURE__ */ s("span", {
+				className: "ml-0.5 font-normal text-fg-muted",
+				children: e.hint
+			})] })] }),
+			/* @__PURE__ */ s(l.ItemIndicator, {
+				className: "absolute right-2.5 inline-flex text-link",
+				children: /* @__PURE__ */ s(r, {
+					name: "check",
+					size: 16
+				})
+			})
+		]
+	}, e.value);
+	return /* @__PURE__ */ c(l.Root, {
+		value: m,
+		defaultValue: h,
+		onValueChange: g,
+		name: S.name,
+		disabled: T.disabled,
+		required: T.required,
+		children: [/* @__PURE__ */ c(l.Trigger, {
+			id: T.id,
+			"aria-label": S["aria-label"],
+			"aria-invalid": T["aria-invalid"],
+			"aria-describedby": T["aria-describedby"],
+			className: e(i(v, w), "flex cursor-pointer items-center justify-between gap-2 px-3 text-left outline-none data-[placeholder]:text-fg-muted disabled:cursor-not-allowed disabled:bg-surface-muted", "focus:border-primary focus:shadow-[0_0_0_3px_color-mix(in_oklab,var(--color-focus),transparent_70%)]", u[y], x),
+			children: [/* @__PURE__ */ c("span", {
+				className: "flex min-w-0 items-center gap-2 truncate",
+				children: [(() => {
+					let e = D.find((e) => e.value === m);
+					return e?.icon ? /* @__PURE__ */ s(t, {
+						name: e.icon,
+						size: 20
+					}) : null;
+				})(), /* @__PURE__ */ s(l.Value, { placeholder: _ })]
+			}), /* @__PURE__ */ s(l.Icon, {
+				className: "shrink-0 text-fg-muted",
+				children: /* @__PURE__ */ s(r, {
+					name: "chevron-down",
+					size: 16
+				})
+			})]
+		}), /* @__PURE__ */ s(l.Portal, { children: /* @__PURE__ */ s(l.Content, {
+			position: "popper",
+			sideOffset: 6,
+			collisionPadding: 16,
+			className: "kf-menu z-50 max-h-[min(22rem,var(--radix-select-content-available-height))] min-w-[max(var(--radix-select-trigger-width),10rem)] max-w-[calc(100vw-2rem)] overflow-hidden rounded-md border border-border bg-surface font-sans text-fg shadow-overlay",
+			children: /* @__PURE__ */ s(l.Viewport, {
+				className: "p-1",
+				children: f.map((e) => d(e) ? /* @__PURE__ */ c(l.Group, { children: [/* @__PURE__ */ s(l.Label, {
+					className: "px-2.5 pt-2 pb-1 text-xs font-semibold tracking-wide text-fg-muted uppercase",
+					children: e.label
+				}), e.options.map(O)] }, e.label) : O(e))
+			})
+		}) })]
+	});
+}
+function p({ size: t = "md", invalid: n, wrapperClassName: o, className: l, children: u, ...d }) {
+	let { invalid: f, ...p } = a({
+		...d,
+		invalid: n
+	});
+	return /* @__PURE__ */ c("div", {
+		className: e("relative", o),
+		children: [/* @__PURE__ */ s("select", {
+			...d,
+			...p,
+			"aria-invalid": f || d["aria-invalid"] || void 0,
+			className: e(i(t, f), "cursor-pointer appearance-none pr-10 pl-3 outline-none focus:border-primary focus:shadow-[0_0_0_3px_color-mix(in_oklab,var(--color-focus),transparent_70%)] disabled:cursor-not-allowed", l),
+			children: u
+		}), /* @__PURE__ */ s(r, {
+			name: "chevron-down",
+			size: 16,
+			className: "pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-fg-muted"
+		})]
+	});
+}
+//#endregion
+export { p as NativeSelect, f as Select };
+
+//# sourceMappingURL=select.js.map

package/dist/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":["_Fragment","RadixSelect","WIDTHS","isGroup","o","Select","props","coarse","useMediaQuery","field","useFieldProps","useNative","native","flat","options","NativeSelect","value","defaultValue","onValueChange","width","placeholder","opt","item","Icon","Fragment","Glyph","cx","controlClasses","size","invalid","className","selected","invalidProp","rest","wrapperClassName"],"sources":["../../src/select/select.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixSelect from '@radix-ui/react-select';\nimport type { SelectHTMLAttributes } from 'react';\nimport { cx } from '../lib/cx';\nimport { Glyph } from '../lib/glyphs';\nimport { Icon, type IconName } from '../icon/icon';\nimport { useMediaQuery } from '../lib/use-media-query';\nimport { useFieldProps } from '../input/input';\nimport { controlClasses, type ControlSize } from '../input/field-styles';\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n  icon?: IconName;\n  /** Secondary text after the label, also in the closed select (\"Guayaquil\" + \"UTC−05:00\"). */\n  hint?: string;\n  disabled?: boolean;\n}\n\nexport interface SelectGroup {\n  label: string;\n  options: SelectOption[];\n}\n\nexport interface SelectProps {\n  options: (SelectOption | SelectGroup)[];\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  placeholder?: string;\n  size?: ControlSize;\n  /** Maximum width: `full` (default, fills the field), `xs` (currency, 7rem), `sm` (language, 11rem), `md` (18rem). */\n  width?: SelectWidth;\n  name?: string;\n  id?: string;\n  disabled?: boolean;\n  required?: boolean;\n  invalid?: boolean;\n  'aria-label'?: string;\n  /** `auto` (default): native `<select>` on touch screens, custom listbox with a pointer. */\n  native?: 'auto' | boolean;\n  className?: string;\n}\n\nexport type SelectWidth = 'full' | 'xs' | 'sm' | 'md';\n// Caps the width instead of setting it, so it never conflicts with the control's `w-full`.\nconst WIDTHS: Record<SelectWidth, string> = { full: '', xs: 'max-w-28', sm: 'max-w-44', md: 'max-w-72' };\n\nconst isGroup = (o: SelectOption | SelectGroup): o is SelectGroup => 'options' in o;\n\n/**\n * Pick one option from a short list (up to ~15). Uses the OS picker on touch screens and a styled\n * listbox (Radix Select) with a mouse. For long or searchable lists use `Combobox`.\n */\nexport function Select({\n  options,\n  value,\n  defaultValue,\n  onValueChange,\n  placeholder = 'Select…',\n  size = 'md',\n  width = 'full',\n  native = 'auto',\n  className,\n  ...props\n}: SelectProps) {\n  const coarse = useMediaQuery('(pointer: coarse)', false);\n  const { invalid, ...field } = useFieldProps(props);\n  const useNative = native === true || (native === 'auto' && coarse);\n  const flat = options.flatMap((o) => (isGroup(o) ? o.options : [o]));\n\n  if (useNative) {\n    return (\n      <NativeSelect\n        {...field}\n        name={props.name}\n        aria-label={props['aria-label']}\n        value={value}\n        defaultValue={value === undefined ? (defaultValue ?? '') : undefined}\n        onChange={(e) => onValueChange?.(e.target.value)}\n        size={size}\n        invalid={invalid}\n        wrapperClassName={WIDTHS[width]}\n        className={className}\n      >\n        <option value=\"\" disabled>\n          {placeholder}\n        </option>\n        {options.map((o) =>\n          isGroup(o) ? (\n            <optgroup key={o.label} label={o.label}>\n              {o.options.map((opt) => (\n                <option key={opt.value} value={opt.value} disabled={opt.disabled}>\n                  {opt.hint ? `${opt.label} ${opt.hint}` : opt.label}\n                </option>\n              ))}\n            </optgroup>\n          ) : (\n            <option key={o.value} value={o.value} disabled={o.disabled}>\n              {o.hint ? `${o.label} ${o.hint}` : o.label}\n            </option>\n          ),\n        )}\n      </NativeSelect>\n    );\n  }\n\n  const item = (opt: SelectOption) => (\n    <RadixSelect.Item\n      key={opt.value}\n      value={opt.value}\n      disabled={opt.disabled}\n      className=\"relative flex min-h-9 cursor-pointer items-center gap-2.5 rounded-sm py-1.5 pr-8 pl-2.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[highlighted]:bg-surface-muted data-[state=checked]:font-semibold\"\n    >\n      {opt.icon && <Icon name={opt.icon} size={20} />}\n      <RadixSelect.ItemText>\n        {opt.label}\n        {opt.hint && (\n          <>\n            {' '}\n            <span className=\"ml-0.5 font-normal text-fg-muted\">{opt.hint}</span>\n          </>\n        )}\n      </RadixSelect.ItemText>\n      <RadixSelect.ItemIndicator className=\"absolute right-2.5 inline-flex text-link\">\n        <Glyph name=\"check\" size={16} />\n      </RadixSelect.ItemIndicator>\n    </RadixSelect.Item>\n  );\n\n  return (\n    <RadixSelect.Root\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={onValueChange}\n      name={props.name}\n      disabled={field.disabled}\n      required={field.required}\n    >\n      <RadixSelect.Trigger\n        id={field.id}\n        aria-label={props['aria-label']}\n        aria-invalid={field['aria-invalid']}\n        aria-describedby={field['aria-describedby']}\n        className={cx(\n          controlClasses(size, invalid),\n          'flex cursor-pointer items-center justify-between gap-2 px-3 text-left outline-none data-[placeholder]:text-fg-muted disabled:cursor-not-allowed disabled:bg-surface-muted',\n          'focus:border-primary focus:shadow-[0_0_0_3px_color-mix(in_oklab,var(--color-focus),transparent_70%)]',\n          WIDTHS[width],\n          className,\n        )}\n      >\n        <span className=\"flex min-w-0 items-center gap-2 truncate\">\n          {(() => {\n            const selected = flat.find((o) => o.value === value);\n            return selected?.icon ? <Icon name={selected.icon} size={20} /> : null;\n          })()}\n          <RadixSelect.Value placeholder={placeholder} />\n        </span>\n        <RadixSelect.Icon className=\"shrink-0 text-fg-muted\">\n          <Glyph name=\"chevron-down\" size={16} />\n        </RadixSelect.Icon>\n      </RadixSelect.Trigger>\n      <RadixSelect.Portal>\n        <RadixSelect.Content\n          position=\"popper\"\n          sideOffset={6}\n          collisionPadding={16}\n          className=\"kf-menu z-50 max-h-[min(22rem,var(--radix-select-content-available-height))] min-w-[max(var(--radix-select-trigger-width),10rem)] max-w-[calc(100vw-2rem)] overflow-hidden rounded-md border border-border bg-surface font-sans text-fg shadow-overlay\"\n        >\n          <RadixSelect.Viewport className=\"p-1\">\n            {options.map((o) =>\n              isGroup(o) ? (\n                <RadixSelect.Group key={o.label}>\n                  <RadixSelect.Label className=\"px-2.5 pt-2 pb-1 text-xs font-semibold tracking-wide text-fg-muted uppercase\">\n                    {o.label}\n                  </RadixSelect.Label>\n                  {o.options.map(item)}\n                </RadixSelect.Group>\n              ) : (\n                item(o)\n              ),\n            )}\n          </RadixSelect.Viewport>\n        </RadixSelect.Content>\n      </RadixSelect.Portal>\n    </RadixSelect.Root>\n  );\n}\n\nexport interface NativeSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {\n  size?: ControlSize;\n  invalid?: boolean;\n  /** Classes for the wrapper (e.g. a `max-w-*` to narrow it). */\n  wrapperClassName?: string;\n}\n\n/** Styled native `<select>`: best on mobile and for very simple forms. */\nexport function NativeSelect({\n  size = 'md',\n  invalid: invalidProp,\n  wrapperClassName,\n  className,\n  children,\n  ...rest\n}: NativeSelectProps) {\n  // Reads the surrounding FormField (label, hint, error), like Input and Select.\n  const { invalid, ...field } = useFieldProps({ ...rest, invalid: invalidProp });\n  return (\n    <div className={cx('relative', wrapperClassName)}>\n      <select\n        {...rest}\n        {...field}\n        aria-invalid={invalid || rest['aria-invalid'] || undefined}\n        className={cx(\n          controlClasses(size, invalid),\n          'cursor-pointer appearance-none pr-10 pl-3 outline-none focus:border-primary focus:shadow-[0_0_0_3px_color-mix(in_oklab,var(--color-focus),transparent_70%)] disabled:cursor-not-allowed',\n          className,\n        )}\n      >\n        {children}\n      </select>\n      <Glyph\n        name=\"chevron-down\"\n        size={16}\n        className=\"pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-fg-muted\"\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}