@mortenbrudvik/waveui 0.4.0 → 0.8.0

package/dist/components/input/Rating.mjs

@@ -0,0 +1,197 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { warnDeprecated as t, warnOnce as n } from "../../lib/dev.mjs";
+import { composeEventHandlers as r } from "../../lib/composeEventHandlers.mjs";
+import { ratingClassNames as i, ratingDisplayClassNames as a } from "../../lib/classNames.mjs";
+import { useControllable as o } from "../../hooks/useControllable.mjs";
+import { getArrowIntent as s, getDirection as c } from "../../lib/direction.mjs";
+import { useRovingTabIndex as l } from "../../hooks/useRovingTabIndex.mjs";
+import { useMergedRefs as u } from "../../hooks/useMergedRefs.mjs";
+import { useFieldContext as d, useFieldControl as f } from "../../hooks/useFieldControl.mjs";
+import { focusRing as p } from "../../lib/styles.mjs";
+import { StarIcon as m } from "../../lib/icons.mjs";
+import { useFormReset as h } from "../../hooks/useFormReset.mjs";
+import { HiddenInput as g } from "../internal/HiddenInput.mjs";
+import * as _ from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/components/input/Rating.tsx
+var b = (e) => `${e} star${e === 1 ? "" : "s"}`, x = {
+	"extra-small": "h-3 w-3",
+	small: "h-4 w-4",
+	medium: "h-5 w-5",
+	large: "h-6 w-6",
+	"extra-large": "h-8 w-8"
+}, S = {
+	"extra-small": "p-1.5",
+	small: "p-1",
+	medium: "p-0.5",
+	large: "p-0.5",
+	"extra-large": "p-0.5"
+};
+function C({ filled: e, className: t }) {
+	return e ? /* @__PURE__ */ v(m, { className: t }) : /* @__PURE__ */ v(m, {
+		className: t,
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.5
+	});
+}
+var w = ({ value: n, defaultValue: a, onValueChange: m, onChange: w, max: T = 5, size: E = "medium", disabled: D = !1, name: O, required: k, form: A, labels: j, className: M, id: N, "aria-label": P, "aria-labelledby": F, "aria-describedby": I, "aria-invalid": ee, "aria-required": te, onKeyDown: ne, onFocus: L, onMouseLeave: R, ref: z, ...B }) => {
+	w !== void 0 && t("Rating", "onChange", "onValueChange");
+	let V = a ?? 0, [H, U] = o(n, V, (e) => {
+		m?.(e), w?.(e);
+	}), [W, G] = _.useState(0), [K, q] = _.useState(D);
+	K !== D && (q(D), D && G(0));
+	let J = D ? H : W || H, { containerProps: Y, getTabIndex: X, focusValue: re } = l({ activeValue: H > 0 ? String(H) : null }), ie = (e) => {
+		if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return;
+		let t;
+		if (e.key === "Home") t = 1;
+		else if (e.key === "End") t = T;
+		else if (e.key === "ArrowUp") t = H + 1;
+		else if (e.key === "ArrowDown") t = H - 1;
+		else {
+			let n = s(e.key, {
+				orientation: "horizontal",
+				dir: c(e.currentTarget)
+			});
+			if (!n) return;
+			t = n === "next" ? H + 1 : H - 1;
+		}
+		e.preventDefault(), t = Math.min(t, T), !(D || t < 1 || t === H) && (re(String(t)), U(t));
+	}, Z = _.useRef(null), ae = u(z, Y.ref, Z), oe = d(), Q = f({
+		id: N,
+		"aria-label": P,
+		"aria-labelledby": F,
+		"aria-describedby": I,
+		"aria-invalid": ee,
+		"aria-required": te ?? k
+	}, { labelable: !1 }), se = k ?? oe?.required ?? !1, ce = Q["aria-label"] === void 0 && Q["aria-labelledby"] === void 0 ? "Rating" : void 0;
+	h(Z, () => U(V), A);
+	let le = () => {
+		Z.current?.querySelector("[data-roving-value][tabindex=\"0\"]")?.focus();
+	}, $ = x[E], ue = j?.star ?? b;
+	return /* @__PURE__ */ y("div", {
+		role: "radiogroup",
+		"aria-label": ce,
+		...Q,
+		"aria-disabled": D || void 0,
+		className: e(i.root, "relative inline-flex items-center gap-0.5", D && "pointer-events-none opacity-50", M),
+		...B,
+		ref: ae,
+		"data-roving-container": "",
+		onKeyDown: r(ne, ie),
+		onFocus: r(L, Y.onFocus, { checkDefaultPrevented: !1 }),
+		onMouseLeave: r(R, () => G(0), { checkDefaultPrevented: !1 }),
+		children: [Array.from({ length: T }, (t, n) => {
+			let r = n + 1, a = String(r), o = J >= r;
+			return /* @__PURE__ */ v("button", {
+				type: "button",
+				role: "radio",
+				"aria-checked": H === r,
+				"aria-label": ue(r, T),
+				"data-roving-value": a,
+				tabIndex: D ? -1 : X(a),
+				disabled: D,
+				className: e(i.star, "inline-flex cursor-pointer rounded border-0 bg-transparent transition-colors motion-reduce:transition-none disabled:cursor-not-allowed", S[E], p, o ? "text-rating" : "text-stroke-accessible"),
+				onClick: () => {
+					D || U(r);
+				},
+				onMouseEnter: () => {
+					D || G(r);
+				},
+				children: /* @__PURE__ */ v(C, {
+					filled: o,
+					className: e(i.icon, $)
+				})
+			}, a);
+		}), /* @__PURE__ */ v(g, {
+			type: "radio",
+			name: O,
+			form: A,
+			disabled: D,
+			value: H > 0 ? String(H) : "",
+			required: se,
+			onInvalid: le
+		})]
+	});
+};
+w.displayName = "Rating";
+var T = {
+	"extra-small": "text-caption-1",
+	small: "text-caption-1",
+	medium: "text-body-1",
+	large: "text-body-2",
+	"extra-large": "text-body-2"
+}, E = (e, t, n) => `Rating: ${n} out of ${t}`, D = (e, t) => e === 1 ? "1 rating" : `${t} ratings`;
+function O(e) {
+	if (e !== void 0) try {
+		return Intl.getCanonicalLocales(e), e;
+	} catch {
+		return;
+	}
+}
+var k = ({ value: t, max: r = 5, size: i = "medium", showValue: o = !1, count: s, compact: c = !1, locale: l, labels: u, className: d, ref: f, ...p }) => {
+	let m = x[i], h = O(l), g = l !== void 0 && h === void 0;
+	_.useEffect(() => {
+		g && n(`RatingDisplay:invalid-locale:${l}`, `RatingDisplay: \`locale\` "${l}" is not a valid BCP 47 language tag (use hyphens, as in "en-US"). The runtime default locale formats the value instead, so the server and the browser may render different text.`);
+	}, [g, l]);
+	let b = new Intl.NumberFormat(h, { maximumFractionDigits: 1 }).format(t), S = s === void 0 ? void 0 : new Intl.NumberFormat(h).format(s), w = (u?.rating ?? E)(t, r, b), k = s === void 0 || S === void 0 ? w : `${w}, ${(u?.count ?? D)(s, S)}`, A = o || c || s !== void 0, j = T[i];
+	return /* @__PURE__ */ y("div", {
+		ref: f,
+		role: "img",
+		"aria-label": k,
+		"data-compact": c ? "" : void 0,
+		className: e(a.root, "inline-flex items-center gap-0.5", d),
+		...p,
+		children: [
+			c ? /* @__PURE__ */ v("span", {
+				className: e(a.star, "inline-flex text-rating"),
+				children: /* @__PURE__ */ v(C, {
+					filled: !0,
+					className: e(a.icon, m)
+				})
+			}) : Array.from({ length: r }, (n, r) => {
+				let i = Math.round(Math.min(1, Math.max(0, t - r)) * 100);
+				if (i > 0 && i < 100) return /* @__PURE__ */ y("span", {
+					className: e(a.star, "relative inline-flex text-stroke-accessible"),
+					children: [/* @__PURE__ */ v(C, {
+						filled: !1,
+						className: e(a.icon, m)
+					}), /* @__PURE__ */ v("span", {
+						className: "absolute inset-y-0 start-0 flex overflow-hidden text-rating",
+						style: { width: `${i}%` },
+						children: /* @__PURE__ */ v(C, {
+							filled: !0,
+							className: e(a.icon, m, "shrink-0")
+						})
+					})]
+				}, r);
+				let o = i === 100;
+				return /* @__PURE__ */ v("span", {
+					className: e(a.star, "inline-flex", o ? "text-rating" : "text-stroke-accessible"),
+					children: /* @__PURE__ */ v(C, {
+						filled: o,
+						className: e(a.icon, m)
+					})
+				}, r);
+			}),
+			A && /* @__PURE__ */ v("span", {
+				className: e(a.value, "ms-1 font-semibold text-foreground", j),
+				children: b
+			}),
+			S !== void 0 && /* @__PURE__ */ y("span", {
+				className: e(a.count, "ms-1 text-muted-foreground", j),
+				children: [
+					"(",
+					S,
+					")"
+				]
+			})
+		]
+	});
+};
+k.displayName = "RatingDisplay";
+//#endregion
+export { w as Rating, k as RatingDisplay };
+
+//# sourceMappingURL=Rating.mjs.map

