@makolabs/ripple 0.0.1-dev.36 → 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 -64
  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 +3 -2
  6. package/package.json +1 -1
package/dist/elements/accordion/Accordion.svelte CHANGED
@@ -1,93 +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
- id = 'accordion-item',
22
- onexpand = () => {},
23
- oncollapse = () => {}
18
+ icon: Icon
24
19
  }: AccordionProps = $props();
25
20
 
26
21
  const {
27
22
  base,
28
23
  header,
29
- title: titleSlot,
30
- body,
31
- icon: iconSlot,
32
- description: descriptionSlot
33
- } = $derived(
34
- accordion({
35
- color,
36
- open,
37
- bordered,
38
- iconPosition
39
- })
40
- );
24
+ title: titleClass,
25
+ description: descriptionClass,
26
+ body
27
+ } = accordion({ color, open, bordered });
41
28
 
42
- const baseClass = $derived(cn(base(), className));
43
- const headerClasses = $derived(cn(header(), headerClass));
44
- const titleClasses = $derived(cn(titleSlot(), titleClass));
45
- const bodyClasses = $derived(cn(body(), bodyClass));
46
- const iconClasses = $derived(cn(iconSlot()));
47
- const descriptionClasses = $derived(cn(descriptionSlot()));
48
-
49
- function handleToggle() {
29
+ function handleClick() {
50
30
  open = !open;
51
- if (open) {
31
+ if (open && onexpand) {
52
32
  onexpand();
53
- } else {
33
+ } else if (!open && oncollapse) {
54
34
  oncollapse();
55
35
  }
56
36
  }
37
+
38
+ const baseClasses = $derived(twMerge(base(), className));
57
39
  </script>
58
40
 
59
- <div class={baseClass}>
60
- <button class={headerClasses} onclick={handleToggle} aria-expanded={open} aria-controls={`${id}-content`} aria-label={open ? 'Collapse' : 'Expand'} >
61
- <div class="flex flex-1 items-center">
62
- {#if Icon && iconPosition === 'start'}
63
- <div class="mr-3">
64
- <Icon class={iconClasses} />
65
- </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" />
66
51
  {/if}
67
-
68
- <div class="flex-1">
52
+ <div class="flex flex-col">
69
53
  {#if title}
70
- <h3 class={titleClasses}>{title}</h3>
54
+ <h3 class={titleClass()}>{title}</h3>
71
55
  {/if}
72
56
  {#if description}
73
- <p class={descriptionClasses}>{description}</p>
57
+ <p class={descriptionClass()}>{description}</p>
74
58
  {/if}
75
59
  </div>
76
-
77
- {#if Icon && iconPosition === 'end'}
78
- <div class="ml-3">
79
- <Icon class={iconClasses} />
80
- </div>
81
- {/if}
82
60
  </div>
83
-
84
- <div class="ml-3 flex items-center">
61
+ <div class="flex items-center">
62
+ {@render summary?.()}
85
63
  <svg
86
64
  xmlns="http://www.w3.org/2000/svg"
87
65
  width="20"
88
66
  height="20"
89
67
  viewBox="0 0 20 20"
90
- class="text-default-500 transition-transform duration-200"
68
+ class="text-default-500 size-5 transition-transform duration-200"
91
69
  class:rotate-180={open}
92
70
  >
93
71
  <path
@@ -97,14 +75,9 @@
97
75
  </svg>
98
76
  </div>
99
77
  </button>
100
-
101
78
  {#if open}
102
- <div class={bodyClasses}>
103
- {#if custom}
104
- {@render custom()}
105
- {:else if children}
106
- {@render children()}
107
- {/if}
79
+ <div class={body()} {id}>
80
+ {@render children()}
108
81
  </div>
109
82
  {/if}
110
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;
@@ -725,8 +726,8 @@ export type AccordionProps = {
725
726
  id?: string;
726
727
  title?: string;
727
728
  description?: string;
728
- children?: Snippet;
729
- custom?: Snippet;
729
+ children: Snippet;
730
+ summary?: Snippet;
730
731
  open?: boolean;
731
732
  color?: VariantColors;
732
733
  class?: ClassValue;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@makolabs/ripple",
3
- "version": "0.0.1-dev.36",
3
+ "version": "0.0.1-dev.37",
4
4
  "description": "Simple Svelte 5 powered component library ✨",
5
5
  "repository": {
6
6
  "type": "git",