odj-svelte-ui 0.5.0 → 0.5.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.
Files changed (5) hide show
  1. package/dist/forms/select/Select.svelte +11 -3
  2. package/dist/forms/select/type.d.ts +1 -1
  3. package/dist/sidebar/theme.d.ts +84 -0
  4. package/dist/sidebar/theme.js +40 -10
  5. package/package.json +1 -1
package/dist/forms/select/Select.svelte CHANGED
@@ -11,9 +11,9 @@
11
11
  <select class={selectStyle} class:custom-select={customSelect} bind:value {...restProps}>
12
12
  {#if customSelect}
13
13
  <!-- svelte-ignore node_invalid_placement_ssr -->
14
- <button class="flex w-full items-center justify-between" aria-label="Select Picker">
15
- <selectedcontent></selectedcontent>
16
- <span class="picker transition-rotate duration-400">
14
+ <button class="flex w-full items-center gap-2 justify-between min-w-0" aria-label="Select Picker">
15
+ <selectedcontent class="truncate"></selectedcontent>
16
+ <span class="picker transition-rotate duration-400 shrink-0">
17
17
  <svg class="text-light-surface-800 size-3 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
18
18
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
19
19
  </svg>
@@ -73,5 +73,13 @@
73
73
  color: var(--color-dark-surface-200);
74
74
  border-color: var(--color-dark-surface-600);
75
75
  }
76
+
77
+ &:has(option:disabled:checked) button {
78
+ color: var(--color-light-surface-700);
79
+
80
+ :global(.dark) & {
81
+ color: var(--color-dark-surface-400);
82
+ }
83
+ }
76
84
  }
77
85
  </style>
package/dist/forms/select/type.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { Snippet } from "svelte";
2
- import type { MultiSelectParameters } from "svelte-multiselect";
2
+ import type { MultiSelectProps as MultiSelectParameters } from "svelte-multiselect";
3
3
  import type { HTMLSelectAttributes } from "svelte/elements";
4
4
  type SelectSize = "sm" | "md" | "lg";
5
5
  type SelectOptionType<T> = {
package/dist/sidebar/theme.d.ts CHANGED
@@ -14,26 +14,38 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
14
14
  none: {
15
15
  base: string;
16
16
  div: string;
17
+ active: string;
18
+ nonactive: string;
17
19
  };
18
20
  sm: {
19
21
  base: string;
20
22
  div: string;
23
+ active: string;
24
+ nonactive: string;
21
25
  };
22
26
  md: {
23
27
  base: string;
24
28
  div: string;
29
+ active: string;
30
+ nonactive: string;
25
31
  };
26
32
  lg: {
27
33
  base: string;
28
34
  div: string;
35
+ active: string;
36
+ nonactive: string;
29
37
  };
30
38
  xl: {
31
39
  base: string;
32
40
  div: string;
41
+ active: string;
42
+ nonactive: string;
33
43
  };
34
44
  "2xl": {
35
45
  base: string;
36
46
  div: string;
47
+ active: string;
48
+ nonactive: string;
37
49
  };
38
50
  };
39
51
  }, {
@@ -57,26 +69,38 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
57
69
  none: {
58
70
  base: string;
59
71
  div: string;
72
+ active: string;
73
+ nonactive: string;
60
74
  };
61
75
  sm: {
62
76
  base: string;
63
77
  div: string;
78
+ active: string;
79
+ nonactive: string;
64
80
  };
65
81
  md: {
66
82
  base: string;
67
83
  div: string;
84
+ active: string;
85
+ nonactive: string;
68
86
  };
69
87
  lg: {
70
88
  base: string;
71
89
  div: string;
90
+ active: string;
91
+ nonactive: string;
72
92
  };
73
93
  xl: {
74
94
  base: string;
75
95
  div: string;
96
+ active: string;
97
+ nonactive: string;
76
98
  };
77
99
  "2xl": {
78
100
  base: string;
79
101
  div: string;
102
+ active: string;
103
+ nonactive: string;
80
104
  };
81
105
  };
82
106
  }, {
@@ -95,26 +119,38 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
95
119
  none: {
96
120
  base: string;
97
121
  div: string;
122
+ active: string;
123
+ nonactive: string;
98
124
  };
99
125
  sm: {
100
126
  base: string;
101
127
  div: string;
128
+ active: string;
129
+ nonactive: string;
102
130
  };
103
131
  md: {
104
132
  base: string;
105
133
  div: string;
134
+ active: string;
135
+ nonactive: string;
106
136
  };
107
137
  lg: {
108
138
  base: string;
109
139
  div: string;
140
+ active: string;
141
+ nonactive: string;
110
142
  };
111
143
  xl: {
112
144
  base: string;
113
145
  div: string;
146
+ active: string;
147
+ nonactive: string;
114
148
  };
115
149
  "2xl": {
116
150
  base: string;
117
151
  div: string;
152
+ active: string;
153
+ nonactive: string;
118
154
  };
119
155
  };
