@reopt-ai/opt-ui 1.12.4 → 1.13.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 (39) hide show
  1. package/CHANGELOG.md +236 -0
  2. package/COMPONENT_CATALOG.md +290 -111
  3. package/dist/core/index.cjs +13 -13
  4. package/dist/core/index.d.cts +2 -2
  5. package/dist/core/index.d.ts +2 -2
  6. package/dist/core/index.js +2 -2
  7. package/dist/docs/02-components/01-core.md +49 -49
  8. package/dist/docs/02-components/02-visuals.md +1 -1
  9. package/dist/docs/02-components/03-shells.md +260 -63
  10. package/dist/docs/02-components/04-surfaces.md +1 -1
  11. package/dist/docs/02-components/index.md +4 -4
  12. package/dist/{field-sidebar-C8bDzGPs.js → field-sidebar-CRdToHRO.js} +3975 -235
  13. package/dist/{field-sidebar-DX5wP0qn.cjs → field-sidebar-CxxSK4JO.cjs} +4338 -244
  14. package/dist/{field-sidebar-Ct8c9L4V.d.cts → field-sidebar-D-rwuN_w.d.cts} +824 -2
  15. package/dist/{field-sidebar-YaWHfLLW.d.ts → field-sidebar-Dz7J4ett.d.ts} +824 -2
  16. package/dist/id-registry.cjs +72 -0
  17. package/dist/id-registry.js +72 -0
  18. package/dist/id-registry.json +153 -0
  19. package/dist/index.cjs +334 -1419
  20. package/dist/index.d.cts +51 -86
  21. package/dist/index.d.ts +51 -86
  22. package/dist/index.js +248 -1356
  23. package/dist/{key-pad-menu-1YN221Oi.cjs → key-pad-menu-0KWOnELe.cjs} +53 -483
  24. package/dist/{key-pad-menu-CwcY_Vps.d.cts → key-pad-menu-BOVu97bj.d.cts} +4 -55
  25. package/dist/{key-pad-menu-CUiQ-vKw.js → key-pad-menu-DMmbQ1jF.js} +54 -418
  26. package/dist/{key-pad-menu-WBJShCJn.d.ts → key-pad-menu-NlZ9zNF8.d.ts} +4 -55
  27. package/dist/meta.cjs +896 -7
  28. package/dist/meta.js +896 -7
  29. package/dist/shells/index.cjs +20 -1
  30. package/dist/shells/index.d.cts +2 -2
  31. package/dist/shells/index.d.ts +2 -2
  32. package/dist/shells/index.js +2 -2
  33. package/dist/{text-truncate-BFWd2cE_.js → text-truncate-Bd-0WkSP.js} +463 -99
  34. package/dist/{text-truncate-DsG5UAOY.cjs → text-truncate-BeYW6XZu.cjs} +525 -101
  35. package/dist/{text-truncate-CQyfUZvq.d.cts → text-truncate-eMzvU_7k.d.cts} +52 -1
  36. package/dist/{text-truncate-CQyfUZvq.d.ts → text-truncate-eMzvU_7k.d.ts} +52 -1
  37. package/dist/theme/server.cjs +2 -2
  38. package/dist/theme/server.js +2 -2
  39. package/package.json +6 -2
@@ -4,8 +4,9 @@ import { twMerge } from "tailwind-merge";
4
4
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
5
5
  import * as React from "react";
6
6
  import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
7
- import { AlertDialogPanel, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxPopover, ComboboxRoot, Composite, CompositeItem, CompositeProvider, CompositeRow, DialogDescription, DialogDisclosure, DialogDismiss, DialogHeading, DialogPanel, DialogRoot, DisclosureContent, DisclosureRoot, DisclosureTrigger, FormCheckbox, FormControl, FormDescription, FormError, FormField, FormGroup, FormGroupLabel, FormInput, FormLabel, FormProvider, FormPush, FormRadio, FormRadioGroup, FormRemove, FormReset, FormRoot, FormSubmit, FormSwitch, MenuButtonArrow, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuRoot, MenuSeparator, MenuTrigger, MenubarContainer, MenubarRoot, Meter, PopoverClose, PopoverContent, PopoverRoot, PopoverTrigger, SelectItem, SelectLabel, SelectPopover, SelectRoot, SelectTrigger, Tab, TabList, TabPanel, TabsRoot, ToolbarButton, ToolbarContainer, ToolbarRoot, ToolbarSeparator, Tooltip, TooltipAnchor, TooltipProvider, useFieldValue, useFormContext, useFormStore } from "@reopt-ai/opt-ui-primitives";
8
- import { AtSign, Bell, Binary, Braces, Brackets, Calendar, CalendarClock, CalendarDays, ChartColumn, Check, ChevronLeft, ChevronRight, CircleAlert, CircleCheck, CircleDollarSign, CircleHelp, CreditCard, Download, Eye, FileText, Fingerprint, Flag, Folder, Globe, Hash, Heart, Info, Layers, Link2, List, LogIn, Mail, MapPin, MessageCircle, MousePointerClick, Network, Percent, Search, Settings, Share2, ShoppingCart, Sigma, Star, Timer, ToggleLeft, TrendingUp, TriangleAlert, Type, Upload, User, UserPlus, XCircle, Zap } from "lucide-react";
7
+ import { AlertDialogPanel, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxPopover, ComboboxRoot, Composite, CompositeItem, CompositeProvider, CompositeRow, DialogDescription, DialogDisclosure, DialogDismiss, DialogHeading, DialogPanel, DialogRoot, DisclosureContent, DisclosureRoot, DisclosureTrigger, FormCheckbox, FormControl, FormDescription, FormError, FormField, FormGroup, FormGroupLabel, FormInput, FormLabel, FormProvider, FormPush, FormRadio, FormRadioGroup, FormRemove, FormReset, FormRoot, FormSubmit, FormSwitch, MenuButtonArrow, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuRoot, MenuSeparator, MenuTrigger, MenubarContainer, MenubarRoot, Meter, PopoverClose, PopoverContent, PopoverRoot, PopoverTrigger, SelectItem, SelectLabel, SelectPopover, SelectRoot, SelectTrigger, Tab, TabList, TabPanel, TabsRoot, ToolbarButton, ToolbarContainer, ToolbarRoot, ToolbarSeparator, Tooltip, TooltipAnchor, TooltipRoot, useFieldValue, useFormContext, useFormStore } from "@reopt-ai/opt-ui-primitives";
8
+ import { AtSign, Bell, Binary, Braces, Brackets, Calendar, CalendarClock, CalendarDays, ChartColumn, Check, ChevronLeft, ChevronRight, CircleAlert, CircleCheck, CircleDollarSign, CircleHelp, Copy, CreditCard, Download, Eye, FileText, Fingerprint, Flag, Folder, Globe, GripVertical, Hash, Heart, Info, Layers, Link2, List, LogIn, Mail, MapPin, MessageCircle, MousePointerClick, Network, Percent, Search, Settings, Share2, ShoppingCart, Sigma, Star, Timer, ToggleLeft, TrendingUp, TriangleAlert, Type, Upload, User, UserPlus, XCircle, Zap } from "lucide-react";
9
+ import { Group, Panel, Separator as Separator$1 } from "react-resizable-panels";
9
10
  //#region src/lib/cn.ts
10
11
  /** Handles cn. */
