@martinsura/ui 0.1.2 → 0.1.4

package/dist/index.js

@@ -1,8 +1,8 @@
 import { cva } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
-import { IconDownload, IconPaperclip, IconFileSpreadsheet, IconX, IconTrashX, IconPlus, IconPencil, IconDotsVertical, IconEyeOff, IconEye, IconCheck, IconDroplet, IconDatabaseOff, IconChevronUp, IconChevronDown, IconSelector, IconCalendar, IconUsers, IconInfoCircle, IconAlertTriangle, IconCircleX, IconBold, IconItalic, IconUnderline, IconList, IconListNumbers, IconLink, IconUnlink, IconClearFormatting, IconUpload, IconAlertCircle, IconTrash, IconLoader2, IconChevronLeft, IconChevronRight, IconSearch } from '@tabler/icons-react';
+import { IconEyeOff, IconEye, IconDownload, IconPaperclip, IconFileSpreadsheet, IconX, IconTrashX, IconPlus, IconPencil, IconDotsVertical, IconCheck, IconDroplet, IconSearch, IconDatabaseOff, IconChevronUp, IconChevronDown, IconSelector, IconCalendar, IconUsers, IconInfoCircle, IconAlertTriangle, IconCircleX, IconBold, IconItalic, IconUnderline, IconList, IconListNumbers, IconLink, IconUnlink, IconClearFormatting, IconUpload, IconAlertCircle, IconTrash, IconMinus, IconArrowDownRight, IconArrowUpRight, IconLoader2, IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { createContext, useRef, useState, useLayoutEffect, useEffect, useMemo, useContext, useCallback, useId } from 'react';
+import { createContext, forwardRef, useState, useContext, useRef, useLayoutEffect, useEffect, useMemo, useCallback, useId } from 'react';
 import { createPortal } from 'react-dom';
 import dayjs from 'dayjs';
 
@@ -321,7 +321,9 @@ var buttonVariants = cva(
         danger: "bg-(--ui-danger) text-(--ui-danger-text) hover:bg-(--ui-danger-hover) active:bg-(--ui-danger-hover)",
         success: "bg-(--ui-success) text-(--ui-success-text) hover:bg-(--ui-success-hover) active:bg-(--ui-success-hover)",
         default: "bg-white text-(--ui-text) border border-(--ui-border-strong) hover:bg-(--ui-surface-subtle) active:bg-(--ui-surface-muted)",
+        subtle: "bg-(--ui-surface-subtle) text-(--ui-text) border border-transparent hover:bg-(--ui-surface-muted) active:bg-(--ui-surface-muted)",
         ghost: "text-(--ui-text) hover:bg-(--ui-surface-muted) active:bg-(--ui-surface-subtle)",
+        text: "text-(--ui-text) hover:text-(--ui-text-strong) active:text-(--ui-text-strong) px-0! bg-transparent",
         link: "text-(--ui-primary) hover:underline p-0! h-auto!"
       },
       size: {
@@ -357,12 +359,14 @@ var Button = ({
   size = "middle",
   shape = "default",
   block = false,
+  fullWidthOnMobile = false,
   iconPosition = "left",
   ...props
 }) => {
   const iconSize = props.iconSize ?? iconSizeMap[size];
   const IconComponent = props.icon ?? (props.iconType ? getIcon(props.iconType) : void 0);
   const iconNode = IconComponent ? /* @__PURE__ */ jsx(IconComponent, { size: iconSize, strokeWidth: 1.5, className: props.classNames?.icon }) : void 0;
+  const content = props.text ?? props.children;
   const handleClick = () => {
     if (props.disabled || props.loading) {
       return;
@@ -374,11 +378,16 @@ var Button = ({
     {
       type: props.htmlType ?? "button",
       disabled: props.disabled || props.loading,
-      className: twMerge(buttonVariants({ variant, size, block, shape }), props.className),
+      className: twMerge(
+        buttonVariants({ variant, size, block, shape }),
+        fullWidthOnMobile && !block && "w-full sm:w-auto",
+        props.iconOnly && "px-0!",
+        props.className
+      ),
       onClick: props.confirm ? void 0 : handleClick,
       children: [
         props.loading ? /* @__PURE__ */ jsx(Spinner, { size: iconSize, color: "current", className: props.classNames?.spinner }) : iconPosition === "left" && iconNode,
-        /* @__PURE__ */ jsx("span", { className: props.classNames?.content, children: props.text ?? props.children }),
+        !props.iconOnly && content !== void 0 && content !== null && /* @__PURE__ */ jsx("span", { className: props.classNames?.content, children: content }),
         !props.loading && iconPosition === "right" && iconNode
       ]
     }
@@ -398,6 +407,21 @@ var Button = ({
     }
   );
 };
+var ConfirmButton = (props) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    text: props.text,
+    onClick: props.onClick,
+    disabled: props.disabled,
+    loading: props.loading,
+    variant: props.variant,
+    size: props.size,
+    icon: props.icon,
+    className: props.className,
+    confirm: props.confirm,
+    children: props.children
+  }
+);
 var InputField = ({ noMargin, className, children }) => /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-col gap-1", !noMargin && "mb-3", className), children });
 var InputLabel = ({ label, required, className, requiredMarkClassName }) => /* @__PURE__ */ jsxs("label", { className: twMerge("text-sm text-(--ui-text)", className), children: [
   label,
@@ -411,12 +435,12 @@ var ErrorContext = createContext({
 var ErrorProvider = ({ resolveInputError, resolveServerError, children }) => /* @__PURE__ */ jsx(ErrorContext.Provider, { value: { resolveInputError, resolveServerError }, children });
 var useErrorResolver = () => useContext(ErrorContext).resolveInputError;
 var useServerError = () => useContext(ErrorContext).resolveServerError;
-var TextInput = ({
+var TextInput = forwardRef(({
   size = "middle",
   password = false,
   newPassword = false,
   ...props
-}) => {
+}, ref) => {
   const [showPassword, setShowPassword] = useState(false);
   const resolveError = useErrorResolver();
   const resolvedErrors = props.errorName ? resolveError(props.errorName) : [];
@@ -437,6 +461,7 @@ var TextInput = ({
       /* @__PURE__ */ jsx(
         "input",
         {
+          ref,
           type: inputType,
           autoComplete: newPassword ? "new-password" : void 0,
           placeholder: props.placeholder,
@@ -470,6 +495,27 @@ var TextInput = ({
     ] }),
     errorDisplay && /* @__PURE__ */ jsx(InputError, { error: String(errorDisplay), className: props.classNames?.error })
   ] });
+});
+TextInput.displayName = "TextInput";
+var Textarea = ({ rows = 4, ...props }) => {
+  const resolveError = useErrorResolver();
+  const resolvedErrors = props.errorName ? resolveError(props.errorName) : [];
+  const errorDisplay = props.error ?? props.customError ?? (resolvedErrors.length > 0 ? resolvedErrors.join(", ") : void 0);
+  return /* @__PURE__ */ jsxs(InputField, { noMargin: props.noMargin, className: props.className, children: [
+    props.label && /* @__PURE__ */ jsx(InputLabel, { label: props.label, required: props.required }),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        rows,
+        value: props.value ?? "",
+        placeholder: props.placeholder,
+        disabled: props.disabled,
+        onChange: (e) => props.onChange?.(e.target.value),
+        className: twMerge(inputBaseClass, "min-h-24 py-2", errorDisplay && "border-(--ui-danger)")
+      }
+    ),
+    errorDisplay && /* @__PURE__ */ jsx(InputError, { error: String(errorDisplay) })
+  ] });
 };
 var numberInputClass = inputBaseClass + " [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none";
 var NumberInput = ({
@@ -578,6 +624,49 @@ var CheckboxInput = ({
     errorDisplay && /* @__PURE__ */ jsx(InputError, { error: String(errorDisplay), className: props.classNames?.error })
   ] });
 };
+var RadioGroup = ({
+  direction = "column",
+  ...props
+}) => {
+  const resolveError = useErrorResolver();
+  const resolvedErrors = props.errorName ? resolveError(props.errorName) : [];
+  const errorDisplay = props.error ?? props.customError ?? (resolvedErrors.length > 0 ? resolvedErrors.join(", ") : void 0);
+  return /* @__PURE__ */ jsxs(InputField, { noMargin: props.noMargin, className: props.className, children: [
+    props.label && /* @__PURE__ */ jsx(InputLabel, { label: props.label, required: props.required }),
+    /* @__PURE__ */ jsx("div", { className: twMerge("flex gap-2", direction === "column" ? "flex-col" : "flex-wrap items-stretch"), children: props.options.map((option) => {
+      const checked = props.value === option.value;
+      const isDisabled = props.disabled || option.disabled;
+      return /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: twMerge(
+            "flex items-start gap-3 rounded-(--ui-radius-md) border border-(--ui-border) bg-white px-3 py-2",
+            checked && "border-(--ui-border-focus) bg-(--ui-surface-subtle)",
+            isDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "radio",
+                className: "mt-1 h-4 w-4 accent-(--ui-primary)",
+                checked,
+                disabled: isDisabled,
+                onChange: () => props.onChange?.(option.value)
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("span", { className: "block text-sm text-(--ui-text)", children: option.label }),
+              option.description && /* @__PURE__ */ jsx("span", { className: twMerge("block text-xs", neutralTextClasses.soft), children: option.description })
+            ] })
+          ]
+        },
+        option.value
+      );
+    }) }),
+    errorDisplay && /* @__PURE__ */ jsx(InputError, { error: String(errorDisplay) })
+  ] });
+};
 var SwitchInput = ({
   value = false,
   size = "middle",
@@ -645,7 +734,7 @@ var SwitchInput = ({
 
 // src/floating/layerStack.ts
 var FLOATING_ROOT_SELECTOR = "[data-ui-floating-root]";
-var DRAWER_ROOT_SELECTOR = "[data-ui-drawer-root]";
+var LAYER_ROOT_SELECTOR = "[data-ui-layer-root]";
 function getTopmostElement(selector) {
   const elements = document.querySelectorAll(selector);
   return elements.length > 0 ? elements[elements.length - 1] : null;
@@ -656,8 +745,8 @@ function hasFloatingRootOpen() {
 function isTopmostFloatingRoot(element) {
   return element !== null && getTopmostElement(FLOATING_ROOT_SELECTOR) === element;
 }
-function isTopmostDrawerRoot(element) {
-  return element !== null && getTopmostElement(DRAWER_ROOT_SELECTOR) === element;
+function isTopmostLayerRoot(element) {
+  return element !== null && getTopmostElement(LAYER_ROOT_SELECTOR) === element;
 }
 function isTargetInsideFloatingRoot(target) {
   return target instanceof Element && target.closest(FLOATING_ROOT_SELECTOR) !== null;
@@ -1289,6 +1378,65 @@ var ColorInput = ({
     errorDisplay && /* @__PURE__ */ jsx(InputError, { error: String(errorDisplay), className: props.classNames?.error })
   ] });
 };
+var SearchInput = ({ ...props }) => {
+  const resolveError = useErrorResolver();
+  const resolvedErrors = props.errorName ? resolveError(props.errorName) : [];
+  const errorDisplay = props.error ?? props.customError ?? (resolvedErrors.length > 0 ? resolvedErrors.join(", ") : void 0);
+  const hasValue = !!props.value;
+  return /* @__PURE__ */ jsxs(InputField, { noMargin: props.noMargin, className: props.className, children: [
+    props.label && /* @__PURE__ */ jsx(InputLabel, { label: props.label }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(IconSearch, { size: 15, strokeWidth: 1.75, className: twMerge("pointer-events-none absolute left-3 top-1/2 -translate-y-1/2", neutralIconClasses.default) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: props.value ?? "",
+          onChange: (e) => props.onChange?.(e.target.value),
+          placeholder: props.placeholder ?? "Hledat...",
+          className: twMerge(inputBaseClass, "pl-9 pr-9", errorDisplay && "border-(--ui-danger)")
+        }
+      ),
+      hasValue && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            props.onChange?.("");
+            props.onClear?.();
+          },
+          className: twMerge("absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer", neutralIconClasses.default, neutralIconClasses.hover),
+          children: /* @__PURE__ */ jsx(IconX, { size: 14, strokeWidth: 2 })
+        }
+      )
+    ] }),
+    errorDisplay && /* @__PURE__ */ jsx(InputError, { error: String(errorDisplay) })
+  ] });
+};
+var InlineEdit = ({ value, placeholder = "Klikn\u011Bte pro editaci", multiline = false, onSave, label, className }) => {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value ?? "");
+  const cancel = () => {
+    setDraft(value ?? "");
+    setEditing(false);
+  };
+  const save = () => {
+    onSave?.(draft);
+    setEditing(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: twMerge("rounded-(--ui-radius-md) border border-(--ui-border) bg-white p-3", className), children: [
+    label && /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs font-medium uppercase tracking-[0.08em] text-(--ui-text-soft)", children: label }),
+    editing ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      multiline ? /* @__PURE__ */ jsx(Textarea, { value: draft, onChange: setDraft, noMargin: true, rows: 4 }) : /* @__PURE__ */ jsx(TextInput, { value: draft, onChange: setDraft, noMargin: true }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { size: "small", text: "Ulo\u017Eit", icon: IconCheck, onClick: save }),
+        /* @__PURE__ */ jsx(Button, { size: "small", variant: "default", text: "Zru\u0161it", icon: IconX, onClick: cancel })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => setEditing(true), className: "flex w-full items-start justify-between gap-3 text-left cursor-pointer", children: [
+      /* @__PURE__ */ jsx("span", { className: value ? "text-(--ui-text)" : twMerge("italic", neutralTextClasses.soft), children: value || placeholder }),
+      /* @__PURE__ */ jsx(IconPencil, { size: 14, strokeWidth: 1.75, className: neutralTextClasses.soft })
+    ] })
+  ] });
+};
 var Empty = ({
   text = "\u017D\xE1dn\xE9 z\xE1znamy k dispozici",
   description,
@@ -1619,145 +1767,155 @@ var Grid = (props) => {
     const next = selectedKeys.has(key) ? props.selection.selectedItems.filter((s) => getKey2(s, props.items, props.rowKey) !== key) : [...props.selection.selectedItems, item];
     props.selection.onChange(next);
   };
-  return /* @__PURE__ */ jsxs("div", { className: twMerge("relative border border-(--ui-border) rounded-(--ui-radius-lg) overflow-hidden", props.className), children: [
-    props.loading && !isInitialLoading && /* @__PURE__ */ jsx("div", { className: twMerge("absolute inset-0 z-10 bg-white/60 flex items-center justify-center", props.classNames?.overlay), children: /* @__PURE__ */ jsx(Spinner, { size: "large", color: "primary" }) }),
-    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: twMerge("w-full border-collapse", props.classNames?.table), children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: twMerge("bg-(--ui-primary) text-(--ui-primary-text)", props.classNames?.headerRow), children: [
-        props.selection && /* @__PURE__ */ jsx("th", { className: twMerge(sc.th, "w-9", verticalBorders && tableHeaderVerticalBorderClass, props.classNames?.headerCell), children: /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: allSelected,
-            ref: (el) => {
-              if (el) el.indeterminate = someSelected;
-            },
-            onChange: toggleAll,
-            className: "cursor-pointer accent-white"
-          }
-        ) }),
-        props.columns.map((col, i) => {
-          const isSortable = col.sortBy !== void 0;
-          const isCurrent = isSortable && grid.sortBy === col.sortBy;
-          return /* @__PURE__ */ jsx(
-            "th",
-            {
-              style: { width: col.width ?? columnTypeWidth2[col.type] },
-              onClick: isSortable ? () => handleSort(col) : void 0,
-              className: twMerge(
-                sc.th,
-                "font-normal text-left whitespace-nowrap",
-                verticalBorders && tableHeaderVerticalBorderClass,
-                isSortable && "cursor-pointer select-none hover:bg-white/10",
-                col.align === "center" && "text-center",
-                col.align === "right" && "text-right",
-                props.classNames?.headerCell
-              ),
-              children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
-                col.title,
-                isSortable && /* @__PURE__ */ jsx("span", { className: "opacity-70", children: isCurrent ? grid.direction === SortDirection.Asc ? /* @__PURE__ */ jsx(IconChevronUp, { size: 12, strokeWidth: 2 }) : /* @__PURE__ */ jsx(IconChevronDown, { size: 12, strokeWidth: 2 }) : /* @__PURE__ */ jsx(IconSelector, { size: 12, strokeWidth: 2 }) })
-              ] })
-            },
-            i
-          );
-        })
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: isInitialLoading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-        "td",
-        {
-          colSpan: props.columns.length + (props.selection ? 1 : 0),
-          className: twMerge("px-3 py-0", props.classNames?.loadingCell),
-          children: /* @__PURE__ */ jsx("div", { className: "flex min-h-28 items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, { size: "large", color: "primary" }) })
-        }
-      ) }) : isEmpty ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-        "td",
-        {
-          colSpan: props.columns.length + (props.selection ? 1 : 0),
-          className: twMerge("px-3", props.classNames?.emptyCell),
-          children: /* @__PURE__ */ jsx(Empty, { size: "compact", text: props.emptyText ?? "\u017D\xE1dn\xE9 z\xE1znamy", className: sc.emptyPy })
-        }
-      ) }) : props.items.map((item, rowIdx) => {
-        const key = getKey2(item, props.items, props.rowKey);
-        const isSelected = selectedKeys.has(key);
-        return /* @__PURE__ */ jsxs(
-          "tr",
-          {
-            onClick: props.onRowClick ? () => props.onRowClick(item) : void 0,
-            className: twMerge(
-              "border-t border-(--ui-border) transition-colors",
-              rowIdx % 2 === 1 && !isSelected && neutralSurfaceClasses.subtle,
-              isSelected && "bg-blue-50",
-              props.onRowClick && "cursor-pointer hover:bg-blue-50",
-              props.classNames?.bodyRow
-            ),
-            children: [
-              props.selection && /* @__PURE__ */ jsx(
-                "td",
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: twMerge(
+        "relative border border-(--ui-border) rounded-(--ui-radius-lg) overflow-hidden",
+        props.attachedTop && "rounded-t-none border-t-0",
+        props.className
+      ),
+      children: [
+        props.loading && !isInitialLoading && /* @__PURE__ */ jsx("div", { className: twMerge("absolute inset-0 z-10 bg-white/60 flex items-center justify-center", props.classNames?.overlay), children: /* @__PURE__ */ jsx(Spinner, { size: "large", color: "primary" }) }),
+        /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: twMerge("w-full border-collapse", props.classNames?.table), children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: twMerge("bg-(--ui-primary) text-(--ui-primary-text)", props.classNames?.headerRow), children: [
+            props.selection && /* @__PURE__ */ jsx("th", { className: twMerge(sc.th, "w-9", verticalBorders && tableHeaderVerticalBorderClass, props.classNames?.headerCell), children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: allSelected,
+                ref: (el) => {
+                  if (el) el.indeterminate = someSelected;
+                },
+                onChange: toggleAll,
+                className: "cursor-pointer accent-white"
+              }
+            ) }),
+            props.columns.map((col, i) => {
+              const isSortable = col.sortBy !== void 0;
+              const isCurrent = isSortable && grid.sortBy === col.sortBy;
+              return /* @__PURE__ */ jsx(
+                "th",
                 {
-                  className: twMerge(sc.td, "w-9 align-middle", verticalBorders && tableCellVerticalBorderClass, props.classNames?.bodyCell),
-                  onClick: (e) => e.stopPropagation(),
-                  children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
-                    "input",
+                  style: { width: col.width ?? columnTypeWidth2[col.type] },
+                  onClick: isSortable ? () => handleSort(col) : void 0,
+                  className: twMerge(
+                    sc.th,
+                    "font-normal text-left whitespace-nowrap",
+                    verticalBorders && tableHeaderVerticalBorderClass,
+                    isSortable && "cursor-pointer select-none hover:bg-white/10",
+                    col.align === "center" && "text-center",
+                    col.align === "right" && "text-right",
+                    props.classNames?.headerCell
+                  ),
+                  children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                    col.title,
+                    isSortable && /* @__PURE__ */ jsx("span", { className: "opacity-70", children: isCurrent ? grid.direction === SortDirection.Asc ? /* @__PURE__ */ jsx(IconChevronUp, { size: 12, strokeWidth: 2 }) : /* @__PURE__ */ jsx(IconChevronDown, { size: 12, strokeWidth: 2 }) : /* @__PURE__ */ jsx(IconSelector, { size: 12, strokeWidth: 2 }) })
+                  ] })
+                },
+                i
+              );
+            })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: isInitialLoading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+            "td",
+            {
+              colSpan: props.columns.length + (props.selection ? 1 : 0),
+              className: twMerge("px-3 py-0", props.classNames?.loadingCell),
+              children: /* @__PURE__ */ jsx("div", { className: "flex min-h-28 items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, { size: "large", color: "primary" }) })
+            }
+          ) }) : isEmpty ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+            "td",
+            {
+              colSpan: props.columns.length + (props.selection ? 1 : 0),
+              className: twMerge("px-3", props.classNames?.emptyCell),
+              children: /* @__PURE__ */ jsx(Empty, { size: "compact", text: props.emptyText ?? "\u017D\xE1dn\xE9 z\xE1znamy", className: sc.emptyPy })
+            }
+          ) }) : props.items.map((item, rowIdx) => {
+            const key = getKey2(item, props.items, props.rowKey);
+            const isSelected = selectedKeys.has(key);
+            return /* @__PURE__ */ jsxs(
+              "tr",
+              {
+                onClick: props.onRowClick ? () => props.onRowClick(item) : void 0,
+                className: twMerge(
+                  "border-t border-(--ui-border) transition-colors",
+                  rowIdx % 2 === 1 && !isSelected && neutralSurfaceClasses.subtle,
+                  isSelected && "bg-blue-50",
+                  props.onRowClick && "cursor-pointer hover:bg-blue-50",
+                  props.classNames?.bodyRow
+                ),
+                children: [
+                  props.selection && /* @__PURE__ */ jsx(
+                    "td",
                     {
-                      type: "checkbox",
-                      checked: isSelected,
-                      onChange: () => toggleRow(item),
-                      className: "cursor-pointer"
+                      className: twMerge(sc.td, "w-9 align-middle", verticalBorders && tableCellVerticalBorderClass, props.classNames?.bodyCell),
+                      onClick: (e) => e.stopPropagation(),
+                      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: isSelected,
+                          onChange: () => toggleRow(item),
+                          className: "cursor-pointer"
+                        }
+                      ) })
                     }
-                  ) })
-                }
-              ),
-              props.columns.map((col, colIdx) => {
-                const content = col.render ? col.render(item) : col.dataField ? formatCellValue(item[col.dataField], col.type) : null;
-                const centeredContent = col.align === "center";
-                const rightAlignedContent = col.align === "right";
-                return /* @__PURE__ */ jsx(
-                  "td",
-                  {
-                    onClick: col.type === "dot" ? (e) => e.stopPropagation() : void 0,
-                    className: twMerge(
-                      sc.td,
-                      "align-middle",
-                      verticalBorders && tableCellVerticalBorderClass,
-                      col.ellipsis && "max-w-60 truncate",
-                      col.wrap && "whitespace-normal",
-                      col.align === "center" && "text-center",
-                      col.align === "right" && "text-right",
-                      col.type === "dot" && "w-9",
-                      props.classNames?.bodyCell
-                    ),
-                    children: centeredContent || rightAlignedContent ? /* @__PURE__ */ jsx(
-                      "div",
+                  ),
+                  props.columns.map((col, colIdx) => {
+                    const content = col.render ? col.render(item) : col.dataField ? formatCellValue(item[col.dataField], col.type) : null;
+                    const centeredContent = col.align === "center";
+                    const rightAlignedContent = col.align === "right";
+                    return /* @__PURE__ */ jsx(
+                      "td",
                       {
+                        onClick: col.type === "dot" ? (e) => e.stopPropagation() : void 0,
                         className: twMerge(
-                          "flex w-full items-center",
-                          centeredContent ? "justify-center" : "justify-end"
+                          sc.td,
+                          "align-middle",
+                          verticalBorders && tableCellVerticalBorderClass,
+                          col.ellipsis && "max-w-60 truncate",
+                          col.wrap && "whitespace-normal",
+                          col.align === "center" && "text-center",
+                          col.align === "right" && "text-right",
+                          col.type === "dot" && "w-9",
+                          props.classNames?.bodyCell
                         ),
-                        children: content
-                      }
-                    ) : content
-                  },
-                  colIdx
-                );
-              })
-            ]
-          },
-          key
-        );
-      }) })
-    ] }) }),
-    /* @__PURE__ */ jsx(
-      Pagination,
-      {
-        current: grid.pageNumber,
-        pageSize: grid.pageSize,
-        total: props.totalCount,
-        showPageNumberChanger: props.showPageNumberChanger ?? false,
-        showPageSizeChanger: props.showPageSizeChanger ?? false,
-        onChange: (page, pageSize) => grid.onChange({ pageNumber: page, pageSize }),
-        classNames: props.classNames?.pagination
-      }
-    )
-  ] });
+                        children: centeredContent || rightAlignedContent ? /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: twMerge(
+                              "flex w-full items-center",
+                              centeredContent ? "justify-center" : "justify-end"
+                            ),
+                            children: content
+                          }
+                        ) : content
+                      },
+                      colIdx
+                    );
+                  })
+                ]
+              },
+              key
+            );
+          }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          Pagination,
+          {
+            current: grid.pageNumber,
+            pageSize: grid.pageSize,
+            total: props.totalCount,
+            showPageNumberChanger: props.showPageNumberChanger ?? false,
+            showPageSizeChanger: props.showPageSizeChanger ?? false,
+            onChange: (page, pageSize) => grid.onChange({ pageNumber: page, pageSize }),
+            classNames: props.classNames?.pagination
+          }
+        )
+      ]
+    }
+  );
 };
 function isValueSet(v) {
   if (Array.isArray(v)) return v.length > 0;
@@ -2888,7 +3046,7 @@ var Drawer = ({ placement = "top", ...props }) => {
       if (isTargetInsideFloatingRoot(e.target)) {
         return;
       }
-      if (!isTopmostDrawerRoot(panelRef.current)) {
+      if (!isTopmostLayerRoot(panelRef.current)) {
         return;
       }
       props.onClose(false);
@@ -2929,7 +3087,7 @@ var Drawer = ({ placement = "top", ...props }) => {
         "div",
         {
           ref: panelRef,
-          "data-ui-drawer-root": "",
+          "data-ui-layer-root": "",
           className: twMerge(
             panelBase[placement],
             "bg-white shadow-xl transition-transform duration-220 ease-out",
@@ -3041,6 +3199,256 @@ var DrawerContent = ({ loading = false, children }) => {
   }
   return /* @__PURE__ */ jsx(Fragment, { children });
 };
+var ModalContext = createContext(null);
+function useModal() {
+  const ctx = useContext(ModalContext);
+  if (!ctx) {
+    throw new Error("useModal must be used inside Modal");
+  }
+  return ctx;
+}
+var TRANSITION_MS2 = 220;
+var sizeClass = {
+  small: "w-full max-w-lg",
+  middle: "w-full max-w-3xl",
+  large: "w-full max-w-5xl",
+  auto: "w-auto"
+};
+var Modal = ({
+  placement = "center",
+  size = "middle",
+  width,
+  maxWidth,
+  closeOnEscape = true,
+  closeOnOverlayClick = true,
+  showCloseButton = true,
+  hideHeader = false,
+  destroyOnClose = true,
+  preventClose = false,
+  beforeClose,
+  initialFocusRef,
+  ...props
+}) => {
+  const [rendered, setRendered] = useState(props.isOpen);
+  const [visible, setVisible] = useState(false);
+  const [title, setTitle] = useState("");
+  const [footer, setFooter] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const frameRef = useRef(0);
+  const panelRef = useRef(null);
+  useEffect(() => {
+    if (props.isOpen) {
+      setRendered(true);
+      frameRef.current = requestAnimationFrame(() => {
+        frameRef.current = requestAnimationFrame(() => setVisible(true));
+      });
+    } else {
+      setVisible(false);
+      if (!destroyOnClose) {
+        return () => cancelAnimationFrame(frameRef.current);
+      }
+      const t = setTimeout(() => setRendered(false), TRANSITION_MS2);
+      return () => clearTimeout(t);
+    }
+    return () => cancelAnimationFrame(frameRef.current);
+  }, [destroyOnClose, props.isOpen]);
+  useEffect(() => {
+    if (!props.isOpen) {
+      return;
+    }
+    const focusTarget = initialFocusRef?.current;
+    if (!focusTarget) {
+      return;
+    }
+    const timeout = window.setTimeout(() => focusTarget.focus(), TRANSITION_MS2 / 2);
+    return () => window.clearTimeout(timeout);
+  }, [initialFocusRef, props.isOpen]);
+  useEffect(() => {
+    if (!props.isOpen) {
+      return;
+    }
+    const handleKeyDown = (e) => {
+      if (!closeOnEscape || e.key !== "Escape" || e.defaultPrevented) {
+        return;
+      }
+      if (hasFloatingRootOpen() || isTargetInsideFloatingRoot(e.target)) {
+        return;
+      }
+      if (!isTopmostLayerRoot(panelRef.current)) {
+        return;
+      }
+      void requestClose();
+    };
+    document.body.style.overflow = "hidden";
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.body.style.overflow = "";
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [closeOnEscape, props.isOpen]);
+  if (!rendered) {
+    return null;
+  }
+  const requestClose = async () => {
+    if (preventClose) {
+      return;
+    }
+    const canClose = await beforeClose?.();
+    if (canClose === false) {
+      return;
+    }
+    props.onClose(false);
+  };
+  const close = () => {
+    void requestClose();
+  };
+  const saveAndClose = (message) => {
+    if (message) {
+      notification.success(message);
+    }
+    props.onClose(true);
+  };
+  const hasFooter = footer !== null;
+  const isFullscreen = placement === "fullscreen";
+  return createPortal(
+    /* @__PURE__ */ jsxs(ModalContext.Provider, { value: { close, saveAndClose, setTitle, setFooter, setLoading }, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: twMerge(
+            "fixed inset-0 z-1000 bg-black/40 transition-opacity duration-220",
+            visible ? "opacity-100" : "opacity-0",
+            !props.isOpen && "pointer-events-none",
+            props.classNames?.overlay
+          ),
+          onClick: () => closeOnOverlayClick && close()
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: twMerge(
+            "fixed inset-0 z-1001 flex p-4 transition-all duration-220",
+            isFullscreen ? "items-stretch justify-stretch p-0" : "items-center justify-center",
+            !props.isOpen && "pointer-events-none"
+          ),
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: panelRef,
+              "data-ui-layer-root": "",
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-hidden": !props.isOpen,
+              style: !isFullscreen ? { width, maxWidth } : void 0,
+              className: twMerge(
+                "bg-white shadow-xl flex flex-col transition-all duration-220 ease-out",
+                isFullscreen ? "h-full w-full rounded-none" : `${sizeClass[size]} max-h-[calc(100dvh-32px)] rounded-(--ui-radius-lg)`,
+                visible ? "scale-100 opacity-100" : "scale-95 opacity-0",
+                props.className,
+                props.classNames?.panel
+              ),
+              onClick: (e) => e.stopPropagation(),
+              children: [
+                !hideHeader && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: twMerge(
+                      "flex items-center justify-between gap-2 bg-(--ui-primary) shrink-0 rounded-t-(--ui-radius-lg)",
+                      isFullscreen && "rounded-none",
+                      drawerLayoutClasses.header,
+                      props.classNames?.header
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: twMerge(componentTitleClasses.inverse, "truncate", props.classNames?.title), children: title }),
+                      showCloseButton && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: close,
+                          className: twMerge(
+                            "shrink-0 text-(--ui-primary-text)/70 hover:text-(--ui-primary-text) cursor-pointer transition-colors",
+                            props.classNames?.closeButton
+                          ),
+                          children: /* @__PURE__ */ jsx(IconX, { size: 18, strokeWidth: 1.5 })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: twMerge(
+                      "overflow-y-auto flex-1",
+                      isFullscreen ? "min-h-0" : "max-h-[calc(100dvh-120px)]",
+                      drawerLayoutClasses.body,
+                      props.classNames?.body
+                    ),
+                    children: loading ? /* @__PURE__ */ jsx("div", { className: twMerge("flex items-center justify-center py-16", props.classNames?.loading), children: /* @__PURE__ */ jsx(Spinner, { size: "large", color: "primary" }) }) : props.children
+                  }
+                ),
+                hasFooter && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: twMerge(
+                      "border-t border-(--ui-border) shrink-0 bg-white",
+                      isFullscreen ? "rounded-none" : "rounded-b-(--ui-radius-lg)",
+                      drawerLayoutClasses.footer,
+                      props.classNames?.footer
+                    ),
+                    children: footer
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    ] }),
+    document.body
+  );
+};
+var ModalTitle = ({ children }) => {
+  const { setTitle } = useModal();
+  useEffect(() => {
+    setTitle(String(children));
+    return () => setTitle("");
+  }, [children]);
+  return null;
+};
+var alignClass2 = {
+  left: "justify-start",
+  center: "justify-center",
+  right: "justify-end"
+};
+var ModalFooter = ({ children, align = "right" }) => {
+  const { setFooter } = useModal();
+  useEffect(() => {
+    setFooter(
+      /* @__PURE__ */ jsx("div", { className: twMerge("flex items-center gap-2", alignClass2[align]), children })
+    );
+    return () => setFooter(null);
+  }, [align, children]);
+  return null;
+};
+var ModalSkeleton = () => /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-3", children: [
+  /* @__PURE__ */ jsx("div", { className: "h-4 bg-(--ui-surface-muted) rounded w-1/3" }),
+  /* @__PURE__ */ jsx("div", { className: "h-8 bg-(--ui-surface-muted) rounded" }),
+  /* @__PURE__ */ jsx("div", { className: "h-4 bg-(--ui-surface-muted) rounded w-1/3 mt-5" }),
+  /* @__PURE__ */ jsx("div", { className: "h-8 bg-(--ui-surface-muted) rounded" }),
+  /* @__PURE__ */ jsx("div", { className: "h-4 bg-(--ui-surface-muted) rounded w-1/3 mt-5" }),
+  /* @__PURE__ */ jsx("div", { className: "h-8 bg-(--ui-surface-muted) rounded" })
+] });
+var ModalContent = ({ loading = false, children }) => {
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+      /* @__PURE__ */ jsx(ModalSkeleton, {}),
+      /* @__PURE__ */ jsx(Skeleton, { active: true, title: false, paragraph: { rows: 2 } })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
 var Alert = ({ type = "info", message, description, closable = false, className, classNames }) => {
   const [closed, setClosed] = useState(false);
   if (closed) {
@@ -3132,31 +3540,214 @@ var Panel = ({
     }
   );
 };
+var Toolbar = ({ children, start, end, wrapped = true, inset = false, className, classNames }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: twMerge(
+      "flex items-center justify-between gap-3 rounded-(--ui-radius-lg) border border-(--ui-border)",
+      neutralSurfaceClasses.subtle,
+      wrapped && "flex-wrap",
+      inset ? "px-3 py-2" : "px-4 py-3",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsx("div", { className: twMerge("flex min-w-0 flex-1 items-center gap-2", wrapped && "flex-wrap", classNames?.start), children: start ?? children }),
+      end && /* @__PURE__ */ jsx("div", { className: twMerge("flex items-center gap-2", wrapped && "flex-wrap justify-end", classNames?.end), children: end })
+    ]
+  }
+);
+var ActionBar = Toolbar;
+var SectionHeader = ({ title, subtitle, actions, className }) => /* @__PURE__ */ jsxs("div", { className: twMerge("flex items-start justify-between gap-4", className), children: [
+  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-(--ui-text-strong)", children: title }),
+    subtitle && /* @__PURE__ */ jsx("p", { className: twMerge("mt-1 text-sm", neutralTextClasses.muted), children: subtitle })
+  ] }),
+  actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+] });
+var PageHeader = ({ title, subtitle, breadcrumbs, actions, extra, className }) => /* @__PURE__ */ jsxs("div", { className: twMerge("rounded-(--ui-radius-lg) border border-(--ui-border) bg-white p-5", className), children: [
+  breadcrumbs && /* @__PURE__ */ jsx("div", { className: twMerge("mb-2 text-xs", neutralTextClasses.soft), children: breadcrumbs }),
+  /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold text-(--ui-text-strong)", children: title }),
+      subtitle && /* @__PURE__ */ jsx("p", { className: twMerge("mt-1 text-sm", neutralTextClasses.muted), children: subtitle })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+  ] }),
+  extra && /* @__PURE__ */ jsx("div", { className: "mt-4 border-t border-(--ui-border) pt-4", children: extra })
+] });
+var AVATAR_COLORS = [
+  "bg-blue-500",
+  "bg-green-500",
+  "bg-purple-500",
+  "bg-orange-500",
+  "bg-pink-500",
+  "bg-teal-500",
+  "bg-red-500",
+  "bg-indigo-500"
+];
+function colorFromString(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+}
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) {
+    return parts[0].slice(0, 2).toUpperCase();
+  }
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+var sizeClasses = {
+  xs: "w-6 h-6 text-[10px]",
+  sm: "w-7 h-7 text-xs",
+  md: "w-8 h-8 text-sm",
+  lg: "w-10 h-10 text-base",
+  xl: "w-12 h-12 text-lg"
+};
+var Avatar = ({ size = "md", ...props }) => {
+  const initials = props.name ? getInitials(props.name) : "?";
+  const bgColor = props.color ?? (props.name ? colorFromString(props.name) : "bg-gray-400");
+  if (props.src) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: props.src,
+        alt: props.name ?? "avatar",
+        className: twMerge(
+          "rounded-full object-cover shrink-0",
+          sizeClasses[size],
+          props.className
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      title: props.name,
+      className: twMerge(
+        "inline-flex items-center justify-center rounded-full text-white font-medium shrink-0 select-none",
+        sizeClasses[size],
+        bgColor,
+        props.className
+      ),
+      children: /* @__PURE__ */ jsx("span", { className: props.initialsClassName, children: initials })
+    }
+  );
+};
+var EntityHeader = ({ title, subtitle, avatarName, icon: Icon, meta, tags, actions, className }) => /* @__PURE__ */ jsx("div", { className: twMerge("rounded-(--ui-radius-lg) border border-(--ui-border) bg-white p-5", className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [
+    avatarName ? /* @__PURE__ */ jsx(Avatar, { name: avatarName, size: "lg" }) : Icon ? /* @__PURE__ */ jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-(--ui-radius-lg) bg-(--ui-surface-subtle)", children: /* @__PURE__ */ jsx(Icon, { size: 20, strokeWidth: 1.8, className: "text-(--ui-text)" }) }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-xl font-semibold text-(--ui-text-strong)", children: title }),
+      subtitle && /* @__PURE__ */ jsx("div", { className: twMerge("mt-1 text-sm", neutralTextClasses.muted), children: subtitle }),
+      (meta || tags) && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [
+        meta,
+        tags
+      ] })
+    ] })
+  ] }),
+  actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+] }) });
+var alignClass3 = {
+  left: "justify-start",
+  center: "justify-center",
+  right: "justify-end",
+  between: "justify-between"
+};
+var FormActions = ({ children, align = "right", className }) => /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-wrap items-center gap-2 border-t border-(--ui-border) pt-4", alignClass3[align], className), children });
+var FormSection = ({ title, description, actions, children, className }) => /* @__PURE__ */ jsxs("fieldset", { className: twMerge("rounded-(--ui-radius-lg) border border-(--ui-border) bg-white p-4", className), children: [
+  /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-start justify-between gap-4", children: [
+    /* @__PURE__ */ jsxs("legend", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-(--ui-text-strong)", children: title }),
+      description && /* @__PURE__ */ jsx("div", { className: twMerge("mt-1 text-xs", neutralTextClasses.soft), children: description })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: actions })
+  ] }),
+  /* @__PURE__ */ jsx("div", { className: "space-y-4", children })
+] });
+var Fieldset = FormSection;
+var listVariantClass = {
+  segmented: "inline-flex gap-0 rounded-(--ui-radius-lg) p-1",
+  underline: "inline-flex gap-1 border-b border-(--ui-border-strong)",
+  cards: "inline-flex gap-2"
+};
+var listSurfaceClass = {
+  segmented: neutralSurfaceClasses.subtle,
+  underline: "",
+  cards: ""
+};
+var tabSizeClass = {
+  small: "h-8 px-3 text-[12px]",
+  middle: "h-9 px-4 text-[14px]",
+  large: "h-10 px-5 text-[15px]"
+};
+var tabVariantClass = {
+  segmented: "rounded-[calc(var(--ui-radius-lg)-4px)]",
+  underline: "border-b-2 border-transparent rounded-none -mb-px",
+  cards: "rounded-(--ui-radius-lg) border border-(--ui-border) bg-white shadow-sm"
+};
+var activeVariantClass = {
+  segmented: "bg-white text-(--ui-text-strong) shadow-sm font-semibold",
+  underline: "border-(--ui-primary) text-(--ui-text-strong) font-semibold",
+  cards: "border-(--ui-border-focus) bg-(--ui-surface-subtle) text-(--ui-text-strong) font-semibold shadow-none"
+};
+var inactiveVariantClass = {
+  segmented: "text-(--ui-text-muted) hover:text-(--ui-text)",
+  underline: "text-(--ui-text-muted) hover:text-(--ui-text)",
+  cards: "text-(--ui-text-muted) hover:border-(--ui-border-focus) hover:text-(--ui-text)"
+};
 var Tabs = ({
   block = true,
+  variant = "segmented",
+  size = "middle",
   ...props
 }) => /* @__PURE__ */ jsx(
   "div",
   {
+    role: "tablist",
     className: twMerge(
-      "inline-flex gap-0 rounded-(--ui-radius-lg) p-1",
-      neutralSurfaceClasses.subtle,
+      listVariantClass[variant],
+      listSurfaceClass[variant],
       block && "flex w-full",
       props.className,
       props.classNames?.list
     ),
-    children: props.options.map((opt) => /* @__PURE__ */ jsx(
+    children: props.options.map((opt) => /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
-        onClick: () => props.onChange(opt.value),
+        role: "tab",
+        "aria-selected": props.value === opt.value,
+        disabled: opt.disabled,
+        onClick: () => !opt.disabled && props.onChange(opt.value),
         className: twMerge(
-          "flex-1 h-9 px-4 text-[14px] rounded-[calc(var(--ui-radius-lg)-4px)] transition-all duration-150 cursor-pointer select-none whitespace-nowrap",
-          props.value === opt.value ? "bg-white text-(--ui-text-strong) shadow-sm font-semibold" : "text-(--ui-text-muted) hover:text-(--ui-text)",
+          "flex-1 min-w-0 transition-all duration-150 cursor-pointer select-none whitespace-nowrap",
+          "inline-flex items-center justify-center gap-2",
+          tabSizeClass[size],
+          tabVariantClass[variant],
+          props.value === opt.value ? activeVariantClass[variant] : inactiveVariantClass[variant],
+          opt.disabled && "cursor-not-allowed opacity-45 hover:border-(--ui-border) hover:text-(--ui-text-muted)",
           props.classNames?.tab,
           props.value === opt.value ? props.classNames?.activeTab : props.classNames?.inactiveTab
         ),
-        children: opt.label
+        children: [
+          opt.icon && /* @__PURE__ */ jsx("span", { className: twMerge("shrink-0", props.classNames?.icon), children: opt.icon }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: opt.label }),
+          opt.badge && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: twMerge(
+                "shrink-0 rounded-full px-2 py-0.5 text-[11px] leading-none",
+                props.value === opt.value ? "bg-(--ui-primary) text-(--ui-primary-text)" : "bg-(--ui-surface-muted) text-(--ui-text-muted)",
+                props.classNames?.badge
+              ),
+              children: opt.badge
+            }
+          )
+        ]
       },
       opt.value
     ))
