framepexls-ui-lib 0.2.15 → 0.3.1

package/dist/Sidebar.js

@@ -222,12 +222,16 @@ function Sidebar({
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "aside",
+      import_framer_motion.motion.aside,
       {
         className: [
           "hidden xl:fixed xl:inset-y-0 xl:flex xl:flex-col xl:border-r xl:border-black/5 bg-white xl:py-6 dark:bg-[var(--fx-surface)] z-40",
-          collapsed ? "xl:w-28 xl:px-3" : "xl:w-72 xl:px-4"
+          collapsed ? "xl:px-3" : "xl:px-4"
         ].join(" "),
+        initial: false,
+        animate: { width: collapsed ? 112 : 288 },
+        transition: { type: "spring", stiffness: 260, damping: 30, mass: 0.9 },
+        style: { width: collapsed ? 112 : 288 },
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           SidebarInner,
           {
@@ -246,7 +250,16 @@ function Sidebar({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["hidden xl:block", collapsed ? "xl:w-20" : "xl:w-72"].join(" ") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.div,
+      {
+        className: "hidden xl:block",
+        initial: false,
+        animate: { width: collapsed ? 112 : 288 },
+        transition: { type: "spring", stiffness: 260, damping: 30, mass: 0.9 },
+        style: { width: collapsed ? 112 : 288 }
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: drawerOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_framer_motion.motion.div, { className: "fixed inset-0 z-40 xl:hidden", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-black/40" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -315,10 +328,21 @@ function SidebarInner({
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between px-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Button.default, { unstyled: true, type: "button", className: "flex items-center gap-3", title: "Ir al inicio", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-2xl font-black tracking-tight", children: brandInitials }),
-        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "leading-tight", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg font-semibold tracking-tight", children: brandTitle }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[11px] uppercase tracking-wide text-slate-400 text-left", children: brandSubtitle })
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_framer_motion.motion.div,
+          {
+            initial: { opacity: 0, x: -6 },
+            animate: { opacity: 1, x: 0 },
+            exit: { opacity: 0, x: -6 },
+            transition: { duration: 0.15 },
+            className: "leading-tight",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg font-semibold tracking-tight", children: brandTitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[11px] uppercase tracking-wide text-slate-400 text-left", children: brandSubtitle })
+            ]
+          },
+          "brand-meta"
+        ) })
       ] }),
       !mobile && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_Button.default,
@@ -329,7 +353,7 @@ function SidebarInner({
           variant: "ghost",
           size: "sm",
           leftIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ChevronLeftRightIcon, { collapsed: collapsed != null ? collapsed : false }),
-          className: "hidden xl:inline-flex h-8 w-8 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-slate-200",
+          className: "hidden xl:inline-flex h-8 w-8 p-0 !gap-0 rounded-xl border border-slate-200 bg-white 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",
           title: collapsed ? "Expandir" : "Contraer"
         }
       )

package/dist/Sidebar.mjs

