@pk-design/react-tailwind 1.4.3 → 1.5.0

package/dist/react-tailwind.es.js

@@ -1,15 +1,15 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { forwardRef, useMemo, useId, useRef, useState, useEffect, Fragment as Fragment$1, useCallback, useImperativeHandle, createContext, useContext } from 'react';
+import React__default, { useId, useMemo, useState, forwardRef, Children, isValidElement, cloneElement, useRef, useEffect, Fragment as Fragment$1, useCallback, useImperativeHandle, createContext, useContext } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { Dialog, DialogBackdrop, DialogPanel, DialogTitle, Menu, MenuButton, MenuItems, MenuItem, RadioGroup as RadioGroup$1, Radio as Radio$1, Combobox, ComboboxInput, ComboboxButton, ComboboxOptions, ComboboxOption, TabGroup, TabList, Tab, TabPanels, TabPanel, Transition } from '@headlessui/react';
 import { FixedSizeList } from 'react-window';
 
 const buildClassName = (...classes) => twMerge(classes.filter(Boolean));
 
-var _path$i, _path2;
+var _path$i;
 function _extends$i() { return _extends$i = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$i.apply(null, arguments); }
-var SvgBadgeCheck = function SvgBadgeCheck(props) {
+var SvgChevronDown = function SvgChevronDown(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -19,19 +19,90 @@ var SvgBadgeCheck = function SvgBadgeCheck(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    className: "lucide lucide-badge-check-icon lucide-badge-check",
+    className: "lucide lucide-chevron-down-icon lucide-chevron-down",
     viewBox: "0 0 24 24"
   }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
+    d: "m6 9 6 6 6-6"
+  })));
+};
+
+const CONTAINER_CLASS = {
+    bordered: 'rounded-lg border border-gray-200 dark:border-white/10 divide-y divide-gray-200 dark:divide-white/10 bg-white dark:bg-gray-800 overflow-hidden',
+    separated: 'space-y-2',
+    plain: 'divide-y divide-gray-200 dark:divide-white/10',
+};
+const ITEM_CLASS = {
+    bordered: '',
+    separated: 'rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-gray-800 overflow-hidden',
+    plain: '',
+};
+const HEADER_CLASS = 'flex w-full items-center justify-between gap-2 py-3 px-4 text-left text-sm font-medium ' +
+    'text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700/50 ' +
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--ui-focus-ring)] ' +
+    'disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none ' +
+    'transition-colors duration-150 cursor-pointer';
+const Accordion = ({ items, type = 'single', variant = 'bordered', collapsible = true, defaultOpenIds, openIds: controlledOpenIds, onChange, expandIcon, className = '', titleClass = '', panelClass = '', }) => {
+    const baseId = useId();
+    const resolvedItems = useMemo(() => items.map((item, index) => { var _a; return ({ ...item, id: (_a = item.id) !== null && _a !== void 0 ? _a : index }); }), [items]);
+    const [uncontrolledOpenIds, setUncontrolledOpenIds] = useState(defaultOpenIds !== null && defaultOpenIds !== void 0 ? defaultOpenIds : []);
+    const isControlled = controlledOpenIds !== undefined;
+    const openIds = isControlled ? controlledOpenIds : uncontrolledOpenIds;
+    const toggle = (id) => {
+        const isOpen = openIds.includes(id);
+        const next = type === 'single'
+            ? isOpen
+                ? collapsible
+                    ? []
+                    : openIds
+                : [id]
+            : isOpen
+                ? openIds.filter((openId) => openId !== id)
+                : [...openIds, id];
+        if (next === openIds)
+            return;
+        if (!isControlled)
+            setUncontrolledOpenIds(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    };
+    const renderIndicator = (isOpen) => {
+        if (typeof expandIcon === 'function')
+            return expandIcon(isOpen);
+        return (jsx("span", { className: buildClassName('inline-flex shrink-0 transition-transform duration-200', isOpen && 'rotate-180'), children: expandIcon !== null && expandIcon !== void 0 ? expandIcon : jsx(SvgChevronDown, { className: "size-4 stroke-gray-500 dark:stroke-gray-400" }) }));
+    };
+    return (jsx("div", { className: buildClassName(CONTAINER_CLASS[variant], className), children: resolvedItems.map((item) => {
+            const isOpen = openIds.includes(item.id);
+            const headerId = `${baseId}-${item.id}-header`;
+            const panelId = `${baseId}-${item.id}-panel`;
+            return (jsxs("div", { className: ITEM_CLASS[variant], children: [jsx("h3", { className: "m-0", children: jsxs("button", { type: "button", id: headerId, "aria-expanded": isOpen, "aria-controls": panelId, disabled: item.disabled, onClick: () => toggle(item.id), className: buildClassName(HEADER_CLASS, titleClass, item.titleClass), children: [jsxs("span", { className: "flex items-center gap-2", children: [item.icon && jsx("span", { className: "inline-flex shrink-0", children: item.icon }), item.title] }), renderIndicator(isOpen)] }) }), jsx("div", { id: panelId, role: "region", "aria-labelledby": headerId, className: buildClassName('grid transition-[grid-template-rows] duration-200 ease-in-out', isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'), children: jsx("div", { className: "overflow-hidden", children: jsx("div", { className: buildClassName('px-4 pt-2 pb-4 text-sm text-gray-600 dark:text-gray-300', panelClass, item.panelClass), children: item.content }) }) })] }, item.id));
+        }) }));
+};
+Accordion.displayName = 'Accordion';
+
+var _path$h, _path2;
+function _extends$h() { return _extends$h = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$h.apply(null, arguments); }
+var SvgBadgeCheck = function SvgBadgeCheck(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$h({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    className: "lucide lucide-badge-check-icon lucide-badge-check",
+    viewBox: "0 0 24 24"
+  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
     d: "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76"
   })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
     d: "m9 12 2 2 4-4"
   })));
 };
 
-var _circle$4, _path$h;
-function _extends$h() { return _extends$h = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$h.apply(null, arguments); }
+var _circle$4, _path$g;
+function _extends$g() { return _extends$g = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$g.apply(null, arguments); }
 var SvgCircleX = function SvgCircleX(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$h({
+  return /*#__PURE__*/React.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -46,15 +117,15 @@ var SvgCircleX = function SvgCircleX(props) {
     cx: 12,
     cy: 12,
     r: 10
-  })), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
+  })), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
     d: "m15 9-6 6M9 9l6 6"
   })));
 };
 