120
156
  }>, {
@@ -133,26 +169,38 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
133
169
  none: {
134
170
  base: string;
135
171
  div: string;
172
+ active: string;
173
+ nonactive: string;
136
174
  };
137
175
  sm: {
138
176
  base: string;
139
177
  div: string;
178
+ active: string;
179
+ nonactive: string;
140
180
  };
141
181
  md: {
142
182
  base: string;
143
183
  div: string;
184
+ active: string;
185
+ nonactive: string;
144
186
  };
145
187
  lg: {
146
188
  base: string;
147
189
  div: string;
190
+ active: string;
191
+ nonactive: string;
148
192
  };
149
193
  xl: {
150
194
  base: string;
151
195
  div: string;
196
+ active: string;
197
+ nonactive: string;
152
198
  };
153
199
  "2xl": {
154
200
  base: string;
155
201
  div: string;
202
+ active: string;
203
+ nonactive: string;
156
204
  };
157
205
  };
158
206
  }, {
@@ -176,26 +224,38 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
176
224
  none: {
177
225
  base: string;
178
226
  div: string;
227
+ active: string;
228
+ nonactive: string;
179
229
  };
180
230
  sm: {
181
231
  base: string;
182
232
  div: string;
233
+ active: string;
234
+ nonactive: string;
183
235
  };
184
236
  md: {
185
237
  base: string;
186
238
  div: string;
239
+ active: string;
240
+ nonactive: string;
187
241
  };
188
242
  lg: {
189
243
  base: string;
190
244
  div: string;
245
+ active: string;
246
+ nonactive: string;
191
247
  };
192
248
  xl: {
193
249
  base: string;
194
250
  div: string;
251
+ active: string;
252
+ nonactive: string;
195
253
  };
196
254
  "2xl": {
197
255
  base: string;
198
256
  div: string;
257
+ active: string;
258
+ nonactive: string;
199
259
  };
200
260
  };
201
261
  }, {
@@ -219,26 +279,38 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
219
279
  none: {
220
280
  base: string;
221
281
  div: string;
282
+ active: string;
283
+ nonactive: string;
222
284
  };
223
285
  sm: {
224
286
  base: string;
225
287
  div: string;
288
+ active: string;
289
+ nonactive: string;
226
290
  };
227
291
  md: {
228
292
  base: string;
229
293
  div: string;
294
+ active: string;
295
+ nonactive: string;
230
296
  };
231
297
  lg: {
232
298
  base: string;
233
299
  div: string;
300
+ active: string;
301
+ nonactive: string;
234
302
  };
235
303
  xl: {
236
304
  base: string;
237
305
  div: string;
306
+ active: string;
307
+ nonactive: string;
238
308
  };
239
309
  "2xl": {
240
310
  base: string;
241
311
  div: string;
312
+ active: string;
313
+ nonactive: string;
242
314
  };
243
315
  };
244
316
  }, {
@@ -257,26 +329,38 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
257
329
  none: {
258
330
  base: string;
259
331
  div: string;
332
+ active: string;
333
+ nonactive: string;
260
334
  };
261
335
  sm: {
262
336
  base: string;
263
337
  div: string;
338
+ active: string;
339
+ nonactive: string;
264
340
  };
265
341
  md: {
266
342
  base: string;
267
343
  div: string;
344
+ active: string;
345
+ nonactive: string;
268
346
  };
269
347
  lg: {
270
348
  base: string;
271
349
  div: string;
350
+ active: string;
351
+ nonactive: string;
272
352
  };
273
353
  xl: {
274
354
  base: string;
275
355
  div: string;
356
+ active: string;
357
+ nonactive: string;
276
358
  };
277
359
  "2xl": {
278
360
  base: string;
279
361
  div: string;
362
+ active: string;
363
+ nonactive: string;
280
364
  };
281
365
  };
282
366
  }>, unknown, unknown, undefined>>;
