framepexls-ui-lib 2.0.0 → 2.2.0

package/dist/MediaLibraryLayout.mjs

@@ -0,0 +1,348 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import Button from "./Button.mjs";
+import ChartCard from "./ChartCard.mjs";
+import DataPageLayout from "./DataPageLayout.mjs";
+import Dialog from "./Dialog.mjs";
+import Dropdown from "./Dropdown.mjs";
+import Input from "./Input.mjs";
+import {
+  ArrowUpFromBracketIcon,
+  CheckIcon,
+  CopyIcon,
+  EyeIcon,
+  ImageBrokenIcon,
+  PencilIcon,
+  PlusIcon,
+  TrashIcon
+} from "./iconos/index.mjs";
+function cx(...values) {
+  return values.filter(Boolean).join(" ");
+}
+const defaultLabels = {
+  actions: "Acciones",
+  uploadAction: "Subir archivos",
+  clearSearch: "Limpiar b\xFAsqueda",
+  uploadTitle: "Subir archivos",
+  uploadSubtitle: "Formatos permitidos: JPG, PNG, WEBP, GIF",
+  uploadButton: "Seleccionar",
+  uploadDropTitle: "Arrastra y suelta im\xE1genes aqu\xED o haz clic",
+  uploadDropHelp: "M\xE1ximo recomendado 16MB por archivo",
+  noItemsTitle: "No hay medios",
+  noItemsSubtitle: "Sube im\xE1genes para agregarlas al repositorio.",
+  noSearchResultsSubtitle: "Ajusta la b\xFAsqueda para ver resultados.",
+  previewTitle: "Vista previa",
+  previewAction: "Visualizar",
+  copyAction: "Copiar URL",
+  copiedAction: "Copiado",
+  renameAction: "Renombrar",
+  replaceAction: "Reemplazar",
+  deleteAction: "Eliminar",
+  brokenImage: "Imagen no disponible"
+};
+function MediaLibraryLayout({
+  items,
+  totalItems,
+  tickerItems,
+  query = "",
+  onQueryChange,
+  searchId = "media-library-search",
+  searchPlaceholder = "Buscar por nombre",
+  upload,
+  uploads = [],
+  pagination,
+  error,
+  labels: labelsProp,
+  actionMenuMaxHeight = 420,
+  controlsRight,
+  beforeGallery,
+  afterGallery,
+  extraActions,
+  overlays,
+  tableContainerClassName,
+  gridClassName,
+  getItemId = (item) => item.id,
+  getItemName = (item) => {
+    var _a;
+    return (_a = item.name) != null ? _a : "";
+  },
+  getItemUrl = (item) => item.url,
+  getItemMeta = (item) => item.meta,
+  getItemActive = (item) => {
+    var _a;
+    return (_a = item.active) != null ? _a : true;
+  },
+  onPreview,
+  onCopyUrl,
+  onRename,
+  onReplace,
+  onDelete,
+  ...pageProps
+}) {
+  var _a, _b;
+  const labels = { ...defaultLabels, ...labelsProp };
+  const inputRef = React.useRef(null);
+  const [previewItem, setPreviewItem] = React.useState(null);
+  const [previewImageError, setPreviewImageError] = React.useState(false);
+  const [copiedId, setCopiedId] = React.useState(null);
+  React.useEffect(() => {
+    setPreviewImageError(false);
+  }, [previewItem ? getItemUrl(previewItem) : null]);
+  const openUpload = React.useCallback(() => {
+    var _a2;
+    (_a2 = inputRef.current) == null ? void 0 : _a2.click();
+  }, []);
+  const openPreview = React.useCallback(
+    (item) => {
+      setPreviewItem(item);
+      onPreview == null ? void 0 : onPreview(item);
+    },
+    [onPreview]
+  );
+  const copyUrl = React.useCallback(
+    async (item) => {
+      if (onCopyUrl) {
+        await onCopyUrl(item);
+      } else {
+        const url = getItemUrl(item);
+        if (url) await navigator.clipboard.writeText(url);
+      }
+      const id = getItemId(item);
+      setCopiedId(id);
+      window.setTimeout(() => setCopiedId((current) => current === id ? null : current), 1200);
+    },
+    [getItemId, getItemUrl, onCopyUrl]
+  );
+  const uploader = upload === false ? null : /* @__PURE__ */ jsxs(
+    ChartCard,
+    {
+      title: labels.uploadTitle,
+      subtitle: /* @__PURE__ */ jsx("span", { children: labels.uploadSubtitle }),
+      right: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            unstyled: true,
+            ref: inputRef,
+            type: "file",
+            accept: (_a = upload == null ? void 0 : upload.accept) != null ? _a : "image/png,image/jpeg,image/jpg,image/webp,image/gif",
+            multiple: (_b = upload == null ? void 0 : upload.multiple) != null ? _b : true,
+            className: "hidden",
+            onChange: (event) => {
+              void (upload == null ? void 0 : upload.onFilesSelected(event.target.files));
+              event.currentTarget.value = "";
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { color: upload == null ? void 0 : upload.buttonColor, onClick: openUpload, children: labels.uploadButton })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onDragOver: (event) => {
+              event.preventDefault();
+              event.dataTransfer.dropEffect = "copy";
+            },
+            onDrop: (event) => {
+              event.preventDefault();
+              void (upload == null ? void 0 : upload.onFilesSelected(event.dataTransfer.files));
+            },
+            onClick: openUpload,
+            className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-[color-mix(in_oklab,var(--border)_78%,transparent)] bg-[color-mix(in_oklab,var(--surface)_84%,var(--card))] p-8 text-center transition hover:border-[color-mix(in_oklab,var(--border)_92%,var(--primary))] hover:bg-[color-mix(in_oklab,var(--surface)_78%,var(--card))]",
+            children: [
+              /* @__PURE__ */ jsx(ArrowUpFromBracketIcon, { className: "h-8 w-8 text-[color-mix(in_oklab,var(--muted)_78%,transparent)]" }),
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: labels.uploadDropTitle }),
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--muted)]", children: labels.uploadDropHelp })
+            ]
+          }
+        ),
+        uploads.length > 0 ? /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-2", children: uploads.map((uploadItem) => /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 rounded-xl border border-[color-mix(in_oklab,var(--border)_78%,transparent)] bg-[color-mix(in_oklab,var(--card)_74%,transparent)] p-2", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium", children: uploadItem.name }),
+            /* @__PURE__ */ jsxs("div", { className: "text-xs text-[var(--muted)]", children: [
+              uploadItem.progress,
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-1 h-2 w-full overflow-hidden rounded-full bg-[color-mix(in_oklab,var(--surface)_78%,transparent)]", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-full bg-[color-mix(in_oklab,var(--primary)_68%,transparent)]",
+              style: { width: `${Math.max(0, Math.min(100, uploadItem.progress))}%` }
+            }
+          ) }),
+          uploadItem.status === "error" && uploadItem.error ? /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-[var(--primary)]", children: uploadItem.error }) : null
+        ] }) }, uploadItem.id)) }) : null
+      ]
+    }
+  );
+  const gallery = /* @__PURE__ */ jsxs(Fragment, { children: [
+    beforeGallery,
+    /* @__PURE__ */ jsx("div", { className: cx("grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5", gridClassName), children: items.map((item) => {
+      const id = getItemId(item);
+      const name = getItemName(item);
+      const url = getItemUrl(item);
+      return /* @__PURE__ */ jsx(
+        MediaLibraryCard,
+        {
+          name,
+          url,
+          meta: getItemMeta(item),
+          active: getItemActive(item),
+          copied: copiedId === id,
+          labels,
+          actionMenuMaxHeight,
+          onPreview: () => openPreview(item),
+          onCopy: () => void copyUrl(item),
+          onRename: onRename ? () => onRename(item) : void 0,
+          onReplace: onReplace ? () => onReplace(item) : void 0,
+          onDelete: onDelete ? () => onDelete(item) : void 0
+        },
+        id
+      );
+    }) }),
+    afterGallery
+  ] });
+  const previewName = previewItem ? getItemName(previewItem) : labels.previewTitle;
+  const previewUrl = previewItem ? getItemUrl(previewItem) : null;
+  return /* @__PURE__ */ jsx(
+    DataPageLayout,
+    {
+      ...pageProps,
+      tickerItems,
+      search: onQueryChange ? {
+        id: searchId,
+        value: query,
+        onChange: onQueryChange,
+        placeholder: searchPlaceholder
+      } : void 0,
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        upload !== false ? /* @__PURE__ */ jsxs(Dropdown, { align: "end", children: [
+          /* @__PURE__ */ jsxs(Dropdown.Trigger, { className: "px-3 py-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: labels.actions }),
+            /* @__PURE__ */ jsx(Dropdown.MenuPuntosVerticalIcon, {})
+          ] }),
+          /* @__PURE__ */ jsxs(Dropdown.Content, { children: [
+            /* @__PURE__ */ jsx(Dropdown.Item, { onSelect: openUpload, icon: /* @__PURE__ */ jsx(PlusIcon, { className: "h-4 w-4" }), children: labels.uploadAction }),
+            query.trim() && onQueryChange ? /* @__PURE__ */ jsx(Dropdown.Item, { onSelect: () => onQueryChange(""), children: labels.clearSearch }) : null
+          ] })
+        ] }) : null,
+        extraActions
+      ] }),
+      beforeTable: uploader,
+      controlsRight: controlsRight != null ? controlsRight : /* @__PURE__ */ jsxs("div", { className: "text-xs text-[var(--muted)]", children: [
+        totalItems != null ? totalItems : items.length,
+        " elemento(s)"
+      ] }),
+      table: gallery,
+      tableContainerClassName: cx("px-4 pt-4 pb-28 sm:px-5 sm:pt-5 sm:pb-32", tableContainerClassName),
+      empty: items.length === 0,
+      emptyState: {
+        title: labels.noItemsTitle,
+        subtitle: query.trim() ? labels.noSearchResultsSubtitle : labels.noItemsSubtitle
+      },
+      emptyAction: upload !== false ? /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: openUpload, children: labels.uploadAction }) : null,
+      pagination,
+      error,
+      overlays: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Dialog, { open: Boolean(previewItem), onClose: () => setPreviewItem(null), title: previewName, size: "full", children: [
+          /* @__PURE__ */ jsx(Dialog.Header, { title: previewName, description: previewItem ? getItemMeta(previewItem) : void 0, onClose: () => setPreviewItem(null) }),
+          /* @__PURE__ */ jsx(Dialog.Body, { padded: false, noScroll: true, className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx("div", { className: "flex h-full min-h-[60vh] items-center justify-center bg-[color-mix(in_oklab,var(--surface)_88%,var(--card))] p-4", children: previewUrl && !previewImageError ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: previewUrl,
+              alt: String(previewName),
+              className: "max-h-[calc(100vh-9rem)] max-w-full rounded-2xl object-contain shadow-2xl",
+              onError: () => setPreviewImageError(true)
+            }
+          ) : /* @__PURE__ */ jsx(BrokenImageFallback, { label: labels.brokenImage, size: "lg" }) }) })
+        ] }),
+        overlays
+      ] })
+    }
+  );
+}
+function MediaLibraryCard({
+  name,
+  url,
+  meta,
+  active,
+  copied,
+  labels,
+  actionMenuMaxHeight,
+  onPreview,
+  onCopy,
+  onRename,
+  onReplace,
+  onDelete
+}) {
+  const [imageError, setImageError] = React.useState(false);
+  const showImage = Boolean(url) && !imageError;
+  React.useEffect(() => {
+    setImageError(false);
+  }, [url]);
+  return /* @__PURE__ */ jsxs("div", { className: "group relative overflow-hidden rounded-2xl border border-[color-mix(in_oklab,var(--border)_78%,transparent)] bg-[color-mix(in_oklab,var(--card)_82%,transparent)] shadow-sm ring-1 ring-black/5 backdrop-blur transition hover:border-[color-mix(in_oklab,var(--border)_84%,var(--primary))]", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onPreview,
+        className: "block aspect-square w-full bg-[color-mix(in_oklab,var(--surface)_78%,transparent)] text-left focus:outline-none focus:ring-2 focus:ring-[color-mix(in_oklab,var(--ring)_55%,transparent)]",
+        "aria-label": `${labels.previewAction} ${name}`,
+        children: showImage ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: url != null ? url : void 0,
+            alt: name,
+            className: cx("h-full w-full object-cover", !active && "opacity-60"),
+            onError: () => setImageError(true)
+          }
+        ) : /* @__PURE__ */ jsx(BrokenImageFallback, { label: labels.brokenImage })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 p-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium", children: name }),
+        meta ? /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-[var(--muted)]", children: meta }) : null
+      ] }),
+      /* @__PURE__ */ jsxs(Dropdown, { align: "end", children: [
+        /* @__PURE__ */ jsx(Dropdown.Trigger, { "aria-label": labels.actions, className: "px-2.5 py-2", children: /* @__PURE__ */ jsx(Dropdown.MenuPuntosVerticalIcon, {}) }),
+        /* @__PURE__ */ jsxs(Dropdown.Content, { "aria-label": labels.actions, maxHeight: actionMenuMaxHeight, children: [
+          /* @__PURE__ */ jsx(Dropdown.Item, { onSelect: onPreview, icon: /* @__PURE__ */ jsx(EyeIcon, { className: "h-4 w-4" }), children: labels.previewAction }),
+          /* @__PURE__ */ jsx(Dropdown.Item, { onSelect: onCopy, icon: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4 text-emerald-600" }) : /* @__PURE__ */ jsx(CopyIcon, { className: "h-4 w-4" }), children: copied ? labels.copiedAction : labels.copyAction }),
+          onRename ? /* @__PURE__ */ jsx(Dropdown.Item, { onSelect: onRename, icon: /* @__PURE__ */ jsx(PencilIcon, { className: "h-4 w-4" }), children: labels.renameAction }) : null,
+          onReplace ? /* @__PURE__ */ jsx(Dropdown.Item, { onSelect: onReplace, icon: /* @__PURE__ */ jsx(PlusIcon, { className: "h-4 w-4" }), children: labels.replaceAction }) : null,
+          onDelete ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Dropdown.Separator, {}),
+            /* @__PURE__ */ jsx(Dropdown.Item, { danger: true, onSelect: onDelete, icon: /* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4" }), children: labels.deleteAction })
+          ] }) : null
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function BrokenImageFallback({ label, size = "md" }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex h-full w-full items-center justify-center bg-[color-mix(in_oklab,var(--surface)_84%,var(--card))]",
+      "aria-label": label,
+      role: "img",
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cx(
+            "flex items-center justify-center rounded-2xl border border-[color-mix(in_oklab,var(--border)_86%,transparent)] bg-[var(--card)] text-[color-mix(in_oklab,var(--primary)_54%,var(--muted))] shadow-sm",
+            size === "lg" ? "h-40 w-40" : "h-16 w-16"
+          ),
+          children: /* @__PURE__ */ jsx(ImageBrokenIcon, { className: size === "lg" ? "h-14 w-14" : "h-8 w-8" })
+        }
+      )
+    }
+  );
+}
+export {
+  MediaLibraryLayout as default
+};

package/dist/MediaSelector.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
 
 type MediaSelectorItem = {
     id: number | string;
@@ -43,6 +43,6 @@ declare function MediaSelector({ value, onChange, medios, accept, autoOpen, dial
     autoOpen?: boolean;
     dialogOnly?: boolean;
     onClose?: () => void;
-}): react_jsx_runtime.JSX.Element;
+}): React__default.JSX.Element;
 
 export { type MediaSelectorItem, type MediosAdapter, MediaSelector as default };

package/dist/MediaSelector.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
 
 type MediaSelectorItem = {
     id: number | string;
@@ -43,6 +43,6 @@ declare function MediaSelector({ value, onChange, medios, accept, autoOpen, dial
     autoOpen?: boolean;
     dialogOnly?: boolean;
     onClose?: () => void;
-}): react_jsx_runtime.JSX.Element;
+}): React__default.JSX.Element;
 
 export { type MediaSelectorItem, type MediosAdapter, MediaSelector as default };

package/dist/MediaTile.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 
 type MediaTileProps = {
     imageUrl?: string | null;
@@ -14,6 +14,6 @@ type MediaTileProps = {
     menuSize?: "sm" | "md" | "lg";
     className?: string;
 };
-declare function MediaTile({ imageUrl, title, subtitle, copyUrl, onPreview, onRename, onReplace, onDelete, isPrivateImage, loading, menuSize, className, }: MediaTileProps): react_jsx_runtime.JSX.Element;
+declare function MediaTile({ imageUrl, title, subtitle, copyUrl, onPreview, onRename, onReplace, onDelete, isPrivateImage, loading, menuSize, className, }: MediaTileProps): React.JSX.Element;
 
 export { type MediaTileProps, MediaTile as default };

package/dist/MediaTile.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 
 type MediaTileProps = {
     imageUrl?: string | null;
@@ -14,6 +14,6 @@ type MediaTileProps = {
     menuSize?: "sm" | "md" | "lg";
     className?: string;
 };
-declare function MediaTile({ imageUrl, title, subtitle, copyUrl, onPreview, onRename, onReplace, onDelete, isPrivateImage, loading, menuSize, className, }: MediaTileProps): react_jsx_runtime.JSX.Element;
+declare function MediaTile({ imageUrl, title, subtitle, copyUrl, onPreview, onRename, onReplace, onDelete, isPrivateImage, loading, menuSize, className, }: MediaTileProps): React.JSX.Element;
 
 export { type MediaTileProps, MediaTile as default };

package/dist/Money.d.mts

@@ -1,10 +1,10 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 
 type MoneyColor = "accent" | "success" | "warning" | "danger" | "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 declare function Money({ amount, currency, color }: {
     amount: number;
     currency?: string;
     color?: MoneyColor;
-}): react_jsx_runtime.JSX.Element;
+}): React.JSX.Element;
 
 export { Money as default };

