@shiflo/ui 0.1.7 → 0.2.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 (36) hide show
  1. package/dist/assets/icons/index.mjs +38 -26
  2. package/dist/assets/icons/index.ts-BhlTWUs_.js +52 -0
  3. package/dist/assets/icons/solid/arrow-left-solid.svg-C16XJbK9.js +5 -0
  4. package/dist/assets/icons/solid/chevron-left-solid.svg-CrKzZ71H.js +5 -0
  5. package/dist/assets/icons/solid/circle-check-solid.svg-D2Pv_oiO.js +5 -0
  6. package/dist/assets/icons/solid/circle-exclamation-solid.svg-CuZt_q4T.js +5 -0
  7. package/dist/assets/icons/solid/circle-info-solid.svg-eMJtJJRm.js +5 -0
  8. package/dist/assets/icons/solid/circle-plus-solid.svg-wYCF_uVS.js +5 -0
  9. package/dist/assets/icons/solid/index.d.ts +6 -0
  10. package/dist/assets/icons/solid/index.mjs +42 -30
  11. package/dist/components/BottomSheet/BottomSheet.d.ts +2 -2
  12. package/dist/components/BottomSheet/BottomSheet.mjs +77 -61
  13. package/dist/components/BottomSheet/BottomSheet.typing.d.ts +2 -4
  14. package/dist/components/Button/Button.mjs +112 -178
  15. package/dist/components/Button/Button.typing.d.ts +2 -3
  16. package/dist/components/Dialog/Dialog.mjs +36 -37
  17. package/dist/components/Dialog/Dialog.typing.d.ts +2 -3
  18. package/dist/components/Icon/Icon.d.ts +1 -1
  19. package/dist/components/Icon/Icon.mjs +11 -23
  20. package/dist/components/Icon/Icon.typing.d.ts +2 -2
  21. package/dist/components/Overlay/Overlay.d.ts +1 -1
  22. package/dist/components/Overlay/Overlay.mjs +55 -53
  23. package/dist/components/Overlay/Overlay.typing.d.ts +3 -2
  24. package/dist/components/Snackbar/Snackbar.mjs +59 -60
  25. package/dist/components/Snackbar/Snackbar.typing.d.ts +3 -3
  26. package/dist/components/Switch/Switch.mjs +35 -50
  27. package/dist/components/Switch/Switch.typing.d.ts +3 -3
  28. package/dist/components/Tag/Tag.mjs +8 -9
  29. package/dist/components/Tag/Tag.typing.d.ts +2 -2
  30. package/dist/components/TextField/TextField.mjs +21 -22
  31. package/dist/components/TextField/TextField.typing.d.ts +2 -3
  32. package/dist/components/Typography/Typography.mjs +14 -15
  33. package/dist/theme/dark.mjs +10 -10
  34. package/dist/theme/light.mjs +8 -8
  35. package/package.json +1 -3
  36. package/dist/assets/icons/index.ts-Bfm0GTNS.js +0 -40
@@ -1,36 +1,48 @@
1
- import { S as a } from "./line/calendar-line.svg-DHsuXoUL.js";
2
- import { S } from "./solid/calendar-days-solid.svg-CIj8vf6t.js";
3
- import { S as s } from "./solid/calendar-lines-solid.svg-D2qG_E7t.js";
4
- import { S as d } from "./solid/calendar-week-solid.svg-CVmrJtif.js";
5
- import { S as m } from "./solid/calendars-solid.svg-rClh_xBu.js";
1
+ import { S as e } from "./line/calendar-line.svg-DHsuXoUL.js";
2
+ import { S as a } from "./solid/calendar-days-solid.svg-CIj8vf6t.js";
3
+ import { S as i } from "./solid/calendar-lines-solid.svg-D2qG_E7t.js";
4
+ import { S as t } from "./solid/calendar-week-solid.svg-CVmrJtif.js";
5
+ import { S as f } from "./solid/calendars-solid.svg-rClh_xBu.js";
6
6
  import { S as p } from "./solid/gear-solid.svg-C6vEx0Wx.js";
7
7
  import { S as n } from "./solid/grid-2-solid.svg-BRtzwK6Y.js";
