@makolabs/ripple 0.0.1-dev.35 → 0.0.1-dev.37

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 (6) hide show
  1. package/dist/elements/accordion/Accordion.svelte +37 -63
  2. package/dist/elements/accordion/Accordion.svelte.d.ts +1 -1
  3. package/dist/elements/accordion/accordion.d.ts +5 -5
  4. package/dist/elements/accordion/accordion.js +83 -85
  5. package/dist/index.d.ts +4 -2
  6. package/package.json +1 -1
package/dist/elements/accordion/Accordion.svelte CHANGED
@@ -1,92 +1,71 @@
1
1
  <script lang="ts">
2
- import { cn } from '../../helper/cls.js';
2
+ import { twMerge } from 'tailwind-merge';
3
3
  import { accordion } from './accordion.js';
4
4
  import type { AccordionProps } from '../../index.js';
5
- import { Color } from '../../variants.js';
6
5
 
7
6
  let {
8
7
  title,
9
8
  description,
9
+ id,
10
+ bordered,
11
+ color,
12
+ open,
13
+ onexpand,
14
+ oncollapse,
15
+ class: className,
16
+ summary,
10
17
  children,
11
- custom,
12
- open = $bindable(false),
13
- color = Color.DEFAULT,
14
- class: className = '',
15
- titleclass: titleClass = '',
16
- bodyclass: bodyClass = '',
17
- headerclass: headerClass = '',
18
- icon: Icon = undefined,
19
- iconPosition = 'start',
20
- bordered = true,
21
- onexpand = () => {},
22
- oncollapse = () => {}
18
+ icon: Icon
23
19
  }: AccordionProps = $props();
24
20
 
25
21
  const {
26
22
  base,
27
23
  header,
28
- title: titleSlot,
29
- body,
30
- icon: iconSlot,
31
- description: descriptionSlot
32
- } = $derived(
33
- accordion({
34
- color,
35
- open,
36
- bordered,
37
- iconPosition
38
- })
39
- );
24
+ title: titleClass,
25
+ description: descriptionClass,
26
+ body
27
+ } = accordion({ color, open, bordered });
40
28
 
