@spark-ui/checkbox 1.2.3 → 1.2.4
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.
- package/CHANGELOG.md +6 -0
- package/dist/index.js +1 -1
- package/dist/index.mjs +6 -224
- package/package.json +3 -3
- package/vite.config.ts +1 -1
package/CHANGELOG.md
CHANGED
@@ -3,6 +3,12 @@
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
5
|
|
6
|
+
## [1.2.4](https://github.com/adevinta/spark/compare/@spark-ui/checkbox@1.2.3...@spark-ui/checkbox@1.2.4) (2023-03-30)
|
7
|
+
|
8
|
+
### Bug Fixes
|
9
|
+
|
10
|
+
- revise code in accordance with the updated vite configuration ([4f4174a](https://github.com/adevinta/spark/commit/4f4174a0ef8df71f28af5c77acf0c5f7c7837e58)), closes [#503](https://github.com/adevinta/spark/issues/503)
|
11
|
+
|
6
12
|
## [1.2.3](https://github.com/adevinta/spark/compare/@spark-ui/checkbox@1.2.2...@spark-ui/checkbox@1.2.3) (2023-03-29)
|
7
13
|
|
8
14
|
**Note:** Version bump only for package @spark-ui/checkbox
|
package/dist/index.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("@radix-ui/react-checkbox"),o=require("@spark-ui/icons"),a=require("react"),i=require("class-variance-authority");function d(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,s.get?s:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const c=d(n),u=i.cva(["peer h-sz-20 w-sz-20 rounded-sm border-md bg-transparent items-center justify-center","spark-disabled:opacity-dim-3 spark-disabled:cursor-not-allowed spark-disabled:hover:ring-0","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline-high","hover:outline-none hover:ring-2 hover:border-primary-container"],{variants:{intent:{primary:["spark-state-unchecked:border-outline","spark-state-checked:border-primary spark-state-checked:bg-primary"],success:["spark-state-unchecked:border-success","spark-state-checked:border-success spark-state-checked:bg-success"],alert:["spark-state-unchecked:border-alert","spark-state-checked:border-alert spark-state-checked:bg-alert"],error:["spark-state-unchecked:border-error","spark-state-checked:border-error spark-state-checked:bg-error"]}},defaultVariants:{intent:"primary"}}),l=a.forwardRef(({intent:e,icon:t=a.createElement(o.Check,null),...r},s)=>a.createElement(c.Root,{ref:s,className:u({intent:e}),...r},a.createElement(c.Indicator,{className:"flex items-center justify-center text-surface"},t)));exports.Checkbox=l;
|
package/dist/index.mjs
CHANGED
@@ -1,226 +1,8 @@
|
|
1
|
-
import
|
2
|
-
import {
|
3
|
-
import
|
4
|
-
|
5
|
-
|
6
|
-
for (var r = 1; r < arguments.length; r++) {
|
7
|
-
var t = arguments[r];
|
8
|
-
for (var n in t)
|
9
|
-
Object.prototype.hasOwnProperty.call(t, n) && (e[n] = t[n]);
|
10
|
-
}
|
11
|
-
return e;
|
12
|
-
}, C.apply(this, arguments);
|
13
|
-
}
|
14
|
-
function $(...e) {
|
15
|
-
return (r) => e.forEach((t) => function(n, c) {
|
16
|
-
typeof n == "function" ? n(c) : n != null && (n.current = c);
|
17
|
-
}(t, r));
|
18
|
-
}
|
19
|
-
function R(...e) {
|
20
|
-
return U($(...e), e);
|
21
|
-
}
|
22
|
-
function Y(...e) {
|
23
|
-
const r = e[0];
|
24
|
-
if (e.length === 1)
|
25
|
-
return r;
|
26
|
-
const t = () => {
|
27
|
-
const n = e.map((c) => ({ useScope: c(), scopeName: c.scopeName }));
|
28
|
-
return function(c) {
|
29
|
-
const o = n.reduce((a, { useScope: i, scopeName: s }) => ({ ...a, ...i(c)[`__scope${s}`] }), {});
|
30
|
-
return T(() => ({ [`__scope${r.scopeName}`]: o }), [o]);
|
31
|
-
};
|
32
|
-
};
|
33
|
-
return t.scopeName = r.scopeName, t;
|
34
|
-
}
|
35
|
-
function z(e, r, { checkForDefaultPrevented: t = !0 } = {}) {
|
36
|
-
return function(n) {
|
37
|
-
if (e?.(n), t === !1 || !n.defaultPrevented)
|
38
|
-
return r?.(n);
|
39
|
-
};
|
40
|
-
}
|
41
|
-
function B(e) {
|
42
|
-
const r = g(e);
|
43
|
-
return O(() => {
|
44
|
-
r.current = e;
|
45
|
-
}), T(() => (...t) => {
|
46
|
-
var n;
|
47
|
-
return (n = r.current) === null || n === void 0 ? void 0 : n.call(r, ...t);
|
48
|
-
}, []);
|
49
|
-
}
|
50
|
-
function ee({ prop: e, defaultProp: r, onChange: t = () => {
|
51
|
-
} }) {
|
52
|
-
const [n, c] = function({ defaultProp: s, onChange: u }) {
|
53
|
-
const f = _(s), [l] = f, m = g(l), k = B(u);
|
54
|
-
return O(() => {
|
55
|
-
m.current !== l && (k(l), m.current = l);
|
56
|
-
}, [l, m, k]), f;
|
57
|
-
}({ defaultProp: r, onChange: t }), o = e !== void 0, a = o ? e : n, i = B(t);
|
58
|
-
return [a, U((s) => {
|
59
|
-
if (o) {
|
60
|
-
const u = typeof s == "function" ? s(e) : s;
|
61
|
-
u !== e && i(u);
|
62
|
-
} else
|
63
|
-
c(s);
|
64
|
-
}, [o, e, c, i])];
|
65
|
-
}
|
66
|
-
const L = Boolean(globalThis?.document) ? V : () => {
|
67
|
-
}, q = (e) => {
|
68
|
-
const { present: r, children: t } = e, n = function(a) {
|
69
|
-
const [i, s] = _(), u = g({}), f = g(a), l = g("none"), m = a ? "mounted" : "unmounted", [k, h] = function(d, p) {
|
70
|
-
return X((v, N) => {
|
71
|
-
const b = p[v][N];
|
72
|
-
return b ?? v;
|
73
|
-
}, d);
|
74
|
-
}(m, { mounted: { UNMOUNT: "unmounted", ANIMATION_OUT: "unmountSuspended" }, unmountSuspended: { MOUNT: "mounted", ANIMATION_END: "unmounted" }, unmounted: { MOUNT: "mounted" } });
|
75
|
-
return O(() => {
|
76
|
-
const d = S(u.current);
|
77
|
-
l.current = k === "mounted" ? d : "none";
|
78
|
-
}, [k]), L(() => {
|
79
|
-
const d = u.current, p = f.current;
|
80
|
-
if (p !== a) {
|
81
|
-
const v = l.current, N = S(d);
|
82
|
-
a ? h("MOUNT") : N === "none" || d?.display === "none" ? h("UNMOUNT") : h(p && v !== N ? "ANIMATION_OUT" : "UNMOUNT"), f.current = a;
|
83
|
-
}
|
84
|
-
}, [a, h]), L(() => {
|
85
|
-
if (i) {
|
86
|
-
const d = (v) => {
|
87
|
-
const N = S(u.current).includes(v.animationName);
|
88
|
-
v.target === i && N && J(() => h("ANIMATION_END"));
|
89
|
-
}, p = (v) => {
|
90
|
-
v.target === i && (l.current = S(u.current));
|
91
|
-
};
|
92
|
-
return i.addEventListener("animationstart", p), i.addEventListener("animationcancel", d), i.addEventListener("animationend", d), () => {
|
93
|
-
i.removeEventListener("animationstart", p), i.removeEventListener("animationcancel", d), i.removeEventListener("animationend", d);
|
94
|
-
};
|
95
|
-
}
|
96
|
-
h("ANIMATION_END");
|
97
|
-
}, [i, h]), { isPresent: ["mounted", "unmountSuspended"].includes(k), ref: U((d) => {
|
98
|
-
d && (u.current = getComputedStyle(d)), s(d);
|
99
|
-
}, []) };
|
100
|
-
}(r), c = typeof t == "function" ? t({ present: n.isPresent }) : x.only(t), o = R(n.ref, c.ref);
|
101
|
-
return typeof t == "function" || n.isPresent ? j(c, { ref: o }) : null;
|
102
|
-
};
|
103
|
-
function S(e) {
|
104
|
-
return e?.animationName || "none";
|
105
|
-
}
|
106
|
-
q.displayName = "Presence";
|
107
|
-
const H = A((e, r) => {
|
108
|
-
const { children: t, ...n } = e, c = x.toArray(t), o = c.find(ne);
|
109
|
-
if (o) {
|
110
|
-
const a = o.props.children, i = c.map((s) => s === o ? x.count(a) > 1 ? x.only(null) : M(a) ? a.props.children : null : s);
|
111
|
-
return y(I, C({}, n, { ref: r }), M(a) ? j(a, void 0, i) : null);
|
112
|
-
}
|
113
|
-
return y(I, C({}, n, { ref: r }), t);
|
114
|
-
});
|
115
|
-
H.displayName = "Slot";
|
116
|
-
const I = A((e, r) => {
|
117
|
-
const { children: t, ...n } = e;
|
118
|
-
return M(t) ? j(t, { ...re(n, t.props), ref: $(r, t.ref) }) : x.count(t) > 1 ? x.only(null) : null;
|
119
|
-
});
|
120
|
-
I.displayName = "SlotClone";
|
121
|
-
const te = ({ children: e }) => y(G, null, e);
|
122
|
-
function ne(e) {
|
123
|
-
return M(e) && e.type === te;
|
124
|
-
}
|
125
|
-
function re(e, r) {
|
126
|
-
const t = { ...r };
|
127
|
-
for (const n in r) {
|
128
|
-
const c = e[n], o = r[n];
|
129
|
-
/^on[A-Z]/.test(n) ? c && o ? t[n] = (...a) => {
|
130
|
-
o(...a), c(...a);
|
131
|
-
} : c && (t[n] = c) : n === "style" ? t[n] = { ...c, ...o } : n === "className" && (t[n] = [c, o].filter(Boolean).join(" "));
|
132
|
-
}
|
133
|
-
return { ...e, ...t };
|
134
|
-
}
|
135
|
-
const F = ["a", "button", "div", "form", "h2", "h3", "img", "input", "label", "li", "nav", "ol", "p", "span", "svg", "ul"].reduce((e, r) => {
|
136
|
-
const t = A((n, c) => {
|
137
|
-
const { asChild: o, ...a } = n, i = o ? H : r;
|
138
|
-
return O(() => {
|
139
|
-
window[Symbol.for("radix-ui")] = !0;
|
140
|
-
}, []), y(i, C({}, a, { ref: c }));
|
141
|
-
});
|
142
|
-
return t.displayName = `Primitive.${r}`, { ...e, [r]: t };
|
143
|
-
}, {}), K = "Checkbox", [oe, ve] = function(e, r = []) {
|
144
|
-
let t = [];
|
145
|
-
const n = () => {
|
146
|
-
const c = t.map((o) => D(o));
|
147
|
-
return function(o) {
|
148
|
-
const a = o?.[e] || c;
|
149
|
-
return T(() => ({ [`__scope${e}`]: { ...o, [e]: a } }), [o, a]);
|
150
|
-
};
|
151
|
-
};
|
152
|
-
return n.scopeName = e, [function(c, o) {
|
153
|
-
const a = D(o), i = t.length;
|
154
|
-
function s(u) {
|
155
|
-
const { scope: f, children: l, ...m } = u, k = f?.[e][i] || a, h = T(() => m, Object.values(m));
|
156
|
-
return y(k.Provider, { value: h }, l);
|
157
|
-
}
|
158
|
-
return t = [...t, o], s.displayName = c + "Provider", [s, function(u, f) {
|
159
|
-
const l = f?.[e][i] || a, m = Z(l);
|
160
|
-
if (m)
|
161
|
-
return m;
|
162
|
-
if (o !== void 0)
|
163
|
-
return o;
|
164
|
-
throw new Error(`\`${u}\` must be used within \`${c}\``);
|
165
|
-
}];
|
166
|
-
}, Y(n, ...r)];
|
167
|
-
}(K), [se, ce] = oe(K), ae = A((e, r) => {
|
168
|
-
const { __scopeCheckbox: t, name: n, checked: c, defaultChecked: o, required: a, disabled: i, value: s = "on", onCheckedChange: u, ...f } = e, [l, m] = _(null), k = R(r, (b) => m(b)), h = g(!1), d = !l || Boolean(l.closest("form")), [p = !1, v] = ee({ prop: c, defaultProp: o, onChange: u }), N = g(p);
|
169
|
-
return O(() => {
|
170
|
-
const b = l?.form;
|
171
|
-
if (b) {
|
172
|
-
const P = () => v(N.current);
|
173
|
-
return b.addEventListener("reset", P), () => b.removeEventListener("reset", P);
|
174
|
-
}
|
175
|
-
}, [l, v]), y(se, { scope: t, state: p, disabled: i }, y(F.button, C({ type: "button", role: "checkbox", "aria-checked": w(p) ? "mixed" : p, "aria-required": a, "data-state": W(p), "data-disabled": i ? "" : void 0, disabled: i, value: s }, f, { ref: k, onKeyDown: z(e.onKeyDown, (b) => {
|
176
|
-
b.key === "Enter" && b.preventDefault();
|
177
|
-
}), onClick: z(e.onClick, (b) => {
|
178
|
-
v((P) => !!w(P) || !P), d && (h.current = b.isPropagationStopped(), h.current || b.stopPropagation());
|
179
|
-
}) })), d && y(ie, { control: l, bubbles: !h.current, name: n, value: s, checked: p, required: a, disabled: i, style: { transform: "translateX(-100%)" } }));
|
180
|
-
}), ie = (e) => {
|
181
|
-
const { control: r, checked: t, bubbles: n = !0, ...c } = e, o = g(null), a = function(s) {
|
182
|
-
const u = g({ value: s, previous: s });
|
183
|
-
return T(() => (u.current.value !== s && (u.current.previous = u.current.value, u.current.value = s), u.current.previous), [s]);
|
184
|
-
}(t), i = function(s) {
|
185
|
-
const [u, f] = _(void 0);
|
186
|
-
return L(() => {
|
187
|
-
if (s) {
|
188
|
-
f({ width: s.offsetWidth, height: s.offsetHeight });
|
189
|
-
const l = new ResizeObserver((m) => {
|
190
|
-
if (!Array.isArray(m) || !m.length)
|
191
|
-
return;
|
192
|
-
const k = m[0];
|
193
|
-
let h, d;
|
194
|
-
if ("borderBoxSize" in k) {
|
195
|
-
const p = k.borderBoxSize, v = Array.isArray(p) ? p[0] : p;
|
196
|
-
h = v.inlineSize, d = v.blockSize;
|
197
|
-
} else
|
198
|
-
h = s.offsetWidth, d = s.offsetHeight;
|
199
|
-
f({ width: h, height: d });
|
200
|
-
});
|
201
|
-
return l.observe(s, { box: "border-box" }), () => l.unobserve(s);
|
202
|
-
}
|
203
|
-
f(void 0);
|
204
|
-
}, [s]), u;
|
205
|
-
}(r);
|
206
|
-
return O(() => {
|
207
|
-
const s = o.current, u = window.HTMLInputElement.prototype, f = Object.getOwnPropertyDescriptor(u, "checked").set;
|
208
|
-
if (a !== t && f) {
|
209
|
-
const l = new Event("click", { bubbles: n });
|
210
|
-
s.indeterminate = w(t), f.call(s, !w(t) && t), s.dispatchEvent(l);
|
211
|
-
}
|
212
|
-
}, [a, t, n]), y("input", C({ type: "checkbox", "aria-hidden": !0, defaultChecked: !w(t) && t }, c, { tabIndex: -1, ref: o, style: { ...e.style, ...i, position: "absolute", pointerEvents: "none", opacity: 0, margin: 0 } }));
|
213
|
-
};
|
214
|
-
function w(e) {
|
215
|
-
return e === "indeterminate";
|
216
|
-
}
|
217
|
-
function W(e) {
|
218
|
-
return w(e) ? "indeterminate" : e ? "checked" : "unchecked";
|
219
|
-
}
|
220
|
-
const ue = ae, le = A((e, r) => {
|
221
|
-
const { __scopeCheckbox: t, forceMount: n, ...c } = e, o = ce("CheckboxIndicator", t);
|
222
|
-
return y(q, { present: n || w(o.state) || o.state === !0 }, y(F.span, C({ "data-state": W(o.state), "data-disabled": o.disabled ? "" : void 0 }, c, { ref: r, style: { pointerEvents: "none", ...e.style } })));
|
223
|
-
}), de = ({ title: e, fill: r = "currentColor", stroke: t = "currentColor", ...n }) => E.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...e && { "data-title": e }, fill: r, stroke: t, ...n }, e === void 0 ? void 0 : E.createElement("title", null, e), E.createElement("path", { d: "M8.91958 20.1667C8.73748 20.1667 8.56045 20.1323 8.38847 20.0635C8.21649 19.9947 8.05969 19.8915 7.91806 19.7539L2.42489 14.4176C2.14163 14.1425 2 13.8083 2 13.4152C2 13.0222 2.14163 12.688 2.42489 12.4129C2.70814 12.1377 3.04704 12.0001 3.44158 12.0001C3.83612 12.0001 4.18513 12.1377 4.48862 12.4129L8.91958 16.7173L19.5417 6.42797C19.825 6.1528 20.1639 6.0103 20.5584 6.00048C20.953 5.99065 21.2919 6.13315 21.5751 6.42797C21.8584 6.70313 22 7.03727 22 7.43036C22 7.82346 21.8584 8.15759 21.5751 8.43276L9.92109 19.7539C9.77946 19.8915 9.62266 19.9947 9.45068 20.0635C9.27871 20.1323 9.10167 20.1667 8.91958 20.1667Z" })), fe = Q(["peer h-sz-20 w-sz-20 rounded-sm border-md bg-transparent items-center justify-center", "spark-disabled:opacity-dim-3 spark-disabled:cursor-not-allowed spark-disabled:hover:ring-0", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline-high", "hover:outline-none hover:ring-2 hover:border-primary-container"], { variants: { intent: { primary: ["spark-state-unchecked:border-outline", "spark-state-checked:border-primary spark-state-checked:bg-primary"], success: ["spark-state-unchecked:border-success", "spark-state-checked:border-success spark-state-checked:bg-success"], alert: ["spark-state-unchecked:border-alert", "spark-state-checked:border-alert spark-state-checked:bg-alert"], error: ["spark-state-unchecked:border-error", "spark-state-checked:border-error spark-state-checked:bg-error"] } }, defaultVariants: { intent: "primary" } }), be = E.forwardRef(({ intent: e, icon: r = E.createElement(de, null), ...t }, n) => E.createElement(ue, { ref: n, className: fe({ intent: e }), ...t }, E.createElement(le, { className: "flex items-center justify-center text-surface" }, r)));
|
1
|
+
import * as r from "@radix-ui/react-checkbox";
|
2
|
+
import { Check as o } from "@spark-ui/icons";
|
3
|
+
import e from "react";
|
4
|
+
import { cva as n } from "class-variance-authority";
|
5
|
+
const i = n(["peer h-sz-20 w-sz-20 rounded-sm border-md bg-transparent items-center justify-center", "spark-disabled:opacity-dim-3 spark-disabled:cursor-not-allowed spark-disabled:hover:ring-0", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline-high", "hover:outline-none hover:ring-2 hover:border-primary-container"], { variants: { intent: { primary: ["spark-state-unchecked:border-outline", "spark-state-checked:border-primary spark-state-checked:bg-primary"], success: ["spark-state-unchecked:border-success", "spark-state-checked:border-success spark-state-checked:bg-success"], alert: ["spark-state-unchecked:border-alert", "spark-state-checked:border-alert spark-state-checked:bg-alert"], error: ["spark-state-unchecked:border-error", "spark-state-checked:border-error spark-state-checked:bg-error"] } }, defaultVariants: { intent: "primary" } }), l = e.forwardRef(({ intent: t, icon: s = e.createElement(o, null), ...a }, c) => e.createElement(r.Root, { ref: c, className: i({ intent: t }), ...a }, e.createElement(r.Indicator, { className: "flex items-center justify-center text-surface" }, s)));
|
224
6
|
export {
|
225
|
-
|
7
|
+
l as Checkbox
|
226
8
|
};
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@spark-ui/checkbox",
|
3
|
-
"version": "1.2.
|
3
|
+
"version": "1.2.4",
|
4
4
|
"description": "A control that allows the user to toggle between checked and not checked.",
|
5
5
|
"publishConfig": {
|
6
6
|
"access": "public"
|
@@ -13,8 +13,8 @@
|
|
13
13
|
},
|
14
14
|
"dependencies": {
|
15
15
|
"@radix-ui/react-checkbox": "1.0.3",
|
16
|
-
"@spark-ui/icons": "^1.1.
|
16
|
+
"@spark-ui/icons": "^1.1.6",
|
17
17
|
"class-variance-authority": "0.4.0"
|
18
18
|
},
|
19
|
-
"gitHead": "
|
19
|
+
"gitHead": "fc82061d3d539d3f24a0a43128cbf762a4b76cf9"
|
20
20
|
}
|
package/vite.config.ts
CHANGED