@oneplatformdev/ui 0.0.1-beta.130 → 0.0.1-beta.132

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 (3) hide show
  1. package/Dialog/Dialog.mjs +63 -74
  2. package/Popover/Popover.mjs +25 -30
  3. package/package.json +1 -1
package/Dialog/Dialog.mjs CHANGED
@@ -1,63 +1,52 @@
1
- import { jsx as o, jsxs as c } from "react/jsx-runtime";
2
- import i, { useRef as D, useMemo as h, useState as v, useEffect as b } from "react";
1
+ import { jsx as o, jsxs as n } from "react/jsx-runtime";
2
+ import i, { useRef as x, useMemo as y } from "react";
3
3
  import * as e from "@radix-ui/react-dialog";
4
- import { XIcon as C } from "lucide-react";
5
- import { cn as n, composeRefs as w } from "@oneplatformdev/utils";
6
- import { DialogOverlayScope as E } from "./DialogOverlayScope.mjs";
7
- const q = e.Root, B = e.Trigger, R = e.Portal, M = e.Close, g = i.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
4
+ import { XIcon as N } from "lucide-react";
5
+ import { cn as l, composeRefs as D } from "@oneplatformdev/utils";
6
+ const E = e.Root, P = e.Trigger, b = e.Portal, F = e.Close, f = i.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
8
7
  e.Overlay,
9
8
  {
10
9
  ref: s,
11
- className: n(
10
+ className: l(
12
11
  "fixed inset-0 z-40 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
13
- t
12
+ a
14
13
  ),
15
- ...a
14
+ ...t
16
15
  }
17
16
  ));
