@pathscale/ui 0.0.8 → 0.0.10

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.
@@ -1,175 +0,0 @@
1
- import { buttonVariants } from './TFLJI242.js';
2
- import { cva, classes } from './HKS7ET6T.js';
3
- import { delegateEvents, template, spread, mergeProps, insert, addEventListener, use, createComponent, effect, className, setAttribute } from 'solid-js/web';
4
- import { splitProps, createMemo, Show, createSignal, onMount, onCleanup } from 'solid-js';
5
-
6
- function useDropdown(trigger, disabled = false) {
7
- const [open, setOpen] = createSignal(false);
8
- let ref;
9
- const toggle = () => {
10
- if (!disabled && trigger === "click") {
11
- setOpen((v) => !v);
12
- }
13
- };
14
- const onEnter = () => {
15
- if (!disabled && trigger === "hover") setOpen(true);
16
- };
17
- const onLeave = () => {
18
- if (!disabled && trigger === "hover") setOpen(false);
19
- };
20
- const onClickOutside = (e) => {
21
- if (trigger === "click" && ref && !ref.contains(e.target)) {
22
- setOpen(false);
23
- }
24
- };
25
- onMount(() => {
26
- document.addEventListener("click", onClickOutside);
27
- onCleanup(() => document.removeEventListener("click", onClickOutside));
28
- });
29
- return {
30
- open,
31
- ref: (el) => ref = el,
32
- toggle,
33
- onEnter,
34
- onLeave
35
- };
36
- }
37
-
38
- // src/components/dropdown/Dropdown.styles.ts
39
- var dropdownVariants = cva(
40
- [
41
- "absolute mt-2 shadow-lg z-10",
42
- "w-max rounded-md bg-white border border-gray-300",
43
- "transition-all duration-150 ease-in-out",
44
- "flex flex-col"
45
- ],
46
- {
47
- variants: {
48
- position: {
49
- "bottom-left": "left-0 top-full text-black",
50
- "bottom-right": "right-0 top-full text-black",
51
- "top-left": "left-0 bottom-full text-black",
52
- "top-right": "right-0 bottom-full text-black"
53
- },
54
- open: {
55
- true: "block",
56
- false: "hidden"
57
- }
58
- },
59
- defaultVariants: {
60
- position: "bottom-left",
61
- open: false
62
- }
63
- }
64
- );
65
- var dropdownItemVariants = cva(
66
- "px-4 py-2 cursor-pointer transition-colors duration-150 ease-in-out hover:bg-gray-100",
67
- {
68
- variants: {
69
- hasLink: { true: "p-0 text-blue-600 hover:underline", false: "" }
70
- },
71
- defaultVariants: { hasLink: false }
72
- }
73
- );
74
-
75
- // src/components/dropdown/DropdownMenu.tsx
76
- var _tmpl$ = /* @__PURE__ */ template(`<div>`);
77
- var DropdownMenu = (props) => {
78
- const [local, other] = splitProps(props, ["open", "position", "children"]);
79
- return (() => {
80
- var _el$ = _tmpl$();
81
- spread(_el$, mergeProps({
82
- get ["class"]() {
83
- return dropdownVariants({
84
- open: local.open,
85
- position: local.position
86
- });
87
- }
88
- }, other, {
89
- "id": "dropdown-menu",
90
- "role": "menu"
91
- }), false, true);
92
- insert(_el$, () => local.children);
93
- return _el$;
94
- })();
95
- };
96
- var DropdownMenu_default = DropdownMenu;
97
-
98
- // src/components/dropdown/Dropdown.tsx
99
- var _tmpl$2 = /* @__PURE__ */ template(`<div><button type=button aria-controls=dropdown-menu>`);
100
- var Dropdown = (props) => {
101
- const [localProps, variantProps, restProps] = splitProps(props, ["label", "disabledLabel", "trigger", "children", "disabled", "color", "class", "className"], Object.keys(dropdownVariants.variantKeys ?? {}));
102
- const {
103
- open,
104
- ref,
105
- toggle,
106
- onEnter,
107
- onLeave
108
- } = useDropdown(localProps.trigger ?? "click", !!localProps.disabled);
109
- const labelContent = createMemo(() => localProps.disabled ? localProps.disabledLabel ?? localProps.label : localProps.label ?? "Toggle");
110
- const containerClass = createMemo(() => classes("relative inline-block", localProps.class, localProps.className));
111
- const buttonClass = createMemo(() => buttonVariants({
112
- color: "primary"
113
- }));
114
- return (() => {
115
- var _el$ = _tmpl$2(), _el$2 = _el$.firstChild;
116
- addEventListener(_el$, "mouseleave", onLeave);
117
- addEventListener(_el$, "mouseenter", onEnter);
118
- use(ref, _el$);
119
- spread(_el$, mergeProps({
120
- get ["class"]() {
121
- return containerClass();
122
- }
123
- }, restProps), false, true);
124
- _el$2.$$click = (e) => {
125
- e.preventDefault();
126
- if (localProps.trigger === "click") toggle();
127
- };
128
- insert(_el$2, labelContent);
129
- insert(_el$, createComponent(Show, {
130
- get when() {
131
- return open();
132
- },
133
- get children() {
134
- return createComponent(DropdownMenu_default, mergeProps({
135
- open: true
136
- }, variantProps, {
137
- get children() {
138
- return localProps.children;
139
- }
140
- }));
141
- }
142
- }), null);
143
- effect((_p$) => {
144
- var _v$ = buttonClass(), _v$2 = localProps.disabled, _v$3 = localProps.disabled;
145
- _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
146
- _v$2 !== _p$.t && setAttribute(_el$2, "aria-disabled", _p$.t = _v$2);
147
- _v$3 !== _p$.a && (_el$2.disabled = _p$.a = _v$3);
148
- return _p$;
149
- }, {
150
- e: void 0,
151
- t: void 0,
152
- a: void 0
153
- });
154
- return _el$;
155
- })();
156
- };
157
- var Dropdown_default = Dropdown;
158
- delegateEvents(["click"]);
159
- var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
160
- var DropdownItem = ({
161
- hasLink = false,
162
- children
163
- }) => {
164
- return (() => {
165
- var _el$ = _tmpl$3();
166
- insert(_el$, children);
167
- effect(() => className(_el$, dropdownItemVariants({
168
- hasLink
169
- })));
170
- return _el$;
171
- })();
172
- };
173
- var DropdownItem_default = DropdownItem;
174
-
175
- export { DropdownItem_default, DropdownMenu_default, Dropdown_default };
@@ -1,194 +0,0 @@
1
- import {
2
- classes,
3
- cva
4
- } from "./P7WPLZNA.jsx";
5
-
6
- // src/components/navbar/Navbar.tsx
7
- import {
8
- splitProps,
9
- Show
10
- } from "solid-js";
11
-
12
- // src/components/navbar/Navbar.styles.ts
13
- var navbarStyles = cva("flex items-center px-4", {
14
- variants: {
15
- color: {
16
- info: "bg-blue-500 text-white",
17
- primary: "bg-indigo-600 text-white",
18
- success: "bg-green-500 text-white",
19
- light: "bg-white text-gray-800"
20
- }
21
- },
22
- defaultVariants: {
23
- color: "info"
24
- }
25
- });
26
- var navbarItemStyles = cva(
27
- "px-3 py-2 rounded transition-colors",
28
- {
29
- variants: {
30
- active: {
31
- true: "font-semibold border-b-2 border-current",
32
- false: "hover:bg-gray-200"
33
- },
34
- tag: {
35
- div: "",
36
- a: ""
37
- }
38
- },
39
- defaultVariants: {
40
- active: false,
41
- tag: "div"
42
- }
43
- }
44
- );
45
- var navbarDropdownStyles = cva("relative", {
46
- variants: {
47
- hoverable: {
48
- true: "group",
49
- false: ""
50
- }
51
- },
52
- defaultVariants: {
53
- hoverable: false
54
- }
55
- });
56
- var dropdownMenuStyles = cva(
57
- "absolute mt-2 bg-white text-gray-800 rounded shadow-lg hidden group-hover:block",
58
- {
59
- variants: {
60
- align: {
61
- left: "left-0",
62
- right: "right-0"
63
- }
64
- },
65
- defaultVariants: {
66
- align: "left"
67
- }
68
- }
69
- );
70
- var imageStyles = cva("", {
71
- variants: {
72
- rounded: {
73
- true: "rounded-full",
74
- false: ""
75
- },
76
- size: {
77
- sm: "w-6 h-6",
78
- md: "w-8 h-8",
79
- lg: "w-12 h-12"
80
- },
81
- bordered: {
82
- true: "border border-gray-200",
83
- false: ""
84
- }
85
- },
86
- defaultVariants: {
87
- rounded: false,
88
- size: "md",
89
- bordered: false
90
- }
91
- });
92
-
93
- // src/components/navbar/Navbar.tsx
94
- var Navbar = (props) => {
95
- const [local, variantProps, other] = splitProps(
96
- props,
97
- ["class", "className", "brand", "start", "end"],
98
- Object.keys(navbarStyles.variantKeys ?? {})
99
- );
100
- return <nav
101
- class={classes(
102
- navbarStyles({ color: variantProps.color }),
103
- local.class,
104
- local.className
105
- )}
106
- {...other}
107
- >
108
- <Show when={local.brand}>
109
- <div class="flex-shrink-0 mr-4">{local.brand}</div>
110
- </Show>
111
-
112
- <Show when={local.start}>
113
- <div class="flex-1 flex items-center space-x-2">{local.start}</div>
114
- </Show>
115
-
116
- <Show when={local.end}>
117
- <div class="flex-1 flex justify-end space-x-2">{local.end}</div>
118
- </Show>
119
- </nav>;
120
- };
121
- var Navbar_default = Navbar;
122
-
123
- // src/components/navbar/NavbarItem.tsx
124
- import {
125
- splitProps as splitProps2
126
- } from "solid-js";
127
- import { Dynamic } from "solid-js/web";
128
- var NavbarItem = (props) => {
129
- const [local, variantProps, other] = splitProps2(
130
- props,
131
- [
132
- "class",
133
- "className",
134
- "active",
135
- "href",
136
- "tag",
137
- "to",
138
- "children"
139
- ],
140
- Object.keys(navbarItemStyles.variantKeys ?? {})
141
- );
142
- const Tag = local.tag === "a" || local.href || local.to ? "a" : "div";
143
- return <Dynamic
144
- component={Tag}
145
- class={classes(
146
- navbarItemStyles({
147
- active: !!local.active,
148
- tag: local.tag ?? (Tag === "a" ? "a" : "div")
149
- }),
150
- local.class,
151
- local.className
152
- )}
153
- href={local.href ?? local.to}
154
- {...other}
155
- >
156
- {local.children}
157
- </Dynamic>;
158
- };
159
- var NavbarItem_default = NavbarItem;
160
-
161
- // src/components/navbar/NavbarDropdown.tsx
162
- import { splitProps as splitProps3, Show as Show2 } from "solid-js";
163
- var NavbarDropdown = (props) => {
164
- const [local, variantProps, other] = splitProps3(
165
- props,
166
- ["class", "className", "label", "hoverable", "children"],
167
- [
168
- ...Object.keys(navbarDropdownStyles.variantKeys ?? {}),
169
- ...Object.keys(dropdownMenuStyles.variantKeys ?? {})
170
- ]
171
- );
172
- return <div
173
- class={classes(
174
- navbarDropdownStyles({ hoverable: !!local.hoverable }),
175
- local.class,
176
- local.className
177
- )}
178
- {...other}
179
- >
180
- <div class="cursor-pointer">{local.label}</div>
181
- <Show2 when={local.hoverable}>
182
- <div class={dropdownMenuStyles({ align: variantProps.align })}>
183
- {local.children}
184
- </div>
185
- </Show2>
186
- </div>;
187
- };
188
- var NavbarDropdown_default = NavbarDropdown;
189
-
190
- export {
191
- Navbar_default,
192
- NavbarItem_default,
193
- NavbarDropdown_default
194
- };
@@ -1,169 +0,0 @@
1
- import {
2
- buttonVariants
3
- } from "./YAQK2KFY.jsx";
4
- import {
5
- classes,
6
- cva
7
- } from "./P7WPLZNA.jsx";
8
-
9
- // src/components/dropdown/Dropdown.tsx
10
- import {
11
- splitProps as splitProps2,
12
- createMemo,
13
- Show
14
- } from "solid-js";
15
-
16
- // src/components/dropdown/useDropdown.ts
17
- import { createSignal, onMount, onCleanup } from "solid-js";
18
- function useDropdown(trigger, disabled = false) {
19
- const [open, setOpen] = createSignal(false);
20
- let ref;
21
- const toggle = () => {
22
- if (!disabled && trigger === "click") {
23
- setOpen((v) => !v);
24
- }
25
- };
26
- const onEnter = () => {
27
- if (!disabled && trigger === "hover") setOpen(true);
28
- };
29
- const onLeave = () => {
30
- if (!disabled && trigger === "hover") setOpen(false);
31
- };
32
- const onClickOutside = (e) => {
33
- if (trigger === "click" && ref && !ref.contains(e.target)) {
34
- setOpen(false);
35
- }
36
- };
37
- onMount(() => {
38
- document.addEventListener("click", onClickOutside);
39
- onCleanup(() => document.removeEventListener("click", onClickOutside));
40
- });
41
- return {
42
- open,
43
- ref: (el) => ref = el,
44
- toggle,
45
- onEnter,
46
- onLeave
47
- };
48
- }
49
-
50
- // src/components/dropdown/DropdownMenu.tsx
51
- import { splitProps } from "solid-js";
52
-
53
- // src/components/dropdown/Dropdown.styles.ts
54
- var dropdownVariants = cva(
55
- [
56
- "absolute mt-2 shadow-lg z-10",
57
- "w-max rounded-md bg-white border border-gray-300",
58
- "transition-all duration-150 ease-in-out",
59
- "flex flex-col"
60
- ],
61
- {
62
- variants: {
63
- position: {
64
- "bottom-left": "left-0 top-full text-black",
65
- "bottom-right": "right-0 top-full text-black",
66
- "top-left": "left-0 bottom-full text-black",
67
- "top-right": "right-0 bottom-full text-black"
68
- },
69
- open: {
70
- true: "block",
71
- false: "hidden"
72
- }
73
- },
74
- defaultVariants: {
75
- position: "bottom-left",
76
- open: false
77
- }
78
- }
79
- );
80
- var dropdownItemVariants = cva(
81
- "px-4 py-2 cursor-pointer transition-colors duration-150 ease-in-out hover:bg-gray-100",
82
- {
83
- variants: {
84
- hasLink: { true: "p-0 text-blue-600 hover:underline", false: "" }
85
- },
86
- defaultVariants: { hasLink: false }
87
- }
88
- );
89
-
90
- // src/components/dropdown/DropdownMenu.tsx
91
- var DropdownMenu = (props) => {
92
- const [local, other] = splitProps(props, ["open", "position", "children"]);
93
- return <div
94
- class={dropdownVariants({ open: local.open, position: local.position })}
95
- {...other}
96
- id="dropdown-menu"
97
- role="menu"
98
- >
99
- {local.children}
100
- </div>;
101
- };
102
- var DropdownMenu_default = DropdownMenu;
103
-
104
- // src/components/dropdown/Dropdown.tsx
105
- var Dropdown = (props) => {
106
- const [localProps, variantProps, restProps] = splitProps2(
107
- props,
108
- ["label", "disabledLabel", "trigger", "children", "disabled", "color", "class", "className"],
109
- Object.keys(dropdownVariants.variantKeys ?? {})
110
- );
111
- const { open, ref, toggle, onEnter, onLeave } = useDropdown(
112
- localProps.trigger ?? "click",
113
- !!localProps.disabled
114
- );
115
- const labelContent = createMemo(
116
- () => localProps.disabled ? localProps.disabledLabel ?? localProps.label : localProps.label ?? "Toggle"
117
- );
118
- const containerClass = createMemo(
119
- () => classes("relative inline-block", localProps.class, localProps.className)
120
- );
121
- const buttonClass = createMemo(
122
- () => buttonVariants({
123
- color: "primary"
124
- })
125
- );
126
- return <div
127
- ref={ref}
128
- onMouseEnter={onEnter}
129
- onMouseLeave={onLeave}
130
- class={containerClass()}
131
- {...restProps}
132
- >
133
- <button
134
- type="button"
135
- onClick={(e) => {
136
- e.preventDefault();
137
- if (localProps.trigger === "click") toggle();
138
- }}
139
- class={buttonClass()}
140
- aria-disabled={localProps.disabled}
141
- disabled={localProps.disabled}
142
- aria-controls="dropdown-menu"
143
- >
144
- {labelContent()}
145
- </button>
146
-
147
- <Show when={open()}>
148
- <DropdownMenu_default open {...variantProps}>
149
- {localProps.children}
150
- </DropdownMenu_default>
151
- </Show>
152
- </div>;
153
- };
154
- var Dropdown_default = Dropdown;
155
-
156
- // src/components/dropdown/DropdownItem.tsx
157
- import "solid-js";
158
- var DropdownItem = ({ hasLink = false, children }) => {
159
- return <div class={dropdownItemVariants({ hasLink })}>
160
- {children}
161
- </div>;
162
- };
163
- var DropdownItem_default = DropdownItem;
164
-
165
- export {
166
- DropdownMenu_default,
167
- Dropdown_default,
168
- DropdownItem_default
169
- };