-var _circle$3, _path$g;
-function _extends$g() { return _extends$g = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$g.apply(null, arguments); }
+var _circle$3, _path$f;
+function _extends$f() { return _extends$f = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$f.apply(null, arguments); }
 var SvgCircleAlert = function SvgCircleAlert(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$g({
+  return /*#__PURE__*/React.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -69,15 +140,15 @@ var SvgCircleAlert = function SvgCircleAlert(props) {
     cx: 12,
     cy: 12,
     r: 10
-  })), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
+  })), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
     d: "M12 8v4M12 16h.01"
   })));
 };
 
-var _circle$2, _path$f;
-function _extends$f() { return _extends$f = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$f.apply(null, arguments); }
+var _circle$2, _path$e;
+function _extends$e() { return _extends$e = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$e.apply(null, arguments); }
 var SvgInfo = function SvgInfo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$f({
+  return /*#__PURE__*/React.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -92,15 +163,15 @@ var SvgInfo = function SvgInfo(props) {
     cx: 12,
     cy: 12,
     r: 10
-  })), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
+  })), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
     d: "M12 16v-4M12 8h.01"
   })));
 };
 
-var _path$e;
-function _extends$e() { return _extends$e = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$e.apply(null, arguments); }
+var _path$d;
+function _extends$d() { return _extends$d = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$d.apply(null, arguments); }
 var SvgX = function SvgX(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$e({
+  return /*#__PURE__*/React.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -111,7 +182,7 @@ var SvgX = function SvgX(props) {
     strokeWidth: 2,
     className: "lucide lucide-x-icon lucide-x",
     viewBox: "0 0 24 24"
-  }, props), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
     d: "M18 6 6 18M6 6l12 12"
   })));
 };
@@ -122,8 +193,8 @@ const loaderSizeMap = {
     md: 'size-8',
     lg: 'size-10',
 };
-const Loader = ({ className = 'text-blue-600 dark:text-white', size = 'md', ...props }) => {
-    return (jsx("svg", { className: buildClassName(loaderSizeMap[size], className, 'spinner'), viewBox: "0 0 50 50", ...props, children: jsx("circle", { className: "path", cx: "25", cy: "25", r: "20", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "5" }) }));
+const Loader = ({ className = '', size = 'md', ...props }) => {
+    return (jsx("svg", { className: buildClassName('text-blue-600 dark:text-white', loaderSizeMap[size], className, 'spinner'), viewBox: "0 0 50 50", ...props, children: jsx("circle", { className: "path", cx: "25", cy: "25", r: "20", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "5" }) }));
 };
 
 const TextContent = forwardRef((props, ref) => {
@@ -131,7 +202,7 @@ const TextContent = forwardRef((props, ref) => {
     return React__default.createElement('span', {
         ...rest,
         ref,
-        className: buildClassName('text-gray-900 dark:text-gray-100', xsmall && 'text-xs/5', small && 'text-sm/6', strong && 'font-semibold', muted && 'text-gray-500 dark:text-gray-400', error && 'text-red-500 dark:text-red-400', className),
+        className: buildClassName('text-[var(--ui-text)]', xsmall && 'text-xs/5', small && 'text-sm/6', strong && 'font-semibold', muted && 'text-[var(--ui-text-muted)]', error && 'text-[var(--ui-text-danger)]', className),
     });
 });
 TextContent.displayName = 'TextContent';
@@ -156,6 +227,23 @@ const THEMED_BTN_CLASS = {
         plain: 'text-gray-700 hover:bg-black/5 dark:text-gray-200 dark:hover:bg-gray-700 focus:outline-[var(--ui-focus-ring)] disabled:text-gray-400',
     },
 };
+const LOADER_TEXT_CLASS = {
+    primary: {
+        default: 'text-white',
+        outlined: 'text-[var(--ui-primary-text)]',
+        plain: 'text-[var(--ui-primary-text)]',
+    },
+    danger: {
+        default: 'text-white',
+        outlined: 'text-[var(--ui-danger-text)]',
+        plain: 'text-[var(--ui-danger-text)]',
+    },
+    secondary: {
+        default: 'text-gray-700 dark:text-white',
+        outlined: 'text-gray-700 dark:text-gray-200',
+        plain: 'text-gray-700 dark:text-gray-200',
+    },
+};
 /**
  * Generate size classes.
  */
@@ -205,7 +293,7 @@ const Button = forwardRef(({ as, type, ...props }, ref) => {
     if (loading && iconOnly) {
         return (jsx(Component, { ref: ref, className: classes, ...buttonSpecificProps, ...cleanRest, children: jsx(Loader, { "data-testid": "btn-loader-icon", size: "xs" }) }));
     }
-    return (jsx(Component, { ref: ref, className: classes, ...buttonSpecificProps, ...cleanRest, children: loading ? (jsxs("span", { className: "flex items-center gap-2", "aria-live": "polite", children: [jsx(Loader, { "data-testid": "btn-loader-icon", size: "xs" }), loadingText && jsx(TextContent, { children: loadingText })] })) : (children) }));
+    return (jsx(Component, { ref: ref, className: classes, ...buttonSpecificProps, ...cleanRest, children: loading ? (jsxs("span", { className: "flex items-center gap-2", "aria-live": "polite", children: [jsx(Loader, { "data-testid": "btn-loader-icon", size: "xs", className: buildClassName(LOADER_TEXT_CLASS[theme][variant]) }), loadingText && (jsx(TextContent, { className: buildClassName(LOADER_TEXT_CLASS[theme][variant]), children: loadingText }))] })) : (children) }));
 });
 Button.displayName = 'Button';
 
@@ -251,10 +339,10 @@ const Badge = forwardRef((props, ref) => {
 });
 Badge.displayName = 'Badge';
 
-var _path$d;
-function _extends$d() { return _extends$d = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$d.apply(null, arguments); }
+var _path$c;
+function _extends$c() { return _extends$c = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$c.apply(null, arguments); }
 var SvgTriangleAlert = function SvgTriangleAlert(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$d({
+  return /*#__PURE__*/React.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -265,15 +353,15 @@ var SvgTriangleAlert = function SvgTriangleAlert(props) {
     strokeWidth: 2,
     className: "lucide lucide-triangle-alert-icon lucide-triangle-alert",
     viewBox: "0 0 24 24"
-  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
     d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4M12 17h.01"
   })));
 };
 
-var _circle$1, _path$c;
-function _extends$c() { return _extends$c = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$c.apply(null, arguments); }
+var _circle$1, _path$b;
+function _extends$b() { return _extends$b = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$b.apply(null, arguments); }
 var SvgCircleCheck = function SvgCircleCheck(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$c({
+  return /*#__PURE__*/React.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -288,7 +376,7 @@ var SvgCircleCheck = function SvgCircleCheck(props) {
     cx: 12,
     cy: 12,
     r: 10
-  })), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
+  })), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
     d: "m9 12 2 2 4-4"
   })));
 };
