framepexls-ui-lib 0.2.6 → 0.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/Checkbox.d.mts +1 -1
  2. package/dist/Checkbox.d.ts +1 -1
  3. package/dist/ColorPicker.d.mts +2 -1
  4. package/dist/ColorPicker.d.ts +2 -1
  5. package/dist/ColorPicker.js +37 -14
  6. package/dist/ColorPicker.mjs +37 -14
  7. package/package.json +1 -1
package/dist/Checkbox.d.mts CHANGED
@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
11
11
  className?: string;
12
12
  inputClassName?: string;
13
13
  };
14
- declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
14
+ declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
15
15
  label?: React__default.ReactNode;
16
16
  description?: React__default.ReactNode;
17
17
  error?: boolean;
package/dist/Checkbox.d.ts CHANGED
@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
11
11
  className?: string;
12
12
  inputClassName?: string;
13
13
  };
14
- declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
14
+ declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
15
15
  label?: React__default.ReactNode;
16
16
  description?: React__default.ReactNode;
17
17
  error?: boolean;
package/dist/ColorPicker.d.mts CHANGED
@@ -5,7 +5,8 @@ type ColorPickerProps = {
5
5
  onChange?: (hex: string) => void;
6
6
  presets?: string[];
7
7
  className?: string;
8
+ label?: string;
8
9
  };
9
- declare function ColorPicker({ value, onChange, presets, className }: ColorPickerProps): react_jsx_runtime.JSX.Element;
10
+ declare function ColorPicker({ value, onChange, presets, className, label }: ColorPickerProps): react_jsx_runtime.JSX.Element;
10
11
 
11
12
  export { type ColorPickerProps, ColorPicker as default };
package/dist/ColorPicker.d.ts CHANGED
@@ -5,7 +5,8 @@ type ColorPickerProps = {
5
5
  onChange?: (hex: string) => void;
6
6
  presets?: string[];
7
7
  className?: string;
8
+ label?: string;
8
9
  };
9
- declare function ColorPicker({ value, onChange, presets, className }: ColorPickerProps): react_jsx_runtime.JSX.Element;
10
+ declare function ColorPicker({ value, onChange, presets, className, label }: ColorPickerProps): react_jsx_runtime.JSX.Element;
10
11
 
11
12
  export { type ColorPickerProps, ColorPicker as default };
package/dist/ColorPicker.js CHANGED
@@ -36,6 +36,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
36
36
  var import_react = __toESM(require("react"));
37
37
  var import_Input = __toESM(require("./Input"));
38
38
  var import_Button = __toESM(require("./Button"));
39
+ var import_Dialog = __toESM(require("./Dialog"));
39
40
  function clamp(v, min = 0, max = 255) {
40
41
  return Math.max(min, Math.min(max, v));
41
42
  }
@@ -93,10 +94,11 @@ const DEFAULTS = [
93
94
  "#14B8A6",
94
95
  "#EC4899"
95
96
  ];