package/dist/components/input/Rating.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.mjs","names":["React","defaultStarLabel","value","sizeMap","targetPaddingMap","Star","filled","StarIcon","Rating","valueProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","rest","onChange","warnDeprecated","initialValue","defaultValue","setValue","useControllable","onValueChange","next","hovered","setHovered","prevDisabled","setPrevDisabled","disabled","displayValue","useRovingTabIndex","handleKeyDown","max","intent","getArrowIntent","getDirection","focusValue","rootRef","mergedRef","useMergedRefs","ref","containerProps","field","useFieldContext","fieldProps","useFieldControl","required","isRequired","defaultName","form","focusTabStop","starSize","size","starLabel","labels","cn","ratingClassNames","className","composeEventHandlers","onKeyDown","onFocus","onMouseLeave","starValue","i","key","getTabIndex","focusRing","HiddenInput","textSizeMap","defaultRatingLabel","formattedValue","defaultCountLabel","count","formattedCount","supportedLocale","locale","RatingDisplay","formatLocale","invalidLocale","warnOnce","ratingName","name","showText","showValue","compact","textSize","ratingDisplayClassNames","percent"],"sources":["../../../src/components/input/Rating.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ratingClassNames, ratingDisplayClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { getArrowIntent, getDirection } from '../../lib/direction';\nimport { StarIcon } from '../../lib/icons';\nimport { focusRing } from '../../lib/styles';\nimport type { Size } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\nimport { HiddenInput } from '../internal/HiddenInput';\n\n/**\n * The Rating's built-in star names, for localization. Each member is optional and falls back to\n * its English default.\n */\nexport interface RatingLabels {\n  /**\n   * Accessible name of the star that chooses `value` (1 to `max`).\n   * @default (value) => value === 1 ? '1 star' : `${value} stars`\n   */\n  star?: (value: number, max: number) => string;\n}\n\nconst defaultStarLabel = (value: number) => `${value} star${value !== 1 ? 's' : ''}`;\n\n/** Properties for the Rating component. */\nexport interface RatingProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /** Controlled rating value (`0` = no rating). */\n  value?: number;\n  /** Initial rating for uncontrolled usage (also the value a form reset restores).\n   * @default 0\n   */\n  defaultValue?: number;\n  /** Called with the new rating when it changes (not when the current star is chosen again). */\n  onValueChange?: (value: number) => void;\n  /**\n   * Called with the new rating, exactly like `onValueChange`: only when the rating changes (0.4\n   * also called it when the current star was clicked again, or a key was pressed at an end).\n   * @deprecated Use `onValueChange`.\n   */\n  onChange?: (value: number) => void;\n  /** Maximum number of stars.\n   * @default 5\n   */\n  max?: number;\n  /** Size of the star icons. Every size keeps a target of at least 24×24px.\n   * @default 'medium'\n   */\n  size?: Size;\n  /** Whether the rating is disabled and non-interactive.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Form field name. With a name, the chosen rating is submitted with the form (nothing while no\n   * star is chosen).\n   */\n  name?: string;\n  /** A star must be chosen before the form can be submitted (native validation). */\n  required?: boolean;\n  /** Id of the form the rating belongs to, when it is rendered outside that form. */\n  form?: string;\n  /**\n   * Names of the stars (\"1 star\", \"2 stars\", …), for localization. The group's own name is\n   * `aria-label` (default \"Rating\"). Unset members keep their English defaults.\n   */\n  labels?: RatingLabels;\n  /** Ref to the `role=\"radiogroup\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Built-in texts of RatingDisplay, for localization. */\nexport interface RatingDisplayLabels {\n  /**\n   * Accessible name. `formattedValue` is `value` formatted with `locale` (as shown).\n   * @default (value, max, formattedValue) => `Rating: ${formattedValue} out of ${max}`\n   */\n  rating?: (value: number, max: number, formattedValue: string) => string;\n  /**\n   * Count part of the name.\n   * @default (count, formatted) => count === 1 ? '1 rating' : `${formatted} ratings`\n   */\n  count?: (count: number, formattedCount: string) => string;\n}\n\n/** Properties for the RatingDisplay (read-only) component. */\nexport interface RatingDisplayProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Rating value to display. A fraction is drawn as a partly filled star (`4.6` fills 60% of the\n   * fifth star), so the stars show the value the accessible name reports.\n   */\n  value: number;\n  /** Maximum number of stars.\n   * @default 5\n   */\n  max?: number;\n  /** Size of the star icons (and of the value and count text).\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Shows the value as text after the stars, formatted with `locale` (up to one decimal).\n   * @default false\n   */\n  showValue?: boolean;\n  /**\n   * Number of ratings: shown as \"(1,160)\" after the value with the locale's digit grouping, and\n   * added to the accessible name (\"…, 1,160 ratings\").\n   */\n  count?: number;\n  /**\n   * One filled star followed by the value (and the count) instead of `max` stars. Implies\n   * `showValue`.\n   * @default false\n   */\n  compact?: boolean;\n  /**\n   * BCP 47 locale of the value and count formatting (runtime default when omitted; pass it when\n   * rendering on the server). A tag `Intl` rejects (the POSIX `de_DE`, a typo) falls back to the\n   * runtime default locale (development warning).\n   */\n  locale?: string;\n  /** Built-in texts, for localization. */\n  labels?: RatingDisplayLabels;\n  /** Ref to the root element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst sizeMap: Record<Size, string> = {\n  'extra-small': 'h-3 w-3',\n  small: 'h-4 w-4',\n  medium: 'h-5 w-5',\n  large: 'h-6 w-6',\n  'extra-large': 'h-8 w-8',\n};\n\n/** Padding that gives every interactive star a target of at least 24×24px (WCAG 2.5.8). */\nconst targetPaddingMap: Record<Size, string> = {\n  'extra-small': 'p-1.5', // 12px icon + 12px\n  small: 'p-1', // 16px icon + 8px\n  medium: 'p-0.5', // 20px icon + 4px\n  large: 'p-0.5',\n  'extra-large': 'p-0.5',\n};\n\n/** A filled star, or an outlined one (the outline keeps a 3:1 non-text contrast). */\nfunction Star({ filled, className }: { filled: boolean; className: string }) {\n  return filled ? (\n    <StarIcon className={className} />\n  ) : (\n    <StarIcon className={className} fill=\"none\" stroke=\"currentColor\" strokeWidth={1.5} />\n  );\n}\n\n/**\n * A star rating input (`role=\"radiogroup\"` of `role=\"radio\"` stars).\n *\n * - One tab stop (the chosen star, else the first). Keys choose relative to the current rating and\n *   move focus to the chosen star, as in 0.4: Right/Up one star more, Left/Down one fewer\n *   (Left/Right mirrored under `dir=\"rtl\"`), Home/End the first/last star. From an empty rating,\n *   Right/Up/Home choose 1 star. Keys at the ends (and Left/Down while empty) emit nothing.\n * - The keyboard cannot clear a rating: Left/Down stop at 1 star (APG radio group; 0.4 went down\n *   to 0). Only a controlled `value={0}` (or a form reset while `defaultValue` is 0) clears it.\n * - `onValueChange` (and the deprecated `onChange` alias) fire only when the rating changes, so\n *   choosing the current star again calls neither.\n * - Hovering previews a value; the preview never outlives the hover or a disabled state.\n * - Inside a `Field` it is named by the Field label (instead of the default \"Rating\") and\n *   described by its hint and error. The stars are named \"1 star\", \"2 stars\", …; `labels`\n *   localizes these names.\n * - With `name` (or `required`) it takes part in native forms; a form reset restores\n *   `defaultValue`.\n */\nexport const Rating = ({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onChange,\n  max = 5,\n  size = 'medium',\n  disabled = false,\n  name,\n  required,\n  form,\n  labels,\n  className,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  onKeyDown,\n  onFocus,\n  onMouseLeave,\n  ref,\n  ...rest\n}: RatingProps) => {\n  if (onChange !== undefined) warnDeprecated('Rating', 'onChange', 'onValueChange');\n  const initialValue = defaultValue ?? 0;\n  const [value, setValue] = useControllable(valueProp, initialValue, (next: number) => {\n    onValueChange?.(next);\n    onChange?.(next);\n  });\n\n  const [hovered, setHovered] = React.useState(0);\n  // A hover preview must not survive the rating becoming disabled (adjust state during render).\n  const [prevDisabled, setPrevDisabled] = React.useState(disabled);\n  if (prevDisabled !== disabled) {\n    setPrevDisabled(disabled);\n    if (disabled) setHovered(0);\n  }\n  const displayValue = disabled ? value : hovered || value;\n\n  // Roving tab stop (the chosen star, else the first) and focus moves; the keys are handled below.\n  const { containerProps, getTabIndex, focusValue } = useRovingTabIndex({\n    activeValue: value > 0 ? String(value) : null,\n  });\n\n  // Keys count from the current rating, not from the focused star (0.4 semantics): from an empty\n  // rating, Tab lands on the unchosen first star and Right/Up/Home choose it. Never wraps.\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return;\n    let next: number;\n    if (e.key === 'Home') next = 1;\n    else if (e.key === 'End') next = max;\n    else if (e.key === 'ArrowUp') next = value + 1;\n    else if (e.key === 'ArrowDown') next = value - 1;\n    else {\n      const intent = getArrowIntent(e.key, {\n        orientation: 'horizontal',\n        dir: getDirection(e.currentTarget),\n      });\n      if (!intent) return;\n      next = intent === 'next' ? value + 1 : value - 1;\n    }\n    e.preventDefault();\n    next = Math.min(next, max);\n    // The ends are no-ops (nothing is emitted, focus stays), and Left/Down never clear to 0.\n    if (disabled || next < 1 || next === value) return;\n    focusValue(String(next));\n    setValue(next);\n  };\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, containerProps.ref, rootRef);\n\n  const field = useFieldContext();\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': ariaInvalid,\n      // An explicit `required={false}` wins over a required Field, so aria-required always\n      // matches the native validation below (`isRequired`).\n      'aria-required': ariaRequired ?? required,\n    },\n    { labelable: false },\n  );\n  const isRequired = required ?? field?.required ?? false;\n  const defaultName =\n    fieldProps['aria-label'] === undefined && fieldProps['aria-labelledby'] === undefined\n      ? 'Rating'\n      : undefined;\n\n  useFormReset(rootRef, () => setValue(initialValue), form);\n\n  const focusTabStop = () => {\n    rootRef.current?.querySelector<HTMLElement>('[data-roving-value][tabindex=\"0\"]')?.focus();\n  };\n\n  const starSize = sizeMap[size];\n  const starLabel = labels?.star ?? defaultStarLabel;\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={defaultName}\n      {...fieldProps}\n      aria-disabled={disabled || undefined}\n      className={cn(\n        ratingClassNames.root,\n        'relative inline-flex items-center gap-0.5',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...rest}\n      ref={mergedRef}\n      data-roving-container=\"\"\n      onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n      onFocus={composeEventHandlers(onFocus, containerProps.onFocus, {\n        checkDefaultPrevented: false,\n      })}\n      onMouseLeave={composeEventHandlers(onMouseLeave, () => setHovered(0), {\n        checkDefaultPrevented: false,\n      })}\n    >\n      {Array.from({ length: max }, (_, i) => {\n        const starValue = i + 1;\n        const key = String(starValue);\n        const filled = displayValue >= starValue;\n        return (\n          <button\n            key={key}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={value === starValue}\n            aria-label={starLabel(starValue, max)}\n            data-roving-value={key}\n            tabIndex={disabled ? -1 : getTabIndex(key)}\n            disabled={disabled}\n            className={cn(\n              ratingClassNames.star,\n              'inline-flex cursor-pointer rounded border-0 bg-transparent transition-colors motion-reduce:transition-none disabled:cursor-not-allowed',\n              targetPaddingMap[size],\n              focusRing,\n              filled ? 'text-rating' : 'text-stroke-accessible',\n            )}\n            onClick={() => {\n              // Choosing the current star again is a no-op for both callbacks (useControllable).\n              if (!disabled) setValue(starValue);\n            }}\n            onMouseEnter={() => {\n              if (!disabled) setHovered(starValue);\n            }}\n          >\n            <Star filled={filled} className={cn(ratingClassNames.icon, starSize)} />\n          </button>\n        );\n      })}\n      <HiddenInput\n        type=\"radio\"\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={value > 0 ? String(value) : ''}\n        required={isRequired}\n        onInvalid={focusTabStop}\n      />\n    </div>\n  );\n};\nRating.displayName = 'Rating';\n\n/** Text size of the value and the count, following the star size. */\nconst textSizeMap: Record<Size, string> = {\n  'extra-small': 'text-caption-1',\n  small: 'text-caption-1',\n  medium: 'text-body-1',\n  large: 'text-body-2',\n  'extra-large': 'text-body-2',\n};\n\nconst defaultRatingLabel = (_value: number, max: number, formattedValue: string) =>\n  `Rating: ${formattedValue} out of ${max}`;\nconst defaultCountLabel = (count: number, formattedCount: string) =>\n  count === 1 ? '1 rating' : `${formattedCount} ratings`;\n\n/** `locale` when `Intl` accepts it as a language tag, else `undefined` (the runtime default). */\nfunction supportedLocale(locale: string | undefined): string | undefined {\n  if (locale === undefined) return undefined;\n  try {\n    Intl.getCanonicalLocales(locale);\n    return locale;\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * A read-only star rating (`role=\"img\"` named \"Rating: <value> out of <max>\"). A fractional value\n * is drawn with a partly filled star, so the stars and the name show the same value.\n *\n * - `showValue` adds the value as text after the stars, `count` the number of ratings (\"(1,160)\",\n *   also added to the name), and `compact` shows one filled star with the value instead of `max`\n *   stars (the root carries `data-compact`). Without them only the stars show.\n * - The value (up to one decimal) and the count are formatted with `locale`, in the text and in\n *   the name; `labels` localizes the name. Pass `locale` when rendering on the server.\n */\nexport const RatingDisplay = ({\n  value,\n  max = 5,\n  size = 'medium',\n  showValue = false,\n  count,\n  compact = false,\n  locale,\n  labels,\n  className,\n  ref,\n  ...rest\n}: RatingDisplayProps) => {\n  const starSize = sizeMap[size];\n  const formatLocale = supportedLocale(locale);\n  const invalidLocale = locale !== undefined && formatLocale === undefined;\n  React.useEffect(() => {\n    if (invalidLocale) {\n      warnOnce(\n        `RatingDisplay:invalid-locale:${locale}`,\n        `RatingDisplay: \\`locale\\` \"${locale}\" is not a valid BCP 47 language tag (use hyphens, as ` +\n          'in \"en-US\"). The runtime default locale formats the value instead, so the server and ' +\n          'the browser may render different text.',\n      );\n    }\n  }, [invalidLocale, locale]);\n\n  const formattedValue = new Intl.NumberFormat(formatLocale, { maximumFractionDigits: 1 }).format(\n    value,\n  );\n  const formattedCount =\n    count === undefined ? undefined : new Intl.NumberFormat(formatLocale).format(count);\n  const ratingName = (labels?.rating ?? defaultRatingLabel)(value, max, formattedValue);\n  const name =\n    count === undefined || formattedCount === undefined\n      ? ratingName\n      : `${ratingName}, ${(labels?.count ?? defaultCountLabel)(count, formattedCount)}`;\n  const showText = showValue || compact || count !== undefined;\n  const textSize = textSizeMap[size];\n\n  return (\n    <div\n      ref={ref}\n      role=\"img\"\n      aria-label={name}\n      data-compact={compact ? '' : undefined}\n      className={cn(ratingDisplayClassNames.root, 'inline-flex items-center gap-0.5', className)}\n      {...rest}\n    >\n      {compact ? (\n        <span className={cn(ratingDisplayClassNames.star, 'inline-flex text-rating')}>\n          <Star filled className={cn(ratingDisplayClassNames.icon, starSize)} />\n        </span>\n      ) : (\n        Array.from({ length: max }, (_, i) => {\n          // The share of this star that the value covers, in whole percent.\n          const percent = Math.round(Math.min(1, Math.max(0, value - i)) * 100);\n          if (percent > 0 && percent < 100) {\n            // The outline of an empty star, with the filled star clipped to the fraction over it\n            // from the inline start (the reading direction of the stars, also under RTL).\n            return (\n              <span\n                key={i}\n                className={cn(\n                  ratingDisplayClassNames.star,\n                  'relative inline-flex text-stroke-accessible',\n                )}\n              >\n                <Star filled={false} className={cn(ratingDisplayClassNames.icon, starSize)} />\n                <span\n                  className=\"absolute inset-y-0 start-0 flex overflow-hidden text-rating\"\n                  style={{ width: `${percent}%` }}\n                >\n                  <Star filled className={cn(ratingDisplayClassNames.icon, starSize, 'shrink-0')} />\n                </span>\n              </span>\n            );\n          }\n          const filled = percent === 100;\n          return (\n            <span\n              key={i}\n              className={cn(\n                ratingDisplayClassNames.star,\n                'inline-flex',\n                filled ? 'text-rating' : 'text-stroke-accessible',\n              )}\n            >\n              <Star filled={filled} className={cn(ratingDisplayClassNames.icon, starSize)} />\n            </span>\n          );\n        })\n      )}\n      {showText && (\n        <span\n          className={cn(\n            ratingDisplayClassNames.value,\n            'ms-1 font-semibold text-foreground',\n            textSize,\n          )}\n        >\n          {formattedValue}\n        </span>\n      )}\n      {formattedCount !== undefined && (\n        <span className={cn(ratingDisplayClassNames.count, 'ms-1 text-muted-foreground', textSize)}>\n          ({formattedCount})\n        </span>\n      )}\n    </div>\n  );\n};\nRatingDisplay.displayName = 'RatingDisplay';\n"],"mappings":"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"}

package/dist/components/input/SearchBox.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/slot.cjs"),a=require("../../lib/composeEventHandlers.cjs"),o=require("../../lib/classNames.cjs"),s=require("../../hooks/useControllable.cjs"),c=require("../../hooks/useMergedRefs.cjs"),l=require("../../hooks/useFieldControl.cjs"),u=require("../../lib/styles.cjs"),d=require("../button/Button.cjs"),f=require("../button/Button.slots.cjs"),p=require("../../lib/icons.cjs"),m=require("../../lib/mergeProps.cjs"),h=require("./Input.cjs"),g=require("../../hooks/useFormReset.cjs"),_=require("../../lib/labelInName.cjs");let v=require("react");v=e.__toESM(v,1);let y=require("react/jsx-runtime");var b=new Set([`type`,`disabled`,`form`,`formAction`,`formEncType`,`formMethod`,`formNoValidate`,`formTarget`,`name`,`value`,`popoverTarget`,`popoverTargetAction`]),x=/^on[A-Z]/,S=new Set([`aria-label`,`aria-labelledby`,`title`]),C=`Clear search`,w=()=>{},T=`a[href], button, input, select, textarea, [tabindex], [contenteditable]:not([contenteditable="false"])`,E={kind:`default`,buttonProps:{},content:null,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1};function D(e){return e===`button`||e===d.Button}function O(e,n,r){let a=i.slotRendersContent(r),s=i.materialiseSlotContent(r),c=_.hasTextLabel(s);if(e===d.Button){let e={};for(let[t,r]of Object.entries(n))t!==`children`&&!f.BUTTON_OWN_PROP_KEYS.has(t)&&(e[t]=r);let r=i.renderSlot(n.icon,`span`,t.cn(o.searchBoxClassNames.dismissIcon,`inline-flex`),{"aria-hidden":!0});return{buttonProps:e,content:r||a?f.placeButtonIcon(r,s,n.iconPosition):null,contentMayName:!0,literalTextLabel:c,disabledFocusable:!!n.disabledFocusable}}let{as:l,children:u,...p}=n;return{buttonProps:p,content:a?s:null,contentMayName:!0,literalTextLabel:c,disabledFocusable:!1}}function k(e){let r=e;if(n.isElementOfType(r,`button`,d.Button)){let e=r.props.children;return{kind:`element`,...O(n.getElementType(r),r.props,e)}}let a=i.resolveSlot(e,`span`);if(!a)return E;let{Component:s,props:c,children:l}=a;if(D(s))return{kind:`button-object`,...O(s,c,l)};let u={},f={},m=!1;for(let[e,t]of Object.entries(c))t!==void 0&&(b.has(e)||x.test(e)?(u[e]=t,m=!0):S.has(e)?u[e]=t:f[e]=t);let h=i.slotRendersContent(l),g=i.slotWrapsDefaultContent(s,{...f,children:l});if(g&&Object.keys(u).length===0&&Object.keys(f).length===0)return E;let _=g?(0,y.jsx)(p.DismissIcon,{}):h?l:void 0,C={"aria-hidden":!0,...f,className:t.cn(o.searchBoxClassNames.dismissIcon,f.className)},w=_===void 0?v.createElement(s,C):v.createElement(s,C,_);return{kind:m?`button-object`:`content`,buttonProps:u,content:w,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1}}var A=({value:e,defaultValue:n=``,onValueChange:d,onChange:b,onClear:x,placeholder:E=`Search`,disabled:D,contentBefore:O,contentAfter:A,dismiss:ee,className:te,ref:ne,controlRef:re,id:ie,"aria-label":ae,"aria-labelledby":oe,"aria-describedby":se,"aria-invalid":ce,"aria-required":le,"aria-errormessage":ue,"aria-details":de,required:fe,name:pe,form:j,readOnly:M,autoComplete:N,autoFocus:P,autoCapitalize:F,autoCorrect:I,inputMode:L,enterKeyHint:R,spellCheck:z,maxLength:B,minLength:me,pattern:he,tabIndex:ge,onFocus:_e,onBlur:ve,onKeyDown:ye,onKeyUp:be,onMouseDown:xe,hidden:Se,...Ce})=>{b!==void 0&&r.warnDeprecated(`SearchBox`,`onChange`,`onValueChange`);let[V,H]=s.useControllable(e,n,e=>{d?.(e),b?.(e)}),U=v.useRef(null),we=c.useMergedRefs(U,re);g.useFormReset(U,()=>H(n),j);let W=l.useFieldControl({id:ie,"aria-label":ae,"aria-labelledby":oe,"aria-describedby":se,"aria-invalid":ce,"aria-required":le,required:fe},{nativeRequired:!0}),Te=h.isInvalidLook(!1,W[`aria-invalid`]),G=k(ee),K=G.kind;v.useEffect(()=>{K===`element`?r.warnOnce(`SearchBox:dismiss-button-element`,"SearchBox: `dismiss` received a button element; its props were merged into the built-in clear button (buttons cannot be nested). Pass icon content instead, e.g. `dismiss={<MyIcon />}`."):K===`button-object`&&r.warnOnce(`SearchBox:dismiss-button-object`,'SearchBox: `dismiss` with button props (`as: "button"`, `onClick`, `type`, …) is deprecated and will be removed in 1.0; the props were merged into the built-in clear button. Pass icon content instead, e.g. `dismiss={<MyIcon />}`.')},[K]);let Ee=()=>{H(``),x?.(),U.current?.focus()},De=e=>{e.key!==`Escape`||e.nativeEvent.isComposing||!V||M||D||(e.preventDefault(),H(``),x?.())},Oe=e=>{let t=U.current,n=e.currentTarget,r=e.target;if(!t||D||e.button!==0||r===t||!(r instanceof Element)||!n.contains(r))return;let i=r.closest(T);i&&n.contains(i)||(e.preventDefault(),t.focus())},{onClick:ke,ref:Ae,...q}=G.buttonProps,J=Object.keys(q).some(e=>S.has(e)&&q[e]!=null),Y=G.contentMayName&&!J,X=G.literalTextLabel,[Z,je]=v.useState(null),Q=v.useCallback(e=>Z?_.observeTextLabel(Z,e):w,[Z]),Me=v.useSyncExternalStore(Q,()=>Z?_.hasRenderedTextLabel(Z):X,()=>X),Ne=Y&&Me,Pe=c.useMergedRefs(Ae,Y?je:void 0),$=m.mergeProps({type:`button`,disabled:D,"aria-label":J||Ne?void 0:C,className:t.cn(o.searchBoxClassNames.dismissButton,`me-1 flex h-6 w-6 shrink-0 items-center justify-center rounded bg-transparent p-0 text-muted-foreground`,`not-disabled:not-aria-disabled:hover:text-foreground`,u.focusRing,`disabled:cursor-not-allowed`,f.mergedAriaDisabledClasses)},q),Fe=$.dangerouslySetInnerHTML==null?K===`content`?G.content:G.content??(0,y.jsx)(p.DismissIcon,{className:o.searchBoxClassNames.dismissIcon}):void 0,Ie=i.slotRendersContent(O),Le=i.slotRendersContent(A);return(0,y.jsxs)(`div`,{ref:ne,className:t.cn(o.searchBoxClassNames.root,`relative inline-flex h-8 w-full items-center rounded border border-input border-b-stroke-accessible bg-background text-body-1 text-foreground`,u.inputFocusWithin,Te&&`border-destructive focus-within:border-b-destructive`,D&&`cursor-not-allowed opacity-50 has-focus-visible:opacity-100`,te),hidden:Se,...Ce,onMouseDown:e=>a.composeEventHandlers(xe,Oe)(e),children:[(0,y.jsx)(`span`,{className:t.cn(o.searchBoxClassNames.contentBefore,`flex shrink-0 items-center ps-2`),children:Ie?i.renderSlot(O,`span`,`shrink-0`):(0,y.jsx)(p.SearchIcon,{className:`text-muted-foreground`})}),(0,y.jsx)(`input`,{ref:we,type:`search`,value:V,onChange:e=>H(e.target.value),placeholder:E,disabled:D,className:t.cn(o.searchBoxClassNames.input,`h-full min-w-0 flex-1 appearance-none border-none bg-transparent px-2 text-body-1 text-foreground`,`placeholder:text-muted-foreground`,`focus:outline-hidden`,`disabled:cursor-not-allowed`,`[&::-webkit-search-cancel-button]:hidden`),"aria-errormessage":ue,"aria-details":de,name:pe,form:j,readOnly:M,autoComplete:N,autoFocus:P,autoCapitalize:F,autoCorrect:I,inputMode:L,enterKeyHint:R,spellCheck:z,maxLength:B,minLength:me,pattern:he,tabIndex:ge,onFocus:_e,onBlur:ve,onKeyDown:a.composeEventHandlers(ye,De),onKeyUp:be,...W}),Le&&(0,y.jsx)(`span`,{className:t.cn(o.searchBoxClassNames.contentAfter,`flex shrink-0 items-center pe-2`),children:i.renderSlot(A,`span`,`shrink-0`)}),V&&!M?(0,y.jsx)(`button`,{...$,ref:Pe,type:$.type??`button`,disabled:D||$.disabled,onClick:e=>a.composeEventHandlers(ke,Ee)(e),...G.disabledFocusable?f.MERGED_DISABLED_FOCUSABLE_PROPS:void 0,children:Fe}):null]})};A.displayName=`SearchBox`,exports.SearchBox=A;
+//# sourceMappingURL=SearchBox.cjs.map

package/dist/components/input/SearchBox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBox.cjs","names":["Button","slotRendersContent","materialiseSlotContent","hasTextLabel","BUTTON_OWN_PROP_KEYS","renderSlot","cn","searchBoxClassNames","placeButtonIcon","isElementOfType","getElementType","resolveSlot","slotWrapsDefaultContent","DismissIcon","React","useControllable","useMergedRefs","useFieldControl","isInvalidLook","observeTextLabel","hasRenderedTextLabel","mergeProps","focusRing","mergedAriaDisabledClasses","inputFocusWithin","composeEventHandlers","SearchIcon","MERGED_DISABLED_FOCUSABLE_PROPS","require_runtime","require_cn","require_children","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_useControllable","require_useMergedRefs","require_useFieldControl","require_styles","require_Button","require_Button_slots","require_icons","require_mergeProps","require_Input","require_useFormReset","require_labelInName","react","react_jsx_runtime","BUTTON_ONLY_KEYS","HANDLER_KEY","NAMING_KEYS","DEFAULT_CLEAR_LABEL","noop","INTERACTIVE_CONTENT","DEFAULT_DISMISS","isButtonType","type","splitButtonLike","hasChildren","children","content","literalTextLabel","buttonProps","key","value","props","iconNode","_children","resolveDismiss","node","dismiss","resolved","Component","contentProps","hasButtonProps","empty","contentChildren","iconProps","SearchBox","controlledValue","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","rest","onChange","setValue","defaultValue","onValueChange","next","inputRef","mergedInputRef","controlRef","form","fieldProps","invalidLook","dismissParts","dismissKind","handleClear","onClear","handleKeyDown","event","readOnly","disabled","handleRootMouseDown","input","root","target","control","slotOnClick","slotRef","slotButtonProps","hasOwnName","checksContent","labelTarget","setLabelTarget","subscribeToContent","contentHasTextLabel","namedByContent","clearRef","clearButtonProps","clearContent","hasBefore","contentBefore","hasAfter","contentAfter","className","onMouseDown","onKeyDown"],"sources":["../../../src/components/input/SearchBox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getElementType, isElementOfType } from '../../lib/children';\nimport { searchBoxClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { DismissIcon, SearchIcon } from '../../lib/icons';\nimport { hasRenderedTextLabel, hasTextLabel, observeTextLabel } from '../../lib/labelInName';\nimport { mergeProps } from '../../lib/mergeProps';\nimport {\n  materialiseSlotContent,\n  renderSlot,\n  resolveSlot,\n  slotRendersContent,\n  slotWrapsDefaultContent,\n} from '../../lib/slot';\nimport { focusRing, inputFocusWithin, inputInvalidWithin } from '../../lib/styles';\nimport type { Slot, SlotObject } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { Button } from '../button/Button';\nimport {\n  BUTTON_OWN_PROP_KEYS,\n  MERGED_DISABLED_FOCUSABLE_PROPS,\n  mergedAriaDisabledClasses,\n  placeButtonIcon,\n} from '../button/Button.slots';\nimport { isInvalidLook } from './Input';\n\n/**\n * Props that SearchBox routes to its `<input>` (C-ROUTING): the id, the ARIA naming/validation\n * attributes, native text-input attributes and the focus/keyboard handlers.\n */\nexport type SearchBoxInputProps = Pick<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  | 'id'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-describedby'\n  | 'aria-invalid'\n  | 'aria-required'\n  | 'aria-errormessage'\n  | 'aria-details'\n  | 'name'\n  | 'form'\n  | 'required'\n  | 'readOnly'\n  | 'autoComplete'\n  | 'autoFocus'\n  | 'autoCapitalize'\n  | 'autoCorrect'\n  | 'inputMode'\n  | 'enterKeyHint'\n  | 'spellCheck'\n  | 'maxLength'\n  | 'minLength'\n  | 'pattern'\n  | 'tabIndex'\n  | 'onFocus'\n  | 'onBlur'\n  | 'onKeyDown'\n  | 'onKeyUp'\n>;\n\n/** Properties for the SearchBox component. */\nexport interface SearchBoxProps\n  extends\n    Omit<\n      React.HTMLAttributes<HTMLDivElement>,\n      'onChange' | 'defaultValue' | keyof SearchBoxInputProps\n    >,\n    SearchBoxInputProps {\n  /** Controlled search text value. */\n  value?: string;\n  /** Initial search text for uncontrolled usage (also what a form reset restores).\n   * @default ''\n   */\n  defaultValue?: string;\n  /** Called with the new search text when it changes (typing or clearing). */\n  onValueChange?: (value: string) => void;\n  /**\n   * Called with the new search text when it changes.\n   * @deprecated Use `onValueChange`. (`onChange` is reserved for native change events.)\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Called when the user clears the search: with the clear button, or with Escape while there is\n   * text (after `onValueChange('')`).\n   */\n  onClear?: () => void;\n  /** Placeholder text shown when the input is empty.\n   * @default 'Search'\n   */\n  placeholder?: string;\n  /** Whether the search box is disabled and non-interactive. */\n  disabled?: boolean;\n  /**\n   * Slot rendered before the text (replaces the default search icon). It takes the room it needs;\n   * the text starts after it. A value that renders nothing (`null`, `false`, `''`, an empty array\n   * or Fragment) keeps the default icon.\n   */\n  contentBefore?: Slot<'span'>;\n  /**\n   * Slot rendered after the text, before the clear button. It takes the room it needs; the text\n   * ends before it. A value that renders nothing (`false`, `''`, an empty array or Fragment) is no\n   * slot: nothing takes room.\n   */\n  contentAfter?: Slot<'span'>;\n  /**\n   * Content of the clear button (replaces the default dismiss icon). It always renders **inside**\n   * the built-in `<button type=\"button\" aria-label=\"Clear search\">`, which clears the value, calls\n   * `onClear` and moves focus back to the input. The slot cannot hide the clear button or leave\n   * it empty: content that renders nothing (`null`, `false`, `true`, `''`, or an array, `Set`,\n   * generator or Fragment of only those) keeps the default icon, and a slot object without\n   * children (`{ className: 'text-error' }`) wraps the default icon in its element (not when it\n   * brings markup of its own through `dangerouslySetInnerHTML`, or is a void or component element).\n   *\n   * A `<button>` element or a Wave `Button` passed here is not nested: its props are merged into\n   * the built-in button (its `onClick` runs first; `preventDefault()` cancels the clear) and its\n   * children become the content, with a development warning. A Wave `Button`'s own props are not\n   * attributes: its `icon` becomes decorative content before its children (after them with\n   * `iconPosition=\"after\"`), `disabledFocusable` makes the clear button unavailable but focusable\n   * as on the Button (nothing is cleared), and `appearance` and `size` are ignored. The 0.4\n   * button-object form (`{ as: 'button', onClick, … }` or an object with button props) is\n   * **deprecated**: its button props are merged the same way. Pass icon content instead.\n   *\n   * Name (WCAG 2.5.3 Label in Name): content is decorative (`aria-hidden`), so the button keeps\n   * the name \"Clear search\". An `aria-label`, `aria-labelledby` or `title` on the merged button or\n   * on a slot object names the button instead (`{ children: 'Reset', 'aria-label': 'Reset' }`).\n   * The children of a merged `<button>`/`Button` (or of `{ as: 'button' }`) are rendered as is:\n   * when they render a text label (at least two letters or digits outside `aria-hidden`/`hidden`\n   * content, text from components such as translations included), that text names the button;\n   * an icon or a lone character (`X`, `×`) keeps \"Clear search\". Text hidden only with CSS still\n   * counts as the label, so give a button with a responsive label an explicit `aria-label`.\n   */\n  dismiss?: Slot<'span'> | SlotObject<'button'>;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n  /** Ref to the `<input type=\"search\">` (the focusable control). */\n  controlRef?: React.Ref<HTMLInputElement>;\n}\n\ntype UnknownProps = Record<string, unknown>;\n\n/** Attributes that only make sense on the clear `<button>` itself (merged onto it). */\nconst BUTTON_ONLY_KEYS: ReadonlySet<string> = new Set([\n  'type',\n  'disabled',\n  'form',\n  'formAction',\n  'formEncType',\n  'formMethod',\n  'formNoValidate',\n  'formTarget',\n  'name',\n  'value',\n  'popoverTarget',\n  'popoverTargetAction',\n]);\nconst HANDLER_KEY = /^on[A-Z]/;\n\n/**\n * Attributes that name the clear button (C-SLOTS naming). On a merged button or a slot object they\n * go to the clear button (slot content is `aria-hidden`), and any of them replaces the default\n * `aria-label`.\n */\nconst NAMING_KEYS: ReadonlySet<string> = new Set(['aria-label', 'aria-labelledby', 'title']);\n\n/** Default name of the clear button. */\nconst DEFAULT_CLEAR_LABEL = 'Clear search';\n\ninterface DismissParts {\n  /**\n   * `default`: no slot (default icon); `content`: icon content; `element`: a `<button>`/`Button`\n   * element; `button-object`: the deprecated button-object form.\n   */\n  kind: 'default' | 'content' | 'element' | 'button-object';\n  /** Props merged onto the built-in clear button. */\n  buttonProps: UnknownProps;\n  /** Content of the clear button (`null` = the default icon, except for `content`). */\n  content: React.ReactNode;\n  /**\n   * `true` when the content is rendered as is (a merged `<button>`/`Button` or `{ as: 'button' }`),\n   * so a text label in it names the button (C-SLOTS naming, WCAG 2.5.3); `false` when the content\n   * is decorative (`aria-hidden`).\n   */\n  contentMayName: boolean;\n  /**\n   * Whether the literal children contain a text label: the name for the server render and the\n   * first client render. After mount the rendered button's text decides.\n   */\n  literalTextLabel: boolean;\n  /**\n   * Whether a merged Wave `Button` set `disabledFocusable`: the clear button is then unavailable\n   * but focusable, as the Button would be.\n   */\n  disabledFocusable: boolean;\n}\n\nconst noop = () => {};\n\n/**\n * Elements inside the field that keep a press to themselves: a control in a slot, the clear\n * button.\n */\nconst INTERACTIVE_CONTENT =\n  'a[href], button, input, select, textarea, [tabindex], [contenteditable]:not([contenteditable=\"false\"])';\n\nconst DEFAULT_DISMISS: DismissParts = {\n  kind: 'default',\n  buttonProps: {},\n  content: null,\n  contentMayName: false,\n  literalTextLabel: false,\n  disabledFocusable: false,\n};\n\nfunction isButtonType(type: unknown): boolean {\n  return type === 'button' || type === Button;\n}\n\n/**\n * Splits the props of a button-like element or object into button props and content. The content\n * is rendered as is, so a text label in it names the button (C-SLOTS naming). Content that renders\n * nothing is `null` (the default icon); a generator is read once and rendered as its items.\n */\nfunction splitButtonLike(type: unknown, props: UnknownProps, children: React.ReactNode) {\n  const hasChildren = slotRendersContent(children);\n  const content = materialiseSlotContent(children);\n  const literalTextLabel = hasTextLabel(content);\n  if (type === Button) {\n    // Wave Button's own props do not belong on a native <button>: its icon becomes content (after\n    // the children with `iconPosition=\"after\"`) and `disabledFocusable` is applied by the caller.\n    const buttonProps: UnknownProps = {};\n    for (const [key, value] of Object.entries(props)) {\n      if (key !== 'children' && !BUTTON_OWN_PROP_KEYS.has(key)) buttonProps[key] = value;\n    }\n    const iconNode = renderSlot(\n      props.icon as Slot<'span'>,\n      'span',\n      cn(searchBoxClassNames.dismissIcon, 'inline-flex'),\n      { 'aria-hidden': true },\n    );\n    const buttonContent =\n      iconNode || hasChildren ? placeButtonIcon(iconNode, content, props.iconPosition) : null;\n    return {\n      buttonProps,\n      content: buttonContent,\n      contentMayName: true,\n      literalTextLabel,\n      disabledFocusable: Boolean(props.disabledFocusable),\n    };\n  }\n  const { as, children: _children, ...buttonProps } = props;\n  // `null` content falls back to the default icon.\n  return {\n    buttonProps,\n    content: hasChildren ? content : null,\n    contentMayName: true,\n    literalTextLabel,\n    disabledFocusable: false,\n  };\n}\n\n/**\n * Splits `dismiss` into the props merged onto the built-in clear button and its content. Content\n * that renders nothing (`slotRendersContent`) never leaves the button empty: without other props\n * it is the default icon; a slot object with its own content props (`className`, `style`, …)\n * wraps the default icon in its element.\n */\nfunction resolveDismiss(dismiss: SearchBoxProps['dismiss']): DismissParts {\n  // The type is unwrapped (C-COMPOUND): a Button written in a Server Component arrives as a lazy\n  // client reference, and must be merged like a plain one rather than nested inside the clear\n  // button. A slot object is never an element, so the check can take any slot value as a node.\n  const node = dismiss as React.ReactNode;\n  if (isElementOfType<UnknownProps>(node, 'button', Button)) {\n    const children = node.props.children as React.ReactNode;\n    return {\n      kind: 'element',\n      ...splitButtonLike(getElementType(node), node.props, children),\n    };\n  }\n  // Resolved once: a generator is materialised (and cached) by resolveSlot, so it can be checked\n  // for emptiness and rendered without being consumed twice.\n  const resolved = resolveSlot(dismiss as Slot<'span'>, 'span');\n  if (!resolved) return DEFAULT_DISMISS;\n  const { Component, props, children } = resolved;\n  if (isButtonType(Component)) {\n    return { kind: 'button-object', ...splitButtonLike(Component, props, children) };\n  }\n  const buttonProps: UnknownProps = {};\n  const contentProps: UnknownProps = {};\n  let hasButtonProps = false;\n  for (const [key, value] of Object.entries(props)) {\n    // resolveSlot sets `className: undefined` when there are no classes.\n    if (value === undefined) continue;\n    if (BUTTON_ONLY_KEYS.has(key) || HANDLER_KEY.test(key)) {\n      buttonProps[key] = value;\n      hasButtonProps = true;\n    } else if (NAMING_KEYS.has(key)) {\n      // The content is aria-hidden, so a naming attribute names the clear button instead (not the\n      // deprecated button-object form).\n      buttonProps[key] = value;\n    } else {\n      contentProps[key] = value;\n    }\n  }\n  // A void (`img`), component (`{ as: MyIcon }`) or markup (`dangerouslySetInnerHTML`) slot\n  // renders content of its own.\n  const hasChildren = slotRendersContent(children);\n  const empty = slotWrapsDefaultContent(Component, { ...contentProps, children });\n  if (empty && Object.keys(buttonProps).length === 0 && Object.keys(contentProps).length === 0) {\n    return DEFAULT_DISMISS;\n  }\n  // A button object without content (`{ onClick }`, `{ type: 'button' }`) or a content object\n  // without children (`{ className }`) keeps the default icon inside the object's own element (its\n  // className/style/attributes still apply). Markup of its own takes no children at all.\n  const contentChildren = empty ? <DismissIcon /> : hasChildren ? children : undefined;\n  // The element the slot renders carries the dismissIcon part class, before the slot's own.\n  const iconProps = {\n    'aria-hidden': true,\n    ...contentProps,\n    className: cn(searchBoxClassNames.dismissIcon, contentProps.className as string | undefined),\n  };\n  const content =\n    contentChildren === undefined\n      ? React.createElement(Component, iconProps)\n      : React.createElement(Component, iconProps, contentChildren);\n  return {\n    kind: hasButtonProps ? 'button-object' : 'content',\n    buttonProps,\n    content,\n    contentMayName: false,\n    literalTextLabel: false,\n    disabledFocusable: false,\n  };\n}\n\n/**\n * A search input with a leading search icon and a clear button that appears while there is text\n * (not while `readOnly`).\n *\n * - **Layout**: the root `<div>` draws the field (its outline, focus and invalid look). The icon\n *   (or `contentBefore`), the text, `contentAfter` and the clear button sit side by side in it, so\n *   no slot covers the text. Pressing the field outside a control of its own focuses the input.\n * - **Clearing**: the clear button clears the text and moves focus back to the input. Escape\n *   clears the text too while there is any, and is then consumed, so an enclosing Dialog, Drawer\n *   or Popover stays open; in an empty field Escape reaches them. Both call `onClear`.\n * - **Routing**: `id`, ARIA and native input attributes and the focus/keyboard handlers go to the\n *   `<input type=\"search\">` (role `searchbox`); `className`, `style`, `data-*`, other handlers and\n *   `ref` stay on the root `<div>` (`controlRef` reaches the input). Inside a `Field` it picks up\n *   the label, hint, error and required state automatically.\n * - **Forms**: with `name` the text is submitted with the form; a form reset restores\n *   `defaultValue`.\n *\n * @example\n * <SearchBox aria-label=\"Search files\" value={query} onValueChange={setQuery} />\n */\nexport const SearchBox = ({\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  onChange,\n  onClear,\n  placeholder = 'Search',\n  disabled,\n  contentBefore,\n  contentAfter,\n  dismiss,\n  className,\n  ref,\n  controlRef,\n  // Routed to the input (C-ROUTING)\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  'aria-errormessage': ariaErrorMessage,\n  'aria-details': ariaDetails,\n  required,\n  name,\n  form,\n  readOnly,\n  autoComplete,\n  autoFocus,\n  autoCapitalize,\n  autoCorrect,\n  inputMode,\n  enterKeyHint,\n  spellCheck,\n  maxLength,\n  minLength,\n  pattern,\n  tabIndex,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  onMouseDown,\n  hidden,\n  ...rest\n}: SearchBoxProps) => {\n  if (onChange !== undefined) warnDeprecated('SearchBox', 'onChange', 'onValueChange');\n\n  const [value, setValue] = useControllable(controlledValue, defaultValue, (next: string) => {\n    onValueChange?.(next);\n    onChange?.(next);\n  });\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const mergedInputRef = useMergedRefs(inputRef, controlRef);\n  // The input is always React-controlled, so the browser's own reset would put the current text\n  // back: restore the default here instead (C-FORMS).\n  useFormReset(inputRef, () => setValue(defaultValue), form);\n\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': ariaInvalid,\n      'aria-required': ariaRequired,\n      required,\n    },\n    { nativeRequired: true },\n  );\n  const invalidLook = isInvalidLook(false, fieldProps['aria-invalid']);\n\n  const dismissParts = resolveDismiss(dismiss);\n  const dismissKind = dismissParts.kind;\n  React.useEffect(() => {\n    if (dismissKind === 'element') {\n      warnOnce(\n        'SearchBox:dismiss-button-element',\n        'SearchBox: `dismiss` received a button element; its props were merged into the built-in clear button (buttons cannot be nested). Pass icon content instead, e.g. `dismiss={<MyIcon />}`.',\n      );\n    } else if (dismissKind === 'button-object') {\n      warnOnce(\n        'SearchBox:dismiss-button-object',\n        'SearchBox: `dismiss` with button props (`as: \"button\"`, `onClick`, `type`, …) is deprecated and will be removed in 1.0; the props were merged into the built-in clear button. Pass icon content instead, e.g. `dismiss={<MyIcon />}`.',\n      );\n    }\n  }, [dismissKind]);\n\n  const handleClear = () => {\n    setValue('');\n    onClear?.();\n    inputRef.current?.focus();\n  };\n\n  // Escape clears the text first, as native search fields do, and is consumed so an enclosing\n  // Dialog, Drawer or Popover stays open; with an empty field it reaches them (C-POPUPS).\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key !== 'Escape' || event.nativeEvent.isComposing) return;\n    if (!value || readOnly || disabled) return;\n    event.preventDefault();\n    setValue('');\n    onClear?.();\n  };\n\n  // The whole box is the field: pressing the icon, a slot or the padding around the text focuses\n  // the input, as it does in a native search field. A control inside a slot keeps its press.\n  const handleRootMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n    const input = inputRef.current;\n    const root = event.currentTarget;\n    const target = event.target;\n    if (!input || disabled || event.button !== 0 || target === input) return;\n    // Events that bubble through React portals from outside this box are not ours (C-COMPOSE).\n    if (!(target instanceof Element) || !root.contains(target)) return;\n    const control = target.closest(INTERACTIVE_CONTENT);\n    if (control && root.contains(control)) return;\n    event.preventDefault(); // keeps the press from moving focus to the page\n    input.focus();\n  };\n\n  // The slot's onClick is composed at click time (it runs first; preventDefault() cancels the\n  // clear), so handleClear, which reads the input ref, is never passed to a render-time helper.\n  // The slot's ref joins ours through a stable merged ref (never a new callback per render).\n  const {\n    onClick: slotOnClick,\n    ref: slotRef,\n    ...slotButtonProps\n  } = dismissParts.buttonProps as UnknownProps & {\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n    ref?: React.Ref<HTMLButtonElement>;\n  };\n\n  // C-SLOTS naming (WCAG 2.5.3 Label in Name): a consumer naming attribute names the clear button;\n  // otherwise content rendered as is names it when it has a text label, and the default\n  // `aria-label` would hide that label. The literal children decide on the server and on the first\n  // render; after mount, the rendered button's text does (text from components, later changes).\n  const hasOwnName = Object.keys(slotButtonProps).some(\n    (key) => NAMING_KEYS.has(key) && slotButtonProps[key] != null,\n  );\n  const checksContent = dismissParts.contentMayName && !hasOwnName;\n  const literalTextLabel = dismissParts.literalTextLabel;\n  const [labelTarget, setLabelTarget] = React.useState<HTMLButtonElement | null>(null);\n  const subscribeToContent = React.useCallback(\n    (onChange: () => void) => (labelTarget ? observeTextLabel(labelTarget, onChange) : noop),\n    [labelTarget],\n  );\n  const contentHasTextLabel = React.useSyncExternalStore(\n    subscribeToContent,\n    () => (labelTarget ? hasRenderedTextLabel(labelTarget) : literalTextLabel),\n    () => literalTextLabel,\n  );\n  const namedByContent = checksContent && contentHasTextLabel;\n  const clearRef = useMergedRefs<HTMLButtonElement>(\n    slotRef,\n    checksContent ? setLabelTarget : undefined,\n  );\n\n  const clearButtonProps = mergeProps(\n    {\n      type: 'button',\n      disabled,\n      'aria-label': hasOwnName || namedByContent ? undefined : DEFAULT_CLEAR_LABEL,\n      className: cn(\n        searchBoxClassNames.dismissButton,\n        // Padding and background set here (C-NATIVE): an app-wide `button` rule cannot fill it.\n        'me-1 flex h-6 w-6 shrink-0 items-center justify-center rounded bg-transparent p-0 text-muted-foreground',\n        'not-disabled:not-aria-disabled:hover:text-foreground',\n        focusRing,\n        'disabled:cursor-not-allowed',\n        mergedAriaDisabledClasses,\n      ),\n    },\n    slotButtonProps,\n  ) as React.ComponentPropsWithoutRef<'button'>;\n\n  // A merged button with markup of its own (`dangerouslySetInnerHTML`) takes no children.\n  const clearContent =\n    clearButtonProps.dangerouslySetInnerHTML != null\n      ? undefined\n      : dismissKind === 'content'\n        ? dismissParts.content\n        : (dismissParts.content ?? <DismissIcon className={searchBoxClassNames.dismissIcon} />);\n  // A slot value that renders nothing is no slot (the default icon before the text, no box after).\n  const hasBefore = slotRendersContent(contentBefore);\n  const hasAfter = slotRendersContent(contentAfter);\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        searchBoxClassNames.root,\n        // The root draws the field; the slots, the text and the clear button are laid out side by\n        // side inside it, so a slot never covers the text.\n        'relative inline-flex h-8 w-full items-center rounded border border-input border-b-stroke-accessible bg-background text-body-1 text-foreground',\n        inputFocusWithin,\n        invalidLook && inputInvalidWithin,\n        // The dimmed look lifts while a focus ring shows inside the root (a clear button kept\n        // focusable by a merged `disabledFocusable` Button, focusable slot content; the disabled\n        // input never takes focus): opacity would dim the ring below 3:1.\n        disabled && 'cursor-not-allowed opacity-50 has-focus-visible:opacity-100',\n        className,\n      )}\n      hidden={hidden}\n      {...rest}\n      // Composed at press time, like the clear button's click: the handler reads the input ref.\n      onMouseDown={(event) => composeEventHandlers(onMouseDown, handleRootMouseDown)(event)}\n    >\n      <span className={cn(searchBoxClassNames.contentBefore, 'flex shrink-0 items-center ps-2')}>\n        {hasBefore ? (\n          renderSlot(contentBefore, 'span', 'shrink-0')\n        ) : (\n          <SearchIcon className=\"text-muted-foreground\" />\n        )}\n      </span>\n\n      <input\n        ref={mergedInputRef}\n        type=\"search\"\n        value={value}\n        onChange={(event) => setValue(event.target.value)}\n        placeholder={placeholder}\n        disabled={disabled}\n        className={cn(\n          searchBoxClassNames.input,\n          'h-full min-w-0 flex-1 appearance-none border-none bg-transparent px-2 text-body-1 text-foreground',\n          'placeholder:text-muted-foreground',\n          'focus:outline-hidden',\n          'disabled:cursor-not-allowed',\n          '[&::-webkit-search-cancel-button]:hidden',\n        )}\n        aria-errormessage={ariaErrorMessage}\n        aria-details={ariaDetails}\n        name={name}\n        form={form}\n        readOnly={readOnly}\n        autoComplete={autoComplete}\n        autoFocus={autoFocus}\n        autoCapitalize={autoCapitalize}\n        autoCorrect={autoCorrect}\n        inputMode={inputMode}\n        enterKeyHint={enterKeyHint}\n        spellCheck={spellCheck}\n        maxLength={maxLength}\n        minLength={minLength}\n        pattern={pattern}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n        onKeyUp={onKeyUp}\n        {...fieldProps}\n      />\n\n      {hasAfter && (\n        <span className={cn(searchBoxClassNames.contentAfter, 'flex shrink-0 items-center pe-2')}>\n          {renderSlot(contentAfter, 'span', 'shrink-0')}\n        </span>\n      )}\n\n      {/* No clear button while read-only: clearing would change a value the user cannot edit. */}\n      {value && !readOnly ? (\n        <button\n          {...clearButtonProps}\n          ref={clearRef}\n          // mergeProps keeps a slot's `type: null`, which would drop the attribute and make the\n          // button submit its form; only nullish falls back (an explicit type is kept).\n          type={clearButtonProps.type ?? 'button'}\n          disabled={disabled || clearButtonProps.disabled}\n          onClick={(event) => composeEventHandlers(slotOnClick, handleClear)(event)}\n          // A merged `disabledFocusable` Button makes the clear button unavailable but focusable\n          // (spread last: it wins over `disabled` and the clear handler).\n          {...(dismissParts.disabledFocusable ? MERGED_DISABLED_FOCUSABLE_PROPS : undefined)}\n        >\n          {clearContent}\n        </button>\n      ) : null}\n    </div>\n  );\n};\n\nSearchBox.displayName = 'SearchBox';\n"],"mappings":"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"}

