@orioncactuscorp/ui 1.13.0 → 1.15.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 (158) hide show
  1. package/CHANGELOG.md +155 -0
  2. package/README.md +133 -36
  3. package/dist/components/BackgroundIconButton/BackgroundIconButton.css +1 -1
  4. package/dist/components/Button/Button.css +1 -1
  5. package/dist/components/CheckMark/CheckMark.js +19 -17
  6. package/dist/components/Checkbox/Checkbox.css +1 -1
  7. package/dist/components/Checkbox/Checkbox.js +38 -36
  8. package/dist/components/FloatingWindow/FloatingWindow.css +1 -0
  9. package/dist/components/FloatingWindow/FloatingWindow.js +693 -0
  10. package/dist/components/FloatingWindow/FloatingWindow.module.scss.js +17 -0
  11. package/dist/components/FloatingWindow/FloatingWindowManager.js +36 -0
  12. package/dist/components/FloatingWindow/contexts.js +25 -0
  13. package/dist/components/FloatingWindow/geometry.js +222 -0
  14. package/dist/components/FloatingWindow/stack.js +31 -0
  15. package/dist/components/FloatingWindow.d.ts +6 -0
  16. package/dist/components/FloatingWindow.js +18 -0
  17. package/dist/components/Interaction/Interaction.css +1 -1
  18. package/dist/components/Menu/Menu.css +1 -1
  19. package/dist/components/Menu/Menu.js +95 -87
  20. package/dist/components/Modal/Modal.css +1 -1
  21. package/dist/components/Modal/Modal.js +558 -723
  22. package/dist/components/Modal/Modal.module.scss.js +69 -60
  23. package/dist/components/Modal/initialFocus.js +11 -0
  24. package/dist/components/Modal/keyboardSession.js +104 -0
  25. package/dist/components/Modal/snapPoints.js +95 -82
  26. package/dist/components/Modal/useModalDrag.js +730 -762
  27. package/dist/components/Modal/useModalKeyboardAvoidance.js +159 -0
  28. package/dist/components/Modal/useModalViewportGeometry.js +36 -0
  29. package/dist/components/PositionSnap/PositionSnap.css +1 -0
  30. package/dist/components/PositionSnap/PositionSnap.js +330 -0
  31. package/dist/components/PositionSnap/PositionSnap.module.scss.js +9 -0
  32. package/dist/components/PositionSnap/contexts.js +12 -0
  33. package/dist/components/PositionSnap/geometry.js +75 -0
  34. package/dist/components/PositionSnap/gesture.js +7 -0
  35. package/dist/components/PositionSnap/policy.js +60 -0
  36. package/dist/components/PositionSnap.d.ts +6 -0
  37. package/dist/components/PositionSnap.js +7 -0
  38. package/dist/components/ProgressIndicator/ProgressIndicator.css +1 -0
  39. package/dist/components/ProgressIndicator/ProgressIndicator.js +45 -0
  40. package/dist/components/ProgressIndicator/ProgressIndicator.module.scss.js +13 -0
  41. package/dist/components/ProgressIndicator.d.ts +6 -0
  42. package/dist/components/ProgressIndicator.js +4 -0
  43. package/dist/components/Radio/Radio.css +1 -1
  44. package/dist/components/Radio/Radio.js +26 -24
  45. package/dist/components/Switch/Switch.css +1 -1
  46. package/dist/components/Switch/Switch.js +18 -16
  47. package/dist/components/Tabs/Tabs.css +1 -1
  48. package/dist/components/Tooltip/Tooltip.css +1 -1
  49. package/dist/components/Tooltip/Tooltip.js +59 -56
  50. package/dist/components/Tooltip/Tooltip.module.scss.js +6 -4
  51. package/dist/components/internal/ModalPresentation.js +361 -0
  52. package/dist/components/internal/OverlayPortalContext.js +20 -0
  53. package/dist/index.js +135 -112
  54. package/dist/styles.css +13 -10
  55. package/dist/ui/src/components/CheckMark/CheckMark.d.ts +1 -1
  56. package/dist/ui/src/components/CheckMark/CheckMark.d.ts.map +1 -1
  57. package/dist/ui/src/components/CheckMark/types.d.ts +2 -1
  58. package/dist/ui/src/components/CheckMark/types.d.ts.map +1 -1
  59. package/dist/ui/src/components/Checkbox/Checkbox.d.ts +1 -1
  60. package/dist/ui/src/components/Checkbox/Checkbox.d.ts.map +1 -1
  61. package/dist/ui/src/components/Checkbox/types.d.ts +2 -1
  62. package/dist/ui/src/components/Checkbox/types.d.ts.map +1 -1
  63. package/dist/ui/src/components/FloatingWindow/FloatingWindow.d.ts +32 -0
  64. package/dist/ui/src/components/FloatingWindow/FloatingWindow.d.ts.map +1 -0
  65. package/dist/ui/src/components/FloatingWindow/FloatingWindowManager.d.ts +4 -0
  66. package/dist/ui/src/components/FloatingWindow/FloatingWindowManager.d.ts.map +1 -0
  67. package/dist/ui/src/components/FloatingWindow/contexts.d.ts +36 -0
  68. package/dist/ui/src/components/FloatingWindow/contexts.d.ts.map +1 -0
  69. package/dist/ui/src/components/FloatingWindow/geometry.d.ts +31 -0
  70. package/dist/ui/src/components/FloatingWindow/geometry.d.ts.map +1 -0
  71. package/dist/ui/src/components/FloatingWindow/index.d.ts +4 -0
  72. package/dist/ui/src/components/FloatingWindow/index.d.ts.map +1 -0
  73. package/dist/ui/src/components/FloatingWindow/stack.d.ts +9 -0
  74. package/dist/ui/src/components/FloatingWindow/stack.d.ts.map +1 -0
  75. package/dist/ui/src/components/FloatingWindow/types.d.ts +121 -0
  76. package/dist/ui/src/components/FloatingWindow/types.d.ts.map +1 -0
  77. package/dist/ui/src/components/Interaction/index.d.ts +1 -1
  78. package/dist/ui/src/components/Interaction/index.d.ts.map +1 -1
  79. package/dist/ui/src/components/Interaction/types.d.ts +9 -1
  80. package/dist/ui/src/components/Interaction/types.d.ts.map +1 -1
  81. package/dist/ui/src/components/Menu/Menu.d.ts +2 -2
  82. package/dist/ui/src/components/Menu/Menu.d.ts.map +1 -1
  83. package/dist/ui/src/components/Menu/types.d.ts +9 -2
  84. package/dist/ui/src/components/Menu/types.d.ts.map +1 -1
  85. package/dist/ui/src/components/Modal/Modal.d.ts +2 -2
  86. package/dist/ui/src/components/Modal/Modal.d.ts.map +1 -1
  87. package/dist/ui/src/components/Modal/contexts.d.ts +3 -0
  88. package/dist/ui/src/components/Modal/contexts.d.ts.map +1 -1
  89. package/dist/ui/src/components/Modal/initialFocus.d.ts +18 -0
  90. package/dist/ui/src/components/Modal/initialFocus.d.ts.map +1 -0
  91. package/dist/ui/src/components/Modal/keyboardSession.d.ts +46 -0
  92. package/dist/ui/src/components/Modal/keyboardSession.d.ts.map +1 -0
  93. package/dist/ui/src/components/Modal/snapPoints.d.ts.map +1 -1
  94. package/dist/ui/src/components/Modal/types.d.ts +17 -2
  95. package/dist/ui/src/components/Modal/types.d.ts.map +1 -1
  96. package/dist/ui/src/components/Modal/useModalDrag.d.ts.map +1 -1
  97. package/dist/ui/src/components/Modal/useModalKeyboardAvoidance.d.ts +17 -0
  98. package/dist/ui/src/components/Modal/useModalKeyboardAvoidance.d.ts.map +1 -0
  99. package/dist/ui/src/components/Modal/useModalViewportGeometry.d.ts +9 -0
  100. package/dist/ui/src/components/Modal/useModalViewportGeometry.d.ts.map +1 -0
  101. package/dist/ui/src/components/PositionSnap/PositionSnap.d.ts +11 -0
  102. package/dist/ui/src/components/PositionSnap/PositionSnap.d.ts.map +1 -0
  103. package/dist/ui/src/components/PositionSnap/contexts.d.ts +17 -0
  104. package/dist/ui/src/components/PositionSnap/contexts.d.ts.map +1 -0
  105. package/dist/ui/src/components/PositionSnap/geometry.d.ts +31 -0
  106. package/dist/ui/src/components/PositionSnap/geometry.d.ts.map +1 -0
  107. package/dist/ui/src/components/PositionSnap/gesture.d.ts +2 -0
  108. package/dist/ui/src/components/PositionSnap/gesture.d.ts.map +1 -0
  109. package/dist/ui/src/components/PositionSnap/index.d.ts +3 -0
  110. package/dist/ui/src/components/PositionSnap/index.d.ts.map +1 -0
  111. package/dist/ui/src/components/PositionSnap/policy.d.ts +24 -0
  112. package/dist/ui/src/components/PositionSnap/policy.d.ts.map +1 -0
  113. package/dist/ui/src/components/PositionSnap/types.d.ts +31 -0
  114. package/dist/ui/src/components/PositionSnap/types.d.ts.map +1 -0
  115. package/dist/ui/src/components/ProgressIndicator/ProgressIndicator.d.ts +4 -0
  116. package/dist/ui/src/components/ProgressIndicator/ProgressIndicator.d.ts.map +1 -0
  117. package/dist/ui/src/components/ProgressIndicator/index.d.ts +3 -0
  118. package/dist/ui/src/components/ProgressIndicator/index.d.ts.map +1 -0
  119. package/dist/ui/src/components/ProgressIndicator/types.d.ts +17 -0
  120. package/dist/ui/src/components/ProgressIndicator/types.d.ts.map +1 -0
  121. package/dist/ui/src/components/Radio/Radio.d.ts +1 -1
  122. package/dist/ui/src/components/Radio/Radio.d.ts.map +1 -1
  123. package/dist/ui/src/components/Radio/types.d.ts +2 -1
  124. package/dist/ui/src/components/Radio/types.d.ts.map +1 -1
  125. package/dist/ui/src/components/Switch/Switch.d.ts +1 -1
  126. package/dist/ui/src/components/Switch/Switch.d.ts.map +1 -1
  127. package/dist/ui/src/components/Switch/types.d.ts +2 -1
  128. package/dist/ui/src/components/Switch/types.d.ts.map +1 -1
  129. package/dist/ui/src/components/Tooltip/Tooltip.d.ts +1 -1
  130. package/dist/ui/src/components/Tooltip/Tooltip.d.ts.map +1 -1
  131. package/dist/ui/src/components/Tooltip/types.d.ts +6 -0
  132. package/dist/ui/src/components/Tooltip/types.d.ts.map +1 -1
  133. package/dist/ui/src/components/internal/ModalPresentation.d.ts +62 -0
  134. package/dist/ui/src/components/internal/ModalPresentation.d.ts.map +1 -0
  135. package/dist/ui/src/components/internal/OverlayPortalContext.d.ts +10 -0
  136. package/dist/ui/src/components/internal/OverlayPortalContext.d.ts.map +1 -0
  137. package/dist/ui/src/index.d.ts +7 -1
  138. package/dist/ui/src/index.d.ts.map +1 -1
  139. package/dist/ui/src/utils/motion.d.ts.map +1 -1
  140. package/dist/utils/motion.js +194 -135
  141. package/docs/api-conventions.md +4 -0
  142. package/docs/motion.md +4 -0
  143. package/docs/overlay-stacking.md +48 -0
  144. package/docs/responsive-foundation-profile.md +1 -1
  145. package/docs/scss-helpers.md +110 -5
  146. package/docs/selector-contract.md +126 -2
  147. package/docs/tokens.md +2 -0
  148. package/package.json +1 -1
  149. package/src/scss/foundations/atomic.scss +9 -8
  150. package/src/scss/index.scss +2 -0
  151. package/src/scss/mixins/_fluid.scss +57 -0
  152. package/src/scss/mixins/_fluid.test.ts +87 -0
  153. package/src/scss/mixins/_gradient.scss +99 -0
  154. package/src/scss/mixins/_gradient.test.ts +111 -0
  155. package/src/scss/mixins/_responsive.scss +2 -1
  156. package/src/scss/mixins/_typo.scss +2 -1
  157. package/src/scss/mixins/_units.scss +14 -0
  158. package/src/scss/mixins/_utils.scss +3 -22
