@orioncactuscorp/ui 1.5.1 → 1.7.0

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 (84) hide show
  1. package/README.md +22 -3
  2. package/dist/components/Accordion/Accordion.css +1 -1
  3. package/dist/components/Accordion/Accordion.js +206 -214
  4. package/dist/components/ActionArea/ActionArea.css +1 -1
  5. package/dist/components/ActionArea/ActionAreaLayout.css +1 -1
  6. package/dist/components/ActionArea/ActionAreaLayout.js +29 -28
  7. package/dist/components/BackgroundIconButton/BackgroundIconButton.css +1 -1
  8. package/dist/components/Badge/Badge.css +1 -1
  9. package/dist/components/Badge/Badge.js +13 -13
  10. package/dist/components/Cell/Cell.css +1 -1
  11. package/dist/components/IconButton/IconButton.css +1 -1
  12. package/dist/components/IconButton/IconButton.js +1 -1
  13. package/dist/components/Loading/Loading.css +1 -1
  14. package/dist/components/Menu/Menu.css +1 -1
  15. package/dist/components/Menu/Menu.js +156 -140
  16. package/dist/components/Modal/Modal.css +1 -1
  17. package/dist/components/Modal/Modal.js +571 -390
  18. package/dist/components/Modal/Modal.module.scss.js +58 -38
  19. package/dist/components/Modal/snapPoints.js +59 -35
  20. package/dist/components/Modal/useModalDrag.js +754 -579
  21. package/dist/components/Modal.js +7 -6
  22. package/dist/components/Radio/Radio.css +1 -1
  23. package/dist/components/Skeleton/Skeleton.css +1 -0
  24. package/dist/components/Skeleton/Skeleton.js +55 -0
  25. package/dist/components/Skeleton/Skeleton.module.scss.js +16 -0
  26. package/dist/components/Skeleton.d.ts +6 -0
  27. package/dist/components/Skeleton.js +4 -0
  28. package/dist/components/TextButton/TextButton.css +1 -1
  29. package/dist/components/TextButton/TextButton.js +45 -48
  30. package/dist/components/internal/DisclosureIndicator.js +39 -0
  31. package/dist/components/internal/Pressable.js +28 -27
  32. package/dist/foundations/motion.css +1 -1
  33. package/dist/foundations/space.css +1 -1
  34. package/dist/foundations.css +2 -2
  35. package/dist/index.js +90 -87
  36. package/dist/react/motion.js +79 -74
  37. package/dist/styles.css +15 -14
  38. package/dist/ui/src/components/Accordion/Accordion.d.ts.map +1 -1
  39. package/dist/ui/src/components/ActionArea/ActionAreaLayout.d.ts.map +1 -1
  40. package/dist/ui/src/components/Menu/Menu.d.ts +1 -1
  41. package/dist/ui/src/components/Menu/Menu.d.ts.map +1 -1
  42. package/dist/ui/src/components/Menu/index.d.ts +1 -1
  43. package/dist/ui/src/components/Menu/index.d.ts.map +1 -1
  44. package/dist/ui/src/components/Menu/types.d.ts +6 -2
  45. package/dist/ui/src/components/Menu/types.d.ts.map +1 -1
  46. package/dist/ui/src/components/Modal/Modal.d.ts +3 -1
  47. package/dist/ui/src/components/Modal/Modal.d.ts.map +1 -1
  48. package/dist/ui/src/components/Modal/contexts.d.ts +2 -0
  49. package/dist/ui/src/components/Modal/contexts.d.ts.map +1 -1
  50. package/dist/ui/src/components/Modal/index.d.ts +2 -2
  51. package/dist/ui/src/components/Modal/index.d.ts.map +1 -1
  52. package/dist/ui/src/components/Modal/snapPoints.d.ts +7 -10
  53. package/dist/ui/src/components/Modal/snapPoints.d.ts.map +1 -1
  54. package/dist/ui/src/components/Modal/types.d.ts +17 -0
  55. package/dist/ui/src/components/Modal/types.d.ts.map +1 -1
  56. package/dist/ui/src/components/Modal/useModalDrag.d.ts +2 -1
  57. package/dist/ui/src/components/Modal/useModalDrag.d.ts.map +1 -1
  58. package/dist/ui/src/components/Skeleton/Skeleton.d.ts +4 -0
  59. package/dist/ui/src/components/Skeleton/Skeleton.d.ts.map +1 -0
  60. package/dist/ui/src/components/Skeleton/index.d.ts +3 -0
  61. package/dist/ui/src/components/Skeleton/index.d.ts.map +1 -0
  62. package/dist/ui/src/components/Skeleton/types.d.ts +17 -0
  63. package/dist/ui/src/components/Skeleton/types.d.ts.map +1 -0
  64. package/dist/ui/src/components/TextButton/TextButton.d.ts.map +1 -1
  65. package/dist/ui/src/components/TextButton/types.d.ts +4 -2
  66. package/dist/ui/src/components/TextButton/types.d.ts.map +1 -1
  67. package/dist/ui/src/components/internal/DisclosureIndicator.d.ts +10 -0
  68. package/dist/ui/src/components/internal/DisclosureIndicator.d.ts.map +1 -0
  69. package/dist/ui/src/components/internal/Pressable.d.ts +8 -1
  70. package/dist/ui/src/components/internal/Pressable.d.ts.map +1 -1
  71. package/dist/ui/src/index.d.ts +5 -3
  72. package/dist/ui/src/index.d.ts.map +1 -1
  73. package/dist/ui/src/react/motion/index.d.ts +3 -1
  74. package/dist/ui/src/react/motion/index.d.ts.map +1 -1
  75. package/dist/ui/src/utils/motion.d.ts +2 -2
  76. package/dist/ui/src/utils/motion.d.ts.map +1 -1
  77. package/dist/utils/motion.js +24 -18
  78. package/dist/vscode/oc-ui-vars.css +6 -4
  79. package/package.json +1 -1
  80. package/src/scss/foundations/motion.scss +3 -1
  81. package/src/scss/foundations/responsive.test.ts +22 -0
  82. package/src/scss/foundations/space.scss +9 -4
  83. package/src/scss/mixins/_motion.scss +5 -8
  84. package/src/scss/mixins/_motion.test.ts +20 -0
