@seygo/ui 0.3.0 → 0.3.1

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 (5) hide show
  1. package/dist/index.cjs +53 -45
  2. package/dist/index.d.cts +5 -5
  3. package/dist/index.d.ts +5 -5
  4. package/dist/index.js +52 -44
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -272,7 +272,9 @@ SelectCustom.displayName = "CustomSelect";
272
272
  var Select_default = SelectCustom;
273
273
 
274
274
  // src/components/Modal/Modal.tsx
275
- var import_react3 = require("@phosphor-icons/react");
275
+ var import_react3 = require("react");
276
+ var import_react_dom = require("react-dom");
277
+ var import_react4 = require("@phosphor-icons/react");
276
278
  var import_jsx_runtime4 = require("react/jsx-runtime");
277
279
  function ModalCustom({
278
280
  height,
@@ -281,50 +283,56 @@ function ModalCustom({
281
283
  onClose,
282
284
  title
283
285
  }) {
284
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
285
- "section",
286
- {
287
- style: {
288
- position: "fixed",
289
- inset: 0,
290
- zIndex: 50,
291
- display: "flex",
292
- alignItems: "center",
293
- justifyContent: "center",
294
- padding: "1rem",
295
- backgroundColor: "rgba(2, 6, 23, 0.7)",
296
- backdropFilter: "blur(4px)",
297
- WebkitBackdropFilter: "blur(4px)"
298
- },
299
- onClick: onClose,
300
- children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
301
- "div",
302
- {
303
- className: "relative flex flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl",
304
- style: {
305
- width: `min(${width}px, calc(100vw - 2rem))`,
306
- height: `min(${height}px, calc(100vh - 2rem))`,
307
- maxHeight: "100%"
308
- },
309
- onClick: (e) => e.stopPropagation(),
310
- children: [
311
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between gap-3 border-b border-gray-200 px-4 py-3 pr-3", children: [
312
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "min-w-0 truncate text-xl font-medium", children: title ? title : "" }),
313
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
314
- "button",
315
- {
316
- className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-700",
317
- onClick: onClose,
318
- "aria-label": "Fechar modal",
319
- children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react3.X, { size: 20, weight: "bold" })
320
- }
321
- )
322
- ] }),
323
- component
324
- ]
325
- }
326
- )
327
- }
286
+ const [mounted, setMounted] = (0, import_react3.useState)(false);
287
+ (0, import_react3.useEffect)(() => setMounted(true), []);
288
+ if (!mounted) return null;
289
+ return (0, import_react_dom.createPortal)(
290
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
291
+ "section",
292
+ {
293
+ style: {
294
+ position: "fixed",
295
+ inset: 0,
296
+ zIndex: 1e3,
297
+ display: "flex",
298
+ alignItems: "center",
299
+ justifyContent: "center",
300
+ padding: "1rem",
301
+ backgroundColor: "rgba(2, 6, 23, 0.7)",
302
+ backdropFilter: "blur(4px)",
303
+ WebkitBackdropFilter: "blur(4px)"
304
+ },
305
+ onClick: onClose,
306
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
307
+ "div",
308
+ {
309
+ className: "relative flex flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl",
310
+ style: {
311
+ width: `min(${width}px, calc(100vw - 2rem))`,
312
+ height: `min(${height}px, calc(100vh - 2rem))`,
313
+ maxHeight: "100%"
314
+ },
315
+ onClick: (e) => e.stopPropagation(),
316
+ children: [
317
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between gap-3 border-b border-gray-200 px-4 py-3 pr-3", children: [
318
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "min-w-0 truncate text-xl font-medium", children: title ? title : "" }),
319
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
320
+ "button",
321
+ {
322
+ className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-700",
323
+ onClick: onClose,
324
+ "aria-label": "Fechar modal",
325
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react4.X, { size: 20, weight: "bold" })
326
+ }
327
+ )
328
+ ] }),
329
+ component
330
+ ]
331
+ }
332
+ )
333
+ }
334
+ ),
335
+ document.body
328
336
  );
329
337
  }
330
338
  // Annotate the CommonJS export names for ESM import in node:
