@reopt-ai/opt-ui 1.13.0 → 1.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/CHANGELOG.md +45 -0
  2. package/COMPONENT_CATALOG.md +644 -123
  3. package/README.md +35 -7
  4. package/dist/core/index.cjs +4 -4
  5. package/dist/core/index.d.cts +2 -2
  6. package/dist/core/index.d.ts +2 -2
  7. package/dist/core/index.js +2 -2
  8. package/dist/docs/02-components/01-core.md +261 -58
  9. package/dist/docs/02-components/02-visuals.md +1 -1
  10. package/dist/docs/02-components/03-shells.md +391 -65
  11. package/dist/docs/02-components/04-surfaces.md +1 -1
  12. package/dist/docs/02-components/index.md +4 -4
  13. package/dist/id-registry.cjs +32 -0
  14. package/dist/id-registry.js +32 -0
  15. package/dist/id-registry.json +68 -0
  16. package/dist/index.cjs +1196 -427
  17. package/dist/index.d.cts +208 -19
  18. package/dist/index.d.ts +208 -19
  19. package/dist/index.js +1050 -295
  20. package/dist/{key-pad-menu-DMmbQ1jF.js → key-pad-menu-BCOeYvsH.js} +59 -67
  21. package/dist/{key-pad-menu-BOVu97bj.d.cts → key-pad-menu-CaIsTHB2.d.cts} +22 -9
  22. package/dist/{key-pad-menu-0KWOnELe.cjs → key-pad-menu-Jaqxhx9P.cjs} +57 -77
  23. package/dist/{key-pad-menu-NlZ9zNF8.d.ts → key-pad-menu-odAEycIX.d.ts} +22 -9
  24. package/dist/meta.cjs +877 -26
  25. package/dist/meta.js +877 -26
  26. package/dist/{field-sidebar-CRdToHRO.js → replay-player-layout-BVUNsUS1.js} +904 -203
  27. package/dist/{field-sidebar-CxxSK4JO.cjs → replay-player-layout-Cmzptq89.cjs} +944 -201
  28. package/dist/{field-sidebar-D-rwuN_w.d.cts → replay-player-layout-DpqdfdQ6.d.ts} +246 -3
  29. package/dist/{field-sidebar-Dz7J4ett.d.ts → replay-player-layout-DuZW-gFF.d.cts} +246 -3
  30. package/dist/shells/index.cjs +58 -52
  31. package/dist/shells/index.d.cts +2 -2
  32. package/dist/shells/index.d.ts +2 -2
  33. package/dist/shells/index.js +2 -2
  34. package/dist/{text-truncate-Bd-0WkSP.js → text-truncate-B-8nJgnu.js} +200 -101
  35. package/dist/{text-truncate-eMzvU_7k.d.cts → text-truncate-DOxUijpB.d.cts} +3 -30
  36. package/dist/{text-truncate-eMzvU_7k.d.ts → text-truncate-DOxUijpB.d.ts} +3 -30
  37. package/dist/{text-truncate-BeYW6XZu.cjs → text-truncate-gQhpMy-Z.cjs} +214 -97
  38. package/dist/theme/server.d.cts +2 -2
  39. package/dist/theme/server.d.ts +2 -2
  40. package/package.json +2 -2
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- const require_text_truncate = require("./text-truncate-BeYW6XZu.cjs");
2
+ const require_text_truncate = require("./text-truncate-gQhpMy-Z.cjs");
3
3
  let react_jsx_runtime = require("react/jsx-runtime");
4
4
  let react = require("react");
5
5
  react = require_text_truncate.__toESM(react, 1);
@@ -8,7 +8,7 @@ let lucide_react = require("lucide-react");
8
8
  let ogl = require("ogl");
9
9
  let _reopt_ai_opt_palette = require("@reopt-ai/opt-palette");
10
10
  //#region src/core/text.tsx
11
- const _excluded$11 = [
11
+ const _excluded$10 = [
12
12
  "as",
13
13
  "variant",
14
14
  "tone",
@@ -24,7 +24,7 @@ const toneStyles$1 = {
24
24
  };
25
25
  /** Semantic body text whose visual role is controlled by foundation tokens. */
26
26
  function Text(_ref) {
27
- let { as, variant = "body", tone = "primary", truncate = false, className, children } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$11);
27
+ let { as, variant = "body", tone = "primary", truncate = false, className, children } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$10);
28
28
  const Component = as !== null && as !== void 0 ? as : "span";
29
29
  const elementProps = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, props), {}, {
30
30
  className: require_text_truncate.cn(`opt-type-${variant}`, toneStyles$1[tone], truncate && "truncate", className),
@@ -39,7 +39,7 @@ function Text(_ref) {
39
39
  }
40
40
  //#endregion
41
41
  //#region src/core/heading.tsx
42
- const _excluded$10 = [
42
+ const _excluded$9 = [
43
43
  "level",
44
44
  "variant",
45
45
  "className",
@@ -47,7 +47,7 @@ const _excluded$10 = [
47
47
  ];
48
48
  /** Semantic heading with independently selectable visual hierarchy. */
49
49
  function Heading(_ref) {
50
- let { level = 2, variant = `heading-${level}`, className, children } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$10);
50
+ let { level = 2, variant = `heading-${level}`, className, children } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$9);
51
51
  const Component = {
52
52
  1: "h1",
53
53
  2: "h2",
@@ -265,47 +265,6 @@ function OtpField({ length = 6, value: controlledValue, defaultValue = "", onCha
265
265
  }
266
266
  OtpField.displayName = "OtpField";
267
267
  //#endregion
268
- //#region src/core/toggle.tsx
269
- const _excluded$9 = [
270
- "size",
271
- "className",
272
- "children"
273
- ];
274
- const _excluded2$5 = [
275
- "className",
276
- "children",
277
- "orientation"
278
- ];
279
- const sizeStyles$6 = {
280
- sm: "h-8 min-w-8 px-2 text-xs gap-1.5",
281
- md: "h-10 min-w-10 px-3 text-sm gap-2"
282
- };
283
- const toggleBase = require_text_truncate.cn("inline-flex cursor-pointer items-center justify-center rounded-md border border-border bg-surface font-medium text-text-secondary", "hover:bg-bg-subtle hover:text-text-primary", "data-[pressed]:border-accent data-[pressed]:bg-accent-subtle data-[pressed]:text-accent", "disabled:pointer-events-none disabled:opacity-40", require_text_truncate.OPT_FOCUS_VISIBLE);
284
- /** A two-state (pressed) button. Use standalone or inside `ToggleGroup`. */
285
- function Toggle(_ref) {
286
- let { size = "md", className, children } = _ref, props = require_text_truncate._objectWithoutProperties(_ref, _excluded$9);
287
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.Toggle, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({ className: require_text_truncate.cn(toggleBase, sizeStyles$6[size], className) }, props), {}, {
288
- "data-opt-id": "GFCMY",
289
- "data-opt-slug": "toggle.Toggle",
290
- children
291
- }));
292
- }
293
- Toggle.displayName = "Toggle";
294
- /** A set of related toggles with shared selection and keyboard navigation. */
295
- function ToggleGroup(_ref2) {
296
- let { className, children, orientation = "horizontal" } = _ref2, props = require_text_truncate._objectWithoutProperties(_ref2, _excluded2$5);
297
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_reopt_ai_opt_ui_primitives.ToggleGroup, require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({
298
- orientation,
299
- "aria-orientation": orientation,
300
- className: require_text_truncate.cn("inline-flex gap-1", orientation === "vertical" ? "flex-col" : "flex-row", className)
301
- }, props), {}, {
302
- "data-opt-id": "47J37",
303
- "data-opt-slug": "toggle.ToggleGroup",
304
- children
305
- }));
306
- }
307
- ToggleGroup.displayName = "ToggleGroup";
308
- //#endregion
309
268
  //#region src/core/accordion.tsx
