@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,159 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
} from "../../chunk/
|
|
4
|
-
|
|
5
|
-
// src/components/switch/Switch.tsx
|
|
6
|
-
import {
|
|
7
|
-
createSignal,
|
|
8
|
-
splitProps,
|
|
9
|
-
createMemo,
|
|
10
|
-
untrack
|
|
11
|
-
} from "solid-js";
|
|
12
|
-
|
|
13
|
-
// src/components/switch/Switch.styles.ts
|
|
14
|
-
var switchVariants = cva(
|
|
15
|
-
"switch inline-flex items-center gap-2 select-none",
|
|
16
|
-
{
|
|
17
|
-
variants: {
|
|
18
|
-
size: {
|
|
19
|
-
sm: "text-sm",
|
|
20
|
-
md: "text-base",
|
|
21
|
-
lg: "text-lg"
|
|
22
|
-
},
|
|
23
|
-
disabled: {
|
|
24
|
-
true: "opacity-50 cursor-not-allowed",
|
|
25
|
-
false: ""
|
|
26
|
-
},
|
|
27
|
-
rounded: {
|
|
28
|
-
true: "",
|
|
29
|
-
false: ""
|
|
30
|
-
},
|
|
31
|
-
outlined: {
|
|
32
|
-
true: "",
|
|
33
|
-
false: ""
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
defaultVariants: {
|
|
37
|
-
size: "md",
|
|
38
|
-
disabled: false,
|
|
39
|
-
rounded: true,
|
|
40
|
-
outlined: false
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
);
|
|
44
|
-
var checkVariants = cva(
|
|
45
|
-
[
|
|
46
|
-
"relative transition-colors duration-200",
|
|
47
|
-
"after:content-[''] after:absolute after:bg-white after:transition-transform after:duration-700 after:ease-in-out"
|
|
48
|
-
].join(" "),
|
|
49
|
-
{
|
|
50
|
-
variants: {
|
|
51
|
-
size: {
|
|
52
|
-
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",
|
|
53
|
-
md: "w-10 h-6 after:w-4 after:h-4 after:left-1 after:top-1 peer-checked:after:translate-x-4",
|
|
54
|
-
lg: "w-12 h-7 after:w-5 after:h-5 after:left-1 after:top-1 peer-checked:after:translate-x-5"
|
|
55
|
-
},
|
|
56
|
-
color: {
|
|
57
|
-
blue: "peer-checked:bg-blue-500",
|
|
58
|
-
green: "peer-checked:bg-green-500",
|
|
59
|
-
red: "peer-checked:bg-red-500",
|
|
60
|
-
yellow: "peer-checked:bg-yellow-400",
|
|
61
|
-
gray: "peer-checked:bg-gray-500"
|
|
62
|
-
},
|
|
63
|
-
passiveColor: {
|
|
64
|
-
blue: "bg-blue-200",
|
|
65
|
-
green: "bg-green-200",
|
|
66
|
-
red: "bg-red-200",
|
|
67
|
-
yellow: "bg-yellow-200",
|
|
68
|
-
gray: "bg-gray-300"
|
|
69
|
-
},
|
|
70
|
-
rounded: {
|
|
71
|
-
true: "rounded-full after:rounded-full",
|
|
72
|
-
false: "rounded-md after:rounded-sm"
|
|
73
|
-
},
|
|
74
|
-
outlined: {
|
|
75
|
-
true: "ring-2 ring-inset ring-white",
|
|
76
|
-
false: ""
|
|
77
|
-
}
|
|
78
|
-
},
|
|
79
|
-
defaultVariants: {
|
|
80
|
-
size: "md",
|
|
81
|
-
color: "blue",
|
|
82
|
-
passiveColor: "gray",
|
|
83
|
-
rounded: true,
|
|
84
|
-
outlined: false
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
);
|
|
88
|
-
|
|
89
|
-
// src/components/switch/Switch.tsx
|
|
90
|
-
var Switch = (props) => {
|
|
91
|
-
const [localProps, variantProps, otherProps] = splitProps(
|
|
92
|
-
props,
|
|
93
|
-
[
|
|
94
|
-
"children",
|
|
95
|
-
"checked",
|
|
96
|
-
"defaultChecked",
|
|
97
|
-
"onChange",
|
|
98
|
-
"name",
|
|
99
|
-
"required",
|
|
100
|
-
"disabled",
|
|
101
|
-
"aria-label",
|
|
102
|
-
"aria-describedby"
|
|
103
|
-
],
|
|
104
|
-
["size", "rounded", "outlined", "color", "passiveColor"]
|
|
105
|
-
);
|
|
106
|
-
const isControlled = localProps.checked !== void 0;
|
|
107
|
-
const [internalChecked, setInternalChecked] = createSignal(
|
|
108
|
-
localProps.defaultChecked ?? false
|
|
109
|
-
);
|
|
110
|
-
const checkedValue = createMemo(
|
|
111
|
-
() => untrack(() => isControlled ? localProps.checked : internalChecked())
|
|
112
|
-
);
|
|
113
|
-
const switchClasses = createMemo(() => switchVariants(variantProps));
|
|
114
|
-
const checkClasses = createMemo(
|
|
115
|
-
() => checkVariants({
|
|
116
|
-
size: variantProps.size,
|
|
117
|
-
color: variantProps.color,
|
|
118
|
-
passiveColor: variantProps.passiveColor,
|
|
119
|
-
rounded: variantProps.rounded,
|
|
120
|
-
outlined: variantProps.outlined
|
|
121
|
-
})
|
|
122
|
-
);
|
|
123
|
-
const handleChange = (e) => {
|
|
124
|
-
const next = e.currentTarget.checked;
|
|
125
|
-
untrack(() => {
|
|
126
|
-
if (!isControlled) setInternalChecked(next);
|
|
127
|
-
localProps.onChange?.(next);
|
|
128
|
-
});
|
|
129
|
-
};
|
|
130
|
-
return <label
|
|
131
|
-
class={switchClasses()}
|
|
132
|
-
role="switch"
|
|
133
|
-
aria-checked={checkedValue()}
|
|
134
|
-
aria-label={localProps["aria-label"]}
|
|
135
|
-
aria-describedby={localProps["aria-describedby"]}
|
|
136
|
-
>
|
|
137
|
-
<input
|
|
138
|
-
type="checkbox"
|
|
139
|
-
class="sr-only peer"
|
|
140
|
-
checked={checkedValue()}
|
|
141
|
-
onChange={handleChange}
|
|
142
|
-
name={localProps.name}
|
|
143
|
-
required={localProps.required}
|
|
144
|
-
disabled={localProps.disabled}
|
|
145
|
-
aria-hidden="true"
|
|
146
|
-
{...otherProps}
|
|
147
|
-
/>
|
|
148
|
-
|
|
149
|
-
<span class={checkClasses()} />
|
|
150
|
-
<span class="control-label">{localProps.children}</span>
|
|
151
|
-
</label>;
|
|
152
|
-
};
|
|
153
|
-
var Switch_default = Switch;
|
|
154
|
-
|
|
155
|
-
// src/components/switch/index.ts
|
|
156
|
-
var switch_default = Switch_default;
|
|
2
|
+
switch_default
|
|
3
|
+
} from "../../chunk/GLEAR2TS.jsx";
|
|
4
|
+
import "../../chunk/P7WPLZNA.jsx";
|
|
157
5
|
export {
|
|
158
6
|
switch_default as default
|
|
159
7
|
};
|
|
@@ -1,42 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { T as Tabs } from '../../Tabs-BNR3p92D.js';
|
|
2
|
+
export { a as TabsProps } from '../../Tabs-BNR3p92D.js';
|
|
3
|
+
import 'solid-js';
|
|
4
|
+
import '../../classes-B_S9K-9I.js';
|
|
3
5
|
|
|
4
|
-
declare const tabsNavVariants: {
|
|
5
|
-
(props?: (ConfigVariants<{
|
|
6
|
-
type: {
|
|
7
|
-
basic: string;
|
|
8
|
-
boxed: string;
|
|
9
|
-
toggle: string;
|
|
10
|
-
"toggle-rounded": string;
|
|
11
|
-
};
|
|
12
|
-
size: {
|
|
13
|
-
sm: string;
|
|
14
|
-
md: string;
|
|
15
|
-
lg: string;
|
|
16
|
-
};
|
|
17
|
-
alignment: {
|
|
18
|
-
left: string;
|
|
19
|
-
center: string;
|
|
20
|
-
right: string;
|
|
21
|
-
};
|
|
22
|
-
expanded: {
|
|
23
|
-
true: string;
|
|
24
|
-
false: string;
|
|
25
|
-
};
|
|
26
|
-
}> & ClassProps) | undefined): string;
|
|
27
|
-
variantKeys: ("type" | "size" | "alignment" | "expanded")[];
|
|
28
|
-
};
|
|
29
6
|
|
|
30
|
-
type TabItem = {
|
|
31
|
-
label: string;
|
|
32
|
-
content: JSX.Element;
|
|
33
|
-
disabled?: boolean;
|
|
34
|
-
};
|
|
35
|
-
type TabsProps = {
|
|
36
|
-
items: TabItem[];
|
|
37
|
-
value?: number;
|
|
38
|
-
onChange?: (index: number) => void;
|
|
39
|
-
} & VariantProps<typeof tabsNavVariants>;
|
|
40
|
-
declare const Tabs: Component<TabsProps>;
|
|
41
7
|
|
|
42
|
-
export {
|
|
8
|
+
export { Tabs as default };
|
|
@@ -1,166 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { delegateEvents, template, spread, insert, createComponent, effect, className } from 'solid-js/web';
|
|
3
|
-
import { splitProps, createSignal, createMemo, For, Show } from 'solid-js';
|
|
4
|
-
|
|
5
|
-
// src/components/tabs/Tabs.styles.ts
|
|
6
|
-
var tabsNavVariants = cva(
|
|
7
|
-
"flex text-sm font-medium text-gray-600 dark:text-gray-300",
|
|
8
|
-
{
|
|
9
|
-
variants: {
|
|
10
|
-
type: {
|
|
11
|
-
basic: "",
|
|
12
|
-
boxed: "flex gap-2",
|
|
13
|
-
toggle: "inline-flex rounded-md p-1",
|
|
14
|
-
"toggle-rounded": "inline-flex rounded-full p-1"
|
|
15
|
-
},
|
|
16
|
-
size: {
|
|
17
|
-
sm: "text-xs gap-1",
|
|
18
|
-
md: "text-sm gap-2",
|
|
19
|
-
lg: "text-base gap-3"
|
|
20
|
-
},
|
|
21
|
-
alignment: {
|
|
22
|
-
left: "justify-start",
|
|
23
|
-
center: "justify-center",
|
|
24
|
-
right: "justify-end"
|
|
25
|
-
},
|
|
26
|
-
expanded: {
|
|
27
|
-
true: "w-full",
|
|
28
|
-
false: ""
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
defaultVariants: {
|
|
32
|
-
type: "basic",
|
|
33
|
-
size: "md",
|
|
34
|
-
alignment: "left",
|
|
35
|
-
expanded: false
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
);
|
|
39
|
-
var tabTriggerVariants = cva(
|
|
40
|
-
"inline-flex items-center justify-center whitespace-nowrap font-medium text-sm transition-colors",
|
|
41
|
-
{
|
|
42
|
-
variants: {
|
|
43
|
-
size: {
|
|
44
|
-
sm: "text-xs px-2 py-1",
|
|
45
|
-
md: "text-sm px-3 py-2",
|
|
46
|
-
lg: "text-base px-4 py-3"
|
|
47
|
-
},
|
|
48
|
-
type: {
|
|
49
|
-
basic: "border-b-2 transition-colors hover:text-blue-600",
|
|
50
|
-
boxed: "rounded-t px-4 py-2 hover:text-blue-600",
|
|
51
|
-
toggle: "border -ml-px px-4 py-2 transition-colors first:ml-0 first:rounded-l-md last:rounded-r-md",
|
|
52
|
-
"toggle-rounded": "border -ml-px first:ml-0 first:rounded-l-full last:rounded-r-full transition-colors"
|
|
53
|
-
},
|
|
54
|
-
active: {
|
|
55
|
-
true: "",
|
|
56
|
-
false: ""
|
|
57
|
-
},
|
|
58
|
-
disabled: {
|
|
59
|
-
true: "opacity-50 cursor-not-allowed pointer-events-none",
|
|
60
|
-
false: ""
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
|
-
compoundVariants: [
|
|
64
|
-
{
|
|
65
|
-
type: "basic",
|
|
66
|
-
active: true,
|
|
67
|
-
class: "border-blue-600 text-blue-600"
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
type: "basic",
|
|
71
|
-
active: false,
|
|
72
|
-
class: "border-transparent text-gray-500 dark:text-gray-400"
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
type: "boxed",
|
|
76
|
-
active: true,
|
|
77
|
-
class: "border-x border-t border-b-0 border-gray-400 dark:border-gray-600 text-blue-600"
|
|
78
|
-
},
|
|
79
|
-
{
|
|
80
|
-
type: "boxed",
|
|
81
|
-
active: false,
|
|
82
|
-
class: "border-b border-transparent text-gray-500 dark:text-gray-400 hover:text-blue-600"
|
|
83
|
-
},
|
|
84
|
-
{
|
|
85
|
-
type: "toggle",
|
|
86
|
-
active: true,
|
|
87
|
-
class: "bg-blue-600 text-white border-blue-600"
|
|
88
|
-
},
|
|
89
|
-
{
|
|
90
|
-
type: "toggle",
|
|
91
|
-
active: false,
|
|
92
|
-
class: "bg-transparent text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-600"
|
|
93
|
-
},
|
|
94
|
-
{
|
|
95
|
-
type: "toggle-rounded",
|
|
96
|
-
active: true,
|
|
97
|
-
class: "bg-blue-600 text-white border-blue-600"
|
|
98
|
-
},
|
|
99
|
-
{
|
|
100
|
-
type: "toggle-rounded",
|
|
101
|
-
active: false,
|
|
102
|
-
class: "bg-transparent text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-600"
|
|
103
|
-
}
|
|
104
|
-
],
|
|
105
|
-
defaultVariants: {
|
|
106
|
-
active: false,
|
|
107
|
-
disabled: false
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
);
|
|
111
|
-
|
|
112
|
-
// src/components/tabs/Tabs.tsx
|
|
113
|
-
var _tmpl$ = /* @__PURE__ */ template(`<div><nav><ul class="flex gap-0"></ul></nav><div class=pt-4>`);
|
|
114
|
-
var _tmpl$2 = /* @__PURE__ */ template(`<li><button>`);
|
|
115
|
-
var Tabs = (props) => {
|
|
116
|
-
const [local, variantProps, otherProps] = splitProps(props, ["items", "value", "onChange"], ["size", "type", "alignment", "expanded"]);
|
|
117
|
-
const [internalActive, setInternalActive] = createSignal(local.value ?? 0);
|
|
118
|
-
const isControlled = () => local.value !== void 0;
|
|
119
|
-
const active = createMemo(() => isControlled() ? local.value : internalActive());
|
|
120
|
-
const handleChange = (i) => {
|
|
121
|
-
const item = local.items[i];
|
|
122
|
-
if (!item || item.disabled) return;
|
|
123
|
-
if (!isControlled()) {
|
|
124
|
-
setInternalActive(i);
|
|
125
|
-
}
|
|
126
|
-
local.onChange?.(i);
|
|
127
|
-
};
|
|
128
|
-
return (() => {
|
|
129
|
-
var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
|
|
130
|
-
spread(_el$, otherProps, false, true);
|
|
131
|
-
insert(_el$3, createComponent(For, {
|
|
132
|
-
get each() {
|
|
133
|
-
return local.items;
|
|
134
|
-
},
|
|
135
|
-
children: (tab, i) => (() => {
|
|
136
|
-
var _el$5 = _tmpl$2(), _el$6 = _el$5.firstChild;
|
|
137
|
-
_el$6.$$click = () => handleChange(i());
|
|
138
|
-
insert(_el$6, () => tab.label);
|
|
139
|
-
effect(() => className(_el$6, tabTriggerVariants({
|
|
140
|
-
type: variantProps.type ?? "basic",
|
|
141
|
-
size: variantProps.size ?? "md",
|
|
142
|
-
active: i() === active(),
|
|
143
|
-
disabled: tab.disabled
|
|
144
|
-
})));
|
|
145
|
-
return _el$5;
|
|
146
|
-
})()
|
|
147
|
-
}));
|
|
148
|
-
insert(_el$4, createComponent(Show, {
|
|
149
|
-
get when() {
|
|
150
|
-
return local.items[active()];
|
|
151
|
-
},
|
|
152
|
-
get children() {
|
|
153
|
-
return local.items[active()]?.content;
|
|
154
|
-
}
|
|
155
|
-
}));
|
|
156
|
-
effect(() => className(_el$2, tabsNavVariants(variantProps)));
|
|
157
|
-
return _el$;
|
|
158
|
-
})();
|
|
159
|
-
};
|
|
160
|
-
var Tabs_default = Tabs;
|
|
161
|
-
delegateEvents(["click"]);
|
|
162
|
-
|
|
163
|
-
// src/components/tabs/index.ts
|
|
164
|
-
var tabs_default = Tabs_default;
|
|
165
|
-
|
|
166
|
-
export { tabs_default as default };
|
|
1
|
+
export { tabs_default as default } from '../../chunk/WOT36Q7O.js';
|
|
@@ -1,174 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
} from "../../chunk/
|
|
4
|
-
|
|
5
|
-
// src/components/tabs/Tabs.tsx
|
|
6
|
-
import {
|
|
7
|
-
createSignal,
|
|
8
|
-
splitProps,
|
|
9
|
-
For,
|
|
10
|
-
Show,
|
|
11
|
-
createMemo
|
|
12
|
-
} from "solid-js";
|
|
13
|
-
|
|
14
|
-
// src/components/tabs/Tabs.styles.ts
|
|
15
|
-
var tabsNavVariants = cva(
|
|
16
|
-
"flex text-sm font-medium text-gray-600 dark:text-gray-300",
|
|
17
|
-
{
|
|
18
|
-
variants: {
|
|
19
|
-
type: {
|
|
20
|
-
basic: "",
|
|
21
|
-
boxed: "flex gap-2",
|
|
22
|
-
toggle: "inline-flex rounded-md p-1",
|
|
23
|
-
"toggle-rounded": "inline-flex rounded-full p-1"
|
|
24
|
-
},
|
|
25
|
-
size: {
|
|
26
|
-
sm: "text-xs gap-1",
|
|
27
|
-
md: "text-sm gap-2",
|
|
28
|
-
lg: "text-base gap-3"
|
|
29
|
-
},
|
|
30
|
-
alignment: {
|
|
31
|
-
left: "justify-start",
|
|
32
|
-
center: "justify-center",
|
|
33
|
-
right: "justify-end"
|
|
34
|
-
},
|
|
35
|
-
expanded: {
|
|
36
|
-
true: "w-full",
|
|
37
|
-
false: ""
|
|
38
|
-
}
|
|
39
|
-
},
|
|
40
|
-
defaultVariants: {
|
|
41
|
-
type: "basic",
|
|
42
|
-
size: "md",
|
|
43
|
-
alignment: "left",
|
|
44
|
-
expanded: false
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
);
|
|
48
|
-
var tabTriggerVariants = cva(
|
|
49
|
-
"inline-flex items-center justify-center whitespace-nowrap font-medium text-sm transition-colors",
|
|
50
|
-
{
|
|
51
|
-
variants: {
|
|
52
|
-
size: {
|
|
53
|
-
sm: "text-xs px-2 py-1",
|
|
54
|
-
md: "text-sm px-3 py-2",
|
|
55
|
-
lg: "text-base px-4 py-3"
|
|
56
|
-
},
|
|
57
|
-
type: {
|
|
58
|
-
basic: "border-b-2 transition-colors hover:text-blue-600",
|
|
59
|
-
boxed: "rounded-t px-4 py-2 hover:text-blue-600",
|
|
60
|
-
toggle: "border -ml-px px-4 py-2 transition-colors first:ml-0 first:rounded-l-md last:rounded-r-md",
|
|
61
|
-
"toggle-rounded": "border -ml-px first:ml-0 first:rounded-l-full last:rounded-r-full transition-colors"
|
|
62
|
-
},
|
|
63
|
-
active: {
|
|
64
|
-
true: "",
|
|
65
|
-
false: ""
|
|
66
|
-
},
|
|
67
|
-
disabled: {
|
|
68
|
-
true: "opacity-50 cursor-not-allowed pointer-events-none",
|
|
69
|
-
false: ""
|
|
70
|
-
}
|
|
71
|
-
},
|
|
72
|
-
compoundVariants: [
|
|
73
|
-
{
|
|
74
|
-
type: "basic",
|
|
75
|
-
active: true,
|
|
76
|
-
class: "border-blue-600 text-blue-600"
|
|
77
|
-
},
|
|
78
|
-
{
|
|
79
|
-
type: "basic",
|
|
80
|
-
active: false,
|
|
81
|
-
class: "border-transparent text-gray-500 dark:text-gray-400"
|
|
82
|
-
},
|
|
83
|
-
{
|
|
84
|
-
type: "boxed",
|
|
85
|
-
active: true,
|
|
86
|
-
class: "border-x border-t border-b-0 border-gray-400 dark:border-gray-600 text-blue-600"
|
|
87
|
-
},
|
|
88
|
-
{
|
|
89
|
-
type: "boxed",
|
|
90
|
-
active: false,
|
|
91
|
-
class: "border-b border-transparent text-gray-500 dark:text-gray-400 hover:text-blue-600"
|
|
92
|
-
},
|
|
93
|
-
{
|
|
94
|
-
type: "toggle",
|
|
95
|
-
active: true,
|
|
96
|
-
class: "bg-blue-600 text-white border-blue-600"
|
|
97
|
-
},
|
|
98
|
-
{
|
|
99
|
-
type: "toggle",
|
|
100
|
-
active: false,
|
|
101
|
-
class: "bg-transparent text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-600"
|
|
102
|
-
},
|
|
103
|
-
{
|
|
104
|
-
type: "toggle-rounded",
|
|
105
|
-
active: true,
|
|
106
|
-
class: "bg-blue-600 text-white border-blue-600"
|
|
107
|
-
},
|
|
108
|
-
{
|
|
109
|
-
type: "toggle-rounded",
|
|
110
|
-
active: false,
|
|
111
|
-
class: "bg-transparent text-gray-600 dark:text-gray-300 border-gray-300 dark:border-gray-600"
|
|
112
|
-
}
|
|
113
|
-
],
|
|
114
|
-
defaultVariants: {
|
|
115
|
-
active: false,
|
|
116
|
-
disabled: false
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
);
|
|
120
|
-
|
|
121
|
-
// src/components/tabs/Tabs.tsx
|
|
122
|
-
var Tabs = (props) => {
|
|
123
|
-
const [local, variantProps, otherProps] = splitProps(
|
|
124
|
-
props,
|
|
125
|
-
["items", "value", "onChange"],
|
|
126
|
-
["size", "type", "alignment", "expanded"]
|
|
127
|
-
);
|
|
128
|
-
const [internalActive, setInternalActive] = createSignal(local.value ?? 0);
|
|
129
|
-
const isControlled = () => local.value !== void 0;
|
|
130
|
-
const active = createMemo(
|
|
131
|
-
() => isControlled() ? local.value : internalActive()
|
|
132
|
-
);
|
|
133
|
-
const handleChange = (i) => {
|
|
134
|
-
const item = local.items[i];
|
|
135
|
-
if (!item || item.disabled) return;
|
|
136
|
-
if (!isControlled()) {
|
|
137
|
-
setInternalActive(i);
|
|
138
|
-
}
|
|
139
|
-
local.onChange?.(i);
|
|
140
|
-
};
|
|
141
|
-
return <div {...otherProps}>
|
|
142
|
-
<nav class={tabsNavVariants(variantProps)}>
|
|
143
|
-
<ul class="flex gap-0">
|
|
144
|
-
<For each={local.items}>
|
|
145
|
-
{(tab, i) => <li>
|
|
146
|
-
<button
|
|
147
|
-
class={tabTriggerVariants({
|
|
148
|
-
type: variantProps.type ?? "basic",
|
|
149
|
-
size: variantProps.size ?? "md",
|
|
150
|
-
active: i() === active(),
|
|
151
|
-
disabled: tab.disabled
|
|
152
|
-
})}
|
|
153
|
-
onClick={() => handleChange(i())}
|
|
154
|
-
>
|
|
155
|
-
{tab.label}
|
|
156
|
-
</button>
|
|
157
|
-
</li>}
|
|
158
|
-
</For>
|
|
159
|
-
</ul>
|
|
160
|
-
</nav>
|
|
161
|
-
<div class="pt-4">
|
|
162
|
-
<Show when={local.items[active()]}>
|
|
163
|
-
{local.items[active()]?.content}
|
|
164
|
-
</Show>
|
|
165
|
-
</div>
|
|
166
|
-
</div>;
|
|
167
|
-
};
|
|
168
|
-
var Tabs_default = Tabs;
|
|
169
|
-
|
|
170
|
-
// src/components/tabs/index.ts
|
|
171
|
-
var tabs_default = Tabs_default;
|
|
2
|
+
tabs_default
|
|
3
|
+
} from "../../chunk/KV6LTJHI.jsx";
|
|
4
|
+
import "../../chunk/P7WPLZNA.jsx";
|
|
172
5
|
export {
|
|
173
6
|
tabs_default as default
|
|
174
7
|
};
|
|
@@ -1,42 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { T as Tag } from '../../Tag-BPrhn-Ne.js';
|
|
2
|
+
export { a as TagProps } from '../../Tag-BPrhn-Ne.js';
|
|
3
|
+
import 'solid-js';
|
|
4
|
+
import '../../classes-B_S9K-9I.js';
|
|
3
5
|
|
|
4
|
-
declare const tagVariants: {
|
|
5
|
-
(props?: (ConfigVariants<{
|
|
6
|
-
size: {
|
|
7
|
-
normal: string;
|
|
8
|
-
medium: string;
|
|
9
|
-
large: string;
|
|
10
|
-
};
|
|
11
|
-
type: {
|
|
12
|
-
primary: string;
|
|
13
|
-
info: string;
|
|
14
|
-
success: string;
|
|
15
|
-
warning: string;
|
|
16
|
-
danger: string;
|
|
17
|
-
dark: string;
|
|
18
|
-
light: string;
|
|
19
|
-
};
|
|
20
|
-
rounded: {
|
|
21
|
-
true: string;
|
|
22
|
-
false: string;
|
|
23
|
-
};
|
|
24
|
-
closable: {
|
|
25
|
-
true: string;
|
|
26
|
-
false: string;
|
|
27
|
-
};
|
|
28
|
-
}> & ClassProps) | undefined): string;
|
|
29
|
-
variantKeys: ("size" | "type" | "rounded" | "closable")[];
|
|
30
|
-
};
|
|
31
6
|
|
|
32
|
-
type TagProps = VariantProps<typeof tagVariants> & ClassProps & ComponentProps<"span"> & {
|
|
33
|
-
closable?: boolean;
|
|
34
|
-
attached?: boolean;
|
|
35
|
-
ariaCloseLabel?: string;
|
|
36
|
-
onClose?: (e: MouseEvent) => void;
|
|
37
|
-
closeIcon?: JSX.Element;
|
|
38
|
-
children?: JSX.Element;
|
|
39
|
-
};
|
|
40
|
-
declare const Tag: Component<TagProps>;
|
|
41
7
|
|
|
42
|
-
export {
|
|
8
|
+
export { Tag as default };
|