framepexls-ui-lib 0.3.2 → 0.3.4

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/DateTimeField.js +7 -4
  4. package/dist/DateTimeField.mjs +7 -4
  5. package/dist/TimeRangeField.js +7 -4
  6. package/dist/TimeRangeField.mjs +7 -4
  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/DateTimeField.js CHANGED
@@ -188,12 +188,15 @@ function DateTimeField({
188
188
  }, [open]);
189
189
  const stylePop = (() => {
190
190
  if (!anchorRect) return { visibility: "hidden" };
191
- const W = 360, GAP = 8, MARGIN = 8, H = 420;
192
- let left = anchorRect.right - W;
191
+ const GAP = 8, MARGIN = 8;
192
+ const W = Math.min(420, Math.max(320, window.innerWidth - MARGIN * 2));
193
+ const H = Math.min(520, Math.max(320, Math.floor(window.innerHeight * 0.75)));
194
+ let left = anchorRect.left + (anchorRect.width - W) / 2;
193
195
  left = Math.max(MARGIN, Math.min(left, window.innerWidth - (W + MARGIN)));
194
196
  let top = anchorRect.bottom + GAP;
195
197
  if (top + H > window.innerHeight) top = Math.max(MARGIN, anchorRect.top - GAP - H);
196
- return { position: "fixed", top, left, zIndex: 1e5 };
198
+ const maxHeight = Math.min(H, window.innerHeight - top - MARGIN);
199
+ return { position: "fixed", top, left, zIndex: 1e5, width: W, maxHeight, overflowY: "auto" };
197
200
  })();
198
201
  const parsed = (0, import_react.useMemo)(() => value ? parseValueByType(value, type) : null, [value, type]);
199
202
  const [cursor, setCursor] = (0, import_react.useState)(() => parsed != null ? parsed : /* @__PURE__ */ new Date());