8
- import { S as k } from "./solid/pen-to-square-solid.svg-DUdNcuTM.js";
9
- import { S as c } from "./solid/plus-solid.svg-piiaS3kO.js";
10
- import { S as B } from "./solid/rotate-right-solid.svg-CYW200XH.js";
11
- import { S as G } from "./solid/xmark-solid.svg-Ce8xHlZn.js";
12
- import { S as P } from "./solid/check-solid.svg-C41sTTzR.js";
8
+ import { S as c } from "./solid/pen-to-square-solid.svg-DUdNcuTM.js";
9
+ import { S as h } from "./solid/plus-solid.svg-piiaS3kO.js";
10
+ import { S as L } from "./solid/rotate-right-solid.svg-CYW200XH.js";
11
+ import { S as B } from "./solid/xmark-solid.svg-Ce8xHlZn.js";
12
+ import { S as G } from "./solid/check-solid.svg-C41sTTzR.js";
13
13
  import { S as T } from "./solid/trash-solid.svg-iJSf_6Y3.js";
14
14
  import { S as q } from "./solid/minus-solid.svg-BBiGvc-2.js";
15
- import { S as z } from "./solid/briefcase-blank-solid.svg-6ppQL_Z4.js";
16
- import { S as M } from "./solid/chart-simple-horizontal-solid.svg-znTJSeQj.js";
17
- import { S as X } from "./solid/clock-desk-solid.svg-Dvm3Xip1.js";
15
+ import { S as w } from "./solid/briefcase-blank-solid.svg-6ppQL_Z4.js";
16
+ import { S as z } from "./solid/chart-simple-horizontal-solid.svg-znTJSeQj.js";
17
+ import { S as E } from "./solid/clock-desk-solid.svg-Dvm3Xip1.js";
18
+ import { S as I } from "./solid/circle-check-solid.svg-D2Pv_oiO.js";
19
+ import { S as W } from "./solid/arrow-left-solid.svg-C16XJbK9.js";
20
+ import { S as b } from "./solid/circle-info-solid.svg-eMJtJJRm.js";
21
+ import { S as F } from "./solid/circle-exclamation-solid.svg-CuZt_q4T.js";
22
+ import { S as K } from "./solid/circle-plus-solid.svg-wYCF_uVS.js";
23
+ import { S as O } from "./solid/chevron-left-solid.svg-CrKzZ71H.js";
18
24
  export {
19
- z as BriefcaseBlankSolid,
20
- S as CalendarDaysSolid,
21
- a as CalendarLine,
22
- s as CalendarLinesSolid,
23
- d as CalendarWeekSolid,
24
- m as CalendarsSolid,
25
- M as ChartSimpleHorizontalSolid,
26
- P as CheckSolid,
27
- X as ClockDeskSolid,
25
+ W as ArrowLeftSolid,
26
+ w as BriefcaseBlankSolid,
27
+ a as CalendarDaysSolid,
28
+ e as CalendarLine,
29
+ i as CalendarLinesSolid,
30
+ t as CalendarWeekSolid,
31
+ f as CalendarsSolid,
32
+ z as ChartSimpleHorizontalSolid,
33
+ G as CheckSolid,
34
+ O as ChevronLeftSolid,
35
+ I as CircleCheckSolid,
36
+ F as CircleExclamationSolid,
37
+ b as CircleInfoSolid,
38
+ K as CirclePlusSolid,
39
+ E as ClockDeskSolid,
28
40
  p as GearSolid,
29
41
  n as Grid2Solid,
30
42
  q as MinusSolid,
31
- k as PenToSquareSolid,
32
- c as PlusSolid,
33
- B as RotateRightSolid,
43
+ c as PenToSquareSolid,
44
+ h as PlusSolid,
45
+ L as RotateRightSolid,
34
46
  T as TrashSolid,
35
- G as XmarkSolid
47
+ B as XmarkSolid
36
48
  };
