@shiflo/ui 0.0.13 → 0.0.15

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.
@@ -1,3 +1,3 @@
1
1
  import { BottomSheetProps } from './BottomSheet.typing';
2
- declare function BottomSheet({ open, onClose, children, transitionDuration, onClick, ref, hideDragHandleBar, hideOverlay, style, ...props }: BottomSheetProps): import("react").JSX.Element;
2
+ declare function BottomSheet({ open, onClose, children, transitionDuration, maxWidth, onClick, ref, hideDragHandleBar, hideOverlay, style, ...props }: BottomSheetProps): import("react").JSX.Element;
3
3
  export default BottomSheet;
@@ -1,9 +1,10 @@
1
- import { jsx as y, jsxs as V } from "react/jsx-runtime";
2
- import { useState as z, useRef as o, useImperativeHandle as G, useEffect as S } from "react";
1
+ import { jsx as y, jsxs as z } from "react/jsx-runtime";
2
+ import { useState as G, useRef as o, useImperativeHandle as J, useEffect as S } from "react";
3
3
  import b from "basic-styled";
4
- import J from "../Overlay/Overlay.mjs";
5
- const K = b.div`
6
- width: 100%;
4
+ import K from "../Overlay/Overlay.mjs";
5
+ const N = b.div`
6
+ width: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
7
+ max-width: ${({ maxWidth: t = "375px" }) => t};
7
8
  max-height: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
8
9
  overflow-y: auto;
9
10
  margin: ${({ theme: { spacing: t } }) => t[400]};
@@ -18,7 +19,7 @@ const K = b.div`
18
19
  transform ${({ transitionDuration: t }) => `${t}ms`}
19
20
  ${({ ease: t }) => t === "in" ? "ease-out" : "ease-in"},
20
21
  background-color 0.2s;
21
- `, N = b.div`
22
+ `, Q = b.div`
22
23
  position: sticky;
23
24
  top: 0;
24
25
  left: 0;
@@ -33,7 +34,7 @@ const K = b.div`
33
34
  }
34
35
  }) => t.background};
35
36
  transition: background-color 0.2s;
36
- `, Q = b.div`
37
+ `, U = b.div`
37
38
  width: 24px;
38
39
  height: 4px;
39
40
  border-radius: ${({ theme: { radius: t } }) => t[100]};
@@ -44,78 +45,81 @@ const K = b.div`
44
45
  }) => t.main};
45
46
  transition: background-color 0.2s;
46
47
  `;