package/dist/components/input/SearchBox.mjs

@@ -0,0 +1,204 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { getElementType as t, isElementOfType as n } from "../../lib/children.mjs";
+import { warnDeprecated as r, warnOnce as i } from "../../lib/dev.mjs";
+import { materialiseSlotContent as a, renderSlot as o, resolveSlot as s, slotRendersContent as c, slotWrapsDefaultContent as l } from "../../lib/slot.mjs";
+import { composeEventHandlers as u } from "../../lib/composeEventHandlers.mjs";
+import { searchBoxClassNames as d } from "../../lib/classNames.mjs";
+import { useControllable as f } from "../../hooks/useControllable.mjs";
+import { useMergedRefs as p } from "../../hooks/useMergedRefs.mjs";
+import { useFieldControl as m } from "../../hooks/useFieldControl.mjs";
+import { focusRing as h, inputFocusWithin as g } from "../../lib/styles.mjs";
+import { Button as _ } from "../button/Button.mjs";
+import { BUTTON_OWN_PROP_KEYS as v, MERGED_DISABLED_FOCUSABLE_PROPS as y, mergedAriaDisabledClasses as b, placeButtonIcon as x } from "../button/Button.slots.mjs";
+import { DismissIcon as S, SearchIcon as ee } from "../../lib/icons.mjs";
+import { mergeProps as te } from "../../lib/mergeProps.mjs";
+import { isInvalidLook as ne } from "./Input.mjs";
+import { useFormReset as C } from "../../hooks/useFormReset.mjs";
+import { hasRenderedTextLabel as w, hasTextLabel as T, observeTextLabel as re } from "../../lib/labelInName.mjs";
+import * as E from "react";
+import { jsx as D, jsxs as ie } from "react/jsx-runtime";
+//#region src/components/input/SearchBox.tsx
+var O = /* @__PURE__ */ new Set([
+	"type",
+	"disabled",
+	"form",
+	"formAction",
+	"formEncType",
+	"formMethod",
+	"formNoValidate",
+	"formTarget",
+	"name",
+	"value",
+	"popoverTarget",
+	"popoverTargetAction"
+]), k = /^on[A-Z]/, A = /* @__PURE__ */ new Set([
+	"aria-label",
+	"aria-labelledby",
+	"title"
+]), ae = "Clear search", oe = () => {}, se = "a[href], button, input, select, textarea, [tabindex], [contenteditable]:not([contenteditable=\"false\"])", j = {
+	kind: "default",
+	buttonProps: {},
+	content: null,
+	contentMayName: !1,
+	literalTextLabel: !1,
+	disabledFocusable: !1
+};
+function M(e) {
+	return e === "button" || e === _;
+}
+function N(t, n, r) {
+	let i = c(r), s = a(r), l = T(s);
+	if (t === _) {
+		let t = {};
+		for (let [e, r] of Object.entries(n)) e !== "children" && !v.has(e) && (t[e] = r);
+		let r = o(n.icon, "span", e(d.dismissIcon, "inline-flex"), { "aria-hidden": !0 });
+		return {
+			buttonProps: t,
+			content: r || i ? x(r, s, n.iconPosition) : null,
+			contentMayName: !0,
+			literalTextLabel: l,
+			disabledFocusable: !!n.disabledFocusable
+		};
+	}
+	let { as: u, children: f, ...p } = n;
+	return {
+		buttonProps: p,
+		content: i ? s : null,
+		contentMayName: !0,
+		literalTextLabel: l,
+		disabledFocusable: !1
+	};
+}
+function ce(r) {
+	let i = r;
+	if (n(i, "button", _)) {
+		let e = i.props.children;
+		return {
+			kind: "element",
+			...N(t(i), i.props, e)
+		};
+	}
+	let a = s(r, "span");
+	if (!a) return j;
+	let { Component: o, props: u, children: f } = a;
+	if (M(o)) return {
+		kind: "button-object",
+		...N(o, u, f)
+	};
+	let p = {}, m = {}, h = !1;
+	for (let [e, t] of Object.entries(u)) t !== void 0 && (O.has(e) || k.test(e) ? (p[e] = t, h = !0) : A.has(e) ? p[e] = t : m[e] = t);
+	let g = c(f), v = l(o, {
+		...m,
+		children: f
+	});
+	if (v && Object.keys(p).length === 0 && Object.keys(m).length === 0) return j;
+	let y = v ? /* @__PURE__ */ D(S, {}) : g ? f : void 0, b = {
+		"aria-hidden": !0,
+		...m,
+		className: e(d.dismissIcon, m.className)
+	}, x = y === void 0 ? E.createElement(o, b) : E.createElement(o, b, y);
+	return {
+		kind: h ? "button-object" : "content",
+		buttonProps: p,
+		content: x,
+		contentMayName: !1,
+		literalTextLabel: !1,
+		disabledFocusable: !1
+	};
+}
+var P = ({ value: t, defaultValue: n = "", onValueChange: a, onChange: s, onClear: l, placeholder: _ = "Search", disabled: v, contentBefore: x, contentAfter: T, dismiss: O, className: k, ref: j, controlRef: M, id: N, "aria-label": P, "aria-labelledby": le, "aria-describedby": ue, "aria-invalid": de, "aria-required": fe, "aria-errormessage": pe, "aria-details": F, required: I, name: L, form: R, readOnly: z, autoComplete: B, autoFocus: me, autoCapitalize: he, autoCorrect: ge, inputMode: _e, enterKeyHint: ve, spellCheck: ye, maxLength: be, minLength: xe, pattern: Se, tabIndex: Ce, onFocus: we, onBlur: Te, onKeyDown: Ee, onKeyUp: De, onMouseDown: Oe, hidden: ke, ...Ae }) => {
+	s !== void 0 && r("SearchBox", "onChange", "onValueChange");
+	let [V, H] = f(t, n, (e) => {
+		a?.(e), s?.(e);
+	}), U = E.useRef(null), je = p(U, M);
+	C(U, () => H(n), R);
+	let W = m({
+		id: N,
+		"aria-label": P,
+		"aria-labelledby": le,
+		"aria-describedby": ue,
+		"aria-invalid": de,
+		"aria-required": fe,
+		required: I
+	}, { nativeRequired: !0 }), Me = ne(!1, W["aria-invalid"]), G = ce(O), K = G.kind;
+	E.useEffect(() => {
+		K === "element" ? i("SearchBox:dismiss-button-element", "SearchBox: `dismiss` received a button element; its props were merged into the built-in clear button (buttons cannot be nested). Pass icon content instead, e.g. `dismiss={<MyIcon />}`.") : K === "button-object" && i("SearchBox:dismiss-button-object", "SearchBox: `dismiss` with button props (`as: \"button\"`, `onClick`, `type`, …) is deprecated and will be removed in 1.0; the props were merged into the built-in clear button. Pass icon content instead, e.g. `dismiss={<MyIcon />}`.");
+	}, [K]);
+	let Ne = () => {
+		H(""), l?.(), U.current?.focus();
+	}, Pe = (e) => {
+		e.key !== "Escape" || e.nativeEvent.isComposing || !V || z || v || (e.preventDefault(), H(""), l?.());
+	}, Fe = (e) => {
+		let t = U.current, n = e.currentTarget, r = e.target;
+		if (!t || v || e.button !== 0 || r === t || !(r instanceof Element) || !n.contains(r)) return;
+		let i = r.closest(se);
+		i && n.contains(i) || (e.preventDefault(), t.focus());
+	}, { onClick: Ie, ref: Le, ...q } = G.buttonProps, J = Object.keys(q).some((e) => A.has(e) && q[e] != null), Y = G.contentMayName && !J, X = G.literalTextLabel, [Z, Re] = E.useState(null), Q = E.useCallback((e) => Z ? re(Z, e) : oe, [Z]), ze = E.useSyncExternalStore(Q, () => Z ? w(Z) : X, () => X), Be = Y && ze, Ve = p(Le, Y ? Re : void 0), $ = te({
+		type: "button",
+		disabled: v,
+		"aria-label": J || Be ? void 0 : ae,
+		className: e(d.dismissButton, "me-1 flex h-6 w-6 shrink-0 items-center justify-center rounded bg-transparent p-0 text-muted-foreground", "not-disabled:not-aria-disabled:hover:text-foreground", h, "disabled:cursor-not-allowed", b)
+	}, q), He = $.dangerouslySetInnerHTML == null ? K === "content" ? G.content : G.content ?? /* @__PURE__ */ D(S, { className: d.dismissIcon }) : void 0, Ue = c(x), We = c(T);
+	return /* @__PURE__ */ ie("div", {
+		ref: j,
+		className: e(d.root, "relative inline-flex h-8 w-full items-center rounded border border-input border-b-stroke-accessible bg-background text-body-1 text-foreground", g, Me && "border-destructive focus-within:border-b-destructive", v && "cursor-not-allowed opacity-50 has-focus-visible:opacity-100", k),
+		hidden: ke,
+		...Ae,
+		onMouseDown: (e) => u(Oe, Fe)(e),
+		children: [
+			/* @__PURE__ */ D("span", {
+				className: e(d.contentBefore, "flex shrink-0 items-center ps-2"),
+				children: Ue ? o(x, "span", "shrink-0") : /* @__PURE__ */ D(ee, { className: "text-muted-foreground" })
+			}),
+			/* @__PURE__ */ D("input", {
+				ref: je,
+				type: "search",
+				value: V,
+				onChange: (e) => H(e.target.value),
+				placeholder: _,
+				disabled: v,
+				className: e(d.input, "h-full min-w-0 flex-1 appearance-none border-none bg-transparent px-2 text-body-1 text-foreground", "placeholder:text-muted-foreground", "focus:outline-hidden", "disabled:cursor-not-allowed", "[&::-webkit-search-cancel-button]:hidden"),
+				"aria-errormessage": pe,
+				"aria-details": F,
+				name: L,
+				form: R,
+				readOnly: z,
+				autoComplete: B,
+				autoFocus: me,
+				autoCapitalize: he,
+				autoCorrect: ge,
+				inputMode: _e,
+				enterKeyHint: ve,
+				spellCheck: ye,
+				maxLength: be,
+				minLength: xe,
+				pattern: Se,
+				tabIndex: Ce,
+				onFocus: we,
+				onBlur: Te,
+				onKeyDown: u(Ee, Pe),
+				onKeyUp: De,
+				...W
+			}),
+			We && /* @__PURE__ */ D("span", {
+				className: e(d.contentAfter, "flex shrink-0 items-center pe-2"),
+				children: o(T, "span", "shrink-0")
+			}),
+			V && !z ? /* @__PURE__ */ D("button", {
+				...$,
+				ref: Ve,
+				type: $.type ?? "button",
+				disabled: v || $.disabled,
+				onClick: (e) => u(Ie, Ne)(e),
+				...G.disabledFocusable ? y : void 0,
+				children: He
+			}) : null
+		]
+	});
+};
+P.displayName = "SearchBox";
+//#endregion
+export { P as SearchBox };
+
+//# sourceMappingURL=SearchBox.mjs.map