@pathscale/ui 0.0.13 → 0.0.15

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.
Files changed (174) hide show
  1. package/README.md +44 -39
  2. package/dist/index.js +7170 -29
  3. package/package.json +42 -48
  4. package/dist/Autocomplete-gLkjMHrc.d.ts +0 -28
  5. package/dist/Avatar-Dkd_kPlV.d.ts +0 -40
  6. package/dist/CollapseTitle-BNxog3is.d.ts +0 -12
  7. package/dist/Field-DI2PA30N.d.ts +0 -49
  8. package/dist/Mask-CPb596Mg.d.ts +0 -16
  9. package/dist/Menu-DgO4SHmA.d.ts +0 -45
  10. package/dist/Progress-ChF4ior8.d.ts +0 -64
  11. package/dist/Steps-Dk-UPL6r.d.ts +0 -38
  12. package/dist/Table-CGa6Nop3.d.ts +0 -39
  13. package/dist/Tabs-WiUU0xsM.d.ts +0 -42
  14. package/dist/Timeline-Bd4SxHMT.d.ts +0 -14
  15. package/dist/chunk/2OJYONJ3.js +0 -40
  16. package/dist/chunk/2VQ2762Z.js +0 -80
  17. package/dist/chunk/2XPPNBYK.js +0 -164
  18. package/dist/chunk/3FBDYV4P.js +0 -143
  19. package/dist/chunk/3I23P4TJ.js +0 -33
  20. package/dist/chunk/55B7Q4NT.jsx +0 -258
  21. package/dist/chunk/5HG7XWVC.jsx +0 -2956
  22. package/dist/chunk/5IJ7WEIF.js +0 -43
  23. package/dist/chunk/5O6WC3OB.jsx +0 -67
  24. package/dist/chunk/64ESNXN4.js +0 -1
  25. package/dist/chunk/6P5JIKPF.jsx +0 -51
  26. package/dist/chunk/BHLLVOVR.js +0 -46
  27. package/dist/chunk/C4YO33NN.jsx +0 -179
  28. package/dist/chunk/DJI5XKAV.js +0 -31
  29. package/dist/chunk/DN3P54J2.jsx +0 -43
  30. package/dist/chunk/DSTUGZW6.jsx +0 -81
  31. package/dist/chunk/DVFQAAZR.js +0 -43
  32. package/dist/chunk/EDDBK4J6.js +0 -42
  33. package/dist/chunk/FKSQPGOD.jsx +0 -170
  34. package/dist/chunk/FZRQDGPD.jsx +0 -54
  35. package/dist/chunk/G5UEZ2VC.js +0 -49
  36. package/dist/chunk/GL7JG772.js +0 -114
  37. package/dist/chunk/GMIXRYN3.js +0 -138
  38. package/dist/chunk/H2Q3L5KM.js +0 -48
  39. package/dist/chunk/HEOKGP5U.js +0 -55
  40. package/dist/chunk/HKS7ET6T.js +0 -56
  41. package/dist/chunk/HUHXQCKK.js +0 -16
  42. package/dist/chunk/HWAGW5N4.jsx +0 -118
  43. package/dist/chunk/I36LHZUY.jsx +0 -31
  44. package/dist/chunk/IG323YKF.jsx +0 -50
  45. package/dist/chunk/JQ4HSRDP.js +0 -142
  46. package/dist/chunk/JSQBKK7L.jsx +0 -50
  47. package/dist/chunk/JWRGKHDO.js +0 -172
  48. package/dist/chunk/K3WO7SRD.js +0 -1
  49. package/dist/chunk/KQ3RAWCE.jsx +0 -57
  50. package/dist/chunk/KV6LTJHI.jsx +0 -175
  51. package/dist/chunk/KXJZKDJX.jsx +0 -0
  52. package/dist/chunk/L4A67X7S.js +0 -7
  53. package/dist/chunk/LGDDR242.jsx +0 -159
  54. package/dist/chunk/MAX47D6F.js +0 -99
  55. package/dist/chunk/MM2DZQL3.js +0 -46
  56. package/dist/chunk/MYERRMTM.js +0 -200
  57. package/dist/chunk/O7LDJCQS.jsx +0 -18
  58. package/dist/chunk/OJRG4ZAB.jsx +0 -143
  59. package/dist/chunk/P653OZ5D.js +0 -224
  60. package/dist/chunk/P7WPLZNA.jsx +0 -59
  61. package/dist/chunk/PFB27MP3.jsx +0 -0
  62. package/dist/chunk/Q4442PU4.js +0 -42
  63. package/dist/chunk/QYEMOKUG.js +0 -125
  64. package/dist/chunk/R5G3PODL.jsx +0 -11
  65. package/dist/chunk/R6ZBT7CY.jsx +0 -55
  66. package/dist/chunk/RHEFVSMJ.jsx +0 -52
  67. package/dist/chunk/SPEY5RMB.js +0 -84
  68. package/dist/chunk/STFCLC5R.js +0 -2954
  69. package/dist/chunk/STKRVQR6.jsx +0 -130
  70. package/dist/chunk/SVJIYMYJ.jsx +0 -156
  71. package/dist/chunk/SYWB4UN3.jsx +0 -64
  72. package/dist/chunk/T2LDLYWV.jsx +0 -101
  73. package/dist/chunk/T324HUIT.jsx +0 -57
  74. package/dist/chunk/T5LDPSFV.jsx +0 -122
  75. package/dist/chunk/UNKDNDT3.js +0 -62
  76. package/dist/chunk/VN5BKHA2.jsx +0 -97
  77. package/dist/chunk/WOT36Q7O.js +0 -166
  78. package/dist/chunk/WUZETUQR.js +0 -92
  79. package/dist/chunk/XM3KF5LV.jsx +0 -179
  80. package/dist/chunk/YWIT2MRI.jsx +0 -43
  81. package/dist/chunk/ZH7DKMMN.js +0 -109
  82. package/dist/chunk/ZYEP35R3.jsx +0 -60
  83. package/dist/classes-B_S9K-9I.d.ts +0 -13
  84. package/dist/components/Progress/index.d.ts +0 -7
  85. package/dist/components/Progress/index.js +0 -1
  86. package/dist/components/Progress/index.jsx +0 -7
  87. package/dist/components/accordion/index.d.ts +0 -20
  88. package/dist/components/accordion/index.js +0 -1
  89. package/dist/components/accordion/index.jsx +0 -9
  90. package/dist/components/autocomplete/index.d.ts +0 -8
  91. package/dist/components/autocomplete/index.js +0 -1
  92. package/dist/components/autocomplete/index.jsx +0 -7
  93. package/dist/components/avatar/index.d.ts +0 -8
  94. package/dist/components/avatar/index.js +0 -1
  95. package/dist/components/avatar/index.jsx +0 -8
  96. package/dist/components/badge/index.d.ts +0 -17
  97. package/dist/components/badge/index.js +0 -1
  98. package/dist/components/badge/index.jsx +0 -8
  99. package/dist/components/breadcrumbs/index.d.ts +0 -9
  100. package/dist/components/breadcrumbs/index.js +0 -1
  101. package/dist/components/breadcrumbs/index.jsx +0 -7
  102. package/dist/components/button/index.d.ts +0 -31
  103. package/dist/components/button/index.js +0 -1
  104. package/dist/components/button/index.jsx +0 -9
  105. package/dist/components/checkbox/index.d.ts +0 -16
  106. package/dist/components/checkbox/index.js +0 -1
  107. package/dist/components/checkbox/index.jsx +0 -8
  108. package/dist/components/collapse/index.d.ts +0 -15
  109. package/dist/components/collapse/index.js +0 -1
  110. package/dist/components/collapse/index.jsx +0 -14
  111. package/dist/components/dropdown/index.d.ts +0 -27
  112. package/dist/components/dropdown/index.js +0 -1
  113. package/dist/components/dropdown/index.jsx +0 -13
  114. package/dist/components/field/index.d.ts +0 -7
  115. package/dist/components/field/index.js +0 -1
  116. package/dist/components/field/index.jsx +0 -7
  117. package/dist/components/fileinput/index.d.ts +0 -16
  118. package/dist/components/fileinput/index.js +0 -1
  119. package/dist/components/fileinput/index.jsx +0 -8
  120. package/dist/components/input/index.d.ts +0 -15
  121. package/dist/components/input/index.js +0 -1
  122. package/dist/components/input/index.jsx +0 -8
  123. package/dist/components/join/index.d.ts +0 -11
  124. package/dist/components/join/index.js +0 -1
  125. package/dist/components/join/index.jsx +0 -9
  126. package/dist/components/loading/index.d.ts +0 -11
  127. package/dist/components/loading/index.js +0 -1
  128. package/dist/components/loading/index.jsx +0 -9
  129. package/dist/components/mask/index.d.ts +0 -7
  130. package/dist/components/mask/index.js +0 -1
  131. package/dist/components/mask/index.jsx +0 -8
  132. package/dist/components/menu/index.d.ts +0 -8
  133. package/dist/components/menu/index.js +0 -1
  134. package/dist/components/menu/index.jsx +0 -8
  135. package/dist/components/navbar/index.d.ts +0 -36
  136. package/dist/components/navbar/index.js +0 -1
  137. package/dist/components/navbar/index.jsx +0 -11
  138. package/dist/components/pagination/index.d.ts +0 -8
  139. package/dist/components/pagination/index.js +0 -1
  140. package/dist/components/pagination/index.jsx +0 -9
  141. package/dist/components/polymorphic/index.d.ts +0 -34
  142. package/dist/components/polymorphic/index.js +0 -1
  143. package/dist/components/polymorphic/index.jsx +0 -8
  144. package/dist/components/select/index.d.ts +0 -15
  145. package/dist/components/select/index.js +0 -1
  146. package/dist/components/select/index.jsx +0 -8
  147. package/dist/components/steps/index.d.ts +0 -7
  148. package/dist/components/steps/index.js +0 -1
  149. package/dist/components/steps/index.jsx +0 -8
  150. package/dist/components/table/index.d.ts +0 -8
  151. package/dist/components/table/index.js +0 -1
  152. package/dist/components/table/index.jsx +0 -7
  153. package/dist/components/tabs/index.d.ts +0 -8
  154. package/dist/components/tabs/index.js +0 -1
  155. package/dist/components/tabs/index.jsx +0 -7
  156. package/dist/components/textarea/index.d.ts +0 -15
  157. package/dist/components/textarea/index.js +0 -1
  158. package/dist/components/textarea/index.jsx +0 -8
  159. package/dist/components/timeline/index.d.ts +0 -7
  160. package/dist/components/timeline/index.js +0 -1
  161. package/dist/components/timeline/index.jsx +0 -7
  162. package/dist/components/toast/index.d.ts +0 -24
  163. package/dist/components/toast/index.js +0 -1
  164. package/dist/components/toast/index.jsx +0 -11
  165. package/dist/components/toggle/index.d.ts +0 -15
  166. package/dist/components/toggle/index.js +0 -1
  167. package/dist/components/toggle/index.jsx +0 -8
  168. package/dist/components/tooltip/index.d.ts +0 -17
  169. package/dist/components/tooltip/index.js +0 -1
  170. package/dist/components/tooltip/index.jsx +0 -8
  171. package/dist/index.css +0 -73
  172. package/dist/index.d.ts +0 -33
  173. package/dist/index.jsx +0 -143
  174. package/dist/types-CUG9pToa.d.ts +0 -15
