@kopexa/sight 17.12.1 → 17.13.1

package/dist/index.js

@@ -30,7 +30,8 @@ __export(index_exports, {
   AlertDialog: () => import_alert_dialog.AlertDialog,
   AuditInfo: () => import_audit_info.AuditInfo,
   Autocomplete: () => import_autocomplete.Autocomplete,
-  AvatarUpload: () => import_file_upload.AvatarUpload,
+  AvatarUpload: () => AvatarUpload,
+  Blankstate: () => Blankstate,
   Breadcrumb: () => import_navigation.Breadcrumb,
   BreadcrumbEllipsis: () => import_navigation.BreadcrumbEllipsis,
   BreadcrumbItem: () => import_navigation.BreadcrumbItem,
@@ -48,14 +49,28 @@ __export(index_exports, {
   CardTitle: () => import_card.CardTitle,
   CardToolbar: () => import_card.CardToolbar,
   Chip: () => import_chip.Chip,
+  Code: () => Code,
   Combobox: () => import_combobox.Combobox,
   ConfirmDialogProvider: () => import_alert_dialog.ConfirmDialogProvider,
   Conversation: () => import_assistant.Conversation,
   ConversationContent: () => import_assistant.ConversationContent,
   ConversationEmptyState: () => import_assistant.ConversationEmptyState,
   ConversationScrollButton: () => import_assistant.ConversationScrollButton,
-  Cropper: () => import_image_crop.Cropper,
+  Cropper: () => import_image_crop2.Cropper,
   DataGrid: () => import_data_grid.DataGrid,
+  Dialog: () => Dialog,
+  DialogBody: () => DialogBody,
+  DialogClose: () => DialogClose,
+  DialogCloseTrigger: () => DialogCloseTrigger,
+  DialogContent: () => DialogContent,
+  DialogDescription: () => DialogDescription,
+  DialogFooter: () => DialogFooter,
+  DialogHeader: () => DialogHeader,
+  DialogOverlay: () => DialogOverlay,
+  DialogPortal: () => DialogPortal,
+  DialogRoot: () => DialogRoot,
+  DialogTitle: () => DialogTitle,
+  DialogTrigger: () => DialogTrigger,
   EditableText: () => import_editable_text.EditableText,
   Filter: () => import_filter.Filter,
   FilterActive: () => import_filter.FilterActive,
@@ -66,10 +81,10 @@ __export(index_exports, {
   FilterMenuSeparator: () => import_filter.FilterMenuSeparator,
   FilterTrigger: () => import_filter.FilterTrigger,
   FilterValueEditor: () => import_filter.FilterValueEditor,
-  ImageCrop: () => import_image_crop.ImageCrop,
-  ImageCropApply: () => import_image_crop.ImageCropApply,
-  ImageCropContent: () => import_image_crop.ImageCropContent,
-  ImageCropReset: () => import_image_crop.ImageCropReset,
+  ImageCrop: () => import_image_crop2.ImageCrop,
+  ImageCropApply: () => import_image_crop2.ImageCropApply,
+  ImageCropContent: () => import_image_crop2.ImageCropContent,
+  ImageCropReset: () => import_image_crop2.ImageCropReset,
   IntegrationCard: () => import_integration_card.IntegrationCard,
   Label: () => import_label.Label,
   LoadingPage: () => import_loading.LoadingPage,
@@ -91,29 +106,33 @@ __export(index_exports, {
   ScrollBar: () => import_scroll_area.ScrollBar,
   SearchFilterBar: () => import_filter.SearchFilterBar,
   Select: () => import_select.Select,
+  Skeleton: () => Skeleton,
+  SkeletonAvatar: () => SkeletonAvatar,
   StandardChip: () => import_chip.StandardChip,
-  Stat: () => import_stat.Stat,
-  StatDownIndicator: () => import_stat.StatDownIndicator,
-  StatGroup: () => import_stat.StatGroup,
-  StatHelpText: () => import_stat.StatHelpText,
-  StatLabel: () => import_stat.StatLabel,
-  StatRoot: () => import_stat.StatRoot,
-  StatUpIndicator: () => import_stat.StatUpIndicator,
-  StatValueText: () => import_stat.StatValueText,
-  StatValueUnit: () => import_stat.StatValueUnit,
+  Stat: () => Stat,
+  StatDownIndicator: () => StatDownIndicator,
+  StatGroup: () => StatGroup,
+  StatHelpText: () => StatHelpText,
+  StatLabel: () => StatLabel,
+  StatRoot: () => StatRoot,
+  StatUpIndicator: () => StatUpIndicator,
+  StatValueText: () => StatValueText,
+  StatValueUnit: () => StatValueUnit,
   Switch: () => import_switch.Switch,
   Tabs: () => import_tabs.Tabs,
-  Textarea: () => import_textarea.Textarea,
+  Textarea: () => Textarea,
   ToggleRow: () => import_toggle_row.ToggleRow,
   Toolbar: () => import_toolbar.Toolbar,
   ToolbarButton: () => import_toolbar.ToolbarButton,
   ToolbarGroup: () => import_toolbar.ToolbarGroup,
   ToolbarSeparator: () => import_toolbar.ToolbarSeparator,
   auditInfoMessages: () => import_audit_info.auditInfoMessages,
-  cn: () => import_shared_utils.cn,
+  cn: () => import_shared_utils8.cn,
   filterBarMessages: () => import_filter.filterBarMessages,
   filterMessages: () => import_filter.filterMessages,
   useConfirm: () => import_alert_dialog.useConfirm,
+  useDialogContext: () => useDialogContext,
+  useFileUpload: () => useFileUpload,
   useFilterContext: () => import_filter.useFilterContext
 });
 module.exports = __toCommonJS(index_exports);
@@ -123,29 +142,24 @@ var import_assistant = require("@kopexa/assistant");
 var import_audit_info = require("@kopexa/audit-info");
 var import_autocomplete = require("@kopexa/autocomplete");
 __reExport(index_exports, require("@kopexa/avatar"), module.exports);
-__reExport(index_exports, require("@kopexa/blankstate"), module.exports);
 __reExport(index_exports, require("@kopexa/button"), module.exports);
 __reExport(index_exports, require("@kopexa/calendar"), module.exports);
 __reExport(index_exports, require("@kopexa/callout"), module.exports);
 var import_card = require("@kopexa/card");
 __reExport(index_exports, require("@kopexa/checkbox"), module.exports);
 var import_chip = require("@kopexa/chip");
-__reExport(index_exports, require("@kopexa/code"), module.exports);
 __reExport(index_exports, require("@kopexa/color-picker"), module.exports);
 var import_combobox = require("@kopexa/combobox");
 __reExport(index_exports, require("@kopexa/command"), module.exports);
 var import_data_grid = require("@kopexa/data-grid");
-__reExport(index_exports, require("@kopexa/data-table"), module.exports);
 __reExport(index_exports, require("@kopexa/date-picker"), module.exports);
-__reExport(index_exports, require("@kopexa/dialog"), module.exports);
 __reExport(index_exports, require("@kopexa/drawer"), module.exports);
 __reExport(index_exports, require("@kopexa/dropdown-menu"), module.exports);
 var import_editable_text = require("@kopexa/editable-text");
-var import_file_upload = require("@kopexa/file-upload");
 var import_filter = require("@kopexa/filter");
 __reExport(index_exports, require("@kopexa/heading"), module.exports);
 __reExport(index_exports, require("@kopexa/hover-card"), module.exports);
-var import_image_crop = require("@kopexa/image-crop");
+var import_image_crop2 = require("@kopexa/image-crop");
 __reExport(index_exports, require("@kopexa/infotip"), module.exports);
 __reExport(index_exports, require("@kopexa/input"), module.exports);
 var import_integration_card = require("@kopexa/integration-card");
@@ -164,20 +178,1068 @@ var import_scroll_area = require("@kopexa/scroll-area");
 __reExport(index_exports, require("@kopexa/section-row"), module.exports);
 var import_select = require("@kopexa/select");
 __reExport(index_exports, require("@kopexa/separator"), module.exports);
-var import_shared_utils = require("@kopexa/shared-utils");
+var import_shared_utils8 = require("@kopexa/shared-utils");
 __reExport(index_exports, require("@kopexa/sidebar"), module.exports);
-__reExport(index_exports, require("@kopexa/skeleton"), module.exports);
 __reExport(index_exports, require("@kopexa/spinner"), module.exports);
 __reExport(index_exports, require("@kopexa/split-page-layout"), module.exports);
-var import_stat = require("@kopexa/stat");
 var import_switch = require("@kopexa/switch");
 __reExport(index_exports, require("@kopexa/tab-nav"), module.exports);
 __reExport(index_exports, require("@kopexa/table"), module.exports);
 var import_tabs = require("@kopexa/tabs");
-var import_textarea = require("@kopexa/textarea");
 var import_toggle_row = require("@kopexa/toggle-row");
 var import_toolbar = require("@kopexa/toolbar");
 __reExport(index_exports, require("@kopexa/tooltip"), module.exports);
+
+// src/components/blankstate/blankstate.tsx
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_theme = require("@kopexa/theme");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Blankstate = (props) => {
+  const {
+    className,
+    children,
+    classNames,
+    icon,
+    title,
+    description,
+    size,
+    bordered,
+    narrow,
+    ...rest
+  } = props;
+  const styles = (0, import_theme.blankstate)({ size, bordered, narrow });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: styles.root({ className: (0, import_shared_utils.cn)(classNames == null ? void 0 : classNames.root, className) }),
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.container({ className: classNames == null ? void 0 : classNames.container }), children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.icon({ className: classNames == null ? void 0 : classNames.icon }), children: icon }),
+        title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: styles.title({ className: classNames == null ? void 0 : classNames.title }), children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: styles.description({
+              className: classNames == null ? void 0 : classNames.description
+            }),
+            children: description
+          }
+        ),
+        children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.actions({ className: classNames == null ? void 0 : classNames.actions }), children })
+      ] })
+    }
+  );
+};
+
+// src/components/code/code.tsx
+var import_shared_utils2 = require("@kopexa/shared-utils");
+var import_theme2 = require("@kopexa/theme");
+var import_react = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Code = (originalProps) => {
+  const [props, variantProps] = (0, import_shared_utils2.mapPropsVariants)(
+    originalProps,
+    import_theme2.code.variantKeys
+  );
+  const { children, className, ...otherProps } = props;
+  const styles = (0, import_react.useMemo)(
+    () => (0, import_theme2.code)({
+      ...variantProps,
+      className
+    }),
+    [(0, import_shared_utils2.objectToDeps)(variantProps), className]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { className: styles, ...otherProps, children });
+};
+
+// src/components/dialog/dialog.tsx
+var import_dialog = require("@base-ui/react/dialog");
+var import_icons = require("@kopexa/icons");
+var import_react_utils = require("@kopexa/react-utils");
+var import_shared_utils3 = require("@kopexa/shared-utils");
+var import_theme3 = require("@kopexa/theme");
+var import_use_controllable_state = require("@kopexa/use-controllable-state");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var [DialogProvider, useDialogContext] = (0, import_react_utils.createContext)();
+var DialogRoot = (props) => {
+  const {
+    open: openProp,
+    onOpenChange,
+    size,
+    radius,
+    placement,
+    scrollBehavior,
+    ...restProps
+  } = props;
+  const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
+    value: openProp,
+    onChange: onOpenChange,
+    defaultValue: false
+  });
+  const styles = (0, import_theme3.dialog)({ size, radius, placement, scrollBehavior });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DialogProvider, { value: { styles, open, placement, size, radius }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_dialog.Dialog.Root,
+    {
+      "data-slot": "dialog",
+      open,
+      onOpenChange: (open2) => setOpen(open2),
+      ...restProps
+    }
+  ) });
+};
+function DialogTrigger({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog.Dialog.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({ className, ...props }) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_dialog.Dialog.Backdrop,
+    {
+      "data-slot": "dialog-overlay",
+      className: (0, import_shared_utils3.cn)(styles.overlay(), className),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      import_dialog.Dialog.Popup,
+      {
+        "data-slot": "dialog-content",
+        className: (0, import_shared_utils3.cn)(styles.content(), className),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            import_dialog.Dialog.Close,
+            {
+              "data-slot": "dialog-close",
+              className: styles.close(),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.CloseIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: styles.header({ className }),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: styles.footer({ className }),
+      ...props
+    }
+  );
+}
+function DialogBody({ className, ...props }) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      "data-slot": "dialog-body",
+      className: styles.body({ className }),
+      ...props
+    }
+  );
+}
+function DialogTitle({ className, ...props }) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_dialog.Dialog.Title,
+    {
+      "data-slot": "dialog-title",
+      className: (0, import_shared_utils3.cn)(styles.title(), className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_dialog.Dialog.Description,
+    {
+      "data-slot": "dialog-description",
+      className: (0, import_shared_utils3.cn)(styles.description(), className),
+      ...props
+    }
+  );
+}
+function DialogCloseTrigger({
+  className,
+  ...props
+}) {
+  const { styles } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_dialog.Dialog.Close,
+    {
+      "data-slot": "dialog-close-trigger",
+      className: (0, import_shared_utils3.cn)(styles.closeTrigger(), className),
+      ...props
+    }
+  );
+}
+
+// src/components/dialog/index.ts
+var Dialog = Object.assign(DialogRoot, {
+  Root: DialogRoot,
+  Body: DialogBody,
+  CloseTrigger: DialogCloseTrigger,
+  Content: DialogContent,
+  Description: DialogDescription,
+  Footer: DialogFooter,
+  Header: DialogHeader,
+  Overlay: DialogOverlay,
+  Portal: DialogPortal,
+  Title: DialogTitle,
+  Trigger: DialogTrigger
+});
+
+// src/components/file-upload/avatar-upload.tsx
+var import_button = require("@kopexa/button");
+var import_callout = require("@kopexa/callout");
+var import_i18n4 = require("@kopexa/i18n");
+var import_icons2 = require("@kopexa/icons");
+var import_image_crop = require("@kopexa/image-crop");
+var import_shared_utils5 = require("@kopexa/shared-utils");
+var import_theme4 = require("@kopexa/theme");
+var import_react3 = require("react");
+
+// src/hooks/use-file-upload/index.ts
+var import_i18n2 = require("@kopexa/i18n");
+var import_shared_utils4 = require("@kopexa/shared-utils");
+var import_react2 = require("react");
+
+// src/hooks/use-file-upload/messages.ts
+var import_i18n = require("@kopexa/i18n");
+var messages = (0, import_i18n.defineMessages)({
+  file_exceeds_max: {
+    id: "use_file_upload.file_exceeds_max",
+    defaultMessage: `File "{name}" exceeds the maximum size of {max}.`,
+    description: "Shown when a single file is larger than allowed"
+  },
+  file_not_accepted: {
+    id: "use_file_upload.file_not_accepted",
+    defaultMessage: `File "{name}" is not an accepted file type.`,
+    description: "Shown when file type/extension doesn't match accept"
+  },
+  too_many_files: {
+    id: "file_upload.too_many_files",
+    defaultMessage: "You can only upload a maximum of {max} files.",
+    description: "Shown when maxFiles would be exceeded"
+  }
+});
+
+// src/hooks/use-file-upload/index.ts
+var useFileUpload = (options = {}) => {
+  const {
+    maxFiles = Number.POSITIVE_INFINITY,
+    maxSize = Number.POSITIVE_INFINITY,
+    accept = "*",
+    multiple = false,
+    initialFiles = [],
+    onFilesChange,
+    onFilesAdded,
+    onError
+  } = options;
+  const t = (0, import_i18n2.useSafeIntl)();
+  const [state, setState] = (0, import_react2.useState)({
+    files: initialFiles.map((file) => ({
+      file,
+      id: file.id,
+      preview: file.url
+    })),
+    isDragging: false,
+    errors: []
+  });
+  const inputRef = (0, import_react2.useRef)(null);
+  const validateFile = (0, import_react2.useCallback)(
+    (file) => {
+      if (file instanceof File) {
+        if (file.size > maxSize) {
+          return t.formatMessage(messages.file_exceeds_max, {
+            name: file.name,
+            max: (0, import_shared_utils4.formatBytes)(maxSize)
+          });
+        }
+      } else {
+        if (file.size > maxSize) {
+          return t.formatMessage(messages.file_exceeds_max, {
+            name: file.name,
+            max: (0, import_shared_utils4.formatBytes)(maxSize)
+          });
+        }
+      }
+      if (accept !== "*") {
+        const acceptedTypes = accept.split(",").map((type) => type.trim());
+        const fileType = file instanceof File ? file.type || "" : file.type;
+        const fileExtension = `.${file instanceof File ? file.name.split(".").pop() : file.name.split(".").pop()}`;
+        const isAccepted = acceptedTypes.some((type) => {
+          if (type.startsWith(".")) {
+            return fileExtension.toLowerCase() === type.toLowerCase();
+          }
+          if (type.endsWith("/*")) {
+            const baseType = type.split("/")[0];
+            return fileType.startsWith(`${baseType}/`);
+          }
+          return fileType === type;
+        });
+        if (!isAccepted) {
+          return t.formatMessage(messages.file_not_accepted, {
+            name: file instanceof File ? file.name : file.name
+          });
+        }
+      }
+      return null;
+    },
+    [accept, maxSize, t.formatMessage]
+  );
+  const createPreview = (0, import_react2.useCallback)(
+    (file) => {
+      if (file instanceof File) {
+        return URL.createObjectURL(file);
+      }
+      return file.url;
+    },
+    []
+  );
+  const generateUniqueId = (0, import_react2.useCallback)((file) => {
+    if (file instanceof File) {
+      return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+    }
+    return file.id;
+  }, []);
+  const clearFiles = (0, import_react2.useCallback)(() => {
+    setState((prev) => {
+      for (const file of prev.files) {
+        if (file.preview && file.file instanceof File && file.file.type.startsWith("image/")) {
+          URL.revokeObjectURL(file.preview);
+        }
+      }
+      if (inputRef.current) {
+        inputRef.current.value = "";
+      }
+      const newState = {
+        ...prev,
+        files: [],
+        errors: []
+      };
+      onFilesChange == null ? void 0 : onFilesChange(newState.files);
+      return newState;
+    });
+  }, [onFilesChange]);
+  const addFiles = (0, import_react2.useCallback)(
+    (newFiles) => {
+      if (!newFiles || newFiles.length === 0) return;
+      const newFilesArray = Array.from(newFiles);
+      const errors = [];
+      setState((prev) => ({ ...prev, errors: [] }));
+      if (!multiple) {
+        clearFiles();
+      }
+      if (multiple && maxFiles !== Number.POSITIVE_INFINITY && state.files.length + newFilesArray.length > maxFiles) {
+        errors.push(
+          t.formatMessage(messages.too_many_files, {
+            max: maxFiles
+          })
+        );
+        onError == null ? void 0 : onError(errors);
+        setState((prev) => ({ ...prev, errors }));
+        return;
+      }
+      const validFiles = [];
+      for (const file of newFilesArray) {
+        if (multiple) {
+          const isDuplicate = state.files.some(
+            (existingFile) => existingFile.file.name === file.name && existingFile.file.size === file.size
+          );
+          if (isDuplicate) {
+            return;
+          }
+        }
+        if (file.size > maxSize) {
+          errors.push(
+            multiple ? `Some files exceed the maximum size of ${(0, import_shared_utils4.formatBytes)(maxSize)}.` : `File exceeds the maximum size of ${(0, import_shared_utils4.formatBytes)(maxSize)}.`
+          );
+          continue;
+        }
+        const error = validateFile(file);
+        if (error) {
+          errors.push(error);
+        } else {
+          validFiles.push({
+            file,
+            id: generateUniqueId(file),
+            preview: createPreview(file)
+          });
+        }
+      }
+      if (validFiles.length > 0) {
+        onFilesAdded == null ? void 0 : onFilesAdded(validFiles);
+        setState((prev) => {
+          const newFiles2 = !multiple ? validFiles : [...prev.files, ...validFiles];
+          onFilesChange == null ? void 0 : onFilesChange(newFiles2);
+          return {
+            ...prev,
+            files: newFiles2,
+            errors
+          };
+        });
+      } else if (errors.length > 0) {
+        onError == null ? void 0 : onError(errors);
+        setState((prev) => ({
+          ...prev,
+          errors
+        }));
+      }
+      if (inputRef.current) {
+        inputRef.current.value = "";
+      }
+    },
+    [
+      onError,
+      state.files,
+      maxFiles,
+      multiple,
+      maxSize,
+      validateFile,
+      createPreview,
+      generateUniqueId,
+      clearFiles,
+      onFilesChange,
+      onFilesAdded,
+      t.formatMessage
+    ]
+  );
+  const removeFile = (0, import_react2.useCallback)(
+    (id) => {
+      setState((prev) => {
+        const fileToRemove = prev.files.find((file) => file.id === id);
+        if ((fileToRemove == null ? void 0 : fileToRemove.preview) && fileToRemove.file instanceof File && fileToRemove.file.type.startsWith("image/")) {
+          URL.revokeObjectURL(fileToRemove.preview);
+        }
+        const newFiles = prev.files.filter((file) => file.id !== id);
+        onFilesChange == null ? void 0 : onFilesChange(newFiles);
+        return {
+          ...prev,
+          files: newFiles,
+          errors: []
+        };
+      });
+    },
+    [onFilesChange]
+  );
+  const clearErrors = (0, import_react2.useCallback)(() => {
+    setState((prev) => ({
+      ...prev,
+      errors: []
+    }));
+  }, []);
+  const handleDragEnter = (0, import_react2.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setState((prev) => ({ ...prev, isDragging: true }));
+  }, []);
+  const handleDragLeave = (0, import_react2.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.currentTarget.contains(e.relatedTarget)) {
+      return;
+    }
+    setState((prev) => ({ ...prev, isDragging: false }));
+  }, []);
+  const handleDragOver = (0, import_react2.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  const handleDrop = (0, import_react2.useCallback)(
+    (e) => {
+      var _a;
+      e.preventDefault();
+      e.stopPropagation();
+      setState((prev) => ({ ...prev, isDragging: false }));
+      if ((_a = inputRef.current) == null ? void 0 : _a.disabled) {
+        return;
+      }
+      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+        if (!multiple) {
+          const file = e.dataTransfer.files[0];
+          addFiles([file]);
+        } else {
+          addFiles(e.dataTransfer.files);
+        }
+      }
+    },
+    [addFiles, multiple]
+  );
+  const handleFileChange = (0, import_react2.useCallback)(
+    (e) => {
+      if (e.target.files && e.target.files.length > 0) {
+        addFiles(e.target.files);
+      }
+    },
+    [addFiles]
+  );
+  const openFileDialog = (0, import_react2.useCallback)(() => {
+    if (inputRef.current) {
+      inputRef.current.click();
+    }
+  }, []);
+  const getInputProps = (0, import_react2.useCallback)(
+    (props = {}) => {
+      return {
+        ...props,
+        type: "file",
+        onChange: handleFileChange,
+        accept: props.accept || accept,
+        multiple: props.multiple !== void 0 ? props.multiple : multiple,
+        ref: inputRef
+      };
+    },
+    [accept, multiple, handleFileChange]
+  );
+  return [
+    state,
+    {
+      addFiles,
+      removeFile,
+      clearFiles,
+      clearErrors,
+      handleDragEnter,
+      handleDragLeave,
+      handleDragOver,
+      handleDrop,
+      handleFileChange,
+      openFileDialog,
+      getInputProps
+    }
+  ];
+};
+
+// src/components/file-upload/messages.ts
+var import_i18n3 = require("@kopexa/i18n");
+var messages2 = (0, import_i18n3.defineMessages)({
+  change_avatar: {
+    id: "file_upload.change_avatar",
+    defaultMessage: "Change Avatar",
+    description: "Label for changing the avatar image"
+  },
+  upload_avatar: {
+    id: "file_upload.upload_avatar",
+    defaultMessage: "Upload Avatar",
+    description: "Label for uploading a new avatar image"
+  },
+  remove_avatar: {
+    id: "file_upload.remove_avatar",
+    defaultMessage: "Remove Avatar",
+    description: "Label for removing the current avatar image"
+  },
+  avatar_uploaded: {
+    id: "file_upload.avatar_uploaded",
+    defaultMessage: "Avatar uploaded",
+    description: "Message displayed when the avatar is uploaded successfully"
+  },
+  accepted_file_types: {
+    id: "file_upload.accepted_file_types",
+    defaultMessage: "{types}{size, select, none {} other { up to {size}}}",
+    description: "Message indicating the accepted file types for upload"
+  },
+  cancel: {
+    id: "file_upload.cancel",
+    defaultMessage: "Cancel",
+    description: "Label for canceling the file upload"
+  },
+  apply_crop: {
+    id: "file_upload.apply_crop",
+    defaultMessage: "Apply",
+    description: "Label for applying the crop to the image"
+  }
+});
+
+// src/components/file-upload/utils/data-url-to-file.ts
+async function dataUrlToFile(dataUrl, fileName, typeHint) {
+  const res = await fetch(dataUrl);
+  const blob = await res.blob();
+  const type = typeHint || blob.type || "image/png";
+  const ext = type.includes("jpeg") ? "jpg" : type.split("/")[1] || "png";
+  const safeName = fileName.replace(/\.[^.]+$/, "");
+  return new File([blob], `${safeName}-cropped.${ext}`, { type });
+}
+
+// src/components/file-upload/utils/format-accept-types.ts
+var WILDCARD_GROUPS = {
+  "image/*": "common image formats",
+  "audio/*": "common audio formats",
+  "video/*": "common video formats",
+  "application/*": "common document formats"
+};
+var MIME_TO_LABEL = {
+  "image/png": "PNG",
+  "image/jpeg": "JPG",
+  "image/jpg": "JPG",
+  "application/pdf": "PDF",
+  "text/csv": "CSV",
+  "text/plain": "TXT"
+};
+var EXT_TO_LABEL = {
+  ".png": "PNG",
+  ".jpg": "JPG",
+  ".jpeg": "JPG",
+  ".pdf": "PDF",
+  ".csv": "CSV",
+  ".txt": "TXT"
+};
+function normalizeToken(token) {
+  return token.trim().toLowerCase();
+}
+function formatAcceptedTypes(accept) {
+  var _a, _b;
+  if (!accept || typeof accept !== "string") return "";
+  const tokens = accept.split(",").map(normalizeToken).filter(Boolean);
+  const labels = [];
+  for (const token of tokens) {
+    if (WILDCARD_GROUPS[token]) {
+      labels.push(WILDCARD_GROUPS[token]);
+      continue;
+    }
+    if (token.startsWith(".")) {
+      labels.push(
+        (_a = EXT_TO_LABEL[token]) != null ? _a : token.replace(/^\./, "").toUpperCase()
+      );
+      continue;
+    }
+    if (token.includes("/")) {
+      labels.push((_b = MIME_TO_LABEL[token]) != null ? _b : token.split("/")[1].toUpperCase());
+    }
+  }
+  const seen = /* @__PURE__ */ new Set();
+  return labels.filter((x) => {
+    if (seen.has(x)) return false;
+    seen.add(x);
+    return true;
+  }).join(", ");
+}
+
+// src/components/file-upload/utils/is-image-like.ts
+function isImageLike(file) {
+  var _a, _b;
+  if ((_a = file.type) == null ? void 0 : _a.startsWith("image/")) return true;
+  const name = ((_b = file.name) == null ? void 0 : _b.toLowerCase()) || "";
+  return name.endsWith(".png") || name.endsWith(".jpg") || name.endsWith(".jpeg") || name.endsWith(".webp");
+}
+
+// src/components/file-upload/avatar-upload.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var defaultMaxSize = 2 * 1024 * 1024;
+var AvatarUpload = (props) => {
+  const {
+    maxSize = defaultMaxSize,
+    className,
+    onFileChange,
+    defaultAvatar,
+    orientation,
+    size,
+    shape,
+    accept = ".png,.jpg",
+    cropperEnabled = true,
+    cropAspect = 1,
+    cropMaxImageSize = defaultMaxSize,
+    onCroppedFile,
+    ...rest
+  } = props;
+  const t = (0, import_i18n4.useSafeIntl)();
+  const [cropOpen, setCropOpen] = (0, import_react3.useState)(false);
+  const [cropSourceFile, setCropSourceFile] = (0, import_react3.useState)(null);
+  const pendingOriginalId = (0, import_react3.useRef)(null);
+  const [
+    { files, isDragging, errors },
+    {
+      removeFile,
+      handleDragEnter,
+      handleDragLeave,
+      handleDragOver,
+      handleDrop,
+      openFileDialog,
+      getInputProps,
+      clearErrors,
+      addFiles
+    }
+  ] = useFileUpload({
+    maxFiles: 1,
+    maxSize,
+    accept,
+    multiple: false,
+    onFilesChange: (files2) => {
+      onFileChange == null ? void 0 : onFileChange(files2[0] || null);
+    },
+    onFilesAdded: (added) => {
+      var _a;
+      if (!cropperEnabled) return;
+      const raw = (_a = added[0]) == null ? void 0 : _a.file;
+      if (raw instanceof File && isImageLike(raw)) {
+        pendingOriginalId.current = added[0].id;
+        setCropSourceFile(raw);
+        setCropOpen(true);
+      }
+    }
+  });
+  const currentFile = files[0];
+  const previewUrl = (currentFile == null ? void 0 : currentFile.preview) || defaultAvatar;
+  const handleRemove = () => {
+    if (currentFile) {
+      removeFile(currentFile.id);
+      clearErrors();
+    }
+  };
+  const styles = (0, import_theme4.avatarUpload)({
+    size,
+    shape,
+    orientation
+  });
+  const typesLabel = formatAcceptedTypes(accept);
+  const handleCropCancel = (0, import_react3.useCallback)(() => {
+    setCropOpen(false);
+    setCropSourceFile(null);
+    pendingOriginalId.current = null;
+  }, []);
+  const handleCropApply = (0, import_react3.useCallback)(
+    async (croppedDataUrl) => {
+      if (!croppedDataUrl || !cropSourceFile) {
+        handleCropCancel();
+        return;
+      }
+      const newFile = await dataUrlToFile(
+        croppedDataUrl,
+        cropSourceFile.name,
+        cropSourceFile.type
+      );
+      if (pendingOriginalId.current) {
+        removeFile(pendingOriginalId.current);
+        pendingOriginalId.current = null;
+      }
+      addFiles([newFile]);
+      onCroppedFile == null ? void 0 : onCroppedFile(newFile);
+      setCropOpen(false);
+      setCropSourceFile(null);
+    },
+    [cropSourceFile, addFiles, removeFile, onCroppedFile, handleCropCancel]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        "data-slot": "avatar-upload",
+        className: styles.root({ className }),
+        ...rest,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: styles.previewAndText(), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: styles.previewContainer(), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": previewUrl ? t.formatMessage(messages2.change_avatar) : t.formatMessage(messages2.upload_avatar),
+                  "data-dragging": (0, import_shared_utils5.dataAttr)(isDragging),
+                  "data-hasimage": (0, import_shared_utils5.dataAttr)(!!previewUrl),
+                  className: styles.preview(),
+                  onDragEnter: handleDragEnter,
+                  onDragLeave: handleDragLeave,
+                  onDragOver: handleDragOver,
+                  onDrop: handleDrop,
+                  onClick: openFileDialog,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { ...getInputProps(), className: "sr-only" }),
+                    previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "img",
+                      {
+                        src: previewUrl,
+                        alt: "Avatar",
+                        className: styles.previewImg()
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: styles.placeholderWrapper(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.UserCircleIcon, { className: styles.placeholder() }) })
+                  ]
+                }
+              ),
+              currentFile && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                import_button.IconButton,
+                {
+                  variant: "outline",
+                  color: "default",
+                  onClick: handleRemove,
+                  size: "sm",
+                  className: styles.removeButton(),
+                  "aria-label": t.formatMessage(messages2.remove_avatar),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.CloseIcon, {})
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: styles.instructionsContainer(), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: styles.instructions(), children: currentFile ? t.formatMessage(messages2.avatar_uploaded) : t.formatMessage(messages2.upload_avatar) }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: styles.acceptedFiles(), children: t.formatMessage(messages2.accepted_file_types, {
+                types: typesLabel || "-",
+                size: maxSize ? (0, import_shared_utils5.formatBytes)(maxSize) : "none"
+              }) })
+            ] })
+          ] }),
+          errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_callout.Callout, { variant: "destructive", children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: styles.errorItem(), children: error }, index.toString())) })
+        ]
+      }
+    ),
+    cropperEnabled && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Dialog.Root,
+      {
+        open: cropOpen,
+        onOpenChange: (v) => !v ? handleCropCancel() : null,
+        size: "2xl",
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Dialog.Content, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog.Title, { children: t.formatMessage(messages2.change_avatar) }) }),
+          cropSourceFile && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            import_image_crop.ImageCrop,
+            {
+              aspect: cropAspect,
+              file: cropSourceFile,
+              maxImageSize: cropMaxImageSize,
+              onCrop: handleCropApply,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_image_crop.ImageCropContent, { className: "max-w-md" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Dialog.Footer, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    Dialog.CloseTrigger,
+                    {
+                      render: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                        import_button.Button,
+                        {
+                          variant: "ghost",
+                          color: "default",
+                          startContent: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.CloseIcon, {}),
+                          children: t.formatMessage(messages2.cancel)
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    import_image_crop.ImageCropApply,
+                    {
+                      color: "primary",
+                      variant: "solid",
+                      render: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_button.Button, { startContent: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.CropIcon, {}), children: t.formatMessage(messages2.apply_crop) })
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+};
+
+// src/components/skeleton/skeleton.tsx
+var import_theme5 = require("@kopexa/theme");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Skeleton = (props) => {
+  const { className, children, ...rest } = props;
+  const styles = (0, import_theme5.skeleton)({
+    className
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: styles, ...rest, children });
+};
+
+// src/components/skeleton/skeleton-avatar.tsx
+var import_shared_utils6 = require("@kopexa/shared-utils");
+var import_theme6 = require("@kopexa/theme");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SkeletonAvatar = (props) => {
+  const { size, className, ...restProps } = props;
+  const baseStyle = (0, import_theme6.skeletonAvatar)({ size });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Skeleton, { ...restProps, className: (0, import_shared_utils6.cn)(baseStyle, className) });
+};
+
+// src/components/stat/stat.tsx
+var import_icons3 = require("@kopexa/icons");
+var import_shared_utils7 = require("@kopexa/shared-utils");
+var import_theme7 = require("@kopexa/theme");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function StatRoot({
+  className,
+  size,
+  trend,
+  children,
+  ...props
+}) {
+  const styles = (0, import_theme7.stat)({ size, trend });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("dl", { "data-slot": "stat", className: (0, import_shared_utils7.cn)(styles.root(), className), ...props, children });
+}
+function StatLabel({ className, children, ...props }) {
+  const styles = (0, import_theme7.stat)();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "dt",
+    {
+      "data-slot": "stat-label",
+      className: (0, import_shared_utils7.cn)(styles.label(), className),
+      ...props,
+      children
+    }
+  );
+}
+function StatValueText({
+  className,
+  size,
+  children,
+  ...props
+}) {
+  const styles = (0, import_theme7.stat)({ size });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "dd",
+    {
+      "data-slot": "stat-value",
+      className: (0, import_shared_utils7.cn)(styles.valueText(), className),
+      ...props,
+      children
+    }
+  );
+}
+function StatValueUnit({
+  className,
+  children,
+  ...props
+}) {
+  const styles = (0, import_theme7.stat)();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "span",
+    {
+      "data-slot": "stat-value-unit",
+      className: (0, import_shared_utils7.cn)(styles.valueUnit(), className),
+      ...props,
+      children
+    }
+  );
+}
+function StatHelpText({
+  className,
+  children,
+  ...props
+}) {
+  const styles = (0, import_theme7.stat)();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "span",
+    {
+      "data-slot": "stat-help-text",
+      className: (0, import_shared_utils7.cn)(styles.helpText(), className),
+      ...props,
+      children
+    }
+  );
+}
+function StatUpIndicator({
+  className,
+  icon,
+  children,
+  ...props
+}) {
+  const styles = (0, import_theme7.stat)({ trend: "up" });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "span",
+    {
+      "data-slot": "stat-indicator",
+      "data-type": "up",
+      className: (0, import_shared_utils7.cn)(styles.indicator(), className),
+      ...props,
+      children: [
+        icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons3.ArrowUp, {}),
+        children
+      ]
+    }
+  );
+}
+function StatDownIndicator({
+  className,
+  icon,
+  children,
+  ...props
+}) {
+  const styles = (0, import_theme7.stat)({ trend: "down" });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "span",
+    {
+      "data-slot": "stat-indicator",
+      "data-type": "down",
+      className: (0, import_shared_utils7.cn)(styles.indicator(), className),
+      ...props,
+      children: [
+        icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons3.ArrowDown, {}),
+        children
+      ]
+    }
+  );
+}
+function StatGroup({ className, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      "data-slot": "stat-group",
+      className: (0, import_shared_utils7.cn)("flex flex-wrap justify-around gap-4", className),
+      ...props,
+      children
+    }
+  );
+}
+var Stat = Object.assign(StatRoot, {
+  Root: StatRoot,
+  Label: StatLabel,
+  ValueText: StatValueText,
+  ValueUnit: StatValueUnit,
+  HelpText: StatHelpText,
+  UpIndicator: StatUpIndicator,
+  DownIndicator: StatDownIndicator,
+  Group: StatGroup
+});
+
+// src/components/textarea/textarea.tsx
+var import_theme8 = require("@kopexa/theme");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Textarea = (props) => {
+  const { className, size, ...rest } = props;
+  const styles = (0, import_theme8.textarea)({
+    className,
+    size
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("textarea", { "data-slot": "textarea", className: styles, ...rest });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -189,6 +1251,7 @@ __reExport(index_exports, require("@kopexa/tooltip"), module.exports);
   AuditInfo,
   Autocomplete,
   AvatarUpload,
+  Blankstate,
   Breadcrumb,
   BreadcrumbEllipsis,
   BreadcrumbItem,
@@ -206,6 +1269,7 @@ __reExport(index_exports, require("@kopexa/tooltip"), module.exports);
   CardTitle,
   CardToolbar,
   Chip,
+  Code,
   Combobox,
   ConfirmDialogProvider,
   Conversation,
@@ -214,6 +1278,19 @@ __reExport(index_exports, require("@kopexa/tooltip"), module.exports);
   ConversationScrollButton,
   Cropper,
   DataGrid,
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
   EditableText,
   Filter,
   FilterActive,
@@ -249,6 +1326,8 @@ __reExport(index_exports, require("@kopexa/tooltip"), module.exports);
   ScrollBar,
   SearchFilterBar,
   Select,
+  Skeleton,
+  SkeletonAvatar,
   StandardChip,
   Stat,
   StatDownIndicator,
@@ -272,19 +1351,17 @@ __reExport(index_exports, require("@kopexa/tooltip"), module.exports);
   filterBarMessages,
   filterMessages,
   useConfirm,
+  useDialogContext,
+  useFileUpload,
   useFilterContext,
   ...require("@kopexa/avatar"),
-  ...require("@kopexa/blankstate"),
   ...require("@kopexa/button"),
   ...require("@kopexa/calendar"),
   ...require("@kopexa/callout"),
   ...require("@kopexa/checkbox"),
-  ...require("@kopexa/code"),
   ...require("@kopexa/color-picker"),
   ...require("@kopexa/command"),
-  ...require("@kopexa/data-table"),
   ...require("@kopexa/date-picker"),
-  ...require("@kopexa/dialog"),
   ...require("@kopexa/drawer"),
   ...require("@kopexa/dropdown-menu"),
   ...require("@kopexa/heading"),
@@ -302,7 +1379,6 @@ __reExport(index_exports, require("@kopexa/tooltip"), module.exports);
   ...require("@kopexa/section-row"),
   ...require("@kopexa/separator"),
   ...require("@kopexa/sidebar"),
-  ...require("@kopexa/skeleton"),
   ...require("@kopexa/spinner"),
   ...require("@kopexa/split-page-layout"),
   ...require("@kopexa/tab-nav"),