framepexls-ui-lib 0.1.12 → 0.1.14

package/dist/Dropdown.js

@@ -1,8 +1,10 @@
 "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)
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   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 Dropdown_exports = {};
 __export(Dropdown_exports, {
@@ -32,6 +42,7 @@ 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");
+var import_Button = __toESM(require("./Button"));
 const DropdownCtx = (0, import_react.createContext)(null);
 const useDropdown = () => {
   const ctx = (0, import_react.useContext)(DropdownCtx);
@@ -125,25 +136,29 @@ function Trigger({
       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
-    }
-  );
+  return (() => {
+    const { color: _c, ...safe } = btnProps;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Button.default,
+      {
+        unstyled: true,
+        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(" "),
+        ...safe,
+        children
+      }
+    );
+  })();
 }
 function Content({
   children,
@@ -289,29 +304,33 @@ function Item({
       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 })
-      ]
-    }
-  );
+  return (() => {
+    const { color: _c, ...safe } = rest;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_Button.default,
+      {
+        unstyled: true,
+        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(" "),
+        ...safe,
+        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,

package/dist/Dropdown.mjs

@@ -12,6 +12,7 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 import { MenuPuntosVerticalIcon } from "./iconos/index";
+import Button from "./Button";
 const DropdownCtx = createContext(null);
 const useDropdown = () => {
   const ctx = useContext(DropdownCtx);
@@ -105,25 +106,29 @@ function Trigger({
       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
-    }
-  );
+  return (() => {
+    const { color: _c, ...safe } = btnProps;
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        unstyled: true,
+        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(" "),
+        ...safe,
+        children
+      }
+    );
+  })();
 }
 function Content({
   children,
@@ -269,29 +274,33 @@ function Item({
       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 })
-      ]
-    }
-  );
+  return (() => {
+    const { color: _c, ...safe } = rest;
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        unstyled: true,
+        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(" "),
+        ...safe,
+        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,

package/dist/Input.d.mts

@@ -7,6 +7,7 @@ type InputProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "si
     clearable?: boolean;
     onClear?: () => void;
     tone?: "default" | "danger";
+    unstyled?: boolean;
 };
 declare const Input: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     error?: boolean;
@@ -15,6 +16,7 @@ declare const Input: React__default.ForwardRefExoticComponent<Omit<React__defaul
     clearable?: boolean;
     onClear?: () => void;
     tone?: "default" | "danger";
+    unstyled?: boolean;
 } & React__default.RefAttributes<HTMLInputElement>>;
 
 export { type InputProps, Input as default };

package/dist/Input.d.ts

@@ -7,6 +7,7 @@ type InputProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "si
     clearable?: boolean;
     onClear?: () => void;
     tone?: "default" | "danger";
+    unstyled?: boolean;
 };
 declare const Input: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     error?: boolean;
@@ -15,6 +16,7 @@ declare const Input: React__default.ForwardRefExoticComponent<Omit<React__defaul
     clearable?: boolean;
     onClear?: () => void;
     tone?: "default" | "danger";
+    unstyled?: boolean;
 } & React__default.RefAttributes<HTMLInputElement>>;
 
 export { type InputProps, Input as default };

package/dist/Input.js

@@ -34,13 +34,26 @@ __export(Input_exports, {
 module.exports = __toCommonJS(Input_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
+var import_Button = __toESM(require("./Button"));
 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 Input = import_react.default.forwardRef(
-  ({ className, error, leftSlot, rightSlot, clearable, onClear, tone = "default", value, onChange, ...props }, ref) => {
+  ({ className, error, leftSlot, rightSlot, clearable, onClear, tone = "default", value, onChange, unstyled, ...props }, ref) => {
+    if (unstyled) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          ref,
+          value,
+          onChange,
+          className,
+          ...props
+        }
+      );
+    }
     const showClear = clearable && !!value && !props.disabled;
     const readOnly = !onChange;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative content-center", children: [
@@ -63,12 +76,14 @@ const Input = import_react.default.forwardRef(
           ...props
         }
       ),
-      showClear ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
+      rightSlot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400", children: rightSlot }),
+      showClear && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Button.default,
         {
+          unstyled: true,
           type: "button",
           title: "Limpiar",
-          className: "absolute right-2.5 top-1/2 -translate-y-1/2 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",
+          className: `absolute ${rightSlot ? "right-9" : "right-2.5"} top-1/2 -translate-y-1/2 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`,
           onClick: (e) => {
             e.preventDefault();
             onClear == null ? void 0 : onClear();
@@ -79,7 +94,7 @@ const Input = import_react.default.forwardRef(
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) })
         }
-      ) : rightSlot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400", children: rightSlot })
+      )
     ] });
   }
 );

package/dist/Input.mjs

