npm - @makolabs/ripple - Versions diffs - 0.0.1-dev.32 → 0.0.1-dev.35 - Mend

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

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 (8) hide show

package/dist/charts/Chart.svelte +2 -0
package/dist/elements/accordion/Accordion.svelte +109 -0
package/dist/elements/accordion/Accordion.svelte.d.ts +4 -0
package/dist/elements/accordion/accordion.d.ts +200 -0
package/dist/elements/accordion/accordion.js +88 -0
package/dist/index.d.ts +19 -1
package/dist/index.js +1 -0
package/package.json +1 -1

package/dist/charts/Chart.svelte CHANGED Viewed

@@ -126,6 +126,8 @@
 	function getAreaStyle(seriesConfig: SeriesConfig<any>) {
 		if (!seriesConfig.color) return undefined;
+		if (!seriesConfig.showArea) return undefined;
 		const baseLinearAreaStyle = {
 			type: 'linear',
 			x: 0,

package/dist/elements/accordion/Accordion.svelte ADDED Viewed

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { accordion } from './accordion.js';
+	import type { AccordionProps } from '../../index.js';
+	import { Color } from '../../variants.js';
+	let {
+		title,
+		description,
+		children,
+		custom,
+		open = $bindable(false),
+		color = Color.DEFAULT,
+		class: className = '',
+		titleclass: titleClass = '',
+		bodyclass: bodyClass = '',
+		headerclass: headerClass = '',
+		icon: Icon = undefined,
+		iconPosition = 'start',
+		bordered = true,
+		onexpand = () => {},
+		oncollapse = () => {}
+	}: AccordionProps = $props();
+	const {
+		base,
+		header,
+		title: titleSlot,
+		body,
+		icon: iconSlot,
+		description: descriptionSlot
+	} = $derived(
+		accordion({
+			color,
+			open,
+			bordered,
+			iconPosition
+		})
+	);
+	const baseClass = $derived(cn(base(), className));
+	const headerClasses = $derived(cn(header(), headerClass));
+	const titleClasses = $derived(cn(titleSlot(), titleClass));
+	const bodyClasses = $derived(cn(body(), bodyClass));
+	const iconClasses = $derived(cn(iconSlot()));
+	const descriptionClasses = $derived(cn(descriptionSlot()));
+	function handleToggle() {
+		open = !open;
+		if (open) {
+			onexpand();
+		} else {
+			oncollapse();
+		}
+	}
+</script>
+<div class={baseClass}>
+	<button class={headerClasses} onclick={handleToggle} aria-expanded={open} aria-controls={`${id}-content`} aria-label={open ? 'Collapse' : 'Expand'}	>
+		<div class="flex flex-1 items-center">
+			{#if Icon && iconPosition === 'start'}
+				<div class="mr-3">
+					<Icon class={iconClasses} />
+				</div>
+			{/if}
+			<div class="flex-1">
+				{#if title}
+					<h3 class={titleClasses}>{title}</h3>
+				{/if}
+				{#if description}
+					<p class={descriptionClasses}>{description}</p>
+				{/if}
+			</div>
+			{#if Icon && iconPosition === 'end'}
+				<div class="ml-3">
+					<Icon class={iconClasses} />
+				</div>
+			{/if}
+		</div>
+		<div class="ml-3 flex items-center">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="20"
+				height="20"
+				viewBox="0 0 20 20"
+				class="text-default-500 transition-transform duration-200"
+				class:rotate-180={open}
+			>
+				<path
+					fill="currentColor"
+					d="M15.794 7.733a.75.75 0 0 1-.026 1.06l-5.25 5.001a.75.75 0 0 1-1.035 0l-5.25-5a.75.75 0 0 1 1.034-1.087l4.734 4.509l4.733-4.51a.75.75 0 0 1 1.06.027"
+				/>
+			</svg>
+		</div>
+	</button>
+	{#if open}
+		<div class={bodyClasses}>
+			{#if custom}
+				{@render custom()}
+			{:else if children}
+				{@render children()}
+			{/if}
+		</div>
+	{/if}
+</div>

package/dist/elements/accordion/Accordion.svelte.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import type { AccordionProps } from '../../index.js';
+declare const Accordion: import("svelte").Component<AccordionProps, {}, "open">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/elements/accordion/accordion.d.ts ADDED Viewed

@@ -0,0 +1,200 @@
+export const accordion: import("tailwind-variants").TVReturnType<{
+    color: {
+        [Color.DEFAULT]: {
+            base: string;
+            body: string;
+        };
+        [Color.PRIMARY]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.SECONDARY]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.SUCCESS]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.WARNING]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.DANGER]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.INFO]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+    };
+    open: {
+        true: {
+            base: string;
+            title: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    bordered: {
+        true: {
+            base: string;
+            body: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    iconPosition: {
+        start: {};
+        end: {};
+    };
+}, {
+    base: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    icon: string;
+}, undefined, {
+    color: {
+        [Color.DEFAULT]: {
+            base: string;
+            body: string;
+        };
+        [Color.PRIMARY]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.SECONDARY]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.SUCCESS]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.WARNING]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.DANGER]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.INFO]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+    };
+    open: {
+        true: {
+            base: string;
+            title: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    bordered: {
+        true: {
+            base: string;
+            body: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    iconPosition: {
+        start: {};
+        end: {};
+    };
+}, {
+    base: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        [Color.DEFAULT]: {
+            base: string;
+            body: string;
+        };
+        [Color.PRIMARY]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.SECONDARY]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.SUCCESS]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.WARNING]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.DANGER]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+        [Color.INFO]: {
+            base: string;
+            header: string;
+            title: string;
+        };
+    };
+    open: {
+        true: {
+            base: string;
+            title: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    bordered: {
+        true: {
+            base: string;
+            body: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    iconPosition: {
+        start: {};
+        end: {};
+    };
+}, {
+    base: string;
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;
+import { Color } from '../../variants.js';

package/dist/elements/accordion/accordion.js ADDED Viewed

@@ -0,0 +1,88 @@
+import { tv } from '../../helper/cls.js';
+import { Color } from '../../variants.js';
+export const accordion = tv({
+	slots: {
+		base: 'relative overflow-hidden rounded-lg',
+		header: 'flex cursor-pointer items-center justify-between border-default-200 p-4',
+		title: 'text-default-900 text-base font-medium',
+		description: 'text-default-500 text-sm',
+		body: 'border-default-200 p-4 pt-0',
+		icon: 'size-5'
+	},
+	variants: {
+		color: {
+			[Color.DEFAULT]: {
+				base: 'bg-white',
+				body: ''
+			},
+			[Color.PRIMARY]: {
+				base: 'bg-primary-50',
+				header: 'text-primary-700',
+				title: 'text-primary-700'
+			},
+			[Color.SECONDARY]: {
+				base: 'bg-secondary-50',
+				header: 'text-secondary-700',
+				title: 'text-secondary-700'
+			},
+			[Color.SUCCESS]: {
+				base: 'bg-success-50',
+				header: 'text-success-700',
+				title: 'text-success-700'
+			},
+			[Color.WARNING]: {
+				base: 'bg-warning-50',
+				header: 'text-warning-700',
+				title: 'text-warning-700'
+			},
+			[Color.DANGER]: {
+				base: 'bg-danger-50',
+				header: 'text-danger-700',
+				title: 'text-danger-700'
+			},
+			[Color.INFO]: {
+				base: 'bg-info-50',
+				header: 'text-info-700',
+				title: 'text-info-700'
+			}
+		},
+		open: {
+			true: {
+				base: 'ring-1 ring-default-200',
+				title: 'text-default-900'
+			},
+			false: {
+				base: ''
+			}
+		},
+		bordered: {
+			true: {
+				base: 'border border-default-200 ring-1 ring-default-200/50',
+				body: 'border-t'
+			},
+			false: {
+				base: 'shadow-sm'
+			}
+		},
+		iconPosition: {
+			start: {},
+			end: {}
+		}
+	},
+	compoundVariants: [
+		{
+			open: true,
+			bordered: true,
+			class: {
+				base: 'shadow-sm'
+			}
+		}
+	],
+	defaultVariants: {
+		color: Color.DEFAULT,
+		open: false,
+		bordered: true,
+		iconPosition: 'start'
+	}
+});

package/dist/index.d.ts CHANGED Viewed

@@ -353,7 +353,7 @@ export type ChartColorValue = typeof ChartColor[ChartColorKey];
 export type ChartColors = {
     [K in ChartColorValue]: string;
 };
-export type ChartType = 'line' | 'bar' | 'horizontal-bar' | 'pie';
+export type ChartType = 'line' | 'bar' | 'horizontal-bar' | 'pie' | 'stacked-bar';
 export type ChartColorString = `#${string}` | keyof ChartColors;
 export type XAxisConfig<T> = {
     dataKey: keyof T;
@@ -721,6 +721,24 @@ export type ProgressProps = {
     barClass?: string;
 };
 export { default as Progress } from './elements/progress/Progress.svelte';
+export type AccordionProps = {
+    title?: string;
+    description?: string;
+    children?: Snippet;
+    custom?: Snippet;
+    open?: boolean;
+    color?: VariantColors;
+    class?: ClassValue;
+    titleclass?: ClassValue;
+    bodyclass?: ClassValue;
+    headerclass?: ClassValue;
+    icon?: Component;
+    iconPosition?: 'start' | 'end';
+    bordered?: boolean;
+    onexpand?: () => void;
+    oncollapse?: () => void;
+};
+export { default as Accordion } from './elements/accordion/Accordion.svelte';
 export interface TimelineItem {
     title: string;
     time: Date | string;

package/dist/index.js CHANGED Viewed

@@ -68,4 +68,5 @@ export { default as DateRange } from './forms/DateRange.svelte';
 export { default as Tags } from './forms/Tags.svelte';
 export { default as RadioPill } from './forms/RadioPill.svelte';
 export { default as Progress } from './elements/progress/Progress.svelte';
+export { default as Accordion } from './elements/accordion/Accordion.svelte';
 export { default as Timeline } from './elements/timeline/Timeline.svelte';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "0.0.1-dev.32",
+	"version": "0.0.1-dev.35",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"repository": {
 		"type": "git",