310
269
  const _excluded$8 = ["className"];
311
270
  const _excluded2$4 = ["className"];
@@ -583,7 +542,7 @@ function AvatarGroup(_ref5) {
583
542
  }
584
543
  //#endregion
585
544
  //#region src/core/identity.tsx
586
- const defaultLabels$2 = {
545
+ const defaultLabels$3 = {
587
546
  identified: "Identified",
588
547
  anonymous: "Anonymous"
589
548
  };
@@ -613,7 +572,7 @@ function resolveDisplay(name, secondary, id) {
613
572
  * lose track of when a table mixes profiles and devices.
614
573
  */
615
574
  function Identity({ name, secondary, id, avatarSrc, state, badge, size = "md", hideAvatar = false, labels: customLabels, className }) {
616
- const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$2), customLabels);
575
+ const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$3), customLabels);
617
576
  const { primary, sub } = resolveDisplay(name, secondary, id);
618
577
  const anonymous = state === "anonymous";
619
578
  const badgeContent = badge !== null && badge !== void 0 ? badge : state ? anonymous ? labels.anonymous : labels.identified : null;
@@ -1084,6 +1043,7 @@ function StepBuilder({ steps, onChange, label, addLabel = "Add step", maxSteps,
1084
1043
  StepBuilder.displayName = "StepBuilder";
1085
1044
  //#endregion
1086
1045
  //#region src/core/condition-builder.tsx
1046
+ const defaultLabels$2 = { previewSuffix: "matches" };
1087
1047
  const OPERATOR_LABELS = {
1088
1048
  equals: "equals",
1089
1049
  not_equals: "does not equal",
@@ -1142,8 +1102,9 @@ function collectConditionBuilderIds(groups) {
1142
1102
  };
1143
1103
  }
1144
1104
  /** Renders the condition builder component. */
1145
- function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, label, addConditionLabel = "Add condition", addGroupLabel = "Add group", addNestedGroupLabel = "Add nested group", nested = false, maxDepth = 3, conditionTypes, onPreview, previewCount, className, "aria-label": ariaLabel }) {
1105
+ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, label, addConditionLabel = "Add condition", addGroupLabel = "Add group", addNestedGroupLabel = "Add nested group", nested = false, maxDepth = 3, conditionTypes, onPreview, previewCount, labels: customLabels, className, "aria-label": ariaLabel }) {
1146
1106
  var _ref;
1107
+ const labels = require_text_truncate._objectSpread2(require_text_truncate._objectSpread2({}, defaultLabels$2), customLabels);
1147
1108
  const inheritedIdScope = react.useContext(ConditionBuilderIdScopeContext);
1148
1109
  const nextGroupIdRef = react.useRef(1);
1149
1110
  const nextConditionIdRef = react.useRef(1);
@@ -1360,7 +1321,8 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
1360
1321
  addNestedGroupLabel,
1361
1322
  nested,
1362
1323
  maxDepth: maxDepth - 1,
1363
- conditionTypes
1324
+ conditionTypes,
1325
+ labels: customLabels
1364
1326
  })
1365
1327
  }),
1366
1328
  /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -1403,9 +1365,9 @@ function ConditionBuilder({ groups, onChange, properties = DEFAULT_PROPERTIES, l
1403
1365
  onClick: addGroup,
1404
1366
  className: "self-start",
1405
1367
  children: ["+ ", addGroupLabel]
1406
- }), previewCount != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
1368
+ }), previewCount != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
1407
1369
  className: require_text_truncate.cn("text-text-secondary", "text-sm"),
1408
- children: [require_text_truncate.formatOptNumber(previewCount), " matches"]
1370
+ children: labels.formatPreview ? labels.formatPreview(previewCount) : `${require_text_truncate.formatOptNumber(previewCount)} ${labels.previewSuffix}`
1409
1371
  })]
1410
1372
  })
1411
1373
  ]
