@makolabs/ripple 0.0.1-dev.53 → 0.0.1-dev.54

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 (11) hide show
  1. package/dist/index.d.ts +36 -0
  2. package/dist/index.js +0 -1
  3. package/dist/layout/tabs/Tab.svelte +5 -4
  4. package/dist/layout/tabs/Tab.svelte.d.ts +1 -1
  5. package/dist/layout/tabs/TabContent.svelte +1 -2
  6. package/dist/layout/tabs/TabContent.svelte.d.ts +1 -1
  7. package/dist/layout/tabs/TabGroup.svelte +9 -4
  8. package/dist/layout/tabs/TabGroup.svelte.d.ts +1 -1
  9. package/dist/layout/tabs/tabs.d.ts +61 -76
  10. package/dist/layout/tabs/tabs.js +170 -28
  11. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -331,6 +331,42 @@ export { default as Select } from './elements/dropdown/Select.svelte';
331
331
  export { default as Card } from './layout/card/Card.svelte';
332
332
  export { default as StatsCard } from './layout/card/StatsCard.svelte';
333
333
  export { default as Alert } from './elements/alert/Alert.svelte';
334
+ export type TabItem = {
335
+ value: string;
336
+ label: string;
337
+ icon?: Component;
338
+ disabled?: boolean;
339
+ };
340
+ export type TabProps = {
341
+ value: string;
342
+ label: string;
343
+ icon?: Component;
344
+ selected?: boolean;
345
+ disabled?: boolean;
346
+ color?: VariantColors;
347
+ size?: VariantSizes;
348
+ variant?: 'line' | 'pill';
349
+ onclick?: (event: Event) => void;
350
+ };
351
+ export type TabsGroupProps = {
352
+ tabs: TabItem[];
353
+ selected?: string;
354
+ color?: VariantColors;
355
+ size?: VariantSizes;
356
+ variant?: 'line' | 'pill';
357
+ class?: ClassValue;
358
+ listClass?: ClassValue;
359
+ triggerClass?: ClassValue;
360
+ panelClass?: ClassValue;
361
+ children?: Snippet<[active: string]>;
362
+ onchange?: (value: string) => void;
363
+ };
364
+ export type TabContentProps = {
365
+ value: string;
366
+ persisted?: boolean;
367
+ panelClass?: ClassValue;
368
+ children?: Snippet<[value: string]>;
369
+ };
334
370
  export { default as Tab } from './layout/tabs/Tab.svelte';
335
371
  export { default as TabContent } from './layout/tabs/TabContent.svelte';
336
372
  export { default as TabGroup } from './layout/tabs/TabGroup.svelte';
package/dist/index.js CHANGED
@@ -30,7 +30,6 @@ export { default as Card } from './layout/card/Card.svelte';
30
30
  export { default as StatsCard } from './layout/card/StatsCard.svelte';
31
31
  // Elements - Alert
32
32
  export { default as Alert } from './elements/alert/Alert.svelte';
33
- // Elements - Tabs
34
33
  export { default as Tab } from './layout/tabs/Tab.svelte';
35
34
  export { default as TabContent } from './layout/tabs/TabContent.svelte';
36
35
  export { default as TabGroup } from './layout/tabs/TabGroup.svelte';
package/dist/layout/tabs/Tab.svelte CHANGED
@@ -1,15 +1,16 @@
1
1
  <script lang="ts">
2
2
  import { cn } from '../../helper/cls.js';
3
- import { tabs, type TabProps } from './tabs.js';
4
-
3
+ import { tabs } from './tabs.js';
4
+ import type { VariantColors, VariantSizes } from '../../index.js';
5
+ import type { TabProps } from '../../index.js';
5
6
  let {
6
7
  value = '',
7
8
  label = '',
8
9
  icon: Icon = undefined,
9
10
  selected = false,
10
11
  disabled = false,
11
- color = 'primary',
12
- size = 'base',
12
+ color = 'primary' as VariantColors,
13
+ size = 'base' as VariantSizes,
13
14
  onclick = () => {}
14
15
  }: TabProps = $props();