@@ -0,0 +1,52 @@
1
+ import { S as o } from "./line/calendar-line.svg-DHsuXoUL.js";
2
+ import { S } from "./solid/calendar-days-solid.svg-CIj8vf6t.js";
3
+ import { S as i } from "./solid/calendar-lines-solid.svg-D2qG_E7t.js";
4
+ import { S as r } from "./solid/calendar-week-solid.svg-CVmrJtif.js";
5
+ import { S as l } from "./solid/calendars-solid.svg-rClh_xBu.js";
6
+ import { S as a } from "./solid/gear-solid.svg-C6vEx0Wx.js";
7
+ import { S as e } from "./solid/grid-2-solid.svg-BRtzwK6Y.js";
8
+ import { S as d } from "./solid/pen-to-square-solid.svg-DUdNcuTM.js";
9
+ import { S as m } from "./solid/plus-solid.svg-piiaS3kO.js";
10
+ import { S as t } from "./solid/rotate-right-solid.svg-CYW200XH.js";
11
+ import { S as s } from "./solid/xmark-solid.svg-Ce8xHlZn.js";
12
+ import { S as f } from "./solid/check-solid.svg-C41sTTzR.js";
13
+ import { S as n } from "./solid/trash-solid.svg-iJSf_6Y3.js";
14
+ import { S as g } from "./solid/minus-solid.svg-BBiGvc-2.js";
15
+ import { S as p } from "./solid/briefcase-blank-solid.svg-6ppQL_Z4.js";
16
+ import { S as C } from "./solid/chart-simple-horizontal-solid.svg-znTJSeQj.js";
17
+ import { S as v } from "./solid/clock-desk-solid.svg-Dvm3Xip1.js";
18
+ import { S as c } from "./solid/circle-check-solid.svg-D2Pv_oiO.js";
19
+ import { S as k } from "./solid/arrow-left-solid.svg-C16XJbK9.js";
20
+ import { S as h } from "./solid/circle-info-solid.svg-eMJtJJRm.js";
21
+ import { S as u } from "./solid/circle-exclamation-solid.svg-CuZt_q4T.js";
22
+ import { S as L } from "./solid/circle-plus-solid.svg-wYCF_uVS.js";
23
+ import { S as P } from "./solid/chevron-left-solid.svg-CrKzZ71H.js";
24
+ const K = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
25
+ __proto__: null,
26
+ ArrowLeftSolid: k,
27
+ BriefcaseBlankSolid: p,
28
+ CalendarDaysSolid: S,
29
+ CalendarLine: o,
30
+ CalendarLinesSolid: i,
31
+ CalendarWeekSolid: r,
32
+ CalendarsSolid: l,
33
+ ChartSimpleHorizontalSolid: C,
34
+ CheckSolid: f,
35
+ ChevronLeftSolid: P,
36
+ CircleCheckSolid: c,
37
+ CircleExclamationSolid: u,
38
+ CircleInfoSolid: h,
39
+ CirclePlusSolid: L,
40
+ ClockDeskSolid: v,
41
+ GearSolid: a,
42
+ Grid2Solid: e,
43
+ MinusSolid: g,
44
+ PenToSquareSolid: d,
45
+ PlusSolid: m,
46
+ RotateRightSolid: t,
47
+ TrashSolid: n,
48
+ XmarkSolid: s
49
+ }, Symbol.toStringTag, { value: "Module" }));
50
+ export {
51
+ K as S
52
+ };
@@ -0,0 +1,5 @@
1
+ import * as e from "react";
2
+ const r = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...t }, /* @__PURE__ */ e.createElement("path", { fill: "currentColor", d: "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z" }));
3
+ export {
4
+ r as S
5
+ };
@@ -0,0 +1,5 @@
1
+ import * as e from "react";
2
+ const o = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", ...t }, /* @__PURE__ */ e.createElement("path", { fill: "currentColor", d: "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" }));
3
+ export {
4
+ o as S
5
+ };
@@ -0,0 +1,5 @@
1
+ import * as e from "react";
2
+ const c = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...t }, /* @__PURE__ */ e.createElement("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" }));
3
+ export {
4
+ c as S
5
+ };
@@ -0,0 +1,5 @@
1
+ import * as e from "react";
2
+ const l = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...t }, /* @__PURE__ */ e.createElement("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" }));
3
+ export {
4
+ l as S
5
+ };
@@ -0,0 +1,5 @@
1
+ import * as e from "react";
2
+ const t = (l) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...l }, /* @__PURE__ */ e.createElement("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" }));
3
+ export {
4
+ t as S
5
+ };
@@ -0,0 +1,5 @@
1
+ import * as e from "react";
2
+ const t = (l) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...l }, /* @__PURE__ */ e.createElement("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z" }));
3
+ export {
4
+ t as S
5
+ };
@@ -14,3 +14,9 @@ export { default as MinusSolid } from './minus-solid.svg';
14
14
  export { default as BriefcaseBlankSolid } from './briefcase-blank-solid.svg';