@@ -1,48 +1,68 @@
1
- import './Modal.css';const o = "oc-Modal-module__trigger__B-N3y", e = "oc-Modal-module__backdrop__jYpTA", d = "oc-Modal-module__viewport__8dW9u", _ = "oc-Modal-module__surfaceMotion__fJnTQ", l = "oc-Modal-module__bottomFill__wKrvv", a = "oc-Modal-module__surface__FnAX8", c = "oc-Modal-module__header__NS30G", t = "oc-Modal-module__footer__Oyz-R", n = "oc-Modal-module__small__qdBEU", r = "oc-Modal-module__medium__JRDXg", s = "oc-Modal-module__large__O42Af", m = "oc-Modal-module__fixed__Gj1Dv", i = "oc-Modal-module__handle__Fan4V", u = "oc-Modal-module__headerInner__F5nxn", M = "oc-Modal-module__headerLeading__v735-", h = "oc-Modal-module__headerTrailing__hQamr", g = "oc-Modal-module__headerTitle__tJ2Qv", f = "oc-Modal-module__close__058gy", b = "oc-Modal-module__body__3zIj9", y = "oc-Modal-module__bodyContainer__t57Y6", p = "oc-Modal-module__bodyContent__fRK23", v = {
1
+ import './Modal.css';const o = "oc-Modal-module__trigger__B-N3y", a = "oc-Modal-module__backdrop__jYpTA", n = "oc-Modal-module__viewport__8dW9u", e = "oc-Modal-module__surfaceMotion__fJnTQ", _ = "oc-Modal-module__bottomFill__wKrvv", l = "oc-Modal-module__surface__FnAX8", d = "oc-Modal-module__header__NS30G", i = "oc-Modal-module__footer__Oyz-R", t = "oc-Modal-module__small__qdBEU", c = "oc-Modal-module__medium__JRDXg", r = "oc-Modal-module__large__O42Af", g = "oc-Modal-module__fixed__Gj1Dv", m = "oc-Modal-module__navigationSection__oHkbv", s = "oc-Modal-module__handle__Fan4V", u = "oc-Modal-module__headerInner__F5nxn", v = "oc-Modal-module__headerLeading__v735-", M = "oc-Modal-module__headerTrailing__hQamr", h = "oc-Modal-module__headerTitle__tJ2Qv", f = "oc-Modal-module__close__058gy", b = "oc-Modal-module__navigationDialogTitle__vkGhC", T = "oc-Modal-module__navigationHeading__XioS6", y = "oc-Modal-module__navigation__ldQt-", P = "oc-Modal-module__navigationTitle__ncfjD", I = "oc-Modal-module__navigationIndicator__swRE1", F = "oc-Modal-module__navigationPanel__conuU", k = "oc-Modal-module__navigationPanelScroll__UO-ue", p = "oc-Modal-module__navigationPanelFrame__RljMi", S = "oc-Modal-module__navigationPanelInner__k0D4f", j = "oc-Modal-module__body__3zIj9", C = "oc-Modal-module__bodyContainer__t57Y6", D = "oc-Modal-module__bodyContent__fRK23", R = {
2
2
  trigger: o,
3
- backdrop: e,
4
- viewport: d,
5
- surfaceMotion: _,
6
- bottomFill: l,
7
- surface: a,
3
+ backdrop: a,
4
+ viewport: n,
5
+ surfaceMotion: e,
6
+ bottomFill: _,
7
+ surface: l,
8
8
  "oc-modal-reject-shake": "oc-Modal-module__oc-modal-reject-shake__RJrNe",
9
- header: c,
10
- footer: t,
11
- small: n,
12
- medium: r,
13
- large: s,
14
- fixed: m,
15
- handle: i,
9
+ header: d,
10
+ footer: i,
11
+ small: t,
12
+ medium: c,
13
+ large: r,
14
+ fixed: g,
15
+ navigationSection: m,
16
+ handle: s,
16
17
  headerInner: u,
17
- headerLeading: M,
18
- headerTrailing: h,
19
- headerTitle: g,
18
+ headerLeading: v,
19
+ headerTrailing: M,
20
+ headerTitle: h,
20
21
  close: f,
21
- body: b,
22
- bodyContainer: y,
23
- bodyContent: p
22
+ navigationDialogTitle: b,
23
+ navigationHeading: T,
24
+ navigation: y,
25
+ navigationTitle: P,
26
+ navigationIndicator: I,
27
+ navigationPanel: F,
28
+ navigationPanelScroll: k,
29
+ navigationPanelFrame: p,
30
+ navigationPanelInner: S,
31
+ body: j,
32
+ bodyContainer: C,
33
+ bodyContent: D
24
34
  };
25
35
  export {
26
- e as backdrop,
27
- b as body,
28
- y as bodyContainer,
29
- p as bodyContent,
30
- l as bottomFill,
36
+ a as backdrop,
37
+ j as body,
38
+ C as bodyContainer,
39
+ D as bodyContent,
40
+ _ as bottomFill,
31
41
  f as close,
32
- v as default,
33
- m as fixed,
34
- t as footer,
35
- i as handle,
36
- c as header,
42
+ R as default,
43
+ g as fixed,
44
+ i as footer,
45
+ s as handle,
46
+ d as header,
37
47
  u as headerInner,
38
- M as headerLeading,
39
- g as headerTitle,
40
- h as headerTrailing,
41
- s as large,
42
- r as medium,
43
- n as small,
44
- a as surface,
45
- _ as surfaceMotion,
48
+ v as headerLeading,
49
+ h as headerTitle,
50
+ M as headerTrailing,
51
+ r as large,
52
+ c as medium,
53
+ y as navigation,
54
+ b as navigationDialogTitle,
55
+ T as navigationHeading,
56
+ I as navigationIndicator,
57
+ F as navigationPanel,
58
+ p as navigationPanelFrame,
59
+ S as navigationPanelInner,
60
+ k as navigationPanelScroll,
61
+ m as navigationSection,
62
+ P as navigationTitle,
63
+ t as small,
64
+ l as surface,
65
+ e as surfaceMotion,
46
66
  o as trigger,
47
- d as viewport
67
+ n as viewport
48
68
  };
@@ -1,31 +1,31 @@
1
- function x(e, t) {
1
+ function y(e, t) {
2
2
  return typeof e == "string" ? Number.parseFloat(e) : e > 1 ? e : e * t;
3
3
  }
4
4
  function v(e) {
5
5
  return Number.isFinite(e) && e > 0;
6
6
  }
7
- function w({
7
+ function X({
8
8
  snapPoints: e,
9
9
  defaultSnapPoint: t,
10
- viewportHeight: a
10
+ viewportHeight: i
11
11
  }) {
12
12
  if (!e?.length) return;
13
- const o = e.map(
14
- (c) => x(c, a)
15
- ), i = o.filter(v).sort((c, u) => c - u);
16
- if (!i.length) return;
17
- const n = Math.max(...i), r = t !== void 0 ? e.findIndex((c) => c === t) : -1, d = r >= 0 && o[r] ? o[r] : n;
13
+ const a = e.map(
14
+ (c) => y(c, i)
15
+ ), r = a.filter(v).sort((c, g) => c - g);
16
+ if (!r.length) return;
17
+ const n = Math.max(...r), o = t !== void 0 ? e.findIndex((c) => c === t) : -1, u = o >= 0 && a[o] ? a[o] : n;
18
18
  return {
19
- snapHeights: i,
19
+ snapHeights: r,
20
20
  sheetHeight: n,
21
- visibleTranslate: Math.max(0, n - d)
21
+ visibleTranslate: Math.max(0, n - u)
22
22
  };
23
23
  }
24
- function h(e, t) {
25
- const a = Number.parseFloat(e.getPropertyValue(t));
26
- return Number.isFinite(a) ? a : 0;
24
+ function l(e, t) {
25
+ const i = Number.parseFloat(e.getPropertyValue(t));
26
+ return Number.isFinite(i) ? i : 0;
27
27
  }
28
- function y(e, t) {
28
+ function w(e, t) {
29
29
  switch (e) {
30
30
  case "left":
31
31
  return { x: t.minX, y: 0 };
@@ -47,33 +47,57 @@ function y(e, t) {
47
47
  return { x: 0, y: 0 };
48
48
  }
49
49
  }
50
- function X({
50
+ function S({
51
+ position: e,
52
+ viewportRect: t,
53
+ paddingTop: i,
54
+ paddingBottom: a
55
+ }) {
56
+ if (e === "top" || e.startsWith("top-"))
57
+ return {
58
+ y: `calc(${i - t.height / 2}px + 50%)`
59
+ };
60
+ if (e === "bottom" || e.startsWith("bottom-"))
61
+ return {
62
+ y: `calc(${t.height / 2 - a}px - 50%)`
63
+ };
64
+ }
65
+ function Y({
51
66
  defaultSnapPosition: e,
52
67
  snapPositions: t,
53
- surfaceMotion: a
68
+ surfaceMotion: i
54
69
  }) {
55
- const o = a.parentElement;
56
- if (!o || !t.length) return;
57
- const i = o.getBoundingClientRect(), n = a.getBoundingClientRect();
58
- if (i.width <= 0 || i.height <= 0 || n.width <= 0 || n.height <= 0)
70
+ const a = i.parentElement;
71
+ if (!a || !t.length) return;
72
+ const r = a.getBoundingClientRect(), n = i.getBoundingClientRect();
73
+ if (r.width <= 0 || r.height <= 0 || n.width <= 0 || n.height <= 0)
59
74
  return;
60
- const r = window.getComputedStyle(o), d = h(r, "padding-left"), c = h(r, "padding-right"), u = h(r, "padding-top"), f = h(r, "padding-bottom"), s = {
61
- minX: d + n.width / 2 - i.width / 2,
62
- maxX: i.width - c - n.width / 2 - i.width / 2,
63
- minY: u + n.height / 2 - i.height / 2,
64
- maxY: i.height - f - n.height / 2 - i.height / 2
65
- }, l = t.map((g) => ({
66
- key: g,
67
- ...y(g, s)
68
- })), p = e ?? t[0], m = l.find((g) => g.key === p) ?? l[0];
69
- if (m)
75
+ const o = window.getComputedStyle(a), u = l(o, "padding-left"), c = l(o, "padding-right"), g = l(o, "padding-top"), d = l(o, "padding-bottom"), m = {
76
+ minX: u + n.width / 2 - r.width / 2,
77
+ maxX: r.width - c - n.width / 2 - r.width / 2,
78
+ minY: g + n.height / 2 - r.height / 2,
79
+ maxY: r.height - d - n.height / 2 - r.height / 2
80
+ }, s = t.map((h) => {
81
+ const p = S({
82
+ position: h,
83
+ viewportRect: r,
84
+ paddingTop: g,
85
+ paddingBottom: d
86
+ });
87
+ return {
88
+ key: h,
89
+ ...w(h, m),
90
+ ...p ? { settledTranslate: p } : {}
91
+ };
92
+ }), x = e ?? t[0], f = s.find((h) => h.key === x) ?? s[0];
93
+ if (f)
70
94
  return {
71
- bounds: s,
72
- defaultTarget: m,
73
- targets: l
95
+ bounds: m,
96
+ defaultTarget: f,
97
+ targets: s
74
98
  };
75
99
  }
76
100
  export {
77
- X as resolveModalPopupSnapPositions,
78
- w as resolveModalSnapMetrics
101
+ Y as resolveModalPopupSnapPositions,
102
+ X as resolveModalSnapMetrics
79
103
  };