15
16
 
package/dist/layout/tabs/Tab.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { type TabProps } from './tabs.js';
1
+ import type { TabProps } from '../../index.js';
2
2
  declare const Tab: import("svelte").Component<TabProps, {}, "">;
3
3
  type Tab = ReturnType<typeof Tab>;
4
4
  export default Tab;
package/dist/layout/tabs/TabContent.svelte CHANGED
@@ -1,9 +1,8 @@
1
1
  <script lang="ts">
2
2
  import { cn } from '../../helper/cls.js';
3
- import type { TabContentProps } from './tabs.js';
4
3
  import { getContext } from 'svelte';
5
4
  import type { HTMLAttributes } from 'svelte/elements';
6
-
5
+ import type { TabContentProps } from '../../index.js';
7
6
  let { value = '', persisted = false, panelClass = '', children }: TabContentProps = $props();
8
7
 
9
8
  const getSelected = getContext('getSelected') as () => string;
package/dist/layout/tabs/TabContent.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { TabContentProps } from './tabs.js';
1
+ import type { TabContentProps } from '../../index.js';
2
2
  declare const TabContent: import("svelte").Component<TabContentProps, {}, "">;
3
3
  type TabContent = ReturnType<typeof TabContent>;
4
4
  export default TabContent;
package/dist/layout/tabs/TabGroup.svelte CHANGED
@@ -1,14 +1,17 @@
1
1
  <script lang="ts">
2
2
  import { cn } from '../../helper/cls.js';
3
3
  import Tab from './Tab.svelte';
4
- import { tabs, type TabsGroupProps } from './tabs.js';
4
+ import { tabs } from './tabs.js';
5
+ import type { TabsGroupProps } from '../../index.js';
5
6
  import { setContext } from 'svelte';
7
+ import type { VariantColors, VariantSizes } from '../../index.js';
6
8
 
