@pathscale/ui 0.0.1 → 0.0.2
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/dist/Accordion-nwuRbRRw.d.ts +27 -0
- package/dist/Checkbox-BjaweaOH.d.ts +40 -0
- package/dist/Pagination-BlrjElGg.d.ts +43 -0
- package/dist/Progress-a616LgE0.d.ts +5 -0
- package/dist/Select-CP-TUHJv.d.ts +44 -0
- package/dist/Switch-3IXS_68H.d.ts +72 -0
- package/dist/Tabs-BNR3p92D.d.ts +42 -0
- package/dist/Tag-BPrhn-Ne.d.ts +42 -0
- package/dist/Tooltip-BfPongoz.d.ts +53 -0
- package/dist/Upload-BrFuZ4JA.d.ts +39 -0
- package/dist/chunk/3IHANYRN.js +98 -0
- package/dist/chunk/4TWLQ3IA.js +103 -0
- package/dist/chunk/6SBH3KSM.jsx +96 -0
- package/dist/chunk/CJZGTNJZ.js +115 -0
- package/dist/chunk/DBQ7IOPU.js +189 -0
- package/dist/chunk/DNTGSCVF.jsx +100 -0
- package/dist/chunk/ELRAUORW.jsx +179 -0
- package/dist/chunk/FPUQ25SO.js +137 -0
- package/dist/chunk/GLEAR2TS.jsx +160 -0
- package/dist/chunk/KV6LTJHI.jsx +175 -0
- package/dist/chunk/LI3HCFL7.jsx +132 -0
- package/dist/chunk/MMTAND25.jsx +126 -0
- package/dist/chunk/MXG3MBEN.jsx +148 -0
- package/dist/chunk/NZKPDBTE.js +118 -0
- package/dist/chunk/P2L6LFLS.js +144 -0
- package/dist/chunk/QLESLIWS.jsx +110 -0
- package/dist/chunk/QNOJ6PCD.js +278 -0
- package/dist/chunk/QONDPQ2I.jsx +105 -0
- package/dist/chunk/S3ZDSQSV.js +98 -0
- package/dist/chunk/V6Y5E7BL.js +133 -0
- package/dist/chunk/WCBMW2TP.jsx +203 -0
- package/dist/chunk/WOT36Q7O.js +166 -0
- package/dist/components/Progress/index.d.ts +2 -3
- package/dist/components/Progress/index.js +1 -278
- package/dist/components/Progress/index.jsx +7 -194
- package/dist/components/accordion/index.d.ts +5 -24
- package/dist/components/accordion/index.js +1 -118
- package/dist/components/accordion/index.jsx +3 -100
- package/dist/components/breadcrumb/index.d.ts +2 -2
- package/dist/components/breadcrumb/index.js +1 -133
- package/dist/components/breadcrumb/index.jsx +4 -120
- package/dist/components/checkbox/index.d.ts +5 -37
- package/dist/components/checkbox/index.js +1 -137
- package/dist/components/checkbox/index.jsx +3 -143
- package/dist/components/pagination/index.d.ts +5 -40
- package/dist/components/pagination/index.js +1 -189
- package/dist/components/pagination/index.jsx +3 -174
- package/dist/components/select/index.d.ts +5 -41
- package/dist/components/select/index.js +1 -98
- package/dist/components/select/index.jsx +3 -91
- package/dist/components/switch/index.d.ts +5 -69
- package/dist/components/switch/index.js +1 -144
- package/dist/components/switch/index.jsx +3 -155
- package/dist/components/tabs/index.d.ts +5 -39
- package/dist/components/tabs/index.js +1 -166
- package/dist/components/tabs/index.jsx +3 -170
- package/dist/components/tag/index.d.ts +5 -39
- package/dist/components/tag/index.js +1 -115
- package/dist/components/tag/index.jsx +3 -127
- package/dist/components/tooltip/index.d.ts +5 -50
- package/dist/components/tooltip/index.js +1 -103
- package/dist/components/tooltip/index.jsx +3 -95
- package/dist/components/upload/index.d.ts +5 -36
- package/dist/components/upload/index.js +1 -98
- package/dist/components/upload/index.jsx +3 -105
- package/dist/index.d.ts +11 -0
- package/dist/index.js +12 -1
- package/dist/index.jsx +47 -1
- package/package.json +1 -1
|
@@ -1,178 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
} from "../../chunk/
|
|
4
|
-
|
|
5
|
-
// src/components/pagination/Pagination.tsx
|
|
6
|
-
import {
|
|
7
|
-
splitProps,
|
|
8
|
-
createMemo,
|
|
9
|
-
Show,
|
|
10
|
-
For
|
|
11
|
-
} from "solid-js";
|
|
12
|
-
|
|
13
|
-
// src/components/pagination/Pagination.styles.ts
|
|
14
|
-
var paginationItemVariants = cva(
|
|
15
|
-
[
|
|
16
|
-
"inline-flex items-center justify-center font-medium transition-colors",
|
|
17
|
-
"select-none border border-transparent",
|
|
18
|
-
// border shown only when needed
|
|
19
|
-
"disabled:opacity-50 disabled:pointer-events-none"
|
|
20
|
-
],
|
|
21
|
-
{
|
|
22
|
-
variants: {
|
|
23
|
-
active: {
|
|
24
|
-
true: "bg-blue-500 text-white hover:bg-blue-600",
|
|
25
|
-
false: "bg-transparent text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700"
|
|
26
|
-
},
|
|
27
|
-
rounded: {
|
|
28
|
-
true: "rounded-full",
|
|
29
|
-
false: "rounded"
|
|
30
|
-
},
|
|
31
|
-
simple: {
|
|
32
|
-
true: "border-none bg-transparent hover:bg-transparent text-gray-700 dark:text-gray-300",
|
|
33
|
-
false: ""
|
|
34
|
-
},
|
|
35
|
-
size: {
|
|
36
|
-
sm: "text-xs px-2 py-1",
|
|
37
|
-
md: "text-sm px-3 py-1.5",
|
|
38
|
-
lg: "text-base px-4 py-2"
|
|
39
|
-
},
|
|
40
|
-
disabled: {
|
|
41
|
-
true: "opacity-50 pointer-events-none",
|
|
42
|
-
false: ""
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
defaultVariants: {
|
|
46
|
-
active: false,
|
|
47
|
-
rounded: false,
|
|
48
|
-
simple: false,
|
|
49
|
-
size: "md",
|
|
50
|
-
disabled: false
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
);
|
|
54
|
-
var paginationInfoVariants = cva(
|
|
55
|
-
"inline-block font-medium transition-colors",
|
|
56
|
-
{
|
|
57
|
-
variants: {
|
|
58
|
-
simple: {
|
|
59
|
-
true: "text-sm text-gray-600 dark:text-gray-300 px-2",
|
|
60
|
-
false: "text-sm text-gray-700 dark:text-gray-200 px-2"
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
|
-
defaultVariants: {
|
|
64
|
-
simple: false
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
);
|
|
68
|
-
var paginationContainerVariants = cva(
|
|
69
|
-
"flex items-center gap-1 flex-wrap",
|
|
70
|
-
{
|
|
71
|
-
variants: {
|
|
72
|
-
align: {
|
|
73
|
-
start: "justify-start",
|
|
74
|
-
center: "justify-center",
|
|
75
|
-
end: "justify-end"
|
|
76
|
-
},
|
|
77
|
-
wrap: {
|
|
78
|
-
true: "flex-wrap",
|
|
79
|
-
false: "flex-nowrap"
|
|
80
|
-
}
|
|
81
|
-
},
|
|
82
|
-
defaultVariants: {
|
|
83
|
-
align: "start",
|
|
84
|
-
wrap: true
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
);
|
|
88
|
-
|
|
89
|
-
// src/components/pagination/Pagination.tsx
|
|
90
|
-
var Pagination = (props) => {
|
|
91
|
-
const [local, variantProps, otherProps] = splitProps(
|
|
92
|
-
props,
|
|
93
|
-
[
|
|
94
|
-
"total",
|
|
95
|
-
"perPage",
|
|
96
|
-
"current",
|
|
97
|
-
"onChange",
|
|
98
|
-
"rangeBefore",
|
|
99
|
-
"rangeAfter",
|
|
100
|
-
"simple",
|
|
101
|
-
"children"
|
|
102
|
-
],
|
|
103
|
-
["rounded", "size", "disabled", "active", "simple"]
|
|
104
|
-
);
|
|
105
|
-
const perPage = () => local.perPage ?? 20;
|
|
106
|
-
const pageCount = createMemo(() => Math.ceil(local.total / perPage()));
|
|
107
|
-
const hasPrev = createMemo(() => local.current > 1);
|
|
108
|
-
const hasNext = createMemo(() => local.current < pageCount());
|
|
109
|
-
const pagesInRange = createMemo(() => {
|
|
110
|
-
const before = local.rangeBefore ?? 1;
|
|
111
|
-
const after = local.rangeAfter ?? 1;
|
|
112
|
-
const start = Math.max(1, local.current - before);
|
|
113
|
-
const end = Math.min(local.current + after, pageCount());
|
|
114
|
-
return Array.from({ length: end - start + 1 }, (_, i) => start + i);
|
|
115
|
-
});
|
|
116
|
-
const changePage = (page) => {
|
|
117
|
-
if (page >= 1 && page <= pageCount() && page !== local.current) {
|
|
118
|
-
local.onChange(page);
|
|
119
|
-
}
|
|
120
|
-
};
|
|
121
|
-
return <nav
|
|
122
|
-
class={paginationContainerVariants({ align: "start", wrap: true })}
|
|
123
|
-
{...otherProps}
|
|
124
|
-
>
|
|
125
|
-
<button
|
|
126
|
-
class={paginationItemVariants({
|
|
127
|
-
...variantProps,
|
|
128
|
-
disabled: !hasPrev()
|
|
129
|
-
})}
|
|
130
|
-
onClick={() => changePage(local.current - 1)}
|
|
131
|
-
disabled={!hasPrev()}
|
|
132
|
-
>
|
|
133
|
-
«
|
|
134
|
-
</button>
|
|
135
|
-
|
|
136
|
-
<Show when={pageCount() > 1}>
|
|
137
|
-
<Show when={local.simple}>
|
|
138
|
-
<span class={paginationInfoVariants({ simple: true })}>
|
|
139
|
-
{perPage() === 1 ? `${(local.current - 1) * perPage() + 1} / ${local.total}` : `${(local.current - 1) * perPage() + 1}-${Math.min(
|
|
140
|
-
local.current * perPage(),
|
|
141
|
-
local.total
|
|
142
|
-
)} / ${local.total}`}
|
|
143
|
-
</span>
|
|
144
|
-
</Show>
|
|
145
|
-
|
|
146
|
-
<Show when={!local.simple}>
|
|
147
|
-
<For each={pagesInRange()}>
|
|
148
|
-
{(page) => <button
|
|
149
|
-
class={paginationItemVariants({
|
|
150
|
-
...variantProps,
|
|
151
|
-
active: page === local.current
|
|
152
|
-
})}
|
|
153
|
-
onClick={() => changePage(page)}
|
|
154
|
-
>
|
|
155
|
-
{page}
|
|
156
|
-
</button>}
|
|
157
|
-
</For>
|
|
158
|
-
</Show>
|
|
159
|
-
</Show>
|
|
160
|
-
<button
|
|
161
|
-
class={paginationItemVariants({
|
|
162
|
-
...variantProps,
|
|
163
|
-
disabled: !hasNext()
|
|
164
|
-
})}
|
|
165
|
-
onClick={() => changePage(local.current + 1)}
|
|
166
|
-
disabled={!hasNext()}
|
|
167
|
-
>
|
|
168
|
-
»
|
|
169
|
-
</button>
|
|
170
|
-
</nav>;
|
|
171
|
-
};
|
|
172
|
-
var Pagination_default = Pagination;
|
|
173
|
-
|
|
174
|
-
// src/components/pagination/index.ts
|
|
175
|
-
var pagination_default = Pagination_default;
|
|
2
|
+
pagination_default
|
|
3
|
+
} from "../../chunk/ELRAUORW.jsx";
|
|
4
|
+
import "../../chunk/P7WPLZNA.jsx";
|
|
176
5
|
export {
|
|
177
6
|
pagination_default as default
|
|
178
7
|
};
|
|
@@ -1,44 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { S as Select } from '../../Select-CP-TUHJv.js';
|
|
2
|
+
export { a as SelectProps } from '../../Select-CP-TUHJv.js';
|
|
3
|
+
import 'solid-js';
|
|
4
|
+
import '../../classes-B_S9K-9I.js';
|
|
3
5
|
|
|
4
|
-
declare const selectVariants: {
|
|
5
|
-
(props?: (ConfigVariants<{
|
|
6
|
-
size: {
|
|
7
|
-
sm: string;
|
|
8
|
-
md: string;
|
|
9
|
-
lg: string;
|
|
10
|
-
};
|
|
11
|
-
color: {
|
|
12
|
-
primary: string;
|
|
13
|
-
info: string;
|
|
14
|
-
success: string;
|
|
15
|
-
warning: string;
|
|
16
|
-
danger: string;
|
|
17
|
-
};
|
|
18
|
-
loading: {
|
|
19
|
-
true: string;
|
|
20
|
-
false: string;
|
|
21
|
-
};
|
|
22
|
-
expanded: {
|
|
23
|
-
true: string;
|
|
24
|
-
false: string;
|
|
25
|
-
};
|
|
26
|
-
rounded: {
|
|
27
|
-
true: string;
|
|
28
|
-
false: string;
|
|
29
|
-
};
|
|
30
|
-
}> & ClassProps) | undefined): string;
|
|
31
|
-
variantKeys: ("size" | "color" | "loading" | "expanded" | "rounded")[];
|
|
32
|
-
};
|
|
33
6
|
|
|
34
|
-
type SelectProps = VariantProps<typeof selectVariants> & ClassProps & ComponentProps<"select"> & {
|
|
35
|
-
placeholder?: string;
|
|
36
|
-
nativeSize?: string | number;
|
|
37
|
-
value?: string | number | null;
|
|
38
|
-
onChange?: JSX.EventHandlerUnion<HTMLSelectElement, Event>;
|
|
39
|
-
onFocus?: JSX.EventHandlerUnion<HTMLSelectElement, FocusEvent>;
|
|
40
|
-
onBlur?: JSX.EventHandlerUnion<HTMLSelectElement, FocusEvent>;
|
|
41
|
-
};
|
|
42
|
-
declare const Select: Component<SelectProps>;
|
|
43
7
|
|
|
44
|
-
export {
|
|
8
|
+
export { Select as default };
|
|
@@ -1,98 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { template, spread, mergeProps, insert, createComponent, memo } from 'solid-js/web';
|
|
3
|
-
import { splitProps, createMemo, untrack, Show } from 'solid-js';
|
|
4
|
-
|
|
5
|
-
// src/components/select/Select.styles.ts
|
|
6
|
-
var selectVariants = cva(
|
|
7
|
-
[
|
|
8
|
-
"relative inline-flex items-center appearance-none",
|
|
9
|
-
"border outline-none",
|
|
10
|
-
"transition bg-white text-black",
|
|
11
|
-
"disabled:opacity-50 disabled:cursor-not-allowed"
|
|
12
|
-
],
|
|
13
|
-
{
|
|
14
|
-
variants: {
|
|
15
|
-
size: {
|
|
16
|
-
sm: "text-sm px-2 py-1",
|
|
17
|
-
md: "text-base px-3 py-2",
|
|
18
|
-
lg: "text-lg px-4 py-2"
|
|
19
|
-
},
|
|
20
|
-
color: {
|
|
21
|
-
primary: "border-gray-300 focus:border-primary",
|
|
22
|
-
info: "border-blue-300 focus:border-blue-500",
|
|
23
|
-
success: "border-green-300 focus:border-green-500",
|
|
24
|
-
warning: "border-yellow-300 focus:border-yellow-500",
|
|
25
|
-
danger: "border-red-300 focus:border-red-500"
|
|
26
|
-
},
|
|
27
|
-
loading: {
|
|
28
|
-
true: "cursor-wait opacity-75",
|
|
29
|
-
false: ""
|
|
30
|
-
},
|
|
31
|
-
expanded: {
|
|
32
|
-
true: "w-full",
|
|
33
|
-
false: "w-fit"
|
|
34
|
-
},
|
|
35
|
-
rounded: {
|
|
36
|
-
true: "rounded",
|
|
37
|
-
false: "rounded-none"
|
|
38
|
-
}
|
|
39
|
-
},
|
|
40
|
-
defaultVariants: {
|
|
41
|
-
size: "md",
|
|
42
|
-
color: "primary",
|
|
43
|
-
loading: false,
|
|
44
|
-
expanded: false,
|
|
45
|
-
rounded: false
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
);
|
|
49
|
-
|
|
50
|
-
// src/components/select/Select.tsx
|
|
51
|
-
var _tmpl$ = /* @__PURE__ */ template(`<option value disabled hidden>`);
|
|
52
|
-
var _tmpl$2 = /* @__PURE__ */ template(`<select>`);
|
|
53
|
-
var Select = (props) => {
|
|
54
|
-
const [localProps, variantProps, otherProps] = splitProps(props, ["placeholder", "value", "nativeSize", "onChange", "onBlur", "onFocus"], ["class", ...selectVariants.variantKeys]);
|
|
55
|
-
const empty = createMemo(() => untrack(() => localProps.value === null || localProps.value === void 0));
|
|
56
|
-
const selectClasses = createMemo(() => classes(selectVariants(variantProps), variantProps.class));
|
|
57
|
-
return (() => {
|
|
58
|
-
var _el$ = _tmpl$2();
|
|
59
|
-
spread(_el$, mergeProps({
|
|
60
|
-
get ["class"]() {
|
|
61
|
-
return selectClasses();
|
|
62
|
-
},
|
|
63
|
-
get size() {
|
|
64
|
-
return localProps.nativeSize;
|
|
65
|
-
},
|
|
66
|
-
get value() {
|
|
67
|
-
return localProps.value;
|
|
68
|
-
},
|
|
69
|
-
get onChange() {
|
|
70
|
-
return localProps.onChange;
|
|
71
|
-
},
|
|
72
|
-
get onFocus() {
|
|
73
|
-
return localProps.onFocus;
|
|
74
|
-
},
|
|
75
|
-
get onBlur() {
|
|
76
|
-
return localProps.onBlur;
|
|
77
|
-
}
|
|
78
|
-
}, otherProps), false, true);
|
|
79
|
-
insert(_el$, createComponent(Show, {
|
|
80
|
-
get when() {
|
|
81
|
-
return memo(() => !!localProps.placeholder)() && empty();
|
|
82
|
-
},
|
|
83
|
-
get children() {
|
|
84
|
-
var _el$2 = _tmpl$();
|
|
85
|
-
insert(_el$2, () => localProps.placeholder);
|
|
86
|
-
return _el$2;
|
|
87
|
-
}
|
|
88
|
-
}), null);
|
|
89
|
-
insert(_el$, () => props.children, null);
|
|
90
|
-
return _el$;
|
|
91
|
-
})();
|
|
92
|
-
};
|
|
93
|
-
var Select_default = Select;
|
|
94
|
-
|
|
95
|
-
// src/components/select/index.ts
|
|
96
|
-
var select_default = Select_default;
|
|
97
|
-
|
|
98
|
-
export { select_default as default };
|
|
1
|
+
export { select_default as default } from '../../chunk/3IHANYRN.js';
|
|
@@ -1,95 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
// src/components/select/Select.tsx
|
|
7
|
-
import {
|
|
8
|
-
splitProps,
|
|
9
|
-
Show,
|
|
10
|
-
createMemo,
|
|
11
|
-
untrack
|
|
12
|
-
} from "solid-js";
|
|
13
|
-
|
|
14
|
-
// src/components/select/Select.styles.ts
|
|
15
|
-
var selectVariants = cva(
|
|
16
|
-
[
|
|
17
|
-
"relative inline-flex items-center appearance-none",
|
|
18
|
-
"border outline-none",
|
|
19
|
-
"transition bg-white text-black",
|
|
20
|
-
"disabled:opacity-50 disabled:cursor-not-allowed"
|
|
21
|
-
],
|
|
22
|
-
{
|
|
23
|
-
variants: {
|
|
24
|
-
size: {
|
|
25
|
-
sm: "text-sm px-2 py-1",
|
|
26
|
-
md: "text-base px-3 py-2",
|
|
27
|
-
lg: "text-lg px-4 py-2"
|
|
28
|
-
},
|
|
29
|
-
color: {
|
|
30
|
-
primary: "border-gray-300 focus:border-primary",
|
|
31
|
-
info: "border-blue-300 focus:border-blue-500",
|
|
32
|
-
success: "border-green-300 focus:border-green-500",
|
|
33
|
-
warning: "border-yellow-300 focus:border-yellow-500",
|
|
34
|
-
danger: "border-red-300 focus:border-red-500"
|
|
35
|
-
},
|
|
36
|
-
loading: {
|
|
37
|
-
true: "cursor-wait opacity-75",
|
|
38
|
-
false: ""
|
|
39
|
-
},
|
|
40
|
-
expanded: {
|
|
41
|
-
true: "w-full",
|
|
42
|
-
false: "w-fit"
|
|
43
|
-
},
|
|
44
|
-
rounded: {
|
|
45
|
-
true: "rounded",
|
|
46
|
-
false: "rounded-none"
|
|
47
|
-
}
|
|
48
|
-
},
|
|
49
|
-
defaultVariants: {
|
|
50
|
-
size: "md",
|
|
51
|
-
color: "primary",
|
|
52
|
-
loading: false,
|
|
53
|
-
expanded: false,
|
|
54
|
-
rounded: false
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
);
|
|
58
|
-
|
|
59
|
-
// src/components/select/Select.tsx
|
|
60
|
-
var Select = (props) => {
|
|
61
|
-
const [localProps, variantProps, otherProps] = splitProps(
|
|
62
|
-
props,
|
|
63
|
-
["placeholder", "value", "nativeSize", "onChange", "onBlur", "onFocus"],
|
|
64
|
-
["class", ...selectVariants.variantKeys]
|
|
65
|
-
);
|
|
66
|
-
const empty = createMemo(
|
|
67
|
-
() => untrack(() => localProps.value === null || localProps.value === void 0)
|
|
68
|
-
);
|
|
69
|
-
const selectClasses = createMemo(
|
|
70
|
-
() => classes(selectVariants(variantProps), variantProps.class)
|
|
71
|
-
);
|
|
72
|
-
return <select
|
|
73
|
-
class={selectClasses()}
|
|
74
|
-
size={localProps.nativeSize}
|
|
75
|
-
value={localProps.value}
|
|
76
|
-
onChange={localProps.onChange}
|
|
77
|
-
onFocus={localProps.onFocus}
|
|
78
|
-
onBlur={localProps.onBlur}
|
|
79
|
-
{...otherProps}
|
|
80
|
-
>
|
|
81
|
-
<Show when={localProps.placeholder && empty()}>
|
|
82
|
-
<option value="" disabled hidden>
|
|
83
|
-
{localProps.placeholder}
|
|
84
|
-
</option>
|
|
85
|
-
</Show>
|
|
86
|
-
{props.children}
|
|
87
|
-
</select>;
|
|
88
|
-
};
|
|
89
|
-
var Select_default = Select;
|
|
90
|
-
|
|
91
|
-
// src/components/select/index.ts
|
|
92
|
-
var select_default = Select_default;
|
|
2
|
+
select_default
|
|
3
|
+
} from "../../chunk/6SBH3KSM.jsx";
|
|
4
|
+
import "../../chunk/P7WPLZNA.jsx";
|
|
93
5
|
export {
|
|
94
6
|
select_default as default
|
|
95
7
|
};
|
|
@@ -1,72 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { S as Switch } from '../../Switch-3IXS_68H.js';
|
|
2
|
+
export { a as SwitchProps } from '../../Switch-3IXS_68H.js';
|
|
3
|
+
import 'solid-js';
|
|
4
|
+
import '../../classes-B_S9K-9I.js';
|
|
3
5
|
|
|
4
|
-
declare const switchVariants: {
|
|
5
|
-
(props?: (ConfigVariants<{
|
|
6
|
-
size: {
|
|
7
|
-
sm: string;
|
|
8
|
-
md: string;
|
|
9
|
-
lg: string;
|
|
10
|
-
};
|
|
11
|
-
disabled: {
|
|
12
|
-
true: string;
|
|
13
|
-
false: string;
|
|
14
|
-
};
|
|
15
|
-
rounded: {
|
|
16
|
-
true: string;
|
|
17
|
-
false: string;
|
|
18
|
-
};
|
|
19
|
-
outlined: {
|
|
20
|
-
true: string;
|
|
21
|
-
false: string;
|
|
22
|
-
};
|
|
23
|
-
}> & ClassProps) | undefined): string;
|
|
24
|
-
variantKeys: ("size" | "disabled" | "rounded" | "outlined")[];
|
|
25
|
-
};
|
|
26
|
-
declare const checkVariants: {
|
|
27
|
-
(props?: (ConfigVariants<{
|
|
28
|
-
size: {
|
|
29
|
-
sm: string;
|
|
30
|
-
md: string;
|
|
31
|
-
lg: string;
|
|
32
|
-
};
|
|
33
|
-
color: {
|
|
34
|
-
blue: string;
|
|
35
|
-
green: string;
|
|
36
|
-
red: string;
|
|
37
|
-
yellow: string;
|
|
38
|
-
gray: string;
|
|
39
|
-
};
|
|
40
|
-
passiveColor: {
|
|
41
|
-
blue: string;
|
|
42
|
-
green: string;
|
|
43
|
-
red: string;
|
|
44
|
-
yellow: string;
|
|
45
|
-
gray: string;
|
|
46
|
-
};
|
|
47
|
-
rounded: {
|
|
48
|
-
true: string;
|
|
49
|
-
false: string;
|
|
50
|
-
};
|
|
51
|
-
outlined: {
|
|
52
|
-
true: string;
|
|
53
|
-
false: string;
|
|
54
|
-
};
|
|
55
|
-
}> & ClassProps) | undefined): string;
|
|
56
|
-
variantKeys: ("size" | "rounded" | "outlined" | "color" | "passiveColor")[];
|
|
57
|
-
};
|
|
58
6
|
|
|
59
|
-
type SwitchProps = {
|
|
60
|
-
children?: JSX.Element;
|
|
61
|
-
checked?: boolean;
|
|
62
|
-
defaultChecked?: boolean;
|
|
63
|
-
onChange?: (checked: boolean) => void;
|
|
64
|
-
name?: string;
|
|
65
|
-
required?: boolean;
|
|
66
|
-
disabled?: boolean;
|
|
67
|
-
"aria-label"?: string;
|
|
68
|
-
"aria-describedby"?: string;
|
|
69
|
-
} & VariantProps<typeof switchVariants> & VariantProps<typeof checkVariants> & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "onChange">;
|
|
70
|
-
declare const Switch: Component<SwitchProps>;
|
|
71
7
|
|
|
72
|
-
export {
|
|
8
|
+
export { Switch as default };
|
|
@@ -1,144 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { template, spread, mergeProps, insert, effect, className, setAttribute } from 'solid-js/web';
|
|
3
|
-
import { splitProps, createSignal, createMemo, untrack } from 'solid-js';
|
|
4
|
-
|
|
5
|
-
// src/components/switch/Switch.styles.ts
|
|
6
|
-
var switchVariants = cva(
|
|
7
|
-
"switch inline-flex items-center gap-2 select-none",
|
|
8
|
-
{
|
|
9
|
-
variants: {
|
|
10
|
-
size: {
|
|
11
|
-
sm: "text-sm",
|
|
12
|
-
md: "text-base",
|
|
13
|
-
lg: "text-lg"
|
|
14
|
-
},
|
|
15
|
-
disabled: {
|
|
16
|
-
true: "opacity-50 cursor-not-allowed",
|
|
17
|
-
false: ""
|
|
18
|
-
},
|
|
19
|
-
rounded: {
|
|
20
|
-
true: "",
|
|
21
|
-
false: ""
|
|
22
|
-
},
|
|
23
|
-
outlined: {
|
|
24
|
-
true: "",
|
|
25
|
-
false: ""
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
defaultVariants: {
|
|
29
|
-
size: "md",
|
|
30
|
-
disabled: false,
|
|
31
|
-
rounded: true,
|
|
32
|
-
outlined: false
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
);
|
|
36
|
-
var checkVariants = cva(
|
|
37
|
-
[
|
|
38
|
-
"relative transition-colors duration-200",
|
|
39
|
-
"after:content-[''] after:absolute after:bg-white after:transition-transform after:duration-700 after:ease-in-out"
|
|
40
|
-
].join(" "),
|
|
41
|
-
{
|
|
42
|
-
variants: {
|
|
43
|
-
size: {
|
|
44
|
-
sm: "w-8 h-4 after:w-3 after:h-3 after:left-0.5 after:top-0.5 peer-checked:after:translate-x-4",
|
|
45
|
-
md: "w-10 h-6 after:w-4 after:h-4 after:left-1 after:top-1 peer-checked:after:translate-x-4",
|
|
46
|
-
lg: "w-12 h-7 after:w-5 after:h-5 after:left-1 after:top-1 peer-checked:after:translate-x-5"
|
|
47
|
-
},
|
|
48
|
-
color: {
|
|
49
|
-
blue: "peer-checked:bg-blue-500",
|
|
50
|
-
green: "peer-checked:bg-green-500",
|
|
51
|
-
red: "peer-checked:bg-red-500",
|
|
52
|
-
yellow: "peer-checked:bg-yellow-400",
|
|
53
|
-
gray: "peer-checked:bg-gray-500"
|
|
54
|
-
},
|
|
55
|
-
passiveColor: {
|
|
56
|
-
blue: "bg-blue-200",
|
|
57
|
-
green: "bg-green-200",
|
|
58
|
-
red: "bg-red-200",
|
|
59
|
-
yellow: "bg-yellow-200",
|
|
60
|
-
gray: "bg-gray-300"
|
|
61
|
-
},
|
|
62
|
-
rounded: {
|
|
63
|
-
true: "rounded-full after:rounded-full",
|
|
64
|
-
false: "rounded-md after:rounded-sm"
|
|
65
|
-
},
|
|
66
|
-
outlined: {
|
|
67
|
-
true: "ring-2 ring-inset ring-white",
|
|
68
|
-
false: ""
|
|
69
|
-
}
|
|
70
|
-
},
|
|
71
|
-
defaultVariants: {
|
|
72
|
-
size: "md",
|
|
73
|
-
color: "blue",
|
|
74
|
-
passiveColor: "gray",
|
|
75
|
-
rounded: true,
|
|
76
|
-
outlined: false
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
);
|
|
80
|
-
|
|
81
|
-
// src/components/switch/Switch.tsx
|
|
82
|
-
var _tmpl$ = /* @__PURE__ */ template(`<label role=switch><input type=checkbox class="sr-only peer"aria-hidden=true><span></span><span class=control-label>`);
|
|
83
|
-
var Switch = (props) => {
|
|
84
|
-
const [localProps, variantProps, otherProps] = splitProps(props, ["children", "checked", "defaultChecked", "onChange", "name", "required", "disabled", "aria-label", "aria-describedby"], ["size", "rounded", "outlined", "color", "passiveColor"]);
|
|
85
|
-
const isControlled = localProps.checked !== void 0;
|
|
86
|
-
const [internalChecked, setInternalChecked] = createSignal(localProps.defaultChecked ?? false);
|
|
87
|
-
const checkedValue = createMemo(() => untrack(() => isControlled ? localProps.checked : internalChecked()));
|
|
88
|
-
const switchClasses = createMemo(() => switchVariants(variantProps));
|
|
89
|
-
const checkClasses = createMemo(() => checkVariants({
|
|
90
|
-
size: variantProps.size,
|
|
91
|
-
color: variantProps.color,
|
|
92
|
-
passiveColor: variantProps.passiveColor,
|
|
93
|
-
rounded: variantProps.rounded,
|
|
94
|
-
outlined: variantProps.outlined
|
|
95
|
-
}));
|
|
96
|
-
const handleChange = (e) => {
|
|
97
|
-
const next = e.currentTarget.checked;
|
|
98
|
-
untrack(() => {
|
|
99
|
-
if (!isControlled) setInternalChecked(next);
|
|
100
|
-
localProps.onChange?.(next);
|
|
101
|
-
});
|
|
102
|
-
};
|
|
103
|
-
return (() => {
|
|
104
|
-
var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
|
|
105
|
-
_el$2.addEventListener("change", handleChange);
|
|
106
|
-
spread(_el$2, mergeProps({
|
|
107
|
-
get checked() {
|
|
108
|
-
return checkedValue();
|
|
109
|
-
},
|
|
110
|
-
get name() {
|
|
111
|
-
return localProps.name;
|
|
112
|
-
},
|
|
113
|
-
get required() {
|
|
114
|
-
return localProps.required;
|
|
115
|
-
},
|
|
116
|
-
get disabled() {
|
|
117
|
-
return localProps.disabled;
|
|
118
|
-
}
|
|
119
|
-
}, otherProps), false, false);
|
|
120
|
-
insert(_el$4, () => localProps.children);
|
|
121
|
-
effect((_p$) => {
|
|
122
|
-
var _v$ = switchClasses(), _v$2 = checkedValue(), _v$3 = localProps["aria-label"], _v$4 = localProps["aria-describedby"], _v$5 = checkClasses();
|
|
123
|
-
_v$ !== _p$.e && className(_el$, _p$.e = _v$);
|
|
124
|
-
_v$2 !== _p$.t && setAttribute(_el$, "aria-checked", _p$.t = _v$2);
|
|
125
|
-
_v$3 !== _p$.a && setAttribute(_el$, "aria-label", _p$.a = _v$3);
|
|
126
|
-
_v$4 !== _p$.o && setAttribute(_el$, "aria-describedby", _p$.o = _v$4);
|
|
127
|
-
_v$5 !== _p$.i && className(_el$3, _p$.i = _v$5);
|
|
128
|
-
return _p$;
|
|
129
|
-
}, {
|
|
130
|
-
e: void 0,
|
|
131
|
-
t: void 0,
|
|
132
|
-
a: void 0,
|
|
133
|
-
o: void 0,
|
|
134
|
-
i: void 0
|
|
135
|
-
});
|
|
136
|
-
return _el$;
|
|
137
|
-
})();
|
|
138
|
-
};
|
|
139
|
-
var Switch_default = Switch;
|
|
140
|
-
|
|
141
|
-
// src/components/switch/index.ts
|
|
142
|
-
var switch_default = Switch_default;
|
|
143
|
-
|
|
144
|
-
export { switch_default as default };
|
|
1
|
+
export { switch_default as default } from '../../chunk/P2L6LFLS.js';
|