15
15
  export { default as ChartSimpleHorizontalSolid } from './chart-simple-horizontal-solid.svg';
16
16
  export { default as ClockDeskSolid } from './clock-desk-solid.svg';
17
+ export { default as CircleCheckSolid } from './circle-check-solid.svg';
18
+ export { default as ArrowLeftSolid } from './arrow-left-solid.svg';
19
+ export { default as CircleInfoSolid } from './circle-info-solid.svg';
20
+ export { default as CircleExclamationSolid } from './circle-exclamation-solid.svg';
21
+ export { default as CirclePlusSolid } from './circle-plus-solid.svg';
22
+ export { default as ChevronLeftSolid } from './chevron-left-solid.svg';
@@ -1,34 +1,46 @@
1
- import { S as a } from "./calendar-days-solid.svg-CIj8vf6t.js";
2
- import { S as e } from "./calendar-lines-solid.svg-D2qG_E7t.js";
3
- import { S as s } from "./calendar-week-solid.svg-CVmrJtif.js";
4
- import { S as d } from "./calendars-solid.svg-rClh_xBu.js";
5
- import { S as m } from "./gear-solid.svg-C6vEx0Wx.js";
1
+ import { S as e } from "./calendar-days-solid.svg-CIj8vf6t.js";
2
+ import { S as a } from "./calendar-lines-solid.svg-D2qG_E7t.js";
3
+ import { S as i } from "./calendar-week-solid.svg-CVmrJtif.js";
4
+ import { S as t } from "./calendars-solid.svg-rClh_xBu.js";
5
+ import { S as f } from "./gear-solid.svg-C6vEx0Wx.js";
6
6
  import { S as p } from "./grid-2-solid.svg-BRtzwK6Y.js";