@@ -1,13 +1,26 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import Button from "./Button";
 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 Input = React.forwardRef(
-  ({ className, error, leftSlot, rightSlot, clearable, onClear, tone = "default", value, onChange, ...props }, ref) => {
+  ({ className, error, leftSlot, rightSlot, clearable, onClear, tone = "default", value, onChange, unstyled, ...props }, ref) => {
+    if (unstyled) {
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          value,
+          onChange,
+          className,
+          ...props
+        }
+      );
+    }
     const showClear = clearable && !!value && !props.disabled;
     const readOnly = !onChange;
     return /* @__PURE__ */ jsxs("div", { className: "relative content-center", children: [
@@ -30,12 +43,14 @@ const Input = React.forwardRef(
           ...props
         }
       ),
-      showClear ? /* @__PURE__ */ jsx(
-        "button",
+      rightSlot && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400", children: rightSlot }),
+      showClear && /* @__PURE__ */ jsx(
+        Button,
         {
+          unstyled: true,
           type: "button",
           title: "Limpiar",
-          className: "absolute right-2.5 top-1/2 -translate-y-1/2 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",
+          className: `absolute ${rightSlot ? "right-9" : "right-2.5"} top-1/2 -translate-y-1/2 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`,
           onClick: (e) => {
             e.preventDefault();
             onClear == null ? void 0 : onClear();
@@ -46,7 +61,7 @@ const Input = React.forwardRef(
           },
           children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) })
         }
-      ) : rightSlot && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400", children: rightSlot })
+      )
     ] });
   }
 );

package/dist/Link.d.mts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type Size = "sm" | "md";
+type LinkProps = Omit<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & {
+    href: string;
+    showAnchorIcon?: boolean;
+    underline?: "hover" | "always" | "none";
+    size?: Size;
+    external?: boolean;
+    color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
+};
+declare function Link({ href, children, className, showAnchorIcon, underline, size, external, color, ...rest }: LinkProps): react_jsx_runtime.JSX.Element;
+
+export { type LinkProps, Link as default };

package/dist/Link.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type Size = "sm" | "md";
+type LinkProps = Omit<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & {
+    href: string;
+    showAnchorIcon?: boolean;
+    underline?: "hover" | "always" | "none";
+    size?: Size;
+    external?: boolean;
+    color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
+};
+declare function Link({ href, children, className, showAnchorIcon, underline, size, external, color, ...rest }: LinkProps): react_jsx_runtime.JSX.Element;
+
+export { type LinkProps, Link as default };

package/dist/Link.js

@@ -0,0 +1,93 @@
+"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 Link_exports = {};
+__export(Link_exports, {
+  default: () => Link
+});
+module.exports = __toCommonJS(Link_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_link = __toESM(require("next/link"));
+function Link({
+  href,
+  children,
+  className,
+  showAnchorIcon,
+  underline = "hover",
+  size = "md",
+  external,
+  color = "rose",
+  ...rest
+}) {
+  const base = "inline-flex items-center gap-1 font-medium transition";
+  const sizeCls = size === "sm" ? "text-sm" : "text-[15px]";
+  const COLORS = {
+    slate: "text-slate-600 hover:text-slate-700 dark:text-slate-300 dark:hover:text-slate-200",
+    gray: "text-gray-600 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200",
+    zinc: "text-zinc-600 hover:text-zinc-700 dark:text-zinc-300 dark:hover:text-zinc-200",
+    neutral: "text-neutral-600 hover:text-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200",
+    stone: "text-stone-600 hover:text-stone-700 dark:text-stone-300 dark:hover:text-stone-200",
+    red: "text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300",
+    orange: "text-orange-600 hover:text-orange-700 dark:text-orange-400 dark:hover:text-orange-300",
+    amber: "text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300",
+    yellow: "text-yellow-600 hover:text-yellow-700 dark:text-yellow-400 dark:hover:text-yellow-300",
+    lime: "text-lime-600 hover:text-lime-700 dark:text-lime-400 dark:hover:text-lime-300",
+    green: "text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300",
+    emerald: "text-emerald-600 hover:text-emerald-700 dark:text-emerald-400 dark:hover:text-emerald-300",
+    teal: "text-teal-600 hover:text-teal-700 dark:text-teal-400 dark:hover:text-teal-300",
+    cyan: "text-cyan-600 hover:text-cyan-700 dark:text-cyan-400 dark:hover:text-cyan-300",
+    sky: "text-sky-600 hover:text-sky-700 dark:text-sky-400 dark:hover:text-sky-300",
+    blue: "text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300",
+    indigo: "text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300",
+    violet: "text-violet-600 hover:text-violet-700 dark:text-violet-400 dark:hover:text-violet-300",
+    purple: "text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300",
+    fuchsia: "text-fuchsia-600 hover:text-fuchsia-700 dark:text-fuchsia-400 dark:hover:text-fuchsia-300",
+    pink: "text-pink-600 hover:text-pink-700 dark:text-pink-400 dark:hover:text-pink-300",
+    rose: "text-rose-600 hover:text-rose-700 dark:text-rose-400 dark:hover:text-rose-300"
+  };
+  const deco = underline === "always" ? "underline decoration-dotted underline-offset-4" : underline === "hover" ? "hover:underline decoration-dotted underline-offset-4" : "";
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "span",
+    {
+      className: [base, sizeCls, COLORS[color], deco, className != null ? className : ""].join(" "),
+      ...rest,
+      children: [
+        children,
+        showAnchorIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "h-[15px] w-[15px] opacity-80", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 3h7v7" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 14L21 3" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 14v7h-7" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 10l11 11" })
+        ] })
+      ]
+    }
+  );
+  const isExternal = external != null ? external : /^https?:\/\//i.test(href);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href, target: isExternal ? "_blank" : rest.target, rel: isExternal ? "noopener noreferrer" : rest.rel, children: content });
+}