@@ -321,19 +409,28 @@ const Banner = forwardRef((props, ref) => {
 Banner.displayName = 'Banner';
 
 const BodyText = forwardRef((props, ref) => {
-    const { as = 'p', small = false, strong = false, muted = false, error = false, inline = false, className, ...rest } = props;
+    const { as = 'p', small = false, strong = false, muted = false, error = false, inline = false, className, invert, ...rest } = props;
+    const textColorClass = error
+        ? 'text-[var(--ui-text-danger)]'
+        : muted
+            ? invert
+                ? 'text-gray-300 dark:text-gray-600'
+                : 'text-[var(--ui-text-muted)]'
+            : invert
+                ? 'text-white dark:text-black'
+                : 'text-[var(--ui-text)]';
     return React__default.createElement(as, {
         ref: ref,
-        className: buildClassName('text-gray-900 dark:text-gray-100', small && 'text-sm/6', strong && 'font-semibold', muted && 'text-gray-500 dark:text-gray-400', error && 'text-red-500 dark:text-red-400', inline && 'inline-flex items-center gap-2', className),
+        className: buildClassName(textColorClass, small && 'text-sm/6', strong && 'font-semibold', inline && 'inline-flex items-center gap-2', className),
         ...rest,
     });
 });
 BodyText.displayName = 'BodyText';
 
-var _path$b;
-function _extends$b() { return _extends$b = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$b.apply(null, arguments); }
+var _path$a;
+function _extends$a() { return _extends$a = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$a.apply(null, arguments); }
 var SvgSlash = function SvgSlash(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
+  return /*#__PURE__*/React.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -344,7 +441,7 @@ var SvgSlash = function SvgSlash(props) {
     strokeWidth: 2,
     className: "lucide lucide-slash-icon lucide-slash",
     viewBox: "0 0 24 24"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
     d: "M22 2 2 22"
   })));
 };
@@ -356,6 +453,76 @@ const Breadcrumb = ({ items, render }) => {
 };
 Breadcrumb.displayName = 'Breadcrumb';
 
