framepexls-ui-lib 0.1.20 → 0.1.22

package/dist/ComboSelect.js

@@ -100,6 +100,9 @@ function ComboSelect({
     document.addEventListener("focusin", onFocusIn);
     return () => document.removeEventListener("focusin", onFocusIn);
   }, [open]);
+  import_react.default.useEffect(() => {
+    if (disabled && open) setOpen(false);
+  }, [disabled, open]);
   const isOutside = import_react.default.useCallback((e) => {
     var _a2;
     const path = (_a2 = e.composedPath) == null ? void 0 : _a2.call(e);
@@ -421,12 +424,16 @@ function ComboSelect({
               unstyled: true,
               type: "button",
               title: open ? "Cerrar" : "Abrir",
-              className: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5",
+              disabled,
+              className: cx(
+                disabled ? "pointer-events-none opacity-60" : "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5"
+              ),
               onMouseDown: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
               },
               onClick: () => {
+                if (disabled) return;
                 setOpen((o) => !o);
                 if (!open) requestAnimationFrame(() => {
                   var _a2;

package/dist/ComboSelect.mjs

@@ -67,6 +67,9 @@ function ComboSelect({
     document.addEventListener("focusin", onFocusIn);
     return () => document.removeEventListener("focusin", onFocusIn);
   }, [open]);
+  React.useEffect(() => {
+    if (disabled && open) setOpen(false);
+  }, [disabled, open]);
   const isOutside = React.useCallback((e) => {
     var _a2;
     const path = (_a2 = e.composedPath) == null ? void 0 : _a2.call(e);
@@ -388,12 +391,16 @@ function ComboSelect({
               unstyled: true,
               type: "button",
               title: open ? "Cerrar" : "Abrir",
-              className: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5",
+              disabled,
+              className: cx(
+                disabled ? "pointer-events-none opacity-60" : "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5"
+              ),
               onMouseDown: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
               },
               onClick: () => {
+                if (disabled) return;
                 setOpen((o) => !o);
                 if (!open) requestAnimationFrame(() => {
                   var _a2;

package/dist/StorageUsage.d.mts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type StorageUsageProps = {
+    capacityBytes: number;
+    usedBytes: number;
+    percentUsed?: number;
+    title?: React__default.ReactNode;
+    showBadge?: boolean;
+    showGrid?: boolean;
+    className?: string;
+    barClassName?: string;
+    formatBytes?: (n: number) => string;
+    labels?: {
+        capacity?: React__default.ReactNode;
+        used?: React__default.ReactNode;
+        free?: React__default.ReactNode;
+    };
+};
+declare function StorageUsage({ capacityBytes, usedBytes, percentUsed, title, showBadge, showGrid, className, barClassName, formatBytes, labels, }: StorageUsageProps): react_jsx_runtime.JSX.Element;
+
+export { type StorageUsageProps, StorageUsage as default };

package/dist/StorageUsage.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type StorageUsageProps = {
+    capacityBytes: number;
+    usedBytes: number;
+    percentUsed?: number;
+    title?: React__default.ReactNode;
+    showBadge?: boolean;
+    showGrid?: boolean;
+    className?: string;
+    barClassName?: string;
+    formatBytes?: (n: number) => string;
+    labels?: {
+        capacity?: React__default.ReactNode;
+        used?: React__default.ReactNode;
+        free?: React__default.ReactNode;
+    };
+};
+declare function StorageUsage({ capacityBytes, usedBytes, percentUsed, title, showBadge, showGrid, className, barClassName, formatBytes, labels, }: StorageUsageProps): react_jsx_runtime.JSX.Element;
+
+export { type StorageUsageProps, StorageUsage as default };

package/dist/StorageUsage.js

@@ -0,0 +1,100 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var StorageUsage_exports = {};
+__export(StorageUsage_exports, {
+  default: () => StorageUsage
+});
+module.exports = __toCommonJS(StorageUsage_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_Badge = __toESM(require("./Badge"));
+var import_InfoGrid = __toESM(require("./InfoGrid"));
+function cx(...a) {
+  return a.filter(Boolean).join(" ");
+}
+function defaultFormatBytes(n) {
+  if (!n) return "0 B";
+  const k = 1024;
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(n) / Math.log(k));
+  const val = n / Math.pow(k, i);
+  return `${val.toFixed(val >= 10 || i === 0 ? 0 : 1)} ${units[i]}`;
+}
+function StorageUsage({
+  capacityBytes,
+  usedBytes,
+  percentUsed,
+  title = "Espacio de almacenamiento",
+  showBadge = true,
+  showGrid = true,
+  className,
+  barClassName,
+  formatBytes = defaultFormatBytes,
+  labels
+}) {
+  var _a, _b, _c;
+  const cap = Math.max(0, Number(capacityBytes) || 0);
+  const used = Math.max(0, Math.min(cap || Number.POSITIVE_INFINITY, Number(usedBytes) || 0));
+  const pct = Math.max(0, Math.min(100, Math.round(
+    percentUsed != null ? Number(percentUsed) : cap ? used / cap * 100 : 0
+  )));
+  const free = Math.max(0, cap - used);
+  const pctTone = pct > 90 ? "rose" : pct > 75 ? "amber" : "emerald";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, children: [
+    (title || showBadge) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-slate-700 dark:text-slate-200", children: title }),
+      showBadge && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Badge.default, { tone: pctTone, children: [
+        pct,
+        "% usado"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-2 h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: cx(
+          "h-full bg-gradient-to-r from-sky-500/70 to-sky-500/20",
+          barClassName
+        ),
+        style: { width: `${pct}%` }
+      }
+    ) }),
+    showGrid && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_InfoGrid.default,
+      {
+        className: "mt-3",
+        smCols: 3,
+        items: [
+          { name: (_a = labels == null ? void 0 : labels.capacity) != null ? _a : "Capacidad", description: formatBytes(cap) },
+          { name: (_b = labels == null ? void 0 : labels.used) != null ? _b : "Usado", description: `${formatBytes(used)} (${pct}%)` },
+          { name: (_c = labels == null ? void 0 : labels.free) != null ? _c : "Disponible", description: formatBytes(free) }
+        ]
+      }
+    )
+  ] });
+}

package/dist/StorageUsage.mjs

@@ -0,0 +1,70 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Badge from "./Badge";
+import InfoGrid from "./InfoGrid";
+function cx(...a) {
+  return a.filter(Boolean).join(" ");
+}
+function defaultFormatBytes(n) {
+  if (!n) return "0 B";
+  const k = 1024;
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(n) / Math.log(k));
+  const val = n / Math.pow(k, i);
+  return `${val.toFixed(val >= 10 || i === 0 ? 0 : 1)} ${units[i]}`;
+}
+function StorageUsage({
+  capacityBytes,
+  usedBytes,
+  percentUsed,
+  title = "Espacio de almacenamiento",
+  showBadge = true,
+  showGrid = true,
+  className,
+  barClassName,
+  formatBytes = defaultFormatBytes,
+  labels
+}) {
+  var _a, _b, _c;
+  const cap = Math.max(0, Number(capacityBytes) || 0);
+  const used = Math.max(0, Math.min(cap || Number.POSITIVE_INFINITY, Number(usedBytes) || 0));
+  const pct = Math.max(0, Math.min(100, Math.round(
+    percentUsed != null ? Number(percentUsed) : cap ? used / cap * 100 : 0
+  )));
+  const free = Math.max(0, cap - used);
+  const pctTone = pct > 90 ? "rose" : pct > 75 ? "amber" : "emerald";
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    (title || showBadge) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      title && /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-slate-700 dark:text-slate-200", children: title }),
+      showBadge && /* @__PURE__ */ jsxs(Badge, { tone: pctTone, children: [
+        pct,
+        "% usado"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-2 h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(
+          "h-full bg-gradient-to-r from-sky-500/70 to-sky-500/20",
+          barClassName
+        ),
+        style: { width: `${pct}%` }
+      }
+    ) }),
+    showGrid && /* @__PURE__ */ jsx(
+      InfoGrid,
+      {
+        className: "mt-3",
+        smCols: 3,
+        items: [
+          { name: (_a = labels == null ? void 0 : labels.capacity) != null ? _a : "Capacidad", description: formatBytes(cap) },
+          { name: (_b = labels == null ? void 0 : labels.used) != null ? _b : "Usado", description: `${formatBytes(used)} (${pct}%)` },
+          { name: (_c = labels == null ? void 0 : labels.free) != null ? _c : "Disponible", description: formatBytes(free) }
+        ]
+      }
+    )
+  ] });
+}
+export {
+  StorageUsage as default
+};

package/dist/Textarea.d.mts

@@ -0,0 +1,14 @@
+import React__default from 'react';
+
+type TextareaProps = Omit<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & {
+    error?: boolean;
+    tone?: "default" | "danger";
+    unstyled?: boolean;
+};
+declare const Textarea: React__default.ForwardRefExoticComponent<Omit<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & {
+    error?: boolean;
+    tone?: "default" | "danger";
+    unstyled?: boolean;
+} & React__default.RefAttributes<HTMLTextAreaElement>>;
+
+export { type TextareaProps, Textarea as default };

package/dist/Textarea.d.ts

@@ -0,0 +1,14 @@
+import React__default from 'react';
+
+type TextareaProps = Omit<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & {
+    error?: boolean;
+    tone?: "default" | "danger";
+    unstyled?: boolean;
+};
+declare const Textarea: React__default.ForwardRefExoticComponent<Omit<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & {
+    error?: boolean;
+    tone?: "default" | "danger";
+    unstyled?: boolean;
+} & React__default.RefAttributes<HTMLTextAreaElement>>;
+
+export { type TextareaProps, Textarea as default };

package/dist/Textarea.js

@@ -0,0 +1,78 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Textarea_exports = {};
+__export(Textarea_exports, {
+  default: () => Textarea_default
+});
+module.exports = __toCommonJS(Textarea_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+function cx(...a) {
+  return a.filter(Boolean).join(" ");
+}
+const baseControl = "w-full rounded-2xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-900 placeholder:text-slate-400 shadow-sm outline-none transition focus:ring-4 focus:ring-slate-900/5 focus:border-slate-300 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10 dark:bg-white/10 dark:text-slate-100 dark:placeholder:text-slate-400 dark:focus:ring-white/10";
+const errorControl = "border-blue-300 focus:border-blue-300 focus:ring-blue-500/15";
+const Textarea = import_react.default.forwardRef(
+  ({ className, error, tone = "default", value, onChange, unstyled, rows = 3, ...props }, ref) => {
+    if (unstyled) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "textarea",
+        {
+          ref,
+          value,
+          onChange,
+          className,
+          rows,
+          ...props
+        }
+      );
+    }
+    const readOnly = !onChange;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "textarea",
+      {
+        ref,
+        value,
+        onChange,
+        readOnly,
+        "aria-invalid": error ? true : void 0,
+        className: cx(
+          baseControl,
+          (error || tone === "danger") && errorControl,
+          className
+        ),
+        rows,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+var Textarea_default = Textarea;

package/dist/Textarea.mjs

@@ -0,0 +1,48 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+function cx(...a) {
+  return a.filter(Boolean).join(" ");
+}
+const baseControl = "w-full rounded-2xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm text-slate-900 placeholder:text-slate-400 shadow-sm outline-none transition focus:ring-4 focus:ring-slate-900/5 focus:border-slate-300 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10 dark:bg-white/10 dark:text-slate-100 dark:placeholder:text-slate-400 dark:focus:ring-white/10";
+const errorControl = "border-blue-300 focus:border-blue-300 focus:ring-blue-500/15";
+const Textarea = React.forwardRef(
+  ({ className, error, tone = "default", value, onChange, unstyled, rows = 3, ...props }, ref) => {
+    if (unstyled) {
+      return /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref,
+          value,
+          onChange,
+          className,
+          rows,
+          ...props
+        }
+      );
+    }
+    const readOnly = !onChange;
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        value,
+        onChange,
+        readOnly,
+        "aria-invalid": error ? true : void 0,
+        className: cx(
+          baseControl,
+          (error || tone === "danger") && errorControl,
+          className
+        ),
+        rows,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+var Textarea_default = Textarea;
+export {
+  Textarea_default as default
+};

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 export { default as Button } from './Button.mjs';
 export { default as ActionIconButton } from './ActionIconButton.mjs';
 export { default as Input, InputProps } from './Input.mjs';
+export { default as Textarea, TextareaProps } from './Textarea.mjs';
 export { default as CheckboxPillsGroup, CheckboxPillsGroupProps, PillsOption } from './CheckboxPillsGroup.mjs';
 export { FilterGroup, default as FiltersMultiSelect, FiltersMultiSelectProps } from './FiltersMultiSelect.mjs';
 export { default as Select } from './Select.mjs';
@@ -36,6 +37,7 @@ export { default as Drawer } from './Drawer.mjs';
 export { default as Tooltip } from './Tooltip.mjs';
 export { default as Link } from './Link.mjs';
 export { ToastProvider, useToast } from './Toast.mjs';
+export { default as StorageUsage, StorageUsageProps } from './StorageUsage.mjs';
 export { default as CalendarPanel, CalendarPanelProps } from './CalendarPanel.mjs';
 export { MonthPopover, default as TimePopover, WeekPopover } from './TimePopover.mjs';
 export { default as TimePanel } from './TimePanel.mjs';

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Button } from './Button.js';
 export { default as ActionIconButton } from './ActionIconButton.js';
 export { default as Input, InputProps } from './Input.js';
+export { default as Textarea, TextareaProps } from './Textarea.js';
 export { default as CheckboxPillsGroup, CheckboxPillsGroupProps, PillsOption } from './CheckboxPillsGroup.js';
 export { FilterGroup, default as FiltersMultiSelect, FiltersMultiSelectProps } from './FiltersMultiSelect.js';
 export { default as Select } from './Select.js';
@@ -36,6 +37,7 @@ export { default as Drawer } from './Drawer.js';
 export { default as Tooltip } from './Tooltip.js';
 export { default as Link } from './Link.js';
 export { ToastProvider, useToast } from './Toast.js';
+export { default as StorageUsage, StorageUsageProps } from './StorageUsage.js';
 export { default as CalendarPanel, CalendarPanelProps } from './CalendarPanel.js';
 export { MonthPopover, default as TimePopover, WeekPopover } from './TimePopover.js';
 export { default as TimePanel } from './TimePanel.js';

package/dist/index.js

@@ -68,7 +68,9 @@ __export(index_exports, {
   StatCard: () => import_StatCard.default,
   Steps: () => import_Steps.default,
   StepsNav: () => import_Steps2.StepsNav,
+  StorageUsage: () => import_StorageUsage.default,
   Td: () => import_Table.Td,
+  Textarea: () => import_Textarea.default,
   Th: () => import_Table.Th,
   TimeAgo: () => import_TimeAgo.default,
   TimePanel: () => import_TimePanel.default,
@@ -84,6 +86,7 @@ module.exports = __toCommonJS(index_exports);
 var import_Button = __toESM(require("./Button"));
 var import_ActionIconButton = __toESM(require("./ActionIconButton"));
 var import_Input = __toESM(require("./Input"));
+var import_Textarea = __toESM(require("./Textarea"));
 var import_CheckboxPillsGroup = __toESM(require("./CheckboxPillsGroup"));
 var import_FiltersMultiSelect = __toESM(require("./FiltersMultiSelect"));
 var import_Select = __toESM(require("./Select"));
@@ -122,6 +125,7 @@ var import_Drawer = __toESM(require("./Drawer"));
 var import_Tooltip = __toESM(require("./Tooltip"));
 var import_Link = __toESM(require("./Link"));
 var import_Toast = require("./Toast");
+var import_StorageUsage = __toESM(require("./StorageUsage"));
 var import_CalendarPanel = __toESM(require("./CalendarPanel"));
 var import_TimePopover = __toESM(require("./TimePopover"));
 var import_TimePopover2 = require("./TimePopover");
@@ -171,7 +175,9 @@ __reExport(index_exports, require("./iconos"), module.exports);
   StatCard,
   Steps,
   StepsNav,
+  StorageUsage,
   Td,
+  Textarea,
   Th,
   TimeAgo,
   TimePanel,

package/dist/index.mjs

@@ -1,101 +1,105 @@
 import { default as default2 } from "./Button";
 import { default as default3 } from "./ActionIconButton";
 import { default as default4 } from "./Input";
-import { default as default5 } from "./CheckboxPillsGroup";
-import { default as default6 } from "./FiltersMultiSelect";
-import { default as default7 } from "./Select";
-import { default as default8 } from "./ComboSelect";
-import { default as default9 } from "./ColumnSelector";
-import { default as default10 } from "./DateTimeField";
-import { default as default11 } from "./Dialog";
+import { default as default5 } from "./Textarea";
+import { default as default6 } from "./CheckboxPillsGroup";
+import { default as default7 } from "./FiltersMultiSelect";
+import { default as default8 } from "./Select";
+import { default as default9 } from "./ComboSelect";
+import { default as default10 } from "./ColumnSelector";
+import { default as default11 } from "./DateTimeField";
+import { default as default12 } from "./Dialog";
 export * from "./Dialog";
-import { default as default12 } from "./Dropdown";
+import { default as default13 } from "./Dropdown";
 export * from "./Dropdown";
 import { Th, SortTh, Td } from "./Table";
-import { default as default13 } from "./Pagination";
-import { default as default14 } from "./InfoGrid";
-import { default as default15 } from "./ChartCard";
-import { default as default16 } from "./UploadCard";
-import { default as default17 } from "./MediaCard";
-import { default as default18 } from "./MediaSelector";
-import { default as default19 } from "./StatCard";
-import { default as default20 } from "./Badge";
-import { default as default21 } from "./BadgeCluster";
-import { default as default22 } from "./Breadcrumb";
-import { default as default23 } from "./EmptyState";
-import { default as default24 } from "./Money";
-import { default as default25 } from "./TimeAgo";
-import { default as default26 } from "./AvatarSquare";
-import { default as default27 } from "./AvatarGroup";
-import { default as default28 } from "./AppTopbar";
-import { default as default29 } from "./OrderButton";
-import { default as default30 } from "./SearchInput";
-import { default as default31 } from "./ReviewHistory";
+import { default as default14 } from "./Pagination";
+import { default as default15 } from "./InfoGrid";
+import { default as default16 } from "./ChartCard";
+import { default as default17 } from "./UploadCard";
+import { default as default18 } from "./MediaCard";
+import { default as default19 } from "./MediaSelector";
+import { default as default20 } from "./StatCard";
+import { default as default21 } from "./Badge";
+import { default as default22 } from "./BadgeCluster";
+import { default as default23 } from "./Breadcrumb";
+import { default as default24 } from "./EmptyState";
+import { default as default25 } from "./Money";
+import { default as default26 } from "./TimeAgo";
+import { default as default27 } from "./AvatarSquare";
+import { default as default28 } from "./AvatarGroup";
+import { default as default29 } from "./AppTopbar";
+import { default as default30 } from "./OrderButton";
+import { default as default31 } from "./SearchInput";
+import { default as default32 } from "./ReviewHistory";
 import { ReviewHistoryDialog } from "./ReviewHistory";
-import { default as default32 } from "./MultiComboSelect";
-import { default as default33 } from "./Sidebar";
-import { default as default34 } from "./Card";
-import { default as default35 } from "./Drawer";
-import { default as default36 } from "./Tooltip";
-import { default as default37 } from "./Link";
+import { default as default33 } from "./MultiComboSelect";
+import { default as default34 } from "./Sidebar";
+import { default as default35 } from "./Card";
+import { default as default36 } from "./Drawer";
+import { default as default37 } from "./Tooltip";
+import { default as default38 } from "./Link";
 import { ToastProvider, useToast } from "./Toast";
-import { default as default38 } from "./CalendarPanel";
-import { default as default39 } from "./TimePopover";
+import { default as default39 } from "./StorageUsage";
+import { default as default40 } from "./CalendarPanel";
+import { default as default41 } from "./TimePopover";
 import { WeekPopover, MonthPopover } from "./TimePopover";
-import { default as default40 } from "./TimePanel";
-import { default as default41 } from "./TimeRangeField";
-import { default as default42 } from "./Steps";
+import { default as default42 } from "./TimePanel";
+import { default as default43 } from "./TimeRangeField";
+import { default as default44 } from "./Steps";
 import { StepsNav } from "./Steps";
 export * from "./iconos";
 export {
   default3 as ActionIconButton,
-  default28 as AppTopbar,
-  default27 as AvatarGroup,
-  default26 as AvatarSquare,
-  default20 as Badge,
-  default21 as BadgeCluster,
-  default22 as Breadcrumb,
+  default29 as AppTopbar,
+  default28 as AvatarGroup,
+  default27 as AvatarSquare,
+  default21 as Badge,
+  default22 as BadgeCluster,
+  default23 as Breadcrumb,
   default2 as Button,
-  default38 as CalendarPanel,
-  default34 as Card,
-  default15 as ChartCard,
-  default5 as CheckboxPillsGroup,
-  default9 as ColumnSelector,
-  default8 as ComboSelect,
-  default10 as DateTimeField,
-  default11 as Dialog,
-  default35 as Drawer,
-  default12 as Dropdown,
-  default23 as EmptyState,
-  default6 as FiltersMultiSelect,
-  default14 as InfoGrid,
+  default40 as CalendarPanel,
+  default35 as Card,
+  default16 as ChartCard,
+  default6 as CheckboxPillsGroup,
+  default10 as ColumnSelector,
+  default9 as ComboSelect,
+  default11 as DateTimeField,
+  default12 as Dialog,
+  default36 as Drawer,
+  default13 as Dropdown,
+  default24 as EmptyState,
+  default7 as FiltersMultiSelect,
+  default15 as InfoGrid,
   default4 as Input,
-  default37 as Link,
-  default17 as MediaCard,
-  default18 as MediaSelector,
-  default24 as Money,
+  default38 as Link,
+  default18 as MediaCard,
+  default19 as MediaSelector,
+  default25 as Money,
   MonthPopover,
-  default32 as MultiComboSelect,
-  default29 as OrderButton,
-  default13 as Pagination,
-  default31 as ReviewHistory,
+  default33 as MultiComboSelect,
+  default30 as OrderButton,
+  default14 as Pagination,
+  default32 as ReviewHistory,
   ReviewHistoryDialog,
-  default30 as SearchInput,
-  default7 as Select,
-  default33 as Sidebar,
+  default31 as SearchInput,
+  default8 as Select,
+  default34 as Sidebar,
   SortTh,
-  default19 as StatCard,
-  default42 as Steps,
+  default20 as StatCard,
+  default44 as Steps,
   StepsNav,
+  default39 as StorageUsage,
   Td,
+  default5 as Textarea,
   Th,
-  default25 as TimeAgo,
-  default40 as TimePanel,
-  default39 as TimePopover,
-  default41 as TimeRangeField,
+  default26 as TimeAgo,
+  default42 as TimePanel,
+  default41 as TimePopover,
+  default43 as TimeRangeField,
   ToastProvider,
-  default36 as Tooltip,
-  default16 as UploadCard,
+  default37 as Tooltip,
+  default17 as UploadCard,
   WeekPopover,
   useToast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framepexls-ui-lib",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "private": false,
   "license": "MIT",
   "description": "Componentes UI de Framepexls para React/Next.",