7
- import { S as n } from "./pen-to-square-solid.svg-DUdNcuTM.js";
8
- import { S as k } from "./plus-solid.svg-piiaS3kO.js";
9
- import { S as c } from "./rotate-right-solid.svg-CYW200XH.js";
10
- import { S as B } from "./xmark-solid.svg-Ce8xHlZn.js";
11
- import { S as G } from "./check-solid.svg-C41sTTzR.js";
12
- import { S as R } from "./trash-solid.svg-iJSf_6Y3.js";
13
- import { S as g } from "./minus-solid.svg-BBiGvc-2.js";
14
- import { S as y } from "./briefcase-blank-solid.svg-6ppQL_Z4.js";
15
- import { S as H } from "./chart-simple-horizontal-solid.svg-znTJSeQj.js";
16
- import { S as M } from "./clock-desk-solid.svg-Dvm3Xip1.js";
7
+ import { S as C } from "./pen-to-square-solid.svg-DUdNcuTM.js";
8
+ import { S as c } from "./plus-solid.svg-piiaS3kO.js";
9
+ import { S as h } from "./rotate-right-solid.svg-CYW200XH.js";
10
+ import { S as L } from "./xmark-solid.svg-Ce8xHlZn.js";
11
+ import { S as B } from "./check-solid.svg-C41sTTzR.js";
12
+ import { S as G } from "./trash-solid.svg-iJSf_6Y3.js";
13
+ import { S as T } from "./minus-solid.svg-BBiGvc-2.js";
14
+ import { S as q } from "./briefcase-blank-solid.svg-6ppQL_Z4.js";
15
+ import { S as w } from "./chart-simple-horizontal-solid.svg-znTJSeQj.js";
16
+ import { S as z } from "./clock-desk-solid.svg-Dvm3Xip1.js";
17
+ import { S as E } from "./circle-check-solid.svg-D2Pv_oiO.js";
18
+ import { S as I } from "./arrow-left-solid.svg-C16XJbK9.js";
19
+ import { S as W } from "./circle-info-solid.svg-eMJtJJRm.js";
20
+ import { S as b } from "./circle-exclamation-solid.svg-CuZt_q4T.js";
21
+ import { S as F } from "./circle-plus-solid.svg-wYCF_uVS.js";
22
+ import { S as K } from "./chevron-left-solid.svg-CrKzZ71H.js";
17
23
  export {
18
- y as BriefcaseBlankSolid,
19
- a as CalendarDaysSolid,
20
- e as CalendarLinesSolid,
21
- s as CalendarWeekSolid,
22
- d as CalendarsSolid,
23
- H as ChartSimpleHorizontalSolid,
24
- G as CheckSolid,
25
- M as ClockDeskSolid,
26
- m as GearSolid,
24
+ I as ArrowLeftSolid,
25
+ q as BriefcaseBlankSolid,
26
+ e as CalendarDaysSolid,
27
+ a as CalendarLinesSolid,
28
+ i as CalendarWeekSolid,
29
+ t as CalendarsSolid,
30
+ w as ChartSimpleHorizontalSolid,
31
+ B as CheckSolid,
32
+ K as ChevronLeftSolid,
33
+ E as CircleCheckSolid,
34
+ b as CircleExclamationSolid,
35
+ W as CircleInfoSolid,
36
+ F as CirclePlusSolid,
37
+ z as ClockDeskSolid,
38
+ f as GearSolid,
27
39
  p as Grid2Solid,
28
- g as MinusSolid,
29
- n as PenToSquareSolid,
30
- k as PlusSolid,
31
- c as RotateRightSolid,
32
- R as TrashSolid,
33
- B as XmarkSolid
40
+ T as MinusSolid,
41
+ C as PenToSquareSolid,
42
+ c as PlusSolid,
43
+ h as RotateRightSolid,
44
+ G as TrashSolid,
45
+ L as XmarkSolid
34
46
  };
@@ -1,3 +1,3 @@
1
- import { BottomSheetProps } from '.';
2
- declare function BottomSheet({ open, onClose, children, transitionDuration, maxWidth, onClick, ref, hideDragHandleBar, hideOverlay, style, dragThreshold, ...props }: BottomSheetProps): import("@emotion/react/jsx-runtime").JSX.Element;
1
+ import { BottomSheetProps } from './BottomSheet.typing';
2
+ declare function BottomSheet({ open, onClose, children, transitionDuration, maxWidth, onClick, ref, hideDragHandleBar, hideOverlay, style, ...props }: BottomSheetProps): import("@emotion/react/jsx-runtime").JSX.Element;
3
3
  export default BottomSheet;
@@ -1,9 +1,8 @@
1
- import { jsx as o, jsxs as H } from "@emotion/react/jsx-runtime";
2
- import { useState as R, useRef as a, useImperativeHandle as S, useEffect as j } from "react";
3
- import D from "../Overlay/Overlay.mjs";
4
- import n from "@emotion/styled";
5
- import { motion as I } from "motion/react";
6
- const O = n(I.div)`
1
+ import { jsx as g, jsxs as V } from "@emotion/react/jsx-runtime";
2
+ import { useState as z, useRef as o, useImperativeHandle as C, useEffect as M } from "react";
3
+ import y from "@emotion/styled";
4
+ import G from "../Overlay/Overlay.mjs";
5
+ const J = y.div`
7
6
  width: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
8
7
  max-width: ${({ maxWidth: t = "375px" }) => t};
9
8
  max-height: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