package/dist/Money.d.ts

@@ -1,10 +1,10 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 
 type MoneyColor = "accent" | "success" | "warning" | "danger" | "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 declare function Money({ amount, currency, color }: {
     amount: number;
     currency?: string;
     color?: MoneyColor;
-}): react_jsx_runtime.JSX.Element;
+}): React.JSX.Element;
 
 export { Money as default };

package/dist/MotionProvider.d.mts

@@ -1,10 +1,9 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 
 declare function MotionProvider({ children, reducedMotion, features }: {
     children: React__default.ReactNode;
     reducedMotion?: "user" | "always" | "never";
     features?: "animation" | "max";
-}): react_jsx_runtime.JSX.Element;
+}): React__default.JSX.Element;
 
 export { MotionProvider as default };

package/dist/MotionProvider.d.ts

@@ -1,10 +1,9 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 
 declare function MotionProvider({ children, reducedMotion, features }: {
     children: React__default.ReactNode;
     reducedMotion?: "user" | "always" | "never";
     features?: "animation" | "max";
-}): react_jsx_runtime.JSX.Element;
+}): React__default.JSX.Element;
 
 export { MotionProvider as default };

package/dist/MultiComboSelect.d.mts

@@ -1,6 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
 import { ComboOption } from './ComboSelect.mjs';
