@balikjs/mobile 0.1.5 → 0.1.6
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/README.md +1 -0
- package/dist/Alert/Alert.js +82 -0
- package/dist/Alert/Alert.module.css.js +25 -0
- package/dist/Avatar/Avatar.js +60 -0
- package/dist/Avatar/Avatar.module.css.js +27 -0
- package/dist/BackToTop/BackToTop.js +55 -0
- package/dist/BackToTop/BackToTop.module.css.js +11 -0
- package/dist/Badge/Badge.js +59 -0
- package/dist/Badge/Badge.module.css.js +45 -0
- package/dist/BottomNavigation/BottomNavigation.js +48 -0
- package/dist/BottomNavigation/BottomNavigation.module.css.js +13 -0
- package/dist/BottomSheet/BottomSheet.js +120 -0
- package/dist/BottomSheet/BottomSheet.module.css.js +25 -0
- package/dist/Button/Button.js +56 -0
- package/dist/Button/Button.module.css.js +31 -0
- package/dist/Card/Card.js +22 -0
- package/dist/Card/Card.module.css.js +7 -0
- package/dist/Checkbox/Checkbox.js +65 -0
- package/dist/Checkbox/Checkbox.module.css.js +27 -0
- package/dist/Clipboard/Clipboard.js +60 -0
- package/dist/Clipboard/Clipboard.module.css.js +21 -0
- package/dist/CloseButton/CloseButton.js +37 -0
- package/dist/CloseButton/CloseButton.module.css.js +21 -0
- package/dist/Confirm/Confirm.js +146 -0
- package/dist/Confirm/Confirm.module.css.js +7 -0
- package/dist/DatePicker/DatePicker.js +149 -0
- package/dist/DatePicker/DatePicker.module.css.js +29 -0
- package/dist/Dialog/Dialog.js +142 -0
- package/dist/Dialog/Dialog.module.css.js +29 -0
- package/dist/Divider/Divider.js +27 -0
- package/dist/Divider/Divider.module.css.js +9 -0
- package/dist/Drawer/Drawer.js +59 -0
- package/dist/Drawer/Drawer.module.css.js +19 -0
- package/dist/Empty/Empty.js +25 -0
- package/dist/Empty/Empty.module.css.js +9 -0
- package/dist/Fab/Fab.js +79 -0
- package/dist/Fab/Fab.module.css.js +19 -0
- package/dist/Field/Field.js +70 -0
- package/dist/Field/Field.module.css.js +21 -0
- package/dist/Fieldset/Fieldset.js +31 -0
- package/dist/Fieldset/Fieldset.module.css.js +9 -0
- package/dist/FileUpload/FileUpload.js +174 -0
- package/dist/FileUpload/FileUpload.module.css.js +35 -0
- package/dist/FilterGroup/FilterGroup.js +70 -0
- package/dist/FilterGroup/FilterGroup.module.css.js +23 -0
- package/dist/Input/Input.js +68 -0
- package/dist/Input/Input.module.css.js +35 -0
- package/dist/Link/Link.js +22 -0
- package/dist/Link/Link.module.css.js +7 -0
- package/dist/MoneyInput/MoneyInput.js +106 -0
- package/dist/MoneyInput/MoneyInput.module.css.js +9 -0
- package/dist/Pagination/Pagination.js +67 -0
- package/dist/Pagination/Pagination.module.css.js +11 -0
- package/dist/Picker/Picker.js +75 -0
- package/dist/Picker/Picker.module.css.js +15 -0
- package/dist/PickerView/PickerView.js +89 -0
- package/dist/PickerView/PickerView.module.css.js +21 -0
- package/dist/PickerView/wheel.js +146 -0
- package/dist/PinInput/PinInput.js +80 -0
- package/dist/PinInput/PinInput.module.css.js +23 -0
- package/dist/Popover/Popover.js +107 -0
- package/dist/Popover/Popover.module.css.js +17 -0
- package/dist/Progress/Progress.js +80 -0
- package/dist/Progress/Progress.module.css.js +27 -0
- package/dist/QrCode/QrCode.js +78 -0
- package/dist/QrCode/QrCode.module.css.js +15 -0
- package/dist/RadioGroup/Radio.js +42 -0
- package/dist/RadioGroup/Radio.module.css.js +23 -0
- package/dist/RadioGroup/RadioGroup.js +29 -0
- package/dist/RadioGroup/RadioGroup.module.css.js +9 -0
- package/dist/RatingGroup/RatingGroup.js +87 -0
- package/dist/RatingGroup/RatingGroup.module.css.js +13 -0
- package/dist/SafeArea/SafeArea.js +24 -0
- package/dist/SafeArea/SafeArea.module.css.js +15 -0
- package/dist/SearchInput/SearchInput.js +76 -0
- package/dist/SearchInput/SearchInput.module.css.js +11 -0
- package/dist/Select/Select.js +122 -0
- package/dist/Select/Select.module.css.js +29 -0
- package/dist/SelectPc/Select.js +130 -0
- package/dist/SelectPc/SelectPc.module.css.js +31 -0
- package/dist/Skeleton/Skeleton.js +42 -0
- package/dist/Skeleton/Skeleton.module.css.js +11 -0
- package/dist/Slider/Slider.js +63 -0
- package/dist/Slider/Slider.module.css.js +19 -0
- package/dist/Spinner/Spinner.js +31 -0
- package/dist/Spinner/Spinner.module.css.js +17 -0
- package/dist/Steps/Steps.js +173 -0
- package/dist/Steps/Steps.module.css.js +31 -0
- package/dist/StickyHeader/StickyHeader.js +30 -0
- package/dist/StickyHeader/StickyHeader.module.css.js +9 -0
- package/dist/Switch/Switch.js +49 -0
- package/dist/Switch/Switch.module.css.js +25 -0
- package/dist/Tabs/Tabs.js +55 -0
- package/dist/Tabs/Tabs.module.css.js +13 -0
- package/dist/Tag/Tag.js +58 -0
- package/dist/Tag/Tag.module.css.js +35 -0
- package/dist/Textarea/Textarea.js +32 -0
- package/dist/Textarea/Textarea.module.css.js +21 -0
- package/dist/Toast/Toast.js +137 -0
- package/dist/Toast/Toast.module.css.js +43 -0
- package/dist/Toggle/Toggle.js +33 -0
- package/dist/Toggle/Toggle.module.css.js +9 -0
- package/dist/ToggleGroup/ToggleGroup.js +42 -0
- package/dist/ToggleGroup/ToggleGroup.module.css.js +19 -0
- package/dist/Tooltip/Tooltip.js +71 -0
- package/dist/Tooltip/Tooltip.module.css.js +13 -0
- package/dist/index.js +164 -3683
- package/dist/styles.css +1 -1
- package/dist/utils/bem.js +6 -0
- package/dist/utils/cn.js +6 -0
- package/dist/utils/useScrollLock.js +16 -0
- package/package.json +3 -198
package/README.md
CHANGED
|
@@ -9,6 +9,7 @@ A mobile-first UI component library built on top of [Ark UI](https://ark-ui.com)
|
|
|
9
9
|
- **ES Modules** — `type: "module"` in `package.json`. `import` / `export` everywhere. No CommonJS.
|
|
10
10
|
- **Vite ecosystem** — Built with Vite, tested with Vitest.
|
|
11
11
|
- **CSS Modules + tokens** — Styles authored with CSS Modules. Design tokens as CSS custom properties.
|
|
12
|
+
- **Client-only, no SSR** — The library assumes a browser environment and does not support server-side rendering. See [docs/no-ssr.md](./docs/no-ssr.md).
|
|
12
13
|
|
|
13
14
|
## Install
|
|
14
15
|
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { spread as C, mergeProps as b, insert as i, createComponent as n, effect as u, className as a, template as g } from "solid-js/web";
|
|
2
|
+
import { splitProps as P, mergeProps as w, Show as f } from "solid-js";
|
|
3
|
+
import { Info as z, CircleAlert as _, TriangleAlert as $, CircleCheck as A } from "lucide-solid";
|
|
4
|
+
import { CloseButton as S } from "../CloseButton/CloseButton.js";
|
|
5
|
+
import { bem as k } from "../utils/bem.js";
|
|
6
|
+
import { cn as x } from "../utils/cn.js";
|
|
7
|
+
import r from "./Alert.module.css.js";
|
|
8
|
+
var y = /* @__PURE__ */ g("<p data-part=description>"), I = /* @__PURE__ */ g("<div><span data-part=icon></span><div data-part=body><p data-part=title>");
|
|
9
|
+
const D = {
|
|
10
|
+
info: r.intentInfo,
|
|
11
|
+
success: r.intentSuccess,
|
|
12
|
+
warning: r.intentWarning,
|
|
13
|
+
danger: r.intentDanger
|
|
14
|
+
}, T = {
|
|
15
|
+
success: () => n(A, {
|
|
16
|
+
size: 20,
|
|
17
|
+
"aria-hidden": "true"
|
|
18
|
+
}),
|
|
19
|
+
warning: () => n($, {
|
|
20
|
+
size: 20,
|
|
21
|
+
"aria-hidden": "true"
|
|
22
|
+
}),
|
|
23
|
+
danger: () => n(_, {
|
|
24
|
+
size: 20,
|
|
25
|
+
"aria-hidden": "true"
|
|
26
|
+
}),
|
|
27
|
+
info: () => n(z, {
|
|
28
|
+
size: 20,
|
|
29
|
+
"aria-hidden": "true"
|
|
30
|
+
})
|
|
31
|
+
}, B = {
|
|
32
|
+
intent: "info",
|
|
33
|
+
closeable: !1
|
|
34
|
+
};
|
|
35
|
+
function W(h) {
|
|
36
|
+
const [t, v] = P(w(B, h), ["title", "description", "intent", "closeable", "onClose", "class"]);
|
|
37
|
+
return (() => {
|
|
38
|
+
var s = I(), o = s.firstChild, l = o.nextSibling, c = l.firstChild;
|
|
39
|
+
return C(s, b(v, {
|
|
40
|
+
role: "alert",
|
|
41
|
+
"data-part": "root",
|
|
42
|
+
get class() {
|
|
43
|
+
return x(k("balik-alert", t.intent), r.base, D[t.intent], t.class);
|
|
44
|
+
}
|
|
45
|
+
}), !1, !0), i(o, () => T[t.intent]()), i(c, () => t.title), i(l, n(f, {
|
|
46
|
+
get when() {
|
|
47
|
+
return t.description;
|
|
48
|
+
},
|
|
49
|
+
get children() {
|
|
50
|
+
var e = y();
|
|
51
|
+
return i(e, () => t.description), u(() => a(e, r.description)), e;
|
|
52
|
+
}
|
|
53
|
+
}), null), i(s, n(f, {
|
|
54
|
+
get when() {
|
|
55
|
+
return t.closeable;
|
|
56
|
+
},
|
|
57
|
+
get children() {
|
|
58
|
+
return n(S, {
|
|
59
|
+
size: "xs",
|
|
60
|
+
get class() {
|
|
61
|
+
return r.close;
|
|
62
|
+
},
|
|
63
|
+
onClick: () => {
|
|
64
|
+
var e;
|
|
65
|
+
return (e = t.onClose) == null ? void 0 : e.call(t);
|
|
66
|
+
},
|
|
67
|
+
"data-part": "close"
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
}), null), u((e) => {
|
|
71
|
+
var d = r.icon, p = r.body, m = r.title;
|
|
72
|
+
return d !== e.e && a(o, e.e = d), p !== e.t && a(l, e.t = p), m !== e.a && a(c, e.a = m), e;
|
|
73
|
+
}, {
|
|
74
|
+
e: void 0,
|
|
75
|
+
t: void 0,
|
|
76
|
+
a: void 0
|
|
77
|
+
}), s;
|
|
78
|
+
})();
|
|
79
|
+
}
|
|
80
|
+
export {
|
|
81
|
+
W as Alert
|
|
82
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
const n = "_base_1kunc_1", t = "_icon_1kunc_26", c = "_body_1kunc_40", e = "_title_1kunc_45", _ = "_description_1kunc_53", s = "_close_1kunc_61", i = "_intentInfo_1kunc_83", o = "_intentSuccess_1kunc_88", u = "_intentWarning_1kunc_93", a = "_intentDanger_1kunc_98", k = {
|
|
2
|
+
base: n,
|
|
3
|
+
icon: t,
|
|
4
|
+
body: c,
|
|
5
|
+
title: e,
|
|
6
|
+
description: _,
|
|
7
|
+
close: s,
|
|
8
|
+
intentInfo: i,
|
|
9
|
+
intentSuccess: o,
|
|
10
|
+
intentWarning: u,
|
|
11
|
+
intentDanger: a
|
|
12
|
+
};
|
|
13
|
+
export {
|
|
14
|
+
n as base,
|
|
15
|
+
c as body,
|
|
16
|
+
s as close,
|
|
17
|
+
k as default,
|
|
18
|
+
_ as description,
|
|
19
|
+
t as icon,
|
|
20
|
+
a as intentDanger,
|
|
21
|
+
i as intentInfo,
|
|
22
|
+
o as intentSuccess,
|
|
23
|
+
u as intentWarning,
|
|
24
|
+
e as title
|
|
25
|
+
};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { spread as v, mergeProps as z, insert as o, createComponent as b, effect as c, className as g, setAttribute as p, template as l } from "solid-js/web";
|
|
2
|
+
import { splitProps as P, mergeProps as x, createMemo as h, Show as k } from "solid-js";
|
|
3
|
+
import { bem as A } from "../utils/bem.js";
|
|
4
|
+
import { cn as _ } from "../utils/cn.js";
|
|
5
|
+
import r from "./Avatar.module.css.js";
|
|
6
|
+
var $ = /* @__PURE__ */ l("<img data-part=image>"), S = /* @__PURE__ */ l("<span>"), w = /* @__PURE__ */ l("<span aria-hidden=true data-part=fallback>");
|
|
7
|
+
const L = {
|
|
8
|
+
xs: r.sizeXs,
|
|
9
|
+
sm: r.sizeSm,
|
|
10
|
+
md: r.sizeMd,
|
|
11
|
+
lg: r.sizeLg,
|
|
12
|
+
xl: r.sizeXl,
|
|
13
|
+
"2xl": r.size2xl
|
|
14
|
+
}, M = {
|
|
15
|
+
male: r.male,
|
|
16
|
+
female: r.female
|
|
17
|
+
}, X = {
|
|
18
|
+
size: "md",
|
|
19
|
+
gender: "male"
|
|
20
|
+
};
|
|
21
|
+
function E(d) {
|
|
22
|
+
const [e, f] = P(x(X, d), ["src", "alt", "name", "size", "gender", "class"]), u = h(() => e.name ? e.name.split(/\s+/).filter(Boolean).slice(0, 2).map((s) => s[0]).join("") : "?");
|
|
23
|
+
return (() => {
|
|
24
|
+
var s = S();
|
|
25
|
+
return v(s, z(f, {
|
|
26
|
+
role: "img",
|
|
27
|
+
get "aria-label"() {
|
|
28
|
+
return e.alt || e.name || "Avatar";
|
|
29
|
+
},
|
|
30
|
+
"data-part": "root",
|
|
31
|
+
get class() {
|
|
32
|
+
return _(A("balik-avatar", e.size), r.base, L[e.size], M[e.gender], e.class);
|
|
33
|
+
}
|
|
34
|
+
}), !1, !0), o(s, b(k, {
|
|
35
|
+
get when() {
|
|
36
|
+
return e.src;
|
|
37
|
+
},
|
|
38
|
+
get fallback() {
|
|
39
|
+
return (() => {
|
|
40
|
+
var a = w();
|
|
41
|
+
return o(a, u), c(() => g(a, r.fallback)), a;
|
|
42
|
+
})();
|
|
43
|
+
},
|
|
44
|
+
get children() {
|
|
45
|
+
var a = $();
|
|
46
|
+
return c((t) => {
|
|
47
|
+
var i = r.image, m = e.src, n = e.alt || "";
|
|
48
|
+
return i !== t.e && g(a, t.e = i), m !== t.t && p(a, "src", t.t = m), n !== t.a && p(a, "alt", t.a = n), t;
|
|
49
|
+
}, {
|
|
50
|
+
e: void 0,
|
|
51
|
+
t: void 0,
|
|
52
|
+
a: void 0
|
|
53
|
+
}), a;
|
|
54
|
+
}
|
|
55
|
+
})), s;
|
|
56
|
+
})();
|
|
57
|
+
}
|
|
58
|
+
export {
|
|
59
|
+
E as Avatar
|
|
60
|
+
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
const e = "_base_1iyre_1", s = "_image_1iyre_17", _ = "_fallback_1iyre_26", i = "_sizeXs_1iyre_30", a = "_sizeSm_1iyre_36", l = "_sizeMd_1iyre_42", z = "_sizeLg_1iyre_48", c = "_sizeXl_1iyre_54", t = "_size2xl_1iyre_60", o = "_male_1iyre_66", m = "_female_1iyre_71", n = {
|
|
2
|
+
base: e,
|
|
3
|
+
image: s,
|
|
4
|
+
fallback: _,
|
|
5
|
+
sizeXs: i,
|
|
6
|
+
sizeSm: a,
|
|
7
|
+
sizeMd: l,
|
|
8
|
+
sizeLg: z,
|
|
9
|
+
sizeXl: c,
|
|
10
|
+
size2xl: t,
|
|
11
|
+
male: o,
|
|
12
|
+
female: m
|
|
13
|
+
};
|
|
14
|
+
export {
|
|
15
|
+
e as base,
|
|
16
|
+
n as default,
|
|
17
|
+
_ as fallback,
|
|
18
|
+
m as female,
|
|
19
|
+
s as image,
|
|
20
|
+
o as male,
|
|
21
|
+
t as size2xl,
|
|
22
|
+
z as sizeLg,
|
|
23
|
+
l as sizeMd,
|
|
24
|
+
a as sizeSm,
|
|
25
|
+
c as sizeXl,
|
|
26
|
+
i as sizeXs
|
|
27
|
+
};
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { insert as m, effect as a, setAttribute as c, className as b, template as p, delegateEvents as h } from "solid-js/web";
|
|
2
|
+
import { splitProps as g, mergeProps as k, createSignal as w, onMount as T, onCleanup as E } from "solid-js";
|
|
3
|
+
import { bem as y } from "../utils/bem.js";
|
|
4
|
+
import { cn as L } from "../utils/cn.js";
|
|
5
|
+
import n from "./BackToTop.module.css.js";
|
|
6
|
+
var B = /* @__PURE__ */ p("<button type=button data-part=root>"), P = /* @__PURE__ */ p('<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><title>Back to top</title><path d="m18 15-6-6-6 6">');
|
|
7
|
+
const S = {
|
|
8
|
+
threshold: 200,
|
|
9
|
+
target: void 0
|
|
10
|
+
};
|
|
11
|
+
function j(u) {
|
|
12
|
+
const [e] = g(k(S, u), ["class", "threshold", "target", "icon", "aria-label"]), [v, d] = w(!1);
|
|
13
|
+
function l() {
|
|
14
|
+
const t = typeof e.target == "function" ? e.target() : null, o = t ? t.scrollTop : window.scrollY;
|
|
15
|
+
d(o > e.threshold);
|
|
16
|
+
}
|
|
17
|
+
let r = null;
|
|
18
|
+
T(() => {
|
|
19
|
+
const t = typeof e.target == "function" ? e.target() : null;
|
|
20
|
+
t ? (t.addEventListener("scroll", l, {
|
|
21
|
+
passive: !0
|
|
22
|
+
}), r = () => t.removeEventListener("scroll", l)) : (window.addEventListener("scroll", l, {
|
|
23
|
+
passive: !0
|
|
24
|
+
}), r = () => window.removeEventListener("scroll", l));
|
|
25
|
+
}), E(() => {
|
|
26
|
+
r && r();
|
|
27
|
+
});
|
|
28
|
+
function f() {
|
|
29
|
+
const t = typeof e.target == "function" ? e.target() : null;
|
|
30
|
+
t ? t.scrollTo({
|
|
31
|
+
top: 0,
|
|
32
|
+
behavior: "smooth"
|
|
33
|
+
}) : window.scrollTo({
|
|
34
|
+
top: 0,
|
|
35
|
+
behavior: "smooth"
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
return (() => {
|
|
39
|
+
var t = B();
|
|
40
|
+
return t.$$click = f, m(t, () => e.icon || (() => {
|
|
41
|
+
var o = P();
|
|
42
|
+
return a(() => c(o, "class", n.icon)), o;
|
|
43
|
+
})()), a((o) => {
|
|
44
|
+
var s = L(y(), n.base, v() && n.visible, e.class), i = e["aria-label"] || "Back to top";
|
|
45
|
+
return s !== o.e && b(t, o.e = s), i !== o.t && c(t, "aria-label", o.t = i), o;
|
|
46
|
+
}, {
|
|
47
|
+
e: void 0,
|
|
48
|
+
t: void 0
|
|
49
|
+
}), t;
|
|
50
|
+
})();
|
|
51
|
+
}
|
|
52
|
+
h(["click"]);
|
|
53
|
+
export {
|
|
54
|
+
j as BackToTop
|
|
55
|
+
};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { spread as d, mergeProps as u, insert as o, createComponent as c, effect as m, className as p, template as l } from "solid-js/web";
|
|
2
|
+
import { splitProps as f, mergeProps as g, Show as z } from "solid-js";
|
|
3
|
+
import { bem as h } from "../utils/bem.js";
|
|
4
|
+
import { cn as I } from "../utils/cn.js";
|
|
5
|
+
import e from "./Badge.module.css.js";
|
|
6
|
+
var P = /* @__PURE__ */ l("<span aria-hidden=true data-part=dot>"), x = /* @__PURE__ */ l("<span>");
|
|
7
|
+
const D = {
|
|
8
|
+
xs: e.sizeXs,
|
|
9
|
+
sm: e.sizeSm,
|
|
10
|
+
md: e.sizeMd,
|
|
11
|
+
lg: e.sizeLg,
|
|
12
|
+
xl: e.sizeXl,
|
|
13
|
+
"2xl": e.size2xl
|
|
14
|
+
}, S = {
|
|
15
|
+
default: e.solidDefault,
|
|
16
|
+
danger: e.solidDanger,
|
|
17
|
+
success: e.solidSuccess,
|
|
18
|
+
warning: e.solidWarning,
|
|
19
|
+
info: e.solidInfo,
|
|
20
|
+
intent: e.solidIntent
|
|
21
|
+
}, _ = {
|
|
22
|
+
default: e.outlineDefault,
|
|
23
|
+
danger: e.outlineDanger,
|
|
24
|
+
success: e.outlineSuccess,
|
|
25
|
+
warning: e.outlineWarning,
|
|
26
|
+
info: e.outlineInfo,
|
|
27
|
+
intent: e.outlineIntent
|
|
28
|
+
}, $ = {
|
|
29
|
+
solid: S,
|
|
30
|
+
outline: _
|
|
31
|
+
}, b = {
|
|
32
|
+
size: "md",
|
|
33
|
+
intent: "default",
|
|
34
|
+
solid: !0,
|
|
35
|
+
dot: !1
|
|
36
|
+
};
|
|
37
|
+
function X(r) {
|
|
38
|
+
const [t, a] = f(g(b, r), ["size", "intent", "solid", "dot", "class", "children"]), s = t.solid ? "solid" : "outline";
|
|
39
|
+
return (() => {
|
|
40
|
+
var n = x();
|
|
41
|
+
return d(n, u(a, {
|
|
42
|
+
"data-part": "root",
|
|
43
|
+
get class() {
|
|
44
|
+
return I(h("balik-badge", s, t.intent, t.size), e.base, D[t.size], $[s][t.intent], t.class);
|
|
45
|
+
}
|
|
46
|
+
}), !1, !0), o(n, c(z, {
|
|
47
|
+
get when() {
|
|
48
|
+
return t.dot;
|
|
49
|
+
},
|
|
50
|
+
get children() {
|
|
51
|
+
var i = P();
|
|
52
|
+
return m(() => p(i, e.dot)), i;
|
|
53
|
+
}
|
|
54
|
+
}), null), o(n, () => t.children, null), n;
|
|
55
|
+
})();
|
|
56
|
+
}
|
|
57
|
+
export {
|
|
58
|
+
X as Badge
|
|
59
|
+
};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
const s = "_base_rjkpf_1", n = "_sizeXs_rjkpf_22", o = "_sizeSm_rjkpf_29", e = "_sizeMd_rjkpf_36", t = "_sizeLg_rjkpf_43", i = "_sizeXl_rjkpf_50", _ = "_size2xl_rjkpf_57", l = "_solidDefault_rjkpf_66", c = "_solidDanger_rjkpf_72", f = "_solidSuccess_rjkpf_78", r = "_solidWarning_rjkpf_84", u = "_solidInfo_rjkpf_90", d = "_solidIntent_rjkpf_96", a = "_outlineDefault_rjkpf_104", p = "_outlineDanger_rjkpf_109", j = "_outlineSuccess_rjkpf_114", k = "_outlineWarning_rjkpf_119", z = "_outlineInfo_rjkpf_124", g = "_outlineIntent_rjkpf_129", D = "_dot_rjkpf_136", I = {
|
|
2
|
+
base: s,
|
|
3
|
+
sizeXs: n,
|
|
4
|
+
sizeSm: o,
|
|
5
|
+
sizeMd: e,
|
|
6
|
+
sizeLg: t,
|
|
7
|
+
sizeXl: i,
|
|
8
|
+
size2xl: _,
|
|
9
|
+
solidDefault: l,
|
|
10
|
+
solidDanger: c,
|
|
11
|
+
solidSuccess: f,
|
|
12
|
+
solidWarning: r,
|
|
13
|
+
solidInfo: u,
|
|
14
|
+
solidIntent: d,
|
|
15
|
+
outlineDefault: a,
|
|
16
|
+
outlineDanger: p,
|
|
17
|
+
outlineSuccess: j,
|
|
18
|
+
outlineWarning: k,
|
|
19
|
+
outlineInfo: z,
|
|
20
|
+
outlineIntent: g,
|
|
21
|
+
dot: D
|
|
22
|
+
};
|
|
23
|
+
export {
|
|
24
|
+
s as base,
|
|
25
|
+
I as default,
|
|
26
|
+
D as dot,
|
|
27
|
+
p as outlineDanger,
|
|
28
|
+
a as outlineDefault,
|
|
29
|
+
z as outlineInfo,
|
|
30
|
+
g as outlineIntent,
|
|
31
|
+
j as outlineSuccess,
|
|
32
|
+
k as outlineWarning,
|
|
33
|
+
_ as size2xl,
|
|
34
|
+
t as sizeLg,
|
|
35
|
+
e as sizeMd,
|
|
36
|
+
o as sizeSm,
|
|
37
|
+
i as sizeXl,
|
|
38
|
+
n as sizeXs,
|
|
39
|
+
c as solidDanger,
|
|
40
|
+
l as solidDefault,
|
|
41
|
+
u as solidInfo,
|
|
42
|
+
d as solidIntent,
|
|
43
|
+
f as solidSuccess,
|
|
44
|
+
r as solidWarning
|
|
45
|
+
};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { insert as a, effect as c, className as i, createComponent as p, Dynamic as f, mergeProps as u, template as m } from "solid-js/web";
|
|
2
|
+
import { splitProps as s, mergeProps as v } from "solid-js";
|
|
3
|
+
import { bem as g } from "../utils/bem.js";
|
|
4
|
+
import { cn as h } from "../utils/cn.js";
|
|
5
|
+
import o from "./BottomNavigation.module.css.js";
|
|
6
|
+
var l = /* @__PURE__ */ m("<span>"), d = /* @__PURE__ */ m("<nav data-part=root>");
|
|
7
|
+
function y(n) {
|
|
8
|
+
const [t] = s(n, ["icon", "label", "active", "href", "onClick"]), e = t.href ? "a" : "button";
|
|
9
|
+
return p(f, u({
|
|
10
|
+
component: e
|
|
11
|
+
}, () => t.href ? {
|
|
12
|
+
href: t.href
|
|
13
|
+
} : {
|
|
14
|
+
type: "button"
|
|
15
|
+
}, {
|
|
16
|
+
get class() {
|
|
17
|
+
return o.item;
|
|
18
|
+
},
|
|
19
|
+
get "data-active"() {
|
|
20
|
+
return t.active ? "" : void 0;
|
|
21
|
+
},
|
|
22
|
+
get onClick() {
|
|
23
|
+
return t.onClick;
|
|
24
|
+
},
|
|
25
|
+
"data-part": "item",
|
|
26
|
+
get children() {
|
|
27
|
+
return [(() => {
|
|
28
|
+
var r = l();
|
|
29
|
+
return a(r, () => t.icon), c(() => i(r, o.icon)), r;
|
|
30
|
+
})(), (() => {
|
|
31
|
+
var r = l();
|
|
32
|
+
return a(r, () => t.label), c(() => i(r, o.label)), r;
|
|
33
|
+
})()];
|
|
34
|
+
}
|
|
35
|
+
}));
|
|
36
|
+
}
|
|
37
|
+
const b = {};
|
|
38
|
+
function N(n) {
|
|
39
|
+
const [t] = s(v(b, n), ["class", "children"]);
|
|
40
|
+
return (() => {
|
|
41
|
+
var e = d();
|
|
42
|
+
return a(e, () => t.children), c(() => i(e, h(g(), o.root, t.class))), e;
|
|
43
|
+
})();
|
|
44
|
+
}
|
|
45
|
+
export {
|
|
46
|
+
N as BottomNavigation,
|
|
47
|
+
y as BottomNavigationItem
|
|
48
|
+
};
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import { createComponent as R, Portal as G, effect as f, className as s, setAttribute as O, insert as c, memo as h, template as u, use as I, delegateEvents as w } from "solid-js/web";
|
|
2
|
+
import { splitProps as N, mergeProps as U, createSignal as x, createEffect as F, on as H } from "solid-js";
|
|
3
|
+
import { bem as M } from "../utils/bem.js";
|
|
4
|
+
import { cn as C } from "../utils/cn.js";
|
|
5
|
+
import { useScrollLock as V } from "../utils/useScrollLock.js";
|
|
6
|
+
import l from "./BottomSheet.module.css.js";
|
|
7
|
+
var j = /* @__PURE__ */ u("<div data-part=backdrop>"), q = /* @__PURE__ */ u("<div role=dialog aria-modal=true data-part=sheet><div data-part=body>"), z = /* @__PURE__ */ u("<div data-part=grabber-area><div data-part=grabber>"), J = /* @__PURE__ */ u("<div data-part=header><h2 data-part=title>"), B = /* @__PURE__ */ u("<div data-part=footer>");
|
|
8
|
+
const K = {
|
|
9
|
+
dismissible: !0,
|
|
10
|
+
backdropBlur: !0,
|
|
11
|
+
draggable: !0
|
|
12
|
+
}, Q = 0.3, W = 0.5, X = 3;
|
|
13
|
+
function ne(Y) {
|
|
14
|
+
const [t] = N(U({
|
|
15
|
+
footerPlacement: "bottom",
|
|
16
|
+
...K
|
|
17
|
+
}, Y), ["open", "onOpen", "onClose", "onOpenChange", "title", "dismissible", "draggable", "backdropBlur", "footer", "footerClass", "footerPlacement", "class", "children"]);
|
|
18
|
+
let m;
|
|
19
|
+
const [b, S] = x(!1);
|
|
20
|
+
let y = 0, g = 0, $ = 0, _ = 0, P = 0;
|
|
21
|
+
const A = (e) => {
|
|
22
|
+
e.currentTarget.setPointerCapture(e.pointerId), y = $ = e.clientY, _ = e.timeStamp, P = 0, g = 0, S(!0);
|
|
23
|
+
}, D = (e) => {
|
|
24
|
+
if (!b()) return;
|
|
25
|
+
const r = e.clientY - y, i = e.timeStamp - _;
|
|
26
|
+
i > 0 && (P = (e.clientY - $) / i), $ = e.clientY, _ = e.timeStamp, g = r;
|
|
27
|
+
const o = r >= 0 ? r : r / X;
|
|
28
|
+
m.style.transform = `translateY(${o}px)`;
|
|
29
|
+
}, E = (e) => {
|
|
30
|
+
S(!1), m.style.transform = "", e && k({
|
|
31
|
+
open: !1
|
|
32
|
+
});
|
|
33
|
+
}, T = () => {
|
|
34
|
+
if (!b()) return;
|
|
35
|
+
const e = m.offsetHeight || 1, r = g > e * Q, i = g > 0 && P > W;
|
|
36
|
+
E(t.dismissible && (r || i));
|
|
37
|
+
}, L = () => {
|
|
38
|
+
b() && E(!1);
|
|
39
|
+
}, k = (e) => {
|
|
40
|
+
var r;
|
|
41
|
+
(r = t.onOpenChange) == null || r.call(t, e);
|
|
42
|
+
};
|
|
43
|
+
return V(() => t.open), F(H(() => t.open, (e) => {
|
|
44
|
+
var r, i;
|
|
45
|
+
e ? (r = t.onOpen) == null || r.call(t) : (i = t.onClose) == null || i.call(t);
|
|
46
|
+
}, {
|
|
47
|
+
defer: !0
|
|
48
|
+
})), R(G, {
|
|
49
|
+
get mount() {
|
|
50
|
+
return document.body;
|
|
51
|
+
},
|
|
52
|
+
get children() {
|
|
53
|
+
return [(() => {
|
|
54
|
+
var e = j();
|
|
55
|
+
return e.$$click = () => {
|
|
56
|
+
t.dismissible && k({
|
|
57
|
+
open: !1
|
|
58
|
+
});
|
|
59
|
+
}, f((r) => {
|
|
60
|
+
var i = C(l.backdrop, t.backdropBlur && l.blurred), o = t.open ? "" : void 0;
|
|
61
|
+
return i !== r.e && s(e, r.e = i), o !== r.t && O(e, "data-open", r.t = o), r;
|
|
62
|
+
}, {
|
|
63
|
+
e: void 0,
|
|
64
|
+
t: void 0
|
|
65
|
+
}), e;
|
|
66
|
+
})(), (() => {
|
|
67
|
+
var e = q(), r = e.firstChild, i = m;
|
|
68
|
+
return typeof i == "function" ? I(i, e) : m = e, c(e, (() => {
|
|
69
|
+
var o = h(() => !!t.draggable);
|
|
70
|
+
return () => o() && (() => {
|
|
71
|
+
var a = z(), v = a.firstChild;
|
|
72
|
+
return a.addEventListener("pointercancel", L), a.$$pointerup = T, a.$$pointermove = D, a.$$pointerdown = A, f((n) => {
|
|
73
|
+
var d = l.grabberArea, p = l.grabber;
|
|
74
|
+
return d !== n.e && s(a, n.e = d), p !== n.t && s(v, n.t = p), n;
|
|
75
|
+
}, {
|
|
76
|
+
e: void 0,
|
|
77
|
+
t: void 0
|
|
78
|
+
}), a;
|
|
79
|
+
})();
|
|
80
|
+
})(), r), c(e, (() => {
|
|
81
|
+
var o = h(() => !!t.title);
|
|
82
|
+
return () => o() && (() => {
|
|
83
|
+
var a = J(), v = a.firstChild;
|
|
84
|
+
return c(v, () => t.title), f((n) => {
|
|
85
|
+
var d = l.header, p = l.title;
|
|
86
|
+
return d !== n.e && s(a, n.e = d), p !== n.t && s(v, n.t = p), n;
|
|
87
|
+
}, {
|
|
88
|
+
e: void 0,
|
|
89
|
+
t: void 0
|
|
90
|
+
}), a;
|
|
91
|
+
})();
|
|
92
|
+
})(), r), c(e, (() => {
|
|
93
|
+
var o = h(() => !!(t.footerPlacement === "top" && t.footer));
|
|
94
|
+
return () => o() && (() => {
|
|
95
|
+
var a = B();
|
|
96
|
+
return c(a, () => t.footer), f(() => s(a, C(l.footer, t.footerClass))), a;
|
|
97
|
+
})();
|
|
98
|
+
})(), r), c(r, () => t.children), c(e, (() => {
|
|
99
|
+
var o = h(() => !!(t.footerPlacement !== "top" && t.footer));
|
|
100
|
+
return () => o() && (() => {
|
|
101
|
+
var a = B();
|
|
102
|
+
return c(a, () => t.footer), f(() => s(a, C(l.footer, t.footerClass))), a;
|
|
103
|
+
})();
|
|
104
|
+
})(), null), f((o) => {
|
|
105
|
+
var a = C(M(), l.sheet, b() && l.dragging, t.class), v = t.open ? "" : void 0, n = t.title || "BottomSheet", d = l.body;
|
|
106
|
+
return a !== o.e && s(e, o.e = a), v !== o.t && O(e, "data-open", o.t = v), n !== o.a && O(e, "aria-label", o.a = n), d !== o.o && s(r, o.o = d), o;
|
|
107
|
+
}, {
|
|
108
|
+
e: void 0,
|
|
109
|
+
t: void 0,
|
|
110
|
+
a: void 0,
|
|
111
|
+
o: void 0
|
|
112
|
+
}), e;
|
|
113
|
+
})()];
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
}
|
|
117
|
+
w(["click", "pointerdown", "pointermove", "pointerup"]);
|
|
118
|
+
export {
|
|
119
|
+
ne as BottomSheet
|
|
120
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
const t = "_backdrop_9tgy4_1", r = "_blurred_9tgy4_11", e = "_sheet_9tgy4_22", _ = "_dragging_9tgy4_47", g = "_grabberArea_9tgy4_65", o = "_grabber_9tgy4_65", b = "_header_9tgy4_89", a = "_title_9tgy4_98", s = "_body_9tgy4_110", d = "_footer_9tgy4_125", c = {
|
|
2
|
+
backdrop: t,
|
|
3
|
+
blurred: r,
|
|
4
|
+
sheet: e,
|
|
5
|
+
dragging: _,
|
|
6
|
+
grabberArea: g,
|
|
7
|
+
grabber: o,
|
|
8
|
+
header: b,
|
|
9
|
+
title: a,
|
|
10
|
+
body: s,
|
|
11
|
+
footer: d
|
|
12
|
+
};
|
|
13
|
+
export {
|
|
14
|
+
t as backdrop,
|
|
15
|
+
r as blurred,
|
|
16
|
+
s as body,
|
|
17
|
+
c as default,
|
|
18
|
+
_ as dragging,
|
|
19
|
+
d as footer,
|
|
20
|
+
o as grabber,
|
|
21
|
+
g as grabberArea,
|
|
22
|
+
b as header,
|
|
23
|
+
e as sheet,
|
|
24
|
+
a as title
|
|
25
|
+
};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { createComponent as o, mergeProps as m, memo as r, insert as g, effect as c, className as u, template as p } from "solid-js/web";
|
|
2
|
+
import { splitProps as f, mergeProps as b } from "solid-js";
|
|
3
|
+
import { ark as l } from "@ark-ui/solid/factory";
|
|
4
|
+
import { Loader2 as z } from "lucide-solid";
|
|
5
|
+
import { bem as P } from "../utils/bem.js";
|
|
6
|
+
import { cn as h } from "../utils/cn.js";
|
|
7
|
+
import e from "./Button.module.css.js";
|
|
8
|
+
var y = /* @__PURE__ */ p("<span>");
|
|
9
|
+
const v = {
|
|
10
|
+
outline: e.outline,
|
|
11
|
+
solid: e.solid
|
|
12
|
+
}, x = {
|
|
13
|
+
default: e.intentDefault,
|
|
14
|
+
danger: e.intentDanger
|
|
15
|
+
}, D = {
|
|
16
|
+
xs: e.sizeXs,
|
|
17
|
+
sm: e.sizeSm,
|
|
18
|
+
md: e.sizeMd,
|
|
19
|
+
lg: e.sizeLg,
|
|
20
|
+
xl: e.sizeXl
|
|
21
|
+
}, L = {
|
|
22
|
+
solid: !1,
|
|
23
|
+
danger: !1,
|
|
24
|
+
size: "md",
|
|
25
|
+
disabled: !1,
|
|
26
|
+
loading: !1
|
|
27
|
+
};
|
|
28
|
+
function O(a) {
|
|
29
|
+
const [s, d] = f(b(L, a), ["solid", "danger", "size", "class", "loading", "disabled", "children"]), i = s.solid ? "solid" : "outline", n = s.danger ? "danger" : "default";
|
|
30
|
+
return o(l.button, m(d, {
|
|
31
|
+
get disabled() {
|
|
32
|
+
return s.disabled;
|
|
33
|
+
},
|
|
34
|
+
get "aria-disabled"() {
|
|
35
|
+
return s.loading || s.disabled;
|
|
36
|
+
},
|
|
37
|
+
get class() {
|
|
38
|
+
return h(P("balik-button", i, n, s.size), e.base, v[i], x[n], D[s.size], s.loading && e.loadingButton, s.class);
|
|
39
|
+
},
|
|
40
|
+
get children() {
|
|
41
|
+
return [r(() => s.children), r(() => r(() => !!s.loading)() && (() => {
|
|
42
|
+
var t = y();
|
|
43
|
+
return g(t, o(z, {
|
|
44
|
+
get class() {
|
|
45
|
+
return e.spinner;
|
|
46
|
+
},
|
|
47
|
+
"aria-hidden": "true"
|
|
48
|
+
})), c(() => u(t, e.loadingOverlay)), t;
|
|
49
|
+
})())];
|
|
50
|
+
}
|
|
51
|
+
}));
|
|
52
|
+
}
|
|
53
|
+
O.Original = l;
|
|
54
|
+
export {
|
|
55
|
+
O as Button
|
|
56
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
const n = "_base_1l4rf_1", s = "_loadingOverlay_1l4rf_24", e = "_loadingButton_1l4rf_35", t = "_outline_1l4rf_39", _ = "_solid_1l4rf_51", i = "_intentDefault_1l4rf_63", l = "_intentDanger_1l4rf_72", o = "_sizeXs_1l4rf_81", r = "_sizeSm_1l4rf_89", a = "_sizeMd_1l4rf_97", f = "_sizeLg_1l4rf_105", z = "_sizeXl_1l4rf_113", c = "_spinner_1l4rf_121", d = {
|
|
2
|
+
base: n,
|
|
3
|
+
loadingOverlay: s,
|
|
4
|
+
loadingButton: e,
|
|
5
|
+
outline: t,
|
|
6
|
+
solid: _,
|
|
7
|
+
intentDefault: i,
|
|
8
|
+
intentDanger: l,
|
|
9
|
+
sizeXs: o,
|
|
10
|
+
sizeSm: r,
|
|
11
|
+
sizeMd: a,
|
|
12
|
+
sizeLg: f,
|
|
13
|
+
sizeXl: z,
|
|
14
|
+
spinner: c
|
|
15
|
+
};
|
|
16
|
+
export {
|
|
17
|
+
n as base,
|
|
18
|
+
d as default,
|
|
19
|
+
l as intentDanger,
|
|
20
|
+
i as intentDefault,
|
|
21
|
+
e as loadingButton,
|
|
22
|
+
s as loadingOverlay,
|
|
23
|
+
t as outline,
|
|
24
|
+
f as sizeLg,
|
|
25
|
+
a as sizeMd,
|
|
26
|
+
r as sizeSm,
|
|
27
|
+
z as sizeXl,
|
|
28
|
+
o as sizeXs,
|
|
29
|
+
_ as solid,
|
|
30
|
+
c as spinner
|
|
31
|
+
};
|