package/dist/Link.mjs

@@ -0,0 +1,63 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import NextLink from "next/link";
+function Link({
+  href,
+  children,
+  className,
+  showAnchorIcon,
+  underline = "hover",
+  size = "md",
+  external,
+  color = "rose",
+  ...rest
+}) {
+  const base = "inline-flex items-center gap-1 font-medium transition";
+  const sizeCls = size === "sm" ? "text-sm" : "text-[15px]";
+  const COLORS = {
+    slate: "text-slate-600 hover:text-slate-700 dark:text-slate-300 dark:hover:text-slate-200",
+    gray: "text-gray-600 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200",
+    zinc: "text-zinc-600 hover:text-zinc-700 dark:text-zinc-300 dark:hover:text-zinc-200",
+    neutral: "text-neutral-600 hover:text-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-200",
+    stone: "text-stone-600 hover:text-stone-700 dark:text-stone-300 dark:hover:text-stone-200",
+    red: "text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300",
+    orange: "text-orange-600 hover:text-orange-700 dark:text-orange-400 dark:hover:text-orange-300",
+    amber: "text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300",
+    yellow: "text-yellow-600 hover:text-yellow-700 dark:text-yellow-400 dark:hover:text-yellow-300",
+    lime: "text-lime-600 hover:text-lime-700 dark:text-lime-400 dark:hover:text-lime-300",
+    green: "text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300",
+    emerald: "text-emerald-600 hover:text-emerald-700 dark:text-emerald-400 dark:hover:text-emerald-300",
+    teal: "text-teal-600 hover:text-teal-700 dark:text-teal-400 dark:hover:text-teal-300",
+    cyan: "text-cyan-600 hover:text-cyan-700 dark:text-cyan-400 dark:hover:text-cyan-300",
+    sky: "text-sky-600 hover:text-sky-700 dark:text-sky-400 dark:hover:text-sky-300",
+    blue: "text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300",
+    indigo: "text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300",
+    violet: "text-violet-600 hover:text-violet-700 dark:text-violet-400 dark:hover:text-violet-300",
+    purple: "text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300",
+    fuchsia: "text-fuchsia-600 hover:text-fuchsia-700 dark:text-fuchsia-400 dark:hover:text-fuchsia-300",
+    pink: "text-pink-600 hover:text-pink-700 dark:text-pink-400 dark:hover:text-pink-300",
+    rose: "text-rose-600 hover:text-rose-700 dark:text-rose-400 dark:hover:text-rose-300"
+  };
+  const deco = underline === "always" ? "underline decoration-dotted underline-offset-4" : underline === "hover" ? "hover:underline decoration-dotted underline-offset-4" : "";
+  const content = /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: [base, sizeCls, COLORS[color], deco, className != null ? className : ""].join(" "),
+      ...rest,
+      children: [
+        children,
+        showAnchorIcon && /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-[15px] w-[15px] opacity-80", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx("path", { d: "M14 3h7v7" }),
+          /* @__PURE__ */ jsx("path", { d: "M10 14L21 3" }),
+          /* @__PURE__ */ jsx("path", { d: "M21 14v7h-7" }),
+          /* @__PURE__ */ jsx("path", { d: "M3 10l11 11" })
+        ] })
+      ]
+    }
+  );
+  const isExternal = external != null ? external : /^https?:\/\//i.test(href);
+  return /* @__PURE__ */ jsx(NextLink, { href, target: isExternal ? "_blank" : rest.target, rel: isExternal ? "noopener noreferrer" : rest.rel, children: content });
+}
+export {
+  Link as default
+};

package/dist/MediaCard.d.mts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type MediaCardProps = {
+    imageUrl?: string | null;
+    title: string;
+    subtitle?: string;
+    copyUrl?: string;
+    onRename?: () => void;
+    onReplace?: () => void;
+    onDelete?: () => void;
+    className?: string;
+};
+declare function MediaCard({ imageUrl, title, subtitle, copyUrl, onRename, onReplace, onDelete, className, }: MediaCardProps): react_jsx_runtime.JSX.Element;
+
+export { type MediaCardProps, MediaCard as default };

package/dist/MediaCard.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type MediaCardProps = {
+    imageUrl?: string | null;
+    title: string;
+    subtitle?: string;
+    copyUrl?: string;
+    onRename?: () => void;
+    onReplace?: () => void;
+    onDelete?: () => void;
+    className?: string;
+};
+declare function MediaCard({ imageUrl, title, subtitle, copyUrl, onRename, onReplace, onDelete, className, }: MediaCardProps): react_jsx_runtime.JSX.Element;
+
+export { type MediaCardProps, MediaCard as default };