+/**
+ * Corner-rounding classes for the group's first/last button, keyed by
+ * orientation + size, matching Button's own size -> radius mapping
+ * (xs: rounded-sm, sm: rounded, md: rounded-md, lg: rounded-lg).
+ *
+ * These must stay fully static string literals (no template-literal
+ * interpolation) — Tailwind's JIT scanner only picks up class names that
+ * appear verbatim in source, and the docs site scans the library's
+ * *compiled* output, where interpolated fragments never appear as a
+ * complete class name.
+ */
+const EDGE_ROUNDING = {
+    horizontal: {
+        xs: { first: 'rounded-l-sm rounded-r-none', last: 'rounded-r-sm rounded-l-none' },
+        sm: { first: 'rounded-l rounded-r-none', last: 'rounded-r rounded-l-none' },
+        md: { first: 'rounded-l-md rounded-r-none', last: 'rounded-r-md rounded-l-none' },
+        lg: { first: 'rounded-l-lg rounded-r-none', last: 'rounded-r-lg rounded-l-none' },
+    },
+    vertical: {
+        xs: { first: 'rounded-t-sm rounded-b-none', last: 'rounded-b-sm rounded-t-none' },
+        sm: { first: 'rounded-t rounded-b-none', last: 'rounded-b rounded-t-none' },
+        md: { first: 'rounded-t-md rounded-b-none', last: 'rounded-b-md rounded-t-none' },
+        lg: { first: 'rounded-t-lg rounded-b-none', last: 'rounded-b-lg rounded-t-none' },
+    },
+};
+const PILL_EDGE_ROUNDING = {
+    horizontal: { first: 'rounded-l-full rounded-r-none', last: 'rounded-r-full rounded-l-none' },
+    vertical: { first: 'rounded-t-full rounded-b-none', last: 'rounded-b-full rounded-t-none' },
+};
+/**
+ * Resolves the corner-rounding classes for a single button at `index`
+ * out of `count` inside the group, so only the group's outer edges stay
+ * rounded and interior seams go square.
+ */
+const getEdgeRoundingClass = ({ index, count, size, orientation, pill, }) => {
+    if (count <= 1)
+        return '';
+    if (index !== 0 && index !== count - 1)
+        return 'rounded-none';
+    const position = index === 0 ? 'first' : 'last';
+    return pill
+        ? PILL_EDGE_ROUNDING[orientation][position]
+        : EDGE_ROUNDING[orientation][size][position];
+};
+const ButtonGroup = ({ children, orientation = 'horizontal', theme = 'secondary', variant = 'default', size = 'md', rounded = false, fullWidth = false, label, className = '', }) => {
+    const isVertical = orientation === 'vertical';
+    const items = useMemo(() => Children.toArray(children).filter(isValidElement), [children]);
+    const count = items.length;
+    return (jsx("div", { role: "group", "aria-label": label, className: buildClassName('inline-flex', isVertical ? 'flex-col' : 'flex-row', fullWidth && 'flex w-full', className), children: items.map((child, index) => {
+            var _a, _b, _c;
+            const childSize = (_a = child.props.size) !== null && _a !== void 0 ? _a : size;
+            return cloneElement(child, {
+                theme: (_b = child.props.theme) !== null && _b !== void 0 ? _b : theme,
+                variant: (_c = child.props.variant) !== null && _c !== void 0 ? _c : variant,
+                size: childSize,
+                className: buildClassName(child.props.className, getEdgeRoundingClass({
+                    index,
+                    count,
+                    size: childSize,
+                    orientation,
+                    pill: rounded,
+                }), count > 1 && [
+                    'relative shadow-none hover:z-10 focus:z-10 focus-visible:z-10',
+                    index > 0 && (isVertical ? '-mt-px' : '-ml-px'),
+                ], fullWidth && 'flex-1'),
+            });
+        }) }));
+};
+ButtonGroup.displayName = 'ButtonGroup';
+
 const BASE_CARD_CLASS = 'bg-white rounded-md dark:bg-gray-900 block';
 const Card = forwardRef(({ as, ...props }, ref) => {
     // Remove Card-only props from rest (avoid leaking to DOM)
@@ -491,10 +658,10 @@ const usePagination = ({ totalPages, currentPage, siblingCount = 1, // number of
     return [];
 };
 
-var _path$a;
-function _extends$a() { return _extends$a = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$a.apply(null, arguments); }
+var _path$9;
+function _extends$9() { return _extends$9 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$9.apply(null, arguments); }
 var SvgChevronLeft = function SvgChevronLeft(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$a({
+  return /*#__PURE__*/React.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -505,15 +672,15 @@ var SvgChevronLeft = function SvgChevronLeft(props) {
     strokeWidth: 2,
     className: "lucide lucide-chevron-left-icon lucide-chevron-left",
     viewBox: "0 0 24 24"
-  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
     d: "m15 18-6-6 6-6"
   })));
 };
 
-var _path$9;
-function _extends$9() { return _extends$9 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$9.apply(null, arguments); }
+var _path$8;
+function _extends$8() { return _extends$8 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$8.apply(null, arguments); }
 var SvgChevronRight = function SvgChevronRight(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$9({
+  return /*#__PURE__*/React.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -524,7 +691,7 @@ var SvgChevronRight = function SvgChevronRight(props) {
     strokeWidth: 2,
     className: "lucide lucide-chevron-right-icon lucide-chevron-right",
     viewBox: "0 0 24 24"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
     d: "m9 18 6-6-6-6"
   })));
 };
@@ -604,10 +771,10 @@ const updateSortQuery = (sortQuery, name, type = 'string') => {
     return updated;
 };
 
-var _path$8;
-function _extends$8() { return _extends$8 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$8.apply(null, arguments); }
+var _path$7;
+function _extends$7() { return _extends$7 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$7.apply(null, arguments); }
 var SvgArrowDownWideNarrow = function SvgArrowDownWideNarrow(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$8({
+  return /*#__PURE__*/React.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -618,15 +785,15 @@ var SvgArrowDownWideNarrow = function SvgArrowDownWideNarrow(props) {
     strokeWidth: 2,
     className: "lucide lucide-arrow-down-wide-narrow-icon lucide-arrow-down-wide-narrow",
     viewBox: "0 0 24 24"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
     d: "m3 16 4 4 4-4M7 20V4M11 4h10M11 8h7M11 12h4"
   })));
 };
 
-var _path$7;
-function _extends$7() { return _extends$7 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$7.apply(null, arguments); }
+var _path$6;
+function _extends$6() { return _extends$6 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$6.apply(null, arguments); }
 var SvgArrowDownNarrowWide = function SvgArrowDownNarrowWide(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$7({
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -637,15 +804,15 @@ var SvgArrowDownNarrowWide = function SvgArrowDownNarrowWide(props) {
     strokeWidth: 2,
     className: "lucide lucide-arrow-down-narrow-wide-icon lucide-arrow-down-narrow-wide",
     viewBox: "0 0 24 24"
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
     d: "m3 16 4 4 4-4M7 20V4M11 4h4M11 8h7M11 12h10"
   })));
 };
 
-var _path$6;
-function _extends$6() { return _extends$6 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$6.apply(null, arguments); }
+var _path$5;
+function _extends$5() { return _extends$5 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$5.apply(null, arguments); }
 var SvgArrowDownAz = function SvgArrowDownAz(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$6({
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -656,15 +823,15 @@ var SvgArrowDownAz = function SvgArrowDownAz(props) {
     strokeWidth: 2,
     className: "lucide lucide-arrow-down-az-icon lucide-arrow-down-a-z",
     viewBox: "0 0 24 24"
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
     d: "m3 16 4 4 4-4M7 20V4M20 8h-5M15 10V6.5a2.5 2.5 0 0 1 5 0V10M15 14h5l-5 6h5"
   })));
 };
 