@@ -3238,68 +3829,6 @@ var FlagTag = ({ value, label, color = "geekblue", variant }) => {
   }
   return /* @__PURE__ */ jsx(Tag, { color, variant, children: label });
 };
-var AVATAR_COLORS = [
-  "bg-blue-500",
-  "bg-green-500",
-  "bg-purple-500",
-  "bg-orange-500",
-  "bg-pink-500",
-  "bg-teal-500",
-  "bg-red-500",
-  "bg-indigo-500"
-];
-function colorFromString(str) {
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    hash = str.charCodeAt(i) + ((hash << 5) - hash);
-  }
-  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
-}
-function getInitials(name) {
-  const parts = name.trim().split(/\s+/);
-  if (parts.length === 1) {
-    return parts[0].slice(0, 2).toUpperCase();
-  }
-  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
-}
-var sizeClasses = {
-  xs: "w-6 h-6 text-[10px]",
-  sm: "w-7 h-7 text-xs",
-  md: "w-8 h-8 text-sm",
-  lg: "w-10 h-10 text-base",
-  xl: "w-12 h-12 text-lg"
-};
-var Avatar = ({ size = "md", ...props }) => {
-  const initials = props.name ? getInitials(props.name) : "?";
-  const bgColor = props.color ?? (props.name ? colorFromString(props.name) : "bg-gray-400");
-  if (props.src) {
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: props.src,
-        alt: props.name ?? "avatar",
-        className: twMerge(
-          "rounded-full object-cover shrink-0",
-          sizeClasses[size],
-          props.className
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      title: props.name,
-      className: twMerge(
-        "inline-flex items-center justify-center rounded-full text-white font-medium shrink-0 select-none",
-        sizeClasses[size],
-        bgColor,
-        props.className
-      ),
-      children: /* @__PURE__ */ jsx("span", { className: props.initialsClassName, children: initials })
-    }
-  );
-};
 var defaultToolbar = [
   "bold",
   "italic",
@@ -3973,6 +4502,88 @@ var useNotification = () => {
     info: (message, options) => add("info", message, options)
   };
 };
