framepexls-ui-lib 0.1.4

package/dist/Dropdown.js

@@ -0,0 +1,333 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Dropdown_exports = {};
+__export(Dropdown_exports, {
+  Content: () => Content,
+  Dropdown: () => Dropdown,
+  Item: () => Item,
+  Label: () => Label,
+  Separator: () => Separator,
+  Trigger: () => Trigger,
+  default: () => Dropdown_default
+});
+module.exports = __toCommonJS(Dropdown_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+var import_iconos = require("./iconos/index");
+const DropdownCtx = (0, import_react.createContext)(null);
+const useDropdown = () => {
+  const ctx = (0, import_react.useContext)(DropdownCtx);
+  if (!ctx) throw new Error("Dropdown.* debe usarse dentro de <Dropdown>");
+  return ctx;
+};
+function Dropdown({
+  children,
+  align = "end",
+  onOpenChange,
+  permissions,
+  hasPermission,
+  permStrategy = "all",
+  defaultHideUnauthorized = true,
+  defaultDisableUnauthorized = true
+}) {
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const triggerRef = (0, import_react.useRef)(null);
+  const menuRef = (0, import_react.useRef)(null);
+  const menuId = (0, import_react.useId)();
+  const labelId = (0, import_react.useId)();
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      var _a, _b;
+      const t = e.target;
+      if ((_a = triggerRef.current) == null ? void 0 : _a.contains(t)) return;
+      if ((_b = menuRef.current) == null ? void 0 : _b.contains(t)) return;
+      setOpen(false);
+    };
+    const onScrollOrBlur = () => setOpen(false);
+    window.addEventListener("mousedown", onDown, true);
+    window.addEventListener("blur", onScrollOrBlur);
+    window.addEventListener("scroll", onScrollOrBlur, true);
+    return () => {
+      window.removeEventListener("mousedown", onDown, true);
+      window.removeEventListener("blur", onScrollOrBlur);
+      window.removeEventListener("scroll", onScrollOrBlur, true);
+    };
+  }, [open]);
+  (0, import_react.useEffect)(() => {
+    onOpenChange == null ? void 0 : onOpenChange(open);
+  }, [open, onOpenChange]);
+  const permSet = (0, import_react.useMemo)(() => {
+    if (!permissions) return void 0;
+    if (permissions instanceof Set) return permissions;
+    try {
+      return new Set(Array.from(permissions).map(String));
+    } catch {
+      return void 0;
+    }
+  }, [permissions]);
+  const isAllowed = (0, import_react.useCallback)((require2) => {
+    if (!require2) return true;
+    const needs = Array.isArray(require2) ? require2 : [require2];
+    if (hasPermission) {
+      return permStrategy === "all" ? needs.every((p) => hasPermission(p)) : needs.some((p) => hasPermission(p));
+    }
+    if (permSet) {
+      return permStrategy === "all" ? needs.every((p) => permSet.has(String(p))) : needs.some((p) => permSet.has(String(p)));
+    }
+    return true;
+  }, [hasPermission, permSet, permStrategy]);
+  const value = (0, import_react.useMemo)(
+    () => ({
+      open,
+      setOpen,
+      triggerRef,
+      menuRef,
+      menuId,
+      labelId,
+      align,
+      isAllowed,
+      defaultHideUnauthorized,
+      defaultDisableUnauthorized
+    }),
+    [open, align, isAllowed, defaultHideUnauthorized, defaultDisableUnauthorized]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DropdownCtx.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative inline-block text-left", children }) });
+}
+function Trigger({
+  children,
+  className = "",
+  ...btnProps
+}) {
+  const { open, setOpen, triggerRef, menuId } = useDropdown();
+  const onClick = (0, import_react.useCallback)(() => setOpen(!open), [open, setOpen]);
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setOpen(true);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      ref: triggerRef,
+      "aria-haspopup": "menu",
+      "aria-controls": menuId,
+      "aria-expanded": open,
+      onClick,
+      onKeyDown,
+      className: [
+        "inline-flex items-center gap-2 rounded-xl border border-slate-300/70 bg-white px-3 py-2",
+        "text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 active:scale-[0.98]",
+        "dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
+        className
+      ].join(" "),
+      ...btnProps,
+      children
+    }
+  );
+}
+function Content({
+  children,
+  className = "",
+  maxHeight = 360
+}) {
+  const { open, setOpen, triggerRef, menuRef, menuId, labelId, align } = useDropdown();
+  const [pos, setPos] = (0, import_react.useState)({ top: 0, left: 0, origin: "top-left", maxH: maxHeight });
+  const computePosition = (0, import_react.useCallback)(() => {
+    var _a, _b;
+    const t = triggerRef.current;
+    if (!t) return;
+    const r = t.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const gap = 8;
+    const measuredW = (_b = (_a = menuRef.current) == null ? void 0 : _a.offsetWidth) != null ? _b : 0;
+    const estW = Math.max(220, r.width);
+    const w = measuredW || estW;
+    let left = align === "end" ? r.right - w : r.left;
+    left = Math.min(Math.max(left, 8), vw - w - 8);
+    const availableDown = vh - (r.bottom + gap) - 8;
+    const maxH = Math.max(160, Math.min(maxHeight, availableDown));
+    const origin = align === "end" ? "top-right" : "top-left";
+    setPos({ top: r.bottom + gap, left: Math.round(left), origin, maxH });
+  }, [align, triggerRef, menuRef, maxHeight]);
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    computePosition();
+    const id = setTimeout(computePosition, 0);
+    const onScroll = () => computePosition();
+    const onResize = () => computePosition();
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onResize);
+    const ro = menuRef.current ? new ResizeObserver(() => computePosition()) : null;
+    if (menuRef.current && ro) ro.observe(menuRef.current);
+    return () => {
+      clearTimeout(id);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onResize);
+      ro == null ? void 0 : ro.disconnect();
+    };
+  }, [open, computePosition]);
+  const onKeyDown = (e) => {
+    var _a, _b, _c, _d, _e;
+    const items = Array.from(
+      (_b = (_a = menuRef.current) == null ? void 0 : _a.querySelectorAll('[role="menuitem"]')) != null ? _b : []
+    ).filter((el) => el.getAttribute("data-disabled") !== "true");
+    const i = items.findIndex((el) => el === document.activeElement);
+    if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+      (_c = triggerRef.current) == null ? void 0 : _c.focus();
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      (_d = items[(i + 1 + items.length) % items.length]) == null ? void 0 : _d.focus();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      (_e = items[(i - 1 + items.length) % items.length]) == null ? void 0 : _e.focus();
+    }
+  };
+  if (!open) return null;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        role: "menu",
+        id: menuId,
+        "aria-labelledby": labelId,
+        ref: menuRef,
+        onKeyDown,
+        style: {
+          position: "fixed",
+          top: pos.top,
+          left: pos.left,
+          maxHeight: pos.maxH,
+          maxWidth: "calc(100vw - 16px)"
+        },
+        className: [
+          "z-[9999] overflow-auto rounded-2xl border border-slate-200/80 bg-white p-1.5 shadow-xl",
+          "data-[open=false]:pointer-events-none data-[open=false]:opacity-0 data-[open=false]:scale-95",
+          "data-[open=true]:opacity-100 data-[open=true]:scale-100 transition",
+          pos.origin === "top-right" ? "origin-top-right" : "origin-top-left",
+          "dark:border-white/10 dark:bg-[#0f0d0e]",
+          className
+        ].join(" "),
+        "data-open": "true",
+        children
+      }
+    ),
+    document.body
+  );
+}
+function Label({ children }) {
+  const { labelId } = useDropdown();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      id: labelId,
+      className: "px-2.5 py-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400",
+      children
+    }
+  );
+}
+function Separator({ className = "" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      role: "separator",
+      className: ["my-1 h-px bg-slate-200/80 dark:bg-white/10", className].join(" ")
+    }
+  );
+}
+function Item({
+  children,
+  icon,
+  kbd,
+  danger,
+  disabled,
+  require: require2,
+  hideIfUnauthorized,
+  disableIfUnauthorized,
+  onSelect,
+  className = "",
+  ...rest
+}) {
+  const { setOpen, isAllowed, defaultHideUnauthorized, defaultDisableUnauthorized } = useDropdown();
+  const allowed = isAllowed ? isAllowed(require2) : true;
+  const shouldHide = (hideIfUnauthorized != null ? hideIfUnauthorized : defaultHideUnauthorized) && !allowed;
+  const shouldDisable = !shouldHide && (disableIfUnauthorized != null ? disableIfUnauthorized : defaultDisableUnauthorized) && !allowed;
+  if (shouldHide) return null;
+  const onClick = (e) => {
+    e.preventDefault();
+    if (disabled || shouldDisable) return;
+    onSelect == null ? void 0 : onSelect();
+    setOpen(false);
+  };
+  const onKeyDown = (e) => {
+    if (disabled || shouldDisable) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onSelect == null ? void 0 : onSelect();
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      role: "menuitem",
+      "data-disabled": disabled || shouldDisable ? "true" : "false",
+      disabled: disabled || shouldDisable,
+      onClick,
+      onKeyDown,
+      className: [
+        "group flex w-full items-center justify-between gap-3 rounded-xl px-2.5 py-2 text-left text-sm",
+        disabled || shouldDisable ? "text-slate-400 dark:text-slate-500 cursor-not-allowed" : danger ? "text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-500/10" : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/10",
+        className
+      ].join(" "),
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex min-w-0 items-center gap-2", children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0 flex items-center justify-center h-4 w-4 text-slate-500 dark:text-slate-400", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate leading-none", children })
+        ] }),
+        kbd && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0 rounded-md border border-slate-200/80 bg-white px-1.5 py-0.5 text-[11px] text-slate-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-400", children: kbd })
+      ]
+    }
+  );
+}
+const DropdownExport = Object.assign(Dropdown, {
+  Trigger,
+  Content,
+  Label,
+  Separator,
+  Item,
+  MenuPuntosVerticalIcon: import_iconos.MenuPuntosVerticalIcon
+});
+var Dropdown_default = DropdownExport;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Content,
+  Dropdown,
+  Item,
+  Label,
+  Separator,
+  Trigger
+});