@@ -16,7 +15,11 @@ const O = n(I.div)`
16
15
  palette: { common: t }
17
16
  }
18
17
  }) => t.background};
19
- `, A = n.div`
18
+ transition:
19
+ transform ${({ transitionDuration: t }) => `${t}ms`}
20
+ ${({ ease: t }) => t === "in" ? "ease-out" : "ease-in"},
21
+ background-color 0.2s;
22
+ `, K = y.div`
20
23
  position: sticky;
21
24
  top: 0;
22
25
  left: 0;
@@ -30,8 +33,8 @@ const O = n(I.div)`
30
33
  palette: { common: t }
31
34
  }
32
35
  }) => t.background};
33
- transition: background-color 0.3s;
34
- `, F = n.div`
36
+ transition: background-color 0.2s;
37
+ `, N = y.div`
35
38
  width: 24px;
36
39
  height: 4px;
37
40
  border-radius: ${({ theme: { radius: t } }) => t[100]};
@@ -40,71 +43,84 @@ const O = n(I.div)`
40
43
  palette: { border: t }
41
44
  }
42
45
  }) => t.main};
43
- transition: background-color 0.3s;
46
+ transition: background-color 0.2s;
44
47
  `;
45
- function z({
48
+ function _({
46
49
  open: t,
47
- onClose: r,
48
- children: m,
49
- transitionDuration: i = 0.3,
50
- maxWidth: d = "375px",
51
- onClick: c,
52
- ref: f,
53
- hideDragHandleBar: p,
54
- hideOverlay: u,
55
- style: g,
56
- dragThreshold: h = 100,
57
- ...y
50
+ onClose: d,
51
+ children: S,
52
+ transitionDuration: a = 200,
53
+ maxWidth: T = "375px",
54
+ onClick: b,
55
+ ref: j,
56
+ hideDragHandleBar: I,
57
+ hideOverlay: O,
58
+ style: A,
59
+ ...F
58
60
  }) {
59
- const [b, s] = R(!1), l = a(null), $ = a(null), x = a(null);
60
- S(f, () => l.current);
61
- const v = (e) => {
62
- e.stopPropagation(), typeof c == "function" && c(e);
63
- }, k = (e, B) => {
64
- const { offset: w, velocity: E } = B;
65
- (w.y > h || E.y > 500) && typeof r == "function" && r();
61
+ const [E, $] = z(!1), m = o(null), L = o(null), c = o(null), u = o(!1), f = o(0), l = o(0), h = o(0), v = o(0), p = o(0), W = o(0.25);
62
+ C(j, () => m.current);
63
+ const q = (e) => {
64
+ e.stopPropagation(), typeof b == "function" && b(e);
66
65
  };
67
- return j(() => {
66
+ return M(() => {
68
67
  let e;
69
68
  return t ? e = requestAnimationFrame(() => {
70
- s(!0);
71
- }) : s(!1), () => {
69
+ $(!0);
70
+ }) : $(!1), () => {
72
71
  e && cancelAnimationFrame(e);
73
72
  };
74
- }, [t]), /* @__PURE__ */ o(
75
- D,
73
+ }, [t]), M(() => {
74
+ const e = m.current, n = L.current, x = (r) => {
75
+ e && (e.scrollTop > 0 || (u.current = !0, f.current = r, l.current = r, h.current = e.offsetHeight, p.current = Date.now(), e.style.transition = "none", e.style.cursor = "grabbing", n && (n.style.transition = "none"), c.current && (c.current.style.cursor = "grabbing")));
76
+ }, k = (r) => {
77
+ if (!e || !u.current) return;
78
+ const i = r - f.current;
79
+ if (i < 0) return;
80
+ l.current = r;
81
+ const B = Date.now(), D = B - p.current;
82
+ if (D > 0) {
83
+ const P = l.current;
84
+ v.current = (r - P) / D, p.current = B;
85
+ }
86
+ n && (n.style.opacity = `${Math.max(0, 1 - i / (h.current * 2))}`), e.style.transform = `translate3d(0, ${i}px, 0)`;
87
+ }, s = () => {
88
+ if (!e || !u.current) return;
89
+ u.current = !1, e.style.cursor = "default", c.current && (c.current.style.cursor = "grab");
90
+ const r = l.current - f.current, i = h.current * W.current;
91
+ e.style.transition = `transform ${a}ms ease-out`, n && (n.style.transition = `opacity ${a}ms ease-out`), r > i || v.current > 0.5 && v.current > 0 ? (e.style.transform = "translate3d(0, 200%, 0)", n && (n.style.opacity = "0"), d?.()) : (e.style.transform = "translate3d(0, 0, 0)", n && (n.style.opacity = "1"));
92
+ }, R = (r) => x(r.clientY), w = (r) => k(r.clientY), H = (r) => x(r.touches[0].clientY), Y = (r) => k(r.touches[0].clientY);
93
+ return e?.addEventListener("mousedown", R), e?.addEventListener("mousemove", w), e?.addEventListener("mouseup", s), e?.addEventListener("mouseleave", s), e?.addEventListener("touchstart", H), e?.addEventListener("touchmove", Y), e?.addEventListener("touchend", s), e?.addEventListener("touchcancel", s), () => {
94
+ e?.removeEventListener("mousedown", R), e?.removeEventListener("mousemove", w), e?.removeEventListener("mouseup", s), e?.removeEventListener("mouseleave", s), e?.removeEventListener("touchstart", H), e?.removeEventListener("touchmove", Y), e?.removeEventListener("touchend", s), e?.removeEventListener("touchcancel", s);
95
+ };
96
+ }, [E, d, a]), /* @__PURE__ */ g(
97
+ G,
76
98
  {
77
- ref: $,
99
+ ref: L,
78
100
  open: t,
79
- onClose: r,
80
- transitionDuration: i,
101
+ onClose: d,
102
+ transitionDuration: a,
81
103
  placement: "center-bottom",
82
- hideOverlay: u,
83
- children: /* @__PURE__ */ H(
84
- O,
104
+ css: O ? {
105
+ pointerEvents: "none",
106
+ backgroundColor: "transparent !important"
107
+ } : void 0,
108
+ children: /* @__PURE__ */ V(
109
+ J,
85
110
  {
86
- ref: l,
87
- drag: "y",
88
- dragConstraints: { top: 0, bottom: 0 },
89
- dragElastic: { top: 0, bottom: 0.3 },
90
- dragMomentum: !1,
91
- onDragEnd: k,
92
- maxWidth: d,
93
- onClick: v,
94
- initial: { y: "200%" },
95
- animate: {
96
- y: b ? 0 : "200%"
97
- },
98
- transition: {
99
- type: "spring",
100
- duration: i,
101
- bounce: 0.2
111
+ ref: m,
112
+ ease: t ? "in" : "out",
113
+ transitionDuration: a,
114
+ maxWidth: T,
115
+ onClick: q,
116
+ ...F,
117
+ style: {
118
+ transform: `translate3d(0, ${E ? "0" : "200%"}, 0)`,
119
+ ...A
102
120
  },
103
- style: g,
104
- ...y,
105
121
  children: [
106
- !p && /* @__PURE__ */ o(A, { ref: x, children: /* @__PURE__ */ o(F, {}) }),
107
- m
122
+ !I && /* @__PURE__ */ g(K, { ref: c, children: /* @__PURE__ */ g(N, {}) }),
123
+ S
108
124
  ]
109
125
  }
110
126
  )
@@ -112,5 +128,5 @@ function z({
112
128
  );
113
129
  }
114
130
  export {
115
- z as default
131
+ _ as default
116
132
  };
@@ -1,12 +1,10 @@
1
- import { PropsWithChildren } from 'react';
1
+ import { ComponentPropsWithRef } from 'react';
2
2
  import { UtilityProps } from '../../typings/utility';
3
- import { HTMLMotionProps } from 'motion/react';
4
- export interface BottomSheetProps extends PropsWithChildren<HTMLMotionProps<"div"> & Pick<UtilityProps, "css">> {
3
+ export interface BottomSheetProps extends ComponentPropsWithRef<"div">, Pick<UtilityProps, "css"> {
5
4
  open?: boolean;
6
5
  onClose?: () => void;
7
6
  transitionDuration?: number;
8
7
  maxWidth?: string;
9
8
  hideDragHandleBar?: boolean;
10
9
  hideOverlay?: boolean;
11
- dragThreshold?: number;
12
10
  }