package/dist/sidebar/theme.js CHANGED
@@ -2,9 +2,9 @@ import { tv } from "tailwind-variants";
2
2
  export const sidebar = tv({
3
3
  slots: {
4
4
  base: "top-0 left-0 z-10 min-w-full",
5
- div: "overflow-y-auto p-2 rounded-xl bg-light-surface-200 dark:bg-dark-surface-800",
6
- active: "cursor-pointer flex items-center p-2 text-nowrap rounded-lg text-base font-normal text-light-surface-900 dark:text-white bg-light-surface-100 dark:bg-dark-surface-700 hover:bg-light-surface-300/50 dark:hover:bg-dark-surface-600",
7
- nonactive: "cursor-pointer flex items-center p-2 text-nowrap rounded-lg text-base font-normal text-light-surface-700 dark:text-dark-surface-400 hover:bg-light-surface-300/50 dark:hover:bg-dark-surface-600 hover:text-light-surface-800 dark:hover:text-dark-surface-200"
5
+ div: "p-2 rounded-xl bg-light-surface-200 dark:bg-dark-surface-800",
6
+ active: "cursor-pointer flex items-center p-2 rounded-lg text-base font-normal text-light-surface-900 dark:text-white bg-light-surface-100 dark:bg-dark-surface-700 hover:bg-light-surface-300/50 dark:hover:bg-dark-surface-600",
7
+ nonactive: "cursor-pointer flex items-center p-2 rounded-lg text-base font-normal text-light-surface-700 dark:text-dark-surface-400 hover:bg-light-surface-300/50 dark:hover:bg-dark-surface-600 hover:text-light-surface-800 dark:hover:text-dark-surface-200"
8
8
  },
9
9
  variants: {
10
10
  position: {
@@ -13,18 +13,48 @@ export const sidebar = tv({
13
13
  static: { base: "static" }
14
14
  },
15
15
  breakpoint: {
16
- none: { base: "min-w-64 h-full", div: "h-full sm:rounded-none" },
17
- sm: { base: "sm:min-w-64 sm:h-full", div: "sm:h-full sm:rounded-none" },
18
- md: { base: "md:min-w-64 md:h-full", div: "md:h-full md:rounded-none" },
19
- lg: { base: "lg:min-w-64 lg:h-full", div: "lg:h-full lg:rounded-none" },
20
- xl: { base: "xl:min-w-64 xl:h-full", div: "xl:h-full xl:rounded-none" },
21
- "2xl": { base: "2xl:min-w-64 2xl:h-full", div: "2xl:h-full 2xl:rounded-none" }
16
+ none: {
17
+ base: "min-w-64 h-full",
18
+ div: "h-full sm:rounded-none",
19
+ active: "text-nowrap sm:text-wrap",
20
+ nonactive: "text-nowrap sm:text-wrap"
21
+ },
22
+ sm: {
23
+ base: "sm:min-w-64 sm:h-full",
24
+ div: "sm:h-full sm:rounded-none",
25
+ active: "text-nowrap sm:text-wrap",
26
+ nonactive: "text-nowrap sm:text-wrap"
27
+ },
28
+ md: {
29
+ base: "md:min-w-64 md:h-full",
30
+ div: "md:h-full md:rounded-none",
31
+ active: "text-nowrap md:text-wrap",
32
+ nonactive: "text-nowrap md:text-wrap"
33
+ },
34
+ lg: {
35
+ base: "lg:min-w-64 lg:h-full",
36
+ div: "lg:h-full lg:rounded-none",
37
+ active: "text-nowrap lg:text-wrap",
38
+ nonactive: "text-nowrap lg:text-wrap"
39
+ },
40
+ xl: {
41
+ base: "xl:min-w-64 xl:h-full",
42
+ div: "xl:h-full xl:rounded-none",
43
+ active: "text-nowrap xl:text-wrap",
44
+ nonactive: "text-nowrap xl:text-wrap"
45
+ },
46
+ "2xl": {
47
+ base: "2xl:min-w-64 2xl:h-full",
48
+ div: "2xl:h-full 2xl:rounded-none",
49
+ active: "text-nowrap 2xl:text-wrap",
50
+ nonactive: "text-nowrap 2xl:text-wrap"
51
+ }
22
52
  }
23
53
  }
24
54
  });
25
55
  export const sidebargroup = tv({
26
56
  slots: {
27
- base: "flex flex-row gap-2"
57
+ base: "overflow-y-auto flex flex-row gap-2"
28
58
  },
29
59
  variants: {
30
60
  breakpoint: {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "odj-svelte-ui",
3
3
  "author": "orbitadajogatina",
4
- "version": "0.5.0",
4
+ "version": "0.5.2",
5
5
  "description": "This is a fork from Flowbite Svelte 5 with Runes. I just made some changes that fits better my taste.",
6
6
  "license": "MIT",
7
7
  "main": "dist/index.js",