7
9
  let {
8
10
  tabs: tabItems = [],
9
11
  selected = $bindable(''),
10
- color = 'primary',
11
- size = 'base',
12
+ color = 'primary' as VariantColors,
13
+ size = 'base' as VariantSizes,
14
+ variant = 'line',
12
15
  class: className = '',
13
16
  listClass = '',
14
17
  panelClass = '',
@@ -19,7 +22,8 @@
19
22
  const { base, list, panel } = $derived(
20
23
  tabs({
21
24
  color,
22
- size
25
+ size,
26
+ variant
23
27
  })
24
28
  );
25
29
 
@@ -46,6 +50,7 @@
46
50
  disabled={tab.disabled}
47
51
  {color}
48
52
  {size}
53
+ {variant}
49
54
  onclick={() => handleTabClick(tab.value)}
50
55
  />
51
56
  {/each}
package/dist/layout/tabs/TabGroup.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { type TabsGroupProps } from './tabs.js';
1
+ import type { TabsGroupProps } from '../../index.js';
2
2
  declare const TabGroup: import("svelte").Component<TabsGroupProps, {}, "selected">;
3
3
  type TabGroup = ReturnType<typeof TabGroup>;
4
4
  export default TabGroup;
package/dist/layout/tabs/tabs.d.ts CHANGED
@@ -1,67 +1,38 @@
1
- import type { ClassValue } from 'tailwind-variants';
2
- import type { Component, Snippet } from 'svelte';
3
- import type { VariantColors, VariantSizes } from '../../index.js';
4
- export type TabItem = {
5
- value: string;
6
- label: string;
7
- icon?: Component;
8
- disabled?: boolean;
9
- };
10
- export type TabProps = {
11
- value: string;
12
- label: string;
13
- icon?: Component;
14
- selected?: boolean;
15
- disabled?: boolean;
16
- color?: VariantColors;
17
- size?: VariantSizes;
18
- onclick?: (event: Event) => void;
19
- };
20
- export type TabsGroupProps = {
21
- tabs: TabItem[];
22
- selected?: string;
23
- color?: VariantColors;
24
- size?: VariantSizes;
25
- class?: ClassValue;
26
- listClass?: ClassValue;
27
- triggerClass?: ClassValue;
28
- panelClass?: ClassValue;
29
- children?: Snippet<[active: string]>;
30
- onchange?: (value: string) => void;
31
- };
32
- export type TabContentProps = {
33
- value: string;
34
- persisted?: boolean;
35
- panelClass?: ClassValue;
36
- children?: Snippet<[value: string]>;
37
- };
1
+ import { Color, Size } from '../../index.js';
38
2
  export declare const tabs: import("tailwind-variants").TVReturnType<{
39
3
  color: {
40
- primary: {};
41
- secondary: {};
42
- success: {};
43
- warning: {};
44
- danger: {};
45
- info: {};
46
- default: {};
4
+ [Color.PRIMARY]: {};
5
+ [Color.SECONDARY]: {};
6
+ [Color.SUCCESS]: {};
7
+ [Color.WARNING]: {};
8
+ [Color.DANGER]: {};
9
+ [Color.INFO]: {};
10
+ [Color.DEFAULT]: {};
47
11
  };
48
12
  size: {
49
- xs: {
13
+ [Size.XS]: {
50
14
  trigger: string;
51
15
  };
52
- sm: {
16
+ [Size.SM]: {
53
17
  trigger: string;
54
18
  };
55
- base: {
19
+ [Size.BASE]: {
56
20
  trigger: string;
57
21
  };
58
- lg: {
22
+ [Size.LG]: {
59
23
  trigger: string;
60
24
  };
61
- xl: {
25
+ [Size.XL]: {
62
26
  trigger: string;
63
27
  };
64
- '2xl': {
28
+ [Size.XXL]: {
29
+ trigger: string;
30
+ };
31
+ };
32
+ variant: {
33
+ line: {};
34
+ pill: {
35
+ list: string;
65
36
  trigger: string;
66
37
  };
67
38
  };
@@ -76,31 +47,38 @@ export declare const tabs: import("tailwind-variants").TVReturnType<{
76
47
  panel: string;
77
48
  }, undefined, {
78
49
  color: {
79
- primary: {};
80
- secondary: {};
81
- success: {};
82
- warning: {};
83
- danger: {};
84
- info: {};
85
- default: {};
50
+ [Color.PRIMARY]: {};
51
+ [Color.SECONDARY]: {};
52
+ [Color.SUCCESS]: {};
53
+ [Color.WARNING]: {};
54
+ [Color.DANGER]: {};
55
+ [Color.INFO]: {};
56
+ [Color.DEFAULT]: {};
86
57
  };
87
58
  size: {
88
- xs: {
59
+ [Size.XS]: {
89
60
  trigger: string;
90
61
  };
91
- sm: {
62
+ [Size.SM]: {
92
63
  trigger: string;
93
64
  };
94
- base: {
65
+ [Size.BASE]: {
95
66
  trigger: string;
96
67
  };
97
- lg: {
68
+ [Size.LG]: {
98
69
  trigger: string;
99
70
  };
100
- xl: {
71
+ [Size.XL]: {
101
72
  trigger: string;
102
73
  };
103
- '2xl': {
74
+ [Size.XXL]: {
75
+ trigger: string;
76
+ };
77
+ };
78
+ variant: {
79
+ line: {};
80
+ pill: {
81
+ list: string;
104
82
  trigger: string;
105
83
  };
106
84
  };
@@ -115,31 +93,38 @@ export declare const tabs: import("tailwind-variants").TVReturnType<{
115
93
  panel: string;
116
94
  }, import("tailwind-variants").TVReturnType<{
117
95
  color: {
118
- primary: {};
119
- secondary: {};
120
- success: {};
121
- warning: {};
122
- danger: {};
123
- info: {};
124
- default: {};
96
+ [Color.PRIMARY]: {};
97
+ [Color.SECONDARY]: {};
98
+ [Color.SUCCESS]: {};
99
+ [Color.WARNING]: {};
100
+ [Color.DANGER]: {};
101
+ [Color.INFO]: {};
102
+ [Color.DEFAULT]: {};
125
103
  };
126
104
  size: {
127
- xs: {
105
+ [Size.XS]: {
106
+ trigger: string;
107
+ };
108
+ [Size.SM]: {
128
109
  trigger: string;
129
110
  };
130
- sm: {
111
+ [Size.BASE]: {
131
112
  trigger: string;
132
113
  };
133
- base: {
114
+ [Size.LG]: {
134
115
  trigger: string;
135
116
  };
136
- lg: {
117
+ [Size.XL]: {
137
118
  trigger: string;
138
119
  };
139
- xl: {
120
+ [Size.XXL]: {
140
121
  trigger: string;
141
122
  };
142
- '2xl': {
123
+ };
124
+ variant: {
125
+ line: {};
126
+ pill: {
127
+ list: string;
143
128
  trigger: string;
144
129
  };
145
130
  };
package/dist/layout/tabs/tabs.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { tv } from 'tailwind-variants';
2
+ import { Color, Size } from '../../index.js';
2
3
  export const tabs = tv({
3
4
  slots: {
4
5
  base: 'w-full',
@@ -8,34 +9,41 @@ export const tabs = tv({
8
9
  },
9
10
  variants: {
10
11
  color: {
11
- primary: {},
12
- secondary: {},
13
- success: {},
14
- warning: {},
15
- danger: {},
16
- info: {},
17
- default: {}
12
+ [Color.PRIMARY]: {},
13
+ [Color.SECONDARY]: {},
14
+ [Color.SUCCESS]: {},
15
+ [Color.WARNING]: {},
16
+ [Color.DANGER]: {},
17
+ [Color.INFO]: {},
18
+ [Color.DEFAULT]: {}
18
19
  },
19
20
  size: {
20
- xs: {
21
+ [Size.XS]: {
21
22
  trigger: 'px-2 py-1 text-xs'
22
23
  },
23
- sm: {
24
+ [Size.SM]: {
24
25
  trigger: 'px-2 py-1 text-xs'
25
26
  },
26
- base: {
27
+ [Size.BASE]: {
27
28
  trigger: 'px-3 py-2 text-sm'
28
29
  },
29
- lg: {
30
+ [Size.LG]: {
30
31
  trigger: 'px-4 py-2.5 text-base'
31
32
  },
32
- xl: {
33
+ [Size.XL]: {
33
34
  trigger: 'px-5 py-3 text-lg'
34
35
  },
35
- '2xl': {
36
+ [Size.XXL]: {
36
37
  trigger: 'px-6 py-4 text-xl'
37
38
  }
38
39
  },
40
+ variant: {
41
+ line: {},
42
+ pill: {
43
+ list: 'flex border-none gap-2 p-1',
44
+ trigger: 'inline-flex items-center px-3 py-2 text-sm transition-all duration-200 ease-in-out cursor-pointer rounded-full border-0'
45
+ }
46
+ },
39
47
  selected: {
40
48
  true: {},
41
49
  false: {}
@@ -44,14 +52,16 @@ export const tabs = tv({
44
52
  compoundVariants: [
45
53
  // LINE VARIANT - PRIMARY
46
54
  {
47
- color: 'primary',
55
+ variant: 'line',
56
+ color: Color.PRIMARY,
48
57
  selected: true,
49
58
  class: {
50
59
  trigger: 'text-primary-600 border-b-2 border-primary-500'
51
60
  }
52
61
  },
53
62
  {
54
- color: 'primary',
63
+ variant: 'line',
64
+ color: Color.PRIMARY,
55
65
  selected: false,
56
66
  class: {
57
67
  trigger: 'text-default-500 hover:text-primary-500'
@@ -59,14 +69,16 @@ export const tabs = tv({
59
69
  },
60
70
  // LINE VARIANT - SECONDARY
61
71
  {
62
- color: 'secondary',
72
+ variant: 'line',
73
+ color: Color.SECONDARY,
63
74
  selected: true,
64
75
  class: {
65
76
  trigger: 'text-secondary-600 border-b-2 border-secondary-500'
66
77
  }
67
78
  },
68
79
  {
69
- color: 'secondary',
80
+ variant: 'line',
81
+ color: Color.SECONDARY,
70
82
  selected: false,
71
83
  class: {
72
84
  trigger: 'text-default-500 hover:text-secondary-500'
@@ -74,14 +86,16 @@ export const tabs = tv({
74
86
  },
75
87
  // LINE VARIANT - SUCCESS
76
88
  {
77
- color: 'success',
89
+ variant: 'line',
90
+ color: Color.SUCCESS,
78
91
  selected: true,
79
92
  class: {
80
93
  trigger: 'text-success-600 border-b-2 border-success-500'
81
94
  }
82
95
  },
83
96
  {
84
- color: 'success',
97
+ variant: 'line',
98
+ color: Color.SUCCESS,
85
99
  selected: false,
86
100
  class: {
87
101
  trigger: 'text-default-500 hover:text-success-500'
@@ -89,14 +103,16 @@ export const tabs = tv({
89
103
  },
90
104
  // LINE VARIANT - WARNING
91
105
  {
92
- color: 'warning',
106
+ variant: 'line',
107
+ color: Color.WARNING,
93
108
  selected: true,
94
109
  class: {
95
110
  trigger: 'text-warning-600 border-b-2 border-warning-500'
96
111
  }
97
112
  },
98
113
  {
99
- color: 'warning',
114
+ variant: 'line',
115
+ color: Color.WARNING,
100
116
  selected: false,
101
117
  class: {
102
118
  trigger: 'text-default-500 hover:text-warning-500'
@@ -104,14 +120,16 @@ export const tabs = tv({
104
120
  },
105
121
  // LINE VARIANT - DANGER
106
122
  {
107
- color: 'danger',
123
+ variant: 'line',
124
+ color: Color.DANGER,
108
125
  selected: true,
109
126
  class: {
110
127
  trigger: 'text-danger-600 border-b-2 border-danger-500'
111
128
  }
112
129
  },
113
130
  {
114
- color: 'danger',
131
+ variant: 'line',
132
+ color: Color.DANGER,
115
133
  selected: false,
116
134
  class: {
117
135
  trigger: 'text-default-500 hover:text-danger-500'
@@ -119,14 +137,16 @@ export const tabs = tv({
119
137
  },
120
138
  // LINE VARIANT - INFO
121
139
  {
122
- color: 'info',
140
+ variant: 'line',
141
+ color: Color.INFO,
123
142
  selected: true,
124
143
  class: {
125
144
  trigger: 'text-info-600 border-b-2 border-info-500'
126
145
  }
127
146
  },
128
147
  {
129
- color: 'info',
148
+ variant: 'line',
149
+ color: Color.INFO,
130
150
  selected: false,
131
151
  class: {
132
152
  trigger: 'text-default-500 hover:text-info-500'
@@ -134,23 +154,145 @@ export const tabs = tv({
134
154
  },
135
155
  // LINE VARIANT - DEFAULT
136
156
  {
137
- color: 'default',
157
+ variant: 'line',
158
+ color: Color.DEFAULT,
138
159
  selected: true,
139
160
  class: {
140
161
  trigger: 'text-default-600 border-b-2 border-default-500'
141
162
  }
142
163
  },
143
164
  {
144
- color: 'default',
165
+ variant: 'line',
166
+ color: Color.DEFAULT,
145
167
  selected: false,
146
168
  class: {
147
169
  trigger: 'text-default-500 hover:text-default-700'
148
170
  }
171
+ },
172
+ // PILL VARIANT - PRIMARY
173
+ {
174
+ variant: 'pill',
175
+ color: Color.PRIMARY,
176
+ selected: true,
177
+ class: {
178
+ trigger: 'bg-primary-500 text-white'
179
+ }
180
+ },
181
+ {
182
+ variant: 'pill',
183
+ color: Color.PRIMARY,
184
+ selected: false,
185
+ class: {
186
+ trigger: 'text-default-600 hover:bg-default-100'
187
+ }
188
+ },
189
+ // PILL VARIANT - SECONDARY
190
+ {
191
+ variant: 'pill',
192
+ color: Color.SECONDARY,
193
+ selected: true,
194
+ class: {
195
+ trigger: 'bg-secondary-500 text-white'
196
+ }
197
+ },
198
+ {
199
+ variant: 'pill',
200
+ color: Color.SECONDARY,
201
+ selected: false,
202
+ class: {
203
+ trigger: 'text-default-600 hover:bg-default-100'
204
+ }
205
+ },
206
+ // PILL VARIANT - SUCCESS
207
+ {
208
+ variant: 'pill',
209
+ color: Color.SUCCESS,
210
+ selected: true,
211
+ class: {
212
+ trigger: 'bg-success-500 text-white'
213
+ }
214
+ },
215
+ {
216
+ variant: 'pill',
217
+ color: Color.SUCCESS,
218
+ selected: false,
219
+ class: {
220
+ trigger: 'text-default-600 hover:bg-default-100'
221
+ }
222
+ },
223
+ // PILL VARIANT - WARNING
224
+ {
225
+ variant: 'pill',
226
+ color: Color.WARNING,
227
+ selected: true,
228
+ class: {
229
+ trigger: 'bg-warning-500 text-white'
230
+ }
231
+ },
232
+ {
233
+ variant: 'pill',
234
+ color: Color.WARNING,
235
+ selected: false,
236
+ class: {
237
+ trigger: 'text-default-600 hover:bg-default-100'
238
+ }
239
+ },
240
+ // PILL VARIANT - DANGER
241
+ {
242
+ variant: 'pill',
243
+ color: Color.DANGER,
244
+ selected: true,
245
+ class: {
246
+ trigger: 'bg-danger-500 text-white'
247
+ }
248
+ },
249
+ {
250
+ variant: 'pill',
251
+ color: Color.DANGER,
252
+ selected: false,
253
+ class: {
254
+ trigger: 'text-default-600 hover:bg-default-100'
255
+ }
256
+ },
257
+ // PILL VARIANT - INFO
258
+ {
259
+ variant: 'pill',
260
+ color: Color.INFO,
261
+ selected: true,
262
+ class: {
263
+ trigger: 'bg-info-500 text-white'
264
+ }
265
+ },
266
+ {
267
+ variant: 'pill',
268
+ color: Color.INFO,
269
+ selected: false,
270
+ class: {
271
+ trigger: 'text-default-600 hover:bg-default-100'
272
+ }
273
+ },
274
+ // PILL VARIANT - DEFAULT
275
+ {
276
+ variant: 'pill',
277
+ color: Color.DEFAULT,
278
+ selected: true,
279
+ class: {
280
+ trigger: 'bg-default-500 text-white'
281
+ }
282
+ },
283
+ {
284
+ variant: 'pill',
285
+ color: Color.DEFAULT,
286
+ selected: false,
287
+ class: {
288
+ trigger: 'text-default-600 hover:bg-default-100'
289
+ }
149
290
  }
150
291
  ],
151
292
  defaultVariants: {
152
- color: 'primary',
293
+ color: Color.PRIMARY,
153
294
  size: 'base',
295
+ variant: 'line',
154
296
  selected: false
155
297
  }
156
298
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@makolabs/ripple",
3
- "version": "0.0.1-dev.53",
3
+ "version": "0.0.1-dev.54",
4
4
  "description": "Simple Svelte 5 powered component library ✨",
5
5
  "repository": {
6
6
  "type": "git",