@@ -3686,6 +3648,7 @@ function ColorPalettePicker({ palettes, value, onValueChange, label = "Colour pa
3686
3648
  //#endregion
3687
3649
  //#region src/core/inline-edit.tsx
3688
3650
  const defaultLabels = {
3651
+ input: "Value",
3689
3652
  edit: (value) => `Edit ${value}`,
3690
3653
  save: "Save",
3691
3654
  cancel: "Cancel",
@@ -3721,24 +3684,39 @@ function InlineEdit({ value, onSave, as: Tag = "span", size = "md", placeholder,
3721
3684
  const [rejected, setRejected] = (0, react.useState)(false);
3722
3685
  const [saving, setSaving] = (0, react.useState)(false);
3723
3686
  const inputRef = (0, react.useRef)(null);
3687
+ const rootRef = (0, react.useRef)(null);
3688
+ const readButtonRef = (0, react.useRef)(null);
3689
+ const restoreFocusRef = (0, react.useRef)(false);
3690
+ const savingRef = (0, react.useRef)(false);
3691
+ const errorId = (0, react.useId)();
3724
3692
  (0, react.useEffect)(() => {
3725
3693
  if (!editing) setDraft(value);
3726
3694
  }, [value, editing]);
3727
- (0, react.useEffect)(() => {
3695
+ (0, react.useLayoutEffect)(() => {
3728
3696
  if (editing) {
3729
3697
  var _inputRef$current, _inputRef$current2;
3730
3698
  (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
3731
3699
  (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.select();
3700
+ } else if (restoreFocusRef.current) {
3701
+ var _readButtonRef$curren;
3702
+ restoreFocusRef.current = false;
3703
+ (_readButtonRef$curren = readButtonRef.current) === null || _readButtonRef$curren === void 0 || _readButtonRef$curren.focus();
3732
3704
  }
3733
3705
  }, [editing]);
3734
- const commit = async () => {
3735
- if (saving) return;
3706
+ const finishEditing = (restoreFocus) => {
3707
+ var _rootRef$current;
3708
+ restoreFocusRef.current = restoreFocus && (document.activeElement === document.body || Boolean((_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.contains(document.activeElement)));
3709
+ setEditing(false);
3710
+ };
3711
+ const commit = async (restoreFocus) => {
3712
+ if (savingRef.current || disabled) return;
3736
3713
  const next = draft.trim();
3737
3714
  if (next === value) {
3738
- setEditing(false);
3715
+ finishEditing(restoreFocus);
3739
3716
  setRejected(false);
3740
3717
  return;
3741
3718
  }
3719
+ savingRef.current = true;
3742
3720
  setSaving(true);
3743
3721
  try {
3744
3722
  if (await onSave(next) === false) {
@@ -3746,26 +3724,35 @@ function InlineEdit({ value, onSave, as: Tag = "span", size = "md", placeholder,
3746
3724
  return;
3747
3725
  }
3748
3726
  setRejected(false);
3749
- setEditing(false);
3727
+ finishEditing(restoreFocus);
3728
+ } catch (_unused) {
3729
+ setRejected(true);
3750
3730
  } finally {
3731
+ savingRef.current = false;
3751
3732
  setSaving(false);
3752
3733
  }
3753
3734
  };
3754
3735
  const cancel = () => {
3736
+ if (savingRef.current) return;
3755
3737
  setDraft(value);
3756
3738
  setRejected(false);
3757
- setEditing(false);
3739
+ finishEditing(true);
3758
3740
  };
3759
3741
  const handleKeyDown = (event) => {
3742
+ if (require_text_truncate.isComposingKey(event)) return;
3760
3743
  if (event.key === "Enter") {
3761
3744
  event.preventDefault();
3762
- commit();
3745
+ commit(true);
3763
3746
  } else if (event.key === "Escape") {
3764
3747
  event.preventDefault();
3765
3748
  cancel();
3766
3749
  }
3767
3750
  };
3768
3751
  if (editing) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
3752
+ ref: rootRef,
3753
+ onBlur: (event) => {
3754
+ if (!event.currentTarget.contains(event.relatedTarget)) commit(false);
3755
+ },
3769
3756
  className: require_text_truncate.cn("inline-flex min-w-0 items-center gap-element", className),
3770
3757
  "data-opt-id": "RQ0H2",
3771
3758
  "data-opt-slug": "inline-edit.InlineEdit",
@@ -3778,16 +3765,18 @@ function InlineEdit({ value, onSave, as: Tag = "span", size = "md", placeholder,
3778
3765
  setRejected(false);
3779
3766
  },
3780
3767
  onKeyDown: handleKeyDown,
3781
- onBlur: () => void commit(),
3782
3768
  placeholder,
3783
3769
  maxLength,
3784
- disabled: saving,
3770
+ readOnly: saving || disabled,
3771
+ "aria-busy": saving || void 0,
3772
+ "aria-label": text.input,
3785
3773
  "aria-invalid": rejected || void 0,
3786
- "aria-errormessage": rejected ? "inline-edit-error" : void 0,
3774
+ "aria-errormessage": rejected ? errorId : void 0,
3775
+ "aria-describedby": rejected ? errorId : void 0,
3787
3776
  className: require_text_truncate.cn(require_text_truncate.OPT_INPUT, sizeStyles$1[size], "min-w-0 flex-1")
3788
3777
  }),
3789
3778
  rejected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
3790
- id: "inline-edit-error",
3779
+ id: errorId,
3791
3780
  role: "alert",
3792
3781
  className: "sr-only",
3793
3782
  children: text.invalid
@@ -3795,9 +3784,9 @@ function InlineEdit({ value, onSave, as: Tag = "span", size = "md", placeholder,
3795
3784
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
3796
3785
  type: "button",
3797
3786
  "aria-label": text.save,
3798
- disabled: saving,
3787
+ disabled: saving || disabled,
3799
3788
  onMouseDown: (event) => event.preventDefault(),
3800
- onClick: () => void commit(),
3789
+ onClick: () => void commit(true),
3801
3790
  className: require_text_truncate.cn("text-success hover:bg-success-subtle rounded-md p-1", require_text_truncate.OPT_FOCUS_VISIBLE),
3802
3791
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {
3803
3792
  className: "size-4",
@@ -3807,6 +3796,7 @@ function InlineEdit({ value, onSave, as: Tag = "span", size = "md", placeholder,
3807
3796
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
3808
3797
  type: "button",
3809
3798
  "aria-label": text.cancel,
3799
+ disabled: saving,
3810
3800
  onMouseDown: (event) => event.preventDefault(),
3811
3801
  onClick: cancel,
3812
3802
  className: require_text_truncate.cn("text-text-tertiary hover:bg-bg-subtle rounded-md p-1", require_text_truncate.OPT_FOCUS_VISIBLE),
@@ -3818,10 +3808,12 @@ function InlineEdit({ value, onSave, as: Tag = "span", size = "md", placeholder,
3818
3808
  ]
3819
3809
  });
3820
3810
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
3811
+ ref: rootRef,
3821
3812
  className: require_text_truncate.cn("inline-flex min-w-0 items-center gap-element", className),
3822
3813
  "data-opt-id": "RQ0H2",
3823
3814
  "data-opt-slug": "inline-edit.InlineEdit",
3824
3815
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
3816
+ ref: readButtonRef,
3825
3817
  type: "button",
3826
3818
  disabled,
3827
3819
  onClick: () => setEditing(true),
@@ -4222,18 +4214,6 @@ Object.defineProperty(exports, "Text", {
4222
4214
  return Text;
4223
4215
  }
4224
4216
  });
4225
- Object.defineProperty(exports, "Toggle", {
4226
- enumerable: true,
4227
- get: function() {
4228
- return Toggle;
4229
- }
4230
- });
4231
- Object.defineProperty(exports, "ToggleGroup", {
4232
- enumerable: true,
4233
- get: function() {
4234
- return ToggleGroup;
4235
- }
4236
- });
4237
4217
  Object.defineProperty(exports, "VirtualList", {
4238
4218
  enumerable: true,
4239
4219
  get: function() {
@@ -1,8 +1,8 @@
1
1
 
2
- import { g as DateRangePickerProps, q as StatCard$1 } from "./text-truncate-eMzvU_7k.js";
2
+ import { U as StatCard$1, g as DateRangePickerProps } from "./text-truncate-DOxUijpB.js";
3
3
  import * as React$1 from "react";
4
4
  import { CSSProperties, ComponentPropsWithoutRef, HTMLAttributes, ImgHTMLAttributes, ReactNode } from "react";
5
- import { AccordionContentProps as PrimAccordionContentProps, AccordionItemProps as PrimAccordionItemProps, AccordionRootProps, AccordionTriggerProps as PrimAccordionTriggerProps, AlertDialogPanelProps, ComboboxGroupLabelProps, ComboboxGroupProps, ComboboxInputProps, ComboboxItemProps, ComboboxPopoverProps, ComboboxRootProps, Composite, CompositeItem, CompositeProvider, CompositeRow, DialogPanelProps, DialogRootProps, DisclosureContentProps as PrimDisclosureContentProps, DisclosureRootProps, DisclosureTriggerProps as PrimDisclosureTriggerProps, FormCheckboxProps, FormDescriptionProps, FormErrorProps, FormFieldProps, FormGroupLabelProps, FormGroupProps, FormInputProps, FormLabelProps, FormProvider, FormPushProps, FormRadioGroupProps, FormRadioProps, FormRemoveProps, FormResetProps, FormRootProps, FormStoreInstance, FormSubmitProps, FormSwitchProps, MenuButtonArrowProps, MenuItemCheckboxProps, MenuItemProps, MenuItemRadioProps, MenuPopoverProps, MenuRootProps, MenuSeparatorProps, MenuTriggerProps, MenubarContainerProps, MenubarRootProps, PopoverCloseProps, PopoverContentProps, PopoverRootProps, PopoverTriggerProps, SelectItemProps, SelectLabelProps, SelectPopoverProps, SelectRootProps, SelectTriggerProps, TabListProps, TabPanelProps, TabProps, TabsRootProps, ToggleGroupProps, ToggleProps, ToolbarButtonProps, ToolbarContainerProps, ToolbarRootProps, ToolbarSeparatorProps, TooltipAnchorProps, TooltipProps, TooltipRootProps, useFieldValue, useFormContext, useFormStore } from "@reopt-ai/opt-ui-primitives";
5
+ import { AccordionContentProps as PrimAccordionContentProps, AccordionItemProps as PrimAccordionItemProps, AccordionRootProps, AccordionTriggerProps as PrimAccordionTriggerProps, AlertDialogPanelProps, ComboboxGroupLabelProps, ComboboxGroupProps, ComboboxInputProps, ComboboxItemProps, ComboboxPopoverProps, ComboboxRootProps, Composite, CompositeItem, CompositeProvider, CompositeRow, DialogPanelProps, DialogRootProps, DisclosureContentProps as PrimDisclosureContentProps, DisclosureRootProps, DisclosureTriggerProps as PrimDisclosureTriggerProps, FormCheckboxProps, FormDescriptionProps, FormErrorProps, FormFieldProps, FormGroupLabelProps, FormGroupProps, FormInputProps, FormLabelProps, FormProvider, FormPushProps, FormRadioGroupProps, FormRadioProps, FormRemoveProps, FormResetProps, FormRootProps, FormStoreInstance, FormSubmitProps, FormSwitchProps, FormTextareaProps, MenuButtonArrowProps, MenuItemCheckboxProps, MenuItemProps, MenuItemRadioProps, MenuPopoverProps, MenuRootProps, MenuSeparatorProps, MenuTriggerProps, MenubarContainerProps, MenubarRootProps, PopoverCloseProps, PopoverContentProps, PopoverRootProps, PopoverTriggerProps, SelectItemProps, SelectLabelProps, SelectPopoverProps, SelectRootProps, SelectTriggerProps, TabListProps, TabPanelProps, TabProps, TabsRootProps, ToggleGroupProps, ToggleProps, ToolbarButtonProps, ToolbarContainerProps, ToolbarRootProps, ToolbarSeparatorProps, TooltipAnchorProps, TooltipProps, TooltipRootProps, useFieldValue, useFormContext, useFormStore } from "@reopt-ai/opt-ui-primitives";
6
6
  import { GroupImperativeHandle, GroupProps, Layout, PanelImperativeHandle, PanelProps, PanelSize, SeparatorProps } from "react-resizable-panels";
7
7
  //#region src/core/kbd.d.ts
8
8
  /** Props for the kbd component. */
@@ -1144,6 +1144,8 @@ interface SliderProps {
1144
1144
  value?: number;
1145
1145
  defaultValue?: number;
1146
1146
  onChange?: (value: number) => void;
1147
+ /** Called once when a pointer or keyboard edit finishes; useful for expensive seeks. */
1148
+ onValueCommit?: (value: number) => void;
1147
1149
  min?: number;
1148
1150
  max?: number;
1149
1151
  step?: number;
@@ -1157,7 +1159,7 @@ interface SliderProps {
1157
1159
  "aria-label"?: string;
1158
1160
  }
1159
1161
  /** Renders the slider component. */
1160
- declare function Slider({ value: controlledValue, defaultValue, onChange, min, max, step, label, showValue, formatValue, disabled, className, "aria-label": ariaLabel }: SliderProps): import("react").JSX.Element;
1162
+ declare function Slider({ value: controlledValue, defaultValue, onChange, onValueCommit, min, max, step, label, showValue, formatValue, disabled, className, "aria-label": ariaLabel }: SliderProps): import("react").JSX.Element;
1161
1163
  declare namespace Slider {
1162
1164
  var displayName: string;
1163
1165
  }
@@ -1260,23 +1262,24 @@ type FormInputProps$1 = FormInputProps;
1260
1262
  /** Renders the form input component. */
1261
1263
  declare function FormInput$1({ className, ...props }: FormInputProps$1): import("react").JSX.Element;
1262
1264
  /** Props for the form textarea component. */
1263
- type FormTextareaProps = Omit<ComponentPropsWithoutRef<"textarea">, "name"> & {
1264
- name: string;
1265
+ type FormTextareaProps$1 = FormTextareaProps & {
1265
1266
  resize?: "none" | "vertical" | "horizontal" | "both";
1266
1267
  };
1267
1268
  /** Renders the form textarea component. */
1268
- declare function FormTextarea({ className, resize, rows, name, ...props }: FormTextareaProps): import("react").JSX.Element;
1269
+ declare function FormTextarea$1({ className, resize, rows, name, ...props }: FormTextareaProps$1): import("react").JSX.Element;
1269
1270
  /** Props for the form select component. */
1270
1271
  type FormSelectProps = {
1271
1272
  name: string;
1273
+ id?: string;
1272
1274
  children: React.ReactNode;
1273
1275
  className?: string;
1274
1276
  placeholder?: string;
1275
1277
  minWidth?: number | string;
1276
1278
  "aria-label"?: string;
1279
+ "aria-describedby"?: string;
1277
1280
  };
1278
1281
  /** Renders the form select component. */
1279
- declare function FormSelect({ name, children, className, placeholder, minWidth, "aria-label": ariaLabel }: FormSelectProps): import("react").JSX.Element;
1282
+ declare function FormSelect({ name, id, children, className, placeholder, minWidth, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy }: FormSelectProps): import("react").JSX.Element;
1280
1283
  type FormSelectPopoverProps = ComponentPropsWithoutRef<typeof SelectPopover$1>;
1281
1284
  /** Renders the form select popover component. */
1282
1285
  declare function FormSelectPopover({ className, ...props }: FormSelectPopoverProps): import("react").JSX.Element;
@@ -1424,6 +1427,13 @@ interface ConditionTypeRenderer {
1424
1427
  label: string;
1425
1428
  render: (condition: ConditionDef, onChange: (updates: Partial<ConditionDef>) => void) => React$1.ReactNode;
1426
1429
  }
1430
+ /** Localized labels for the condition builder. */
1431
+ interface ConditionBuilderLabels {
1432
+ /** Word after the formatted preview count — "matches". */
1433
+ previewSuffix?: string;
1434
+ /** Replaces the whole preview text. Wins over `previewSuffix`. */
1435
+ formatPreview?: (count: number) => string;
1436
+ }
1427
1437
  /** Props for the condition builder component. */
1428
1438
  interface ConditionBuilderProps {
1429
1439
  groups: ConditionGroup[];
@@ -1444,11 +1454,13 @@ interface ConditionBuilderProps {
1444
1454
  onPreview?: (groups: ConditionGroup[]) => void;
1445
1455
  /** Live preview count to display */
1446
1456
  previewCount?: number;
1457
+ /** Overrides the preview wording; defaults stay English for existing consumers. */
1458
+ labels?: ConditionBuilderLabels;
1447
1459
  className?: string;
1448
1460
  "aria-label"?: string;
1449
1461
  }
1450
1462
  /** Renders the condition builder component. */
1451
- declare function ConditionBuilder({ groups, onChange, properties, label, addConditionLabel, addGroupLabel, addNestedGroupLabel, nested, maxDepth, conditionTypes, onPreview, previewCount, className, "aria-label": ariaLabel }: ConditionBuilderProps): React$1.JSX.Element;
1463
+ declare function ConditionBuilder({ groups, onChange, properties, label, addConditionLabel, addGroupLabel, addNestedGroupLabel, nested, maxDepth, conditionTypes, onPreview, previewCount, labels: customLabels, className, "aria-label": ariaLabel }: ConditionBuilderProps): React$1.JSX.Element;
1452
1464
  declare namespace ConditionBuilder {
1453
1465
  var displayName: string;
1454
1466
  }
@@ -2186,6 +2198,7 @@ declare function ColorPalettePicker({ palettes, value, onValueChange, label, hid
2186
2198
  //#region src/core/inline-edit.d.ts
2187
2199
  /** Localized strings for inline editing. */
2188
2200
  interface InlineEditLabels {
2201
+ input?: string;
2189
2202
  edit?: (value: string) => string;
2190
2203
  save?: string;
2191
2204
  cancel?: string;
@@ -2290,4 +2303,4 @@ interface KeyPadMenuProps {
2290
2303
  */
2291
2304
  declare function KeyPadMenu({ items, label, selection, value, onValueChange, columns, size, hideLabel, className }: KeyPadMenuProps): import("react").JSX.Element;
2292
2305
  //#endregion
2293
- export { DrawerSize as $, DescriptionListProps as $i, ToolbarContainer$1 as $n, DisclosureRoot$1 as $r, FormColorPickerProps as $t, ShaderSurfaceHandle as A, TextProps as Aa, Spinner as Ai, FormSwitch$1 as An, DialogFooterProps as Ar, CheckboxGroupProps as At, ShaderPresetCategory as B, CardDescriptionProps as Bi, TagInputProps as Bn, SelectRoot$1 as Br, PopoverRoot$1 as Bt, Facet as C, SeparatorProps$1 as Ca, SkeletonText as Ci, FormSelectPopover as Cn, AlertDialogPanelProps$1 as Cr, BlockLayoutProps as Ct, FacetItem as D, HeadingRole as Da, InputProps as Di, FormStarRating as Dn, DialogDisclosure$1 as Dr, RadioProps as Dt, FacetGroupProps as E, HeadingProps as Ea, Input as Ei, FormSliderProps as En, DialogDescription$1 as Er, RadioGroupProps as Et, SHADER_PRESETS as F, ButtonProps as Fi, FormTextareaProps as Fn, DialogRoot$1 as Fr, DropdownSeparator as Ft, VirtualListProps as G, CardProps as Gi, ColorPickerProps as Gn, TabPanel$1 as Gr, ConditionGroup as Gt, getShaderFragment as H, CardFooterProps as Hi, IconPicker as Hn, Tab$1 as Hr, ConditionBuilder as Ht, SHADER_PRESET_IDS as I, Card as Ii, useFieldValue as In, DialogSize as Ir, DropdownTrigger as It, DrawerClose as J, Identity as Ji, Slider as Jn, TabStatus as Jr, StepBuilder as Jt, Pagination as K, CardTitle as Ki, StarRating as Kn, TabPanelProps$1 as Kr, ConditionOperator as Kt, ShaderParamKey as L, CardContent as Li, useFormContext as Ln, SelectItem$1 as Lr, PopoverClose$1 as Lt, SHADER_OVERLAY_PARAM_KEYS as M, TextTone as Ma, Badge as Mi, FormTagInput as Mn, DialogHeaderProps as Mr, DropdownContent as Mt, SHADER_PARAM_FALLBACK as N, Kbd as Na, BadgeProps as Ni, FormTagInputProps as Nn, DialogHeading$1 as Nr, DropdownItem as Nt, FacetProps as O, Text as Oa, Alert as Oi, FormStarRatingProps as On, DialogDismiss$1 as Or, Checkbox as Ot, SHADER_PARAM_KEYS as P, KbdProps as Pa, Button as Pi, FormTextarea as Pn, DialogPanel$1 as Pr, DropdownMenu as Pt, DrawerSide as Q, DescriptionListLabels as Qi, ToolbarButton$1 as Qn, DisclosureContent$1 as Qr, FormColorPicker as Qt, ShaderParamSpec as R, CardContentProps as Ri, useFormStore as Rn, SelectLabel$1 as Rr, PopoverContent$1 as Rt, ExpressionTone as S, Separator$2 as Sa, SkeletonTable as Si, FormSelectItem as Sn, AlertDialogPanel$1 as Sr, BlockLayout as St, FacetGroupLabels as T, HeadingLevel as Ta, SwitchProps as Ti, FormSlider as Tn, DialogBodyProps as Tr, RadioGroup as Tt, getShaderPreset as U, CardHeader as Ui, IconPickerProps as Un, TabList$1 as Ur, ConditionBuilderProps as Ut, ShaderPresetId as V, CardFooter as Vi, IconDef as Vn, SelectTrigger$1 as Vr, PopoverTrigger$1 as Vt, VirtualList as W, CardHeaderProps as Wi, ColorPicker as Wn, TabListProps$1 as Wr, ConditionDef as Wt, DrawerPanelProps as X, DescriptionList as Xi, NumberInput as Xn, TabsRootProps$1 as Xr, StepDef as Xt, DrawerPanel as Y, IdentityProps as Yi, SliderProps as Yn, TabsRoot$1 as Yr, StepBuilderProps as Yt, DrawerRoot as Z, DescriptionListItem as Zi, NumberInputProps as Zn, TabsVariant as Zr, FormCheckbox$1 as Zt, HighlightProps as _, ToggleGroup$1 as _a, TextareaProps as _i, FormRadioGroup$1 as _n, ComboboxGroupLabel$1 as _r, ScrollAreaProps as _t, InlineEditLabels as a, BreadcrumbProps as aa, CompositeZone as ai, FormField$1 as an, MenuButtonArrow$1 as ar, PanelSize as at, ExpressionGroupProps as b, OtpField as ba, SkeletonCard as bi, FormRoot$1 as bn, ComboboxPopover$1 as br, BlockBaseProps as bt, ColorPaletteDisplay as c, AccordionContent$1 as ca, CircularProgress as ci, FormIconPicker as cn, MenuItemRadio$1 as cr, ResizablePanel as ct, ColorPalettePickerProps as d, AccordionRootProps as da, ProgressProps as di, FormLabel$1 as dn, MenuSeparator$1 as dr, ResizablePanelProps as dt, EmptyState as ea, DisclosureTrigger$1 as ei, FormControl$1 as en, ToolbarRoot$1 as er, Logo as et, PaletteKind as f, AccordionTrigger$1 as fa, Avatar as fi, FormNumberInput as fn, MenuTrigger$1 as fr, Section as ft, Highlight as g, Toggle$1 as ga, Textarea as gi, FormRadio$1 as gn, ComboboxGroup$1 as gr, ScrollArea as gt, LiveRegionProps as h, PrimAccordionTriggerProps as ha, AvatarProps as hi, FormPush$1 as hn, ComboboxEmpty as hr, ContainerProps as ht, InlineEdit as i, BreadcrumbItem as ia, CompositeRow as ii, FormError$1 as in, TooltipProvider as ir, PanelImperativeHandle as it, ShaderSurfaceProps as j, TextRole as ja, SpinnerProps as ji, FormSwitchProps$1 as jn, DialogHeader as jr, CheckboxProps as jt, ShaderSurface as k, TextElement as ka, AlertProps as ki, FormSubmit$1 as kn, DialogFooter as kr, CheckboxGroup as kt, ColorPaletteDisplayProps as l, AccordionItem$1 as la, CircularProgressProps as li, FormIconPickerProps as ln, MenuPopover$1 as lr, ResizablePanelGroup as lt, LiveRegion as m, PrimAccordionItemProps as ma, AvatarGroupProps as mi, FormProvider$1 as mn, MenubarRoot$1 as mr, Container as mt, KeyPadMenu as n, EmptyStateProps as na, CompositeItem as ni, FormDateRangePickerProps as nn, Tooltip$1 as nr, GroupImperativeHandle as nt, InlineEditProps as o, StatCard as oa, Meter$1 as oi, FormGroup$1 as on, MenuItem$1 as or, ResizableHandle as ot, THEME_PALETTES as p, PrimAccordionContentProps as pa, AvatarGroup as pi, FormNumberInputProps as pn, MenubarContainer$1 as pr, SectionProps as pt, PaginationProps as q, CardTitleProps as qi, StarRatingProps as qn, TabProps$1 as qr, ConditionTypeRenderer as qt, KeyPadMenuProps as r, Breadcrumb as ra, CompositeProvider as ri, FormDescription$1 as rn, TooltipAnchor$1 as rr, Layout as rt, ColorPalette as s, StatCardProps as sa, MeterProps as si, FormGroupLabel$1 as sn, MenuItemCheckbox$1 as sr, ResizableHandleProps as st, KeyPadItem as t, EmptyStateAction as ta, Composite as ti, FormDateRangePicker as tn, ToolbarSeparator$1 as tr, LogoProps as tt, ColorPalettePicker as u, AccordionRoot$1 as ua, Progress as ui, FormInput$1 as un, MenuRoot$1 as ur, ResizablePanelGroupProps as ut, Expression as v, ToggleGroupProps$1 as va, Skeleton as vi, FormRemove$1 as vn, ComboboxInput$1 as vr, PageHeader as vt, FacetGroup as w, Heading as wa, Switch as wi, FormSelectProps as wn, DialogBody as wr, Radio$1 as wt, ExpressionProps as x, OtpFieldProps as xa, SkeletonProps as xi, FormSelect as xn, ComboboxRoot$1 as xr, createBlock as xt, ExpressionGroup as y, ToggleProps$1 as ya, SkeletonAvatar as yi, FormReset$1 as yn, ComboboxItem$1 as yr, PageHeaderProps as yt, ShaderPreset as z, CardDescription as zi, TagInput as zn, SelectPopover$1 as zr, PopoverContentProps$1 as zt };
2306
+ export { DrawerSize as $, DescriptionListLabels as $i, ToolbarButton$1 as $n, DisclosureContent$1 as $r, FormColorPicker as $t, ShaderSurfaceHandle as A, TextElement as Aa, AlertProps as Ai, FormSubmit$1 as An, DialogFooter as Ar, CheckboxGroupProps as At, ShaderPresetCategory as B, CardDescription as Bi, TagInput as Bn, SelectPopover$1 as Br, PopoverRoot$1 as Bt, Facet as C, Separator$2 as Ca, SkeletonTable as Ci, FormSelectItem as Cn, AlertDialogPanel$1 as Cr, BlockLayoutProps as Ct, FacetItem as D, HeadingProps as Da, Input as Di, FormSliderProps as Dn, DialogDescription$1 as Dr, RadioProps as Dt, FacetGroupProps as E, HeadingLevel as Ea, SwitchProps as Ei, FormSlider as En, DialogBodyProps as Er, RadioGroupProps as Et, SHADER_PRESETS as F, KbdProps as Fa, Button as Fi, FormTextarea$1 as Fn, DialogPanel$1 as Fr, DropdownSeparator as Ft, VirtualListProps as G, CardHeaderProps as Gi, ColorPicker as Gn, TabListProps$1 as Gr, ConditionDef as Gt, getShaderFragment as H, CardFooter as Hi, IconDef as Hn, SelectTrigger$1 as Hr, ConditionBuilder as Ht, SHADER_PRESET_IDS as I, ButtonProps as Ii, FormTextareaProps$1 as In, DialogRoot$1 as Ir, DropdownTrigger as It, DrawerClose as J, CardTitleProps as Ji, StarRatingProps as Jn, TabProps$1 as Jr, ConditionTypeRenderer as Jt, Pagination as K, CardProps as Ki, ColorPickerProps as Kn, TabPanel$1 as Kr, ConditionGroup as Kt, ShaderParamKey as L, Card as Li, useFieldValue as Ln, DialogSize as Lr, PopoverClose$1 as Lt, SHADER_OVERLAY_PARAM_KEYS as M, TextRole as Ma, SpinnerProps as Mi, FormSwitchProps$1 as Mn, DialogHeader as Mr, DropdownContent as Mt, SHADER_PARAM_FALLBACK as N, TextTone as Na, Badge as Ni, FormTagInput as Nn, DialogHeaderProps as Nr, DropdownItem as Nt, FacetProps as O, HeadingRole as Oa, InputProps as Oi, FormStarRating as On, DialogDisclosure$1 as Or, Checkbox as Ot, SHADER_PARAM_KEYS as P, Kbd as Pa, BadgeProps as Pi, FormTagInputProps as Pn, DialogHeading$1 as Pr, DropdownMenu as Pt, DrawerSide as Q, DescriptionListItem as Qi, NumberInputProps as Qn, TabsVariant as Qr, FormCheckbox$1 as Qt, ShaderParamSpec as R, CardContent as Ri, useFormContext as Rn, SelectItem$1 as Rr, PopoverContent$1 as Rt, ExpressionTone as S, OtpFieldProps as Sa, SkeletonProps as Si, FormSelect as Sn, ComboboxRoot$1 as Sr, BlockLayout as St, FacetGroupLabels as T, Heading as Ta, Switch as Ti, FormSelectProps as Tn, DialogBody as Tr, RadioGroup as Tt, getShaderPreset as U, CardFooterProps as Ui, IconPicker as Un, Tab$1 as Ur, ConditionBuilderLabels as Ut, ShaderPresetId as V, CardDescriptionProps as Vi, TagInputProps as Vn, SelectRoot$1 as Vr, PopoverTrigger$1 as Vt, VirtualList as W, CardHeader as Wi, IconPickerProps as Wn, TabList$1 as Wr, ConditionBuilderProps as Wt, DrawerPanelProps as X, IdentityProps as Xi, SliderProps as Xn, TabsRoot$1 as Xr, StepBuilderProps as Xt, DrawerPanel as Y, Identity as Yi, Slider as Yn, TabStatus as Yr, StepBuilder as Yt, DrawerRoot as Z, DescriptionList as Zi, NumberInput as Zn, TabsRootProps$1 as Zr, StepDef as Zt, HighlightProps as _, Toggle$1 as _a, Textarea as _i, FormRadio$1 as _n, ComboboxGroup$1 as _r, ScrollAreaProps as _t, InlineEditLabels as a, BreadcrumbItem as aa, CompositeRow as ai, FormError$1 as an, TooltipProvider as ar, PanelSize as at, ExpressionGroupProps as b, ToggleProps$1 as ba, SkeletonAvatar as bi, FormReset$1 as bn, ComboboxItem$1 as br, BlockBaseProps as bt, ColorPaletteDisplay as c, StatCardProps as ca, MeterProps as ci, FormGroupLabel$1 as cn, MenuItemCheckbox$1 as cr, ResizablePanel as ct, ColorPalettePickerProps as d, AccordionRoot$1 as da, Progress as di, FormInput$1 as dn, MenuRoot$1 as dr, ResizablePanelProps as dt, DescriptionListProps as ea, DisclosureRoot$1 as ei, FormColorPickerProps as en, ToolbarContainer$1 as er, Logo as et, PaletteKind as f, AccordionRootProps as fa, ProgressProps as fi, FormLabel$1 as fn, MenuSeparator$1 as fr, Section as ft, Highlight as g, PrimAccordionTriggerProps as ga, AvatarProps as gi, FormPush$1 as gn, ComboboxEmpty as gr, ScrollArea as gt, LiveRegionProps as h, PrimAccordionItemProps as ha, AvatarGroupProps as hi, FormProvider$1 as hn, MenubarRoot$1 as hr, ContainerProps as ht, InlineEdit as i, Breadcrumb as ia, CompositeProvider as ii, FormDescription$1 as in, TooltipAnchor$1 as ir, PanelImperativeHandle as it, ShaderSurfaceProps as j, TextProps as ja, Spinner as ji, FormSwitch$1 as jn, DialogFooterProps as jr, CheckboxProps as jt, ShaderSurface as k, Text as ka, Alert as ki, FormStarRatingProps as kn, DialogDismiss$1 as kr, CheckboxGroup as kt, ColorPaletteDisplayProps as l, AccordionContent$1 as la, CircularProgress as li, FormIconPicker as ln, MenuItemRadio$1 as lr, ResizablePanelGroup as lt, LiveRegion as m, PrimAccordionContentProps as ma, AvatarGroup as mi, FormNumberInputProps as mn, MenubarContainer$1 as mr, Container as mt, KeyPadMenu as n, EmptyStateAction as na, Composite as ni, FormDateRangePicker as nn, ToolbarSeparator$1 as nr, GroupImperativeHandle as nt, InlineEditProps as o, BreadcrumbProps as oa, CompositeZone as oi, FormField$1 as on, MenuButtonArrow$1 as or, ResizableHandle as ot, THEME_PALETTES as p, AccordionTrigger$1 as pa, Avatar as pi, FormNumberInput as pn, MenuTrigger$1 as pr, SectionProps as pt, PaginationProps as q, CardTitle as qi, StarRating as qn, TabPanelProps$1 as qr, ConditionOperator as qt, KeyPadMenuProps as r, EmptyStateProps as ra, CompositeItem as ri, FormDateRangePickerProps as rn, Tooltip$1 as rr, Layout as rt, ColorPalette as s, StatCard as sa, Meter$1 as si, FormGroup$1 as sn, MenuItem$1 as sr, ResizableHandleProps as st, KeyPadItem as t, EmptyState as ta, DisclosureTrigger$1 as ti, FormControl$1 as tn, ToolbarRoot$1 as tr, LogoProps as tt, ColorPalettePicker as u, AccordionItem$1 as ua, CircularProgressProps as ui, FormIconPickerProps as un, MenuPopover$1 as ur, ResizablePanelGroupProps as ut, Expression as v, ToggleGroup$1 as va, TextareaProps as vi, FormRadioGroup$1 as vn, ComboboxGroupLabel$1 as vr, PageHeader as vt, FacetGroup as w, SeparatorProps$1 as wa, SkeletonText as wi, FormSelectPopover as wn, AlertDialogPanelProps$1 as wr, Radio$1 as wt, ExpressionProps as x, OtpField as xa, SkeletonCard as xi, FormRoot$1 as xn, ComboboxPopover$1 as xr, createBlock as xt, ExpressionGroup as y, ToggleGroupProps$1 as ya, Skeleton as yi, FormRemove$1 as yn, ComboboxInput$1 as yr, PageHeaderProps as yt, ShaderPreset as z, CardContentProps as zi, useFormStore as zn, SelectLabel$1 as zr, PopoverContentProps$1 as zt };