11
12
  function cn(...inputs) {
@@ -220,7 +221,7 @@ function useControlledState(defaultValue, controlledValue, onChange) {
220
221
  }
221
222
  //#endregion
222
223
  //#region src/core/skeleton.tsx
223
- const _excluded$17 = [
224
+ const _excluded$21 = [
224
225
  "variant",
225
226
  "width",
226
227
  "height",
@@ -229,9 +230,9 @@ const _excluded$17 = [
229
230
  "className",
230
231
  "style"
231
232
  ];
232
- const _excluded2$9 = ["lines", "className"];
233
- const _excluded3$8 = ["size", "className"];
234
- const _excluded4$6 = ["className"];
233
+ const _excluded2$11 = ["lines", "className"];
234
+ const _excluded3$10 = ["size", "className"];
235
+ const _excluded4$7 = ["className"];
235
236
  const variantStyles$4 = {
236
237
  text: "rounded h-4",
237
238
  circular: "rounded-full",
@@ -239,7 +240,7 @@ const variantStyles$4 = {
239
240
  };
240
241
  /** Renders the skeleton component. */
241
242
  function Skeleton(_ref) {
242
- let { variant = "text", width, height, lines = 1, animated = true, className, style } = _ref, props = _objectWithoutProperties(_ref, _excluded$17);
243
+ let { variant = "text", width, height, lines = 1, animated = true, className, style } = _ref, props = _objectWithoutProperties(_ref, _excluded$21);
243
244
  const baseClass = cn("bg-bg-subtle", animated && "animate-pulse", variantStyles$4[variant], className);
244
245
  const computedStyle = _objectSpread2({
245
246
  width: typeof width === "number" ? `${width}px` : width,
@@ -275,7 +276,7 @@ function Skeleton(_ref) {
275
276
  }
276
277
  /** Renders the skeleton text component. */
277
278
  function SkeletonText(_ref2) {
278
- let { lines = 3, className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$9);
279
+ let { lines = 3, className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$11);
279
280
  return /* @__PURE__ */ jsx(Skeleton, _objectSpread2(_objectSpread2({
280
281
  variant: "text",
281
282
  lines,
@@ -287,7 +288,7 @@ function SkeletonText(_ref2) {
287
288
  }
288
289
  /** Renders the skeleton avatar component. */
289
290
  function SkeletonAvatar(_ref3) {
290
- let { size = 40, className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$8);
291
+ let { size = 40, className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$10);
291
292
  return /* @__PURE__ */ jsx(Skeleton, _objectSpread2(_objectSpread2({
292
293
  variant: "circular",
293
294
  width: size,
@@ -300,7 +301,7 @@ function SkeletonAvatar(_ref3) {
300
301
  }
301
302
  /** Renders the skeleton card component. */
302
303
  function SkeletonCard(_ref4) {
303
- let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$6);
304
+ let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$7);
304
305
  return /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({ className: cn("gap-group flex flex-col", className) }, props), {}, {
305
306
  "data-opt-id": "34V5D",
306
307
  "data-opt-slug": "skeleton.SkeletonCard",
@@ -494,7 +495,7 @@ const koBreadcrumbLabels = {
494
495
  navAriaLabel: "{label}(으)로 이동" };
495
496
  //#endregion
496
497
  //#region src/core/button.tsx
497
- const _excluded$16 = [
498
+ const _excluded$20 = [
498
499
  "variant",
499
500
  "size",
500
501
  "loading",
@@ -511,18 +512,18 @@ const variantStyles$3 = {
511
512
  ghost: "text-text-secondary hover:bg-bg-subtle active:bg-bg-muted focus-visible:ring-offset-1",
512
513
  danger: "bg-danger text-danger-fg hover:bg-danger active:bg-danger focus-visible:ring-offset-2"
513
514
  };
514
- const sizeStyles$5 = {
515
+ const sizeStyles$6 = {
515
516
  sm: "h-[var(--opt-control-sm)] px-[var(--opt-control-padding-sm)] text-xs gap-[var(--opt-space-1-5)]",
516
517
  md: "h-[var(--opt-control-md)] px-[var(--opt-control-padding-md)] text-sm gap-[var(--opt-space-2)]",
517
518
  lg: "h-[var(--opt-control-lg)] px-[var(--opt-control-padding-lg)] text-base gap-[var(--opt-space-2)]"
518
519
  };
519
520
  /** Renders the button component. */
520
521
  function Button(_ref) {
521
- let { variant = "primary", size = "md", loading = false, leftIcon, rightIcon, className, disabled, children, "aria-busy": ariaBusy } = _ref, props = _objectWithoutProperties(_ref, _excluded$16);
522
+ let { variant = "primary", size = "md", loading = false, leftIcon, rightIcon, className, disabled, children, "aria-busy": ariaBusy } = _ref, props = _objectWithoutProperties(_ref, _excluded$20);
522
523
  const isDisabled = disabled || loading;
523
524
  return /* @__PURE__ */ jsxs("button", _objectSpread2(_objectSpread2({
524
525
  type: "button",
525
- className: cn("inline-flex cursor-pointer items-center justify-center rounded-lg font-medium transition-colors", OPT_FOCUS_VISIBLE, variantStyles$3[variant], sizeStyles$5[size], isDisabled && "pointer-events-none cursor-not-allowed opacity-50", className),
526
+ className: cn("inline-flex cursor-pointer items-center justify-center rounded-lg font-medium transition-colors", OPT_FOCUS_VISIBLE, variantStyles$3[variant], sizeStyles$6[size], isDisabled && "pointer-events-none cursor-not-allowed opacity-50", className),
526
527
  disabled: isDisabled
527
528
  }, props), {}, {
528
529
  "aria-busy": loading ? true : ariaBusy,
@@ -624,8 +625,111 @@ function EmptyState({ icon, title, description, body, footer, actions, className
624
625
  });
625
626
  }
626
627
  //#endregion
628
+ //#region src/core/description-list.tsx
629
+ const defaultLabels = {
630
+ copy: (term) => `Copy ${term}`,
631
+ copied: "Copied",
632
+ empty: "—"
633
+ };
634
+ const columnsClass = {
635
+ 1: "grid-cols-1",
636
+ 2: "grid-cols-1 sm:grid-cols-2",
637
+ 3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
638
+ 4: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4"
639
+ };
640
+ function CopyButton({ value, label, copiedLabel }) {
641
+ const [copied, setCopied] = useState(false);
642
+ const handleCopy = useCallback(() => {
643
+ var _navigator$clipboard;
644
+ (_navigator$clipboard = navigator.clipboard) === null || _navigator$clipboard === void 0 || _navigator$clipboard.writeText(value).then(() => {
645
+ setCopied(true);
646
+ window.setTimeout(() => setCopied(false), 1500);
647
+ });
648
+ }, [value]);
649
+ return /* @__PURE__ */ jsx("button", {
650
+ type: "button",
651
+ onClick: handleCopy,
652
+ "aria-label": copied ? copiedLabel : label,
653
+ className: cn(OPT_FOCUS_VISIBLE, OPT_TEXT_TERTIARY, "hover:text-text-primary shrink-0 rounded p-0.5 transition-colors"),
654
+ children: copied ? /* @__PURE__ */ jsx(Check, {
655
+ className: "size-3.5",
656
+ "aria-hidden": "true"
657
+ }) : /* @__PURE__ */ jsx(Copy, {
658
+ className: "size-3.5",
659
+ "aria-hidden": "true"
660
+ })
661
+ });
662
+ }
663
+ /**
664
+ * DescriptionList — the labelled facts about one thing.
665
+ *
666
+ * Detail views collect a dozen short fields that each mean nothing without
667
+ * their label, and hand-rolling them as a `<div>` grid loses the term/value
668
+ * association that assistive tech needs. This keeps the pairs in a real `<dl>`
669
+ * while still laying them out as boxed cells.
670
+ *
671
+ * @example
672
+ * ```tsx
673
+ * <DescriptionList
674
+ * layout="grid"
675
+ * columns={2}
676
+ * items={[
677
+ * { id: "id", term: "Session ID", description: session.id, copyValue: session.id },
678
+ * { id: "entry", term: "Entry path", description: session.entryPath },
679
+ * ]}
680
+ * />
681
+ * ```
682
+ */
683
+ function DescriptionList({ items, layout = "grid", columns = 2, compressed = false, labels: customLabels, className }) {
684
+ const labels = _objectSpread2(_objectSpread2({}, defaultLabels), customLabels);
685
+ if (layout === "inline") return /* @__PURE__ */ jsx("dl", {
686
+ className: cn("flex flex-wrap items-baseline gap-x-6 gap-y-2", className),
687
+ "data-opt-id": "1NPD2",
688
+ "data-opt-slug": "description-list.DescriptionList",
689
+ children: items.map((item) => /* @__PURE__ */ jsxs("div", {
690
+ className: "flex items-baseline gap-2",
691
+ children: [/* @__PURE__ */ jsx("dt", {
692
+ className: cn(OPT_TEXT_TERTIARY, "text-xs"),
693
+ title: item.hint,
694
+ children: item.term
695
+ }), /* @__PURE__ */ jsx("dd", {
696
+ className: cn(OPT_TEXT_PRIMARY, "text-sm font-medium"),
697
+ children: item.description || labels.empty
698
+ })]
699
+ }, item.id))
700
+ });
701
+ return /* @__PURE__ */ jsx("dl", {
702
+ className: cn("grid", compressed ? "gap-element" : "gap-group", columnsClass[columns], className),
703
+ "data-opt-id": "1NPD2",
704
+ "data-opt-slug": "description-list.DescriptionList",
705
+ children: items.map((item) => /* @__PURE__ */ jsxs("div", {
706
+ className: cn("flex min-w-0 flex-col gap-1", layout === "grid" && [
707
+ "border border-border",
708
+ "bg-bg-subtle rounded-lg",
709
+ compressed ? "px-2.5 py-1.5" : "px-3 py-2"
710
+ ]),
711
+ children: [/* @__PURE__ */ jsx("dt", {
712
+ className: cn(OPT_TEXT_TERTIARY, "text-xs"),
713
+ title: item.hint,
714
+ children: item.term
715
+ }), /* @__PURE__ */ jsxs("dd", {
716
+ className: cn(OPT_TEXT_PRIMARY, "flex min-w-0 items-center gap-1.5 text-sm"),
717
+ children: [/* @__PURE__ */ jsx("span", {
718
+ className: cn("min-w-0", item.wrap ? "break-all" : "truncate", !item.description && "text-text-secondary"),
719
+ children: item.description || labels.empty
720
+ }), item.copyValue && /* @__PURE__ */ jsx(CopyButton, {
721
+ value: item.copyValue,
722
+ label: labels.copy(typeof item.term === "string" ? item.term : item.id),
723
+ copiedLabel: labels.copied
724
+ })]
725
+ })]
726
+ }, item.id))
727
+ });
728
+ }
729
+ DescriptionList.displayName = "DescriptionList";
730
+ //#endregion
627
731
  //#region src/core/badge.tsx
628
- const _excluded$15 = [
732
+ const _excluded$19 = [
629
733
  "variant",
630
734
  "size",
631
735
  "dot",
@@ -655,19 +759,19 @@ const progressStroke = {
655
759
  error: "stroke-danger",
656
760
  info: "stroke-info"
657
761
  };
658
- const sizeStyles$4 = {
762
+ const sizeStyles$5 = {
659
763
  sm: "px-1.5 py-0.5 text-[10px]",
660
764
  md: "px-2 py-0.5 text-[11px]"
661
765
  };
662
766
  /** Renders the badge component. */
663
767
  function Badge(_ref) {
664
- let { variant = "default", size = "md", dot = false, progress, progressSize = 16, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$15);
768
+ let { variant = "default", size = "md", dot = false, progress, progressSize = 16, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$19);
665
769
  const hasProgress = progress != null;
666
770
  const clampedProgress = hasProgress ? Math.min(100, Math.max(0, progress)) : 0;
667
771
  const radius = (progressSize - 3) / 2;
668
772
  const circumference = 2 * Math.PI * radius;
669
773
  const offset = circumference - clampedProgress / 100 * circumference;
670
- return /* @__PURE__ */ jsxs("span", _objectSpread2(_objectSpread2({ className: cn(OPT_BADGE, variantStyles$2[variant], sizeStyles$4[size], className) }, props), {}, {
774
+ return /* @__PURE__ */ jsxs("span", _objectSpread2(_objectSpread2({ className: cn(OPT_BADGE, variantStyles$2[variant], sizeStyles$5[size], className) }, props), {}, {
671
775
  "data-opt-id": "9GBGZ",
672
776
  "data-opt-slug": "badge.Badge",
673
777
  children: [
@@ -707,24 +811,24 @@ function Badge(_ref) {
707
811
  }
708
812
  //#endregion
709
813
  //#region src/core/spinner.tsx
710
- const _excluded$14 = [
814
+ const _excluded$18 = [
711
815
  "size",
712
816
  "className",
713
817
  "role",
714
818
  "aria-hidden",
715
819
  "aria-label"
716
820
  ];
717
- const sizeStyles$3 = {
821
+ const sizeStyles$4 = {
718
822
  sm: "h-4 w-4",
719
823
  md: "h-6 w-6",
720
824
  lg: "h-8 w-8"
721
825
  };
722
826
  /** Renders the spinner component. */
723
827
  function Spinner(_ref) {
724
- let { size = "md", className, role, "aria-hidden": ariaHidden, "aria-label": ariaLabel } = _ref, props = _objectWithoutProperties(_ref, _excluded$14);
828
+ let { size = "md", className, role, "aria-hidden": ariaHidden, "aria-label": ariaLabel } = _ref, props = _objectWithoutProperties(_ref, _excluded$18);
725
829
  const isDecorative = ariaHidden === true || ariaHidden === "true";
726
830
  return /* @__PURE__ */ jsxs("svg", _objectSpread2(_objectSpread2({
727
- className: cn("animate-spin text-current", sizeStyles$3[size], className),
831
+ className: cn("animate-spin text-current", sizeStyles$4[size], className),
728
832
  viewBox: "0 0 24 24",
729
833
  fill: "none",
730
834
  role: isDecorative ? void 0 : role !== null && role !== void 0 ? role : "status",
@@ -749,7 +853,7 @@ function Spinner(_ref) {
749
853
  }
750
854
  //#endregion
751
855
  //#region src/core/alert.tsx
752
- const _excluded$13 = [
856
+ const _excluded$17 = [
753
857
  "variant",
754
858
  "title",
755
859
  "icon",
@@ -818,7 +922,7 @@ const defaultIcons = {
818
922
  };
819
923
  /** Renders the alert component. */
820
924
  function Alert(_ref) {
821
- let { variant = "info", title, icon, dismissible = false, onDismiss, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$13);
925
+ let { variant = "info", title, icon, dismissible = false, onDismiss, className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$17);
822
926
  const displayIcon = icon !== null && icon !== void 0 ? icon : defaultIcons[variant];
823
927
  return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({
824
928
  role: "alert",
@@ -865,10 +969,10 @@ function Alert(_ref) {
865
969
  }
866
970
  //#endregion
867
971
  //#region src/core/toolbar.tsx
868
- const _excluded$12 = ["className"];
869
- const _excluded2$8 = ["className"];
870
- const _excluded3$7 = ["className"];
871
- const _excluded4$5 = ["className"];
972
+ const _excluded$16 = ["className"];
973
+ const _excluded2$10 = ["className"];
974
+ const _excluded3$9 = ["className"];
975
+ const _excluded4$6 = ["className"];
872
976
  const _excluded5$3 = ["className"];
873
977
  const toolbarClass = `${OPT_SURFACE} ${OPT_BORDER} inline-flex w-fit items-center gap-0.5 px-1.5 py-1`;
874
978
  const buttonClass = `cursor-pointer rounded-md px-2.5 py-1.5 text-text-primary transition-colors data-[disabled]:cursor-not-allowed ${OPT_ACTIVE_ITEM} ${OPT_FOCUS}`;
@@ -883,7 +987,7 @@ function ToolbarRoot$1(props) {
883
987
  }
884
988
  /** Renders the toolbar container component. */
885
989
  function ToolbarContainer$1(_ref) {
886
- let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$12);
990
+ let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$16);
887
991
  return /* @__PURE__ */ jsx(ToolbarContainer, _objectSpread2(_objectSpread2({ className: cn(toolbarClass, className) }, props), {}, {
888
992
  "data-opt-id": "2AVXB",
889
993
  "data-opt-slug": "toolbar.ToolbarContainer"
@@ -891,7 +995,7 @@ function ToolbarContainer$1(_ref) {
891
995
  }
892
996
  /** Renders the toolbar button component. */
893
997
  function ToolbarButton$1(_ref2) {
894
- let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$8);
998
+ let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$10);
895
999
  return /* @__PURE__ */ jsx(ToolbarButton, _objectSpread2(_objectSpread2({ className: cn(buttonClass, className) }, props), {}, {
896
1000
  "data-opt-id": "C212C",
897
1001
  "data-opt-slug": "toolbar.ToolbarButton"
@@ -899,22 +1003,22 @@ function ToolbarButton$1(_ref2) {
899
1003
  }
900
1004
  /** Renders the toolbar separator component. */
901
1005
  function ToolbarSeparator$1(_ref3) {
902
- let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$7);
1006
+ let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$9);
903
1007
  return /* @__PURE__ */ jsx(ToolbarSeparator, _objectSpread2(_objectSpread2({ className: cn(separatorClass, className) }, props), {}, {
904
1008
  "data-opt-id": "9J72S",
905
1009
  "data-opt-slug": "toolbar.ToolbarSeparator"
906
1010
  }));
907
1011
  }
908
1012
  /** Renders the tooltip provider component. */
909
- function TooltipProvider$1(props) {
910
- return /* @__PURE__ */ jsx(TooltipProvider, _objectSpread2(_objectSpread2({}, props), {}, {
1013
+ function TooltipProvider(props) {
1014
+ return /* @__PURE__ */ jsx(TooltipRoot, _objectSpread2(_objectSpread2({}, props), {}, {
911
1015
  "data-opt-id": "6NKHT",
912
1016
  "data-opt-slug": "toolbar.TooltipProvider"
913
1017
  }));
914
1018
  }
915
1019
  /** Renders the tooltip anchor component. */
916
1020
  function TooltipAnchor$1(_ref4) {
917
- let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$5);
1021
+ let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$6);
918
1022
  return /* @__PURE__ */ jsx(TooltipAnchor, _objectSpread2(_objectSpread2({ className }, props), {}, {
919
1023
  "data-opt-id": "SAW1B",
920
1024
  "data-opt-slug": "toolbar.TooltipAnchor"
@@ -939,7 +1043,7 @@ function useInputId(id, label, prefix) {
939
1043
  }
940
1044
  //#endregion
941
1045
  //#region src/core/input.tsx
942
- const _excluded$11 = [
1046
+ const _excluded$15 = [
943
1047
  "label",
944
1048
  "error",
945
1049
  "hint",
@@ -954,7 +1058,7 @@ const _excluded$11 = [
954
1058
  const inputSizeStyles = OPT_INPUT_SIZE;
955
1059
  const Input = forwardRef((_ref, ref) => {
956
1060
  var _useInputId;
957
- let { label, error, hint, leftIcon, rightIcon, fullWidth = false, size = "md", required, className, id } = _ref, props = _objectWithoutProperties(_ref, _excluded$11);
1061
+ let { label, error, hint, leftIcon, rightIcon, fullWidth = false, size = "md", required, className, id } = _ref, props = _objectWithoutProperties(_ref, _excluded$15);
958
1062
  const fallbackId = useId().replace(/:/g, "");
959
1063
  const inputId = (_useInputId = useInputId(id, label, "input")) !== null && _useInputId !== void 0 ? _useInputId : `input-${fallbackId}`;
960
1064
  const hasError = Boolean(error);
@@ -1000,6 +1104,106 @@ const Input = forwardRef((_ref, ref) => {
1000
1104
  });
1001
1105
  Input.displayName = "Input";
1002
1106
  //#endregion
1107
+ //#region src/core/switch.tsx
1108
+ const _excluded$14 = [
1109
+ "label",
1110
+ "required",
1111
+ "error",
1112
+ "hint",
1113
+ "description",
1114
+ "checked",
1115
+ "defaultChecked",
1116
+ "onChange",
1117
+ "size",
1118
+ "disabled",
1119
+ "className",
1120
+ "id",
1121
+ "onClick",
1122
+ "aria-label",
1123
+ "aria-labelledby"
1124
+ ];
1125
+ const sizeStyles$3 = {
1126
+ sm: {
1127
+ track: "h-5 w-9",
1128
+ thumb: "h-4 w-4",
1129
+ translate: "translate-x-4"
1130
+ },
1131
+ md: {
1132
+ track: "h-6 w-11",
1133
+ thumb: "h-5 w-5",
1134
+ translate: "translate-x-5"
1135
+ },
1136
+ lg: {
1137
+ track: "h-7 w-14",
1138
+ thumb: "h-6 w-6",
1139
+ translate: "translate-x-7"
1140
+ }
1141
+ };
1142
+ const Switch = forwardRef((_ref, ref) => {
1143
+ var _useInputId;
1144
+ let { label, required, error, hint, description, checked: controlledChecked, defaultChecked = false, onChange, size = "md", disabled, className, id, onClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = _ref, props = _objectWithoutProperties(_ref, _excluded$14);
1145
+ const fallbackId = useId();
1146
+ const switchId = (_useInputId = useInputId(id, label, "switch")) !== null && _useInputId !== void 0 ? _useInputId : `switch-${fallbackId}`;
1147
+ const hintText = hint !== null && hint !== void 0 ? hint : description;
1148
+ const hasError = Boolean(error);
1149
+ const styles = sizeStyles$3[size];
1150
+ const labelId = label ? `${switchId}-label` : void 0;
1151
+ const switchLabelledBy = ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : ariaLabel ? void 0 : labelId;
1152
+ const switchAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : switchLabelledBy ? void 0 : "Switch";
1153
+ const isControlled = controlledChecked !== void 0;
1154
+ const [internalChecked, setInternalChecked] = useState(defaultChecked);
1155
+ const checked = isControlled ? controlledChecked : internalChecked;
1156
+ const handleClick = useCallback((e) => {
1157
+ const next = !checked;
1158
+ if (!isControlled) setInternalChecked(next);
1159
+ onChange === null || onChange === void 0 || onChange(next);
1160
+ onClick === null || onClick === void 0 || onClick(e);
1161
+ }, [
1162
+ checked,
1163
+ isControlled,
1164
+ onChange,
1165
+ onClick
1166
+ ]);
1167
+ return /* @__PURE__ */ jsxs("div", {
1168
+ className: cn("flex flex-col gap-1.5", className),
1169
+ "data-opt-id": "51Z9R",
1170
+ "data-opt-slug": "switch.Switch",
1171
+ children: [/* @__PURE__ */ jsxs("div", {
1172
+ className: "flex items-start gap-3",
1173
+ children: [/* @__PURE__ */ jsx("button", _objectSpread2(_objectSpread2({
1174
+ ref,
1175
+ type: "button",
1176
+ role: "switch",
1177
+ id: switchId,
1178
+ "aria-checked": checked,
1179
+ "aria-label": switchAriaLabel,
1180
+ "aria-labelledby": switchLabelledBy,
1181
+ disabled,
1182
+ className: cn("group relative inline-flex shrink-0 cursor-pointer rounded-full p-0.5 transition-colors", styles.track, "bg-bg-muted", "aria-[checked=true]:bg-accent", "disabled:cursor-not-allowed disabled:opacity-50", OPT_FOCUS_VISIBLE),
1183
+ "aria-invalid": hasError,
1184
+ "aria-required": required,
1185
+ "aria-describedby": getDescribedBy(switchId, error, hintText),
1186
+ onClick: handleClick
1187
+ }, props), {}, { children: /* @__PURE__ */ jsx("span", { className: cn("pointer-events-none inline-block transform rounded-full bg-white shadow-sm ring-0 transition-transform", styles.thumb, "translate-x-0", size === "sm" && "group-aria-[checked=true]:translate-x-4", size === "md" && "group-aria-[checked=true]:translate-x-5", size === "lg" && "group-aria-[checked=true]:translate-x-7") }) })), (label || hintText) && /* @__PURE__ */ jsxs("div", {
1188
+ className: "flex flex-col",
1189
+ children: [label && /* @__PURE__ */ jsxs("span", {
1190
+ id: labelId,
1191
+ className: cn("text-text-primary text-sm font-medium", disabled && "opacity-50"),
1192
+ children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
1193
+ }), hintText && /* @__PURE__ */ jsx("p", {
1194
+ id: `${switchId}-hint`,
1195
+ className: cn("text-text-tertiary text-sm", disabled && "opacity-50"),
1196
+ children: hintText
1197
+ })]
1198
+ })]
1199
+ }), /* @__PURE__ */ jsx(FieldMessages, {
1200
+ id: switchId,
1201
+ error
1202
+ })]
1203
+ });
1204
+ });
1205
+ Switch.displayName = "Switch";
1206
+ //#endregion
1003
1207
  //#region src/core/star-rating.tsx
1004
1208
  function interpolate(template, values) {
1005
1209
  return template.replace(/\{(\w+)\}/g, (_, key) => key in values ? String(values[key]) : `{${key}}`);
@@ -1104,8 +1308,62 @@ function StarRating({ value = 0, onChange, max = 5, readOnly = false, size = "md
1104
1308
  });
1105
1309
  }
1106
1310
  //#endregion
1311
+ //#region src/core/textarea.tsx
1312
+ const _excluded$13 = [
1313
+ "label",
1314
+ "error",
1315
+ "hint",
1316
+ "fullWidth",
1317
+ "required",
1318
+ "resize",
1319
+ "size",
1320
+ "className",
1321
+ "id",
1322
+ "rows"
1323
+ ];
1324
+ const textareaSizeStyles = OPT_TEXTAREA_SIZE;
1325
+ const resizeStyles$1 = {
1326
+ none: "resize-none",
1327
+ vertical: "resize-y",
1328
+ horizontal: "resize-x",
1329
+ both: "resize"
1330
+ };
1331
+ const Textarea = forwardRef((_ref, ref) => {
1332
+ var _useInputId;
1333
+ let { label, error, hint, fullWidth = false, required, resize = "vertical", size = "md", className, id, rows = 4 } = _ref, props = _objectWithoutProperties(_ref, _excluded$13);
1334
+ const fallbackId = useId().replace(/:/g, "");
1335
+ const textareaId = (_useInputId = useInputId(id, label, "textarea")) !== null && _useInputId !== void 0 ? _useInputId : `textarea-${fallbackId}`;
1336
+ const hasError = Boolean(error);
1337
+ return /* @__PURE__ */ jsxs("div", {
1338
+ className: cn("flex flex-col gap-1.5", fullWidth && "w-full"),
1339
+ "data-opt-id": "6T58H",
1340
+ "data-opt-slug": "textarea.Textarea",
1341
+ children: [
1342
+ label && /* @__PURE__ */ jsxs("label", {
1343
+ htmlFor: textareaId,
1344
+ className: "text-text-primary text-sm font-medium",
1345
+ children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
1346
+ }),
1347
+ /* @__PURE__ */ jsx("textarea", _objectSpread2({
1348
+ ref,
1349
+ id: textareaId,
1350
+ rows,
1351
+ className: cn("border-border bg-surface text-text-primary placeholder:text-text-tertiary w-full rounded-lg border px-4 py-3 text-sm outline-transparent", OPT_FOCUS_VISIBLE, textareaSizeStyles[size], resizeStyles$1[resize], hasError && "border-danger focus-visible:outline-danger", !fullWidth && "w-auto", className),
1352
+ "aria-invalid": hasError,
1353
+ "aria-describedby": getDescribedBy(textareaId, error, hint)
1354
+ }, props)),
1355
+ /* @__PURE__ */ jsx(FieldMessages, {
1356
+ id: textareaId,
1357
+ error,
1358
+ hint
1359
+ })
1360
+ ]
1361
+ });
1362
+ });
1363
+ Textarea.displayName = "Textarea";
1364
+ //#endregion
1107
1365
  //#region src/core/meter.tsx
1108
- const _excluded$10 = [
1366
+ const _excluded$12 = [
1109
1367
  "value",
1110
1368
  "min",
1111
1369
  "max",
@@ -1133,7 +1391,7 @@ const variantStyles = {
1133
1391
  * opt-ui-primitives Meter primitive, which owns the role/aria/valuetext.
1134
1392
  */
1135
1393
  function Meter$1(_ref) {
1136
- let { value, min = 0, max = 100, size = "md", variant = "default", showValue = false, label, getValueLabel, className } = _ref, props = _objectWithoutProperties(_ref, _excluded$10);
1394
+ let { value, min = 0, max = 100, size = "md", variant = "default", showValue = false, label, getValueLabel, className } = _ref, props = _objectWithoutProperties(_ref, _excluded$12);
1137
1395
  const clamped = Math.min(Math.max(value, min), max);
1138
1396
  const percentage = max === min ? 0 : (clamped - min) / (max - min) * 100;
1139
1397
  return /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({ className: cn("w-full", className) }, props), {}, {
@@ -1181,8 +1439,8 @@ function CompositeZone({ children, label, focusLoop = true, focusWrap = true, cl
1181
1439
  }
1182
1440
  //#endregion
1183
1441
  //#region src/core/disclosure.tsx
1184
- const _excluded$9 = ["className"];
1185
- const _excluded2$7 = ["className"];
1442
+ const _excluded$11 = ["className"];
1443
+ const _excluded2$9 = ["className"];
1186
1444
  const triggerClass$1 = `flex w-full cursor-pointer items-center justify-between px-4 py-4 text-left text-sm font-medium text-text-primary transition-colors hover:bg-bg-subtle ${OPT_FOCUS} data-[active-item]:bg-bg-subtle data-[disabled]:cursor-not-allowed`;
1187
1445
  const contentClass = `overflow-hidden ${OPT_ANIMATE_ENTER_EXIT}`;
1188
1446
  /** Renders the disclosure root component. */
@@ -1194,7 +1452,7 @@ function DisclosureRoot$1(props) {
1194
1452
  }
1195
1453
  /** Renders the disclosure trigger component. */
1196
1454
  function DisclosureTrigger$1(_ref) {
1197
- let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$9);
1455
+ let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$11);
1198
1456
  return /* @__PURE__ */ jsx(DisclosureTrigger, _objectSpread2(_objectSpread2({ className: cn(triggerClass$1, className) }, props), {}, {
1199
1457
  "data-opt-id": "14EZW",
1200
1458
  "data-opt-slug": "disclosure.DisclosureTrigger"
@@ -1202,7 +1460,7 @@ function DisclosureTrigger$1(_ref) {
1202
1460
  }
1203
1461
  /** Renders the disclosure content component. */
1204
1462
  function DisclosureContent$1(_ref2) {
1205
- let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$7);
1463
+ let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$9);
1206
1464
  return /* @__PURE__ */ jsx(DisclosureContent, _objectSpread2(_objectSpread2({ className: cn(contentClass, className) }, props), {}, {
1207
1465
  "data-opt-id": "78HYF",
1208
1466
  "data-opt-slug": "disclosure.DisclosureContent"
@@ -1210,16 +1468,16 @@ function DisclosureContent$1(_ref2) {
1210
1468
  }
1211
1469
  //#endregion
1212
1470
  //#region src/core/tabs.tsx
1213
- const _excluded$8 = ["variant"];
1214
- const _excluded2$6 = ["className", "actions"];
1215
- const _excluded3$6 = [
1471
+ const _excluded$10 = ["variant"];
1472
+ const _excluded2$8 = ["className", "actions"];
1473
+ const _excluded3$8 = [
1216
1474
  "className",
1217
1475
  "icon",
1218
1476
  "status",
1219
1477
  "statusLabel",
1220
1478
  "children"
1221
1479
  ];
1222
- const _excluded4$4 = ["className"];
1480
+ const _excluded4$5 = ["className"];
1223
1481
  const TabsVariantContext = React.createContext("underline");
1224
1482
  const tabClass = `cursor-pointer border-b-2 border-transparent px-4 py-2.5 text-sm text-text-tertiary transition-colors hover:text-text-primary data-[active-item]:text-text-primary data-[active-item]:border-text-primary data-[disabled]:cursor-not-allowed ${OPT_FOCUS}`;
1225
1483
  const tabListClass = "flex border-b border-border-subtle";
@@ -1232,7 +1490,7 @@ const actionsClass = "flex flex-none items-center gap-element";
1232
1490
  const tabPanelClass = `pt-4 ${OPT_FOCUS} data-[focus-visible]:rounded-lg`;
1233
1491
  /** Renders the tabs root component. */
1234
1492
  function TabsRoot$1(_ref) {
1235
- let { variant = "underline" } = _ref, props = _objectWithoutProperties(_ref, _excluded$8);
1493
+ let { variant = "underline" } = _ref, props = _objectWithoutProperties(_ref, _excluded$10);
1236
1494
  return /* @__PURE__ */ jsx(TabsVariantContext.Provider, {
1237
1495
  value: variant,
1238
1496
  children: /* @__PURE__ */ jsx(TabsRoot, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -1243,7 +1501,7 @@ function TabsRoot$1(_ref) {
1243
1501
  }
1244
1502
  /** Renders the tab list component. */
1245
1503
  function TabList$1(_ref2) {
1246
- let { className, actions } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$6);
1504
+ let { className, actions } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$8);
1247
1505
  const variant = React.useContext(TabsVariantContext);
1248
1506
  const list = /* @__PURE__ */ jsx(TabList, _objectSpread2(_objectSpread2({ className: cn(variant === "workspace" ? workspaceTabListClass : tabListClass, className) }, props), {}, {
1249
1507
  "data-opt-id": "68K7E",
@@ -1260,7 +1518,7 @@ function TabList$1(_ref2) {
1260
1518
  }
1261
1519
  /** Renders the tab component. */
1262
1520
  function Tab$1(_ref3) {
1263
- let { className, icon, status, statusLabel, children } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$6);
1521
+ let { className, icon, status, statusLabel, children } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$8);
1264
1522
  const variant = React.useContext(TabsVariantContext);
1265
1523
  const decorated = icon != null || status != null;
1266
1524
  return /* @__PURE__ */ jsx(Tab, _objectSpread2(_objectSpread2({ className: cn(variant === "workspace" ? workspaceTabClass : tabClass, className) }, props), {}, {
@@ -1286,7 +1544,7 @@ function Tab$1(_ref3) {
1286
1544
  }
1287
1545
  /** Renders the tab panel component. */
1288
1546
  function TabPanel$1(_ref4) {
1289
- let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$4);
1547
+ let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$5);
1290
1548
  return /* @__PURE__ */ jsx(TabPanel, _objectSpread2(_objectSpread2({ className: cn(tabPanelClass, className) }, props), {}, {
1291
1549
  "data-opt-id": "C0MBP",
1292
1550
  "data-opt-slug": "tabs.TabPanel"
@@ -1294,13 +1552,13 @@ function TabPanel$1(_ref4) {
1294
1552
  }
1295
1553
  //#endregion
1296
1554
  //#region src/core/select.tsx
1297
- const _excluded$7 = [
1555
+ const _excluded$9 = [
1298
1556
  "className",
1299
1557
  "minWidth",
1300
1558
  "style"
1301
1559
  ];
1302
- const _excluded2$5 = ["className"];
1303
- const _excluded3$5 = ["className"];
1560
+ const _excluded2$7 = ["className"];
1561
+ const _excluded3$7 = ["className"];
1304
1562
  const triggerClass = `${OPT_INPUT} cursor-pointer items-center justify-between data-[disabled]:cursor-not-allowed ${OPT_FOCUS}`;
1305
1563
  const popoverClass$1 = `${OPT_SURFACE_POPOVER} ${OPT_ANIMATE_ENTER_EXIT} z-[120]`;
1306
1564
  const itemClass$1 = `flex cursor-pointer items-center gap-2 data-[disabled]:cursor-not-allowed ${OPT_ITEM_BASE} ${OPT_ACTIVE_ITEM}`;
@@ -1320,7 +1578,7 @@ function SelectLabel$1(props) {
1320
1578
  }
1321
1579
  /** Renders the select trigger component. */
1322
1580
  function SelectTrigger$1(_ref) {
1323
- let { className, minWidth = 140, style } = _ref, props = _objectWithoutProperties(_ref, _excluded$7);
1581
+ let { className, minWidth = 140, style } = _ref, props = _objectWithoutProperties(_ref, _excluded$9);
1324
1582
  return /* @__PURE__ */ jsx(SelectTrigger, _objectSpread2(_objectSpread2({
1325
1583
  className: cn(triggerClass, className),
1326
1584
  style: _objectSpread2({ minWidth: typeof minWidth === "number" ? `${minWidth}px` : minWidth }, style)
@@ -1331,7 +1589,7 @@ function SelectTrigger$1(_ref) {
1331
1589
  }
1332
1590
  /** Renders the select popover component. */
1333
1591
  function SelectPopover$1(_ref2) {
1334
- let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$5);
1592
+ let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$7);
1335
1593
  return /* @__PURE__ */ jsx(SelectPopover, _objectSpread2(_objectSpread2({ className: cn(popoverClass$1, className) }, props), {}, {
1336
1594
  "data-opt-id": "P152F",
1337
1595
  "data-opt-slug": "select.SelectPopover"
@@ -1339,7 +1597,7 @@ function SelectPopover$1(_ref2) {
1339
1597
  }
1340
1598
  /** Renders the select item component. */
1341
1599
  function SelectItem$1(_ref3) {
1342
- let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$5);
1600
+ let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$7);
1343
1601
  return /* @__PURE__ */ jsx(SelectItem, _objectSpread2(_objectSpread2({ className: cn(itemClass$1, className) }, props), {}, {
1344
1602
  "data-opt-id": "KKBAF",
1345
1603
  "data-opt-slug": "select.SelectItem"
@@ -1347,10 +1605,10 @@ function SelectItem$1(_ref3) {
1347
1605
  }
1348
1606
  //#endregion
1349
1607
  //#region src/core/dialog.tsx
1350
- const _excluded$6 = ["className"];
1351
- const _excluded2$4 = ["className", "size"];
1352
- const _excluded3$4 = ["className", "size"];
1353
- const _excluded4$3 = ["className"];
1608
+ const _excluded$8 = ["className"];
1609
+ const _excluded2$6 = ["className", "size"];
1610
+ const _excluded3$6 = ["className", "size"];
1611
+ const _excluded4$4 = ["className"];
1354
1612
  const _excluded5$2 = ["className"];
1355
1613
  const _excluded6$2 = ["className"];
1356
1614
  const sizeClasses = {
@@ -1371,7 +1629,7 @@ function DialogRoot$1(props) {
1371
1629
  }
1372
1630
  /** Renders the dialog disclosure component. */
1373
1631
  function DialogDisclosure$1(_ref) {
1374
- let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$6);
1632
+ let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$8);
1375
1633
  return /* @__PURE__ */ jsx(DialogDisclosure, _objectSpread2(_objectSpread2({ className: cn("inline-flex cursor-pointer items-center justify-center rounded-lg font-medium transition-colors", OPT_BUTTON_PRIMARY, OPT_FOCUS_VISIBLE, className) }, props), {}, {
1376
1634
  "data-opt-id": "32QJK",
1377
1635
  "data-opt-slug": "dialog.DialogDisclosure"
@@ -1379,7 +1637,7 @@ function DialogDisclosure$1(_ref) {
1379
1637
  }
1380
1638
  /** Renders the dialog panel component. */
1381
1639
  function DialogPanel$1(_ref2) {
1382
- let { className, size = "md" } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$4);
1640
+ let { className, size = "md" } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$6);
1383
1641
  return /* @__PURE__ */ jsx(DialogPanel, _objectSpread2(_objectSpread2({ className: cn(panelBase, sizeClasses[size], className) }, props), {}, {
1384
1642
  "data-opt-id": "BTMTG",
1385
1643
  "data-opt-slug": "dialog.DialogPanel"
@@ -1391,7 +1649,7 @@ function DialogPanel$1(_ref2) {
1391
1649
  * the other Dialog parts (DialogRoot/Heading/Description/Dismiss/…).
1392
1650
  */
1393
1651
  function AlertDialogPanel$1(_ref3) {
1394
- let { className, size = "sm" } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$4);
1652
+ let { className, size = "sm" } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$6);
1395
1653
  return /* @__PURE__ */ jsx(AlertDialogPanel, _objectSpread2(_objectSpread2({ className: cn(panelBase, sizeClasses[size], className) }, props), {}, {
1396
1654
  "data-opt-id": "80HGS",
1397
1655
  "data-opt-slug": "dialog.AlertDialogPanel"
@@ -1399,7 +1657,7 @@ function AlertDialogPanel$1(_ref3) {
1399
1657
  }
1400
1658
  /** Renders the dialog heading component. */
1401
1659
  function DialogHeading$1(_ref4) {
1402
- let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$3);
1660
+ let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$4);
1403
1661
  return /* @__PURE__ */ jsx(DialogHeading, _objectSpread2(_objectSpread2({ className: cn(`text-lg font-semibold ${OPT_TEXT_PRIMARY}`, className) }, props), {}, {
1404
1662
  "data-opt-id": "4NW4H",
1405
1663
  "data-opt-slug": "dialog.DialogHeading"
@@ -1453,10 +1711,10 @@ function DialogFooter({ children, className }) {
1453
1711
  }
1454
1712
  //#endregion
1455
1713
  //#region src/core/combobox.tsx
1456
- const _excluded$5 = ["className"];
1457
- const _excluded2$3 = ["className"];
1458
- const _excluded3$3 = ["className"];
1459
- const _excluded4$2 = ["className"];
1714
+ const _excluded$7 = ["className"];
1715
+ const _excluded2$5 = ["className"];
1716
+ const _excluded3$5 = ["className"];
1717
+ const _excluded4$3 = ["className"];
1460
1718
  const inputClass$1 = `${OPT_INPUT} ${OPT_FOCUS}`;
1461
1719
  const popoverClass = `${OPT_SURFACE_POPOVER} max-h-60 overflow-y-auto ${OPT_ANIMATE_ENTER_EXIT}`;
1462
1720
  const itemClass = `${OPT_ITEM_BASE} ${OPT_ACTIVE_ITEM}`;
@@ -1471,7 +1729,7 @@ function ComboboxRoot$1(props) {
1471
1729
  }
1472
1730
  /** Renders the combobox input component. */
1473
1731
  function ComboboxInput$1(_ref) {
1474
- let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$5);
1732
+ let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$7);
1475
1733
  return /* @__PURE__ */ jsx(ComboboxInput, _objectSpread2(_objectSpread2({ className: cn(inputClass$1, className) }, props), {}, {
1476
1734
  "data-opt-id": "92FZS",
1477
1735
  "data-opt-slug": "combobox.ComboboxInput"
@@ -1479,7 +1737,7 @@ function ComboboxInput$1(_ref) {
1479
1737
  }
1480
1738
  /** Renders the combobox popover component. */
1481
1739
  function ComboboxPopover$1(_ref2) {
1482
- let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$3);
1740
+ let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$5);
1483
1741
  return /* @__PURE__ */ jsx(ComboboxPopover, _objectSpread2(_objectSpread2({ className: cn(popoverClass, className) }, props), {}, {
1484
1742
  "data-opt-id": "WS4PD",
1485
1743
  "data-opt-slug": "combobox.ComboboxPopover"
@@ -1487,7 +1745,7 @@ function ComboboxPopover$1(_ref2) {
1487
1745
  }
1488
1746
  /** Renders the combobox item component. */
1489
1747
  function ComboboxItem$1(_ref3) {
1490
- let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$3);
1748
+ let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$5);
1491
1749
  return /* @__PURE__ */ jsx(ComboboxItem, _objectSpread2(_objectSpread2({ className: cn(itemClass, className) }, props), {}, {
1492
1750
  "data-opt-id": "MAZJN",
1493
1751
  "data-opt-slug": "combobox.ComboboxItem"
@@ -1502,7 +1760,7 @@ function ComboboxGroup$1(props) {
1502
1760
  }
1503
1761
  /** Renders the combobox group label component. */
1504
1762
  function ComboboxGroupLabel$1(_ref4) {
1505
- let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$2);
1763
+ let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$3);
1506
1764
  return /* @__PURE__ */ jsx(ComboboxGroupLabel, _objectSpread2(_objectSpread2({ className: cn(groupLabelClass, className) }, props), {}, {
1507
1765
  "data-opt-id": "512YF",
1508
1766
  "data-opt-slug": "combobox.ComboboxGroupLabel"
@@ -1519,10 +1777,10 @@ function ComboboxEmpty({ className, children = koComboboxLabels.empty }) {
1519
1777
  }
1520
1778
  //#endregion
1521
1779
  //#region src/core/menu.tsx
1522
- const _excluded$4 = ["className"];
1523
- const _excluded2$2 = ["className"];
1524
- const _excluded3$2 = ["className"];
1525
- const _excluded4$1 = ["className"];
1780
+ const _excluded$6 = ["className"];
1781
+ const _excluded2$4 = ["className"];
1782
+ const _excluded3$4 = ["className"];
1783
+ const _excluded4$2 = ["className"];
1526
1784
  const _excluded5$1 = ["className"];
1527
1785
  const _excluded6$1 = ["className"];
1528
1786
  const _excluded7$1 = ["className"];
@@ -1540,7 +1798,7 @@ function MenubarRoot$1(props) {
1540
1798
  }
1541
1799
  /** Renders the menubar container component. */
1542
1800
  function MenubarContainer$1(_ref) {
1543
- let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$4);
1801
+ let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$6);
1544
1802
  return /* @__PURE__ */ jsx(MenubarContainer, _objectSpread2(_objectSpread2({ className: cn(menubarClass, className) }, props), {}, {
1545
1803
  "data-opt-id": "4MVQT",
1546
1804
  "data-opt-slug": "menu.MenubarContainer"
@@ -1555,7 +1813,7 @@ function MenuRoot$1(props) {
1555
1813
  }
1556
1814
  /** Renders the menu trigger component. */
1557
1815
  function MenuTrigger$1(_ref2) {
1558
- let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$2);
1816
+ let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$4);
1559
1817
  return /* @__PURE__ */ jsx(MenuTrigger, _objectSpread2(_objectSpread2({ className: cn(menuButtonClass, className) }, props), {}, {
1560
1818
  "data-opt-id": "46BJG",
1561
1819
  "data-opt-slug": "menu.MenuTrigger"
@@ -1570,7 +1828,7 @@ function MenuButtonArrow$1(props) {
1570
1828
  }
1571
1829
  /** Renders the menu popover component. */
1572
1830
  function MenuPopover$1(_ref3) {
1573
- let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$2);
1831
+ let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$4);
1574
1832
  return /* @__PURE__ */ jsx(MenuPopover, _objectSpread2(_objectSpread2({ className: cn(menuPopoverClass, className) }, props), {}, {
1575
1833
  "data-opt-id": "Q1MFY",
1576
1834
  "data-opt-slug": "menu.MenuPopover"
@@ -1578,7 +1836,7 @@ function MenuPopover$1(_ref3) {
1578
1836
  }
1579
1837
  /** Renders the menu item component. */
1580
1838
  function MenuItem$1(_ref4) {
1581
- let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$1);
1839
+ let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4$2);
1582
1840
  return /* @__PURE__ */ jsx(MenuItem, _objectSpread2(_objectSpread2({ className: cn(menuItemClass, className) }, props), {}, {
1583
1841
  "data-opt-id": "71JVB",
1584
1842
  "data-opt-slug": "menu.MenuItem"
@@ -2041,9 +2299,9 @@ function Slider({ value: controlledValue, defaultValue = 0, onChange, min = 0, m
2041
2299
  Slider.displayName = "Slider";
2042
2300
  //#endregion
2043
2301
  //#region src/core/popover.tsx
2044
- const _excluded$3 = ["className"];
2045
- const _excluded2$1 = ["className"];
2046
- const _excluded3$1 = ["className"];
2302
+ const _excluded$5 = ["className"];
2303
+ const _excluded2$3 = ["className"];
2304
+ const _excluded3$3 = ["className"];
2047
2305
  /** Renders the popover root component. */
2048
2306
  function PopoverRoot$1(props) {
2049
2307
  return /* @__PURE__ */ jsx(PopoverRoot, _objectSpread2(_objectSpread2({}, props), {}, {
@@ -2052,7 +2310,7 @@ function PopoverRoot$1(props) {
2052
2310
  }));
2053
2311
  }
2054
2312
  const PopoverTrigger$1 = forwardRef((_ref, ref) => {
2055
- let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$3);
2313
+ let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$5);
2056
2314
  return /* @__PURE__ */ jsx(PopoverTrigger, _objectSpread2(_objectSpread2({
2057
2315
  ref,
2058
2316
  className: cn("inline-flex items-center gap-1.5 rounded-lg px-3 py-2 text-sm", "cursor-pointer data-[disabled]:cursor-not-allowed", OPT_FOCUS_VISIBLE, className)
@@ -2064,7 +2322,7 @@ const PopoverTrigger$1 = forwardRef((_ref, ref) => {
2064
2322
  PopoverTrigger$1.displayName = "PopoverTrigger";
2065
2323
  /** Renders the popover content component. */
2066
2324
  function PopoverContent$1(_ref2) {
2067
- let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$1);
2325
+ let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$3);
2068
2326
  return /* @__PURE__ */ jsx(PopoverContent, _objectSpread2(_objectSpread2({ className: cn("bg-surface-overlay z-50 rounded-lg p-4 shadow-lg", OPT_BORDER, OPT_ANIMATE_ENTER_EXIT, className) }, props), {}, {
2069
2327
  "data-opt-id": "E03EY",
2070
2328
  "data-opt-slug": "popover.PopoverContent"
@@ -2072,7 +2330,7 @@ function PopoverContent$1(_ref2) {
2072
2330
  }
2073
2331
  /** Renders the popover close component. */
2074
2332
  function PopoverClose$1(_ref3) {
2075
- let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$1);
2333
+ let { className } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$3);
2076
2334
  return /* @__PURE__ */ jsx(PopoverClose, _objectSpread2(_objectSpread2({ className: cn("text-text-tertiary hover:bg-bg-subtle inline-flex items-center justify-center rounded-md p-1 text-sm", "cursor-pointer data-[disabled]:cursor-not-allowed", OPT_FOCUS_VISIBLE, className) }, props), {}, {
2077
2335
  "data-opt-id": "FP4KF",
2078
2336
  "data-opt-slug": "popover.PopoverClose"
@@ -3366,15 +3624,15 @@ function DateRangePicker({ value, onChange, presets = DEFAULT_PRESETS, placehold
3366
3624
  DateRangePicker.displayName = "DateRangePicker";
3367
3625
  //#endregion
3368
3626
  //#region src/core/form.tsx
3369
- const _excluded$2 = ["className", "store"];
3370
- const _excluded2 = ["className"];
3371
- const _excluded3 = [
3627
+ const _excluded$4 = ["className", "store"];
3628
+ const _excluded2$2 = ["className"];
3629
+ const _excluded3$2 = [
3372
3630
  "className",
3373
3631
  "resize",
3374
3632
  "rows",
3375
3633
  "name"
3376
3634
  ];
3377
- const _excluded4 = ["className"];
3635
+ const _excluded4$1 = ["className"];
3378
3636
  const _excluded5 = ["className"];
3379
3637
  const _excluded6 = [
3380
3638
  "className",
@@ -3420,7 +3678,7 @@ function useRequiredFormContext(componentName) {
3420
3678
  }
3421
3679
  /** Renders the form root component. */
3422
3680
  function FormRoot$1(_ref) {
3423
- let { className, store } = _ref, props = _objectWithoutProperties(_ref, _excluded$2);
3681
+ let { className, store } = _ref, props = _objectWithoutProperties(_ref, _excluded$4);
3424
3682
  const form = /* @__PURE__ */ jsx(FormRoot, _objectSpread2({ className: cn("gap-section flex flex-col", className) }, props));
3425
3683
  if (store) return /* @__PURE__ */ jsx(FormProvider, {
3426
3684
  store,
@@ -3432,7 +3690,7 @@ function FormRoot$1(_ref) {
3432
3690
  }
3433
3691
  /** Renders the form input component. */
3434
3692
  function FormInput$1(_ref2) {
3435
- let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2);
3693
+ let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$2);
3436
3694
  return /* @__PURE__ */ jsx(FormInput, _objectSpread2(_objectSpread2({ className: cn(inputClass, className) }, props), {}, {
3437
3695
  "data-opt-id": "D7Z8F",
3438
3696
  "data-opt-slug": "form.FormInput"
@@ -3447,7 +3705,7 @@ const resizeStyles = {
3447
3705
  /** Renders the form textarea component. */
3448
3706
  function FormTextarea(_ref3) {
3449
3707
  var _ref4;
3450
- let { className, resize = "vertical", rows = 4, name } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3);
3708
+ let { className, resize = "vertical", rows = 4, name } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$2);
3451
3709
  const form = useRequiredFormContext("FormTextarea");
3452
3710
  const value = (_ref4 = useFieldValue(form, name)) !== null && _ref4 !== void 0 ? _ref4 : "";
3453
3711
  const error = form === null || form === void 0 ? void 0 : form.getError(name);
@@ -3493,7 +3751,7 @@ function FormSelect({ name, children, className, placeholder, minWidth = 140, "a
3493
3751
  }
3494
3752
  /** Renders the form select popover component. */
3495
3753
  function FormSelectPopover(_ref6) {
3496
- let { className } = _ref6, props = _objectWithoutProperties(_ref6, _excluded4);
3754
+ let { className } = _ref6, props = _objectWithoutProperties(_ref6, _excluded4$1);
3497
3755
  return /* @__PURE__ */ jsx(SelectPopover$1, _objectSpread2(_objectSpread2({ className: cn(OPT_SURFACE_POPOVER, OPT_ANIMATE_ENTER_EXIT, "z-[120]", className) }, props), {}, {
3498
3756
  "data-opt-id": "CQSPJ",
3499
3757
  "data-opt-slug": "form.FormSelectPopover"
@@ -3829,8 +4087,47 @@ function formatOptNumber(value) {
3829
4087
  return new Intl.NumberFormat(OPT_UI_DEFAULT_LOCALE).format(value);
3830
4088
  }
3831
4089
  //#endregion
4090
+ //#region src/core/dropdown-menu.tsx
4091
+ const _excluded$3 = ["className"];
4092
+ const _excluded2$1 = ["className"];
4093
+ const _excluded3$1 = ["className", "variant"];
4094
+ const _excluded4 = ["className"];
4095
+ const DropdownMenu = MenuRoot$1;
4096
+ /** Renders the dropdown trigger component. */
4097
+ function DropdownTrigger(_ref) {
4098
+ let { className } = _ref, props = _objectWithoutProperties(_ref, _excluded$3);
4099
+ return /* @__PURE__ */ jsx(MenuTrigger$1, _objectSpread2(_objectSpread2({ className: cn("cursor-pointer gap-2", className) }, props), {}, {
4100
+ "data-opt-id": "C4BSS",
4101
+ "data-opt-slug": "dropdown-menu.DropdownTrigger"
4102
+ }));
4103
+ }
4104
+ /** Renders the dropdown content component. */
4105
+ function DropdownContent(_ref2) {
4106
+ let { className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2$1);
4107
+ return /* @__PURE__ */ jsx(MenuPopover$1, _objectSpread2(_objectSpread2({ className: cn(className) }, props), {}, {
4108
+ "data-opt-id": "J6NF7",
4109
+ "data-opt-slug": "dropdown-menu.DropdownContent"
4110
+ }));
4111
+ }
4112
+ /** Renders the dropdown item component. */
4113
+ function DropdownItem(_ref3) {
4114
+ let { className, variant = "default" } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3$1);
4115
+ return /* @__PURE__ */ jsx(MenuItem$1, _objectSpread2(_objectSpread2({ className: cn("cursor-pointer data-[disabled]:cursor-not-allowed", variant === "destructive" && "text-danger-fg data-[active-item]:bg-danger-subtle data-[active-item]:text-danger-fg", className) }, props), {}, {
4116
+ "data-opt-id": "5M6GA",
4117
+ "data-opt-slug": "dropdown-menu.DropdownItem"
4118
+ }));
4119
+ }
4120
+ /** Renders the dropdown separator component. */
4121
+ function DropdownSeparator(_ref4) {
4122
+ let { className } = _ref4, props = _objectWithoutProperties(_ref4, _excluded4);
4123
+ return /* @__PURE__ */ jsx(MenuSeparator$1, _objectSpread2(_objectSpread2({ className: cn(className) }, props), {}, {
4124
+ "data-opt-id": "K9Y54",
4125
+ "data-opt-slug": "dropdown-menu.DropdownSeparator"
4126
+ }));
4127
+ }
4128
+ //#endregion
3832
4129
  //#region src/core/checkbox.tsx
3833
- const _excluded$1 = [
4130
+ const _excluded$2 = [
3834
4131
  "label",
3835
4132
  "required",
3836
4133
  "error",
@@ -3895,7 +4192,7 @@ function IndeterminateIcon({ className }) {
3895
4192
  }
3896
4193
  const Checkbox = forwardRef((_ref, ref) => {
3897
4194
  var _groupContext$size, _groupContext$disable, _useInputId;
3898
- let { label, required, error, hint, description, checked: checkedProp, defaultChecked, onChange, size: sizeProp = "md", disabled: disabledProp, className, id, value, indeterminate } = _ref, props = _objectWithoutProperties(_ref, _excluded$1);
4195
+ let { label, required, error, hint, description, checked: checkedProp, defaultChecked, onChange, size: sizeProp = "md", disabled: disabledProp, className, id, value, indeterminate } = _ref, props = _objectWithoutProperties(_ref, _excluded$2);
3899
4196
  const groupContext = useContext(CheckboxGroupContext);
3900
4197
  const size = (_groupContext$size = groupContext === null || groupContext === void 0 ? void 0 : groupContext.size) !== null && _groupContext$size !== void 0 ? _groupContext$size : sizeProp;
3901
4198
  const disabled = (_groupContext$disable = groupContext === null || groupContext === void 0 ? void 0 : groupContext.disabled) !== null && _groupContext$disable !== void 0 ? _groupContext$disable : disabledProp;
@@ -3941,9 +4238,9 @@ const Checkbox = forwardRef((_ref, ref) => {
3941
4238
  "aria-invalid": hasError,
3942
4239
  "aria-required": required,
3943
4240
  "aria-describedby": getDescribedBy(checkboxId, error, hintText),
3944
- className: "peer sr-only"
4241
+ className: "peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
3945
4242
  }, props)), /* @__PURE__ */ jsx("span", {
3946
- className: cn("inline-flex items-center justify-center rounded", styles.box, "border-border border-2", "bg-surface", "peer-checked:border-accent peer-checked:bg-accent", isIndeterminate && "border-accent bg-accent", "peer-disabled:cursor-not-allowed peer-disabled:opacity-50", "peer-focus-visible:ring-ring peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1", "transition-colors"),
4243
+ className: cn("pointer-events-none inline-flex items-center justify-center rounded", styles.box, "border-border border-2", "bg-surface", "peer-checked:border-accent peer-checked:bg-accent", isIndeterminate && "border-accent bg-accent", "peer-disabled:cursor-not-allowed peer-disabled:opacity-50", "peer-focus-visible:ring-ring peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1", "transition-colors"),
3947
4244
  children: isIndeterminate ? /* @__PURE__ */ jsx(IndeterminateIcon, { className: cn(styles.icon, "text-accent-fg opacity-0 transition-opacity", "opacity-100") }) : /* @__PURE__ */ jsx(CheckIcon, { className: cn(styles.icon, "text-accent-fg opacity-0 transition-opacity", checked && "opacity-100") })
3948
4245
  })]
3949
4246
  }), (label || hintText) && /* @__PURE__ */ jsxs("div", {
@@ -4007,6 +4304,73 @@ function CheckboxGroup({ children, value: valueProp, defaultValue = EMPTY_STRING
4007
4304
  });
4008
4305
  }
4009
4306
  //#endregion
4307
+ //#region src/core/resizable.tsx
4308
+ const _excluded$1 = [
4309
+ "direction",
4310
+ "children",
4311
+ "className",
4312
+ "id",
4313
+ "autoSaveId"
4314
+ ];
4315
+ const _excluded2 = [
4316
+ "collapsedSize",
4317
+ "defaultSize",
4318
+ "minSize",
4319
+ "maxSize",
4320
+ "children",
4321
+ "className"
4322
+ ];
4323
+ const _excluded3 = ["className", "withHandle"];
4324
+ function toPanelSize(size) {
4325
+ return typeof size === "number" ? `${size}%` : size;
4326
+ }
4327
+ /** Renders the resizable panel group component. */
4328
+ function ResizablePanelGroup(_ref) {
4329
+ let { direction, children, className, id, autoSaveId } = _ref, props = _objectWithoutProperties(_ref, _excluded$1);
4330
+ return /* @__PURE__ */ jsx(Group, _objectSpread2(_objectSpread2({
4331
+ orientation: direction,
4332
+ id: id !== null && id !== void 0 ? id : autoSaveId,
4333
+ className: cn("flex h-full w-full", className)
4334
+ }, props), {}, {
4335
+ "data-opt-id": "BM5RR",
4336
+ "data-opt-slug": "resizable.ResizablePanelGroup",
4337
+ children
4338
+ }));
4339
+ }
4340
+ ResizablePanelGroup.displayName = "ResizablePanelGroup";
4341
+ /** Renders the resizable panel component. */
4342
+ function ResizablePanel(_ref2) {
4343
+ let { collapsedSize, defaultSize, minSize, maxSize, children, className } = _ref2, props = _objectWithoutProperties(_ref2, _excluded2);
4344
+ return /* @__PURE__ */ jsx(Panel, _objectSpread2(_objectSpread2({
4345
+ collapsedSize: toPanelSize(collapsedSize),
4346
+ defaultSize: toPanelSize(defaultSize),
4347
+ minSize: toPanelSize(minSize),
4348
+ maxSize: toPanelSize(maxSize),
4349
+ className: cn("overflow-auto", className)
4350
+ }, props), {}, {
4351
+ "data-opt-id": "88X4V",
4352
+ "data-opt-slug": "resizable.ResizablePanel",
4353
+ children
4354
+ }));
4355
+ }
4356
+ ResizablePanel.displayName = "ResizablePanel";
4357
+ /** Renders the resizable handle component. */
4358
+ function ResizableHandle(_ref3) {
4359
+ let { className, withHandle = false } = _ref3, props = _objectWithoutProperties(_ref3, _excluded3);
4360
+ return /* @__PURE__ */ jsx(Separator$1, _objectSpread2(_objectSpread2({ className: cn("bg-border relative flex items-center justify-center", "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2", "data-[resize-handle-active]:bg-accent", "[&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full", "[&[data-orientation=horizontal]]:h-full [&[data-orientation=horizontal]]:w-px", className) }, props), {}, {
4361
+ "data-opt-id": "6Z22W",
4362
+ "data-opt-slug": "resizable.ResizableHandle",
4363
+ children: withHandle && /* @__PURE__ */ jsx("div", {
4364
+ className: "border-border bg-surface z-10 flex h-4 w-3 items-center justify-center rounded-sm border",
4365
+ children: /* @__PURE__ */ jsx(GripVertical, {
4366
+ "aria-hidden": "true",
4367
+ className: "text-text-tertiary h-3 w-3"
4368
+ })
4369
+ })
4370
+ }));
4371
+ }
4372
+ ResizableHandle.displayName = "ResizableHandle";
4373
+ //#endregion
4010
4374
  //#region src/core/pagination.tsx
4011
4375
  const _excluded = [
4012
4376
  "totalItems",
@@ -4579,4 +4943,4 @@ function TextTruncate({ text, truncation = "startEnd", ellipsis = "…", width,
4579
4943
  });
4580
4944
  }
4581
4945
  //#endregion
4582
- export { PopoverClose$1 as $, OPT_TEXT_LABEL as $n, ToolbarButton$1 as $t, FormRadio$1 as A, OPT_BADGE_RED as An, DialogPanel$1 as At, FormSubmit$1 as B, OPT_FOCUS as Bn, TabsRoot$1 as Bt, FormGroupLabel$1 as C, getDescribedBy as Cn, DialogBody as Ct, FormNumberInput as D, OPT_BADGE_BLUE as Dn, DialogFooter as Dt, FormLabel$1 as E, OPT_ANIMATE_ENTER_EXIT as En, DialogDismiss$1 as Et, FormSelect as F, OPT_DIVIDER as Fn, SelectRoot$1 as Ft, useFormContext as G, OPT_ITEM_BASE as Gn, CompositeItem as Gt, FormTagInput as H, OPT_HOVER_ITEM as Hn, DisclosureRoot$1 as Ht, FormSelectItem as I, OPT_DOT_GRAY as In, SelectTrigger$1 as It, DateRangePicker as J, OPT_SURFACE_RAISED as Jn, CompositeZone as Jt, useFormStore as K, OPT_SURFACE as Kn, CompositeProvider as Kt, FormSelectPopover as L, OPT_DOT_GREEN as Ln, Tab$1 as Lt, FormRemove$1 as M, OPT_BORDER as Mn, SelectItem$1 as Mt, FormReset$1 as N, OPT_DISCLOSURE_CONTENT as Nn, SelectLabel$1 as Nt, FormProvider$1 as O, OPT_BADGE_GREEN as On, DialogHeader as Ot, FormRoot$1 as P, OPT_DISCLOSURE_TRIGGER as Pn, SelectPopover$1 as Pt, ColorPicker as Q, OPT_TEXTAREA_SIZE as Qn, useInputId as Qt, FormSlider as R, OPT_DOT_RED as Rn, TabList$1 as Rt, FormGroup$1 as S, RequiredMark as Sn, AlertDialogPanel$1 as St, FormInput$1 as T, OPT_ANIMATE_DRAWER as Tn, DialogDisclosure$1 as Tt, FormTextarea as U, OPT_INPUT as Un, DisclosureTrigger$1 as Ut, FormSwitch$1 as V, OPT_FOCUS_VISIBLE as Vn, DisclosureContent$1 as Vt, useFieldValue as W, OPT_INPUT_ERROR as Wn, Composite as Wt, IconPicker as X, OPT_TD as Xn, StarRating as Xt, TagInput as Y, OPT_TABLE_ROW_ACTIVE as Yn, Meter$1 as Yt, getIconRegistryEntry as Z, OPT_TD_MUTED as Zn, Input as Zt, FormControl$1 as _, SkeletonCard as _n, ComboboxGroupLabel$1 as _t, FieldTokenLegend as a, TooltipProvider$1 as an, _objectWithoutProperties as ar, MenuButtonArrow$1 as at, FormError$1 as b, useControlledState as bn, ComboboxPopover$1 as bt, Checkbox as c, Badge as cn, MenuItemRadio$1 as ct, formatOptDateTime as d, koBreadcrumbLabels as dn, MenuSeparator$1 as dt, ToolbarContainer$1 as en, OPT_TEXT_PRIMARY as er, PopoverContent$1 as et, formatOptNumber as f, koComboboxLabels as fn, MenuTrigger$1 as ft, FormColorPicker as g, SkeletonAvatar as gn, ComboboxGroup$1 as gt, FormCheckbox$1 as h, Skeleton as hn, ComboboxEmpty as ht, FieldToken as i, TooltipAnchor$1 as in, _objectSpread2 as ir, NumberInput as it, FormRadioGroup$1 as j, OPT_BADGE_YELLOW as jn, DialogRoot$1 as jt, FormPush$1 as k, OPT_BADGE_NEUTRAL as kn, DialogHeading$1 as kt, CheckboxGroup as l, EmptyState as ln, MenuPopover$1 as lt, formatOptTime as m, StatCard as mn, MenubarRoot$1 as mt, Highlight as n, ToolbarSeparator$1 as nn, OPT_TEXT_TERTIARY as nr, PopoverTrigger$1 as nt, resolveFieldType as o, Alert as on, Kbd as or, MenuItem$1 as ot, formatOptShortDate as p, koStarRatingLabels as pn, MenubarContainer$1 as pt, DEFAULT_PRESETS as q, OPT_SURFACE_POPOVER as qn, CompositeRow as qt, FIELD_TYPE_TOKENS as r, Tooltip$1 as rn, OPT_TH as rr, Slider as rt, Pagination as s, Spinner as sn, cn as sr, MenuItemCheckbox$1 as st, TextTruncate as t, ToolbarRoot$1 as tn, OPT_TEXT_SECONDARY as tr, PopoverRoot$1 as tt, OPT_UI_DEFAULT_LOCALE as u, Button as un, MenuRoot$1 as ut, FormDateRangePicker as v, SkeletonTable as vn, ComboboxInput$1 as vt, FormIconPicker as w, OPT_ACTIVE_ITEM as wn, DialogDescription$1 as wt, FormField$1 as x, FieldMessages as xn, ComboboxRoot$1 as xt, FormDescription$1 as y, SkeletonText as yn, ComboboxItem$1 as yt, FormStarRating as z, OPT_DOT_YELLOW as zn, TabPanel$1 as zt };
4946
+ export { useFormContext as $, OPT_HOVER_ITEM as $n, CompositeItem as $t, FormGroup$1 as A, SkeletonText as An, AlertDialogPanel$1 as At, FormRemove$1 as B, OPT_BADGE_NEUTRAL as Bn, SelectItem$1 as Bt, FormCheckbox$1 as C, koComboboxLabels as Cn, ComboboxEmpty as Ct, FormDescription$1 as D, SkeletonAvatar as Dn, ComboboxItem$1 as Dt, FormDateRangePicker as E, Skeleton as En, ComboboxInput$1 as Et, FormNumberInput as F, OPT_ACTIVE_ITEM as Fn, DialogFooter as Ft, FormSelectPopover as G, OPT_DISCLOSURE_TRIGGER as Gn, Tab$1 as Gt, FormRoot$1 as H, OPT_BADGE_YELLOW as Hn, SelectPopover$1 as Ht, FormProvider$1 as I, OPT_ANIMATE_DRAWER as In, DialogHeader as It, FormSubmit$1 as J, OPT_DOT_GREEN as Jn, TabsRoot$1 as Jt, FormSlider as K, OPT_DIVIDER as Kn, TabList$1 as Kt, FormPush$1 as L, OPT_ANIMATE_ENTER_EXIT as Ln, DialogHeading$1 as Lt, FormIconPicker as M, FieldMessages as Mn, DialogDescription$1 as Mt, FormInput$1 as N, RequiredMark as Nn, DialogDisclosure$1 as Nt, FormError$1 as O, SkeletonCard as On, ComboboxPopover$1 as Ot, FormLabel$1 as P, getDescribedBy as Pn, DialogDismiss$1 as Pt, useFieldValue as Q, OPT_FOCUS_VISIBLE as Qn, Composite as Qt, FormRadio$1 as R, OPT_BADGE_BLUE as Rn, DialogPanel$1 as Rt, formatOptTime as S, koBreadcrumbLabels as Sn, MenubarRoot$1 as St, FormControl$1 as T, StatCard as Tn, ComboboxGroupLabel$1 as Tt, FormSelect as U, OPT_BORDER as Un, SelectRoot$1 as Ut, FormReset$1 as V, OPT_BADGE_RED as Vn, SelectLabel$1 as Vt, FormSelectItem as W, OPT_DISCLOSURE_CONTENT as Wn, SelectTrigger$1 as Wt, FormTagInput as X, OPT_DOT_YELLOW as Xn, DisclosureRoot$1 as Xt, FormSwitch$1 as Y, OPT_DOT_RED as Yn, DisclosureContent$1 as Yt, FormTextarea as Z, OPT_FOCUS as Zn, DisclosureTrigger$1 as Zt, DropdownTrigger as _, Spinner as _n, cn as _r, MenuPopover$1 as _t, FieldTokenLegend as a, StarRating as an, OPT_SURFACE_RAISED as ar, getIconRegistryEntry as at, formatOptNumber as b, EmptyState as bn, MenuTrigger$1 as bt, ResizableHandle as c, useInputId as cn, OPT_TD_MUTED as cr, PopoverContent$1 as ct, Checkbox as d, ToolbarRoot$1 as dn, OPT_TEXT_SECONDARY as dr, Slider as dt, CompositeProvider as en, OPT_INPUT as er, useFormStore as et, CheckboxGroup as f, ToolbarSeparator$1 as fn, OPT_TEXT_TERTIARY as fr, NumberInput as ft, DropdownSeparator as g, Alert as gn, Kbd as gr, MenuItemRadio$1 as gt, DropdownMenu as h, TooltipProvider as hn, _objectWithoutProperties as hr, MenuItemCheckbox$1 as ht, FieldToken as i, Textarea as in, OPT_SURFACE_POPOVER as ir, IconPicker as it, FormGroupLabel$1 as j, useControlledState as jn, DialogBody as jt, FormField$1 as k, SkeletonTable as kn, ComboboxRoot$1 as kt, ResizablePanel as l, ToolbarButton$1 as ln, OPT_TEXT_LABEL as lr, PopoverRoot$1 as lt, DropdownItem as m, TooltipAnchor$1 as mn, _objectSpread2 as mr, MenuItem$1 as mt, Highlight as n, CompositeZone as nn, OPT_ITEM_BASE as nr, DateRangePicker as nt, resolveFieldType as o, Switch as on, OPT_TABLE_ROW_ACTIVE as or, ColorPicker as ot, DropdownContent as p, Tooltip$1 as pn, OPT_TH as pr, MenuButtonArrow$1 as pt, FormStarRating as q, OPT_DOT_GRAY as qn, TabPanel$1 as qt, FIELD_TYPE_TOKENS as r, Meter$1 as rn, OPT_SURFACE as rr, TagInput as rt, Pagination as s, Input as sn, OPT_TD as sr, PopoverClose$1 as st, TextTruncate as t, CompositeRow as tn, OPT_INPUT_ERROR as tr, DEFAULT_PRESETS as tt, ResizablePanelGroup as u, ToolbarContainer$1 as un, OPT_TEXT_PRIMARY as ur, PopoverTrigger$1 as ut, OPT_UI_DEFAULT_LOCALE as v, Badge as vn, MenuRoot$1 as vt, FormColorPicker as w, koStarRatingLabels as wn, ComboboxGroup$1 as wt, formatOptShortDate as x, Button as xn, MenubarContainer$1 as xt, formatOptDateTime as y, DescriptionList as yn, MenuSeparator$1 as yt, FormRadioGroup$1 as z, OPT_BADGE_GREEN as zn, DialogRoot$1 as zt };