@@ -189,12 +189,16 @@ function Sidebar({
       ] })
     ] }),
     /* @__PURE__ */ jsx(
-      "aside",
+      motion.aside,
       {
         className: [
           "hidden xl:fixed xl:inset-y-0 xl:flex xl:flex-col xl:border-r xl:border-black/5 bg-white xl:py-6 dark:bg-[var(--fx-surface)] z-40",
-          collapsed ? "xl:w-28 xl:px-3" : "xl:w-72 xl:px-4"
+          collapsed ? "xl:px-3" : "xl:px-4"
         ].join(" "),
+        initial: false,
+        animate: { width: collapsed ? 112 : 288 },
+        transition: { type: "spring", stiffness: 260, damping: 30, mass: 0.9 },
+        style: { width: collapsed ? 112 : 288 },
         children: /* @__PURE__ */ jsx(
           SidebarInner,
           {
@@ -213,7 +217,16 @@ function Sidebar({
         )
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: ["hidden xl:block", collapsed ? "xl:w-20" : "xl:w-72"].join(" ") }),
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "hidden xl:block",
+        initial: false,
+        animate: { width: collapsed ? 112 : 288 },
+        transition: { type: "spring", stiffness: 260, damping: 30, mass: 0.9 },
+        style: { width: collapsed ? 112 : 288 }
+      }
+    ),
     /* @__PURE__ */ jsx(AnimatePresence, { children: drawerOpen && /* @__PURE__ */ jsxs(motion.div, { className: "fixed inset-0 z-40 xl:hidden", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: [
       /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/40" }),
       /* @__PURE__ */ jsxs(
@@ -282,10 +295,21 @@ function SidebarInner({
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-1", children: [
       /* @__PURE__ */ jsxs(Button, { unstyled: true, type: "button", className: "flex items-center gap-3", title: "Ir al inicio", children: [
         /* @__PURE__ */ jsx("div", { className: "text-2xl font-black tracking-tight", children: brandInitials }),
-        !collapsed && /* @__PURE__ */ jsxs("div", { className: "leading-tight", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold tracking-tight", children: brandTitle }),
-          /* @__PURE__ */ jsx("div", { className: "text-[11px] uppercase tracking-wide text-slate-400 text-left", children: brandSubtitle })
-        ] })
+        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: { opacity: 0, x: -6 },
+            animate: { opacity: 1, x: 0 },
+            exit: { opacity: 0, x: -6 },
+            transition: { duration: 0.15 },
+            className: "leading-tight",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold tracking-tight", children: brandTitle }),
+              /* @__PURE__ */ jsx("div", { className: "text-[11px] uppercase tracking-wide text-slate-400 text-left", children: brandSubtitle })
+            ]
+          },
+          "brand-meta"
+        ) })
       ] }),
       !mobile && /* @__PURE__ */ jsx(
         Button,
@@ -296,7 +320,7 @@ function SidebarInner({
           variant: "ghost",
           size: "sm",
           leftIcon: /* @__PURE__ */ jsx(ChevronLeftRightIcon, { collapsed: collapsed != null ? collapsed : false }),
-          className: "hidden xl:inline-flex h-8 w-8 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-slate-200",
+          className: "hidden xl:inline-flex h-8 w-8 p-0 !gap-0 rounded-xl border border-slate-200 bg-white 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",
           title: collapsed ? "Expandir" : "Contraer"
         }
       )

package/dist/iconos/index.js

@@ -405,20 +405,10 @@ const CloseIcon = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 6l12 12M18 6L6 18" }) });
 };
 const ChevronLeftRightIcon = ({ collapsed }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      className: `h-5 w-5 transition-transform ${collapsed ? "rotate-180" : ""}`,
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 18l-6-6 6-6" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 6l6 6-6 6" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "4", y: "4", width: "3", height: "16", rx: "1.5" }),
+    collapsed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 8l4 4-4 4" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 8l-4 4 4 4" })
+  ] });
 };
 const MenuPuntosVerticalIcon = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "currentColor", children: [

package/dist/iconos/index.mjs

@@ -333,20 +333,10 @@ const CloseIcon = () => {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" }) });
 };
 const ChevronLeftRightIcon = ({ collapsed }) => {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      className: `h-5 w-5 transition-transform ${collapsed ? "rotate-180" : ""}`,
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M9 18l-6-6 6-6" }),
-        /* @__PURE__ */ jsx("path", { d: "M15 6l6 6-6 6" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "3", height: "16", rx: "1.5" }),
+    collapsed ? /* @__PURE__ */ jsx("path", { d: "M10 8l4 4-4 4" }) : /* @__PURE__ */ jsx("path", { d: "M14 8l-4 4 4 4" })
+  ] });
 };
 const MenuPuntosVerticalIcon = () => {
   return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "currentColor", children: [

package/dist/index.d.mts

@@ -50,6 +50,9 @@ export { TimeRange, default as TimeRangeField, TimeRangeFieldProps } from './Tim
 export { StepDef, default as Steps, StepsNav } from './Steps.mjs';
 export { Aficionados, AuditarDocumento, Borrar, CajaDeMano, Cajas, Calendario, ChevronLeftRightIcon, CirculoAdvertencia, CirculoExito, CirculoPeligro, CirculoPorDefecto, ClientsIcon, CloseIcon, ContraseniaDeEmailIcon, Cotizaciones, DashboardIcon, Directorio, Edificio, Editar, Empresa, EscaneoFacial, EyeIcon, FlechaAbajo, FlechaArriba, Imagenes, LlamadaTelefonica, LogoutIcon, MarketingDigital, MediosDeComunicacionSocial, MenuIcon, MenuPuntosVerticalIcon, Nota, Ojo, OrdersIcon, PencilIcon, PermsIcon, ProductsIcon, PromoIcon, Retroalimentacion, RolesIcon, Sobre, Tablero, Tarea, Tickets, TrabajoEnEquipo, TrashIcon, UserIcon, UsersIcon, UsuarioProhibidoIcon, Usuarios } from './iconos/index.mjs';
 export { default as ColorPicker, ColorPickerProps } from './ColorPicker.mjs';
+export { default as ThemeProvider, useTheme } from './theme/ThemeProvider.mjs';
+export { default as ThemeScript } from './theme/ThemeScript.mjs';
+export { default as ThemeToggle } from './theme/ThemeToggle.mjs';
 import 'react';
 import 'react/jsx-runtime';
 import 'framer-motion';

package/dist/index.d.ts

@@ -50,6 +50,9 @@ export { TimeRange, default as TimeRangeField, TimeRangeFieldProps } from './Tim
 export { StepDef, default as Steps, StepsNav } from './Steps.js';
 export { Aficionados, AuditarDocumento, Borrar, CajaDeMano, Cajas, Calendario, ChevronLeftRightIcon, CirculoAdvertencia, CirculoExito, CirculoPeligro, CirculoPorDefecto, ClientsIcon, CloseIcon, ContraseniaDeEmailIcon, Cotizaciones, DashboardIcon, Directorio, Edificio, Editar, Empresa, EscaneoFacial, EyeIcon, FlechaAbajo, FlechaArriba, Imagenes, LlamadaTelefonica, LogoutIcon, MarketingDigital, MediosDeComunicacionSocial, MenuIcon, MenuPuntosVerticalIcon, Nota, Ojo, OrdersIcon, PencilIcon, PermsIcon, ProductsIcon, PromoIcon, Retroalimentacion, RolesIcon, Sobre, Tablero, Tarea, Tickets, TrabajoEnEquipo, TrashIcon, UserIcon, UsersIcon, UsuarioProhibidoIcon, Usuarios } from './iconos/index.js';
 export { default as ColorPicker, ColorPickerProps } from './ColorPicker.js';
+export { default as ThemeProvider, useTheme } from './theme/ThemeProvider.js';
+export { default as ThemeScript } from './theme/ThemeScript.js';
+export { default as ThemeToggle } from './theme/ThemeToggle.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'framer-motion';

package/dist/index.js

@@ -80,6 +80,9 @@ __export(index_exports, {
   Td: () => import_Table.Td,
   Textarea: () => import_Textarea.default,
   Th: () => import_Table.Th,
+  ThemeProvider: () => import_ThemeProvider.default,
+  ThemeScript: () => import_ThemeScript.default,
+  ThemeToggle: () => import_ThemeToggle.default,
   TimeAgo: () => import_TimeAgo.default,
   TimePanel: () => import_TimePanel.default,
   TimePopover: () => import_TimePopover.default,
@@ -89,6 +92,7 @@ __export(index_exports, {
   TopImpresionesBar: () => import_AnalyticsCharts.TopImpresionesBar,
   UploadCard: () => import_UploadCard.default,
   WeekPopover: () => import_TimePopover2.WeekPopover,
+  useTheme: () => import_ThemeProvider.useTheme,
   useToast: () => import_Toast.useToast
 });
 module.exports = __toCommonJS(index_exports);
@@ -149,6 +153,9 @@ var import_Steps = __toESM(require("./Steps"));
 var import_Steps2 = require("./Steps");
 __reExport(index_exports, require("./iconos"), module.exports);
 var import_ColorPicker = __toESM(require("./ColorPicker"));
+var import_ThemeProvider = __toESM(require("./theme/ThemeProvider"));
+var import_ThemeScript = __toESM(require("./theme/ThemeScript"));
+var import_ThemeToggle = __toESM(require("./theme/ThemeToggle"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionIconButton,
@@ -202,6 +209,9 @@ var import_ColorPicker = __toESM(require("./ColorPicker"));
   Td,
   Textarea,
   Th,
+  ThemeProvider,
+  ThemeScript,
+  ThemeToggle,
   TimeAgo,
   TimePanel,
   TimePopover,
@@ -211,6 +221,7 @@ var import_ColorPicker = __toESM(require("./ColorPicker"));
   TopImpresionesBar,
   UploadCard,
   WeekPopover,
+  useTheme,
   useToast,
   ...require("./Dialog"),
   ...require("./Dropdown"),

package/dist/index.mjs

@@ -55,6 +55,9 @@ import { default as default47 } from "./Steps";
 import { StepsNav } from "./Steps";
 export * from "./iconos";
 import { default as default48 } from "./ColorPicker";
+import { default as default49, useTheme } from "./theme/ThemeProvider";
+import { default as default50 } from "./theme/ThemeScript";
+import { default as default51 } from "./theme/ThemeToggle";
 export {
   default3 as ActionIconButton,
   AnimatedBody,
@@ -107,6 +110,9 @@ export {
   Td,
   default5 as Textarea,
   Th,
+  default49 as ThemeProvider,
+  default50 as ThemeScript,
+  default51 as ThemeToggle,
   default28 as TimeAgo,
   default45 as TimePanel,
   default44 as TimePopover,
@@ -116,5 +122,6 @@ export {
   TopImpresionesBar,
   default18 as UploadCard,
   WeekPopover,
+  useTheme,
   useToast
 };

package/dist/theme/ThemeProvider.d.mts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type Theme = "light" | "dark" | "system";
+type ThemeContextValue = {
+    theme: Theme;
+    isDark: boolean;
+    setTheme: (next: Theme) => void;
+    toggle: () => void;
+};
+declare function ThemeProvider({ children, defaultTheme, storageKey, }: {
+    children: React__default.ReactNode;
+    defaultTheme?: Theme;
+    storageKey?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+
+export { type Theme, ThemeProvider, ThemeProvider as default, useTheme };

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type Theme = "light" | "dark" | "system";
+type ThemeContextValue = {
+    theme: Theme;
+    isDark: boolean;
+    setTheme: (next: Theme) => void;
+    toggle: () => void;
+};
+declare function ThemeProvider({ children, defaultTheme, storageKey, }: {
+    children: React__default.ReactNode;
+    defaultTheme?: Theme;
+    storageKey?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+
+export { type Theme, ThemeProvider, ThemeProvider as default, useTheme };

package/dist/theme/ThemeProvider.js

@@ -0,0 +1,109 @@
+"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 ThemeProvider_exports = {};
+__export(ThemeProvider_exports, {
+  ThemeProvider: () => ThemeProvider,
+  default: () => ThemeProvider_default,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(ThemeProvider_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const ThemeContext = (0, import_react.createContext)(null);
+const STORAGE_KEY = "theme";
+function computeIsDark(pref) {
+  if (pref === "dark") return true;
+  if (pref === "light") return false;
+  return typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function applyThemeToDocument(pref) {
+  if (typeof document === "undefined") return;
+  const doc = document.documentElement;
+  doc.dataset.theme = pref;
+  const isDark = computeIsDark(pref);
+  doc.classList.toggle("dark", isDark);
+  doc.style.colorScheme = isDark ? "dark" : "light";
+}
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = STORAGE_KEY
+}) {
+  const [theme, setThemeState] = (0, import_react.useState)(() => {
+    var _a;
+    if (typeof window === "undefined") return defaultTheme;
+    const stored = (_a = window.localStorage.getItem(storageKey)) != null ? _a : null;
+    return stored != null ? stored : defaultTheme;
+  });
+  const [isDark, setIsDark] = (0, import_react.useState)(() => computeIsDark(theme));
+  (0, import_react.useEffect)(() => {
+    applyThemeToDocument(theme);
+    setIsDark(computeIsDark(theme));
+    try {
+      window.localStorage.setItem(storageKey, theme);
+    } catch {
+    }
+  }, [theme, storageKey]);
+  (0, import_react.useEffect)(() => {
+    var _a;
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => {
+      if (theme === "system") {
+        applyThemeToDocument("system");
+        setIsDark(computeIsDark("system"));
+      }
+    };
+    (_a = mql.addEventListener) == null ? void 0 : _a.call(mql, "change", handler);
+    return () => {
+      var _a2;
+      return (_a2 = mql.removeEventListener) == null ? void 0 : _a2.call(mql, "change", handler);
+    };
+  }, [theme]);
+  const setTheme = (0, import_react.useCallback)((next) => {
+    setThemeState(next);
+  }, []);
+  const toggle = (0, import_react.useCallback)(() => {
+    setThemeState((prev) => computeIsDark(prev) ? "light" : "dark");
+  }, []);
+  const value = (0, import_react.useMemo)(() => ({ theme, isDark, setTheme, toggle }), [theme, isDark, setTheme, toggle]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  var _a, _b;
+  const ctx = (0, import_react.useContext)(ThemeContext);
+  if (!ctx) {
+    const doc = typeof document !== "undefined" ? document.documentElement : null;
+    const attr = (_b = (_a = doc == null ? void 0 : doc.dataset) == null ? void 0 : _a.theme) != null ? _b : "system";
+    return {
+      theme: attr,
+      isDark: doc ? doc.classList.contains("dark") : false,
+      setTheme: (t) => applyThemeToDocument(t),
+      toggle: () => applyThemeToDocument(attr === "dark" ? "light" : "dark")
+    };
+  }
+  return ctx;
+}
+var ThemeProvider_default = ThemeProvider;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeProvider,
+  useTheme
+});

package/dist/theme/ThemeProvider.mjs

@@ -0,0 +1,84 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+const ThemeContext = createContext(null);
+const STORAGE_KEY = "theme";
+function computeIsDark(pref) {
+  if (pref === "dark") return true;
+  if (pref === "light") return false;
+  return typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function applyThemeToDocument(pref) {
+  if (typeof document === "undefined") return;
+  const doc = document.documentElement;
+  doc.dataset.theme = pref;
+  const isDark = computeIsDark(pref);
+  doc.classList.toggle("dark", isDark);
+  doc.style.colorScheme = isDark ? "dark" : "light";
+}
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = STORAGE_KEY
+}) {
+  const [theme, setThemeState] = useState(() => {
+    var _a;
+    if (typeof window === "undefined") return defaultTheme;
+    const stored = (_a = window.localStorage.getItem(storageKey)) != null ? _a : null;
+    return stored != null ? stored : defaultTheme;
+  });
+  const [isDark, setIsDark] = useState(() => computeIsDark(theme));
+  useEffect(() => {
+    applyThemeToDocument(theme);
+    setIsDark(computeIsDark(theme));
+    try {
+      window.localStorage.setItem(storageKey, theme);
+    } catch {
+    }
+  }, [theme, storageKey]);
+  useEffect(() => {
+    var _a;
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => {
+      if (theme === "system") {
+        applyThemeToDocument("system");
+        setIsDark(computeIsDark("system"));
+      }
+    };
+    (_a = mql.addEventListener) == null ? void 0 : _a.call(mql, "change", handler);
+    return () => {
+      var _a2;
+      return (_a2 = mql.removeEventListener) == null ? void 0 : _a2.call(mql, "change", handler);
+    };
+  }, [theme]);
+  const setTheme = useCallback((next) => {
+    setThemeState(next);
+  }, []);
+  const toggle = useCallback(() => {
+    setThemeState((prev) => computeIsDark(prev) ? "light" : "dark");
+  }, []);
+  const value = useMemo(() => ({ theme, isDark, setTheme, toggle }), [theme, isDark, setTheme, toggle]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  var _a, _b;
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    const doc = typeof document !== "undefined" ? document.documentElement : null;
+    const attr = (_b = (_a = doc == null ? void 0 : doc.dataset) == null ? void 0 : _a.theme) != null ? _b : "system";
+    return {
+      theme: attr,
+      isDark: doc ? doc.classList.contains("dark") : false,
+      setTheme: (t) => applyThemeToDocument(t),
+      toggle: () => applyThemeToDocument(attr === "dark" ? "light" : "dark")
+    };
+  }
+  return ctx;
+}
+var ThemeProvider_default = ThemeProvider;
+export {
+  ThemeProvider,
+  ThemeProvider_default as default,
+  useTheme
+};

package/dist/theme/ThemeScript.d.mts

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

package/dist/theme/ThemeScript.d.ts

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

package/dist/theme/ThemeScript.js

@@ -0,0 +1,34 @@
+"use strict";
+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 ThemeScript_exports = {};
+__export(ThemeScript_exports, {
+  ThemeScript: () => ThemeScript,
+  default: () => ThemeScript_default
+});
+module.exports = __toCommonJS(ThemeScript_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+const INIT_SNIPPET = `!function(){try{var d=document.documentElement;var pref=localStorage.getItem('theme')||'system';d.dataset.theme=pref;var m=window.matchMedia('(prefers-color-scheme: dark)');var isDark=(pref==='dark')||(pref==='system'&&m.matches);d.classList.toggle('dark',isDark);d.style.colorScheme=isDark?'dark':'light'}catch(e){}}();`;
+function ThemeScript({ id = "ui-lib-theme-init" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { id, dangerouslySetInnerHTML: { __html: INIT_SNIPPET } });
+}
+var ThemeScript_default = ThemeScript;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeScript
+});

package/dist/theme/ThemeScript.mjs

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+const INIT_SNIPPET = `!function(){try{var d=document.documentElement;var pref=localStorage.getItem('theme')||'system';d.dataset.theme=pref;var m=window.matchMedia('(prefers-color-scheme: dark)');var isDark=(pref==='dark')||(pref==='system'&&m.matches);d.classList.toggle('dark',isDark);d.style.colorScheme=isDark?'dark':'light'}catch(e){}}();`;
+function ThemeScript({ id = "ui-lib-theme-init" }) {
+  return /* @__PURE__ */ jsx("script", { id, dangerouslySetInnerHTML: { __html: INIT_SNIPPET } });
+}
+var ThemeScript_default = ThemeScript;
+export {
+  ThemeScript,
+  ThemeScript_default as default
+};

package/dist/theme/ThemeToggle.d.mts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ThemeToggleProps = {
+    cycle?: ("light" | "dark" | "system")[];
+    className?: string;
+    labels?: Partial<Record<"light" | "dark" | "system", string>>;
+};
+declare function ThemeToggle({ cycle, className, labels }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
+
+export { type ThemeToggleProps, ThemeToggle as default };

package/dist/theme/ThemeToggle.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ThemeToggleProps = {
+    cycle?: ("light" | "dark" | "system")[];
+    className?: string;
+    labels?: Partial<Record<"light" | "dark" | "system", string>>;
+};
+declare function ThemeToggle({ cycle, className, labels }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
+
+export { type ThemeToggleProps, ThemeToggle as default };

package/dist/theme/ThemeToggle.js

@@ -0,0 +1,56 @@
+"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 ThemeToggle_exports = {};
+__export(ThemeToggle_exports, {
+  default: () => ThemeToggle
+});
+module.exports = __toCommonJS(ThemeToggle_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ThemeProvider = require("./ThemeProvider");
+const defaultCycle = ["light", "dark", "system"];
+function ThemeToggle({ cycle = defaultCycle, className, labels }) {
+  var _a;
+  const { theme, setTheme, isDark } = (0, import_ThemeProvider.useTheme)();
+  const handleClick = () => {
+    const idx = cycle.indexOf(theme);
+    const next = cycle[(idx + 1) % cycle.length];
+    setTheme(next);
+  };
+  const text = (_a = labels == null ? void 0 : labels[theme]) != null ? _a : theme === "system" ? "Sistema" : theme === "dark" ? "Oscuro" : "Claro";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      "aria-label": `Cambiar tema (actual: ${text})`,
+      title: `Cambiar tema (actual: ${text})`,
+      className: [
+        "inline-flex items-center gap-2 rounded-xl px-3 py-1.5 text-sm font-medium",
+        "border border-slate-200 bg-white shadow-sm transition hover:bg-slate-50",
+        "dark:border-white/10 dark:bg-white/10 dark:hover:bg-white/15",
+        className != null ? className : ""
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-4 w-4 rounded-full " + (isDark ? "bg-slate-100" : "bg-slate-900") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-slate-700 dark:text-slate-200", children: text })
+      ]
+    }
+  );
+}

package/dist/theme/ThemeToggle.mjs

@@ -0,0 +1,36 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "./ThemeProvider";
+const defaultCycle = ["light", "dark", "system"];
+function ThemeToggle({ cycle = defaultCycle, className, labels }) {
+  var _a;
+  const { theme, setTheme, isDark } = useTheme();
+  const handleClick = () => {
+    const idx = cycle.indexOf(theme);
+    const next = cycle[(idx + 1) % cycle.length];
+    setTheme(next);
+  };
+  const text = (_a = labels == null ? void 0 : labels[theme]) != null ? _a : theme === "system" ? "Sistema" : theme === "dark" ? "Oscuro" : "Claro";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      "aria-label": `Cambiar tema (actual: ${text})`,
+      title: `Cambiar tema (actual: ${text})`,
+      className: [
+        "inline-flex items-center gap-2 rounded-xl px-3 py-1.5 text-sm font-medium",
+        "border border-slate-200 bg-white shadow-sm transition hover:bg-slate-50",
+        "dark:border-white/10 dark:bg-white/10 dark:hover:bg-white/15",
+        className != null ? className : ""
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "h-4 w-4 rounded-full " + (isDark ? "bg-slate-100" : "bg-slate-900") }),
+        /* @__PURE__ */ jsx("span", { className: "text-slate-700 dark:text-slate-200", children: text })
+      ]
+    }
+  );
+}
+export {
+  ThemeToggle as default
+};

package/dist/theme.css

@@ -0,0 +1,126 @@
+@source "./dist/**/*.{js,mjs,jsx,ts,tsx}";
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root {
+  color-scheme: light;
+  --background: #f6f8fb;
+  --surface: #eef2f7;
+  --card: #ffffff;
+  --foreground: #0f172a;
+  --muted: #6b7280;
+  --border: #e5e7eb;
+  --primary: #111827;
+  --primary-foreground: #ffffff;
+  --ring: #60a5fa;
+  --fx-surface: #ffffff;
+  --fg: var(--foreground);
+  --card-bg: var(--card);
+  --card-border: var(--border);
+  --grid: rgba(148, 163, 184, .18);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-surface: var(--surface);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-border: var(--border);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-ring: var(--ring);
+}
+
+:root[data-theme="dark"],
+html.dark {
+  color-scheme: dark;
+  --background: #0b0f14;
+  --surface: #0f131a;
+  --card: #151a22;
+  --foreground: #e6edf3;
+  --muted: #9aa4b2;
+  --border: #242b35;
+  --primary: #0f172a;
+  --primary-foreground: #ffffff;
+  --ring: #60a5fa;
+  --fx-surface: #0f131a;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root[data-theme="system"] {
+    color-scheme: dark;
+    --background: #0b0f14;
+    --surface: #0f131a;
+    --card: #151a22;
+    --foreground: #e6edf3;
+    --muted: #9aa4b2;
+    --border: #242b35;
+    --primary: #0f172a;
+    --primary-foreground: #ffffff;
+    --ring: #60a5fa;
+    --fx-surface: #0f131a;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+}
+
+* {
+  outline-color: var(--ring);
+}
+
+::selection {
+  background: color-mix(in oklab, var(--ring) 30%, transparent);
+}
+
+@media print {
+  .no-print {
+    display: none !important;
+  }
+
+  html,
+  body {
+    background: var(--background);
+  }
+}
+
+.print-snapshot *,
+.print-snapshot *::before,
+.print-snapshot *::after {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.print-snapshot .sticky {
+  position: static !important;
+  top: auto !important;
+}
+
+.print-snapshot .shadow,
+.print-snapshot .shadow-sm,
+.print-snapshot .shadow-md,
+.print-snapshot .shadow-lg {
+  box-shadow: none !important;
+}
+
+.print-snapshot .overflow-auto,
+.print-snapshot .overflow-x-auto,
+.print-snapshot .overflow-y-auto {
+  overflow: visible !important;
+}
+
+.print-snapshot .pointer-events-none {
+  pointer-events: auto;
+}
+
+.print-snapshot .group:hover .group-hover\:opacity-100 {
+  opacity: 1 !important;
+}
+
+.print-snapshot .transition-opacity,
+.print-snapshot .transition-colors,
+.print-snapshot .transition {
+  transition: none !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framepexls-ui-lib",
-  "version": "0.2.15",
+  "version": "0.3.1",
   "private": false,
   "license": "MIT",
   "description": "Componentes UI de Framepexls para React/Next.",
@@ -12,7 +12,8 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
-    }
+    },
+    "./theme.css": "./dist/theme.css"
   },
   "files": [
     "dist",
@@ -48,7 +49,7 @@
     "typescript": "^5.9.3"
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && node scripts/copy-css.mjs",
     "dev": "tsup --watch",
     "prepare": "npm run build"
   },