@drjoshcsimmons/scl 0.3.1 → 0.4.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 (141) hide show
  1. package/dist/components/ui/accordion/accordion.d.ts +1 -0
  2. package/dist/components/ui/accordion/accordion.d.ts.map +1 -1
  3. package/dist/components/ui/badge/badge.d.ts +5 -1
  4. package/dist/components/ui/badge/badge.d.ts.map +1 -1
  5. package/dist/components/ui/button/button.d.ts +7 -0
  6. package/dist/components/ui/button/button.d.ts.map +1 -1
  7. package/dist/components/ui/input/input.d.ts +6 -1
  8. package/dist/components/ui/input/input.d.ts.map +1 -1
  9. package/dist/components/ui/skeleton/skeleton.d.ts +5 -2
  10. package/dist/components/ui/skeleton/skeleton.d.ts.map +1 -1
  11. package/dist/components/ui/textarea/textarea.d.ts +6 -1
  12. package/dist/components/ui/textarea/textarea.d.ts.map +1 -1
  13. package/dist/globals.css +45 -0
  14. package/dist/hooks/use-font-loaded.d.ts +2 -0
  15. package/dist/hooks/use-font-loaded.d.ts.map +1 -0
  16. package/dist/index.d.ts +1 -0
  17. package/dist/index.d.ts.map +1 -1
  18. package/dist/index.js +116 -114
  19. package/dist/index10.js +33 -28
  20. package/dist/index100.js +3 -5
  21. package/dist/index101.js +2 -2
  22. package/dist/index102.js +5 -54
  23. package/dist/index103.js +25 -30
  24. package/dist/index104.js +47 -29
  25. package/dist/index105.js +30 -4
  26. package/dist/index106.js +45 -216
  27. package/dist/index107.js +7 -46
  28. package/dist/index108.js +178 -27
  29. package/dist/index109.js +51 -44
  30. package/dist/index11.js +28 -5
  31. package/dist/index110.js +30 -9
  32. package/dist/index111.js +30 -6
  33. package/dist/index112.js +6 -48
  34. package/dist/index114.js +200 -42
  35. package/dist/index115.js +20 -204
  36. package/dist/index116.js +399 -21
  37. package/dist/index117.js +40 -392
  38. package/dist/index118.js +48 -2
  39. package/dist/index119.js +23 -51
  40. package/dist/index12.js +5 -79
  41. package/dist/index120.js +29 -65
  42. package/dist/index121.js +5 -25
  43. package/dist/index122.js +2 -29
  44. package/dist/index123.js +53 -5
  45. package/dist/index124.js +65 -2
  46. package/dist/index125.js +2 -2
  47. package/dist/index126.js +2 -5
  48. package/dist/index127.js +5 -3
  49. package/dist/index128.js +3 -24
  50. package/dist/index129.js +22 -111
  51. package/dist/index13.js +75 -12
  52. package/dist/index130.js +111 -14
  53. package/dist/index131.js +14 -523
  54. package/dist/index132.js +511 -114
  55. package/dist/index133.js +111 -117
  56. package/dist/index134.js +130 -61
  57. package/dist/index135.js +65 -69
  58. package/dist/index136.js +68 -8
  59. package/dist/index137.js +9 -14
  60. package/dist/index138.js +14 -66
  61. package/dist/index139.js +66 -4
  62. package/dist/index14.js +17 -14
  63. package/dist/index140.js +3 -22
  64. package/dist/index141.js +23 -13
  65. package/dist/index142.js +20 -25
  66. package/dist/index143.js +12 -4
  67. package/dist/index144.js +25 -20
  68. package/dist/index145.js +7 -0
  69. package/dist/index15.js +12 -17
  70. package/dist/index16.js +18 -31
  71. package/dist/index17.js +32 -25
  72. package/dist/index18.js +19 -31
  73. package/dist/index19.js +28 -129
  74. package/dist/index20.js +136 -18
  75. package/dist/index21.js +19 -11
  76. package/dist/index22.js +11 -20
  77. package/dist/index23.js +23 -15
  78. package/dist/index24.js +15 -31
  79. package/dist/index25.js +31 -35
  80. package/dist/index26.js +35 -15
  81. package/dist/index27.js +15 -13
  82. package/dist/index28.js +11 -20
  83. package/dist/index29.js +23 -99
  84. package/dist/index3.js +10 -22
  85. package/dist/index30.js +99 -38
  86. package/dist/index31.js +38 -10
  87. package/dist/index32.js +10 -48
  88. package/dist/index33.js +47 -64
  89. package/dist/index34.js +66 -236
  90. package/dist/{index63.js → index38.js} +14 -14
  91. package/dist/index4.js +22 -53
  92. package/dist/index40.js +239 -0
  93. package/dist/{index59.js → index42.js} +1 -1
  94. package/dist/index45.js +507 -236
  95. package/dist/index47.js +860 -18
  96. package/dist/index5.js +52 -24
  97. package/dist/index50.js +91 -197
  98. package/dist/{index65.js → index53.js} +8 -8
  99. package/dist/index55.js +221 -822
  100. package/dist/{index67.js → index58.js} +6 -6
  101. package/dist/index6.js +24 -34
  102. package/dist/index61.js +310 -504
  103. package/dist/{index43.js → index64.js} +7 -7
  104. package/dist/{index57.js → index66.js} +2 -2
  105. package/dist/{index52.js → index68.js} +3 -3
  106. package/dist/index7.js +34 -6
  107. package/dist/index70.js +238 -0
  108. package/dist/{index69.js → index72.js} +7 -7
  109. package/dist/{index36.js → index74.js} +1 -1
  110. package/dist/index76.js +20 -0
  111. package/dist/index8.js +6 -21
  112. package/dist/index81.js +1 -1
  113. package/dist/index82.js +1 -1
  114. package/dist/index83.js +7 -30
  115. package/dist/index84.js +25 -5
  116. package/dist/index86.js +114 -170
  117. package/dist/index87.js +13 -67
  118. package/dist/index88.js +133 -32
  119. package/dist/index89.js +10 -7
  120. package/dist/index9.js +27 -32
  121. package/dist/index90.js +215 -48
  122. package/dist/index91.js +14 -11
  123. package/dist/index92.js +64 -120
  124. package/dist/index93.js +32 -133
  125. package/dist/index94.js +48 -14
  126. package/dist/index95.js +50 -13
  127. package/dist/index96.js +50 -9
  128. package/dist/index97.js +9 -50
  129. package/dist/index98.js +29 -47
  130. package/dist/index99.js +7 -24
  131. package/dist/tokens/index.d.ts +9 -8
  132. package/dist/tokens/index.d.ts.map +1 -1
  133. package/dist/tokens/spacing.d.ts +11 -8
  134. package/dist/tokens/spacing.d.ts.map +1 -1
  135. package/dist/tokens/typography.d.ts +1 -0
  136. package/dist/tokens/typography.d.ts.map +1 -1
  137. package/package.json +4 -5
  138. package/dist/index71.js +0 -338
  139. package/dist/index73.js +0 -132
  140. package/dist/index77.js +0 -29
  141. /package/dist/{index41.js → index35.js} +0 -0
