@orioncactuscorp/ui 1.10.0 → 1.12.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 (87) hide show
  1. package/README.md +136 -54
  2. package/dist/components/Accordion/Accordion.css +1 -1
  3. package/dist/components/Accordion/Accordion.js +169 -177
  4. package/dist/components/ActionArea/ActionAreaLayout.js +20 -24
  5. package/dist/components/Cell/Cell.css +1 -1
  6. package/dist/components/Cell/Cell.js +57 -58
  7. package/dist/components/CheckMark/CheckMark.css +1 -1
  8. package/dist/components/Checkbox/Checkbox.css +1 -1
  9. package/dist/components/Checkbox/Checkbox.js +50 -51
  10. package/dist/components/Menu/Menu.css +1 -1
  11. package/dist/components/Menu/Menu.module.scss.js +20 -22
  12. package/dist/components/Modal/Modal.js +253 -261
  13. package/dist/components/Modal/useModalContentBlockTransition.js +49 -44
  14. package/dist/components/Radio/Radio.css +1 -1
  15. package/dist/components/ScrollArea/ScrollArea.css +1 -1
  16. package/dist/components/ScrollArea/ScrollArea.js +197 -200
  17. package/dist/components/Select/Select.js +31 -34
  18. package/dist/components/Switch/Switch.css +1 -1
  19. package/dist/components/Tabs/Tabs.css +1 -0
  20. package/dist/components/Tabs/Tabs.js +208 -0
  21. package/dist/components/Tabs/Tabs.module.scss.js +27 -0
  22. package/dist/components/Tabs.d.ts +6 -0
  23. package/dist/components/Tabs.js +8 -0
  24. package/dist/components/TextArea/TextArea.js +57 -58
  25. package/dist/components/TextInput/TextInput.js +30 -33
  26. package/dist/components/Tooltip/Tooltip.css +1 -1
  27. package/dist/foundations/color.theme.dark.css +1 -1
  28. package/dist/foundations/color.theme.light.css +1 -1
  29. package/dist/foundations/focus.css +1 -0
  30. package/dist/foundations/reset.css +1 -1
  31. package/dist/foundations.css +4 -3
  32. package/dist/index.js +69 -64
  33. package/dist/react/motion.js +31 -35
  34. package/dist/reset.css +1 -1
  35. package/dist/styles.css +14 -12
  36. package/dist/ui/src/components/Accordion/Accordion.d.ts.map +1 -1
  37. package/dist/ui/src/components/ActionArea/ActionAreaLayout.d.ts.map +1 -1
  38. package/dist/ui/src/components/Cell/Cell.d.ts.map +1 -1
  39. package/dist/ui/src/components/CheckMark/types.d.ts +10 -0
  40. package/dist/ui/src/components/CheckMark/types.d.ts.map +1 -1
  41. package/dist/ui/src/components/Checkbox/Checkbox.d.ts.map +1 -1
  42. package/dist/ui/src/components/Checkbox/types.d.ts +16 -0
  43. package/dist/ui/src/components/Checkbox/types.d.ts.map +1 -1
  44. package/dist/ui/src/components/Modal/Modal.d.ts.map +1 -1
  45. package/dist/ui/src/components/Modal/useModalContentBlockTransition.d.ts.map +1 -1
  46. package/dist/ui/src/components/Radio/types.d.ts +16 -0
  47. package/dist/ui/src/components/Radio/types.d.ts.map +1 -1
  48. package/dist/ui/src/components/ScrollArea/ScrollArea.d.ts.map +1 -1
  49. package/dist/ui/src/components/Select/Select.d.ts.map +1 -1
  50. package/dist/ui/src/components/Switch/types.d.ts +10 -0
  51. package/dist/ui/src/components/Switch/types.d.ts.map +1 -1
  52. package/dist/ui/src/components/Tabs/Tabs.d.ts +7 -0
  53. package/dist/ui/src/components/Tabs/Tabs.d.ts.map +1 -0
  54. package/dist/ui/src/components/Tabs/index.d.ts +3 -0
  55. package/dist/ui/src/components/Tabs/index.d.ts.map +1 -0
  56. package/dist/ui/src/components/Tabs/types.d.ts +26 -0
  57. package/dist/ui/src/components/Tabs/types.d.ts.map +1 -0
  58. package/dist/ui/src/components/TextArea/TextArea.d.ts.map +1 -1
  59. package/dist/ui/src/components/TextInput/TextInput.d.ts.map +1 -1
  60. package/dist/ui/src/index.d.ts +2 -0
  61. package/dist/ui/src/index.d.ts.map +1 -1
  62. package/dist/ui/src/react/motion/index.d.ts.map +1 -1
  63. package/dist/ui/src/utils/mergeRefs.d.ts +13 -0
  64. package/dist/ui/src/utils/mergeRefs.d.ts.map +1 -0
  65. package/dist/utils/mergeRefs.js +24 -0
  66. package/dist/vscode/oc-ui-vars.css +13 -0
  67. package/docs/colors.md +241 -0
  68. package/docs/editor-setup.md +42 -0
  69. package/docs/motion.md +665 -0
  70. package/docs/responsive-foundation-profile.md +230 -0
  71. package/docs/scss-helpers.md +189 -0
  72. package/docs/selector-contract.md +260 -0
  73. package/docs/spring.md +382 -0
  74. package/docs/stability.md +62 -0
  75. package/docs/tokens.md +561 -0
  76. package/docs/typography.md +115 -0
  77. package/package.json +9 -4
  78. package/src/scss/foundations/color-theme.test.ts +37 -8
  79. package/src/scss/foundations/color.theme.dark.scss +4 -1
  80. package/src/scss/foundations/color.theme.light.scss +3 -0
  81. package/src/scss/foundations/focus.scss +4 -0
  82. package/src/scss/foundations/focus.test.ts +48 -0
  83. package/src/scss/foundations/reset.scss +9 -4
  84. package/src/scss/foundations/reset.test.ts +32 -0
  85. package/src/scss/index.scss +2 -0
  86. package/src/scss/mixins/_focus.scss +11 -0
  87. package/src/scss/mixins/_focus.test.ts +58 -0
