framepexls-ui-lib 0.2.14 → 0.3.0

package/dist/Dropdown.js

@@ -146,7 +146,7 @@ function Trigger({
         unstyled: true,
         ref: triggerRef,
         "aria-haspopup": "menu",
-        "aria-controls": menuId,
+        "aria-controls": open ? menuId : void 0,
         "aria-expanded": open,
         onClick,
         onKeyDown,

package/dist/Dropdown.mjs

@@ -116,7 +116,7 @@ function Trigger({
         unstyled: true,
         ref: triggerRef,
         "aria-haspopup": "menu",
-        "aria-controls": menuId,
+        "aria-controls": open ? menuId : void 0,
         "aria-expanded": open,
         onClick,
         onKeyDown,

package/dist/Select.js

@@ -175,7 +175,7 @@ function ModernSelect({
           disabled,
           "aria-haspopup": "listbox",
           "aria-expanded": open,
-          "aria-controls": `${selectId}-listbox`,
+          "aria-controls": open ? `${selectId}-listbox` : void 0,
           "aria-describedby": hintId != null ? hintId : hasError ? errorId : void 0,
           onClick: () => !disabled && setOpen((o) => !o),
           onKeyDown: onKeyBtn,

package/dist/Select.mjs

@@ -142,7 +142,7 @@ function ModernSelect({
           disabled,
           "aria-haspopup": "listbox",
           "aria-expanded": open,
-          "aria-controls": `${selectId}-listbox`,
+          "aria-controls": open ? `${selectId}-listbox` : void 0,
           "aria-describedby": hintId != null ? hintId : hasError ? errorId : void 0,
           onClick: () => !disabled && setOpen((o) => !o),
           onKeyDown: onKeyBtn,

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.14",
+  "version": "0.3.0",
   "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"
   },