41
- const baseClass = $derived(cn(base(), className));
42
- const headerClasses = $derived(cn(header(), headerClass));
43
- const titleClasses = $derived(cn(titleSlot(), titleClass));
44
- const bodyClasses = $derived(cn(body(), bodyClass));
45
- const iconClasses = $derived(cn(iconSlot()));
46
- const descriptionClasses = $derived(cn(descriptionSlot()));
47
-
48
- function handleToggle() {
29
+ function handleClick() {
49
30
  open = !open;
50
- if (open) {
31
+ if (open && onexpand) {
51
32
  onexpand();
52
- } else {
33
+ } else if (!open && oncollapse) {
53
34
  oncollapse();
54
35
  }
55
36
  }
37
+
38
+ const baseClasses = $derived(twMerge(base(), className));
56
39
  </script>
57
40
 
58
- <div class={baseClass}>
59
- <button class={headerClasses} onclick={handleToggle} aria-expanded={open} aria-controls={`${id}-content`} aria-label={open ? 'Collapse' : 'Expand'} >
60
- <div class="flex flex-1 items-center">
61
- {#if Icon && iconPosition === 'start'}
62
- <div class="mr-3">
63
- <Icon class={iconClasses} />
64
- </div>
41
+ <div class={baseClasses}>
42
+ <button
43
+ class={twMerge(header(), 'flex gap-3')}
44
+ aria-expanded={open}
45
+ aria-controls={id}
46
+ onclick={handleClick}
47
+ >
48
+ <div class="flex items-start justify-start gap-3">
49
+ {#if Icon}
50
+ <Icon class="text-default-500 size-5" />
65
51
  {/if}
66
-
67
- <div class="flex-1">
52
+ <div class="flex flex-col">
68
53
  {#if title}
69
- <h3 class={titleClasses}>{title}</h3>
54
+ <h3 class={titleClass()}>{title}</h3>
70
55
  {/if}
71
56
  {#if description}
72
- <p class={descriptionClasses}>{description}</p>
57
+ <p class={descriptionClass()}>{description}</p>
73
58
  {/if}
74
59
  </div>
75
-
76
- {#if Icon && iconPosition === 'end'}
77
- <div class="ml-3">
78
- <Icon class={iconClasses} />
79
- </div>
80
- {/if}
81
60
  </div>
82
-
83
- <div class="ml-3 flex items-center">
61
+ <div class="flex items-center">
62
+ {@render summary?.()}
84
63
  <svg
85
64
  xmlns="http://www.w3.org/2000/svg"
86
65
  width="20"
87
66
  height="20"
88
67
  viewBox="0 0 20 20"
89
- class="text-default-500 transition-transform duration-200"
68
+ class="text-default-500 size-5 transition-transform duration-200"
90
69
  class:rotate-180={open}
91
70
  >
92
71
  <path
@@ -96,14 +75,9 @@
96
75
  </svg>
97
76
  </div>
98
77
  </button>
99
-
100
78
  {#if open}
101
- <div class={bodyClasses}>
102
- {#if custom}
103
- {@render custom()}
104
- {:else if children}
105
- {@render children()}
106
- {/if}
79
+ <div class={body()} {id}>
80
+ {@render children()}
107
81
  </div>
108
82
  {/if}
109
83
  </div>
package/dist/elements/accordion/Accordion.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import type { AccordionProps } from '../../index.js';
2
- declare const Accordion: import("svelte").Component<AccordionProps, {}, "open">;
2
+ declare const Accordion: import("svelte").Component<AccordionProps, {}, "">;
3
3
  type Accordion = ReturnType<typeof Accordion>;
4
4
  export default Accordion;
package/dist/elements/accordion/accordion.d.ts CHANGED
@@ -1,7 +1,9 @@
1
- export const accordion: import("tailwind-variants").TVReturnType<{
1
+ import { Color } from '../../variants.js';
2
+ export declare const accordion: import("tailwind-variants").TVReturnType<{
2
3
  color: {
3
4
  [Color.DEFAULT]: {
4
5
  base: string;
6
+ header: string;
5
7
  body: string;
6
8
  };
7
9
  [Color.PRIMARY]: {
@@ -63,11 +65,11 @@ export const accordion: import("tailwind-variants").TVReturnType<{
63
65
  title: string;
64
66
  description: string;
65
67
  body: string;
66
- icon: string;
67
68
  }, undefined, {
68
69
  color: {
69
70
  [Color.DEFAULT]: {
70
71
  base: string;
72
+ header: string;
71
73
  body: string;
72
74
  };
73
75
  [Color.PRIMARY]: {
@@ -129,11 +131,11 @@ export const accordion: import("tailwind-variants").TVReturnType<{
129
131
  title: string;
130
132
  description: string;
131
133
  body: string;
132
- icon: string;
133
134
  }, import("tailwind-variants").TVReturnType<{
134
135
  color: {
135
136
  [Color.DEFAULT]: {
136
137
  base: string;
138
+ header: string;
137
139
  body: string;
138
140
  };
139
141
  [Color.PRIMARY]: {
@@ -195,6 +197,4 @@ export const accordion: import("tailwind-variants").TVReturnType<{
195
197
  title: string;
196
198
  description: string;
197
199
  body: string;
198
- icon: string;
199
200
  }, undefined, unknown, unknown, undefined>>;
200
- import { Color } from '../../variants.js';
package/dist/elements/accordion/accordion.js CHANGED
@@ -1,88 +1,86 @@
1
1
  import { tv } from '../../helper/cls.js';
2
2
  import { Color } from '../../variants.js';
3
-
4
3
  export const accordion = tv({
5
- slots: {
6
- base: 'relative overflow-hidden rounded-lg',
7
- header: 'flex cursor-pointer items-center justify-between border-default-200 p-4',
8
- title: 'text-default-900 text-base font-medium',
9
- description: 'text-default-500 text-sm',
10
- body: 'border-default-200 p-4 pt-0',
11
- icon: 'size-5'
12
- },
13
- variants: {
14
- color: {
15
- [Color.DEFAULT]: {
16
- base: 'bg-white',
17
- body: ''
18
- },
19
- [Color.PRIMARY]: {
20
- base: 'bg-primary-50',
21
- header: 'text-primary-700',
22
- title: 'text-primary-700'
23
- },
24
- [Color.SECONDARY]: {
25
- base: 'bg-secondary-50',
26
- header: 'text-secondary-700',
27
- title: 'text-secondary-700'
28
- },
29
- [Color.SUCCESS]: {
30
- base: 'bg-success-50',
31
- header: 'text-success-700',
32
- title: 'text-success-700'
33
- },
34
- [Color.WARNING]: {
35
- base: 'bg-warning-50',
36
- header: 'text-warning-700',
37
- title: 'text-warning-700'
38
- },
39
- [Color.DANGER]: {
40
- base: 'bg-danger-50',
41
- header: 'text-danger-700',
42
- title: 'text-danger-700'
43
- },
44
- [Color.INFO]: {
45
- base: 'bg-info-50',
46
- header: 'text-info-700',
47
- title: 'text-info-700'
48
- }
49
- },
50
- open: {
51
- true: {
52
- base: 'ring-1 ring-default-200',
53
- title: 'text-default-900'
54
- },
55
- false: {
56
- base: ''
57
- }
58
- },
59
- bordered: {
60
- true: {
61
- base: 'border border-default-200 ring-1 ring-default-200/50',
62
- body: 'border-t'
63
- },
64
- false: {
65
- base: 'shadow-sm'
66
- }
67
- },
68
- iconPosition: {
69
- start: {},
70
- end: {}
71
- }
72
- },
73
- compoundVariants: [
74
- {
75
- open: true,
76
- bordered: true,
77
- class: {
78
- base: 'shadow-sm'
79
- }
80
- }
81
- ],
82
- defaultVariants: {
83
- color: Color.DEFAULT,
84
- open: false,
85
- bordered: true,
86
- iconPosition: 'start'
87
- }
88
- });
4
+ slots: {
5
+ base: 'w-full relative overflow-hidden rounded-xl transition-all duration-200 hover:shadow-md bg-white border border-default-200',
6
+ header: 'w-full flex cursor-pointer items-center justify-between p-4 transition-colors duration-200 hover:bg-default-50',
7
+ title: 'flex text-default-900 text-sm font-medium leading-tight',
8
+ description: 'text-default-500 text-xs',
9
+ body: 'w-full border-t border-default-200 p-4 pt-3 transition-all',
10
+ },
11
+ variants: {
12
+ color: {
13
+ [Color.DEFAULT]: {
14
+ base: 'bg-white hover:border-default-300',
15
+ header: 'hover:bg-default-50',
16
+ body: ''
17
+ },
18
+ [Color.PRIMARY]: {
19
+ base: 'bg-primary-50/50 hover:border-primary-300',
20
+ header: 'text-primary-700 hover:bg-primary-50',
21
+ title: 'text-primary-700'
22
+ },
23
+ [Color.SECONDARY]: {
24
+ base: 'bg-secondary-50/50 hover:border-secondary-300',
25
+ header: 'text-secondary-700 hover:bg-secondary-50',
26
+ title: 'text-secondary-700'
27
+ },
28
+ [Color.SUCCESS]: {
29
+ base: 'bg-success-50/50 hover:border-success-300',
30
+ header: 'text-success-700 hover:bg-success-50',
31
+ title: 'text-success-700'
32
+ },
33
+ [Color.WARNING]: {
34
+ base: 'bg-warning-50/50 hover:border-warning-300',
35
+ header: 'text-warning-700 hover:bg-warning-50',
36
+ title: 'text-warning-700'
37
+ },
38
+ [Color.DANGER]: {
39
+ base: 'bg-danger-50/50 hover:border-danger-300',
40
+ header: 'text-danger-700 hover:bg-danger-50',
41
+ title: 'text-danger-700'
42
+ },
43
+ [Color.INFO]: {
44
+ base: 'bg-info-50/50 hover:border-info-300',
45
+ header: 'text-info-700 hover:bg-info-50',
46
+ title: 'text-info-700'
47
+ }
48
+ },
49
+ open: {
50
+ true: {
51
+ base: 'shadow-sm',
52
+ title: 'text-default-900'
53
+ },
54
+ false: {
55
+ base: ''
56
+ }
57
+ },
58
+ bordered: {
59
+ true: {
60
+ base: 'border border-default-200',
61
+ body: 'border-t'
62
+ },
63
+ false: {
64
+ base: 'shadow-sm'
65
+ }
66
+ },
67
+ iconPosition: {
68
+ start: {},
69
+ end: {}
70
+ }
71
+ },
72
+ compoundVariants: [
73
+ {
74
+ open: true,
75
+ class: {
76
+ header: 'border-b-0'
77
+ }
78
+ }
79
+ ],
80
+ defaultVariants: {
81
+ color: Color.DEFAULT,
82
+ open: false,
83
+ bordered: true,
84
+ iconPosition: 'start'
85
+ }
86
+ });
package/dist/index.d.ts CHANGED
@@ -163,6 +163,7 @@ export type AlertProps = {
163
163
  class?: string;
164
164
  onclose?: () => void;
165
165
  footer?: Snippet;
166
+ icon?: Component;
166
167
  };
167
168
  export type StatsCardProps = {
168
169
  label?: string;
@@ -722,10 +723,11 @@ export type ProgressProps = {
722
723
  };
723
724
  export { default as Progress } from './elements/progress/Progress.svelte';
724
725
  export type AccordionProps = {
726
+ id?: string;
725
727
  title?: string;
726
728
  description?: string;
727
- children?: Snippet;
728
- custom?: Snippet;
729
+ children: Snippet;
730
+ summary?: Snippet;
729
731
  open?: boolean;
730
732
  color?: VariantColors;
731
733
  class?: ClassValue;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@makolabs/ripple",
3
- "version": "0.0.1-dev.35",
3
+ "version": "0.0.1-dev.37",
4
4
  "description": "Simple Svelte 5 powered component library ✨",
5
5
  "repository": {
6
6
  "type": "git",