package/dist/Dropdown.mjs

@@ -0,0 +1,313 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { MenuPuntosVerticalIcon } from "./iconos/index";
+const DropdownCtx = createContext(null);
+const useDropdown = () => {
+  const ctx = useContext(DropdownCtx);
+  if (!ctx) throw new Error("Dropdown.* debe usarse dentro de <Dropdown>");
+  return ctx;
+};
+function Dropdown({
+  children,
+  align = "end",
+  onOpenChange,
+  permissions,
+  hasPermission,
+  permStrategy = "all",
+  defaultHideUnauthorized = true,
+  defaultDisableUnauthorized = true
+}) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const menuId = useId();
+  const labelId = useId();
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      var _a, _b;
+      const t = e.target;
+      if ((_a = triggerRef.current) == null ? void 0 : _a.contains(t)) return;
+      if ((_b = menuRef.current) == null ? void 0 : _b.contains(t)) return;
+      setOpen(false);
+    };
+    const onScrollOrBlur = () => setOpen(false);
+    window.addEventListener("mousedown", onDown, true);
+    window.addEventListener("blur", onScrollOrBlur);
+    window.addEventListener("scroll", onScrollOrBlur, true);
+    return () => {
+      window.removeEventListener("mousedown", onDown, true);
+      window.removeEventListener("blur", onScrollOrBlur);
+      window.removeEventListener("scroll", onScrollOrBlur, true);
+    };
+  }, [open]);
+  useEffect(() => {
+    onOpenChange == null ? void 0 : onOpenChange(open);
+  }, [open, onOpenChange]);
+  const permSet = useMemo(() => {
+    if (!permissions) return void 0;
+    if (permissions instanceof Set) return permissions;
+    try {
+      return new Set(Array.from(permissions).map(String));
+    } catch {
+      return void 0;
+    }
+  }, [permissions]);
+  const isAllowed = useCallback((require2) => {
+    if (!require2) return true;
+    const needs = Array.isArray(require2) ? require2 : [require2];
+    if (hasPermission) {
+      return permStrategy === "all" ? needs.every((p) => hasPermission(p)) : needs.some((p) => hasPermission(p));
+    }
+    if (permSet) {
+      return permStrategy === "all" ? needs.every((p) => permSet.has(String(p))) : needs.some((p) => permSet.has(String(p)));
+    }
+    return true;
+  }, [hasPermission, permSet, permStrategy]);
+  const value = useMemo(
+    () => ({
+      open,
+      setOpen,
+      triggerRef,
+      menuRef,
+      menuId,
+      labelId,
+      align,
+      isAllowed,
+      defaultHideUnauthorized,
+      defaultDisableUnauthorized
+    }),
+    [open, align, isAllowed, defaultHideUnauthorized, defaultDisableUnauthorized]
+  );
+  return /* @__PURE__ */ jsx(DropdownCtx.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: "relative inline-block text-left", children }) });
+}
+function Trigger({
+  children,
+  className = "",
+  ...btnProps
+}) {
+  const { open, setOpen, triggerRef, menuId } = useDropdown();
+  const onClick = useCallback(() => setOpen(!open), [open, setOpen]);
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setOpen(true);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: triggerRef,
+      "aria-haspopup": "menu",
+      "aria-controls": menuId,
+      "aria-expanded": open,
+      onClick,
+      onKeyDown,
+      className: [
+        "inline-flex items-center gap-2 rounded-xl border border-slate-300/70 bg-white px-3 py-2",
+        "text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 active:scale-[0.98]",
+        "dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
+        className
+      ].join(" "),
+      ...btnProps,
+      children
+    }
+  );
+}
+function Content({
+  children,
+  className = "",
+  maxHeight = 360
+}) {
+  const { open, setOpen, triggerRef, menuRef, menuId, labelId, align } = useDropdown();
+  const [pos, setPos] = useState({ top: 0, left: 0, origin: "top-left", maxH: maxHeight });
+  const computePosition = useCallback(() => {
+    var _a, _b;
+    const t = triggerRef.current;
+    if (!t) return;
+    const r = t.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const gap = 8;
+    const measuredW = (_b = (_a = menuRef.current) == null ? void 0 : _a.offsetWidth) != null ? _b : 0;
+    const estW = Math.max(220, r.width);
+    const w = measuredW || estW;
+    let left = align === "end" ? r.right - w : r.left;
+    left = Math.min(Math.max(left, 8), vw - w - 8);
+    const availableDown = vh - (r.bottom + gap) - 8;
+    const maxH = Math.max(160, Math.min(maxHeight, availableDown));
+    const origin = align === "end" ? "top-right" : "top-left";
+    setPos({ top: r.bottom + gap, left: Math.round(left), origin, maxH });
+  }, [align, triggerRef, menuRef, maxHeight]);
+  useEffect(() => {
+    if (!open) return;
+    computePosition();
+    const id = setTimeout(computePosition, 0);
+    const onScroll = () => computePosition();
+    const onResize = () => computePosition();
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onResize);
+    const ro = menuRef.current ? new ResizeObserver(() => computePosition()) : null;
+    if (menuRef.current && ro) ro.observe(menuRef.current);
+    return () => {
+      clearTimeout(id);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onResize);
+      ro == null ? void 0 : ro.disconnect();
+    };
+  }, [open, computePosition]);
+  const onKeyDown = (e) => {
+    var _a, _b, _c, _d, _e;
+    const items = Array.from(
+      (_b = (_a = menuRef.current) == null ? void 0 : _a.querySelectorAll('[role="menuitem"]')) != null ? _b : []
+    ).filter((el) => el.getAttribute("data-disabled") !== "true");
+    const i = items.findIndex((el) => el === document.activeElement);
+    if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+      (_c = triggerRef.current) == null ? void 0 : _c.focus();
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      (_d = items[(i + 1 + items.length) % items.length]) == null ? void 0 : _d.focus();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      (_e = items[(i - 1 + items.length) % items.length]) == null ? void 0 : _e.focus();
+    }
+  };
+  if (!open) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "menu",
+        id: menuId,
+        "aria-labelledby": labelId,
+        ref: menuRef,
+        onKeyDown,
+        style: {
+          position: "fixed",
+          top: pos.top,
+          left: pos.left,
+          maxHeight: pos.maxH,
+          maxWidth: "calc(100vw - 16px)"
+        },
+        className: [
+          "z-[9999] overflow-auto rounded-2xl border border-slate-200/80 bg-white p-1.5 shadow-xl",
+          "data-[open=false]:pointer-events-none data-[open=false]:opacity-0 data-[open=false]:scale-95",
+          "data-[open=true]:opacity-100 data-[open=true]:scale-100 transition",
+          pos.origin === "top-right" ? "origin-top-right" : "origin-top-left",
+          "dark:border-white/10 dark:bg-[#0f0d0e]",
+          className
+        ].join(" "),
+        "data-open": "true",
+        children
+      }
+    ),
+    document.body
+  );
+}
+function Label({ children }) {
+  const { labelId } = useDropdown();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: labelId,
+      className: "px-2.5 py-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400",
+      children
+    }
+  );
+}
+function Separator({ className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      className: ["my-1 h-px bg-slate-200/80 dark:bg-white/10", className].join(" ")
+    }
+  );
+}
+function Item({
+  children,
+  icon,
+  kbd,
+  danger,
+  disabled,
+  require: require2,
+  hideIfUnauthorized,
+  disableIfUnauthorized,
+  onSelect,
+  className = "",
+  ...rest
+}) {
+  const { setOpen, isAllowed, defaultHideUnauthorized, defaultDisableUnauthorized } = useDropdown();
+  const allowed = isAllowed ? isAllowed(require2) : true;
+  const shouldHide = (hideIfUnauthorized != null ? hideIfUnauthorized : defaultHideUnauthorized) && !allowed;
+  const shouldDisable = !shouldHide && (disableIfUnauthorized != null ? disableIfUnauthorized : defaultDisableUnauthorized) && !allowed;
+  if (shouldHide) return null;
+  const onClick = (e) => {
+    e.preventDefault();
+    if (disabled || shouldDisable) return;
+    onSelect == null ? void 0 : onSelect();
+    setOpen(false);
+  };
+  const onKeyDown = (e) => {
+    if (disabled || shouldDisable) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onSelect == null ? void 0 : onSelect();
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      role: "menuitem",
+      "data-disabled": disabled || shouldDisable ? "true" : "false",
+      disabled: disabled || shouldDisable,
+      onClick,
+      onKeyDown,
+      className: [
+        "group flex w-full items-center justify-between gap-3 rounded-xl px-2.5 py-2 text-left text-sm",
+        disabled || shouldDisable ? "text-slate-400 dark:text-slate-500 cursor-not-allowed" : danger ? "text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-500/10" : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/10",
+        className
+      ].join(" "),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 flex items-center justify-center h-4 w-4 text-slate-500 dark:text-slate-400", children: icon }),
+          /* @__PURE__ */ jsx("span", { className: "truncate leading-none", children })
+        ] }),
+        kbd && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-md border border-slate-200/80 bg-white px-1.5 py-0.5 text-[11px] text-slate-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-400", children: kbd })
+      ]
+    }
+  );
+}
+const DropdownExport = Object.assign(Dropdown, {
+  Trigger,
+  Content,
+  Label,
+  Separator,
+  Item,
+  MenuPuntosVerticalIcon
+});
+var Dropdown_default = DropdownExport;
+export {
+  Content,
+  Dropdown,
+  Item,
+  Label,
+  Separator,
+  Trigger,
+  Dropdown_default as default
+};

package/dist/EmptyState.d.mts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function EmptyState({ title, subtitle, }: {
+    title?: string;
+    subtitle?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { EmptyState as default };

package/dist/EmptyState.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function EmptyState({ title, subtitle, }: {
+    title?: string;
+    subtitle?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { EmptyState as default };

package/dist/EmptyState.js

@@ -0,0 +1,35 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var EmptyState_exports = {};
+__export(EmptyState_exports, {
+  default: () => EmptyState
+});
+module.exports = __toCommonJS(EmptyState_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function EmptyState({
+  title = "Sin resultados",
+  subtitle = "Intenta cambiar el t\xE9rmino de b\xFAsqueda o los filtros."
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto w-full max-w-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mx-auto mb-4 h-14 w-14 rounded-2xl bg-slate-100 ring-1 ring-slate-200 dark:bg-white/5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg font-medium", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm text-slate-500", children: subtitle })
+  ] });
+}