@@ -1,12 +1,10 @@
1
1
  'use client';
2
2
  import { jsx as H } from "react/jsx-runtime";
3
- import { useRef as i, useState as C, useCallback as q, useEffect as y, useLayoutEffect as st } from "react";
3
+ import { useRef as i, useState as C, useCallback as q, useEffect as y, useLayoutEffect as it } from "react";
4
+ import { mergeRefs as st } from "../utils/mergeRefs.js";
4
5
  import { createSpringAnimator as at } from "../utils/spring/animator.js";
5
6
  import { resolveOcMotion as ut } from "../utils/motion.js";
6
7
  const V = "block-size";
7
- function lt(t, n) {
8
- typeof t == "function" ? t(n) : t && (t.current = n);
9
- }
10
8
  function A(t) {
11
9
  const n = i(t);
12
10
  return y(() => {
@@ -21,7 +19,7 @@ function dt() {
21
19
  return c(), r.addEventListener("change", c), () => r.removeEventListener("change", c);
22
20
  }, []), t;
23
21
  }
24
- function ft(t) {
22
+ function lt(t) {
25
23
  if (!t) return 0;
26
24
  const n = t.getBoundingClientRect().height;
27
25
  return Math.max(0, n || t.scrollHeight);
@@ -29,16 +27,16 @@ function ft(t) {
29
27
  function U(t) {
30
28
  return t ? Math.max(0, t.getBoundingClientRect().height) : 0;
31
29
  }
32
- function mt(t, n) {
33
- return n === "rendered" ? U(t) : ft(t);
30
+ function ft(t, n) {
31
+ return n === "rendered" ? U(t) : lt(t);
34
32
  }
35
33
  function j(t) {
36
34
  return `${Math.max(0, t).toFixed(3)}px`;
37
35
  }
38
- function ht(t, n) {
39
- const r = A(n), [c, d] = C(t), u = i(t), f = q(
36
+ function mt(t, n) {
37
+ const r = A(n), [c, l] = C(t), u = i(t), f = q(
40
38
  (s) => {
41
- u.current !== s && (u.current = s, d(s), r.current?.(s));
39
+ u.current !== s && (u.current = s, l(s), r.current?.(s));
42
40
  },
43
41
  [r]
44
42
  );
@@ -49,12 +47,12 @@ function Mt({
49
47
  className: n = "",
50
48
  contentProps: r,
51
49
  disableAnimation: c = !1,
52
- durationFactor: d = 1,
50
+ durationFactor: l = 1,
53
51
  extraBounce: u,
54
52
  enterPhase: f = "enter",
55
53
  exitPhase: s = "exit",
56
- forceMount: l = !1,
57
- intent: R = "expand",
54
+ forceMount: d = !1,
55
+ intent: g = "expand",
58
56
  measureBlockSize: z = "content",
59
57
  onExitComplete: W,
60
58
  onMotionStateChange: Y,
@@ -67,7 +65,7 @@ function Mt({
67
65
  "data-oc-component": D = "motion-expand",
68
66
  ...F
69
67
  }) {
70
- const E = i(null), B = i(null), a = i(null), G = i(o || l), I = i(!1), g = dt(), [m, J] = C(() => o || l), S = i(m), O = A(W), { motionState: K, setMotionState: h } = ht(
68
+ const E = i(null), B = i(null), a = i(null), G = i(o || d), I = i(!1), R = dt(), [m, J] = C(() => o || d), S = i(m), O = A(W), { motionState: K, setMotionState: h } = mt(
71
69
  o ? "open" : "closed",
72
70
  Y
73
71
  ), {
@@ -75,14 +73,12 @@ function Mt({
75
73
  style: X,
76
74
  "data-oc-part": Z = "content",
77
75
  ...tt
78
- } = r ?? {}, w = o || m || l, et = {
76
+ } = r ?? {}, w = o || m || d, et = {
79
77
  ...$,
80
78
  overflow: "hidden"
81
79
  }, p = q((e) => {
82
80
  S.current = e, J(e);
83
- }, []), nt = (e) => {
84
- E.current = e, lt(_, e);
85
- };
81
+ }, []);
86
82
  return y(() => {
87
83
  S.current = m;
88
84
  }, [m]), y(
@@ -90,28 +86,28 @@ function Mt({
90
86
  a.current?.destroy(), a.current = null;
91
87
  },
92
88
  []
93
- ), st(() => {
89
+ ), it(() => {
94
90
  if (!w) return;
95
91
  const e = E.current, P = B.current;
96
92
  if (!e || !P) return;
97
- const ot = S.current, N = o ? mt(P, z) : 0, T = ut({
93
+ const nt = S.current, N = o ? ft(P, z) : 0, T = ut({
98
94
  element: e,
99
- intent: R,
95
+ intent: g,
100
96
  phase: o ? f : s,
101
97
  pace: b,
102
- durationFactor: d,
98
+ durationFactor: l,
103
99
  extraBounce: u,
104
100
  reduced: x,
105
- reducedMotion: g,
101
+ reducedMotion: R,
106
102
  property: V
107
- }), rt = !I.current && G.current, ct = !c && !rt && T.animate, M = () => {
103
+ }), ot = !I.current && G.current, rt = !c && !ot && T.animate, M = () => {
108
104
  if (e.style.willChange = "", o) {
109
105
  e.style.blockSize = "auto", h("open"), p(!0);
110
106
  return;
111
107
  }
112
- e.style.blockSize = "0px", h("closed"), l || p(!1), O.current?.();
108
+ e.style.blockSize = "0px", h("closed"), d || p(!1), O.current?.();
113
109
  };
114
- if (a.current?.destroy(), a.current = null, o && !ot && (e.style.blockSize = "0px", p(!0)), I.current = !0, !ct) {
110
+ if (a.current?.destroy(), a.current = null, o && !nt && (e.style.blockSize = "0px", p(!0)), I.current = !0, !rt) {
115
111
  M();
116
112
  return;
117
113
  }
@@ -127,8 +123,8 @@ function Mt({
127
123
  spring: T.spring,
128
124
  scheduler: L,
129
125
  stabilityWindow: 0.02,
130
- onUpdate: (it) => {
131
- e.style.blockSize = j(it);
126
+ onUpdate: (ct) => {
127
+ e.style.blockSize = j(ct);
132
128
  },
133
129
  onComplete: M
134
130
  });
@@ -137,18 +133,18 @@ function Mt({
137
133
  };
138
134
  }, [
139
135
  c,
140
- d,
136
+ l,
141
137
  u,
142
138
  f,
143
139
  s,
144
- l,
145
- R,
140
+ d,
141
+ g,
146
142
  z,
147
143
  O,
148
144
  o,
149
145
  b,
150
146
  x,
151
- g,
147
+ R,
152
148
  L,
153
149
  p,
154
150
  h,
@@ -157,13 +153,13 @@ function Mt({
157
153
  "div",
158
154
  {
159
155
  ...F,
160
- ref: nt,
156
+ ref: st(E, _),
161
157
  className: n,
162
158
  style: et,
163
159
  "data-oc-component": D,
164
- "data-oc-motion-intent": R,
160
+ "data-oc-motion-intent": g,
165
161
  "data-oc-motion-state": K,
166
- "data-oc-reduced-motion": g ? "true" : void 0,
162
+ "data-oc-reduced-motion": R ? "true" : void 0,
167
163
  "data-oc-state": o ? "open" : "closed",
168
164
  children: /* @__PURE__ */ H(
169
165
  "div",
package/dist/reset.css CHANGED
@@ -1,2 +1,2 @@
1
- @layer oc-reset{*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body{min-height:100dvh}body,h1,h2,h3,h4,h5,h6,p,ul,figure,blockquote,dl,dd,input{margin:0}h1,h2,h3,h4,h5,h6,input,button,textarea,select,label{font:inherit}h1,h2,h3,h4,h5,h6{text-wrap:balance}ul,ol{list-style:none;padding:0}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}a:visited{color:currentColor}img,picture{max-width:100%;display:block;object-fit:cover}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}svg{fill:currentColor;stroke:rgba(0,0,0,0)}textarea,button{padding:0;appearance:none}button:focus-visible{outline:none}textarea,input[type=text]{color:currentColor;background-color:rgba(0,0,0,0)}input:not(input:-webkit-autofill)::-webkit-contacts-auto-fill-button{background-color:currentColor}iframe,textarea,button{border:none}
1
+ @layer oc-reset{*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body{min-height:100dvh}body,h1,h2,h3,h4,h5,h6,p,ul,figure,blockquote,dl,dd,input{margin:0}h1,h2,h3,h4,h5,h6,input,button,textarea,select,label{font:inherit}h1,h2,h3,h4,h5,h6{text-wrap:balance}ul,ol{list-style:none;padding:0}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}a:visited{color:currentColor}img,picture{max-width:100%;display:block;object-fit:cover}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}svg{fill:currentColor;stroke:rgba(0,0,0,0)}textarea,button{padding:0;appearance:none}:where(button,a[href],summary,[tabindex]):where(:focus-visible){outline:var(--oc-focus-ring-width) solid var(--oc-color-theme-focus-ring);outline-offset:var(--oc-focus-ring-offset)}textarea,input[type=text]{color:currentColor;background-color:rgba(0,0,0,0)}input:not(input:-webkit-autofill)::-webkit-contacts-auto-fill-button{background-color:currentColor}iframe,textarea,button{border:none}
2
2
  }