18
- g.displayName = e.Overlay.displayName;
19
- const z = i.forwardRef(
17
+ f.displayName = e.Overlay.displayName;
18
+ const h = i.forwardRef(
20
19
  ({
21
- className: t,
22
- children: a,
20
+ className: a,
21
+ children: t,
23
22
  showCloseButton: s = !0,
24
- onOpenAutoFocus: d,
25
- preventAutoFocus: u,
26
- ...y
27
- }, m) => {
28
- const f = D(null), x = h(
29
- () => w(m, f),
30
- [m]
31
- ), [N, p] = v(null);
32
- return b(() => {
33
- const r = f.current;
34
- if (!r || !r.parentElement) return;
35
- const l = document.createElement("div");
36
- return l.dataset.overlayHost = "", l.style.position = "fixed", l.style.inset = "0", l.style.zIndex = "80", r.parentElement.appendChild(l), p(l), () => {
37
- l.remove(), p(null);
38
- };
39
- }, []), /* @__PURE__ */ c(R, { children: [
40
- /* @__PURE__ */ o(g, {}),
41
- /* @__PURE__ */ c(
23
+ onOpenAutoFocus: r,
24
+ preventAutoFocus: p,
25
+ ...g
26
+ }, d) => {
27
+ const c = x(null), u = y(() => D(d, c), [d]);
28
+ return console.log("localRef", c), /* @__PURE__ */ n(b, { children: [
29
+ /* @__PURE__ */ o(f, {}),
30
+ /* @__PURE__ */ n(
42
31
  e.Content,
43
32
  {
44
- ref: x,
45
- className: n(
33
+ ref: u,
34
+ className: l(
46
35
  "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg",
47
36
  "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
48
37
  "max-w-[90%] max-h-[90%] overflow-hidden",
49
38
  "bg-[#FCFCFC] border border-[#E8E9EB] rounded-[16px]",
50
- t
39
+ a
51
40
  ),
52
- onOpenAutoFocus: (r) => (u && r.preventDefault(), d == null ? void 0 : d(r)),
53
- ...y,
41
+ onOpenAutoFocus: (m) => (p && m.preventDefault(), r == null ? void 0 : r(m)),
42
+ ...g,
54
43
  children: [
55
- /* @__PURE__ */ o(E, { value: N, children: a }),
56
- s && /* @__PURE__ */ c(
44
+ t,
45
+ s && /* @__PURE__ */ n(
57
46
  e.Close,
58
47
  {
59
48
  "aria-label": "Close",
60
- className: n(
49
+ className: l(
61
50
  "absolute right-4 top-4 rounded-sm ring-offset-background w-10 aspect-square",
62
51
  "flex items-center justify-center",
63
52
  "data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
@@ -69,7 +58,7 @@ const z = i.forwardRef(
69
58
  "transition-opacity"
70
59
  ),
71
60
  children: [
72
- /* @__PURE__ */ o(C, { className: "h-4 w-4" }),
61
+ /* @__PURE__ */ o(N, { className: "h-4 w-4" }),
73
62
  /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
74
63
  ]
75
64
  }
@@ -80,65 +69,65 @@ const z = i.forwardRef(
80
69
  ] });
81
70
  }
82
71
  );
83
- z.displayName = e.Content.displayName;
84
- const T = ({
85
- className: t,
86
- ...a
72
+ h.displayName = e.Content.displayName;
73
+ const v = ({
74
+ className: a,
75
+ ...t
87
76
  }) => /* @__PURE__ */ o(
88
77
  "div",
89
78
  {
90
- className: n(
79
+ className: l(
91
80
  "flex flex-col space-y-1.5 text-center sm:text-left",
92
- t
81
+ a
93
82
  ),
94
- ...a
83
+ ...t
95
84
  }
96
85
  );
97
- T.displayName = "DialogHeader";
98
- const j = ({
99
- className: t,
100
- ...a
86
+ v.displayName = "DialogHeader";
87
+ const w = ({
88
+ className: a,
89
+ ...t
101
90
  }) => /* @__PURE__ */ o(
102
91
  "div",
103
92
  {
104
- className: n(
93
+ className: l(
105
94
  "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
106
- t
95
+ a
107
96
  ),
108
- ...a
97
+ ...t
109
98
  }
110
99
  );
111
- j.displayName = "DialogFooter";
112
- const k = i.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
100
+ w.displayName = "DialogFooter";
101
+ const C = i.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
113
102
  e.Title,
114
103
  {
115
104
  ref: s,
116
- className: n(
105
+ className: l(
117
106
  "text-lg font-semibold leading-none tracking-tight",
118
- t
107
+ a
119
108
  ),
120
- ...a
109
+ ...t
121
110
  }
122
111
  ));
123
- k.displayName = e.Title.displayName;
124
- const H = i.forwardRef(({ className: t, ...a }, s) => /* @__PURE__ */ o(
112
+ C.displayName = e.Title.displayName;
113
+ const R = i.forwardRef(({ className: a, ...t }, s) => /* @__PURE__ */ o(
125
114
  e.Description,
126
115
  {
127
116
  ref: s,
128
- className: n("text-sm text-muted-foreground", t),
129
- ...a
117
+ className: l("text-sm text-muted-foreground", a),
118
+ ...t
130
119
  }
131
120
  ));
132
- H.displayName = e.Description.displayName;
121
+ R.displayName = e.Description.displayName;
133
122
  export {
134
- q as Dialog,
135
- M as DialogClose,
136
- z as DialogContent,
137
- H as DialogDescription,
138
- j as DialogFooter,
139
- T as DialogHeader,
140
- g as DialogOverlay,
141
- R as DialogPortal,
142
- k as DialogTitle,
143
- B as DialogTrigger
123
+ E as Dialog,
124
+ F as DialogClose,
125
+ h as DialogContent,
126
+ R as DialogDescription,
127
+ w as DialogFooter,
128
+ v as DialogHeader,
129
+ f as DialogOverlay,
130
+ b as DialogPortal,
131
+ C as DialogTitle,
132
+ P as DialogTrigger
144
133
  };
package/Popover/Popover.mjs CHANGED
@@ -1,33 +1,28 @@
1
- import { jsx as a } from "react/jsx-runtime";
2
- import * as m from "react";
1
+ import { jsx as t } from "react/jsx-runtime";
2
+ import * as s from "react";
3
3
  import * as o from "@radix-ui/react-popover";
4
- import { cn as l } from "@oneplatformdev/utils";
5
- import { useDialogOverlayContainer as c } from "../Dialog/DialogOverlayScope.mjs";
6
- const P = o.Root, h = o.Trigger, b = o.Anchor, f = m.forwardRef(({ className: r, align: n = "center", sideOffset: i = 4, style: s, ...d }, p) => {
7
- const t = c(), e = t ? { container: t } : {};
8
- return console.log("container", t), console.log("portalProps", e), /* @__PURE__ */ a(o.Portal, { ...e, children: /* @__PURE__ */ a(
9
- o.Content,
10
- {
11
- ref: p,
12
- align: n,
13
- sideOffset: i,
14
- className: l(
15
- // "z-90 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
16
- "w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
17
- r
18
- ),
19
- style: {
20
- pointerEvents: "auto",
21
- ...s
22
- },
23
- ...d
24
- }
25
- ) });
26
- });
27
- f.displayName = o.Content.displayName;
4
+ import { cn as m } from "@oneplatformdev/utils";
5
+ const c = o.Root, v = o.Trigger, g = o.Anchor, p = s.forwardRef(({ className: e, align: a = "center", sideOffset: r = 4, style: n, ...d }, i) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
6
+ o.Content,
7
+ {
8
+ ref: i,
9
+ align: a,
10
+ sideOffset: r,
11
+ className: m(
12
+ "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
13
+ e
14
+ ),
15
+ style: {
16
+ pointerEvents: "auto",
17
+ ...n
18
+ },
19
+ ...d
20
+ }
21
+ ) }));
22
+ p.displayName = o.Content.displayName;
28
23
  export {
29
- P as Popover,
30
- b as PopoverAnchor,
31
- f as PopoverContent,
32
- h as PopoverTrigger
24
+ c as Popover,
25
+ g as PopoverAnchor,
26
+ p as PopoverContent,
27
+ v as PopoverTrigger
33
28
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oneplatformdev/ui",
3
- "version": "0.0.1-beta.130",
3
+ "version": "0.0.1-beta.132",
4
4
  "description": "UI React Components.",
5
5
  "author": "One Platform Development Team",
6
6
  "keywords": [