npm - @makolabs/ripple - Versions diffs - 0.0.1-dev.31 → 0.0.1-dev.34 - Mend

@makolabs/ripple 0.0.1-dev.31 → 0.0.1-dev.34

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 +33 -3
package/dist/index.js +10 -8
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}>
+	<div class={headerClasses} onclick={handleToggle}>
+		<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>
+	</div>
+	{#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

@@ -1,7 +1,19 @@
 import { ChartColor, Color, Size } from './variants.js';
-export type VariantColors = (typeof Color)[keyof typeof Color];
+/**
+ * Size System:
+ * - Size.*: Component dimensions (XS, SM, BASE, LG, XL, XXL)
+ */
 export type VariantSizes = (typeof Size)[keyof typeof Size];
-export { Color, Size };
+export type VariantColors = (typeof Color)[keyof typeof Color];
+/**
+ * Color System:
+ * - Color.*: UI component colors (buttons, text, backgrounds)
+ *   Options: DEFAULT, PRIMARY, SECONDARY, INFO, SUCCESS, WARNING, DANGER
+ * - ChartColor.*: Chart-specific colors, only supported within series configurations (lines, areas, bars)
+ *   Options: HEALTH, PROPERTY, AUTO, LIFE, OTHER, DEFAULT
+ * - ChartColors: Record type mapping ChartColor enum to string values
+ */
+export { Color, Size, ChartColor };
 import type { ClassValue } from 'tailwind-variants';
 import type { Snippet } from 'svelte';
 import type { Component } from 'svelte';
@@ -341,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;
@@ -709,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

@@ -1,12 +1,13 @@
 import { ChartColor, Color, Size } from './variants.js';
-/*
-All colors and sizes, will be assign via this enum, else it will be considered against the convention
-Color is a type that maps the Color enum values to their corresponding string values.
-Color Usage: Color.DEFAULT, Color.PRIMARY, Color.SECONDARY, Color.INFO, Color.SUCCESS, Color.WARNING, Color.DANGER
-Size is a type that maps the Size enum values to their corresponding string values.
-Size Usage: Size.XS, Size.SM, Size.BASE, Size.LG, Size.XL, Size.XXL
-*/
-export { Color, Size };
+/**
+ * Color System:
+ * - Color.*: UI component colors (buttons, text, backgrounds)
+ *   Options: DEFAULT, PRIMARY, SECONDARY, INFO, SUCCESS, WARNING, DANGER
+ * - ChartColor.*: Chart-specific colors, only supported within series configurations (lines, areas, bars)
+ *   Options: HEALTH, PROPERTY, AUTO, LIFE, OTHER, DEFAULT
+ * - ChartColors: Record type mapping ChartColor enum to string values
+ */
+export { Color, Size, ChartColor };
 // Helper utilities
 export { tv, cn } from './helper/cls.js';
 export { isRouteActive } from './helper/nav.svelte.js';
@@ -67,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.31",
+	"version": "0.0.1-dev.34",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"repository": {
 		"type": "git",