package/dist/index5.js CHANGED
@@ -1,27 +1,55 @@
1
- import { jsx as l } from "react/jsx-runtime";
2
- import * as a from "react";
3
- import { cx as s } from "./index2.js";
1
+ import { jsx as o, jsxs as d } from "react/jsx-runtime";
2
+ import { Root as l, Content as s, Item as m, Header as p, Trigger as t } from "./index40.js";
3
+ import * as i from "react";
4
+ import { cx as n } from "./index2.js";
4
5
  /* empty css */
5
- const o = a.forwardRef(
6
- ({ className: e, variant: r = "default", ...t }, i) => /* @__PURE__ */ l(
7
- "div",
8
- {
9
- ref: i,
10
- role: "alert",
11
- className: s("scl-alert", `scl-alert--${r}`, e),
12
- ...t
13
- }
14
- )
15
- );
16
- o.displayName = "Alert";
17
- const c = a.forwardRef(
18
- ({ className: e, ...r }, t) => /* @__PURE__ */ l("h5", { ref: t, className: s("scl-alert__title", e), ...r })
19
- );
20
- c.displayName = "AlertTitle";
21
- const m = a.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ l("div", { ref: t, className: s("scl-alert__description", e), ...r }));
22
- m.displayName = "AlertDescription";
6
+ const C = l, f = () => /* @__PURE__ */ o(
7
+ "svg",
8
+ {
9
+ className: "scl-accordion-trigger__icon",
10
+ viewBox: "0 0 24 24",
11
+ fill: "none",
12
+ stroke: "currentColor",
13
+ strokeWidth: "2",
14
+ strokeLinecap: "square",
15
+ "aria-hidden": "true",
16
+ children: /* @__PURE__ */ o("polyline", { points: "6 9 12 15 18 9" })
17
+ }
18
+ ), g = i.forwardRef(({ className: r, ...c }, e) => /* @__PURE__ */ o(
19
+ m,
20
+ {
21
+ ref: e,
22
+ className: n("scl-accordion-item", r),
23
+ ...c
24
+ }
25
+ ));
26
+ g.displayName = "AccordionItem";
27
+ const N = i.forwardRef(({ className: r, children: c, ...e }, a) => /* @__PURE__ */ o(p, { className: "scl-accordion-header", children: /* @__PURE__ */ d(
28
+ t,
29
+ {
30
+ ref: a,
31
+ className: n("scl-accordion-trigger", r),
32
+ ...e,
33
+ children: [
34
+ c,
35
+ /* @__PURE__ */ o(f, {})
36
+ ]
37
+ }
38
+ ) }));
39
+ N.displayName = t.displayName;
40
+ const h = i.forwardRef(({ className: r, children: c, ...e }, a) => /* @__PURE__ */ o(
41
+ s,
42
+ {
43
+ ref: a,
44
+ className: "scl-accordion-content",
45
+ ...e,
46
+ children: /* @__PURE__ */ o("div", { className: n("scl-accordion-content__inner", r), children: c })
47
+ }
48
+ ));
49
+ h.displayName = s.displayName;
23
50
  export {
24
- o as Alert,
25
- m as AlertDescription,
26
- c as AlertTitle
51
+ C as Accordion,
52
+ h as AccordionContent,
53
+ g as AccordionItem,
54
+ N as AccordionTrigger
27
55
  };