-var _path$5;
-function _extends$5() { return _extends$5 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$5.apply(null, arguments); }
+var _path$4;
+function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
 var SvgArrowDownZa = function SvgArrowDownZa(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$5({
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -675,15 +842,15 @@ var SvgArrowDownZa = function SvgArrowDownZa(props) {
     strokeWidth: 2,
     className: "lucide lucide-arrow-down-za-icon lucide-arrow-down-z-a",
     viewBox: "0 0 24 24"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
     d: "m3 16 4 4 4-4M7 4v16M15 4h5l-5 6h5M15 20v-3.5a2.5 2.5 0 0 1 5 0V20M20 18h-5"
   })));
 };
 
-var _path$4;
-function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
+var _path$3;
+function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
 var SvgArrowUpDown = function SvgArrowUpDown(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -694,7 +861,7 @@ var SvgArrowUpDown = function SvgArrowUpDown(props) {
     strokeWidth: 2,
     className: "lucide lucide-arrow-up-down-icon lucide-arrow-up-down",
     viewBox: "0 0 24 24"
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
     d: "m21 16-4 4-4-4M17 20V4M3 8l4-4 4 4M7 4v16"
   })));
 };
@@ -785,11 +952,11 @@ function DataTable({ items, columns, sorting = {}, onSort, loading, pagination,
 }
 DataTable.displayName = 'DataTable';
 
-const Title = ({ children, className }) => (jsx("h1", { className: buildClassName('text-3xl font-bold text-gray-900 dark:text-white', className), children: children }));
-const SubTitle = ({ children, className }) => (jsx("h2", { className: buildClassName('text-2xl font-semibold text-gray-900 dark:text-white', className), children: children }));
-const SubTitle2 = ({ children, className }) => (jsx("h3", { className: buildClassName('text-xl font-semibold text-gray-900 dark:text-white', className), children: children }));
-const SubTitle3 = ({ children, className }) => (jsx("h4", { className: buildClassName('text-lg font-medium text-gray-900 dark:text-white', className), children: children }));
-const SubTitle4 = ({ children, className }) => (jsx("h5", { className: buildClassName('text-base font-medium text-gray-900 dark:text-white', className), children: children }));
+const Title = ({ children, className }) => (jsx("h1", { className: buildClassName('text-3xl font-bold text-[var(--ui-text)]', className), children: children }));
+const SubTitle = ({ children, className }) => (jsx("h2", { className: buildClassName('text-2xl font-semibold text-[var(--ui-text)]', className), children: children }));
+const SubTitle2 = ({ children, className }) => (jsx("h3", { className: buildClassName('text-xl font-semibold text-[var(--ui-text)]', className), children: children }));
+const SubTitle3 = ({ children, className }) => (jsx("h4", { className: buildClassName('text-lg font-medium text-[var(--ui-text)]', className), children: children }));
+const SubTitle4 = ({ children, className }) => (jsx("h5", { className: buildClassName('text-base font-medium text-[var(--ui-text)]', className), children: children }));
 const HeadingText = {
     Title,
     SubTitle,
@@ -846,10 +1013,10 @@ const Dropdown = ({ triggerButton, renderTriggerButton, items, renderItem, items
 };
 Dropdown.displayName = 'Dropdown';
 
-var _path$3;
-function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
+var _path$2;
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
 var SvgFolderPlus = function SvgFolderPlus(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -860,7 +1027,7 @@ var SvgFolderPlus = function SvgFolderPlus(props) {
     strokeWidth: 2,
     className: "lucide lucide-folder-plus-icon lucide-folder-plus",
     viewBox: "0 0 24 24"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
     d: "M12 10v6M9 13h6M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
   })));
 };
