framepexls-ui-lib 0.2.5 → 0.2.6

package/dist/Checkbox.d.mts

@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
     className?: string;
     inputClassName?: string;
 };
-declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     label?: React__default.ReactNode;
     description?: React__default.ReactNode;
     error?: boolean;

package/dist/Checkbox.d.ts

@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
     className?: string;
     inputClassName?: string;
 };
-declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     label?: React__default.ReactNode;
     description?: React__default.ReactNode;
     error?: boolean;

package/dist/ColorPicker.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ColorPickerProps = {
+    value?: string;
+    onChange?: (hex: string) => void;
+    presets?: string[];
+    className?: string;
+};
+declare function ColorPicker({ value, onChange, presets, className }: ColorPickerProps): react_jsx_runtime.JSX.Element;
+
+export { type ColorPickerProps, ColorPicker as default };

package/dist/ColorPicker.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ColorPickerProps = {
+    value?: string;
+    onChange?: (hex: string) => void;
+    presets?: string[];
+    className?: string;
+};
+declare function ColorPicker({ value, onChange, presets, className }: ColorPickerProps): react_jsx_runtime.JSX.Element;
+
+export { type ColorPickerProps, ColorPicker as default };

package/dist/ColorPicker.js

@@ -0,0 +1,134 @@
+"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 ColorPicker_exports = {};
+__export(ColorPicker_exports, {
+  default: () => ColorPicker
+});
+module.exports = __toCommonJS(ColorPicker_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_Input = __toESM(require("./Input"));
+var import_Button = __toESM(require("./Button"));
+function clamp(v, min = 0, max = 255) {
+  return Math.max(min, Math.min(max, v));
+}
+function toHex(n) {
+  const x = clamp(Math.round(n));
+  const s = x.toString(16).padStart(2, "0");
+  return s.toUpperCase();
+}
+function rgbToHex(r, g, b) {
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function hexToRgb(hex) {
+  let h = (hex || "").trim();
+  if (!h) return null;
+  if (h.startsWith("#")) h = h.slice(1);
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  if (h.length !== 6) return null;
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+  if ([r, g, b].some((v) => Number.isNaN(v))) return null;
+  return { r, g, b };
+}
+function parseColor(input) {
+  const s = (input != null ? input : "").trim();
+  if (!s) return null;
+  const m = s.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
+  if (m) {
+    const r = clamp(parseInt(m[1], 10));
+    const g = clamp(parseInt(m[2], 10));
+    const b = clamp(parseInt(m[3], 10));
+    return { hex: rgbToHex(r, g, b), r, g, b };
+  }
+  const rgb = hexToRgb(s);
+  if (rgb) return { hex: rgbToHex(rgb.r, rgb.g, rgb.b), ...rgb };
+  return null;
+}
+const DEFAULTS = [
+  "#0F172A",
+  "#111827",
+  "#1F2937",
+  "#334155",
+  "#475569",
+  "#64748B",
+  "#0EA5E9",
+  "#3B82F6",
+  "#2563EB",
+  "#1D4ED8",
+  "#7C3AED",
+  "#22C55E",
+  "#EF4444",
+  "#F97316",
+  "#F59E0B",
+  "#EAB308",
+  "#14B8A6",
+  "#EC4899"
+];
+function ColorPicker({ value, onChange, presets = DEFAULTS, className }) {
+  const parsed = parseColor(value || "#0F172A");
+  const [hex, setHex] = import_react.default.useState(parsed.hex);
+  const [rgb, setRgb] = import_react.default.useState(`${parsed.r}, ${parsed.g}, ${parsed.b}`);
+  import_react.default.useEffect(() => {
+    const p = parseColor(value || "");
+    if (p) {
+      setHex(p.hex);
+      setRgb(`${p.r}, ${p.g}, ${p.b}`);
+    }
+  }, [value]);
+  const commitHex = (s) => {
+    const p = parseColor(s);
+    if (!p) return;
+    setHex(p.hex);
+    setRgb(`${p.r}, ${p.g}, ${p.b}`);
+    onChange == null ? void 0 : onChange(p.hex);
+  };
+  const commitRgb = (s) => {
+    const m = s.match(/^(\s*\d+\s*),(\s*\d+\s*),(\s*\d+\s*)$/);
+    if (!m) return;
+    const r = parseInt(m[1], 10), g = parseInt(m[2], 10), b = parseInt(m[3], 10);
+    const hex2 = rgbToHex(r, g, b);
+    setHex(hex2);
+    setRgb(`${clamp(r)}, ${clamp(g)}, ${clamp(b)}`);
+    onChange == null ? void 0 : onChange(hex2);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: ["w-full", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-9 w-9 shrink-0 rounded-xl border border-slate-300 shadow-sm dark:border-white/10", style: { backgroundColor: hex } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid flex-1 grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Input.default, { placeholder: "#RRGGBB", value: hex, onChange: (e) => setHex(e.target.value), onBlur: () => commitHex(hex) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Input.default, { placeholder: "r, g, b", value: rgb, onChange: (e) => setRgb(e.target.value), onBlur: () => commitRgb(rgb) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { size: "sm", variant: "secondary", onClick: () => commitHex(hex), children: "Aplicar" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-2 grid grid-cols-9 gap-1", children: presets.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", title: c, className: "h-6 w-6 rounded-lg border border-slate-300 shadow-sm transition hover:scale-105 active:scale-95 dark:border-white/10", style: { backgroundColor: c }, onClick: () => onChange == null ? void 0 : onChange(c) }, c)) })
+  ] });
+}

package/dist/ColorPicker.mjs

@@ -0,0 +1,104 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import Input from "./Input";
+import Button from "./Button";
+function clamp(v, min = 0, max = 255) {
+  return Math.max(min, Math.min(max, v));
+}
+function toHex(n) {
+  const x = clamp(Math.round(n));
+  const s = x.toString(16).padStart(2, "0");
+  return s.toUpperCase();
+}
+function rgbToHex(r, g, b) {
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function hexToRgb(hex) {
+  let h = (hex || "").trim();
+  if (!h) return null;
+  if (h.startsWith("#")) h = h.slice(1);
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  if (h.length !== 6) return null;
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+  if ([r, g, b].some((v) => Number.isNaN(v))) return null;
+  return { r, g, b };
+}
+function parseColor(input) {
+  const s = (input != null ? input : "").trim();
+  if (!s) return null;
+  const m = s.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
+  if (m) {
+    const r = clamp(parseInt(m[1], 10));
+    const g = clamp(parseInt(m[2], 10));
+    const b = clamp(parseInt(m[3], 10));
+    return { hex: rgbToHex(r, g, b), r, g, b };
+  }
+  const rgb = hexToRgb(s);
+  if (rgb) return { hex: rgbToHex(rgb.r, rgb.g, rgb.b), ...rgb };
+  return null;
+}
+const DEFAULTS = [
+  "#0F172A",
+  "#111827",
+  "#1F2937",
+  "#334155",
+  "#475569",
+  "#64748B",
+  "#0EA5E9",
+  "#3B82F6",
+  "#2563EB",
+  "#1D4ED8",
+  "#7C3AED",
+  "#22C55E",
+  "#EF4444",
+  "#F97316",
+  "#F59E0B",
+  "#EAB308",
+  "#14B8A6",
+  "#EC4899"
+];
+function ColorPicker({ value, onChange, presets = DEFAULTS, className }) {
+  const parsed = parseColor(value || "#0F172A");
+  const [hex, setHex] = React.useState(parsed.hex);
+  const [rgb, setRgb] = React.useState(`${parsed.r}, ${parsed.g}, ${parsed.b}`);
+  React.useEffect(() => {
+    const p = parseColor(value || "");
+    if (p) {
+      setHex(p.hex);
+      setRgb(`${p.r}, ${p.g}, ${p.b}`);
+    }
+  }, [value]);
+  const commitHex = (s) => {
+    const p = parseColor(s);
+    if (!p) return;
+    setHex(p.hex);
+    setRgb(`${p.r}, ${p.g}, ${p.b}`);
+    onChange == null ? void 0 : onChange(p.hex);
+  };
+  const commitRgb = (s) => {
+    const m = s.match(/^(\s*\d+\s*),(\s*\d+\s*),(\s*\d+\s*)$/);
+    if (!m) return;
+    const r = parseInt(m[1], 10), g = parseInt(m[2], 10), b = parseInt(m[3], 10);
+    const hex2 = rgbToHex(r, g, b);
+    setHex(hex2);
+    setRgb(`${clamp(r)}, ${clamp(g)}, ${clamp(b)}`);
+    onChange == null ? void 0 : onChange(hex2);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: ["w-full", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-9 w-9 shrink-0 rounded-xl border border-slate-300 shadow-sm dark:border-white/10", style: { backgroundColor: hex } }),
+      /* @__PURE__ */ jsxs("div", { className: "grid flex-1 grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ jsx(Input, { placeholder: "#RRGGBB", value: hex, onChange: (e) => setHex(e.target.value), onBlur: () => commitHex(hex) }),
+        /* @__PURE__ */ jsx(Input, { placeholder: "r, g, b", value: rgb, onChange: (e) => setRgb(e.target.value), onBlur: () => commitRgb(rgb) })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => commitHex(hex), children: "Aplicar" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-2 grid grid-cols-9 gap-1", children: presets.map((c) => /* @__PURE__ */ jsx("button", { type: "button", title: c, className: "h-6 w-6 rounded-lg border border-slate-300 shadow-sm transition hover:scale-105 active:scale-95 dark:border-white/10", style: { backgroundColor: c }, onClick: () => onChange == null ? void 0 : onChange(c) }, c)) })
+  ] });
+}
+export {
+  ColorPicker as default
+};

package/dist/index.d.mts

@@ -47,5 +47,6 @@ export { default as TimePanel } from './TimePanel.mjs';
 export { TimeRange, default as TimeRangeField, TimeRangeFieldProps } from './TimeRangeField.mjs';
 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';
 import 'react';
 import 'react/jsx-runtime';

package/dist/index.d.ts

@@ -47,5 +47,6 @@ export { default as TimePanel } from './TimePanel.js';
 export { TimeRange, default as TimeRangeField, TimeRangeFieldProps } from './TimeRangeField.js';
 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';
 import 'react';
 import 'react/jsx-runtime';

package/dist/index.js

@@ -42,6 +42,7 @@ __export(index_exports, {
   ChartCard: () => import_ChartCard.default,
   Checkbox: () => import_Checkbox.default,
   CheckboxPillsGroup: () => import_CheckboxPillsGroup.default,
+  ColorPicker: () => import_ColorPicker.default,
   ColumnSelector: () => import_ColumnSelector.default,
   ComboSelect: () => import_ComboSelect.default,
   CtrHorizontalBar: () => import_AnalyticsCharts.CtrHorizontalBar,
@@ -142,6 +143,7 @@ var import_TimeRangeField = __toESM(require("./TimeRangeField"));
 var import_Steps = __toESM(require("./Steps"));
 var import_Steps2 = require("./Steps");
 __reExport(index_exports, require("./iconos"), module.exports);
+var import_ColorPicker = __toESM(require("./ColorPicker"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionIconButton,
@@ -157,6 +159,7 @@ __reExport(index_exports, require("./iconos"), module.exports);
   ChartCard,
   Checkbox,
   CheckboxPillsGroup,
+  ColorPicker,
   ColumnSelector,
   ComboSelect,
   CtrHorizontalBar,

package/dist/index.mjs

@@ -52,6 +52,7 @@ import { default as default45 } from "./TimeRangeField";
 import { default as default46 } from "./Steps";
 import { StepsNav } from "./Steps";
 export * from "./iconos";
+import { default as default47 } from "./ColorPicker";
 export {
   default3 as ActionIconButton,
   default31 as AppTopbar,
@@ -66,6 +67,7 @@ export {
   default17 as ChartCard,
   default6 as Checkbox,
   default7 as CheckboxPillsGroup,
+  default47 as ColorPicker,
   default11 as ColumnSelector,
   default10 as ComboSelect,
   CtrHorizontalBar,

package/package.json

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