@mastra/playground-ui 68.0.0-alpha.0 → 68.0.0-alpha.2

package/dist/filter-bar-time-range-BA-pXMlo.cjs

@@ -0,0 +1,83 @@
+const require_date_time_range_picker = require("./date-time-range-picker-CTt7Od0P.cjs");
+const require_filter_bar_chip = require("./filter-bar-chip-Cg-UbIwP.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+// src/ds/components/FilterBar/filter-bar-time-range.tsx
+var FILTER_BAR_TIME_RANGE_FIELD_ID = "timeRange";
+/**
+* Synthetic field backing the time range control. Hidden from the input's field step (the
+* range cannot be added twice) but registered so the bar resolves its label and takes it into
+* keyboard navigation. Add it to the bar's `fields` and `FILTER_BAR_TIME_RANGE_ITEM` to its
+* `items`, then render `FilterBar.TimeRange` for that item from `FilterBar.Chips`.
+*/
+var FILTER_BAR_TIME_RANGE_FIELD = {
+	id: FILTER_BAR_TIME_RANGE_FIELD_ID,
+	label: "Time",
+	icon: lucide_react.CalendarIcon,
+	type: "text",
+	operators: ["is"],
+	hidden: true
+};
+var FILTER_BAR_TIME_RANGE_ITEM = {
+	id: FILTER_BAR_TIME_RANGE_FIELD_ID,
+	fieldId: FILTER_BAR_TIME_RANGE_FIELD_ID,
+	operatorId: "is",
+	value: ""
+};
+/**
+* A filter bar's time range: the `DateTimeRangePicker` itself at the bar's rung, so it looks and
+* behaves exactly as it does anywhere else, reset × included. It scopes the bar rather than
+* filtering it, so it is not a removable chip; the wrapper only joins it to the bar's arrow-key
+* order.
+*/
+function FilterBarTimeRange(props) {
+	const ctx = require_filter_bar_chip.useFilterBarContext();
+	const rootRef = (0, react.useRef)(null);
+	const { onKeyDown } = require_filter_bar_chip.useFilterBarItemKeys({
+		item: FILTER_BAR_TIME_RANGE_ITEM,
+		rootRef,
+		pinned: true,
+		removable: false,
+		segmentSelector: "button"
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: rootRef,
+		role: "group",
+		"aria-label": "Time range",
+		"data-slot": "filter-bar-time-range",
+		className: "flex",
+		onKeyDown,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_date_time_range_picker.DateTimeRangePicker, {
+			...props,
+			size: "sm",
+			ref: (el) => ctx.registerSegment(FILTER_BAR_TIME_RANGE_ITEM.id, "value", el)
+		})
+	});
+}
+Object.defineProperty(exports, "FILTER_BAR_TIME_RANGE_FIELD", {
+	enumerable: true,
+	get: function() {
+		return FILTER_BAR_TIME_RANGE_FIELD;
+	}
+});
+Object.defineProperty(exports, "FILTER_BAR_TIME_RANGE_FIELD_ID", {
+	enumerable: true,
+	get: function() {
+		return FILTER_BAR_TIME_RANGE_FIELD_ID;
+	}
+});
+Object.defineProperty(exports, "FILTER_BAR_TIME_RANGE_ITEM", {
+	enumerable: true,
+	get: function() {
+		return FILTER_BAR_TIME_RANGE_ITEM;
+	}
+});
+Object.defineProperty(exports, "FilterBarTimeRange", {
+	enumerable: true,
+	get: function() {
+		return FilterBarTimeRange;
+	}
+});
+
+//# sourceMappingURL=filter-bar-time-range-BA-pXMlo.cjs.map