-import 'react';
 
 type MultiComboOption = ComboOption & {
     color?: string | null;
@@ -18,6 +17,6 @@ type MultiComboSelectProps = {
     enableDialog?: boolean;
     dialogTitle?: string;
 };
-declare function MultiComboSelect({ options, value, onChange, placeholder, disabled, loading, className, noResultsText, maxVisibleTags, enableDialog, dialogTitle, }: MultiComboSelectProps): react_jsx_runtime.JSX.Element;
+declare function MultiComboSelect({ options, value, onChange, placeholder, disabled, loading, className, noResultsText, maxVisibleTags, enableDialog, dialogTitle, }: MultiComboSelectProps): React__default.JSX.Element;
 
 export { type MultiComboOption, type MultiComboSelectProps, MultiComboSelect as default };

package/dist/MultiComboSelect.d.ts

@@ -1,6 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
 import { ComboOption } from './ComboSelect.js';
-import 'react';
 
 type MultiComboOption = ComboOption & {
     color?: string | null;
@@ -18,6 +17,6 @@ type MultiComboSelectProps = {
     enableDialog?: boolean;
     dialogTitle?: string;
 };
-declare function MultiComboSelect({ options, value, onChange, placeholder, disabled, loading, className, noResultsText, maxVisibleTags, enableDialog, dialogTitle, }: MultiComboSelectProps): react_jsx_runtime.JSX.Element;
+declare function MultiComboSelect({ options, value, onChange, placeholder, disabled, loading, className, noResultsText, maxVisibleTags, enableDialog, dialogTitle, }: MultiComboSelectProps): React__default.JSX.Element;
 
 export { type MultiComboOption, type MultiComboSelectProps, MultiComboSelect as default };

package/dist/NotificationsCenter.d.mts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 
 type NotificationTone = "neutral" | "info" | "success" | "warning" | "danger";
@@ -48,6 +47,6 @@ type NotificationsCenterProps = {
     headerRight?: React__default.ReactNode;
     labels?: NotificationsCenterLabels;
 };
-declare function NotificationsCenter({ items, onItemsChange, onOpenNotification, open: openProp, onOpenChange, unreadCount: unreadCountProp, className, triggerClassName, drawerWidthClass, headerRight, labels, }: NotificationsCenterProps): react_jsx_runtime.JSX.Element;
+declare function NotificationsCenter({ items, onItemsChange, onOpenNotification, open: openProp, onOpenChange, unreadCount: unreadCountProp, className, triggerClassName, drawerWidthClass, headerRight, labels, }: NotificationsCenterProps): React__default.JSX.Element;
 
 export { type NotificationActor, type NotificationItem, type NotificationTone, type NotificationsCenterLabels, type NotificationsCenterProps, NotificationsCenter as default };

package/dist/NotificationsCenter.d.ts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 
 type NotificationTone = "neutral" | "info" | "success" | "warning" | "danger";
@@ -48,6 +47,6 @@ type NotificationsCenterProps = {
     headerRight?: React__default.ReactNode;
     labels?: NotificationsCenterLabels;
 };
-declare function NotificationsCenter({ items, onItemsChange, onOpenNotification, open: openProp, onOpenChange, unreadCount: unreadCountProp, className, triggerClassName, drawerWidthClass, headerRight, labels, }: NotificationsCenterProps): react_jsx_runtime.JSX.Element;
+declare function NotificationsCenter({ items, onItemsChange, onOpenNotification, open: openProp, onOpenChange, unreadCount: unreadCountProp, className, triggerClassName, drawerWidthClass, headerRight, labels, }: NotificationsCenterProps): React__default.JSX.Element;
 
 export { type NotificationActor, type NotificationItem, type NotificationTone, type NotificationsCenterLabels, type NotificationsCenterProps, NotificationsCenter as default };

package/dist/Numeric.d.mts

@@ -0,0 +1,24 @@
+import React__default from 'react';
+
+type NumericVariant = "number" | "currency" | "percent";
+type NumericFormatOptions = {
+    variant?: NumericVariant;
+    currency?: string;
+    locale?: string;
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+    useGrouping?: boolean;
+    fallback?: string;
+    prefix?: string;
+    suffix?: string;
+};
+type NumericProps = NumericFormatOptions & {
+    value: number | null | undefined;
+    className?: string;
+};
+declare function formatNumericValue(value: number | null | undefined, { variant, currency, locale, minimumFractionDigits, maximumFractionDigits, useGrouping, fallback, prefix, suffix, }?: NumericFormatOptions): string;
+declare function formatCurrencyValue(value: number | null | undefined, options?: Omit<NumericFormatOptions, "variant">): string;
+declare function formatPercentValue(value: number | null | undefined, options?: Omit<NumericFormatOptions, "variant" | "suffix">): string;
+declare function Numeric({ value, className, fallback, ...options }: NumericProps): React__default.JSX.Element;
+
+export { type NumericFormatOptions, type NumericProps, type NumericVariant, Numeric as default, formatCurrencyValue, formatNumericValue, formatPercentValue };

package/dist/Numeric.d.ts

@@ -0,0 +1,24 @@
+import React__default from 'react';
+
+type NumericVariant = "number" | "currency" | "percent";
+type NumericFormatOptions = {
+    variant?: NumericVariant;
+    currency?: string;
+    locale?: string;
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+    useGrouping?: boolean;
+    fallback?: string;
+    prefix?: string;
+    suffix?: string;
+};
+type NumericProps = NumericFormatOptions & {
+    value: number | null | undefined;
+    className?: string;
+};
+declare function formatNumericValue(value: number | null | undefined, { variant, currency, locale, minimumFractionDigits, maximumFractionDigits, useGrouping, fallback, prefix, suffix, }?: NumericFormatOptions): string;
+declare function formatCurrencyValue(value: number | null | undefined, options?: Omit<NumericFormatOptions, "variant">): string;
+declare function formatPercentValue(value: number | null | undefined, options?: Omit<NumericFormatOptions, "variant" | "suffix">): string;
+declare function Numeric({ value, className, fallback, ...options }: NumericProps): React__default.JSX.Element;
+
+export { type NumericFormatOptions, type NumericProps, type NumericVariant, Numeric as default, formatCurrencyValue, formatNumericValue, formatPercentValue };