47
- function C({
48
+ function E({
48
49
  open: t,
49
50
  onClose: c,
50
51
  children: T,
51
52
  transitionDuration: s = 200,
53
+ maxWidth: j = "375px",
52
54
  onClick: $,
53
- ref: j,
54
- hideDragHandleBar: I,
55
- hideOverlay: O,
56
- style: A,
57
- ...F
55
+ ref: I,
56
+ hideDragHandleBar: O,
57
+ hideOverlay: A,
58
+ style: F,
59
+ ...W
58
60
  }) {
59
- const [L, h] = z(!1), l = o(null), k = o(null), i = o(null), d = o(!1), v = o(0), f = o(0), m = o(0), g = o(0), p = o(0), W = o(0.25);
60
- G(j, () => l.current);
61
- const q = (r) => {
61
+ const [h, L] = G(!1), l = o(null), x = o(null), i = o(null), d = o(!1), v = o(0), f = o(0), m = o(0), p = o(0), g = o(0), q = o(0.25);
62
+ J(I, () => l.current);
63
+ const P = (r) => {
62
64
  r.stopPropagation(), typeof $ == "function" && $(r);
63
65
  };
64
66
  return S(() => {
65
67
  let r;
66
68
  return t ? r = requestAnimationFrame(() => {
67
- h(!0);
68
- }) : h(!1), () => {
69
+ L(!0);
70
+ }) : L(!1), () => {
69
71
  r && cancelAnimationFrame(r);
70
72
  };
71
73
  }, [t]), S(() => {
72
- const r = l.current, n = k.current, R = (e) => {
73
- r && (r.scrollTop > 0 || (d.current = !0, v.current = e, f.current = e, m.current = r.offsetHeight, p.current = Date.now(), r.style.transition = "none", r.style.cursor = "grabbing", n && (n.style.transition = "none"), i.current && (i.current.style.cursor = "grabbing")));
74
- }, x = (e) => {
74
+ const r = l.current, n = x.current, k = (e) => {
75
+ r && (r.scrollTop > 0 || (d.current = !0, v.current = e, f.current = e, m.current = r.offsetHeight, g.current = Date.now(), r.style.transition = "none", r.style.cursor = "grabbing", n && (n.style.transition = "none"), i.current && (i.current.style.cursor = "grabbing")));
76
+ }, R = (e) => {
75
77
  if (!r || !d.current) return;
76
78
  const u = e - v.current;
77
79
  if (u < 0) return;
78
80
  f.current = e;
79
- const D = Date.now(), M = D - p.current;
81
+ const D = Date.now(), M = D - g.current;
80
82
  if (M > 0) {
81
- const P = f.current;
82
- g.current = (e - P) / M, p.current = D;
83
+ const V = f.current;
84
+ p.current = (e - V) / M, g.current = D;
83
85
  }
84
86
  n && (n.style.opacity = `${Math.max(0, 1 - u / (m.current * 2))}`), r.style.transform = `translate3d(0, ${u}px, 0)`;
85
87
  }, a = () => {
86
88
  if (!r || !d.current) return;
87
89
  d.current = !1, r.style.cursor = "default", i.current && (i.current.style.cursor = "grab");
88
- const e = f.current - v.current, u = m.current * W.current;
89
- r.style.transition = `transform ${s}ms ease-out`, n && (n.style.transition = `opacity ${s}ms ease-out`), e > u || g.current > 0.5 && g.current > 0 ? (r.style.transform = "translate3d(0, 200%, 0)", n && (n.style.opacity = "0"), c == null || c()) : (r.style.transform = "translate3d(0, 0, 0)", n && (n.style.opacity = "1"));
90
- }, w = (e) => R(e.clientY), H = (e) => x(e.clientY), Y = (e) => R(e.touches[0].clientY), B = (e) => x(e.touches[0].clientY);
90
+ const e = f.current - v.current, u = m.current * q.current;
91
+ r.style.transition = `transform ${s}ms ease-out`, n && (n.style.transition = `opacity ${s}ms ease-out`), e > u || p.current > 0.5 && p.current > 0 ? (r.style.transform = "translate3d(0, 200%, 0)", n && (n.style.opacity = "0"), c == null || c()) : (r.style.transform = "translate3d(0, 0, 0)", n && (n.style.opacity = "1"));
92
+ }, w = (e) => k(e.clientY), H = (e) => R(e.clientY), Y = (e) => k(e.touches[0].clientY), B = (e) => R(e.touches[0].clientY);
91
93
  return r == null || r.addEventListener("mousedown", w), r == null || r.addEventListener("mousemove", H), r == null || r.addEventListener("mouseup", a), r == null || r.addEventListener("mouseleave", a), r == null || r.addEventListener("touchstart", Y), r == null || r.addEventListener("touchmove", B), r == null || r.addEventListener("touchend", a), r == null || r.addEventListener("touchcancel", a), () => {
92
94
  r == null || r.removeEventListener("mousedown", w), r == null || r.removeEventListener("mousemove", H), r == null || r.removeEventListener("mouseup", a), r == null || r.removeEventListener("mouseleave", a), r == null || r.removeEventListener("touchstart", Y), r == null || r.removeEventListener("touchmove", B), r == null || r.removeEventListener("touchend", a), r == null || r.removeEventListener("touchcancel", a);
93
95
  };
94
- }, [L, c, s]), /* @__PURE__ */ y(
95
- J,
96
+ }, [h, c, s]), /* @__PURE__ */ y(
97
+ K,
96
98
  {
97
- ref: k,
99
+ ref: x,
98
100
  open: t,
99
101
  onClose: c,
100
102
  transitionDuration: s,
101
103
  placement: "center-bottom",
102
- css: O ? {
104
+ css: A ? {
105
+ pointerEvents: "none",
103
106
  backgroundColor: "transparent !important"
104
107
  } : void 0,
105
- children: /* @__PURE__ */ V(
106
- K,
108
+ children: /* @__PURE__ */ z(
109
+ N,
107
110
  {
108
111
  ref: l,
109
112
  ease: t ? "in" : "out",
110
113
  transitionDuration: s,
111
- onClick: q,
112
- ...F,
114
+ maxWidth: j,
115
+ onClick: P,
116
+ ...W,
113
117
  style: {
114
- transform: `translate3d(0, ${L ? "0" : "200%"}, 0)`,
115
- ...A
118
+ transform: `translate3d(0, ${h ? "0" : "200%"}, 0)`,
119
+ ...F
116
120
  },
117
121
  children: [
118
- !I && /* @__PURE__ */ y(N, { ref: i, children: /* @__PURE__ */ y(Q, {}) }),
122
+ !O && /* @__PURE__ */ y(Q, { ref: i, children: /* @__PURE__ */ y(U, {}) }),
119
123
  T
120
124
  ]
121
125
  }
@@ -124,5 +128,5 @@ function C({
124
128
  );
125
129
  }
126
130
  export {
127
- C as default
131
+ E as default
128
132
  };
@@ -1,8 +1,10 @@
1
1
  import { ComponentPropsWithRef } from 'react';
2
- export interface BottomSheetProps extends ComponentPropsWithRef<"div"> {
2
+ import { UtilityProps } from '../../typings/utility';
3
+ export interface BottomSheetProps extends ComponentPropsWithRef<"div">, Pick<UtilityProps, "css"> {
3
4
  open?: boolean;
4
5
  onClose?: () => void;
5
6
  transitionDuration?: number;
7
+ maxWidth?: string;
6
8
  hideDragHandleBar?: boolean;
7
9
  hideOverlay?: boolean;
8
10
  }
@@ -1,3 +1,3 @@
1
1
  import { DialogProps } from './Dialog.typing';
2
- declare function Dialog({ open, onClose, children, transitionDuration, onClick, style, ...props }: DialogProps): import("react").JSX.Element;
2
+ declare function Dialog({ open, onClose, children, transitionDuration, onClick, style, maxWidth, ...props }: DialogProps): import("react").JSX.Element;
3
3
  export default Dialog;
@@ -1,9 +1,10 @@
1
1
  import { jsx as s } from "react/jsx-runtime";
2
- import { useState as d, useRef as $, useEffect as p } from "react";
3
- import h from "basic-styled";
4
- import g from "../Overlay/Overlay.mjs";
5
- const y = h.div`
2
+ import { useState as $, useRef as p, useEffect as h } from "react";
3
+ import g from "basic-styled";
4
+ import y from "../Overlay/Overlay.mjs";
5
+ const x = g.div`
6
6
  width: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
7
+ max-width: ${({ maxWidth: e = "375px" }) => e};
7
8
  max-height: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
8
9
  overflow-y: auto;
9
10
  margin: ${({ theme: { spacing: e } }) => e[400]};
@@ -28,12 +29,13 @@ function O({
28
29
  transitionDuration: a = 200,
29
30
  onClick: o,
30
31
  style: l,
31
- ...c
32
+ maxWidth: c = "375px",
33
+ ...f
32
34
  }) {
33
- const [r, i] = d(!1), f = $(null), u = (t) => {
35
+ const [r, i] = $(!1), u = p(null), d = (t) => {
34
36
  t.stopPropagation(), typeof o == "function" && o(t);
35
37
  };
36
- return p(() => {
38
+ return h(() => {
37
39
  let t;
38
40
  return e ? t = requestAnimationFrame(() => {
39
41
  i(!0);
@@ -41,20 +43,21 @@ function O({
41
43
  t && cancelAnimationFrame(t);
42
44
  };
43
45
  }, [e]), /* @__PURE__ */ s(
44
- g,
46
+ y,
45
47
  {
46
- ref: f,
48
+ ref: u,
47
49
  open: e,
48
50
  onClose: n,
49
51
  transitionDuration: a,
50
52
  placement: "center-middle",
51
53
  children: /* @__PURE__ */ s(
52
- y,
54
+ x,
53
55
  {
54
56
  ease: e ? "in" : "out",
55
57
  transitionDuration: a,
56
- onClick: u,
57
- ...c,
58
+ maxWidth: c,
59
+ onClick: d,
60
+ ...f,
58
61
  style: {
59
62
  transform: `scale(${r ? 1 : 0.9})`,
60
63
  opacity: r ? 1 : 0,
@@ -1,6 +1,8 @@
1
1
  import { ComponentPropsWithRef } from 'react';
2
- export interface DialogProps extends ComponentPropsWithRef<"div"> {
2
+ import { UtilityProps } from '../../typings/utility';
3
+ export interface DialogProps extends ComponentPropsWithRef<"div">, Pick<UtilityProps, "css"> {
3
4
  open?: boolean;
4
5
  onClose?: () => void;
5
6
  transitionDuration?: number;
7
+ maxWidth?: string;
6
8
  }
@@ -1,3 +1,3 @@
1
1
  import { OverlayProps } from './Overlay.typing';
2
- declare function Overlay({ children, open, onClose, transitionDuration, placement, style, ref, ...props }: OverlayProps): import('react').ReactPortal | null;
2
+ declare function Overlay({ children, open, onClose, transitionDuration, placement, style, ref, onClick, ...props }: OverlayProps): import('react').ReactPortal | null;
3
3
  export default Overlay;
@@ -1,15 +1,12 @@
1
- import { jsxs as j, jsx as f } from "react/jsx-runtime";
2
- import { useState as c, useRef as h, useImperativeHandle as O, useLayoutEffect as I, useEffect as k } from "react";
3
- import { createPortal as C } from "react-dom";
1
+ import { jsxs as v, jsx as l } from "react/jsx-runtime";
2
+ import { useState as m, useRef as k, useImperativeHandle as x, useLayoutEffect as $, useEffect as I } from "react";
3
+ import { createPortal as w } from "react-dom";
4
4
  import i from "basic-styled";
5
- const v = i.div`
5
+ const L = i.div`
6
6
  position: fixed;
7
7
  top: 0;
8
8
  left: 0;
9
- width: 100%;
10
- height: 100%;
11
- z-index: 1;
12
- `, $ = i.div`
9
+ `, z = i.div`
13
10
  position: fixed;
14
11
  top: 0;
15
12
  left: 0;
@@ -17,135 +14,137 @@ const v = i.div`
17
14
  height: 100%;
18
15
  background-color: ${({
19
16
  theme: {
20
- palette: { common: n }
17
+ palette: { common: r }
21
18
  }
22
- }) => n.overlay};
19
+ }) => r.overlay};
23
20
  transition:
24
- opacity ${({ transitionDuration: n }) => `${n}ms`}
25
- ${({ ease: n }) => n === "in" ? "ease-in" : "ease-out"},
21
+ opacity ${({ transitionDuration: r }) => `${r}ms`}
22
+ ${({ ease: r }) => r === "in" ? "ease-in" : "ease-out"},
26
23
  background-color 0.2s;
27
- `, w = i.div`
24
+ z-index: 1;
25
+ `, A = i.div`
28
26
  position: fixed;
29
- top: 0;
30
- left: 0;
31
27
  width: 100%;
32
- height: 100%;
28
+ display: flex;
29
+ justify-content: center;
30
+ align-items: center;
31
+ z-index: 1;
33
32
 
34
- ${({ placement: n }) => {
35
- const e = {};
36
- switch (n) {
33
+ ${({ placement: r }) => {
34
+ const t = {};
35
+ switch (r) {
37
36
  case "top-left":
38
- Object.assign(e, {
39
- display: "flex",
40
- justifyContent: "flex-start",
41
- alignItems: "flex-start"
37
+ Object.assign(t, {
38
+ top: 0,
39
+ left: 0
42
40
  });
43
41
  break;
44
42
  case "top-right":
45
- Object.assign(e, {
46
- display: "flex",
47
- justifyContent: "flex-end",
48
- alignItems: "flex-start"
43
+ Object.assign(t, {
44
+ top: 0,
45
+ right: 0
49
46
  });
50
47
  break;
51
48
  case "bottom-left":
52
- Object.assign(e, {
53
- display: "flex",
54
- justifyContent: "flex-start",
55
- alignItems: "flex-end"
49
+ Object.assign(t, {
50
+ bottom: 0,
51
+ left: 0
56
52
  });
57
53
  break;
58
54
  case "bottom-right":
59
- Object.assign(e, {
60
- display: "flex",
61
- justifyContent: "flex-end",
62
- alignItems: "flex-end"
55
+ Object.assign(t, {
56
+ bottom: 0,
57
+ right: 0
63
58
  });
64
59
  break;
65
60
  case "center-top":
66
- Object.assign(e, {
67
- display: "flex",
68
- justifyContent: "center",
69
- alignItems: "flex-start"
61
+ Object.assign(t, {
62
+ top: 0,
63
+ left: "50%",
64
+ transform: "translate3d(-50%, 0, 0)"
70
65
  });
71
66
  break;
72
67
  case "center-bottom":
73
- Object.assign(e, {
74
- display: "flex",
75
- justifyContent: "center",
76
- alignItems: "flex-end"
68
+ Object.assign(t, {
69
+ bottom: 0,
70
+ left: "50%",
71
+ transform: "translate3d(-50%, 0, 0)"
77
72
  });
78
73
  break;
79
74
  case "center-middle":
80
- Object.assign(e, {
81
- display: "flex",
82
- justifyContent: "center",
83
- alignItems: "center"
75
+ Object.assign(t, {
76
+ top: "50%",
77
+ left: "50%",
78
+ transform: "translate3d(-50%, -50%, 0)"
84
79
  });
85
80
  break;
86
81
  case "center-left":
87
- Object.assign(e, {
88
- display: "flex",
89
- justifyContent: "flex-start",
90
- alignItems: "center"
82
+ Object.assign(t, {
83
+ top: "50%",
84
+ left: 0,
85
+ transform: "translate3d(0, -50%, 0)"
91
86
  });
92
87
  break;
93
88
  case "center-right":
94
- Object.assign(e, {
95
- display: "flex",
96
- justifyContent: "flex-end",
97
- alignItems: "center"
89
+ Object.assign(t, {
90
+ top: "50%",
91
+ right: 0,
92
+ transform: "translate3d(0, -50%, 0)"
98
93
  });
99
94
  break;
100
95
  }
101
- return e;
96
+ return t;
102
97
  }}
103
98
  `;
104
- function R({
105
- children: n,
106
- open: e,
107
- onClose: d,
108
- transitionDuration: a = 200,
99
+ function U({
100
+ children: r,
101
+ open: t,
102
+ onClose: s,
103
+ transitionDuration: o = 200,
109
104
  placement: u,
110
- style: y,
111
- ref: m,
112
- ...p
105
+ style: b,
106
+ ref: p,
107
+ onClick: a,
108
+ ...g
113
109
  }) {
114
- const [x, r] = c(!0), [g, l] = c(!1), s = h(null);
115
- return O(m, () => s.current), I(() => {
116
- let t;
117
- return e ? (r(!1), t = requestAnimationFrame(() => {
118
- l(!0);
119
- })) : l(!1), () => {
120
- t && cancelAnimationFrame(t);
110
+ const [h, c] = m(!0), [y, f] = m(!1), n = k(null), O = (e) => {
111
+ s == null || s(), a == null || a(e);
112
+ };
113
+ return x(p, () => n.current), $(() => {
114
+ let e;
115
+ return t ? (c(!1), e = requestAnimationFrame(() => {
116
+ f(!0);
117
+ })) : f(!1), () => {
118
+ e && cancelAnimationFrame(e);
121
119
  };
122
- }, [e, a]), k(() => {
123
- const t = s.current, o = (b) => {
124
- e || b.propertyName === "opacity" && r(!0);
120
+ }, [t, o]), I(() => {
121
+ const e = n.current, d = (j) => {
122
+ t || j.propertyName === "opacity" && c(!0);
125
123
  };
126
- return t == null || t.addEventListener("transitionend", o), () => {
127
- t == null || t.removeEventListener("transitionend", o);
124
+ return e == null || e.addEventListener("transitionend", d), () => {
125
+ e == null || e.removeEventListener("transitionend", d);
128
126
  };
129
- }, [e]), x ? null : C(
130
- /* @__PURE__ */ j(v, { onClick: d, children: [
131
- /* @__PURE__ */ f(
132
- $,
127
+ }, [t]), h ? null : w(
128
+ /* @__PURE__ */ v(L, { children: [
129
+ /* @__PURE__ */ l(
130
+ z,
133
131
  {
134
- ref: s,
135
- transitionDuration: a,
136
- ease: e ? "in" : "out",
132
+ ref: n,
133
+ transitionDuration: o,
134
+ ease: t ? "in" : "out",
135
+ onClick: O,
137
136
  style: {
138
- opacity: g ? 1 : 0,
139
- ...y
137
+ opacity: y ? 1 : 0,
138
+ ...b
140
139
  },
141
- ...p
140
+ ...g
142
141
  }
143
142
  ),
144
- /* @__PURE__ */ f(w, { placement: u, children: n })
143
+ /* @__PURE__ */ l(A, { placement: u, children: r })
145
144
  ] }),
146
145
  document.body
147
146
  );
148
147
  }
149
148
  export {
150
- R as default
149
+ U as default
151
150
  };
@@ -5,4 +5,5 @@ export interface OverlayProps extends ComponentPropsWithRef<"div">, Pick<Utility
5
5
  onClose?: () => void;
6
6
  transitionDuration?: number;
7
7
  placement?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center-top" | "center-bottom" | "center-middle" | "center-left" | "center-right";
8
+ hideOverlay?: boolean;
8
9
  }
@@ -1,3 +1,3 @@
1
1
  import { SnackbarProps } from './Snackbar.typing';
2
- declare function Snackbar({ children, open, onClose, transitionDuration, style, ref, startIcon, action, autoHideDuration, disableAutoHide, ...props }: SnackbarProps): import('react').ReactPortal | null;
2
+ declare function Snackbar({ children, open, onClose, transitionDuration, style, ref, startIcon, action, maxWidth, autoHideDuration, disableAutoHide, ...props }: SnackbarProps): import('react').ReactPortal | null;
3
3
  export default Snackbar;
@@ -1,16 +1,16 @@
1
- import { jsxs as z, jsx as c } from "react/jsx-runtime";
2
- import { useState as x, useRef as y, useImperativeHandle as A, useLayoutEffect as I, useEffect as v } from "react";
3
- import { createPortal as L } from "react-dom";
1
+ import { jsxs as A, jsx as c } from "react/jsx-runtime";
2
+ import { useState as $, useRef as y, useImperativeHandle as I, useLayoutEffect as L, useEffect as v } from "react";
3
+ import { createPortal as R } from "react-dom";
4
4
  import a from "basic-styled";
5
- const R = a.div`
5
+ const T = a.div`
6
6
  position: fixed;
7
7
  bottom: ${({ theme: { spacing: e } }) => `calc(${e[800]} + var(--safe-area-inset-bottom, 0px))`};
8
8
  left: 50%;
9
9
  display: flex;
10
10
  align-items: center;
11
11
  gap: ${({ theme: { spacing: e } }) => e[400]};
12
- width: 100%;
13
- max-width: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
12
+ width: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
13
+ max-width: ${({ maxWidth: e = "375px" }) => e};
14
14
  min-height: 56px;
15
15
  padding: ${({ theme: { spacing: e } }) => e[400]};
16
16
  background-color: ${({
@@ -26,9 +26,9 @@ const R = a.div`
26
26
  ${({ ease: e }) => e === "in" ? "ease-in" : "ease-out"},
27
27
  transform ${({ transitionDuration: e }) => `${e}ms`},
28
28
  background-color 0.2s;
29
- `, T = a.div`
30
- white-space: nowrap;
31
29
  `, j = a.div`
30
+ white-space: nowrap;
31
+ `, E = a.div`
32
32
  flex-grow: 1;
33
33
  display: -webkit-box;
34
34
  overflow: hidden;
@@ -45,10 +45,10 @@ const R = a.div`
45
45
  lineHeight: r.lineHeight,
46
46
  color: e.surface
47
47
  })}
48
- `, E = a.div`
48
+ `, F = a.div`
49
49
  white-space: nowrap;
50
50
  `;
51
- function H({
51
+ function N({
52
52
  children: e,
53
53
  open: r,
54
54
  onClose: n,
@@ -57,12 +57,13 @@ function H({
57
57
  ref: g,
58
58
  startIcon: f,
59
59
  action: m,
60
+ maxWidth: b = "375px",
60
61
  autoHideDuration: d = 3e3,
61
62
  disableAutoHide: u,
62
- ...b
63
+ ...S
63
64
  }) {
64
- const [S, p] = x(!0), [i, h] = x(!1), s = y(null), o = y(null);
65
- return A(g, () => s.current), I(() => {
65
+ const [k, p] = $(!0), [i, h] = $(!1), s = y(null), o = y(null);
66
+ return I(g, () => s.current), L(() => {
66
67
  let t;
67
68
  return r ? (p(!1), t = requestAnimationFrame(() => {
68
69
  h(!0);
@@ -70,11 +71,11 @@ function H({
70
71
  t && cancelAnimationFrame(t);
71
72
  };
72
73
  }, [r, l]), v(() => {
73
- const t = s.current, $ = (k) => {
74
- r || k.propertyName === "opacity" && p(!0);
74
+ const t = s.current, x = (z) => {
75
+ r || z.propertyName === "opacity" && p(!0);
75
76
  };
76
- return t == null || t.addEventListener("transitionend", $), () => {
77
- t == null || t.removeEventListener("transitionend", $);
77
+ return t == null || t.addEventListener("transitionend", x), () => {
78
+ t == null || t.removeEventListener("transitionend", x);
78
79
  };
79
80
  }, [r]), v(() => {
80
81
  if (!(u || !i))
@@ -83,23 +84,24 @@ function H({
83
84
  }, d), () => {
84
85
  o.current && clearTimeout(o.current);
85
86
  };
86
- }, [u, d, i, n]), S ? null : L(
87
- /* @__PURE__ */ z(
88
- R,
87
+ }, [u, d, i, n]), k ? null : R(
88
+ /* @__PURE__ */ A(
89
+ T,
89
90
  {
90
91
  ref: s,
91
92
  transitionDuration: l,
92
93
  ease: r ? "in" : "out",
94
+ maxWidth: b,
93
95
  style: {
94
96
  opacity: i ? 1 : 0,
95
97
  transform: i ? "translate3d(-50%, 0, 0) scale(1)" : "translate3d(-50%, 0, 0) scale(0.97)",
96
98
  ...w
97
99
  },
98
- ...b,
100
+ ...S,
99
101
  children: [
100
- f && /* @__PURE__ */ c(T, { children: f }),
101
- /* @__PURE__ */ c(j, { children: e }),
102
- m && /* @__PURE__ */ c(E, { children: m })
102
+ f && /* @__PURE__ */ c(j, { children: f }),
103
+ /* @__PURE__ */ c(E, { children: e }),
104
+ m && /* @__PURE__ */ c(F, { children: m })
103
105
  ]
104
106
  }
105
107
  ),
@@ -107,5 +109,5 @@ function H({
107
109
  );
108
110
  }
109
111
  export {
110
- H as default
112
+ N as default
111
113
  };
@@ -6,6 +6,7 @@ export interface SnackbarProps extends ComponentPropsWithRef<"div">, UtilityProp
6
6
  transitionDuration?: number;
7
7
  startIcon?: ReactNode;
8
8
  action?: ReactNode;
9
+ maxWidth?: string;
9
10
  autoHideDuration?: number;
10
11
  disableAutoHide?: boolean;
11
12
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@shiflo/ui",
3
3
  "description": "Shiflo React UI Components",
4
- "version": "0.0.13",
4
+ "version": "0.0.15",
5
5
  "type": "module",
6
6
  "files": [
7
7
  "dist"