+var EmptyState = ({
+  primaryActionText,
+  onPrimaryAction,
+  secondaryActionText,
+  onSecondaryAction,
+  extra,
+  className,
+  classNames,
+  ...props
+}) => /* @__PURE__ */ jsxs("div", { className: twMerge("rounded-(--ui-radius-lg) border border-(--ui-border) bg-white", className), children: [
+  /* @__PURE__ */ jsx(Empty, { className: "py-10", ...props }),
+  (primaryActionText || secondaryActionText || extra) && /* @__PURE__ */ jsxs("div", { className: twMerge("flex flex-wrap items-center justify-center gap-2 px-4 pb-6", classNames?.actions), children: [
+    secondaryActionText && /* @__PURE__ */ jsx(Button, { variant: "default", text: secondaryActionText, onClick: onSecondaryAction }),
+    primaryActionText && /* @__PURE__ */ jsx(Button, { text: primaryActionText, onClick: onPrimaryAction }),
+    extra && /* @__PURE__ */ jsx("div", { className: classNames?.extra, children: extra })
+  ] })
+] });
+var trendConfig = {
+  up: {
+    icon: IconArrowUpRight,
+    className: "text-(--ui-success)"
+  },
+  down: {
+    icon: IconArrowDownRight,
+    className: "text-(--ui-danger)"
+  },
+  neutral: {
+    icon: IconMinus,
+    className: neutralTextClasses.soft
+  }
+};
+var StatCard = ({ label, value, description, icon: Icon, trend, footer, className }) => {
+  const trendDirection = trend?.direction ?? "neutral";
+  const TrendIcon = trend ? trendConfig[trendDirection].icon : null;
+  return /* @__PURE__ */ jsxs("div", { className: twMerge("rounded-(--ui-radius-lg) border border-(--ui-border) bg-white p-4 shadow-sm", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("p", { className: twMerge("text-sm", neutralTextClasses.muted), children: label }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-2xl font-semibold text-(--ui-text-strong)", children: value }),
+        description && /* @__PURE__ */ jsx("p", { className: twMerge("mt-1 text-xs", neutralTextClasses.soft), children: description })
+      ] }),
+      Icon && /* @__PURE__ */ jsx("div", { className: twMerge("flex h-10 w-10 items-center justify-center rounded-(--ui-radius-lg)", neutralSurfaceClasses.subtle), children: /* @__PURE__ */ jsx(Icon, { size: 18, strokeWidth: 1.75, className: neutralTextClasses.default }) })
+    ] }),
+    trend && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-2 text-sm", children: [
+      TrendIcon && /* @__PURE__ */ jsx(TrendIcon, { size: 15, strokeWidth: 2, className: trendConfig[trendDirection].className }),
+      /* @__PURE__ */ jsx("span", { className: twMerge("font-medium", trendConfig[trendDirection].className), children: trend.value }),
+      trend.label && /* @__PURE__ */ jsx("span", { className: neutralTextClasses.soft, children: trend.label })
+    ] }),
+    footer && /* @__PURE__ */ jsx("div", { className: "mt-4 border-t border-(--ui-border) pt-3", children: footer })
+  ] });
+};
+var DescriptionList = ({ items, columns = 2, className }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: twMerge(
+      "grid gap-x-6 gap-y-4 rounded-(--ui-radius-lg) border border-(--ui-border) bg-white p-4",
+      columns === 1 && "grid-cols-1",
+      columns === 2 && "grid-cols-1 md:grid-cols-2",
+      columns === 3 && "grid-cols-1 md:grid-cols-3",
+      className
+    ),
+    children: items.map((item, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: twMerge(
+          "min-w-0",
+          item.span === 2 && columns > 1 && "md:col-span-2",
+          item.span === 3 && columns > 2 && "md:col-span-3"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("dt", { className: twMerge("text-xs font-medium uppercase tracking-[0.08em]", neutralTextClasses.soft), children: item.label }),
+          /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-(--ui-text)", children: item.value })
+        ]
+      },
+      index
+    ))
+  }
+);
+var KeyValue = ({ label, value, className }) => /* @__PURE__ */ jsxs("div", { className: twMerge("flex items-start justify-between gap-4 border-b border-(--ui-border) py-2 last:border-b-0", className), children: [
+  /* @__PURE__ */ jsx("span", { className: twMerge("text-sm", neutralTextClasses.muted), children: label }),
+  /* @__PURE__ */ jsx("span", { className: "text-right text-sm text-(--ui-text)", children: value })
+] });
 var Pretty = ({ data, className }) => /* @__PURE__ */ jsx(
   "pre",
   {
@@ -3983,6 +4594,10 @@ var Pretty = ({ data, className }) => /* @__PURE__ */ jsx(
     children: JSON.stringify(data, null, 2)
   }
 );
+var SkeletonTable = ({ rows = 5, columns = 4, className }) => /* @__PURE__ */ jsx("div", { className: twMerge("overflow-hidden rounded-(--ui-radius-lg) border border-(--ui-border) bg-white", className), children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse", children: [
+  /* @__PURE__ */ jsx("div", { className: "grid bg-(--ui-primary) px-4 py-3", style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }, children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx("div", { className: "h-3 w-20 rounded bg-white/30" }, index)) }),
+  /* @__PURE__ */ jsx("div", { className: "divide-y divide-(--ui-border)", children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsx("div", { className: "grid gap-4 px-4 py-3", style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }, children: Array.from({ length: columns }).map((__, columnIndex) => /* @__PURE__ */ jsx("div", { className: "h-3 rounded bg-(--ui-surface-muted)" }, columnIndex)) }, rowIndex)) })
+] }) });
 var GAP2 = 10;
 var VIEWPORT_MARGIN2 = 8;
 function calcPosition3(trigger, tooltip, placement) {
@@ -4137,6 +4752,47 @@ var Tooltip = ({
     )
   ] });
 };