package/dist/filter-bar-time-range-BA-pXMlo.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-bar-time-range-BA-pXMlo.cjs","names":["CalendarIcon","useFilterBarContext","useRef","useFilterBarItemKeys","DateTimeRangePicker"],"sources":["../src/ds/components/FilterBar/filter-bar-time-range.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components */\nimport { CalendarIcon } from 'lucide-react';\nimport { useRef } from 'react';\nimport { FILTER_BAR_CONTROL_SIZE } from './filter-bar-chip';\nimport { useFilterBarContext } from './filter-bar-context';\nimport type { FilterBarField, FilterBarItem } from './types';\nimport { useFilterBarItemKeys } from './use-filter-bar-item-keys';\nimport { DateTimeRangePicker } from '@/ds/components/DateTimeRangePicker/date-time-range-picker';\nimport type { DateTimeRangePickerProps } from '@/ds/components/DateTimeRangePicker/date-time-range-picker';\n\nexport const FILTER_BAR_TIME_RANGE_FIELD_ID = 'timeRange';\n\n/**\n * Synthetic field backing the time range control. Hidden from the input's field step (the\n * range cannot be added twice) but registered so the bar resolves its label and takes it into\n * keyboard navigation. Add it to the bar's `fields` and `FILTER_BAR_TIME_RANGE_ITEM` to its\n * `items`, then render `FilterBar.TimeRange` for that item from `FilterBar.Chips`.\n */\nexport const FILTER_BAR_TIME_RANGE_FIELD: FilterBarField = {\n  id: FILTER_BAR_TIME_RANGE_FIELD_ID,\n  label: 'Time',\n  icon: CalendarIcon,\n  type: 'text',\n  operators: ['is'],\n  hidden: true,\n};\n\nexport const FILTER_BAR_TIME_RANGE_ITEM: FilterBarItem = {\n  id: FILTER_BAR_TIME_RANGE_FIELD_ID,\n  fieldId: FILTER_BAR_TIME_RANGE_FIELD_ID,\n  operatorId: 'is',\n  value: '',\n};\n\nexport type FilterBarTimeRangeProps = Omit<DateTimeRangePickerProps, 'size' | 'ref'>;\n\n/**\n * A filter bar's time range: the `DateTimeRangePicker` itself at the bar's rung, so it looks and\n * behaves exactly as it does anywhere else, reset × included. It scopes the bar rather than\n * filtering it, so it is not a removable chip; the wrapper only joins it to the bar's arrow-key\n * order.\n */\nexport function FilterBarTimeRange(props: FilterBarTimeRangeProps) {\n  const ctx = useFilterBarContext();\n  const rootRef = useRef<HTMLDivElement>(null);\n  const { onKeyDown } = useFilterBarItemKeys({\n    item: FILTER_BAR_TIME_RANGE_ITEM,\n    rootRef,\n    pinned: true,\n    removable: false,\n    segmentSelector: 'button',\n  });\n\n  return (\n    <div\n      ref={rootRef}\n      role=\"group\"\n      aria-label=\"Time range\"\n      data-slot=\"filter-bar-time-range\"\n      className=\"flex\"\n      onKeyDown={onKeyDown}\n    >\n      <DateTimeRangePicker\n        {...props}\n        size={FILTER_BAR_CONTROL_SIZE}\n        ref={el => ctx.registerSegment(FILTER_BAR_TIME_RANGE_ITEM.id, 'value', el)}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAUA,IAAa,iCAAiC;;;;;;;AAQ9C,IAAa,8BAA8C;CACzD,IAAI;CACJ,OAAO;CACP,MAAMA,aAAAA;CACN,MAAM;CACN,WAAW,CAAC,IAAI;CAChB,QAAQ;AACV;AAEA,IAAa,6BAA4C;CACvD,IAAI;CACJ,SAAS;CACT,YAAY;CACZ,OAAO;AACT;;;;;;;AAUA,SAAgB,mBAAmB,OAAgC;CACjE,MAAM,MAAMC,wBAAAA,oBAAoB;CAChC,MAAM,WAAA,GAAUC,MAAAA,OAAAA,CAAuB,IAAI;CAC3C,MAAM,EAAE,cAAcC,wBAAAA,qBAAqB;EACzC,MAAM;EACN;EACA,QAAQ;EACR,WAAW;EACX,iBAAiB;CACnB,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,KAAK;EACL,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAU;EACC;EAEX,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,+BAAAA,qBAAD;GACE,GAAI;GACJ,MAAA;GACA,MAAK,OAAM,IAAI,gBAAgB,2BAA2B,IAAI,SAAS,EAAE;EAC1E,CAAA;CACE,CAAA;AAET"}

package/dist/filter-bar-time-range-mg9JeYue.js

@@ -0,0 +1,60 @@
+import { t as DateTimeRangePicker } from "./date-time-range-picker-DKh1K9Iy.js";
+import { p as useFilterBarItemKeys, y as useFilterBarContext } from "./filter-bar-chip-CABeKrtf.js";
+import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { CalendarIcon } from "lucide-react";
+// src/ds/components/FilterBar/filter-bar-time-range.tsx
+var FILTER_BAR_TIME_RANGE_FIELD_ID = "timeRange";
+/**
+* Synthetic field backing the time range control. Hidden from the input's field step (the
+* range cannot be added twice) but registered so the bar resolves its label and takes it into
+* keyboard navigation. Add it to the bar's `fields` and `FILTER_BAR_TIME_RANGE_ITEM` to its
+* `items`, then render `FilterBar.TimeRange` for that item from `FilterBar.Chips`.
+*/
+var FILTER_BAR_TIME_RANGE_FIELD = {
+	id: FILTER_BAR_TIME_RANGE_FIELD_ID,
+	label: "Time",
+	icon: CalendarIcon,
+	type: "text",
+	operators: ["is"],
+	hidden: true
+};
+var FILTER_BAR_TIME_RANGE_ITEM = {
+	id: FILTER_BAR_TIME_RANGE_FIELD_ID,
+	fieldId: FILTER_BAR_TIME_RANGE_FIELD_ID,
+	operatorId: "is",
+	value: ""
+};
+/**
+* A filter bar's time range: the `DateTimeRangePicker` itself at the bar's rung, so it looks and
+* behaves exactly as it does anywhere else, reset × included. It scopes the bar rather than
+* filtering it, so it is not a removable chip; the wrapper only joins it to the bar's arrow-key
+* order.
+*/
+function FilterBarTimeRange(props) {
+	const ctx = useFilterBarContext();
+	const rootRef = useRef(null);
+	const { onKeyDown } = useFilterBarItemKeys({
+		item: FILTER_BAR_TIME_RANGE_ITEM,
+		rootRef,
+		pinned: true,
+		removable: false,
+		segmentSelector: "button"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: rootRef,
+		role: "group",
+		"aria-label": "Time range",
+		"data-slot": "filter-bar-time-range",
+		className: "flex",
+		onKeyDown,
+		children: /* @__PURE__ */ jsx(DateTimeRangePicker, {
+			...props,
+			size: "sm",
+			ref: (el) => ctx.registerSegment(FILTER_BAR_TIME_RANGE_ITEM.id, "value", el)
+		})
+	});
+}
+export { FilterBarTimeRange as i, FILTER_BAR_TIME_RANGE_FIELD_ID as n, FILTER_BAR_TIME_RANGE_ITEM as r, FILTER_BAR_TIME_RANGE_FIELD as t };
+
+//# sourceMappingURL=filter-bar-time-range-mg9JeYue.js.map

package/dist/filter-bar-time-range-mg9JeYue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-bar-time-range-mg9JeYue.js","names":[],"sources":["../src/ds/components/FilterBar/filter-bar-time-range.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components */\nimport { CalendarIcon } from 'lucide-react';\nimport { useRef } from 'react';\nimport { FILTER_BAR_CONTROL_SIZE } from './filter-bar-chip';\nimport { useFilterBarContext } from './filter-bar-context';\nimport type { FilterBarField, FilterBarItem } from './types';\nimport { useFilterBarItemKeys } from './use-filter-bar-item-keys';\nimport { DateTimeRangePicker } from '@/ds/components/DateTimeRangePicker/date-time-range-picker';\nimport type { DateTimeRangePickerProps } from '@/ds/components/DateTimeRangePicker/date-time-range-picker';\n\nexport const FILTER_BAR_TIME_RANGE_FIELD_ID = 'timeRange';\n\n/**\n * Synthetic field backing the time range control. Hidden from the input's field step (the\n * range cannot be added twice) but registered so the bar resolves its label and takes it into\n * keyboard navigation. Add it to the bar's `fields` and `FILTER_BAR_TIME_RANGE_ITEM` to its\n * `items`, then render `FilterBar.TimeRange` for that item from `FilterBar.Chips`.\n */\nexport const FILTER_BAR_TIME_RANGE_FIELD: FilterBarField = {\n  id: FILTER_BAR_TIME_RANGE_FIELD_ID,\n  label: 'Time',\n  icon: CalendarIcon,\n  type: 'text',\n  operators: ['is'],\n  hidden: true,\n};\n\nexport const FILTER_BAR_TIME_RANGE_ITEM: FilterBarItem = {\n  id: FILTER_BAR_TIME_RANGE_FIELD_ID,\n  fieldId: FILTER_BAR_TIME_RANGE_FIELD_ID,\n  operatorId: 'is',\n  value: '',\n};\n\nexport type FilterBarTimeRangeProps = Omit<DateTimeRangePickerProps, 'size' | 'ref'>;\n\n/**\n * A filter bar's time range: the `DateTimeRangePicker` itself at the bar's rung, so it looks and\n * behaves exactly as it does anywhere else, reset × included. It scopes the bar rather than\n * filtering it, so it is not a removable chip; the wrapper only joins it to the bar's arrow-key\n * order.\n */\nexport function FilterBarTimeRange(props: FilterBarTimeRangeProps) {\n  const ctx = useFilterBarContext();\n  const rootRef = useRef<HTMLDivElement>(null);\n  const { onKeyDown } = useFilterBarItemKeys({\n    item: FILTER_BAR_TIME_RANGE_ITEM,\n    rootRef,\n    pinned: true,\n    removable: false,\n    segmentSelector: 'button',\n  });\n\n  return (\n    <div\n      ref={rootRef}\n      role=\"group\"\n      aria-label=\"Time range\"\n      data-slot=\"filter-bar-time-range\"\n      className=\"flex\"\n      onKeyDown={onKeyDown}\n    >\n      <DateTimeRangePicker\n        {...props}\n        size={FILTER_BAR_CONTROL_SIZE}\n        ref={el => ctx.registerSegment(FILTER_BAR_TIME_RANGE_ITEM.id, 'value', el)}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAUA,IAAa,iCAAiC;;;;;;;AAQ9C,IAAa,8BAA8C;CACzD,IAAI;CACJ,OAAO;CACP,MAAM;CACN,MAAM;CACN,WAAW,CAAC,IAAI;CAChB,QAAQ;AACV;AAEA,IAAa,6BAA4C;CACvD,IAAI;CACJ,SAAS;CACT,YAAY;CACZ,OAAO;AACT;;;;;;;AAUA,SAAgB,mBAAmB,OAAgC;CACjE,MAAM,MAAM,oBAAoB;CAChC,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,EAAE,cAAc,qBAAqB;EACzC,MAAM;EACN;EACA,QAAQ;EACR,WAAW;EACX,iBAAiB;CACnB,CAAC;CAED,OACE,oBAAC,OAAD;EACE,KAAK;EACL,MAAK;EACL,cAAW;EACX,aAAU;EACV,WAAU;EACC;EAEX,UAAA,oBAAC,qBAAD;GACE,GAAI;GACJ,MAAA;GACA,MAAK,OAAM,IAAI,gBAAgB,2BAA2B,IAAI,SAAS,EAAE;EAC1E,CAAA;CACE,CAAA;AAET"}

package/dist/hooks/use-copy-to-clipboard.cjs.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_toast_api = require("../toast-api-Bv87KHu_.cjs");
+const require_toast_api = require("../toast-api-qtkOucy2.cjs");
 let react = require("react");
 // src/hooks/use-copy-to-clipboard.ts
 var copyViaClipboardApi = async (value) => {

package/dist/hooks/use-copy-to-clipboard.es.js

@@ -1,4 +1,4 @@
-import { t as toast } from "../toast-api-WhxnAT9F.js";
+import { t as toast } from "../toast-api-D_rrRhNG.js";
 import { useCallback, useRef, useState } from "react";
 // src/hooks/use-copy-to-clipboard.ts
 var copyViaClipboardApi = async (value) => {

package/dist/{input-group-uDpFNnSW.cjs → input-group-DVJLZDBL.cjs}

@@ -1,9 +1,10 @@
 const require_rolldown_runtime = require("./rolldown-runtime-CmQyd0Gu.cjs");
 const require_utils = require("./utils-uDc1ofX1.cjs");
 const require_dist = require("./dist-ClDKPtVq.cjs");
+const require_primitives_control_icon = require("./primitives/control-icon.cjs.js");
 const require_primitives_control_size = require("./primitives/control-size.cjs.js");
 const require_primitives_form_element = require("./primitives/form-element.cjs.js");
-const require_Button = require("./Button-YQRflC47.cjs");
+const require_Button = require("./Button-DLcMcuUL.cjs");
 const require_field_control_aria = require("./field-control-aria-Dw0_ObOU.cjs");
 const require_primitives_password_manager_autofill = require("./primitives/password-manager-autofill.cjs.js");
 const require_primitives_textarea_control = require("./primitives/textarea-control.cjs.js");
@@ -21,12 +22,13 @@ function InputGroup({ className, size, ...props }) {
 		role: "group",
 		"data-slot": "input-group",
 		"data-size": resolved,
-		className: require_utils.cn(inputGroupClassName, require_primitives_control_size.controlHeight[resolved], className),
+		className: require_utils.cn(inputGroupClassName, require_primitives_control_size.controlHeight[resolved], require_primitives_control_size.controlSpacing[resolved], require_primitives_control_icon.controlIconState, "has-[:disabled]:[--control-icon:var(--control-icon-rest)]", className),
 		...props
 	});
 }
 var inputGroupControlTextBySize = require_utils.cn("group-data-[size=sm]/input-group:text-caption", "group-data-[size=md]/input-group:text-body-sm", "group-data-[size=lg]/input-group:text-body");
-var inputGroupAddonVariants = require_dist.cva(require_utils.cn("flex items-center justify-center gap-2 text-muted-foreground select-none", inputGroupControlTextBySize, "group-has-[:disabled]/input-group:text-muted-foreground", "[&>svg:not([class*='size-'])]:size-4"), {
+var inputGroupIconBySize = require_utils.cn("group-data-[size=sm]/input-group:[&>svg:not([class*='size-'])]:size-icon-sm", "group-data-[size=md]/input-group:[&>svg:not([class*='size-'])]:size-icon-md", "group-data-[size=lg]/input-group:[&>svg:not([class*='size-'])]:size-icon-lg");
+var inputGroupAddonVariants = require_dist.cva(require_utils.cn("flex items-center justify-center gap-2 text-muted-foreground select-none", inputGroupControlTextBySize, "group-has-[:disabled]/input-group:text-muted-foreground", inputGroupIconBySize), {
 	variants: {
 		variant: {
 			default: "",
@@ -164,4 +166,4 @@ Object.defineProperty(exports, "inputGroupControlClassName", {
 	}
 });
 
-//# sourceMappingURL=input-group-uDpFNnSW.cjs.map
+//# sourceMappingURL=input-group-DVJLZDBL.cjs.map

package/dist/input-group-DVJLZDBL.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group-DVJLZDBL.cjs","names":["cn","inputSurfaceAndFocusWithinStyle","fieldErrorRimWithin","React","ControlSizeContext","controlHeight","controlSpacing","controlIconState","cva","InputPrimitive","deprecatedErrorAria","textFieldAutofillProps","keepOwnAccessibleName","TextareaControl","Button"],"sources":["../src/ds/components/InputGroup/input-group.tsx"],"sourcesContent":["import { Input as InputPrimitive } from '@base-ui/react/input';\nimport { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button/Button';\nimport { keepOwnAccessibleName } from '@/ds/components/Field/field-control-aria';\nimport { controlIconState } from '@/ds/primitives/control-icon';\nimport { ControlSizeContext, controlHeight, controlSpacing } from '@/ds/primitives/control-size';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport {\n  deprecatedErrorAria,\n  fieldErrorRimWithin,\n  inputSurfaceAndFocusWithinStyle,\n} from '@/ds/primitives/form-element';\nimport { textFieldAutofillProps } from '@/ds/primitives/password-manager-autofill';\nimport { TextareaControl } from '@/ds/primitives/textarea-control';\nimport { cn } from '@/lib/utils';\n\n// Size flows down as `data-size` on the named group root (`group/input-group`), read by the\n// control through `group-data-[size=…]` variants — no prop drilling. The one context read is\n// upward: a wrapper that owns the rung (ButtonsGroup) hands it to the field.\n\nconst inputGroupBaseClassName = cn(\n  // `flex-1` (not `min-w-0`) lets the root fill a flex row while keeping its content-floor\n  // so it never collapses to 0. `items-center` centres the control: it carries its own\n  // h-form-* (2px taller than the root's content box), so stretch would push its text low\n  // / overflow the bottom border, while centring overlaps the (transparent) borders cleanly.\n  'group/input-group relative flex w-full flex-1 items-center',\n  // The wrapper owns its control's width — a bare control has no width of its own,\n  // so the group is the one that decides the input fills the remaining space.\n  '[&>[data-slot=input-group-control]]:min-w-0 [&>[data-slot=input-group-control]]:flex-1',\n  'text-foreground',\n  'has-[:disabled]:cursor-not-allowed has-[:disabled]:text-muted-foreground',\n  // Height is on the root (border-box) so the group matches a same-size sibling control.\n  // Auto height when vertical (block-* addon) or wrapping a textarea.\n  'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col',\n  'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col',\n  'has-[textarea]:h-auto',\n  'has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-0',\n  'has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-0',\n  // In flex-col, flex-1 zeroes the control's height; force flex-none + w-full instead.\n  'has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:w-full has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:flex-none',\n  'has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:w-full has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:flex-none',\n);\n\nconst inputGroupRoundedTextareaClassName = cn(\n  // Pill (rounded-full) only fits single-line inline shapes. Fall back to rounded-xl\n  // whenever the group goes vertical (block-* addon) or wraps a textarea.\n  'has-[>[data-align=block-start]]:rounded-xl',\n  'has-[>[data-align=block-end]]:rounded-xl',\n  'has-[textarea]:rounded-xl',\n);\n\n// A group wears the field material — the same `bg-card` plus rim an Input wears — so a\n// group and a bare field beside it are one surface. Its states move the rim, and they\n// read the nested control's focus (`focus-within`) because the wrapper never takes focus\n// itself. There is no second look: a transparent `outline` group existed alongside this\n// one and only ever produced two boundary languages for the same control, which is why\n// four of its call sites had wrapped it in a hand-made `bg-card rounded-full` div to get\n// the material back.\n// eslint-disable-next-line react-refresh/only-export-components -- shared with InputNumber\nexport const inputGroupClassName = cn(\n  inputGroupBaseClassName,\n  'rounded-full',\n  inputSurfaceAndFocusWithinStyle,\n  fieldErrorRimWithin,\n  inputGroupRoundedTextareaClassName,\n);\n\nexport type InputGroupProps = React.ComponentProps<'div'> & {\n  size?: ControlSize;\n};\n\nfunction InputGroup({ className, size, ...props }: InputGroupProps) {\n  // A wrapper's rung wins over the field's own: inside a ButtonsGroup the group owns the\n  // height of every segment, so a field that kept its own type scale would sit at one rung\n  // and read at another.\n  const groupSize = React.useContext(ControlSizeContext);\n  const resolved = groupSize ?? size ?? 'md';\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group\"\n      data-size={resolved}\n      className={cn(\n        inputGroupClassName,\n        controlHeight[resolved],\n        controlSpacing[resolved],\n        controlIconState,\n        'has-[:disabled]:[--control-icon:var(--control-icon-rest)]',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupControlTextBySize = cn(\n  'group-data-[size=sm]/input-group:text-caption',\n  'group-data-[size=md]/input-group:text-body-sm',\n  'group-data-[size=lg]/input-group:text-body',\n);\n\n// An addon's icon takes the group's rung, as a Button's does (`iconSizeClasses`), unless it\n// sizes itself.\nconst inputGroupIconBySize = cn(\n  \"group-data-[size=sm]/input-group:[&>svg:not([class*='size-'])]:size-icon-sm\",\n  \"group-data-[size=md]/input-group:[&>svg:not([class*='size-'])]:size-icon-md\",\n  \"group-data-[size=lg]/input-group:[&>svg:not([class*='size-'])]:size-icon-lg\",\n);\n\nconst inputGroupAddonVariants = cva(\n  cn(\n    'flex items-center justify-center gap-2 text-muted-foreground select-none',\n    inputGroupControlTextBySize,\n    'group-has-[:disabled]/input-group:text-muted-foreground',\n    inputGroupIconBySize,\n  ),\n  {\n    variants: {\n      variant: {\n        default: '',\n        flush: '',\n      },\n      align: {\n        'inline-start': 'order-first pr-1 pl-3 has-[>button]:pl-1',\n        'inline-end': 'order-last pr-3 pl-1 has-[>button]:pr-1',\n        'block-start': 'order-first w-full justify-start border-b border-border px-3 pt-2 pb-1',\n        'block-end': 'order-last w-full justify-start border-t border-border px-3 pt-1 pb-2',\n      },\n    },\n    compoundVariants: [\n      { variant: 'flush', align: ['inline-start', 'inline-end'], className: 'gap-0 [&>button]:mx-0' },\n      { variant: 'flush', align: 'inline-start', className: 'pl-0 has-[>button]:pl-0' },\n      { variant: 'flush', align: 'inline-end', className: 'pr-0 has-[>button]:pr-0' },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      align: 'inline-start',\n    },\n  },\n);\n\nexport type InputGroupAddonProps = React.ComponentProps<'div'> &\n  Omit<VariantProps<typeof inputGroupAddonVariants>, 'variant'> & {\n    /** `flush` joins inline buttons without a gap or an inset from the field's outside edge. */\n    variant?: VariantProps<typeof inputGroupAddonVariants>['variant'];\n  };\n\nfunction InputGroupAddon({\n  className,\n  align = 'inline-start',\n  variant = 'default',\n  onClick,\n  ...props\n}: InputGroupAddonProps) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      data-variant={variant}\n      className={cn(inputGroupAddonVariants({ align, variant }), className)}\n      onClick={event => {\n        // Click on non-interactive addon area focuses the control inside the group.\n        // Skip when a button/input handled the click itself.\n        const target = event.target as HTMLElement;\n        if (!target.closest('button, input, textarea, [role=\"button\"]')) {\n          event.currentTarget.parentElement\n            ?.querySelector<HTMLInputElement | HTMLTextAreaElement>('[data-slot=input-group-control]')\n            ?.focus();\n        }\n        onClick?.(event);\n      }}\n      {...props}\n    />\n  );\n}\n\n// Size flows from the parent group's `data-size` (no React context). All four sizes are\n// written out so Tailwind's scanner emits them. The control is sized to the root's\n// content box (token height minus the 1px border on each side) so it never overflows the\n// root — otherwise, in a flex-column parent, the root's content-based minimum would win\n// over its explicit height and the group would render 2px taller than a sibling control.\n// The explicit height also keeps the control from collapsing to the line-height in block\n// mode (flex-col + flex-none).\nconst inputGroupControlHeightBySize = cn(\n  'group-data-[size=sm]/input-group:h-[calc(var(--spacing-control-sm)-2px)]',\n  'group-data-[size=md]/input-group:h-[calc(var(--spacing-control-md)-2px)]',\n  'group-data-[size=lg]/input-group:h-[calc(var(--spacing-control-lg)-2px)]',\n);\n\n// eslint-disable-next-line react-refresh/only-export-components -- shared with InputNumber\nexport const inputGroupControlClassName = cn(\n  'min-w-0 flex-1 bg-transparent px-3 text-label text-foreground outline-hidden',\n  inputGroupControlHeightBySize,\n  'placeholder:text-muted-foreground placeholder:transition-opacity placeholder:duration-normal',\n  'focus:placeholder:opacity-70',\n  'disabled:cursor-not-allowed',\n);\n\nexport type InputGroupInputProps = Omit<React.ComponentProps<'input'>, 'size'> & {\n  testId?: string;\n  /** @deprecated Wrap the group in `<Field invalid>`, or set `aria-invalid` on a control outside a `Field`. */\n  error?: boolean;\n};\n\nfunction InputGroupInput({ className, testId, error, type = 'text', autoComplete, ...props }: InputGroupInputProps) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input-group-control\"\n      data-testid={testId}\n      className={cn(\n        inputGroupControlClassName,\n        // WebKit and Firefox use different selectors for native number spinners.\n        '[&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none',\n        '[&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none',\n        '[&[type=number]]:[appearance:textfield]',\n        // type=\"search\": drop WebKit's native clear button so it doesn't double up with a\n        // custom clear control (e.g. the scorers toolbar's InputGroupButton).\n        '[&::-webkit-search-cancel-button]:appearance-none',\n        className,\n      )}\n      {...deprecatedErrorAria(error)}\n      {...props}\n      {...textFieldAutofillProps(autoComplete)}\n      {...keepOwnAccessibleName(props)}\n    />\n  );\n}\n\nexport type InputGroupTextareaProps = React.ComponentProps<'textarea'> & {\n  testId?: string;\n  /** @deprecated Wrap the group in `<Field invalid>`, or set `aria-invalid` on a control outside a `Field`. */\n  error?: boolean;\n};\n\nfunction InputGroupTextarea({ className, testId, error, ...props }: InputGroupTextareaProps) {\n  return (\n    <TextareaControl\n      data-slot=\"input-group-control\"\n      data-testid={testId}\n      className={cn(\n        'min-h-15 min-w-0 flex-1 resize-y bg-transparent px-3 py-2 text-foreground outline-hidden',\n        inputGroupControlTextBySize,\n        'placeholder:text-muted-foreground placeholder:transition-opacity placeholder:duration-normal',\n        'focus:placeholder:opacity-70',\n        'disabled:cursor-not-allowed',\n        className,\n      )}\n      {...deprecatedErrorAria(error)}\n      {...props}\n    />\n  );\n}\n\nexport type InputGroupTextProps = React.ComponentProps<'span'>;\n\nfunction InputGroupText({ className, ...props }: InputGroupTextProps) {\n  return (\n    <span\n      className={cn(\n        'flex items-center gap-2 text-caption text-muted-foreground [&_svg]:pointer-events-none',\n        \"[&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type InputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, 'size' | 'variant'> & {\n  size?: ButtonProps['size'];\n  variant?: ButtonProps['variant'];\n};\n\nfunction InputGroupButton({ size = 'icon-sm', variant = 'ghost', type = 'button', ...props }: InputGroupButtonProps) {\n  return <Button type={type} size={size} variant={variant} {...props} />;\n}\n\nexport { InputGroup, InputGroupAddon, InputGroupInput, InputGroupTextarea, InputGroupText, InputGroupButton };\n"],"mappings":";;;;;;;;;;;;;;;AAwBA,IAAM,0BAA0BA,cAAAA,GAK9B,8DAGA,0FACA,mBACA,4EAGA,mFACA,+EACA,yBACA,6EACA,2EAEA,4JACA,sJACF;AAEA,IAAM,qCAAqCA,cAAAA,GAGzC,8CACA,4CACA,2BACF;AAUA,IAAa,sBAAsBA,cAAAA,GACjC,yBACA,gBACAC,gCAAAA,iCACAC,gCAAAA,qBACA,kCACF;AAMA,SAAS,WAAW,EAAE,WAAW,MAAM,GAAG,SAA0B;CAKlE,MAAM,WADYC,MAAM,WAAWC,gCAAAA,kBAClB,KAAa,QAAQ;CACtC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,aAAW;EACX,WAAWJ,cAAAA,GACT,qBACAK,gCAAAA,cAAc,WACdC,gCAAAA,eAAe,WACfC,gCAAAA,kBACA,6DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,8BAA8BP,cAAAA,GAClC,iDACA,iDACA,4CACF;AAIA,IAAM,uBAAuBA,cAAAA,GAC3B,+EACA,+EACA,6EACF;AAEA,IAAM,0BAA0BQ,aAAAA,IAC9BR,cAAAA,GACE,4EACA,6BACA,2DACA,oBACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,OAAO;EACT;EACA,OAAO;GACL,gBAAgB;GAChB,cAAc;GACd,eAAe;GACf,aAAa;EACf;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAS,OAAO,CAAC,gBAAgB,YAAY;GAAG,WAAW;EAAwB;EAC9F;GAAE,SAAS;GAAS,OAAO;GAAgB,WAAW;EAA0B;EAChF;GAAE,SAAS;GAAS,OAAO;GAAc,WAAW;EAA0B;CAChF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;CACT;AACF,CACF;AAQA,SAAS,gBAAgB,EACvB,WACA,QAAQ,gBACR,UAAU,WACV,SACA,GAAG,SACoB;CACvB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,gBAAc;EACd,WAAWA,cAAAA,GAAG,wBAAwB;GAAE;GAAO;EAAQ,CAAC,GAAG,SAAS;EACpE,UAAS,UAAS;GAIhB,IAAI,CADW,MAAM,OACT,QAAQ,4CAA0C,GAC5D,MAAM,cAAc,eAChB,cAAsD,iCAAiC,CAAC,EACxF,MAAM;GAEZ,UAAU,KAAK;EACjB;EACA,GAAI;CACL,CAAA;AAEL;AASA,IAAM,gCAAgCA,cAAAA,GACpC,4EACA,4EACA,0EACF;AAGA,IAAa,6BAA6BA,cAAAA,GACxC,gFACA,+BACA,gGACA,gCACA,6BACF;AAQA,SAAS,gBAAgB,EAAE,WAAW,QAAQ,OAAO,OAAO,QAAQ,cAAc,GAAG,SAA+B;CAClH,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACS,qBAAAA,OAAD;EACQ;EACN,aAAU;EACV,eAAa;EACb,WAAWT,cAAAA,GACT,4BAEA,qFACA,qFACA,2CAGA,qDACA,SACF;EACA,GAAIU,gCAAAA,oBAAoB,KAAK;EAC7B,GAAI;EACJ,GAAIC,6CAAAA,uBAAuB,YAAY;EACvC,GAAIC,2BAAAA,sBAAsB,KAAK;CAChC,CAAA;AAEL;AAQA,SAAS,mBAAmB,EAAE,WAAW,QAAQ,OAAO,GAAG,SAAkC;CAC3F,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,oCAAAA,iBAAD;EACE,aAAU;EACV,eAAa;EACb,WAAWb,cAAAA,GACT,4FACA,6BACA,gGACA,gCACA,+BACA,SACF;EACA,GAAIU,gCAAAA,oBAAoB,KAAK;EAC7B,GAAI;CACL,CAAA;AAEL;AAIA,SAAS,eAAe,EAAE,WAAW,GAAG,SAA8B;CACpE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EACE,WAAWV,cAAAA,GACT,0FACA,wCACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,iBAAiB,EAAE,OAAO,WAAW,UAAU,SAAS,OAAO,UAAU,GAAG,SAAgC;CACnH,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACc,eAAAA,QAAD;EAAc;EAAY;EAAe;EAAS,GAAI;CAAQ,CAAA;AACvE"}

package/dist/{input-group-g85FYfze.js → input-group-QKKV_ouF.js}

@@ -1,8 +1,9 @@
 import { t as cn } from "./utils-DQx8TpNT.js";
 import { t as cva } from "./dist-BhWtUEhi.js";
-import { ControlSizeContext, controlHeight } from "./primitives/control-size.es.js";
+import { controlIconState } from "./primitives/control-icon.es.js";
+import { ControlSizeContext, controlHeight, controlSpacing } from "./primitives/control-size.es.js";
 import { deprecatedErrorAria, fieldErrorRimWithin, inputSurfaceAndFocusWithinStyle } from "./primitives/form-element.es.js";
-import { t as Button } from "./Button-Bw1e3ONi.js";
+import { t as Button } from "./Button-CLXTbAY8.js";
 import { n as keepOwnAccessibleName } from "./field-control-aria-BaRSUUMR.js";
 import { textFieldAutofillProps } from "./primitives/password-manager-autofill.es.js";
 import { TextareaControl } from "./primitives/textarea-control.es.js";
@@ -19,12 +20,13 @@ function InputGroup({ className, size, ...props }) {
 		role: "group",
 		"data-slot": "input-group",
 		"data-size": resolved,
-		className: cn(inputGroupClassName, controlHeight[resolved], className),
+		className: cn(inputGroupClassName, controlHeight[resolved], controlSpacing[resolved], controlIconState, "has-[:disabled]:[--control-icon:var(--control-icon-rest)]", className),
 		...props
 	});
 }
 var inputGroupControlTextBySize = cn("group-data-[size=sm]/input-group:text-caption", "group-data-[size=md]/input-group:text-body-sm", "group-data-[size=lg]/input-group:text-body");
-var inputGroupAddonVariants = cva(cn("flex items-center justify-center gap-2 text-muted-foreground select-none", inputGroupControlTextBySize, "group-has-[:disabled]/input-group:text-muted-foreground", "[&>svg:not([class*='size-'])]:size-4"), {
+var inputGroupIconBySize = cn("group-data-[size=sm]/input-group:[&>svg:not([class*='size-'])]:size-icon-sm", "group-data-[size=md]/input-group:[&>svg:not([class*='size-'])]:size-icon-md", "group-data-[size=lg]/input-group:[&>svg:not([class*='size-'])]:size-icon-lg");
+var inputGroupAddonVariants = cva(cn("flex items-center justify-center gap-2 text-muted-foreground select-none", inputGroupControlTextBySize, "group-has-[:disabled]/input-group:text-muted-foreground", inputGroupIconBySize), {
 	variants: {
 		variant: {
 			default: "",
@@ -115,4 +117,4 @@ function InputGroupButton({ size = "icon-sm", variant = "ghost", type = "button"
 }
 export { InputGroupText as a, inputGroupControlClassName as c, InputGroupInput as i, InputGroupAddon as n, InputGroupTextarea as o, InputGroupButton as r, inputGroupClassName as s, InputGroup as t };
 
-//# sourceMappingURL=input-group-g85FYfze.js.map
+//# sourceMappingURL=input-group-QKKV_ouF.js.map

package/dist/input-group-QKKV_ouF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group-QKKV_ouF.js","names":["React","InputPrimitive"],"sources":["../src/ds/components/InputGroup/input-group.tsx"],"sourcesContent":["import { Input as InputPrimitive } from '@base-ui/react/input';\nimport { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { Button } from '@/ds/components/Button';\nimport type { ButtonProps } from '@/ds/components/Button/Button';\nimport { keepOwnAccessibleName } from '@/ds/components/Field/field-control-aria';\nimport { controlIconState } from '@/ds/primitives/control-icon';\nimport { ControlSizeContext, controlHeight, controlSpacing } from '@/ds/primitives/control-size';\nimport type { ControlSize } from '@/ds/primitives/control-size';\nimport {\n  deprecatedErrorAria,\n  fieldErrorRimWithin,\n  inputSurfaceAndFocusWithinStyle,\n} from '@/ds/primitives/form-element';\nimport { textFieldAutofillProps } from '@/ds/primitives/password-manager-autofill';\nimport { TextareaControl } from '@/ds/primitives/textarea-control';\nimport { cn } from '@/lib/utils';\n\n// Size flows down as `data-size` on the named group root (`group/input-group`), read by the\n// control through `group-data-[size=…]` variants — no prop drilling. The one context read is\n// upward: a wrapper that owns the rung (ButtonsGroup) hands it to the field.\n\nconst inputGroupBaseClassName = cn(\n  // `flex-1` (not `min-w-0`) lets the root fill a flex row while keeping its content-floor\n  // so it never collapses to 0. `items-center` centres the control: it carries its own\n  // h-form-* (2px taller than the root's content box), so stretch would push its text low\n  // / overflow the bottom border, while centring overlaps the (transparent) borders cleanly.\n  'group/input-group relative flex w-full flex-1 items-center',\n  // The wrapper owns its control's width — a bare control has no width of its own,\n  // so the group is the one that decides the input fills the remaining space.\n  '[&>[data-slot=input-group-control]]:min-w-0 [&>[data-slot=input-group-control]]:flex-1',\n  'text-foreground',\n  'has-[:disabled]:cursor-not-allowed has-[:disabled]:text-muted-foreground',\n  // Height is on the root (border-box) so the group matches a same-size sibling control.\n  // Auto height when vertical (block-* addon) or wrapping a textarea.\n  'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col',\n  'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col',\n  'has-[textarea]:h-auto',\n  'has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-0',\n  'has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-0',\n  // In flex-col, flex-1 zeroes the control's height; force flex-none + w-full instead.\n  'has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:w-full has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:flex-none',\n  'has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:w-full has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:flex-none',\n);\n\nconst inputGroupRoundedTextareaClassName = cn(\n  // Pill (rounded-full) only fits single-line inline shapes. Fall back to rounded-xl\n  // whenever the group goes vertical (block-* addon) or wraps a textarea.\n  'has-[>[data-align=block-start]]:rounded-xl',\n  'has-[>[data-align=block-end]]:rounded-xl',\n  'has-[textarea]:rounded-xl',\n);\n\n// A group wears the field material — the same `bg-card` plus rim an Input wears — so a\n// group and a bare field beside it are one surface. Its states move the rim, and they\n// read the nested control's focus (`focus-within`) because the wrapper never takes focus\n// itself. There is no second look: a transparent `outline` group existed alongside this\n// one and only ever produced two boundary languages for the same control, which is why\n// four of its call sites had wrapped it in a hand-made `bg-card rounded-full` div to get\n// the material back.\n// eslint-disable-next-line react-refresh/only-export-components -- shared with InputNumber\nexport const inputGroupClassName = cn(\n  inputGroupBaseClassName,\n  'rounded-full',\n  inputSurfaceAndFocusWithinStyle,\n  fieldErrorRimWithin,\n  inputGroupRoundedTextareaClassName,\n);\n\nexport type InputGroupProps = React.ComponentProps<'div'> & {\n  size?: ControlSize;\n};\n\nfunction InputGroup({ className, size, ...props }: InputGroupProps) {\n  // A wrapper's rung wins over the field's own: inside a ButtonsGroup the group owns the\n  // height of every segment, so a field that kept its own type scale would sit at one rung\n  // and read at another.\n  const groupSize = React.useContext(ControlSizeContext);\n  const resolved = groupSize ?? size ?? 'md';\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group\"\n      data-size={resolved}\n      className={cn(\n        inputGroupClassName,\n        controlHeight[resolved],\n        controlSpacing[resolved],\n        controlIconState,\n        'has-[:disabled]:[--control-icon:var(--control-icon-rest)]',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst inputGroupControlTextBySize = cn(\n  'group-data-[size=sm]/input-group:text-caption',\n  'group-data-[size=md]/input-group:text-body-sm',\n  'group-data-[size=lg]/input-group:text-body',\n);\n\n// An addon's icon takes the group's rung, as a Button's does (`iconSizeClasses`), unless it\n// sizes itself.\nconst inputGroupIconBySize = cn(\n  \"group-data-[size=sm]/input-group:[&>svg:not([class*='size-'])]:size-icon-sm\",\n  \"group-data-[size=md]/input-group:[&>svg:not([class*='size-'])]:size-icon-md\",\n  \"group-data-[size=lg]/input-group:[&>svg:not([class*='size-'])]:size-icon-lg\",\n);\n\nconst inputGroupAddonVariants = cva(\n  cn(\n    'flex items-center justify-center gap-2 text-muted-foreground select-none',\n    inputGroupControlTextBySize,\n    'group-has-[:disabled]/input-group:text-muted-foreground',\n    inputGroupIconBySize,\n  ),\n  {\n    variants: {\n      variant: {\n        default: '',\n        flush: '',\n      },\n      align: {\n        'inline-start': 'order-first pr-1 pl-3 has-[>button]:pl-1',\n        'inline-end': 'order-last pr-3 pl-1 has-[>button]:pr-1',\n        'block-start': 'order-first w-full justify-start border-b border-border px-3 pt-2 pb-1',\n        'block-end': 'order-last w-full justify-start border-t border-border px-3 pt-1 pb-2',\n      },\n    },\n    compoundVariants: [\n      { variant: 'flush', align: ['inline-start', 'inline-end'], className: 'gap-0 [&>button]:mx-0' },\n      { variant: 'flush', align: 'inline-start', className: 'pl-0 has-[>button]:pl-0' },\n      { variant: 'flush', align: 'inline-end', className: 'pr-0 has-[>button]:pr-0' },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      align: 'inline-start',\n    },\n  },\n);\n\nexport type InputGroupAddonProps = React.ComponentProps<'div'> &\n  Omit<VariantProps<typeof inputGroupAddonVariants>, 'variant'> & {\n    /** `flush` joins inline buttons without a gap or an inset from the field's outside edge. */\n    variant?: VariantProps<typeof inputGroupAddonVariants>['variant'];\n  };\n\nfunction InputGroupAddon({\n  className,\n  align = 'inline-start',\n  variant = 'default',\n  onClick,\n  ...props\n}: InputGroupAddonProps) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      data-variant={variant}\n      className={cn(inputGroupAddonVariants({ align, variant }), className)}\n      onClick={event => {\n        // Click on non-interactive addon area focuses the control inside the group.\n        // Skip when a button/input handled the click itself.\n        const target = event.target as HTMLElement;\n        if (!target.closest('button, input, textarea, [role=\"button\"]')) {\n          event.currentTarget.parentElement\n            ?.querySelector<HTMLInputElement | HTMLTextAreaElement>('[data-slot=input-group-control]')\n            ?.focus();\n        }\n        onClick?.(event);\n      }}\n      {...props}\n    />\n  );\n}\n\n// Size flows from the parent group's `data-size` (no React context). All four sizes are\n// written out so Tailwind's scanner emits them. The control is sized to the root's\n// content box (token height minus the 1px border on each side) so it never overflows the\n// root — otherwise, in a flex-column parent, the root's content-based minimum would win\n// over its explicit height and the group would render 2px taller than a sibling control.\n// The explicit height also keeps the control from collapsing to the line-height in block\n// mode (flex-col + flex-none).\nconst inputGroupControlHeightBySize = cn(\n  'group-data-[size=sm]/input-group:h-[calc(var(--spacing-control-sm)-2px)]',\n  'group-data-[size=md]/input-group:h-[calc(var(--spacing-control-md)-2px)]',\n  'group-data-[size=lg]/input-group:h-[calc(var(--spacing-control-lg)-2px)]',\n);\n\n// eslint-disable-next-line react-refresh/only-export-components -- shared with InputNumber\nexport const inputGroupControlClassName = cn(\n  'min-w-0 flex-1 bg-transparent px-3 text-label text-foreground outline-hidden',\n  inputGroupControlHeightBySize,\n  'placeholder:text-muted-foreground placeholder:transition-opacity placeholder:duration-normal',\n  'focus:placeholder:opacity-70',\n  'disabled:cursor-not-allowed',\n);\n\nexport type InputGroupInputProps = Omit<React.ComponentProps<'input'>, 'size'> & {\n  testId?: string;\n  /** @deprecated Wrap the group in `<Field invalid>`, or set `aria-invalid` on a control outside a `Field`. */\n  error?: boolean;\n};\n\nfunction InputGroupInput({ className, testId, error, type = 'text', autoComplete, ...props }: InputGroupInputProps) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input-group-control\"\n      data-testid={testId}\n      className={cn(\n        inputGroupControlClassName,\n        // WebKit and Firefox use different selectors for native number spinners.\n        '[&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none',\n        '[&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none',\n        '[&[type=number]]:[appearance:textfield]',\n        // type=\"search\": drop WebKit's native clear button so it doesn't double up with a\n        // custom clear control (e.g. the scorers toolbar's InputGroupButton).\n        '[&::-webkit-search-cancel-button]:appearance-none',\n        className,\n      )}\n      {...deprecatedErrorAria(error)}\n      {...props}\n      {...textFieldAutofillProps(autoComplete)}\n      {...keepOwnAccessibleName(props)}\n    />\n  );\n}\n\nexport type InputGroupTextareaProps = React.ComponentProps<'textarea'> & {\n  testId?: string;\n  /** @deprecated Wrap the group in `<Field invalid>`, or set `aria-invalid` on a control outside a `Field`. */\n  error?: boolean;\n};\n\nfunction InputGroupTextarea({ className, testId, error, ...props }: InputGroupTextareaProps) {\n  return (\n    <TextareaControl\n      data-slot=\"input-group-control\"\n      data-testid={testId}\n      className={cn(\n        'min-h-15 min-w-0 flex-1 resize-y bg-transparent px-3 py-2 text-foreground outline-hidden',\n        inputGroupControlTextBySize,\n        'placeholder:text-muted-foreground placeholder:transition-opacity placeholder:duration-normal',\n        'focus:placeholder:opacity-70',\n        'disabled:cursor-not-allowed',\n        className,\n      )}\n      {...deprecatedErrorAria(error)}\n      {...props}\n    />\n  );\n}\n\nexport type InputGroupTextProps = React.ComponentProps<'span'>;\n\nfunction InputGroupText({ className, ...props }: InputGroupTextProps) {\n  return (\n    <span\n      className={cn(\n        'flex items-center gap-2 text-caption text-muted-foreground [&_svg]:pointer-events-none',\n        \"[&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type InputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, 'size' | 'variant'> & {\n  size?: ButtonProps['size'];\n  variant?: ButtonProps['variant'];\n};\n\nfunction InputGroupButton({ size = 'icon-sm', variant = 'ghost', type = 'button', ...props }: InputGroupButtonProps) {\n  return <Button type={type} size={size} variant={variant} {...props} />;\n}\n\nexport { InputGroup, InputGroupAddon, InputGroupInput, InputGroupTextarea, InputGroupText, InputGroupButton };\n"],"mappings":";;;;;;;;;;;;;AAwBA,IAAM,0BAA0B,GAK9B,8DAGA,0FACA,mBACA,4EAGA,mFACA,+EACA,yBACA,6EACA,2EAEA,4JACA,sJACF;AAEA,IAAM,qCAAqC,GAGzC,8CACA,4CACA,2BACF;AAUA,IAAa,sBAAsB,GACjC,yBACA,gBACA,iCACA,qBACA,kCACF;AAMA,SAAS,WAAW,EAAE,WAAW,MAAM,GAAG,SAA0B;CAKlE,MAAM,WADYA,QAAM,WAAW,kBAClB,KAAa,QAAQ;CACtC,OACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,aAAW;EACX,WAAW,GACT,qBACA,cAAc,WACd,eAAe,WACf,kBACA,6DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,8BAA8B,GAClC,iDACA,iDACA,4CACF;AAIA,IAAM,uBAAuB,GAC3B,+EACA,+EACA,6EACF;AAEA,IAAM,0BAA0B,IAC9B,GACE,4EACA,6BACA,2DACA,oBACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,OAAO;EACT;EACA,OAAO;GACL,gBAAgB;GAChB,cAAc;GACd,eAAe;GACf,aAAa;EACf;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAS,OAAO,CAAC,gBAAgB,YAAY;GAAG,WAAW;EAAwB;EAC9F;GAAE,SAAS;GAAS,OAAO;GAAgB,WAAW;EAA0B;EAChF;GAAE,SAAS;GAAS,OAAO;GAAc,WAAW;EAA0B;CAChF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;CACT;AACF,CACF;AAQA,SAAS,gBAAgB,EACvB,WACA,QAAQ,gBACR,UAAU,WACV,SACA,GAAG,SACoB;CACvB,OACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,gBAAc;EACd,WAAW,GAAG,wBAAwB;GAAE;GAAO;EAAQ,CAAC,GAAG,SAAS;EACpE,UAAS,UAAS;GAIhB,IAAI,CADW,MAAM,OACT,QAAQ,4CAA0C,GAC5D,MAAM,cAAc,eAChB,cAAsD,iCAAiC,CAAC,EACxF,MAAM;GAEZ,UAAU,KAAK;EACjB;EACA,GAAI;CACL,CAAA;AAEL;AASA,IAAM,gCAAgC,GACpC,4EACA,4EACA,0EACF;AAGA,IAAa,6BAA6B,GACxC,gFACA,+BACA,gGACA,gCACA,6BACF;AAQA,SAAS,gBAAgB,EAAE,WAAW,QAAQ,OAAO,OAAO,QAAQ,cAAc,GAAG,SAA+B;CAClH,OACE,oBAACC,OAAD;EACQ;EACN,aAAU;EACV,eAAa;EACb,WAAW,GACT,4BAEA,qFACA,qFACA,2CAGA,qDACA,SACF;EACA,GAAI,oBAAoB,KAAK;EAC7B,GAAI;EACJ,GAAI,uBAAuB,YAAY;EACvC,GAAI,sBAAsB,KAAK;CAChC,CAAA;AAEL;AAQA,SAAS,mBAAmB,EAAE,WAAW,QAAQ,OAAO,GAAG,SAAkC;CAC3F,OACE,oBAAC,iBAAD;EACE,aAAU;EACV,eAAa;EACb,WAAW,GACT,4FACA,6BACA,gGACA,gCACA,+BACA,SACF;EACA,GAAI,oBAAoB,KAAK;EAC7B,GAAI;CACL,CAAA;AAEL;AAIA,SAAS,eAAe,EAAE,WAAW,GAAG,SAA8B;CACpE,OACE,oBAAC,QAAD;EACE,WAAW,GACT,0FACA,wCACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,iBAAiB,EAAE,OAAO,WAAW,UAAU,SAAS,OAAO,UAAU,GAAG,SAAgC;CACnH,OAAO,oBAAC,QAAD;EAAc;EAAY;EAAe;EAAS,GAAI;CAAQ,CAAA;AACvE"}

package/dist/layout/tabbed-container.cjs.js

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_tabbed_container = require("../tabbed-container-CFEImJOK.cjs");
+const require_tabbed_container = require("../tabbed-container-B4lCBgRP.cjs");
 exports.TabbedContainer = require_tabbed_container.TabbedContainer;

package/dist/layout/tabbed-container.es.js

@@ -1 +1 @@
-export { t as TabbedContainer } from "../tabbed-container-BKUqfEKy.js";
+export { t as TabbedContainer } from "../tabbed-container-DI1GI1Qv.js";

package/dist/lib/form/components/array-element-wrapper.cjs.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Button = require("../../../Button-YQRflC47.cjs");
+const require_Button = require("../../../Button-DLcMcuUL.cjs");
 const require_Txt = require("../../../Txt-BnoSqxKE.cjs");
 const require_components_Collapsible = require("../../../components/Collapsible.cjs.js");
 const require_components_DisclosureChevron = require("../../../components/DisclosureChevron.cjs.js");

package/dist/lib/form/components/array-element-wrapper.es.js

@@ -1,4 +1,4 @@
-import { t as Button } from "../../../Button-Bw1e3ONi.js";
+import { t as Button } from "../../../Button-CLXTbAY8.js";
 import { t as Txt } from "../../../Txt-BM6TVV_c.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../components/Collapsible.es.js";
 import { DisclosureChevron } from "../../../components/DisclosureChevron.es.js";

package/dist/lib/form/components/array-wrapper.cjs.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Button = require("../../../Button-YQRflC47.cjs");
+const require_Button = require("../../../Button-DLcMcuUL.cjs");
 const require_Txt = require("../../../Txt-BnoSqxKE.cjs");
 const require_lib_form_field_context = require("../field-context.cjs.js");
 let react = require("react");

package/dist/lib/form/components/array-wrapper.es.js

@@ -1,4 +1,4 @@
-import { t as Button } from "../../../Button-Bw1e3ONi.js";
+import { t as Button } from "../../../Button-CLXTbAY8.js";
 import { t as Txt } from "../../../Txt-BM6TVV_c.js";
 import { ArrayAddButtonContext, FormReadOnlyContext } from "../field-context.es.js";
 import { Children, useContext, useRef } from "react";

package/dist/lib/form/components/date-field.cjs.js

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("../../../rolldown-runtime-CmQyd0Gu.cjs");
 const require_utils = require("../../../utils-uDc1ofX1.cjs");
 const require_primitives_form_element = require("../../../primitives/form-element.cjs.js");
-const require_Button = require("../../../Button-YQRflC47.cjs");
+const require_Button = require("../../../Button-DLcMcuUL.cjs");
 const require_field_control_aria = require("../../../field-control-aria-Dw0_ObOU.cjs");
 const require_popover = require("../../../popover-BJqa6Hz6.cjs");
 const require_components_DateTimePicker = require("../../../components/DateTimePicker.cjs.js");

package/dist/lib/form/components/date-field.es.js

@@ -1,6 +1,6 @@
 import { t as cn } from "../../../utils-DQx8TpNT.js";
 import { fieldTriggerErrorBorder } from "../../../primitives/form-element.es.js";
-import { t as Button } from "../../../Button-Bw1e3ONi.js";
+import { t as Button } from "../../../Button-CLXTbAY8.js";
 import { i as useFieldControlAria } from "../../../field-control-aria-BaRSUUMR.js";
 import { i as PopoverTrigger, n as Popover, r as PopoverContent } from "../../../popover-CzHvTPk2.js";
 import { DatePicker } from "../../../components/DateTimePicker.es.js";

package/dist/lib/form/components/error-message.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("../../../rolldown-runtime-CmQyd0Gu.cjs");
-const require_Notice = require("../../../Notice-DWNeCe-t.cjs");
+const require_Notice = require("../../../Notice-JZ7SW7q6.cjs");
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/lib/form/components/error-message.es.js

@@ -1,4 +1,4 @@
-import { t as Notice } from "../../../Notice-CyKngbbv.js";
+import { t as Notice } from "../../../Notice-C-8oOZZF.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 // src/lib/form/components/error-message.tsx

package/dist/lib/form/components/form-submit-row.cjs.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_utils = require("../../../utils-uDc1ofX1.cjs");
 const require_icons_Icon = require("../../../icons/Icon.cjs.js");
-const require_Button = require("../../../Button-YQRflC47.cjs");
+const require_Button = require("../../../Button-DLcMcuUL.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 // src/lib/form/components/form-submit-row.tsx

package/dist/lib/form/components/form-submit-row.es.js

@@ -1,6 +1,6 @@
 import { t as cn } from "../../../utils-DQx8TpNT.js";
 import { Icon } from "../../../icons/Icon.es.js";
-import { t as Button } from "../../../Button-Bw1e3ONi.js";
+import { t as Button } from "../../../Button-CLXTbAY8.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Loader2 } from "lucide-react";
 // src/lib/form/components/form-submit-row.tsx

package/dist/lib/form/components/record-field.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("../../../rolldown-runtime-CmQyd0Gu.cjs");
-const require_Button = require("../../../Button-YQRflC47.cjs");
+const require_Button = require("../../../Button-DLcMcuUL.cjs");
 const require_input = require("../../../input-2hRXcZIu.cjs");
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react, 1);

package/dist/lib/form/components/record-field.es.js

@@ -1,4 +1,4 @@
-import { t as Button } from "../../../Button-Bw1e3ONi.js";
+import { t as Button } from "../../../Button-CLXTbAY8.js";
 import { t as Input } from "../../../input-0l1uzOBZ.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/lib/form/components/select-field.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("../../../rolldown-runtime-CmQyd0Gu.cjs");
-const require_select = require("../../../select-NySY9Men.cjs");
+const require_select = require("../../../select-Dg8L5ROX.cjs");
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/lib/form/components/select-field.es.js

@@ -1,4 +1,4 @@
-import { i as SelectItem, n as SelectContent, o as SelectTrigger, s as SelectValue, t as Select } from "../../../select-BbFpEBAY.js";
+import { i as SelectItem, n as SelectContent, o as SelectTrigger, s as SelectValue, t as Select } from "../../../select-BdIZEdcy.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/lib/form/components/select-field.tsx

package/dist/lib/form/components/submit-button.cjs.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("../../../rolldown-runtime-CmQyd0Gu.cjs");
-const require_Button = require("../../../Button-YQRflC47.cjs");
+const require_Button = require("../../../Button-DLcMcuUL.cjs");
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/lib/form/components/submit-button.es.js

@@ -1,4 +1,4 @@
-import { t as Button } from "../../../Button-Bw1e3ONi.js";
+import { t as Button } from "../../../Button-CLXTbAY8.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 // src/lib/form/components/submit-button.tsx

package/dist/{list-search-BEJmYa9a.cjs → list-search-BtRno5As.cjs}

@@ -4,7 +4,7 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let use_debounce = require("use-debounce");
 // src/ds/components/ListSearch/list-search.tsx
-var ListSearch = ({ onSearch, label, placeholder, debounceMs = 300, size, value: controlledValue, shortcutDisabled = false }) => {
+var ListSearch = ({ onSearch, label, placeholder, debounceMs = 300, size = "sm", value: controlledValue, shortcutDisabled = false }) => {
 	const [internalValue, setInternalValue] = (0, react.useState)(controlledValue ?? "");
 	const inputRef = (0, react.useRef)(null);
 	require_keyboard_use_keydown.useKeydown({ "mod+shift+f": () => {
@@ -47,4 +47,4 @@ Object.defineProperty(exports, "ListSearch", {
 	}
 });
 
-//# sourceMappingURL=list-search-BEJmYa9a.cjs.map
+//# sourceMappingURL=list-search-BtRno5As.cjs.map

package/dist/list-search-BtRno5As.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-search-BtRno5As.cjs","names":["useState","useRef","useDebouncedCallback","SearchInput"],"sources":["../src/ds/components/ListSearch/list-search.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { useDebouncedCallback } from 'use-debounce';\nimport { SearchInput } from '@/ds/components/SearchInput';\nimport type { SearchInputProps } from '@/ds/components/SearchInput';\nimport { useKeydown } from '@/lib/keyboard';\n\nexport type ListSearchProps = {\n  onSearch: (search: string) => void;\n  label: string;\n  placeholder: string;\n  debounceMs?: number;\n  /** Defaults to 'sm', the toolbar rung. */\n  size?: SearchInputProps['size'];\n  /**\n   * Optional controlled value. When provided, ListSearch stays in sync with this\n   * prop — useful when the parent needs to clear the input programmatically\n   * (e.g. from a Reset button). If omitted, ListSearch manages its own state.\n   */\n  value?: string;\n  /**\n   * Opts out of the Cmd/Ctrl+Shift+F focus shortcut. Pass this on secondary\n   * instances so two search fields on the same page don't fight over focus.\n   */\n  shortcutDisabled?: boolean;\n};\n\nexport const ListSearch = ({\n  onSearch,\n  label,\n  placeholder,\n  debounceMs = 300,\n  size = 'sm',\n  value: controlledValue,\n  shortcutDisabled = false,\n}: ListSearchProps) => {\n  const [internalValue, setInternalValue] = useState(controlledValue ?? '');\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useKeydown(\n    {\n      'mod+shift+f': () => {\n        inputRef.current?.focus();\n        inputRef.current?.select();\n      },\n    },\n    { enabled: !shortcutDisabled },\n  );\n\n  const debouncedSearch = useDebouncedCallback((val: string) => {\n    onSearch(val);\n  }, debounceMs);\n\n  // Sync internal state with controlled value (e.g. parent Reset clears it to '').\n  // Also cancel any pending debounced callback so a stale handleChange call\n  // can't overwrite the newly-applied controlled value.\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      debouncedSearch.cancel();\n      setInternalValue(controlledValue);\n    }\n  }, [controlledValue, debouncedSearch]);\n\n  useEffect(() => () => debouncedSearch.cancel(), [debouncedSearch]);\n\n  const searchNowOrDebounced = (next: string) => {\n    setInternalValue(next);\n    if (next) {\n      debouncedSearch(next);\n      return;\n    }\n    debouncedSearch.cancel();\n    onSearch('');\n  };\n\n  return (\n    <SearchInput\n      ref={inputRef}\n      label={label}\n      placeholder={placeholder}\n      size={size}\n      value={internalValue}\n      onValueChange={searchNowOrDebounced}\n      className=\"w-full max-w-120\"\n    />\n  );\n};\n"],"mappings":";;;;;;AA0BA,IAAa,cAAc,EACzB,UACA,OACA,aACA,aAAa,KACb,OAAO,MACP,OAAO,iBACP,mBAAmB,YACE;CACrB,MAAM,CAAC,eAAe,qBAAA,GAAoBA,MAAAA,SAAAA,CAAS,mBAAmB,EAAE;CACxE,MAAM,YAAA,GAAWC,MAAAA,OAAAA,CAAyB,IAAI;CAE9C,6BAAA,WACE,EACE,qBAAqB;EACnB,SAAS,SAAS,MAAM;EACxB,SAAS,SAAS,OAAO;CAC3B,EACF,GACA,EAAE,SAAS,CAAC,iBAAiB,CAC/B;CAEA,MAAM,mBAAA,GAAkBC,aAAAA,qBAAAA,EAAsB,QAAgB;EAC5D,SAAS,GAAG;CACd,GAAG,UAAU;CAKb,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,oBAAoB,KAAA,GAAW;GACjC,gBAAgB,OAAO;GACvB,iBAAiB,eAAe;EAClC;CACF,GAAG,CAAC,iBAAiB,eAAe,CAAC;CAErC,CAAA,GAAA,MAAA,UAAA,aAAsB,gBAAgB,OAAO,GAAG,CAAC,eAAe,CAAC;CAEjE,MAAM,wBAAwB,SAAiB;EAC7C,iBAAiB,IAAI;EACrB,IAAI,MAAM;GACR,gBAAgB,IAAI;GACpB;EACF;EACA,gBAAgB,OAAO;EACvB,SAAS,EAAE;CACb;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,+BAAAA,aAAD;EACE,KAAK;EACE;EACM;EACP;EACN,OAAO;EACP,eAAe;EACf,WAAU;CACX,CAAA;AAEL"}

package/dist/{list-search-bg7WzULj.js → list-search-CkhsTFdG.js}

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useDebouncedCallback } from "use-debounce";
 // src/ds/components/ListSearch/list-search.tsx
-var ListSearch = ({ onSearch, label, placeholder, debounceMs = 300, size, value: controlledValue, shortcutDisabled = false }) => {
+var ListSearch = ({ onSearch, label, placeholder, debounceMs = 300, size = "sm", value: controlledValue, shortcutDisabled = false }) => {
 	const [internalValue, setInternalValue] = useState(controlledValue ?? "");
 	const inputRef = useRef(null);
 	useKeydown({ "mod+shift+f": () => {
@@ -42,4 +42,4 @@ var ListSearch = ({ onSearch, label, placeholder, debounceMs = 300, size, value:
 };
 export { ListSearch as t };
 
-//# sourceMappingURL=list-search-bg7WzULj.js.map
+//# sourceMappingURL=list-search-CkhsTFdG.js.map

package/dist/list-search-CkhsTFdG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-search-CkhsTFdG.js","names":[],"sources":["../src/ds/components/ListSearch/list-search.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { useDebouncedCallback } from 'use-debounce';\nimport { SearchInput } from '@/ds/components/SearchInput';\nimport type { SearchInputProps } from '@/ds/components/SearchInput';\nimport { useKeydown } from '@/lib/keyboard';\n\nexport type ListSearchProps = {\n  onSearch: (search: string) => void;\n  label: string;\n  placeholder: string;\n  debounceMs?: number;\n  /** Defaults to 'sm', the toolbar rung. */\n  size?: SearchInputProps['size'];\n  /**\n   * Optional controlled value. When provided, ListSearch stays in sync with this\n   * prop — useful when the parent needs to clear the input programmatically\n   * (e.g. from a Reset button). If omitted, ListSearch manages its own state.\n   */\n  value?: string;\n  /**\n   * Opts out of the Cmd/Ctrl+Shift+F focus shortcut. Pass this on secondary\n   * instances so two search fields on the same page don't fight over focus.\n   */\n  shortcutDisabled?: boolean;\n};\n\nexport const ListSearch = ({\n  onSearch,\n  label,\n  placeholder,\n  debounceMs = 300,\n  size = 'sm',\n  value: controlledValue,\n  shortcutDisabled = false,\n}: ListSearchProps) => {\n  const [internalValue, setInternalValue] = useState(controlledValue ?? '');\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useKeydown(\n    {\n      'mod+shift+f': () => {\n        inputRef.current?.focus();\n        inputRef.current?.select();\n      },\n    },\n    { enabled: !shortcutDisabled },\n  );\n\n  const debouncedSearch = useDebouncedCallback((val: string) => {\n    onSearch(val);\n  }, debounceMs);\n\n  // Sync internal state with controlled value (e.g. parent Reset clears it to '').\n  // Also cancel any pending debounced callback so a stale handleChange call\n  // can't overwrite the newly-applied controlled value.\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      debouncedSearch.cancel();\n      setInternalValue(controlledValue);\n    }\n  }, [controlledValue, debouncedSearch]);\n\n  useEffect(() => () => debouncedSearch.cancel(), [debouncedSearch]);\n\n  const searchNowOrDebounced = (next: string) => {\n    setInternalValue(next);\n    if (next) {\n      debouncedSearch(next);\n      return;\n    }\n    debouncedSearch.cancel();\n    onSearch('');\n  };\n\n  return (\n    <SearchInput\n      ref={inputRef}\n      label={label}\n      placeholder={placeholder}\n      size={size}\n      value={internalValue}\n      onValueChange={searchNowOrDebounced}\n      className=\"w-full max-w-120\"\n    />\n  );\n};\n"],"mappings":";;;;;;AA0BA,IAAa,cAAc,EACzB,UACA,OACA,aACA,aAAa,KACb,OAAO,MACP,OAAO,iBACP,mBAAmB,YACE;CACrB,MAAM,CAAC,eAAe,oBAAoB,SAAS,mBAAmB,EAAE;CACxE,MAAM,WAAW,OAAyB,IAAI;CAE9C,WACE,EACE,qBAAqB;EACnB,SAAS,SAAS,MAAM;EACxB,SAAS,SAAS,OAAO;CAC3B,EACF,GACA,EAAE,SAAS,CAAC,iBAAiB,CAC/B;CAEA,MAAM,kBAAkB,sBAAsB,QAAgB;EAC5D,SAAS,GAAG;CACd,GAAG,UAAU;CAKb,gBAAgB;EACd,IAAI,oBAAoB,KAAA,GAAW;GACjC,gBAAgB,OAAO;GACvB,iBAAiB,eAAe;EAClC;CACF,GAAG,CAAC,iBAAiB,eAAe,CAAC;CAErC,sBAAsB,gBAAgB,OAAO,GAAG,CAAC,eAAe,CAAC;CAEjE,MAAM,wBAAwB,SAAiB;EAC7C,iBAAiB,IAAI;EACrB,IAAI,MAAM;GACR,gBAAgB,IAAI;GACpB;EACF;EACA,gBAAgB,OAAO;EACvB,SAAS,EAAE;CACb;CAEA,OACE,oBAAC,aAAD;EACE,KAAK;EACE;EACM;EACP;EACN,OAAO;EACP,eAAe;EACf,WAAU;CACX,CAAA;AAEL"}

package/dist/{observability-saved-views-Zlz74syw.js → observability-saved-views-CjKTEp1V.js}

@@ -1,11 +1,11 @@
 import { t as cn } from "./utils-DQx8TpNT.js";
-import { t as Button } from "./Button-Bw1e3ONi.js";
+import { t as Button } from "./Button-CLXTbAY8.js";
 import { t as Txt } from "./Txt-BM6TVV_c.js";
 import { t as Input } from "./input-0l1uzOBZ.js";
 import { t as DropdownMenu } from "./dropdown-menu-B4jY3J9e.js";
 import { Field, FieldError } from "./components/Field.es.js";
 import { i as PopoverTrigger, n as Popover, r as PopoverContent } from "./popover-CzHvTPk2.js";
-import { _ as ComboboxRoot, b as ComboboxTrigger, g as ComboboxList, o as ComboboxContent, p as ComboboxItemEnd, s as ComboboxEmpty, u as ComboboxItem, v as ComboboxSearch } from "./combobox-parts-W7KRQUsV.js";
+import { _ as ComboboxRoot, b as ComboboxTrigger, g as ComboboxList, o as ComboboxContent, p as ComboboxItemEnd, s as ComboboxEmpty, u as ComboboxItem, v as ComboboxSearch } from "./combobox-parts-D90ir0Py.js";
 import { useSavedViewsSource } from "./domains/observability/saved-views/saved-views-source.es.js";
 import { useHostedSavedViews } from "./domains/observability/saved-views/use-hosted-saved-views.es.js";
 import { useObservabilityHeaderSlot } from "./domains/observability/components/observability-header-slot.es.js";
@@ -87,7 +87,7 @@ function SavedViewPicker({ views, defaultLabel, newViewSettings, describeView, c
 					}), /* @__PURE__ */ jsxs(ComboboxContent, {
 						align: "end",
 						children: [
-							/* @__PURE__ */ jsx(ComboboxSearch, { placeholder: "Search views…" }),
+							/* @__PURE__ */ jsx(ComboboxSearch, { placeholder: "Search views" }),
 							/* @__PURE__ */ jsx(ComboboxEmpty, { children: "No views found." }),
 							/* @__PURE__ */ jsx(ComboboxList, { children: (item) => {
 								const view = item.viewId ? viewsById.get(item.viewId) : void 0;
@@ -296,4 +296,4 @@ function HostedSavedViewsBar({ page, searchParams, setSearchParams, columns, def
 }
 export { ObservabilitySavedViews as t };
 
-//# sourceMappingURL=observability-saved-views-Zlz74syw.js.map
+//# sourceMappingURL=observability-saved-views-CjKTEp1V.js.map