@@ -1,164 +0,0 @@
1
- import { clsx } from './HUHXQCKK.js';
2
- import { twMerge } from './STFCLC5R.js';
3
- import { createComponent, Dynamic, mergeProps, template, effect, className, style, setAttribute, insert } from 'solid-js/web';
4
- import { splitProps, children } from 'solid-js';
5
-
6
- var VoidElementList = ["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "keygen", "meta", "param", "source", "track", "wbr"];
7
- var AvatarGroup = (props) => {
8
- const [local, others] = splitProps(props, ["as", "class", "className", "children"]);
9
- const Tag = local.as || "div";
10
- const classes = () => twMerge("avatar-group -space-x-6", local.class, local.className);
11
- const ariaLabel = `Group of ${local.children.length} avatar photos`;
12
- if (VoidElementList.includes(Tag)) {
13
- return createComponent(Dynamic, mergeProps({
14
- component: Tag
15
- }, others, {
16
- "aria-label": ariaLabel,
17
- get ["class"]() {
18
- return classes();
19
- }
20
- }));
21
- }
22
- return createComponent(Dynamic, mergeProps({
23
- component: Tag
24
- }, others, {
25
- "aria-label": ariaLabel,
26
- get ["class"]() {
27
- return classes();
28
- },
29
- get children() {
30
- return local.children;
31
- }
32
- }));
33
- };
34
- var AvatarGroup_default = AvatarGroup;
35
-
36
- // src/components/avatar/Avatar.tsx
37
- var _tmpl$ = /* @__PURE__ */ template(`<div><img>`);
38
- var _tmpl$2 = /* @__PURE__ */ template(`<div><span>`);
39
- var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
40
- var VoidElementList2 = ["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "keygen", "meta", "param", "source", "track", "wbr"];
41
- var Avatar = (props) => {
42
- const [local, others] = splitProps(props, ["src", "letters", "size", "shape", "color", "border", "borderColor", "online", "offline", "innerClass", "as", "class", "className", "style", "children"]);
43
- const Tag = local.as || "div";
44
- const containerClass = () => twMerge("avatar", local.class, local.className, clsx({
45
- "avatar-online": local.online,
46
- "avatar-offline": local.offline,
47
- "avatar-placeholder": !local.src
48
- }));
49
- const customSizeStyle = typeof local.size === "number" ? {
50
- width: `${local.size}px`,
51
- height: `${local.size}px`
52
- } : void 0;
53
- const baseInner = () => twMerge(local.innerClass);
54
- const imgClasses = () => clsx(baseInner(), {
55
- ring: local.border,
56
- "ring-offset-base-100 ring-offset-2": local.border,
57
- [`ring-${local.borderColor}`]: local.border && local.borderColor,
58
- "rounded-full": local.shape === "circle",
59
- "rounded-btn": local.shape === "square",
60
- "w-32 h-32": local.size === "lg",
61
- "w-24 h-24": local.size === "md",
62
- "w-14 h-14": local.size === "sm",
63
- "w-10 h-10": local.size === "xs"
64
- });
65
- const placeholderClasses = () => clsx(baseInner(), {
66
- "bg-neutral-focus": !local.color,
67
- "text-neutral-content": !local.color || local.color === "neutral",
68
- [`bg-${local.color}`]: !!local.color,
69
- [`text-${local.color}-content`]: !!local.color,
70
- ring: local.border,
71
- "ring-offset-base-100 ring-offset-2": local.border,
72
- [`ring-${local.borderColor}`]: local.border && local.borderColor,
73
- "rounded-full": local.shape === "circle",
74
- "rounded-btn": local.shape === "square",
75
- "w-32 h-32 text-3xl": local.size === "lg",
76
- "w-24 h-24 text-xl": local.size === "md",
77
- "w-14 h-14": local.size === "sm",
78
- "w-10 h-10": local.size === "xs"
79
- });
80
- const resolved = children(() => local.children)();
81
- const isStringChild = typeof resolved === "string";
82
- const renderContents = () => {
83
- return local.src ? (() => {
84
- var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
85
- effect((_p$) => {
86
- var _v$ = imgClasses(), _v$2 = customSizeStyle, _v$3 = local.src;
87
- _v$ !== _p$.e && className(_el$, _p$.e = _v$);
88
- _p$.t = style(_el$, _v$2, _p$.t);
89
- _v$3 !== _p$.a && setAttribute(_el$2, "src", _p$.a = _v$3);
90
- return _p$;
91
- }, {
92
- e: void 0,
93
- t: void 0,
94
- a: void 0
95
- });
96
- return _el$;
97
- })() : local.letters || isStringChild ? (() => {
98
- var _el$3 = _tmpl$2(), _el$4 = _el$3.firstChild;
99
- insert(_el$4, () => local.letters ?? resolved);
100
- effect((_p$) => {
101
- var _v$4 = placeholderClasses(), _v$5 = customSizeStyle;
102
- _v$4 !== _p$.e && className(_el$3, _p$.e = _v$4);
103
- _p$.t = style(_el$3, _v$5, _p$.t);
104
- return _p$;
105
- }, {
106
- e: void 0,
107
- t: void 0
108
- });
109
- return _el$3;
110
- })() : (() => {
111
- var _el$5 = _tmpl$3();
112
- insert(_el$5, () => local.children);
113
- effect((_p$) => {
114
- var _v$6 = imgClasses(), _v$7 = customSizeStyle;
115
- _v$6 !== _p$.e && className(_el$5, _p$.e = _v$6);
116
- _p$.t = style(_el$5, _v$7, _p$.t);
117
- return _p$;
118
- }, {
119
- e: void 0,
120
- t: void 0
121
- });
122
- return _el$5;
123
- })();
124
- };
125
- if (VoidElementList2.includes(Tag)) {
126
- return createComponent(Dynamic, mergeProps({
127
- component: Tag
128
- }, others, {
129
- get ["data-theme"]() {
130
- return others["dataTheme"];
131
- },
132
- get ["class"]() {
133
- return containerClass();
134
- },
135
- get style() {
136
- return local.style;
137
- }
138
- }));
139
- }
140
- return createComponent(Dynamic, mergeProps({
141
- component: Tag
142
- }, others, {
143
- get ["data-theme"]() {
144
- return others["dataTheme"];
145
- },
146
- get ["class"]() {
147
- return containerClass();
148
- },
149
- get style() {
150
- return local.style;
151
- },
152
- get children() {
153
- return renderContents();
154
- }
155
- }));
156
- };
157
- var Avatar_default = Object.assign(Avatar, {
158
- Group: AvatarGroup_default
159
- });
160
-
161
- // src/components/avatar/index.ts
162
- var avatar_default = Avatar_default;
163
-
164
- export { avatar_default };
@@ -1,143 +0,0 @@
1
- import { cva } from './HKS7ET6T.js';
2
- import { delegateEvents, createComponent, template, addEventListener, insert, effect, className } from 'solid-js/web';
3
- import { createContext, createSignal, useContext, Show } from 'solid-js';
4
-
5
- var DropdownContext = createContext();
6
-
7
- // src/components/dropdown/Dropdown.styles.ts
8
- var dropdownMenuClass = cva(
9
- "absolute z-10 w-max bg-white rounded shadow border border-gray-200 flex flex-col",
10
- {
11
- variants: {
12
- position: {
13
- "top-left": "bottom-full left-0 mb-2",
14
- "top-right": "bottom-full right-0 mb-2",
15
- left: "right-full top-0 mr-2",
16
- right: "left-full top-0 ml-2",
17
- "bottom-left": "top-full left-0 mt-2",
18
- "bottom-right": "top-full right-0 mt-2"
19
- }
20
- },
21
- defaultVariants: {
22
- position: "bottom-left"
23
- }
24
- }
25
- );
26
- var dropdownItemClass = cva(
27
- "px-4 py-2 text-sm cursor-pointer transition-colors",
28
- {
29
- variants: {
30
- disabled: {
31
- true: "text-gray-400 cursor-not-allowed",
32
- false: "hover:bg-gray-100 text-gray-800"
33
- }
34
- },
35
- defaultVariants: {
36
- disabled: false
37
- }
38
- }
39
- );
40
- var dropdownRootClass = cva("relative inline-block");
41
- var dropdownTriggerClass = cva("cursor-pointer w-fit", {
42
- variants: {
43
- disabled: {
44
- true: "pointer-events-none opacity-50",
45
- false: ""
46
- },
47
- hoverable: {
48
- true: "",
49
- false: ""
50
- }
51
- },
52
- defaultVariants: {
53
- disabled: false,
54
- hoverable: false
55
- }
56
- });
57
-
58
- // src/components/dropdown/Dropdown.tsx
59
- var _tmpl$ = /* @__PURE__ */ template(`<div>`);
60
- var Dropdown = (props) => {
61
- const [open, setOpen] = createSignal(false);
62
- const context = {
63
- open,
64
- setOpen,
65
- disabled: props.disabled,
66
- hoverable: props.hoverable,
67
- position: props.position ?? "left"
68
- };
69
- return createComponent(DropdownContext.Provider, {
70
- value: context,
71
- get children() {
72
- var _el$ = _tmpl$();
73
- addEventListener(_el$, "mouseleave", props.hoverable ? () => setOpen(false) : void 0);
74
- addEventListener(_el$, "mouseenter", props.hoverable ? () => setOpen(true) : void 0);
75
- insert(_el$, () => props.children);
76
- effect(() => className(_el$, dropdownRootClass()));
77
- return _el$;
78
- }
79
- });
80
- };
81
- var Dropdown_default = Dropdown;
82
- var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
83
- var DropdownTrigger = (props) => {
84
- const context = useContext(DropdownContext);
85
- const handleClick = () => {
86
- if (!context?.hoverable && !context?.disabled) {
87
- context?.setOpen(!context.open());
88
- }
89
- };
90
- return (() => {
91
- var _el$ = _tmpl$2();
92
- _el$.$$click = handleClick;
93
- insert(_el$, () => props.children);
94
- effect(() => className(_el$, dropdownTriggerClass({
95
- disabled: context?.disabled,
96
- hoverable: context?.hoverable
97
- })));
98
- return _el$;
99
- })();
100
- };
101
- var DropdownTrigger_default = DropdownTrigger;
102
- delegateEvents(["click"]);
103
- var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
104
- var DropdownMenu = (props) => {
105
- const context = useContext(DropdownContext);
106
- return createComponent(Show, {
107
- get when() {
108
- return context?.open?.();
109
- },
110
- get children() {
111
- var _el$ = _tmpl$3();
112
- insert(_el$, () => props.children);
113
- effect(() => className(_el$, dropdownMenuClass({
114
- position: context?.position
115
- })));
116
- return _el$;
117
- }
118
- });
119
- };
120
- var DropdownMenu_default = DropdownMenu;
121
- var _tmpl$4 = /* @__PURE__ */ template(`<div role=menuitem>`);
122
- var DropdownItem = (props) => {
123
- const context = useContext(DropdownContext);
124
- const handleClick = () => {
125
- if (!props.disabled) {
126
- props.onClick?.();
127
- context?.setOpen(false);
128
- }
129
- };
130
- return (() => {
131
- var _el$ = _tmpl$4();
132
- _el$.$$click = handleClick;
133
- insert(_el$, () => props.children);
134
- effect(() => className(_el$, dropdownItemClass({
135
- disabled: props.disabled
136
- })));
137
- return _el$;
138
- })();
139
- };
140
- var DropdownItem_default = DropdownItem;
141
- delegateEvents(["click"]);
142
-
143
- export { DropdownItem_default, DropdownMenu_default, DropdownTrigger_default, Dropdown_default };
@@ -1,33 +0,0 @@
1
- import { clsx } from './HUHXQCKK.js';
2
- import { twMerge } from './STFCLC5R.js';
3
- import { template, spread, mergeProps, insert } from 'solid-js/web';
4
- import { splitProps } from 'solid-js';
5
-
6
- var _tmpl$ = /* @__PURE__ */ template(`<div>`);
7
- var Join = (props) => {
8
- const [local, others] = splitProps(props, ["responsive", "vertical", "horizontal", "class", "className", "dataTheme", "style"]);
9
- const classes = () => twMerge("join", clsx({
10
- "join-vertical": !local.responsive && local.vertical,
11
- "join-horizontal": !local.responsive && local.horizontal,
12
- "join-vertical lg:join-horizontal": local.responsive
13
- }), local.class, local.className);
14
- return (() => {
15
- var _el$ = _tmpl$();
16
- spread(_el$, mergeProps(others, {
17
- get ["class"]() {
18
- return classes();
19
- },
20
- get ["data-theme"]() {
21
- return local.dataTheme;
22
- },
23
- get style() {
24
- return local.style;
25
- }
26
- }), false, true);
27
- insert(_el$, () => props.children);
28
- return _el$;
29
- })();
30
- };
31
- var Join_default = Join;
32
-
33
- export { Join_default };
@@ -1,258 +0,0 @@
1
- import {
2
- classes,
3
- cva
4
- } from "./P7WPLZNA.jsx";
5
-
6
- // src/components/navbar/Navbar.tsx
7
- import {
8
- createSignal,
9
- splitProps,
10
- createEffect
11
- } from "solid-js";
12
-
13
- // src/components/navbar/NavbarContext.ts
14
- import { createContext } from "solid-js";
15
- var NavbarContext = createContext();
16
-
17
- // src/components/navbar/Navbar.styles.ts
18
- var navbarClass = cva("flex items-center px-4", {
19
- variants: {
20
- color: {
21
- primary: "bg-indigo-600 text-white",
22
- info: "bg-blue-500 text-white",
23
- success: "bg-green-500 text-white",
24
- danger: "bg-red-600 text-white",
25
- warning: "bg-yellow-500 text-white",
26
- light: "bg-white text-gray-800"
27
- },
28
- spaced: {
29
- true: "py-4",
30
- false: ""
31
- },
32
- shadow: {
33
- true: "shadow-md",
34
- false: ""
35
- },
36
- transparent: {
37
- true: "bg-transparent",
38
- false: ""
39
- },
40
- fixedTop: {
41
- true: "fixed top-0 left-0 right-0 z-50",
42
- false: ""
43
- },
44
- fixedBottom: {
45
- true: "fixed bottom-0 left-0 right-0 z-50",
46
- false: ""
47
- }
48
- },
49
- defaultVariants: {
50
- color: "primary",
51
- spaced: false,
52
- shadow: false,
53
- transparent: false,
54
- fixedTop: false,
55
- fixedBottom: false
56
- }
57
- });
58
- var navbarItemClass = cva(
59
- "px-4 py-2 rounded transition-colors cursor-pointer",
60
- {
61
- variants: {
62
- active: {
63
- true: "",
64
- false: ""
65
- },
66
- color: {
67
- primary: "",
68
- success: "",
69
- info: "",
70
- danger: "",
71
- warning: "",
72
- light: ""
73
- }
74
- },
75
- defaultVariants: {
76
- active: false,
77
- color: "primary"
78
- },
79
- compoundVariants: [
80
- { color: "primary", active: true, class: "bg-white/20 text-white" },
81
- {
82
- color: "primary",
83
- active: false,
84
- class: "hover:bg-white/10 text-white"
85
- },
86
- { color: "success", active: true, class: "bg-white/20 text-white" },
87
- {
88
- color: "success",
89
- active: false,
90
- class: "hover:bg-white/10 text-white"
91
- },
92
- { color: "info", active: true, class: "bg-white/20 text-white" },
93
- { color: "info", active: false, class: "hover:bg-white/10 text-white" },
94
- { color: "danger", active: true, class: "bg-white/20 text-white" },
95
- { color: "danger", active: false, class: "hover:bg-white/10 text-white" },
96
- { color: "warning", active: true, class: "bg-white/20 text-white" },
97
- {
98
- color: "warning",
99
- active: false,
100
- class: "hover:bg-white/10 text-white"
101
- },
102
- { color: "light", active: true, class: "bg-gray-300 text-gray-900" },
103
- {
104
- color: "light",
105
- active: false,
106
- class: "hover:bg-gray-100 text-gray-800"
107
- }
108
- ]
109
- }
110
- );
111
- var navbarDropdownClass = cva("relative", {
112
- variants: {
113
- hoverable: {
114
- true: "group",
115
- false: ""
116
- }
117
- },
118
- defaultVariants: {
119
- hoverable: true
120
- }
121
- });
122
- var dropdownMenuClass = cva(
123
- "absolute mt-2 bg-white text-gray-800 rounded shadow-lg hidden group-hover:block",
124
- {
125
- variants: {
126
- align: {
127
- left: "left-0",
128
- right: "right-0"
129
- }
130
- },
131
- defaultVariants: {
132
- align: "left"
133
- }
134
- }
135
- );
136
-
137
- // src/components/navbar/Navbar.tsx
138
- var Navbar = (props) => {
139
- const [local] = splitProps(props, [
140
- "color",
141
- "modelValue",
142
- "children",
143
- "spaced",
144
- "shadow",
145
- "transparent",
146
- "fixedTop",
147
- "fixedBottom"
148
- ]);
149
- const [selected, setSelected] = createSignal(props.modelValue);
150
- createEffect(() => {
151
- if (props.modelValue !== void 0) {
152
- setSelected(props.modelValue);
153
- }
154
- });
155
- return <NavbarContext.Provider
156
- value={{
157
- color: local.color ?? "primary",
158
- selected,
159
- setSelected: (val) => {
160
- props.onChange?.(val);
161
- setSelected(val);
162
- }
163
- }}
164
- >
165
- <nav
166
- class={navbarClass({
167
- color: local.color,
168
- spaced: local.spaced,
169
- shadow: local.shadow,
170
- transparent: local.transparent,
171
- fixedTop: local.fixedTop,
172
- fixedBottom: local.fixedBottom
173
- })}
174
- >
175
- {local.children}
176
- </nav>
177
- </NavbarContext.Provider>;
178
- };
179
- var Navbar_default = Navbar;
180
-
181
- // src/components/navbar/NavbarItem.tsx
182
- import { splitProps as splitProps2, useContext } from "solid-js";
183
- import { Dynamic } from "solid-js/web";
184
- var allowedColors = [
185
- "primary",
186
- "info",
187
- "success",
188
- "danger",
189
- "warning",
190
- "light"
191
- ];
192
- var NavbarItem = (props) => {
193
- const context = useContext(NavbarContext);
194
- const [local, rest] = splitProps2(props, [
195
- "tag",
196
- "href",
197
- "label",
198
- "children",
199
- "class",
200
- "color"
201
- ]);
202
- const Tag = local.tag || (local.href ? "a" : "div");
203
- const isActive = () => context?.selected?.() === local.label;
204
- const resolveColor = (input) => {
205
- return allowedColors.includes(input) ? input : void 0;
206
- };
207
- return <Dynamic
208
- component={Tag}
209
- href={local.href}
210
- onClick={() => context?.setSelected?.(local.label)}
211
- class={classes(
212
- navbarItemClass({
213
- active: isActive(),
214
- color: resolveColor(local.color ?? context?.color)
215
- }),
216
- local.class
217
- )}
218
- {...rest}
219
- >
220
- {local.children}
221
- </Dynamic>;
222
- };
223
- var NavbarItem_default = NavbarItem;
224
-
225
- // src/components/navbar/NavbarDropdown.tsx
226
- import { splitProps as splitProps3, Show } from "solid-js";
227
- var NavbarDropdown = (props) => {
228
- const [local, rest] = splitProps3(props, [
229
- "label",
230
- "hoverable",
231
- "align",
232
- "class",
233
- "children"
234
- ]);
235
- return <div
236
- class={classes(
237
- navbarDropdownClass({ hoverable: local.hoverable }),
238
- local.class
239
- )}
240
- {...rest}
241
- >
242
- <div class="cursor-pointer px-4 py-2 rounded hover:bg-white/10">
243
- {local.label}
244
- </div>
245
- <Show when={local.hoverable}>
246
- <div class={dropdownMenuClass({ align: local.align })}>
247
- {local.children}
248
- </div>
249
- </Show>
250
- </div>;
251
- };
252
- var NavbarDropdown_default = NavbarDropdown;
253
-
254
- export {
255
- Navbar_default,
256
- NavbarItem_default,
257
- NavbarDropdown_default
258
- };