@@ -1 +1 @@
1
- {"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../../../src/utils/motion.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAkB,MAAM,UAAU,CAAC;AAEvE,eAAO,MAAM,eAAe,iIAYlB,CAAC;AAEX,eAAO,MAAM,cAAc,yDAMjB,CAAC;AAEX,eAAO,MAAM,aAAa,sCAAuC,CAAC;AAElE,eAAO,MAAM,uBAAuB,6DAM1B,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAC9D,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAC5D,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAC;AAC7E,MAAM,MAAM,6BAA6B,GAAG,OAAO,CACjD,qBAAqB,EACrB,MAAM,CACP,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;AACtE,MAAM,MAAM,sBAAsB,GAAG,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;AACpE,MAAM,MAAM,kBAAkB,GAAG,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC9D,MAAM,MAAM,8BAA8B,GAAG,OAAO,CAClD,MAAM,CAAC,cAAc,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,CAC/D,CAAC;AACF,MAAM,MAAM,4BAA4B,GAAG,OAAO,CAChD,MAAM,CAAC,cAAc,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,CAC/D,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,MAAM,CAAC;IACvB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,UAAU,EAAE,kBAAkB,CAAC;IAC/B,gBAAgB,EAAE,wBAAwB,CAAC;IAC3C,eAAe,EAAE,8BAA8B,CAAC;IAChD,cAAc,EAAE,sBAAsB,CAAC;IACvC,aAAa,EAAE,4BAA4B,CAAC;CAC7C;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,qBAAqB,CAAC;CACjC;AAED,MAAM,WAAW,sBAAuB,SAAQ,eAAe;IAC7D,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,EAAE,aAAa,CAAC;IACrB,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,EAAE,qBAAqB,CAAC;IAC/B,aAAa,EAAE,6BAA6B,CAAC;IAC7C,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,sBAAsB,CAAC;CAChC;AAmFD,eAAO,MAAM,qBAAqB,EAAE,QAAQ,CAAC,qBAAqB,CAC1C,CAAC;AA4GzB,eAAO,MAAM,qBAAqB,GAAI,OAAO,MAAM,EAAE,UAAU,MAAM,WAUpE,CAAC;AA+DF,wBAAgB,kBAAkB,CAChC,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,GACvB,qBAAqB,CA2LvB;AAED,wBAAgB,4BAA4B,CAC1C,MAAM,EAAE,cAAc,EACtB,OAAO,GAAE,qBAA8B,GACtC,6BAA6B,CAK/B;AAED,wBAAgB,8BAA8B,CAAC,QAAQ,EAAE,MAAM,WAE9D;AAED,wBAAgB,6BAA6B,CAAC,EAC5C,QAAQ,EACR,aAAa,EACb,aAAa,GACd,EAAE;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,6BAA6B,CAAC;CAC9C,WAOA;AAyCD,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,KAAgB,EAChB,IAAe,EACf,cAAkB,EAClB,WAAW,EACX,OAAgB,EAChB,aAAqB,EACrB,QAAQ,EACR,OAAO,EACP,MAAM,GACP,EAAE,sBAAsB,GAAG,sBAAsB,CAuEjD;AAED,eAAO,MAAM,QAAQ;;;;;;2BAlawB,MAAM,YAAY,MAAM;;;;;;CA8apE,CAAC"}
1
+ {"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../../../src/utils/motion.ts"],"names":[],"mappings":"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"}
@@ -1,5 +1,5 @@
1
- import { ocSpring as A } from "./spring.js";
2
- const f = [
1
+ import { ocSpring as U } from "./spring.js";
2
+ const g = [
3
3
  "feedback",
4
4
  "fade",
5
5
  "reject",
@@ -11,13 +11,13 @@ const f = [
11
11
  "gesture",
12
12
  "ambient",
13
13
  "continuous"
14
- ], w = [
14
+ ], S = [
15
15
  "change",
16
16
  "enter",
17
17
  "exit",
18
18
  "release",
19
19
  "loop"
20
- ], R = ["quick", "normal", "slow"], S = [
20
+ ], O = ["quick", "normal", "slow"], T = [
21
21
  "auto",
22
22
  "preserve",
23
23
  "fade",
@@ -94,7 +94,7 @@ const f = [
94
94
  release: "cubic-bezier(0.32, 0.72, 0, 1)"
95
95
  }
96
96
  }
97
- }, C = o, L = {
97
+ }, Y = o, z = {
98
98
  feedback: "feedback",
99
99
  fade: "fade",
100
100
  reject: "feedback",
@@ -106,7 +106,7 @@ const f = [
106
106
  gesture: "feedback",
107
107
  ambient: "static",
108
108
  continuous: "static"
109
- }, V = /* @__PURE__ */ new Set([
109
+ }, G = /* @__PURE__ */ new Set([
110
110
  "opacity",
111
111
  "color",
112
112
  "background-color",
@@ -115,13 +115,13 @@ const f = [
115
115
  "outline-color",
116
116
  "fill",
117
117
  "stroke"
118
- ]), Y = {
118
+ ]), K = {
119
119
  disclosure: { preset: "smooth" },
120
120
  surface: { preset: "smooth" },
121
121
  sheet: { preset: "smooth" },
122
122
  expand: { preset: "smooth" },
123
123
  move: { preset: "smooth" }
124
- }, z = {
124
+ }, H = {
125
125
  reject: {
126
126
  change: { preset: "smooth" },
127
127
  enter: { preset: "smooth" }
@@ -142,39 +142,58 @@ const f = [
142
142
  },
143
143
  exit: null
144
144
  }
145
- }, U = z, $ = (t, e) => e.includes(t), l = (t, e, r) => {
146
- if (!$(e, r))
145
+ }, J = H, Q = (t, e) => e.includes(t), p = (t, e, r) => {
146
+ if (!Q(e, r))
147
147
  throw new Error(`Unknown oc-motion ${t}: ${e}.`);
148
148
  return e;
149
- }, G = (t) => {
149
+ }, W = (t) => {
150
150
  if (!Number.isFinite(t) || t < 0)
151
151
  throw new Error("oc-motion durationFactor must be a non-negative number.");
152
152
  return t;
153
- }, H = (t) => {
153
+ }, X = (t) => {
154
154
  if (t !== void 0) {
155
155
  if (!Number.isFinite(t))
156
156
  throw new Error("oc-motion extraBounce must be a finite number.");
157
157
  return t;
158
158
  }
159
- }, d = (t, e) => {
160
- const r = Number.parseFloat(t.trim());
161
- return Number.isFinite(r) ? r : e;
162
- }, i = (t, e) => {
163
- const a = t.trim().match(/^(-?\d*\.?\d+)(ms|s)?$/);
164
- if (!a) return e;
165
- const s = Number.parseFloat(a[1]);
166
- return !Number.isFinite(s) || s < 0 ? e : a[2] === "ms" ? s / 1e3 : s;
167
- }, n = (t, e) => typeof t?.getPropertyValue == "function" ? t.getPropertyValue(e).trim() : "", E = (t, e) => {
159
+ }, l = (t, e) => {
160
+ if (!Number.isFinite(e) || e < 0)
161
+ throw new Error(`oc-motion ${t} must be a non-negative finite number.`);
162
+ return e;
163
+ }, Z = /^\+?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i, d = (t, e, r) => {
164
+ const i = e.trim();
165
+ if (!i) return r;
166
+ if (!Z.test(i))
167
+ throw new Error(
168
+ `oc-motion CSS token ${t} must be a non-negative unitless number.`
169
+ );
170
+ const a = Number(i);
171
+ return l(`CSS token ${t}`, a);
172
+ }, R = (t, e) => {
173
+ const i = t.trim().match(/^(-?\d*\.?\d+)(ms|s)?$/);
174
+ if (!i) return e;
175
+ const a = Number.parseFloat(i[1]);
176
+ return !Number.isFinite(a) || a < 0 ? e : i[2] === "ms" ? a / 1e3 : a;
177
+ }, n = (t, e) => typeof t?.getPropertyValue == "function" ? t.getPropertyValue(e).trim() : "", s = (t, e, r) => {
178
+ const i = n(t, e);
179
+ if (!i) return r;
180
+ const a = R(i, Number.NaN);
181
+ if (!Number.isFinite(a) || a < 0)
182
+ throw new Error(
183
+ `oc-motion CSS token ${e} must be a non-negative finite duration in seconds or milliseconds.`
184
+ );
185
+ return a;
186
+ }, w = (t, e) => {
168
187
  const r = { ...t };
169
- for (const a of f) {
170
- const s = e?.[a];
171
- s && (r[a] = {
172
- ...t[a],
173
- ...s
188
+ for (const i of g) {
189
+ const a = e?.[i];
190
+ a && (r[i] = {
191
+ ...t[i],
192
+ ...a
174
193
  });
175
194
  }
176
195
  return r;
177
- }, K = (t) => ({
196
+ }, ee = (t) => ({
178
197
  durationFactor: t?.durationFactor ?? o.durationFactor,
179
198
  durationFactorReduced: t?.durationFactorReduced ?? o.durationFactorReduced,
180
199
  durationFactorPreserve: t?.durationFactorPreserve ?? o.durationFactorPreserve,
@@ -186,7 +205,7 @@ const f = [
186
205
  ...o.durationByIntent,
187
206
  ...t?.durationByIntent
188
207
  },
189
- durationByPhase: E(
208
+ durationByPhase: w(
190
209
  o.durationByPhase,
191
210
  t?.durationByPhase
192
211
  ),
@@ -194,118 +213,141 @@ const f = [
194
213
  ...o.timingByIntent,
195
214
  ...t?.timingByIntent
196
215
  },
197
- timingByPhase: E(
216
+ timingByPhase: w(
198
217
  o.timingByPhase,
199
218
  t?.timingByPhase
200
219
  )
201
220
  });
202
- function N(t) {
221
+ function _(t) {
203
222
  const e = t && typeof getComputedStyle == "function" ? getComputedStyle(t) : null;
204
223
  return {
205
224
  durationFactor: d(
225
+ "--oc-motion-duration-factor",
206
226
  n(e, "--oc-motion-duration-factor"),
207
227
  o.durationFactor
208
228
  ),
209
229
  durationFactorReduced: d(
230
+ "--oc-motion-duration-factor-reduced",
210
231
  n(e, "--oc-motion-duration-factor-reduced"),
211
232
  o.durationFactorReduced
212
233
  ),
213
234
  durationFactorPreserve: d(
235
+ "--oc-motion-duration-factor-preserve",
214
236
  n(e, "--oc-motion-duration-factor-preserve"),
215
237
  o.durationFactorPreserve
216
238
  ),
217
239
  paceFactor: {
218
240
  quick: d(
241
+ "--oc-motion-pace-quick",
219
242
  n(e, "--oc-motion-pace-quick"),
220
243
  o.paceFactor.quick
221
244
  ),
222
245
  normal: d(
246
+ "--oc-motion-pace-normal",
223
247
  n(e, "--oc-motion-pace-normal"),
224
248
  o.paceFactor.normal
225
249
  ),
226
250
  slow: d(
251
+ "--oc-motion-pace-slow",
227
252
  n(e, "--oc-motion-pace-slow"),
228
253
  o.paceFactor.slow
229
254
  )
230
255
  },
231
256
  durationByIntent: {
232
- feedback: i(
233
- n(e, "--oc-motion-duration-feedback"),
257
+ feedback: s(
258
+ e,
259
+ "--oc-motion-duration-feedback",
234
260
  o.durationByIntent.feedback
235
261
  ),
236
- fade: i(
237
- n(e, "--oc-motion-duration-fade"),
262
+ fade: s(
263
+ e,
264
+ "--oc-motion-duration-fade",
238
265
  o.durationByIntent.fade
239
266
  ),
240
- reject: i(
241
- n(e, "--oc-motion-duration-reject"),
267
+ reject: s(
268
+ e,
269
+ "--oc-motion-duration-reject",
242
270
  o.durationByIntent.reject
243
271
  ),
244
- disclosure: i(
245
- n(e, "--oc-motion-duration-disclosure"),
272
+ disclosure: s(
273
+ e,
274
+ "--oc-motion-duration-disclosure",
246
275
  o.durationByIntent.disclosure
247
276
  ),
248
- surface: i(
249
- n(e, "--oc-motion-duration-surface"),
277
+ surface: s(
278
+ e,
279
+ "--oc-motion-duration-surface",
250
280
  o.durationByIntent.surface
251
281
  ),
252
- sheet: i(
253
- n(e, "--oc-motion-duration-sheet"),
282
+ sheet: s(
283
+ e,
284
+ "--oc-motion-duration-sheet",
254
285
  o.durationByIntent.sheet
255
286
  ),
256
- expand: i(
257
- n(e, "--oc-motion-duration-expand"),
287
+ expand: s(
288
+ e,
289
+ "--oc-motion-duration-expand",
258
290
  o.durationByIntent.expand
259
291
  ),
260
- move: i(
261
- n(e, "--oc-motion-duration-move"),
292
+ move: s(
293
+ e,
294
+ "--oc-motion-duration-move",
262
295
  o.durationByIntent.move
263
296
  ),
264
- gesture: i(
265
- n(e, "--oc-motion-duration-gesture"),
297
+ gesture: s(
298
+ e,
299
+ "--oc-motion-duration-gesture",
266
300
  o.durationByIntent.gesture
267
301
  ),
268
- ambient: i(
269
- n(e, "--oc-motion-duration-ambient"),
302
+ ambient: s(
303
+ e,
304
+ "--oc-motion-duration-ambient",
270
305
  o.durationByIntent.ambient
271
306
  ),
272
- continuous: i(
273
- n(e, "--oc-motion-duration-continuous"),
307
+ continuous: s(
308
+ e,
309
+ "--oc-motion-duration-continuous",
274
310
  o.durationByIntent.continuous
275
311
  )
276
312
  },
277
313
  durationByPhase: {
278
314
  disclosure: {
279
- exit: i(
280
- n(e, "--oc-motion-duration-disclosure-exit"),
315
+ exit: s(
316
+ e,
317
+ "--oc-motion-duration-disclosure-exit",
281
318
  o.durationByPhase.disclosure?.exit ?? o.durationByIntent.disclosure
282
319
  )
283
320
  },
284
321
  surface: {
285
- exit: i(
286
- n(e, "--oc-motion-duration-surface-exit"),
322
+ exit: s(
323
+ e,
324
+ "--oc-motion-duration-surface-exit",
287
325
  o.durationByPhase.surface?.exit ?? o.durationByIntent.surface
288
326
  )
289
327
  },
290
328
  sheet: {
291
- exit: i(
292
- n(e, "--oc-motion-duration-sheet-exit"),
329
+ exit: s(
330
+ e,
331
+ "--oc-motion-duration-sheet-exit",
293
332
  o.durationByPhase.sheet?.exit ?? o.durationByIntent.sheet
294
333
  ),
295
- release: i(
296
- n(e, "--oc-motion-duration-sheet-release"),
334
+ release: s(
335
+ e,
336
+ "--oc-motion-duration-sheet-release",
297
337
  o.durationByPhase.sheet?.release ?? o.durationByIntent.sheet
298
338
  )
299
339
  },
300
340
  expand: {
301
- exit: i(
302
- n(e, "--oc-motion-duration-expand-exit"),
341
+ exit: s(
342
+ e,
343
+ "--oc-motion-duration-expand-exit",
303
344
  o.durationByPhase.expand?.exit ?? o.durationByIntent.expand
304
345
  )
305
346
  },
306
347
  gesture: {
307
- release: i(
308
- n(e, "--oc-motion-duration-gesture-release"),
348
+ release: s(
349
+ e,
350
+ "--oc-motion-duration-gesture-release",
309
351
  o.durationByPhase.gesture?.release ?? o.durationByIntent.gesture
310
352
  )
311
353
  }
@@ -343,115 +385,132 @@ function N(t) {
343
385
  }
344
386
  };
345
387
  }
346
- function T(t, e = "auto") {
347
- return l("intent", t, f), l("reduced policy", e, S), e === "auto" ? L[t] : e;
388
+ function D(t, e = "auto") {
389
+ return p("intent", t, g), p("reduced policy", e, T), e === "auto" ? z[t] : e;
348
390
  }
349
- function _(t) {
350
- return V.has(t);
391
+ function j(t) {
392
+ return G.has(t);
351
393
  }
352
- function j({
394
+ function M({
353
395
  property: t,
354
396
  reducedMotion: e,
355
397
  reducedPolicy: r
356
398
  }) {
357
- return !e || r === "preserve" ? !0 : r === "static" || t === void 0 ? !1 : _(t);
399
+ return !e || r === "preserve" ? !0 : r === "static" || t === void 0 ? !1 : j(t);
358
400
  }
359
- const O = (t, e, r, a) => t[e]?.[r] ?? a, J = (t, e, r, a) => {
360
- const s = U[t], m = s !== void 0 && Object.prototype.hasOwnProperty.call(s, e) ? s[e] : void 0;
401
+ const x = (t, e, r, i) => t[e]?.[r] ?? i, te = (t, e, r, i) => {
402
+ const a = J[t], m = a !== void 0 && Object.prototype.hasOwnProperty.call(a, e) ? a[e] : void 0;
361
403
  if (m === null) return null;
362
- const c = m ?? Y[t];
404
+ const c = m ?? K[t];
363
405
  if (c === void 0) return null;
364
- const p = r === void 0 ? void 0 : c.propertyExtraBounce?.[r];
406
+ const f = r === void 0 ? void 0 : c.propertyExtraBounce?.[r];
365
407
  return {
366
408
  preset: (r === void 0 ? void 0 : c.propertyPreset?.[r]) ?? c.preset,
367
- extraBounce: a ?? p ?? c.extraBounce
409
+ extraBounce: i ?? f ?? c.extraBounce
368
410
  };
369
411
  };
370
- function Q({
412
+ function oe({
371
413
  intent: t,
372
414
  phase: e = "change",
373
415
  pace: r = "normal",
374
- durationFactor: a = 1,
375
- extraBounce: s,
416
+ durationFactor: i = 1,
417
+ extraBounce: a,
376
418
  reduced: m = "auto",
377
419
  reducedMotion: c = !1,
378
- property: p,
379
- element: h,
380
- tokens: D
420
+ property: f,
421
+ element: b,
422
+ tokens: q
381
423
  }) {
382
- l("intent", t, f), l("phase", e, w), l("pace", r, R);
383
- const x = G(a), P = H(s), u = K(
384
- D ?? N(h)
385
- ), y = T(t, m), b = j({
386
- property: p,
424
+ p("intent", t, g), p("phase", e, S), p("pace", r, O);
425
+ const I = W(i), F = X(a), u = ee(
426
+ q ?? _(b)
427
+ ), B = D(t, m), v = M({
428
+ property: f,
387
429
  reducedMotion: c,
388
- reducedPolicy: y
389
- }), I = c && y === "preserve" ? u.durationFactorPreserve : c ? u.durationFactorReduced : u.durationFactor, F = O(
390
- u.durationByPhase,
391
- t,
392
- e,
393
- u.durationByIntent[t]
394
- ), v = u.paceFactor[r], g = b ? F * I * v * x : 0, M = O(
430
+ reducedPolicy: B
431
+ }), k = l(
432
+ "duration factor token",
433
+ c && B === "preserve" ? u.durationFactorPreserve : c ? u.durationFactorReduced : u.durationFactor
434
+ ), h = l(
435
+ "duration token",
436
+ x(
437
+ u.durationByPhase,
438
+ t,
439
+ e,
440
+ u.durationByIntent[t]
441
+ )
442
+ ), E = l(
443
+ "pace factor token",
444
+ u.paceFactor[r]
445
+ ), A = v ? h * k * E * I : 0, y = l(
446
+ "effective duration",
447
+ A
448
+ ), C = v && y > 0, $ = x(
395
449
  u.timingByPhase,
396
450
  t,
397
451
  e,
398
452
  u.timingByIntent[t]
399
- ), B = J(
453
+ ), P = te(
400
454
  t,
401
455
  e,
402
- p,
403
- P
404
- ), k = B !== null;
405
- if (!k && P !== void 0)
456
+ f,
457
+ F
458
+ ), N = P !== null;
459
+ if (!N && F !== void 0)
406
460
  throw new Error(
407
461
  "oc-motion extraBounce is only supported for spring-backed motion."
408
462
  );
409
- const q = g > 0 ? g : F;
463
+ const V = x(
464
+ o.durationByPhase,
465
+ t,
466
+ e,
467
+ o.durationByIntent[t]
468
+ ), L = y > 0 ? y : h > 0 ? h : V;
410
469
  return {
411
470
  intent: t,
412
471
  phase: e,
413
472
  pace: r,
414
473
  reduced: m,
415
- reducedPolicy: y,
474
+ reducedPolicy: B,
416
475
  reducedMotion: c,
417
- property: p,
418
- durationFactor: x,
419
- durationFactorToken: I,
420
- paceFactor: v,
421
- durationSeconds: g,
422
- timingFunction: M,
423
- animate: b,
424
- springBacked: k,
425
- spring: A[B?.preset ?? "smooth"]({
426
- duration: q,
427
- extraBounce: B?.extraBounce
476
+ property: f,
477
+ durationFactor: I,
478
+ durationFactorToken: k,
479
+ paceFactor: E,
480
+ durationSeconds: y,
481
+ timingFunction: $,
482
+ animate: C,
483
+ springBacked: N,
484
+ spring: U[P?.preset ?? "smooth"]({
485
+ duration: L,
486
+ extraBounce: P?.extraBounce
428
487
  })
429
488
  };
430
489
  }
431
- const X = {
432
- intents: f,
433
- phases: w,
434
- paces: R,
435
- reducedPolicies: S,
436
- defaultTokens: C,
437
- parseDuration: i,
438
- readTokens: N,
439
- resolve: Q,
440
- resolveReducedPolicy: T,
441
- isFeedbackSafeProperty: _,
442
- shouldAnimateProperty: j
490
+ const re = {
491
+ intents: g,
492
+ phases: S,
493
+ paces: O,
494
+ reducedPolicies: T,
495
+ defaultTokens: Y,
496
+ parseDuration: R,
497
+ readTokens: _,
498
+ resolve: oe,
499
+ resolveReducedPolicy: D,
500
+ isFeedbackSafeProperty: j,
501
+ shouldAnimateProperty: M
443
502
  };
444
503
  export {
445
- _ as isOcMotionFeedbackSafeProperty,
446
- X as ocMotion,
447
- C as ocMotionDefaultTokens,
448
- f as ocMotionIntents,
449
- R as ocMotionPaces,
450
- w as ocMotionPhases,
451
- S as ocMotionReducedPolicies,
452
- i as parseOcMotionDuration,
453
- N as readOcMotionTokens,
454
- Q as resolveOcMotion,
455
- T as resolveOcMotionReducedPolicy,
456
- j as shouldAnimateOcMotionProperty
504
+ j as isOcMotionFeedbackSafeProperty,
505
+ re as ocMotion,
506
+ Y as ocMotionDefaultTokens,
507
+ g as ocMotionIntents,
508
+ O as ocMotionPaces,
509
+ S as ocMotionPhases,
510
+ T as ocMotionReducedPolicies,
511
+ R as parseOcMotionDuration,
512
+ _ as readOcMotionTokens,
513
+ oe as resolveOcMotion,
514
+ D as resolveOcMotionReducedPolicy,
515
+ M as shouldAnimateOcMotionProperty
457
516
  };
@@ -85,3 +85,7 @@ named preset이 아니라 외부 문맥이나 직접 지정한 치수로 크기
85
85
 
86
86
  `Badge`의 작은 preset도 `size='xsmall'`을 사용하므로 모든 named size가 이
87
87
  표준 순서를 따릅니다.
88
+
89
+ `ProgressIndicator`는 선의 block size를 `small | medium | large`로 제공합니다.
90
+ 기본 `small`은 모바일과 navigation chrome에 사용하고, `medium`과 `large`는
91
+ 태블릿·데스크톱의 독립적인 작업 진행 표시에 사용합니다.
package/docs/motion.md CHANGED
@@ -17,6 +17,10 @@ oc-motion($properties, $intent, $phase, $pace)
17
17
 
18
18
  React runtime에서 height/expand처럼 CSS transition만으로 안정적으로 다루기 어려운 motion은 `@orioncactuscorp/ui/utils/motion`과 `@orioncactuscorp/ui/react/motion` subpath를 사용합니다. 이 runtime layer도 같은 intent, phase, pace, reduced-motion policy, `--oc-motion-duration-factor*` token vocabulary를 공유하고, 실제 프레임 계산은 low-level `ocSpring` engine에 위임합니다.
19
19
 
20
+ Runtime motion도 CSS helper와 동일하게 최종 계산 duration이 `0`이면 spring을 시작하지 않고 최종 상태로 즉시 완료합니다. instance factor, global factor token, intent duration, phase duration 중 어느 값으로 `0`이 만들어져도 같은 계약을 적용합니다. `resolveOcMotion`을 직접 사용하는 consumer는 `animate`가 `true`일 때만 반환된 `spring`을 scheduler에 전달해야 합니다.
21
+
22
+ Runtime duration, duration factor, pace factor는 모두 `0` 이상의 유한한 값이어야 합니다. CSS의 factor/pace token은 표준 CSS `<number>` 형태의 단위 없는 숫자만 허용하므로 `+1.2`, `5e-1` 같은 표기는 유효하지만, `1s`, `0px`, 숫자 뒤 임의 문자열처럼 CSS 계산과 runtime 해석이 달라질 수 있는 값은 설정 오류로 처리합니다. 여러 multiplier를 곱한 최종 duration이 overflow로 비유한 값이 되는 경우(예: 매우 큰 programmatic factor 조합)도 오류입니다.
23
+
20
24
  ## 빠른 시작
21
25
 
22
26
  ```scss
@@ -0,0 +1,48 @@
1
+ # Overlay Stacking
2
+
3
+ oc-ui의 `--oc-zindex-*` 토큰은 그림자·블러·radius로 표현하는 시각적 elevation이 아니라 브라우저 paint order를 위한 단계입니다. Material elevation의 상대적 계층 개념처럼, 자식 overlay는 전역 숫자만 높이는 대신 자신을 소유한 surface의 stacking context 안에서 위로 올라갑니다.
4
+
5
+ ## 단계
6
+
7
+ | 토큰 | 기본값 | 의미 |
8
+ | --------------- | -----: | -------------------------------------------------------------- |
9
+ | `--oc-zindex-0` | `-1` | 명시적으로 뒤로 보내는 장식·비활성 layer |
10
+ | `--oc-zindex-1` | `0` | 기본 document flow와 component 내부 base layer |
11
+ | `--oc-zindex-2` | `10` | 같은 layout context 안의 docked·raised control |
12
+ | `--oc-zindex-3` | `1000` | trigger에 연결된 Menu·popover 같은 transient disclosure |
13
+ | `--oc-zindex-4` | `1400` | Modal·dialog·FloatingWindow처럼 작업 맥락을 소유하는 surface |
14
+ | `--oc-zindex-5` | `1800` | Tooltip·toast처럼 현재 맥락 위에서 전달되는 advisory/status UI |
15
+
16
+ 숫자 간격은 각 단계 안에서 component-owned stack offset을 사용할 여유를 둡니다. 새 component가 생겼다는 이유만으로 다음 전역 단계를 추가하거나 큰 정수를 하드코딩하지 않습니다.
17
+
18
+ ## 상대적 overlay boundary
19
+
20
+ `ModalContent`와 `FloatingWindowContent`는 자신을 가장 가까운 overlay boundary로 제공합니다. 그 안에서 렌더링된 `MenuContent`와 `TooltipContent`는 별도 설정 없이 해당 surface를 portal container로 사용합니다.
21
+
22
+ ```tsx
23
+ <ModalRoot>
24
+ <ModalContent>
25
+ <ModalHeader title='설정' />
26
+ <ModalBody>
27
+ <MenuRoot>
28
+ <MenuTrigger>더보기</MenuTrigger>
29
+ <MenuContent>
30
+ <MenuItem>복제</MenuItem>
31
+ </MenuContent>
32
+ </MenuRoot>
33
+ </ModalBody>
34
+ </ModalContent>
35
+ </ModalRoot>
36
+ ```
37
+
38
+ 이때 Menu는 여전히 `--oc-zindex-3`을 사용하지만 Modal의 stacking context 안에 있으므로 Modal backdrop이나 surface 뒤로 내려가지 않습니다. Tooltip도 같은 방식으로 자기 의미인 `--oc-zindex-5`를 유지합니다. 중첩 surface에서는 가장 가까운 boundary가 우선됩니다.
39
+
40
+ surface 밖에서 단독으로 사용하면 기존처럼 document body에 portal됩니다. Shadow DOM이나 별도 overlay root가 필요한 경우 `MenuContent`, `TooltipContent`, `ModalContent`, `FloatingWindowContent`의 `container` prop으로 명시적으로 덮어쓸 수 있습니다. 명시적 `container`는 자동 boundary보다 우선하며, focus trap과 `aria-hidden` 범위도 소비자가 함께 책임져야 합니다.
41
+
42
+ ## Component authoring 규칙
43
+
44
+ - 화면 맥락을 소유하는 새 portaled surface는 전역 z-index를 올리기 전에 기존 `--oc-zindex-*` 의미 단계에 매핑합니다.
45
+ - surface 안에서 다시 열리는 disclosure/advisory overlay는 가장 가까운 owner surface를 portal boundary로 사용합니다.
46
+ - Modal의 focus trap 밖에 portal host를 두면 overlay가 inert 또는 `aria-hidden` 처리될 수 있으므로, host는 접근성 tree에서도 owner surface 안에 있어야 합니다.
47
+ - DOM 중첩, computed z-index만으로 완료를 판단하지 않고 실제 브라우저의 `elementFromPoint()`와 pointer/keyboard interaction으로 paint order를 검증합니다.
48
+ - 그림자·블러·radius 같은 시각적 elevation과 `--oc-zindex-*` paint order를 서로 대체하지 않습니다.
@@ -26,7 +26,7 @@
26
26
 
27
27
  ### `$oc-responsive-mode`
28
28
 
29
- - `fluid`: 기본값. 기존 출력과 동일하게 stop 사이를 `fluidClamp()`로 보간한다.
29
+ - `fluid`: 기본값. 기존 출력과 동일하게 stop 사이를 `oc-fluid()`로 보간한다.
30
30
  - `stepped`: `clamp()` 없이 stop 값이 breakpoint에서 계단식으로 바뀐다.
31
31
  - `static`: 선택한 stop 하나를 전체 viewport에 고정한다.
32
32