package/dist/index50.js CHANGED
@@ -1,111 +1,115 @@
1
- import * as i from "react";
2
- import { composeEventHandlers as I } from "./index84.js";
3
- import { useComposedRefs as E } from "./index77.js";
4
- import { createContextScope as w } from "./index85.js";
5
- import { Primitive as b } from "./index88.js";
6
- import { createRovingFocusGroupScope as P, Root as B, Item as q } from "./index86.js";
7
- import { useControllableState as K } from "./index90.js";
8
- import { useDirection as T } from "./index89.js";
9
- import { useSize as U } from "./index99.js";
10
- import { usePrevious as V } from "./index100.js";
11
- import { Presence as j } from "./index87.js";
12
- import { jsx as p, jsxs as z } from "react/jsx-runtime";
13
- var _ = "Radio", [H, g] = w(_), [W, X] = H(_), k = i.forwardRef(
14
- (a, d) => {
1
+ import * as r from "react";
2
+ import { composeEventHandlers as T } from "./index83.js";
3
+ import { useComposedRefs as P } from "./index84.js";
4
+ import { createContextScope as I } from "./index85.js";
5
+ import { useControllableState as M } from "./index95.js";
6
+ import { usePrevious as H } from "./index102.js";
7
+ import { useSize as j } from "./index103.js";
8
+ import { Primitive as y } from "./index93.js";
9
+ import { jsxs as A, jsx as m } from "react/jsx-runtime";
10
+ var h = "Switch", [U] = I(h), [q, z] = U(h), R = r.forwardRef(
11
+ (t, a) => {
15
12
  const {
16
- __scopeRadio: o,
17
- name: s,
18
- checked: e = !1,
19
- required: r,
13
+ __scopeSwitch: e,
14
+ name: c,
15
+ checked: o,
16
+ defaultChecked: v,
17
+ required: i,
20
18
  disabled: n,
21
- value: f = "on",
22
- onCheck: c,
23
- form: m,
24
- ...R
25
- } = a, [l, v] = i.useState(null), t = E(d, (y) => v(y)), u = i.useRef(!1), h = l ? m || !!l.closest("form") : !0;
26
- return /* @__PURE__ */ z(W, { scope: o, checked: e, disabled: n, children: [
27
- /* @__PURE__ */ p(
28
- b.button,
19
+ value: p = "on",
20
+ onCheckedChange: w,
21
+ form: s,
22
+ ...S
23
+ } = t, [d, u] = r.useState(null), b = P(a, (f) => u(f)), C = r.useRef(!1), k = d ? s || !!d.closest("form") : !0, [l, B] = M({
24
+ prop: o,
25
+ defaultProp: v ?? !1,
26
+ onChange: w,
27
+ caller: h
28
+ });
29
+ return /* @__PURE__ */ A(q, { scope: e, checked: l, disabled: n, children: [
30
+ /* @__PURE__ */ m(
31
+ y.button,
29
32
  {
30
33
  type: "button",
31
- role: "radio",
32
- "aria-checked": e,
33
- "data-state": N(e),
34
+ role: "switch",
35
+ "aria-checked": l,
36
+ "aria-required": i,
37
+ "data-state": g(l),
34
38
  "data-disabled": n ? "" : void 0,
35
39
  disabled: n,
36
- value: f,
37
- ...R,
38
- ref: t,
39
- onClick: I(a.onClick, (y) => {
40
- e || c == null || c(), h && (u.current = y.isPropagationStopped(), u.current || y.stopPropagation());
40
+ value: p,
41
+ ...S,
42
+ ref: b,
43
+ onClick: T(t.onClick, (f) => {
44
+ B((N) => !N), k && (C.current = f.isPropagationStopped(), C.current || f.stopPropagation());
41
45
  })
42
46
  }
43
47
  ),
44
- h && /* @__PURE__ */ p(
45
- A,
48
+ k && /* @__PURE__ */ m(
49
+ x,
46
50
  {
47
- control: l,
48
- bubbles: !u.current,
49
- name: s,
50
- value: f,
51
- checked: e,
52
- required: r,
51
+ control: d,
52
+ bubbles: !C.current,
53
+ name: c,
54
+ value: p,
55
+ checked: l,
56
+ required: i,
53
57
  disabled: n,
54
- form: m,
58
+ form: s,
55
59
  style: { transform: "translateX(-100%)" }
56
60
  }
57
61
  )
58
62
  ] });
59
63
  }
60
64
  );
61
- k.displayName = _;
62
- var G = "RadioIndicator", S = i.forwardRef(
63
- (a, d) => {
64
- const { __scopeRadio: o, forceMount: s, ...e } = a, r = X(G, o);
65
- return /* @__PURE__ */ p(j, { present: s || r.checked, children: /* @__PURE__ */ p(
66
- b.span,
65
+ R.displayName = h;
66
+ var E = "SwitchThumb", _ = r.forwardRef(
67
+ (t, a) => {
68
+ const { __scopeSwitch: e, ...c } = t, o = z(E, e);
69
+ return /* @__PURE__ */ m(
70
+ y.span,
67
71
  {
68
- "data-state": N(r.checked),
69
- "data-disabled": r.disabled ? "" : void 0,
70
- ...e,
71
- ref: d
72
+ "data-state": g(o.checked),
73
+ "data-disabled": o.disabled ? "" : void 0,
74
+ ...c,
75
+ ref: a
72
76
  }
73
- ) });
77
+ );
74
78
  }
75
79
  );
76
- S.displayName = G;
77
- var Y = "RadioBubbleInput", A = i.forwardRef(
80
+ _.displayName = E;
81
+ var L = "SwitchBubbleInput", x = r.forwardRef(
78
82
  ({
79
- __scopeRadio: a,
80
- control: d,
81
- checked: o,
82
- bubbles: s = !0,
83
- ...e
84
- }, r) => {
85
- const n = i.useRef(null), f = E(n, r), c = V(o), m = U(d);
86
- return i.useEffect(() => {
87
- const R = n.current;
88
- if (!R) return;
89
- const l = window.HTMLInputElement.prototype, t = Object.getOwnPropertyDescriptor(
90
- l,
83
+ __scopeSwitch: t,
84
+ control: a,
85
+ checked: e,
86
+ bubbles: c = !0,
87
+ ...o
88
+ }, v) => {
89
+ const i = r.useRef(null), n = P(i, v), p = H(e), w = j(a);
90
+ return r.useEffect(() => {
91
+ const s = i.current;
92
+ if (!s) return;
93
+ const S = window.HTMLInputElement.prototype, u = Object.getOwnPropertyDescriptor(
94
+ S,
91
95
  "checked"
92
96
  ).set;
93
- if (c !== o && t) {
94
- const u = new Event("click", { bubbles: s });
95
- t.call(R, o), R.dispatchEvent(u);
97
+ if (p !== e && u) {
98
+ const b = new Event("click", { bubbles: c });
99
+ u.call(s, e), s.dispatchEvent(b);
96
100
  }
97
- }, [c, o, s]), /* @__PURE__ */ p(
98
- b.input,
101
+ }, [p, e, c]), /* @__PURE__ */ m(
102
+ "input",
99
103
  {
100
- type: "radio",
104
+ type: "checkbox",
101
105
  "aria-hidden": !0,
102
- defaultChecked: o,
103
- ...e,
106
+ defaultChecked: e,
107
+ ...o,
104
108
  tabIndex: -1,
105
- ref: f,
109
+ ref: n,
106
110
  style: {
107
- ...e.style,
108
- ...m,
111
+ ...o.style,
112
+ ...w,
109
113
  position: "absolute",
110
114
  pointerEvents: "none",
111
115
  opacity: 0,
@@ -115,124 +119,14 @@ var Y = "RadioBubbleInput", A = i.forwardRef(
115
119
  );
116
120
  }
117
121
  );
118
- A.displayName = Y;
119
- function N(a) {
120
- return a ? "checked" : "unchecked";
122
+ x.displayName = L;
123
+ function g(t) {
124
+ return t ? "checked" : "unchecked";
121
125
  }
122
- var J = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], C = "RadioGroup", [Q] = w(C, [
123
- P,
124
- g
125
- ]), x = P(), D = g(), [Z, $] = Q(C), M = i.forwardRef(
126
- (a, d) => {
127
- const {
128
- __scopeRadioGroup: o,
129
- name: s,
130
- defaultValue: e,
131
- value: r,
132
- required: n = !1,
133
- disabled: f = !1,
134
- orientation: c,
135
- dir: m,
136
- loop: R = !0,
137
- onValueChange: l,
138
- ...v
139
- } = a, t = x(o), u = T(m), [h, y] = K({
140
- prop: r,
141
- defaultProp: e ?? null,
142
- onChange: l,
143
- caller: C
144
- });
145
- return /* @__PURE__ */ p(
146
- Z,
147
- {
148
- scope: o,
149
- name: s,
150
- required: n,
151
- disabled: f,
152
- value: h,
153
- onValueChange: y,
154
- children: /* @__PURE__ */ p(
155
- B,
156
- {
157
- asChild: !0,
158
- ...t,
159
- orientation: c,
160
- dir: u,
161
- loop: R,
162
- children: /* @__PURE__ */ p(
163
- b.div,
164
- {
165
- role: "radiogroup",
166
- "aria-required": n,
167
- "aria-orientation": c,
168
- "data-disabled": f ? "" : void 0,
169
- dir: u,
170
- ...v,
171
- ref: d
172
- }
173
- )
174
- }
175
- )
176
- }
177
- );
178
- }
179
- );
180
- M.displayName = C;
181
- var O = "RadioGroupItem", F = i.forwardRef(
182
- (a, d) => {
183
- const { __scopeRadioGroup: o, disabled: s, ...e } = a, r = $(O, o), n = r.disabled || s, f = x(o), c = D(o), m = i.useRef(null), R = E(d, m), l = r.value === e.value, v = i.useRef(!1);
184
- return i.useEffect(() => {
185
- const t = (h) => {
186
- J.includes(h.key) && (v.current = !0);
187
- }, u = () => v.current = !1;
188
- return document.addEventListener("keydown", t), document.addEventListener("keyup", u), () => {
189
- document.removeEventListener("keydown", t), document.removeEventListener("keyup", u);
190
- };
191
- }, []), /* @__PURE__ */ p(
192
- q,
193
- {
194
- asChild: !0,
195
- ...f,
196
- focusable: !n,
197
- active: l,
198
- children: /* @__PURE__ */ p(
199
- k,
200
- {
201
- disabled: n,
202
- required: r.required,
203
- checked: l,
204
- ...c,
205
- ...e,
206
- name: r.name,
207
- ref: R,
208
- onCheck: () => r.onValueChange(e.value),
209
- onKeyDown: I((t) => {
210
- t.key === "Enter" && t.preventDefault();
211
- }),
212
- onFocus: I(e.onFocus, () => {
213
- var t;
214
- v.current && ((t = m.current) == null || t.click());
215
- })
216
- }
217
- )
218
- }
219
- );
220
- }
221
- );
222
- F.displayName = O;
223
- var ee = "RadioGroupIndicator", L = i.forwardRef(
224
- (a, d) => {
225
- const { __scopeRadioGroup: o, ...s } = a, e = D(o);
226
- return /* @__PURE__ */ p(S, { ...e, ...s, ref: d });
227
- }
228
- );
229
- L.displayName = ee;
230
- var le = M, fe = F, me = L;
126
+ var Q = R, V = _;
231
127
  export {
232
- me as Indicator,
233
- fe as Item,
234
- M as RadioGroup,
235
- L as RadioGroupIndicator,
236
- F as RadioGroupItem,
237
- le as Root
128
+ Q as Root,
129
+ R as Switch,
130
+ _ as SwitchThumb,
131
+ V as Thumb
238
132
  };
@@ -1,13 +1,13 @@
1
1
  import * as d from "react";
2
- import { clamp as $ } from "./index105.js";
3
- import { composeEventHandlers as C } from "./index84.js";
4
- import { useComposedRefs as M } from "./index77.js";
2
+ import { clamp as $ } from "./index100.js";
3
+ import { composeEventHandlers as C } from "./index83.js";
4
+ import { useComposedRefs as M } from "./index84.js";
5
5
  import { createContextScope as ce } from "./index85.js";
6
- import { useControllableState as le } from "./index90.js";
7
- import { useDirection as de } from "./index89.js";
8
- import { usePrevious as ue } from "./index100.js";
9
- import { useSize as fe } from "./index99.js";
10
- import { Primitive as K } from "./index88.js";
6
+ import { useControllableState as le } from "./index95.js";
7
+ import { useDirection as de } from "./index99.js";
8
+ import { usePrevious as ue } from "./index102.js";
9
+ import { useSize as fe } from "./index103.js";
10
+ import { Primitive as K } from "./index93.js";
11
11
  import { createCollection as me } from "./index101.js";
12
12
  import { jsx as v, jsxs as pe } from "react/jsx-runtime";
13
13
  var j = ["PageUp", "PageDown"], X = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], G = {