+var Stepper = ({ items, className }) => /* @__PURE__ */ jsx("div", { className: twMerge("flex flex-wrap gap-4", className), children: items.map((item, index) => {
+  const status = item.status ?? "upcoming";
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-40 flex-1 items-start gap-3", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: twMerge(
+          "mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full border text-xs font-semibold",
+          status === "complete" && "border-(--ui-success) bg-(--ui-success) text-white",
+          status === "current" && "border-(--ui-primary) bg-(--ui-primary) text-white",
+          status === "upcoming" && "border-(--ui-border) bg-white text-(--ui-text-soft)"
+        ),
+        children: status === "complete" ? /* @__PURE__ */ jsx(IconCheck, { size: 14, strokeWidth: 2.5 }) : index + 1
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("div", { className: twMerge("text-sm font-medium", status === "upcoming" ? neutralTextClasses.muted : "text-(--ui-text-strong)"), children: item.title }),
+      item.description && /* @__PURE__ */ jsx("div", { className: twMerge("mt-1 text-xs", neutralTextClasses.soft), children: item.description })
+    ] })
+  ] }, index);
+}) });
+var colorClass = {
+  primary: "bg-(--ui-primary)",
+  success: "bg-(--ui-success)",
+  danger: "bg-(--ui-danger)",
+  warning: "bg-(--ui-warning)",
+  neutral: "bg-(--ui-border-strong)"
+};
+var Timeline = ({ items, className }) => /* @__PURE__ */ jsx("div", { className: twMerge("space-y-4", className), children: items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "relative flex gap-3 pl-1", children: [
+  /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center", children: [
+    /* @__PURE__ */ jsx("span", { className: twMerge("mt-1 h-2.5 w-2.5 rounded-full", colorClass[item.color ?? "primary"]) }),
+    index < items.length - 1 && /* @__PURE__ */ jsx("span", { className: "mt-1 h-full w-px bg-(--ui-border)" })
+  ] }),
+  /* @__PURE__ */ jsxs("div", { className: "min-w-0 pb-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-(--ui-text-strong)", children: item.title }),
+      item.time && /* @__PURE__ */ jsx("div", { className: twMerge("text-xs", neutralTextClasses.soft), children: item.time })
+    ] }),
+    item.description && /* @__PURE__ */ jsx("div", { className: twMerge("mt-1 text-sm", neutralTextClasses.muted), children: item.description })
+  ] })
+] }, index)) });
 
 // src/initUI.ts
 function initUI(config) {
@@ -4250,6 +4906,6 @@ function initUI(config) {
   r.style.setProperty("--ui-empty-compact-description", layout.empty.compactDescription);
 }
 
-export { ActiveTag, Alert, Avatar, Badge, Button, CheckboxInput, ColorInput, DateInput, Drawer, DrawerContent, DrawerFooter, DrawerTitle, Dropdown, Empty, ErrorProvider, FilterCheckboxInput, FilterDateInput, FilterDateRangePopover, FilterNumberInput, FilterSelectGroupPopover, FilterSelectInput, FilterTextInput, FlagTag, Grid, GridFilters, HtmlInput, InputError, InputField, InputLabel, MultiSelectInput, NotificationProvider, NumberInput, Panel, Popconfirm, Pretty, SelectInput, ServerError, Skeleton, SortDirection, Spinner, SwitchInput, Table, Tabs, Tag, TextInput, Tooltip, UploadInput, UploadProvider, getIcon, initUI, notification, registerIcons, uiTheme, useDrawer, useGrid, useNotification, useUploadConfig };
+export { ActionBar, ActiveTag, Alert, Avatar, Badge, Button, CheckboxInput, ColorInput, ConfirmButton, DateInput, DescriptionList, Drawer, DrawerContent, DrawerFooter, DrawerTitle, Dropdown, Empty, EmptyState, EntityHeader, ErrorProvider, Fieldset, FilterCheckboxInput, FilterDateInput, FilterDateRangePopover, FilterNumberInput, FilterSelectGroupPopover, FilterSelectInput, FilterTextInput, FlagTag, FormActions, FormSection, Grid, GridFilters, HtmlInput, InlineEdit, InputError, InputField, InputLabel, KeyValue, Modal, ModalContent, ModalFooter, ModalTitle, MultiSelectInput, NotificationProvider, NumberInput, PageHeader, Panel, Popconfirm, Pretty, RadioGroup, SearchInput, SectionHeader, SelectInput, ServerError, Skeleton, SkeletonTable, SortDirection, Spinner, StatCard, Stepper, SwitchInput, Table, Tabs, Tag, TextInput, Textarea, Timeline, Toolbar, Tooltip, UploadInput, UploadProvider, getIcon, initUI, notification, registerIcons, uiTheme, useDrawer, useGrid, useModal, useNotification, useUploadConfig };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map