@@ -256,7 +259,7 @@ function DateTimeField({
256
259
  ref: popRef,
257
260
  style: { ...stylePop, willChange: "transform, opacity" },
258
261
  "data-dtf-pop": true,
259
- className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
262
+ className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
260
263
  children: [
261
264
  type !== "time" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
262
265
  import_CalendarPanel.default,
package/dist/DateTimeField.mjs CHANGED
@@ -155,12 +155,15 @@ function DateTimeField({
155
155
  }, [open]);
156
156
  const stylePop = (() => {
157
157
  if (!anchorRect) return { visibility: "hidden" };
158
- const W = 360, GAP = 8, MARGIN = 8, H = 420;
159
- let left = anchorRect.right - W;
158
+ const GAP = 8, MARGIN = 8;
159
+ const W = Math.min(420, Math.max(320, window.innerWidth - MARGIN * 2));
160
+ const H = Math.min(520, Math.max(320, Math.floor(window.innerHeight * 0.75)));
161
+ let left = anchorRect.left + (anchorRect.width - W) / 2;
160
162
  left = Math.max(MARGIN, Math.min(left, window.innerWidth - (W + MARGIN)));
161
163
  let top = anchorRect.bottom + GAP;
162
164
  if (top + H > window.innerHeight) top = Math.max(MARGIN, anchorRect.top - GAP - H);
163
- return { position: "fixed", top, left, zIndex: 1e5 };
165
+ const maxHeight = Math.min(H, window.innerHeight - top - MARGIN);
166
+ return { position: "fixed", top, left, zIndex: 1e5, width: W, maxHeight, overflowY: "auto" };
164
167
  })();
165
168
  const parsed = useMemo(() => value ? parseValueByType(value, type) : null, [value, type]);
166
169
  const [cursor, setCursor] = useState(() => parsed != null ? parsed : /* @__PURE__ */ new Date());
@@ -223,7 +226,7 @@ function DateTimeField({
223
226
  ref: popRef,
224
227
  style: { ...stylePop, willChange: "transform, opacity" },
225
228
  "data-dtf-pop": true,
226
- className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
229
+ className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
227
230
  children: [
228
231
  type !== "time" && /* @__PURE__ */ jsx(
229
232
  CalendarPanel,
package/dist/TimeRangeField.js CHANGED
@@ -128,12 +128,15 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
128
128
  }, [open]);
129
129
  const stylePop = (() => {
130
130
  if (!anchorRect) return { visibility: "hidden" };
131
- const W = 360, GAP = 8, MARGIN = 8, H = 180;
132
- let left = anchorRect.right - W;
131
+ const GAP = 8, MARGIN = 8;
132
+ const W = Math.min(420, Math.max(300, window.innerWidth - MARGIN * 2));
133
+ const H = Math.min(360, Math.max(200, Math.floor(window.innerHeight * 0.6)));
134
+ let left = anchorRect.left + (anchorRect.width - W) / 2;
133
135
  left = Math.max(MARGIN, Math.min(left, window.innerWidth - (W + MARGIN)));
134
136
  let top = anchorRect.bottom + GAP;
135
137
  if (top + H > window.innerHeight) top = Math.max(MARGIN, anchorRect.top - GAP - H);
136
- return { position: "fixed", top, left, zIndex: 1e5 };
138
+ const maxHeight = Math.min(H, window.innerHeight - top - MARGIN);
139
+ return { position: "fixed", top, left, zIndex: 1e5, width: W, maxHeight, overflowY: "auto" };
137
140
  })();
138
141
  const commit = (f, t) => {
139
142
  let f2 = f, t2 = t;
@@ -146,7 +149,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
146
149
  setTo(t2);
147
150
  onValueChange == null ? void 0 : onValueChange({ from: f2 ? fmtHHmm(f2.hh, f2.mm) : null, to: t2 ? fmtHHmm(t2.hh, t2.mm) : null });
148
151
  };
149
- const popover = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-trf-pop": true, style: stylePop, className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
152
+ const popover = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-trf-pop": true, style: stylePop, className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
150
153
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2 px-3 py-2 text-sm", children: [
151
154
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium", children: "Selecciona horario" }),
152
155
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
package/dist/TimeRangeField.mjs CHANGED
@@ -95,12 +95,15 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
95
95
  }, [open]);
96
96
  const stylePop = (() => {
97
97
  if (!anchorRect) return { visibility: "hidden" };
98
- const W = 360, GAP = 8, MARGIN = 8, H = 180;
99
- let left = anchorRect.right - W;
98
+ const GAP = 8, MARGIN = 8;
99
+ const W = Math.min(420, Math.max(300, window.innerWidth - MARGIN * 2));
100
+ const H = Math.min(360, Math.max(200, Math.floor(window.innerHeight * 0.6)));
101
+ let left = anchorRect.left + (anchorRect.width - W) / 2;
100
102
  left = Math.max(MARGIN, Math.min(left, window.innerWidth - (W + MARGIN)));
101
103
  let top = anchorRect.bottom + GAP;
102
104
  if (top + H > window.innerHeight) top = Math.max(MARGIN, anchorRect.top - GAP - H);
103
- return { position: "fixed", top, left, zIndex: 1e5 };
105
+ const maxHeight = Math.min(H, window.innerHeight - top - MARGIN);
106
+ return { position: "fixed", top, left, zIndex: 1e5, width: W, maxHeight, overflowY: "auto" };
104
107
  })();
105
108
  const commit = (f, t) => {
106
109
  let f2 = f, t2 = t;
@@ -113,7 +116,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
113
116
  setTo(t2);
114
117
  onValueChange == null ? void 0 : onValueChange({ from: f2 ? fmtHHmm(f2.hh, f2.mm) : null, to: t2 ? fmtHHmm(t2.hh, t2.mm) : null });
115
118
  };
116
- const popover = /* @__PURE__ */ jsxs("div", { "data-trf-pop": true, style: stylePop, className: "w-1/3 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
119
+ const popover = /* @__PURE__ */ jsxs("div", { "data-trf-pop": true, style: stylePop, className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
117
120
  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2 text-sm", children: [
118
121
  /* @__PURE__ */ jsx("div", { className: "font-medium", children: "Selecciona horario" }),
119
122
  /* @__PURE__ */ jsx(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "framepexls-ui-lib",
3
- "version": "0.3.2",
3
+ "version": "0.3.4",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "description": "Componentes UI de Framepexls para React/Next.",