@@ -881,7 +1048,7 @@ const Input = forwardRef((props, ref) => {
     const hasError = Boolean(error);
     const hasRightGroup = rightGroup !== null && rightGroup !== undefined;
     const hasLeftGroup = leftGroup != null && leftGroup !== undefined;
-    return (jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-2', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, children: label }), labelHint] })), jsxs("div", { className: "relative", children: [hasLeftGroup && (jsx("span", { className: "absolute top-0 h-full flex items-center justify-center w-10", children: leftGroup })), jsx("input", { ref: ref, autoComplete: "off", ...inputProps, name: name, id: id, type: type, className: buildClassName(buildInputClass(className, { disabled: inputProps.disabled }), hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '') }), hasRightGroup && (jsx("span", { className: "absolute end-0.75 top-0 h-full flex items-center justify-center w-10", children: rightGroup }))] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
+    return (jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-2', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, children: label }), jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs("div", { className: "relative", children: [hasLeftGroup && (jsx("span", { className: "absolute top-0 h-full flex items-center justify-center w-10", children: leftGroup })), jsx("input", { ref: ref, autoComplete: "off", ...inputProps, name: name, id: id, type: type, className: buildClassName(buildInputClass(className, { disabled: inputProps.disabled }), hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '') }), hasRightGroup && (jsx("span", { className: "absolute end-0.75 top-0 h-full flex items-center justify-center w-10", children: rightGroup }))] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
 });
 Input.displayName = 'Input';
 
@@ -951,7 +1118,7 @@ const RadioSwitch = ({ label, items, selected, onChange, wrapperClass, switchCla
                     transform: `translate(${style.left}px, ${style.top}px)`,
                     width: style.width,
                     height: style.height,
-                } }), items.map((item) => (jsx(Radio$1, { value: getValue(item), "data-radio-item": true, "data-value": getValue(item), className: buildClassName('relative z-10 cursor-pointer select-none group', 'px-4 py-2 rounded-md transition-colors', 'text-gray-700 dark:text-gray-300 data-checked:text-white'), children: jsxs("div", { className: buildClassName('flex flex-col items-center justify-center gap-1', contentClass), children: [jsx(BodyText, { className: "font-semibold", children: getLabel(item) }), getDescription(item) && (jsx(BodyText, { className: buildClassName('text-xs opacity-80', descriptionClass), children: getDescription(item) }))] }) }, getValue(item))))] }));
+                } }), items.map((item) => (jsx(Radio$1, { value: getValue(item), "data-radio-item": true, "data-value": getValue(item), className: buildClassName('relative z-10 cursor-pointer select-none group', 'px-4 py-2 rounded-md transition-colors', 'text-gray-700 dark:text-gray-300 data-checked:text-white'), children: jsxs("div", { className: buildClassName('flex flex-col items-center justify-center gap-1', contentClass), children: [jsx(BodyText, { className: buildClassName('font-semibold', selected === getValue(item) && 'text-white'), children: getLabel(item) }), getDescription(item) && (jsx(BodyText, { className: buildClassName('text-xs opacity-80', descriptionClass, selected === getValue(item) && 'text-white'), children: getDescription(item) }))] }) }, getValue(item))))] }));
 };
 
 /**
@@ -1122,28 +1289,9 @@ const useDebounceFn = (fn, ms) => {
     }, [fn, ms]);
 };
 
-var _path$2;
-function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
-var SvgCheck = function SvgCheck(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    className: "lucide lucide-check-icon lucide-check",
-    viewBox: "0 0 24 24"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
-    d: "M20 6 9 17l-5-5"
-  })));
-};
-
 var _path$1;
 function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
-var SvgChevronDown = function SvgChevronDown(props) {
+var SvgCheck = function SvgCheck(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -1153,10 +1301,10 @@ var SvgChevronDown = function SvgChevronDown(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    className: "lucide lucide-chevron-down-icon lucide-chevron-down",
+    className: "lucide lucide-check-icon lucide-check",
     viewBox: "0 0 24 24"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
-    d: "m6 9 6 6 6-6"
+    d: "M20 6 9 17l-5-5"
   })));
 };
 
@@ -1185,7 +1333,7 @@ var SvgCirclePlus = function SvgCirclePlus(props) {
 
 const constructInputClass = (disabled) => buildInputClass('', { disabled });
 const SelectBox = forwardRef((props, forwardedRef) => {
-    const { labelKey = 'label', valueKey = 'value', name, id = name, options, selected, label = null, labelWrapperClass = '', labelClass = '', labelHint = null, disabled = false, containerClass = '', onChange = () => { }, placeholder, dropdownContainerClass = 'z-20', multiple = false, maxSelection, immediate = true, showErrorMessage = true, error = null, async = false, searchable = true, required = false, allowAdd = false, addNewText = 'Create', onAdd = () => { }, allowClear = false, } = props;
+    const { labelKey = 'label', valueKey = 'value', name, id = name, options, selected, label = null, labelWrapperClass = '', labelClass = '', labelHint = null, disabled = false, containerClass = '', onChange = () => { }, placeholder, dropdownContainerClass = 'z-20', multiple = false, maxSelection, immediate = true, showErrorMessage = true, error = null, async = false, searchable = true, required = false, allowAdd = false, addNewText = 'Create', onAdd = () => { }, allowClear = false, modalDropdown = false, noOptionsText = 'No options available', } = props;
     const hasError = Boolean(error);
     const [query, setQuery] = useState('');
     const debouncedQuery = useDebounce(query, 500);
@@ -1280,11 +1428,18 @@ const SelectBox = forwardRef((props, forwardedRef) => {
             console.error('onAdd handler error', err);
         }
     }, [onAdd, handleOnChangeInternal]);
+    // Kept in a ref so `handleSearch` stays referentially stable even when the
+    // caller passes a non-memoized `onSearch` — otherwise the effect below would
+    // re-fire (and re-search) on every render instead of only on query changes.
+    const onSearchRef = useRef(props.onSearch);
+    useEffect(() => {
+        onSearchRef.current = props.onSearch;
+    }, [props.onSearch]);
     const handleSearch = useCallback(async (searchString) => {
         var _a;
         try {
             setOptionsLoading(true);
-            await ((_a = props.onSearch) === null || _a === void 0 ? void 0 : _a.call(props, searchString));
+            await ((_a = onSearchRef.current) === null || _a === void 0 ? void 0 : _a.call(onSearchRef, searchString));
         }
         catch (err) {
             console.error('Error loading options:', err);
@@ -1292,12 +1447,12 @@ const SelectBox = forwardRef((props, forwardedRef) => {
         finally {
             setOptionsLoading(false);
         }
-    }, [props.onSearch]);
+    }, []);
     useEffect(() => {
         if (async && debouncedQuery)
             handleSearch(debouncedQuery);
     }, [debouncedQuery, async, handleSearch]);
-    return (jsxs("div", { className: buildClassName('group space-y-2', hasError && 'has-error', containerClass), ref: containerRef, children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, "aria-required": required, children: label }), labelHint] })), jsxs(Combobox, { multiple: multiple, immediate: immediate, name: name, value: selected, onChange: comboboxOnChangeWrapper, onClose: () => setQuery(''), disabled: disabled, children: [multiple ? (jsxs("div", { className: buildClassName(inputClass, 'flex flex-wrap gap-2 peer relative'), ref: forwardedRef, children: [isArray(selected) &&
+    return (jsxs("div", { className: buildClassName('group space-y-2', hasError && 'has-error', containerClass), ref: containerRef, children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, "aria-required": required, children: label }), jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs(Combobox, { multiple: multiple, immediate: immediate, name: name, value: selected, onChange: comboboxOnChangeWrapper, onClose: () => setQuery(''), disabled: disabled, children: [multiple ? (jsxs("div", { className: buildClassName(inputClass, 'flex flex-wrap gap-2 peer relative'), ref: forwardedRef, children: [isArray(selected) &&
                                 (selected === null || selected === void 0 ? void 0 : selected.length) > 0 &&
                                 selected.map((option, idx) => (jsx(Badge, { theme: "secondary", removable: !disabled, onRemove: () => removeSelection(idx), children: getDisplayValue(option) }, `${getValue(option)}-${idx}`))), jsx(ComboboxInput, { className: "outline-none flex-1 dark:placeholder-gray-400 placeholder-gray-400", "aria-label": name, value: query, autoComplete: "off", placeholder: (selected === null || selected === void 0 ? void 0 : selected.length) ? '' : placeholder, onChange: (e) => setQuery(e.target.value), id: id, ref: inputRef, onKeyDown: (e) => {
                                     if (multiple && e.key === 'Backspace' && !query) {
@@ -1305,7 +1460,7 @@ const SelectBox = forwardRef((props, forwardedRef) => {
                                             removeSelection(selected.length - 1);
                                         }
                                     }
-                                }, "data-testid": "combobox-input" }), jsx(ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5", "data-testid": "combobox-button", children: jsx(SvgChevronDown, { className: chevronIconClass }) })] })) : (jsxs("div", { className: "relative", ref: forwardedRef, children: [jsx(ComboboxInput, { "aria-label": name, displayValue: (option) => (option ? getDisplayValue(option) : null), autoComplete: "off", placeholder: placeholder, onChange: (event) => setQuery(event.target.value), className: inputClass, disabled: disabled, id: id, readOnly: !searchable, ref: inputRef, "data-testid": "combobox-input" }), allowClear && !isEmpty(selected) && (jsx(Button, { size: "xs", iconOnly: true, "aria-label": "Clear selection", theme: "secondary", variant: "plain", className: "group absolute inset-y-0 right-8 h-6 top-2", onClick: () => handleOnChangeInternal(multiple ? [] : null), disabled: disabled, "data-testid": "combobox-clear-button", noOutlineOnFocus: true, children: jsx(SvgX, { className: "size-4 stroke-gray-500" }) })), jsx(ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5", "data-testid": "combobox-button", children: jsx(SvgChevronDown, { className: chevronIconClass }) })] })), jsx(ComboboxOptions, { anchor: { to: 'bottom', gap: 5 }, as: "div", className: buildClassName('w-[var(--input-width)] rounded-lg border border-gray-200 dark:border-white/5 bg-white dark:bg-gray-800 p-1 [--anchor-gap:var(--spacing-1)]', '[--anchor-max-height:20rem]', 'origin-top border transition duration-200 ease-[cubic-bezier(0.4, 0.0, 0.2, 1)] data-[closed]:translate-y-[-15%] data-[closed]:opacity-0', dropdownContainerClass), transition: true, "data-testid": "combobox-options", children: optionsLoading ? (jsx("div", { "data-testid": "options-loading", className: "flex items-center justify-center py-2 px-3 select-none", children: jsx(Loader, { size: "sm" }) })) : shouldShowTypeToSearch ? (jsx("div", { className: "flex items-center justify-between py-2 px-3 select-none", children: "Type to search..." })) : (jsxs("div", { children: [filteredOptions.map((option) => (jsx(ComboboxOption, { disabled: option.disabled, value: option, className: "group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-black/3 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none", children: jsxs("div", { className: "flex items-center justify-between gap-2 dark:text-white group-data-[selected]:text-blue-600", children: [jsx("span", { className: "text-sm/6", children: getDisplayValue(option) }), jsx(SvgCheck, { className: "invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible" })] }) }, getValue(option)))), filteredOptions.length === 0 && query && !optionsLoading && (jsxs("div", { "data-testid": "no-result-found", className: "flex items-center gap-2 py-1.5 px-3 select-none text-gray-500 dark:text-gray-400", children: ["No results found for ", jsx("span", { className: "font-semibold", children: query })] })), allowAdd && (jsx(ComboboxOption, { value: query, className: "group rounded-lg py-1.5 px-3 cursor-pointer text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700", onClick: () => void handleAddAndSelect(query), children: jsxs("div", { className: "flex items-center gap-2", children: [jsx(SvgCirclePlus, { className: "size-4.5" }), jsxs(TextContent, { children: [addNewText, " \"", query, "\""] })] }) }))] })) })] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
+                                }, "data-testid": "combobox-input" }), jsx(ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5", "data-testid": "combobox-button", children: jsx(SvgChevronDown, { className: chevronIconClass }) })] })) : (jsxs("div", { className: "relative", ref: forwardedRef, children: [jsx(ComboboxInput, { "aria-label": name, displayValue: (option) => (option ? getDisplayValue(option) : null), autoComplete: "off", placeholder: placeholder, onChange: (event) => setQuery(event.target.value), className: inputClass, disabled: disabled, id: id, readOnly: !searchable, ref: inputRef, "data-testid": "combobox-input" }), allowClear && !isEmpty(selected) && (jsx(Button, { size: "xs", iconOnly: true, "aria-label": "Clear selection", theme: "secondary", variant: "plain", className: "group absolute inset-y-0 right-8 h-6 top-2", onClick: () => handleOnChangeInternal(multiple ? [] : null), disabled: disabled, "data-testid": "combobox-clear-button", noOutlineOnFocus: true, children: jsx(SvgX, { className: "size-4 stroke-gray-500 dark:stroke-gray-300" }) })), jsx(ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5", "data-testid": "combobox-button", children: jsx(SvgChevronDown, { className: chevronIconClass }) })] })), jsx(ComboboxOptions, { anchor: { to: 'bottom', gap: 5 }, as: "div", modal: modalDropdown, className: buildClassName('w-[var(--input-width)] rounded-lg border border-gray-200 dark:border-white/5 bg-white dark:bg-gray-800 p-1 [--anchor-gap:var(--spacing-1)]', '[--anchor-max-height:20rem]', 'origin-top border transition duration-200 ease-[cubic-bezier(0.4, 0.0, 0.2, 1)] data-[closed]:translate-y-[-15%] data-[closed]:opacity-0', dropdownContainerClass), transition: true, "data-testid": "combobox-options", children: optionsLoading ? (jsx(BodyText, { "data-testid": "options-loading", className: "flex items-center justify-center py-2 px-3 select-none", children: jsx(Loader, { size: "sm" }) })) : shouldShowTypeToSearch ? (jsx(BodyText, { className: "flex items-center justify-between py-2 px-3 select-none", children: "Type to search..." })) : (jsxs("div", { children: [filteredOptions.map((option) => (jsx(ComboboxOption, { disabled: option.disabled, value: option, className: "group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-black/3 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none", children: jsxs("div", { className: "flex items-center justify-between gap-2 dark:text-white group-data-[selected]:text-blue-600", children: [jsx("span", { className: "text-sm/6", children: getDisplayValue(option) }), jsx(SvgCheck, { className: "invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible" })] }) }, getValue(option)))), filteredOptions.length === 0 && (jsx("div", { "data-testid": "no-result-found", className: "flex items-center gap-2 py-1.5 px-3 select-none text-gray-500 dark:text-gray-400", children: query ? (jsxs(Fragment, { children: ["No results found for ", jsx("span", { className: "font-semibold", children: query })] })) : (noOptionsText) })), allowAdd && (jsx(ComboboxOption, { value: query, className: "group rounded-lg py-1.5 px-3 cursor-pointer text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700", onClick: () => void handleAddAndSelect(query), children: jsxs("div", { className: "flex items-center gap-2", children: [jsx(SvgCirclePlus, { className: "size-4.5" }), jsxs(TextContent, { children: [addNewText, " \"", query, "\""] })] }) }))] })) })] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
 });
 
 const Tabs = ({ tabs, defaultIndex = 0, selectedIndex, onChange, variant = 'underline', orientation = 'horizontal', stretch = false, className = '', listClass = '', panelsClass = '', }) => {
@@ -1357,7 +1512,7 @@ const Textarea = forwardRef((props, ref) => {
     const hasError = !isEmpty(error);
     const hasRightGroup = rightGroup != null && rightGroup !== undefined;
     const hasLeftGroup = leftGroup != null && leftGroup !== undefined;
-    return (jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-2', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, children: label }), labelHint] })), jsxs("div", { className: "relative", children: [hasLeftGroup && (jsx("span", { className: "absolute top-0 h-full flex items-center justify-center w-10", children: leftGroup })), jsx("textarea", { ref: ref, autoComplete: "off", ...inputProps, name: name, id: id, className: buildClassName('transition-all', 'block w-full rounded-lg bg-white px-3.5 py-2 text-base sm:text-sm/6', 'text-gray-900 outline dark:outline outline-1 -outline-offset-1', 'outline-gray-300 dark:outline-gray-600', 'focus:outline-blue-600 dark:focus:outline-blue-600 focus:outline-2 focus:-outline-offset-2', 'dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 placeholder:text-gray-400 dark:text-white', 'invalid:group-[.has-error]:outline-red-500', 'disabled:pointer-events-none disabled:bg-gray-100', 'dark:disabled:bg-gray-500', hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '', className) }), hasRightGroup && (jsx("span", { className: "absolute end-0.75 top-0 h-full flex items-center justify-center", children: rightGroup }))] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
+    return (jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-2', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, children: label }), jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs("div", { className: "relative", children: [hasLeftGroup && (jsx("span", { className: "absolute top-0 h-full flex items-center justify-center w-10", children: leftGroup })), jsx("textarea", { ref: ref, autoComplete: "off", ...inputProps, name: name, id: id, className: buildClassName('transition-all', 'block w-full rounded-lg bg-white px-3.5 py-2 text-base sm:text-sm/6', 'text-gray-900 outline dark:outline outline-1 -outline-offset-1', 'outline-gray-300 dark:outline-gray-600', 'focus:outline-blue-600 dark:focus:outline-blue-600 focus:outline-2 focus:-outline-offset-2', 'dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 placeholder:text-gray-400 dark:text-white', 'invalid:group-[.has-error]:outline-red-500', 'disabled:pointer-events-none disabled:bg-gray-100', 'dark:disabled:bg-gray-500', hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '', className) }), hasRightGroup && (jsx("span", { className: "absolute end-0.75 top-0 h-full flex items-center justify-center", children: rightGroup }))] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
 });
 
 /**
@@ -1586,5 +1741,5 @@ const useIsTabletOrMobile = () => {
     return isMobile || isTablet;
 };
 
-export { Alert, Badge, Banner, BodyText, Breadcrumb, Button, Card, Checkbox, CheckboxGroup, DOTS, DataTable, DetailedInformation, Dot, Drawer, Dropdown, EmptyState, EmptyTableRow, HeadingText, Input, Label, Loader, PASSWORD_PLACEHOLDER, PASSWORD_TYPE, Pagination, PasswordInput, Radio, RadioGroup, RadioSwitch, RangeInput, RangeSlider, SelectBox, SortIconMap, Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow, Tabs, TextContent, Textarea, Toast, ToastProvider, VirtualizedDataTable, buildClassName, buildInputClass, get, getSortIcon, isArray, isEmpty, nextSortDirection, updateSortQuery, useDebounce, useDebounceFn, useIsMobile, useIsTablet, useIsTabletOrMobile, usePagination, useToast };
+export { Accordion, Alert, Badge, Banner, BodyText, Breadcrumb, Button, ButtonGroup, Card, Checkbox, CheckboxGroup, DOTS, DataTable, DetailedInformation, Dot, Drawer, Dropdown, EmptyState, EmptyTableRow, HeadingText, Input, Label, Loader, PASSWORD_PLACEHOLDER, PASSWORD_TYPE, Pagination, PasswordInput, Radio, RadioGroup, RadioSwitch, RangeInput, RangeSlider, SelectBox, SortIconMap, Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow, Tabs, TextContent, Textarea, Toast, ToastProvider, VirtualizedDataTable, buildClassName, buildInputClass, get, getSortIcon, isArray, isEmpty, nextSortDirection, updateSortQuery, useDebounce, useDebounceFn, useIsMobile, useIsTablet, useIsTabletOrMobile, usePagination, useToast };
 //# sourceMappingURL=react-tailwind.es.js.map