package/dist/index.d.cts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { ButtonProps, InputProps, InputRef, SelectProps } from 'antd';
3
- import * as React$1 from 'react';
4
- import React__default, { ReactNode } from 'react';
3
+ import * as react from 'react';
4
+ import react__default, { ReactNode } from 'react';
5
5
 
6
6
  type ButtonCustomProps = ButtonProps & {
7
7
  className?: string;
@@ -23,7 +23,7 @@ interface CustomInputProps extends Omit<InputProps, "onChange"> {
23
23
  containerClassName?: string;
24
24
  labelClassName?: string;
25
25
  }
26
- declare const InputCustom: React__default.ForwardRefExoticComponent<CustomInputProps & React__default.RefAttributes<InputRef>>;
26
+ declare const InputCustom: react__default.ForwardRefExoticComponent<CustomInputProps & react__default.RefAttributes<InputRef>>;
27
27
 
28
28
  interface CustomSelectProps extends Omit<SelectProps, "onChange" | "options"> {
29
29
  label?: string;
@@ -38,7 +38,7 @@ interface CustomSelectProps extends Omit<SelectProps, "onChange" | "options"> {
38
38
  }[];
39
39
  multiple?: boolean;
40
40
  }
41
- declare const SelectCustom: React$1.ForwardRefExoticComponent<CustomSelectProps & React$1.RefAttributes<any>>;
41
+ declare const SelectCustom: react.ForwardRefExoticComponent<CustomSelectProps & react.RefAttributes<any>>;
42
42
 
43
43
  declare function ModalCustom({ height, width, component, onClose, title, }: {
44
44
  height: string;
@@ -46,6 +46,6 @@ declare function ModalCustom({ height, width, component, onClose, title, }: {
46
46
  component: React.ReactNode;
47
47
  onClose: () => void;
48
48
  title?: string;
49
- }): react_jsx_runtime.JSX.Element;
49
+ }): react.ReactPortal | null;
50
50
 
51
51
  export { ButtonCustom as Button, InputCustom as Input, ModalCustom as Modal, SelectCustom as Select };
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { ButtonProps, InputProps, InputRef, SelectProps } from 'antd';
3
- import * as React$1 from 'react';
4
- import React__default, { ReactNode } from 'react';
3
+ import * as react from 'react';
4
+ import react__default, { ReactNode } from 'react';
5
5
 
6
6
  type ButtonCustomProps = ButtonProps & {
7
7
  className?: string;
@@ -23,7 +23,7 @@ interface CustomInputProps extends Omit<InputProps, "onChange"> {
23
23
  containerClassName?: string;
24
24
  labelClassName?: string;
25
25
  }
26
- declare const InputCustom: React__default.ForwardRefExoticComponent<CustomInputProps & React__default.RefAttributes<InputRef>>;
26
+ declare const InputCustom: react__default.ForwardRefExoticComponent<CustomInputProps & react__default.RefAttributes<InputRef>>;
27
27
 
28
28
  interface CustomSelectProps extends Omit<SelectProps, "onChange" | "options"> {
29
29
  label?: string;
@@ -38,7 +38,7 @@ interface CustomSelectProps extends Omit<SelectProps, "onChange" | "options"> {
38
38
  }[];
39
39
  multiple?: boolean;
40
40
  }
41
- declare const SelectCustom: React$1.ForwardRefExoticComponent<CustomSelectProps & React$1.RefAttributes<any>>;
41
+ declare const SelectCustom: react.ForwardRefExoticComponent<CustomSelectProps & react.RefAttributes<any>>;
42
42
 
43
43
  declare function ModalCustom({ height, width, component, onClose, title, }: {
44
44
  height: string;
@@ -46,6 +46,6 @@ declare function ModalCustom({ height, width, component, onClose, title, }: {
46
46
  component: React.ReactNode;
47
47
  onClose: () => void;
48
48
  title?: string;
49
- }): react_jsx_runtime.JSX.Element;
49
+ }): react.ReactPortal | null;
50
50
 
51
51
  export { ButtonCustom as Button, InputCustom as Input, ModalCustom as Modal, SelectCustom as Select };
package/dist/index.js CHANGED
@@ -243,6 +243,8 @@ SelectCustom.displayName = "CustomSelect";
243
243
  var Select_default = SelectCustom;
244
244
 
245
245
  // src/components/Modal/Modal.tsx
246
+ import { useEffect as useEffect3, useState as useState3 } from "react";
247
+ import { createPortal } from "react-dom";
246
248
  import { X } from "@phosphor-icons/react";
247
249
  import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
248
250
  function ModalCustom({
@@ -252,50 +254,56 @@ function ModalCustom({
252
254
  onClose,
253
255
  title
254
256
  }) {
255
- return /* @__PURE__ */ jsx4(
256
- "section",
257
- {
258
- style: {
259
- position: "fixed",
260
- inset: 0,
261
- zIndex: 50,
262
- display: "flex",
263
- alignItems: "center",
264
- justifyContent: "center",
265
- padding: "1rem",
266
- backgroundColor: "rgba(2, 6, 23, 0.7)",
267
- backdropFilter: "blur(4px)",
268
- WebkitBackdropFilter: "blur(4px)"
269
- },
270
- onClick: onClose,
271
- children: /* @__PURE__ */ jsxs3(
272
- "div",
273
- {
274
- className: "relative flex flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl",
275
- style: {
276
- width: `min(${width}px, calc(100vw - 2rem))`,
277
- height: `min(${height}px, calc(100vh - 2rem))`,
278
- maxHeight: "100%"
279
- },
280
- onClick: (e) => e.stopPropagation(),
281
- children: [
282
- /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between gap-3 border-b border-gray-200 px-4 py-3 pr-3", children: [
283
- /* @__PURE__ */ jsx4("div", { className: "min-w-0 truncate text-xl font-medium", children: title ? title : "" }),
284
- /* @__PURE__ */ jsx4(
285
- "button",
286
- {
287
- className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-700",
288
- onClick: onClose,
289
- "aria-label": "Fechar modal",
290
- children: /* @__PURE__ */ jsx4(X, { size: 20, weight: "bold" })
291
- }
292
- )
293
- ] }),
294
- component
295
- ]
296
- }
297
- )
298
- }
257
+ const [mounted, setMounted] = useState3(false);
258
+ useEffect3(() => setMounted(true), []);
259
+ if (!mounted) return null;
260
+ return createPortal(
261
+ /* @__PURE__ */ jsx4(
262
+ "section",
263
+ {
264
+ style: {
265
+ position: "fixed",
266
+ inset: 0,
267
+ zIndex: 1e3,
268
+ display: "flex",
269
+ alignItems: "center",
270
+ justifyContent: "center",
271
+ padding: "1rem",
272
+ backgroundColor: "rgba(2, 6, 23, 0.7)",
273
+ backdropFilter: "blur(4px)",
274
+ WebkitBackdropFilter: "blur(4px)"
275
+ },
276
+ onClick: onClose,
277
+ children: /* @__PURE__ */ jsxs3(
278
+ "div",
279
+ {
280
+ className: "relative flex flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl",
281
+ style: {
282
+ width: `min(${width}px, calc(100vw - 2rem))`,
283
+ height: `min(${height}px, calc(100vh - 2rem))`,
284
+ maxHeight: "100%"
285
+ },
286
+ onClick: (e) => e.stopPropagation(),
287
+ children: [
288
+ /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between gap-3 border-b border-gray-200 px-4 py-3 pr-3", children: [
289
+ /* @__PURE__ */ jsx4("div", { className: "min-w-0 truncate text-xl font-medium", children: title ? title : "" }),
290
+ /* @__PURE__ */ jsx4(
291
+ "button",
292
+ {
293
+ className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-700",
294
+ onClick: onClose,
295
+ "aria-label": "Fechar modal",
296
+ children: /* @__PURE__ */ jsx4(X, { size: 20, weight: "bold" })
297
+ }
298
+ )
299
+ ] }),
300
+ component
301
+ ]
302
+ }
303
+ )
304
+ }
305
+ ),
306
+ document.body
299
307
  );
300
308
  }
301
309
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seygo/ui",
3
- "version": "0.3.0",
3
+ "version": "0.3.1",
4
4
  "description": "Biblioteca de componentes UI da Seygo — wrappers do Ant Design com padrões internos",
5
5
  "license": "MIT",
6
6
  "keywords": [