96
- function ColorPicker({ value, onChange, presets = DEFAULTS, className }) {
97
+ function ColorPicker({ value, onChange, presets = DEFAULTS, className, label }) {
97
98
  const parsed = parseColor(value || "#0F172A");
98
99
  const [hex, setHex] = import_react.default.useState(parsed.hex);
99
100
  const [rgb, setRgb] = import_react.default.useState(`${parsed.r}, ${parsed.g}, ${parsed.b}`);
101
+ const [open, setOpen] = import_react.default.useState(false);
100
102
  import_react.default.useEffect(() => {
101
103
  const p = parseColor(value || "");
102
104
  if (p) {
@@ -109,26 +111,47 @@ function ColorPicker({ value, onChange, presets = DEFAULTS, className }) {
109
111
  if (!p) return;
110
112
  setHex(p.hex);
111
113
  setRgb(`${p.r}, ${p.g}, ${p.b}`);
112
- onChange == null ? void 0 : onChange(p.hex);
113
114
  };
114
115
  const commitRgb = (s) => {
115
116
  const m = s.match(/^(\s*\d+\s*),(\s*\d+\s*),(\s*\d+\s*)$/);
116
117
  if (!m) return;
117
118
  const r = parseInt(m[1], 10), g = parseInt(m[2], 10), b = parseInt(m[3], 10);
118
- const hex2 = rgbToHex(r, g, b);
119
- setHex(hex2);
119
+ const h = rgbToHex(r, g, b);
120
+ setHex(h);
120
121
  setRgb(`${clamp(r)}, ${clamp(g)}, ${clamp(b)}`);
121
- onChange == null ? void 0 : onChange(hex2);
122
122
  };
123
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: ["w-full", className].filter(Boolean).join(" "), children: [
124
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
125
- /* @__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 } }),
126
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid flex-1 grid-cols-2 gap-2", children: [
127
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Input.default, { placeholder: "#RRGGBB", value: hex, onChange: (e) => setHex(e.target.value), onBlur: () => commitHex(hex) }),
128
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Input.default, { placeholder: "r, g, b", value: rgb, onChange: (e) => setRgb(e.target.value), onBlur: () => commitRgb(rgb) })
123
+ const apply = () => {
124
+ const p = parseColor(hex);
125
+ if (p) onChange == null ? void 0 : onChange(p.hex);
126
+ setOpen(false);
127
+ };
128
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, children: [
129
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
130
+ "button",
131
+ {
132
+ type: "button",
133
+ onClick: () => setOpen(true),
134
+ title: hex,
135
+ className: "h-9 w-9 rounded-xl border border-slate-300 shadow-sm outline-none ring-0 transition hover:scale-105 active:scale-95 dark:border-white/10",
136
+ style: { backgroundColor: hex }
137
+ }
138
+ ),
139
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dialog.default, { open, onClose: () => setOpen(false), size: "md", children: [
140
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Header, { title: label != null ? label : "Seleccionar color", onClose: () => setOpen(false) }),
141
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dialog.default.Body, { children: [
142
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
143
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-12 w-12 shrink-0 rounded-2xl border border-slate-300 shadow-sm dark:border-white/10", style: { backgroundColor: hex } }),
144
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid flex-1 grid-cols-2 gap-2", children: [
145
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Input.default, { placeholder: "#RRGGBB", value: hex, onChange: (e) => setHex(e.target.value), onBlur: () => commitHex(hex) }),
146
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Input.default, { placeholder: "r, g, b", value: rgb, onChange: (e) => setRgb(e.target.value), onBlur: () => commitRgb(rgb) })
147
+ ] })
148
+ ] }),
149
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3 grid grid-cols-9 gap-1", children: presets.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", title: c, className: "h-7 w-7 rounded-lg border border-slate-300 shadow-sm transition hover:scale-105 active:scale-95 dark:border-white/10", style: { backgroundColor: c }, onClick: () => setHex(c) }, c)) })
129
150
  ] }),
130
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { size: "sm", variant: "secondary", onClick: () => commitHex(hex), children: "Aplicar" })
131
- ] }),
132
- /* @__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)) })
151
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dialog.default.Footer, { align: "end", children: [
152
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { variant: "secondary", onClick: () => setOpen(false), children: "Cancelar" }),
153
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { color: "blue", onClick: apply, children: "Aplicar" })
154
+ ] })
155
+ ] })
133
156
  ] });
134
157
  }
package/dist/ColorPicker.mjs CHANGED
@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import React from "react";
4
4
  import Input from "./Input";
5
5
  import Button from "./Button";
6
+ import Dialog from "./Dialog";
6
7
  function clamp(v, min = 0, max = 255) {
7
8
  return Math.max(min, Math.min(max, v));
8
9
  }
@@ -60,10 +61,11 @@ const DEFAULTS = [
60
61
  "#14B8A6",
61
62
  "#EC4899"
62
63
  ];
63
- function ColorPicker({ value, onChange, presets = DEFAULTS, className }) {
64
+ function ColorPicker({ value, onChange, presets = DEFAULTS, className, label }) {
64
65
  const parsed = parseColor(value || "#0F172A");
65
66
  const [hex, setHex] = React.useState(parsed.hex);
66
67
  const [rgb, setRgb] = React.useState(`${parsed.r}, ${parsed.g}, ${parsed.b}`);
68
+ const [open, setOpen] = React.useState(false);
67
69
  React.useEffect(() => {
68
70
  const p = parseColor(value || "");
69
71
  if (p) {
@@ -76,27 +78,48 @@ function ColorPicker({ value, onChange, presets = DEFAULTS, className }) {
76
78
  if (!p) return;
77
79
  setHex(p.hex);
78
80
  setRgb(`${p.r}, ${p.g}, ${p.b}`);
79
- onChange == null ? void 0 : onChange(p.hex);
80
81
  };
81
82
  const commitRgb = (s) => {
82
83
  const m = s.match(/^(\s*\d+\s*),(\s*\d+\s*),(\s*\d+\s*)$/);
83
84
  if (!m) return;
84
85
  const r = parseInt(m[1], 10), g = parseInt(m[2], 10), b = parseInt(m[3], 10);
85
- const hex2 = rgbToHex(r, g, b);
86
- setHex(hex2);
86
+ const h = rgbToHex(r, g, b);
87
+ setHex(h);
87
88
  setRgb(`${clamp(r)}, ${clamp(g)}, ${clamp(b)}`);
88
- onChange == null ? void 0 : onChange(hex2);
89
89
  };
90
- return /* @__PURE__ */ jsxs("div", { className: ["w-full", className].filter(Boolean).join(" "), children: [
91
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
92
- /* @__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 } }),
93
- /* @__PURE__ */ jsxs("div", { className: "grid flex-1 grid-cols-2 gap-2", children: [
94
- /* @__PURE__ */ jsx(Input, { placeholder: "#RRGGBB", value: hex, onChange: (e) => setHex(e.target.value), onBlur: () => commitHex(hex) }),
95
- /* @__PURE__ */ jsx(Input, { placeholder: "r, g, b", value: rgb, onChange: (e) => setRgb(e.target.value), onBlur: () => commitRgb(rgb) })
90
+ const apply = () => {
91
+ const p = parseColor(hex);
92
+ if (p) onChange == null ? void 0 : onChange(p.hex);
93
+ setOpen(false);
94
+ };
95
+ return /* @__PURE__ */ jsxs("div", { className, children: [
96
+ /* @__PURE__ */ jsx(
97
+ "button",
98
+ {
99
+ type: "button",
100
+ onClick: () => setOpen(true),
101
+ title: hex,
102
+ className: "h-9 w-9 rounded-xl border border-slate-300 shadow-sm outline-none ring-0 transition hover:scale-105 active:scale-95 dark:border-white/10",
103
+ style: { backgroundColor: hex }
104
+ }
105
+ ),
106
+ /* @__PURE__ */ jsxs(Dialog, { open, onClose: () => setOpen(false), size: "md", children: [
107
+ /* @__PURE__ */ jsx(Dialog.Header, { title: label != null ? label : "Seleccionar color", onClose: () => setOpen(false) }),
108
+ /* @__PURE__ */ jsxs(Dialog.Body, { children: [
109
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
110
+ /* @__PURE__ */ jsx("div", { className: "h-12 w-12 shrink-0 rounded-2xl border border-slate-300 shadow-sm dark:border-white/10", style: { backgroundColor: hex } }),
111
+ /* @__PURE__ */ jsxs("div", { className: "grid flex-1 grid-cols-2 gap-2", children: [
112
+ /* @__PURE__ */ jsx(Input, { placeholder: "#RRGGBB", value: hex, onChange: (e) => setHex(e.target.value), onBlur: () => commitHex(hex) }),
113
+ /* @__PURE__ */ jsx(Input, { placeholder: "r, g, b", value: rgb, onChange: (e) => setRgb(e.target.value), onBlur: () => commitRgb(rgb) })
114
+ ] })
115
+ ] }),
116
+ /* @__PURE__ */ jsx("div", { className: "mt-3 grid grid-cols-9 gap-1", children: presets.map((c) => /* @__PURE__ */ jsx("button", { type: "button", title: c, className: "h-7 w-7 rounded-lg border border-slate-300 shadow-sm transition hover:scale-105 active:scale-95 dark:border-white/10", style: { backgroundColor: c }, onClick: () => setHex(c) }, c)) })
96
117
  ] }),
97
- /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => commitHex(hex), children: "Aplicar" })
98
- ] }),
99
- /* @__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)) })
118
+ /* @__PURE__ */ jsxs(Dialog.Footer, { align: "end", children: [
119
+ /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setOpen(false), children: "Cancelar" }),
120
+ /* @__PURE__ */ jsx(Button, { color: "blue", onClick: apply, children: "Aplicar" })
121
+ ] })
122
+ ] })
100
123
  ] });
101
124
  }
102
125
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "framepexls-ui-lib",
3
- "version": "0.2.6",
3
+ "version": "0.2.8",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Componentes UI de Framepexls para React/Next.",