@makolabs/ripple 0.0.1-dev.25 → 0.0.1-dev.27

package/README.md

@@ -41,7 +41,7 @@ Paste the following CSS import code in `app.css`
 @source "../node_modules/@makolabs/ripple";
 
 @theme {
-	/* Default (Gray) */
+	/* Default (default) */
 	--color-default-50: oklch(0.984 0.003 247.858);
 	--color-default-100: oklch(0.96 0.006 247.858);
 	--color-default-200: oklch(0.91 0.008 247.858);

package/dist/charts/Chart.svelte

@@ -99,6 +99,13 @@
 	// Check if we have a pie/donut chart
 	const hasPieChart = $derived(series.some((s) => s.type === 'pie'));
 
+	// Check if we should show axis lines based on config or auto-detect from series type
+	const shouldShowAxisLines = $derived.by(() => {
+		if (config.showAxisLines !== undefined) return config.showAxisLines;
+		// Auto-detect: show for bar charts, hide for line charts
+		return series.some((s) => s.type === 'bar' || s.type === 'horizontal-bar');
+	});
+
 	let chartContainer: HTMLDivElement;
 	// @ts-expect-error - ECharts types are not available
 	let chart: echarts.ECharts;
@@ -422,7 +429,6 @@
 						}),
 						formatter: xAxis.format || '{value}'
 					},
-					// If all series are lines, no gap. If any bar, gap.
 					boundaryGap: series.every((s) => s.type === 'line')
 						? false
 						: series.some((s) => s.type === 'bar' || s.type === 'horizontal-bar')
@@ -435,9 +441,9 @@
 						show: grid.vertical || false
 					},
 					axisLine: {
-						show: true,
+						show: xAxis.showAxisLine ?? shouldShowAxisLines,
 						lineStyle: {
-							color: '#333'
+							color: 'rgba(0, 0, 0, 0.1)'
 						}
 					}
 				},
@@ -452,9 +458,9 @@
 					min: axis.min,
 					max: axis.max,
 					axisLine: {
-						show: true,
+						show: axis.showAxisLine ?? (shouldShowAxisLines && index === 0),
 						lineStyle: {
-							color: '#333'
+							color: 'rgba(0, 0, 0, 0.1)'
 						}
 					},
 					axisLabel: {

package/dist/drawer/drawer.js

@@ -5,11 +5,11 @@ export const drawer = tv({
         backdrop: 'fixed inset-0 transition-opacity bg-black/50',
         contentWrapper: 'absolute flex flex-col transform transition-transform',
         content: 'flex flex-col h-full w-full overflow-y-auto bg-white',
-        header: 'flex items-center justify-between px-4 py-3 border-b border-gray-200',
+        header: 'flex items-center justify-between px-4 py-3 border-b border-default-200',
         body: 'flex-1 overflow-y-auto p-4',
-        footer: 'flex justify-end border-t border-gray-200 p-4',
+        footer: 'flex justify-end border-t border-default-200 p-4',
         title: 'text-default-900 leading-6 text-base font-semibold',
-        closeButton: 'text-gray-400 hover:text-gray-500 rounded-md cursor-pointer'
+        closeButton: 'text-default-400 hover:text-default-500 rounded-md cursor-pointer'
     },
     variants: {
         open: {

package/dist/elements/alert/Alert.svelte

@@ -16,7 +16,7 @@
 	}
 
 	const colorClasses = {
-		[Color.DEFAULT]: 'bg-gray-50 border-gray-200 text-gray-800',
+		[Color.DEFAULT]: 'bg-default-50 border-default-200 text-default-800',
 		[Color.PRIMARY]: 'bg-primary-50 border-primary-200 text-primary-800',
 		[Color.SUCCESS]: 'bg-success-50 border-success-200 text-success-800',
 		[Color.WARNING]: 'bg-warning-50 border-warning-200 text-warning-800',
@@ -36,7 +36,7 @@
 		{#if onclose}
 			<button
 				type="button"
-				class="flex-shrink-0 cursor-pointer rounded-md p-1 hover:bg-gray-200/20"
+				class="flex-shrink-0 cursor-pointer rounded-md p-1 hover:bg-default-200/20"
 				onclick={handleClose}
 				aria-label="Close alert"
 			>

package/dist/elements/progress/Progress.svelte

@@ -31,7 +31,7 @@
 			[Color.DANGER]: 'bg-danger-600',
 			[Color.WARNING]: 'bg-warning-600',
 			[Color.INFO]: 'bg-info-600',
-			[Color.DEFAULT]: 'bg-gray-600'
+			[Color.DEFAULT]: 'bg-default-600'
 		};
 		return colorMap[color] || colorMap[Color.PRIMARY];
 	}
@@ -65,7 +65,7 @@
 	);
 
 	const progressClass = $derived(
-		cn('w-full rounded-full bg-gray-200', {
+		cn('w-full rounded-full bg-default-200', {
 			'h-1.5': size === Size.XS,
 			'h-2': size === Size.SM,
 			'h-2.5': size === Size.BASE,
@@ -87,7 +87,7 @@
 
 	const labelTextClass = $derived(
 		cn(
-			'text-gray-500',
+			'text-default-500',
 			getSizeTextClass(size),
 			{
 				'order-1': !segments && labelPosition === 'top',

package/dist/forms/Checkbox.svelte

@@ -13,7 +13,7 @@
 	}: CheckboxProps = $props();
 
 	const checkboxClass = $derived(
-		cn('w-4 h-4 rounded text-primary-600 border-gray-300 focus:ring-primary-500', {
+		cn('w-4 h-4 rounded text-primary-600 border-default-300 focus:ring-primary-500', {
 			'opacity-50 cursor-not-allowed': disabled,
 			'accent-danger-500': errors.length
 		})
@@ -21,7 +21,7 @@
 
 	const labelClass = $derived(
 		cn('text-sm font-medium', {
-			'text-gray-700': !errors.length,
+			'text-default-700': !errors.length,
 			'text-danger-600': errors.length
 		})
 	);

package/dist/forms/DateRange.svelte

@@ -245,24 +245,24 @@
 			{id}
 			type="button"
 			class={cn(
-				'flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm',
+				'flex w-full items-center justify-between rounded-md border border-default-300 bg-white px-3 py-2 text-sm shadow-sm',
 				disabled
-					? 'cursor-not-allowed bg-gray-100 text-gray-400'
-					: 'focus:border-primary-500 focus:ring-primary-500 hover:border-gray-400 focus:ring-2'
+					? 'cursor-not-allowed bg-default-100 text-default-400'
+					: 'focus:border-primary-500 focus:ring-primary-500 hover:border-default-400 focus:ring-2'
 			)}
 			onclick={toggleDatepicker}
 			aria-haspopup="true"
 			aria-expanded={isOpen}
 			{disabled}
 		>
-			<span class={startDate && endDate ? 'text-gray-900' : 'text-gray-500'}>
+			<span class={startDate && endDate ? 'text-default-900' : 'text-default-500'}>
 				{startDate && endDate
 					? `${formatDate(startDate)} - ${formatDate(endDate)}`
 					: startDate
 						? `${formatDate(startDate)} - Select end date`
 						: placeholder}
 			</span>
-			<svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
+			<svg class="h-5 w-5 text-default-400" viewBox="0 0 20 20" fill="currentColor">
 				<path
 					fill-rule="evenodd"
 					d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
@@ -274,7 +274,7 @@
 		{#if startDate || endDate}
 			<button
 				type="button"
-				class="absolute top-1/2 right-10 -translate-y-1/2 text-gray-400 hover:text-gray-500"
+				class="absolute top-1/2 right-10 -translate-y-1/2 text-default-400 hover:text-default-500"
 				onclick={clearDates}
 				aria-label="Clear dates"
 			>
@@ -298,7 +298,7 @@
 					<button
 						type="button"
 						aria-label="Previous month"
-						class="inline-flex items-center rounded-md p-1 text-sm text-gray-500 hover:bg-gray-100"
+						class="inline-flex items-center rounded-md p-1 text-sm text-default-500 hover:bg-default-100"
 						onclick={prevMonth}
 					>
 						<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
@@ -311,7 +311,7 @@
 					</button>
 					<button
 						type="button"
-						class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-100"
+						class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-default-700 hover:bg-default-100"
 						onclick={showMonths}
 					>
 						{getMonthName(viewDate.getMonth())}
@@ -320,7 +320,7 @@
 					<button
 						type="button"
 						aria-label="Next month"
-						class="inline-flex items-center rounded-md p-1 text-sm text-gray-500 hover:bg-gray-100"
+						class="inline-flex items-center rounded-md p-1 text-sm text-default-500 hover:bg-default-100"
 						onclick={nextMonth}
 					>
 						<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
@@ -335,7 +335,7 @@
 					<button
 						type="button"
 						aria-label="Previous year"
-						class="inline-flex items-center rounded-md p-1 text-sm text-gray-500 hover:bg-gray-100"
+						class="inline-flex items-center rounded-md p-1 text-sm text-default-500 hover:bg-default-100"
 						onclick={() =>
 							(viewDate = new Date(viewDate.getFullYear() - 1, viewDate.getMonth(), 1))}
 					>
@@ -350,7 +350,7 @@
 					<button
 						type="button"
 						aria-label="Current year"
-						class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-700"
+						class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-default-700"
 						onclick={showYears}
 					>
 						{viewDate.getFullYear()}
@@ -358,7 +358,7 @@
 					<button
 						type="button"
 						aria-label="Next year"
-						class="inline-flex items-center rounded-md p-1 text-sm text-gray-500 hover:bg-gray-100"
+						class="inline-flex items-center rounded-md p-1 text-sm text-default-500 hover:bg-default-100"
 						onclick={() =>
 							(viewDate = new Date(viewDate.getFullYear() + 1, viewDate.getMonth(), 1))}
 					>
@@ -374,7 +374,7 @@
 					<button
 						type="button"
 						aria-label="Previous year"
-						class="inline-flex items-center rounded-md p-1 text-sm text-gray-500 hover:bg-gray-100"
+						class="inline-flex items-center rounded-md p-1 text-sm text-default-500 hover:bg-default-100"
 						onclick={() =>
 							(viewDate = new Date(viewDate.getFullYear() - 12, viewDate.getMonth(), 1))}
 					>
@@ -389,14 +389,14 @@
 					<button
 						type="button"
 						aria-label="Current year range"
-						class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-700"
+						class="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-default-700"
 					>
 						{viewDate.getFullYear() - 6} - {viewDate.getFullYear() + 5}
 					</button>
 					<button
 						type="button"
 						aria-label="Next year"
-						class="inline-flex items-center rounded-md p-1 text-sm text-gray-500 hover:bg-gray-100"
+						class="inline-flex items-center rounded-md p-1 text-sm text-default-500 hover:bg-default-100"
 						onclick={() =>
 							(viewDate = new Date(viewDate.getFullYear() + 12, viewDate.getMonth(), 1))}
 					>
@@ -412,7 +412,7 @@
 			</div>
 
 			{#if viewMode === 'days'}
-				<div class="mb-1 grid grid-cols-7 gap-1 text-center text-xs font-medium text-gray-500">
+				<div class="mb-1 grid grid-cols-7 gap-1 text-center text-xs font-medium text-default-500">
 					<div>Su</div>
 					<div>Mo</div>
 					<div>Tu</div>
@@ -427,10 +427,10 @@
 							type="button"
 							class={cn(
 								'flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium',
-								isDisabled ? 'cursor-not-allowed text-gray-300' : 'hover:bg-gray-100',
+								isDisabled ? 'cursor-not-allowed text-default-300' : 'hover:bg-default-100',
 								isSelected ? 'bg-primary-500 hover:bg-primary-600 text-white' : '',
 								isInRange && !isSelected ? 'bg-primary-100 text-primary-800' : '',
-								!isCurrentMonth && !isSelected && !isInRange ? 'text-gray-400' : '',
+								!isCurrentMonth && !isSelected && !isInRange ? 'text-default-400' : '',
 								isToday && !isSelected ? 'border-primary-500 border' : ''
 							)}
 							onclick={() => handleDateClick(date)}
@@ -450,7 +450,7 @@
 								'flex items-center justify-center rounded-md px-2 py-1 text-sm font-medium',
 								viewDate.getMonth() === month
 									? 'bg-primary-500 text-white'
-									: 'text-gray-700 hover:bg-gray-100'
+									: 'text-default-700 hover:bg-default-100'
 							)}
 							onclick={() => selectMonth(month)}
 						>
@@ -468,7 +468,7 @@
 								'flex items-center justify-center rounded-md px-2 py-1 text-sm font-medium',
 								viewDate.getFullYear() === year
 									? 'bg-primary-500 text-white'
-									: 'text-gray-700 hover:bg-gray-100'
+									: 'text-default-700 hover:bg-default-100'
 							)}
 							onclick={() => selectYear(year)}
 						>
@@ -479,7 +479,7 @@
 			{/if}
 
 			{#if startDate || endDate}
-				<div class="mt-4 flex justify-between border-t border-gray-200 pt-3 text-xs text-gray-500">
+				<div class="mt-4 flex justify-between border-t border-default-200 pt-3 text-xs text-default-500">
 					<div>
 						{startDate ? `${startLabel}: ${formatDate(startDate)}` : ''}
 					</div>

package/dist/forms/Input.svelte

@@ -34,7 +34,7 @@
 							'h-12 text-lg': size === Size.LG
 						}
 					: {}),
-				'border-gray-300 focus:border-primary-500 focus:ring-primary-500': !errors.length
+				'border-default-300 focus:border-primary-500 focus:ring-primary-500': !errors.length
 			},
 			className
 		)
@@ -76,7 +76,7 @@
 			class={cn(
 				'block w-full text-sm font-medium',
 				{
-					'text-gray-700': !errors.length,
+					'text-default-700': !errors.length,
 					'text-red-600': errors.length
 				},
 				extraClass

package/dist/forms/NumberInput.svelte

@@ -79,7 +79,7 @@
 
 <div class="space-y-1">
 	{#if label}
-		<label for={name} class="block text-sm font-medium text-gray-700">{label}</label>
+		<label for={name} class="block text-sm font-medium text-default-700">{label}</label>
 	{/if}
 	<div class={containerClass} bind:this={containerRef}>
 		<svg

package/dist/forms/RadioInputs.svelte

@@ -16,7 +16,7 @@
 	const containerClass = $derived(cn('space-y-2', className));
 
 	const radioClass = $derived(
-		cn('w-4 h-4 text-primary-600 border-gray-300 focus:ring-primary-500', {
+		cn('w-4 h-4 text-primary-600 border-default-300 focus:ring-primary-500', {
 			'opacity-50 cursor-not-allowed': disabled,
 			'border-red-300 focus:ring-red-500': errors.length
 		})
@@ -24,7 +24,7 @@
 
 	const labelClass = $derived(
 		cn('block text-sm font-medium', {
-			'text-gray-700': !errors.length,
+			'text-default-700': !errors.length,
 			'text-red-600': errors.length
 		})
 	);
@@ -48,7 +48,7 @@
 					{required}
 					aria-describedby={errors.length ? `${name}-errors` : undefined}
 				/>
-				<label for={`${name}-${option.value}`} class="text-sm text-gray-700">
+				<label for={`${name}-${option.value}`} class="text-sm text-default-700">
 					{option.label}
 				</label>
 			</div>

package/dist/forms/Tags.svelte

@@ -106,7 +106,7 @@
 	const containerClass = $derived(
 		cn(
 			'relative flex flex-wrap gap-2 rounded-lg border bg-white shadow-sm px-3 py-2',
-			'border-gray-300 focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2',
+			'border-default-300 focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2',
 			{
 				'border-red-300 focus-within:border-red-500 focus-within:ring-red-500': errors?.length
 			},
@@ -116,21 +116,21 @@
 
 	const suggestionClass = $derived(
 		cn(
-			'absolute top-[calc(100%+8px)] right-0 left-0 z-50 max-h-[200px] overflow-auto rounded-lg border border-gray-300 bg-white shadow-lg'
+			'absolute top-[calc(100%+8px)] right-0 left-0 z-50 max-h-[200px] overflow-auto rounded-lg border border-default-300 bg-white shadow-lg'
 		)
 	);
 
 	const suggestionItemClass = $derived((isHighlighted: boolean) =>
 		cn(
 			'flex w-full cursor-pointer items-center px-3 py-2 text-sm transition-colors',
-			isHighlighted && 'bg-gray-50'
+			isHighlighted && 'bg-default-50'
 		)
 	);
 </script>
 
 <div class="space-y-1">
 	{#if label}
-		<label for={name} class="block text-sm font-medium text-gray-700">{label}</label>
+		<label for={name} class="block text-sm font-medium text-default-700">{label}</label>
 	{/if}
 	<div class={containerClass} onfocusout={handleFocusOut}>
 		{#each value as tag}
@@ -144,7 +144,7 @@
 			{name}
 			id={name}
 			{placeholder}
-			class={cn('min-w-[120px] flex-1 bg-transparent outline-none placeholder:text-gray-400', {
+			class={cn('min-w-[120px] flex-1 bg-transparent outline-none placeholder:text-default-400', {
 				'text-sm': size === Size.SM,
 				'text-base': size === Size.BASE,
 				'text-lg': size === Size.LG

package/dist/forms/Toggle.svelte

@@ -13,7 +13,7 @@
 		color = Color.PRIMARY,
 		value = $bindable(false),
 		errors = [],
-		offColor = 'bg-gray-200',
+		offColor = 'bg-default-200',
 		onColor,
 		...restProps
 	}: ToggleProps = $props();
@@ -27,7 +27,7 @@
 				[Color.DANGER]: 'bg-red-500',
 				[Color.WARNING]: 'bg-yellow-500',
 				[Color.INFO]: 'bg-blue-500',
-				[Color.DEFAULT]: 'bg-gray-800'
+				[Color.DEFAULT]: 'bg-default-800'
 			}[color]
 	);
 
@@ -80,7 +80,7 @@
 
 	const labelClasses = $derived(
 		cn('text-sm font-medium', {
-			'text-gray-700': !errors.length,
+			'text-default-700': !errors.length,
 			'text-red-600': errors.length,
 			'opacity-50': disabled
 		})

package/dist/forms/slider.js

@@ -3,16 +3,16 @@ import { Color, Size } from '../variants.js';
 export const slider = tv({
     slots: {
         base: 'relative w-full',
-        track: 'absolute h-2 w-full rounded-full bg-gray-200 cursor-pointer',
+        track: 'absolute h-2 w-full rounded-full bg-default-200 cursor-pointer',
         range: 'absolute h-full rounded-full bg-primary-500',
         thumb: [
             'absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white border-2 border-primary-500',
             'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
             'hover:scale-110 transition-transform cursor-pointer'
         ],
-        mark: 'absolute text-sm text-gray-500 -translate-x-1/2',
-        label: 'mb-2 block text-sm font-medium text-gray-700',
-        value: 'mt-1 text-sm text-gray-500'
+        mark: 'absolute text-sm text-default-500 -translate-x-1/2',
+        label: 'mb-2 block text-sm font-medium text-default-700',
+        value: 'mt-1 text-sm text-default-500'
     },
     variants: {
         size: {

package/dist/index.d.ts

@@ -345,28 +345,29 @@ export type ChartColors = {
 };
 export type ChartType = 'line' | 'bar' | 'horizontal-bar' | 'pie';
 export type ChartColorString = `#${string}` | keyof ChartColors;
-export interface YAxisConfig<T> {
-    dataKey: keyof T & string;
+export type XAxisConfig<T> = {
+    dataKey: keyof T;
     label?: string;
-    unit?: string;
-    min?: number;
-    max?: number;
-    position?: 'left' | 'right';
     format?: (value: any) => string;
-    color?: ChartColorString;
-}
-export interface XAxisConfig<T> {
-    dataKey: keyof T & string;
-    label?: string;
     tick?: {
         fontSize?: number;
         rotate?: number;
-        interval?: number | 'auto' | 'preserveStartEnd';
+        interval?: number | 'auto' | Function;
     };
+    showAxisLine?: boolean;
+};
+export type YAxisConfig<T> = {
+    dataKey: keyof T;
+    label?: string;
     format?: (value: any) => string;
-}
+    unit?: string;
+    position?: 'left' | 'right';
+    min?: number;
+    max?: number;
+    showAxisLine?: boolean;
+};
 export interface SeriesConfig<T> {
-    dataKey: keyof T & string;
+    dataKey: keyof T;
     name?: string;
     type?: ChartType;
     color?: ChartColorString;
@@ -391,40 +392,45 @@ export interface SeriesConfig<T> {
     radius?: [string, string];
     centerText?: string;
 }
-export interface ChartConfig<T> {
+export interface GridConfig {
+    horizontal?: boolean;
+    vertical?: boolean;
+    containLabel?: boolean;
+    top?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+}
+export interface LegendConfig {
+    show?: boolean;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    orient?: 'horizontal' | 'vertical';
+}
+export interface TooltipConfig {
+    show?: boolean;
+    trigger?: 'item' | 'axis' | 'none';
+    formatter?: string | ((params: any) => string);
+}
+export interface ToolboxConfig {
+    show?: boolean;
+    features?: {
+        saveAsImage?: boolean;
+        dataView?: boolean;
+        dataZoom?: boolean;
+        magicType?: boolean;
+        restore?: boolean;
+    };
+}
+export type ChartConfig<T> = {
     xAxis: XAxisConfig<T>;
     yAxis: YAxisConfig<T>[];
     series: SeriesConfig<T>[];
-    grid?: {
-        horizontal?: boolean;
-        vertical?: boolean;
-        containLabel?: boolean;
-        top?: number | string;
-        right?: number | string;
-        bottom?: number | string;
-        left?: number | string;
-    };
-    legend?: {
-        show?: boolean;
-        position?: 'top' | 'bottom' | 'left' | 'right';
-        orient?: 'horizontal' | 'vertical';
-    };
-    tooltip?: {
-        show?: boolean;
-        trigger?: 'item' | 'axis' | 'none';
-        formatter?: string | ((params: any) => string);
-    };
-    toolbox?: {
-        show?: boolean;
-        features?: {
-            saveAsImage?: boolean;
-            dataView?: boolean;
-            dataZoom?: boolean;
-            magicType?: boolean;
-            restore?: boolean;
-        };
-    };
-}
+    grid?: GridConfig;
+    legend?: LegendConfig;
+    tooltip?: TooltipConfig;
+    toolbox?: ToolboxConfig;
+    showAxisLines?: boolean;
+};
 export interface PointClickType<T> {
     detail: {
         seriesIndex: number;

package/dist/layout/card/StatsCard.svelte

@@ -135,7 +135,7 @@
 	const labelClasses = $derived(cn(labelSlot(), 'text-sm font-medium mb-1'));
 	const valueClasses = $derived(cn(valueSlot(), 'text-4xl font-bold'));
 	const trendClasses = $derived(cn(trendSlot(), 'text-sm font-medium ml-2'));
-	const previousValueClasses = $derived(cn(previousValueSlot(), 'text-sm text-gray-500 mt-1'));
+	const previousValueClasses = $derived(cn(previousValueSlot(), 'text-sm text-default-500 mt-1'));
 
 	const trendFormatted = $derived.by(() => {
 		if (trend === undefined || trend === null) return '';
@@ -222,7 +222,7 @@
 <div
 	class={cn(
 		base(),
-		'@container flex flex-col rounded-lg border border-gray-200 bg-white p-6 shadow-sm',
+		'@container flex flex-col rounded-lg border border-default-200 bg-white p-6 shadow-sm',
 		className
 	)}
 >

package/dist/layout/card/stats-card.js

@@ -62,7 +62,7 @@ export const statsCard = tv({
                 trend: 'text-danger-600'
             },
             neutral: {
-                trend: 'text-gray-600'
+                trend: 'text-default-600'
             }
         }
     },

package/dist/layout/sidebar/NavGroup.svelte

@@ -28,7 +28,7 @@
 
 	const navGroupClasses = $derived(
 		cn(
-			`items-center gap-x-3 p-1.5 rounded-md w-full cursor-pointer text-gray-400 text-sm/6 text-left font-medium`,
+			`items-center gap-x-3 p-1.5 rounded-md w-full cursor-pointer text-default-400 text-sm/6 text-left font-medium`,
 			{
 				'font-semibold ': isActive,
 				hidden: menubar.collapsed,

package/dist/layout/sidebar/NavItem.svelte

@@ -10,8 +10,8 @@
 
 	const navItemClasses = $derived(
 		cn([
-			'group flex gap-x-3 p-2 rounded-md text-gray-400 text-sm/6',
-			{ 'bg-gray-950 font-semibold': active, 'hover:bg-gray-950': !active },
+			'group flex gap-x-3 p-2 rounded-md text-default-400 text-sm/6',
+			{ 'bg-default-950 font-semibold': active, 'hover:bg-default-950': !active },
 			className
 		])
 	);

package/dist/layout/sidebar/Sidebar.svelte

@@ -54,7 +54,7 @@
 	const sidebarClasses = $derived(
 		clsx(
 			`flex min-h-screen max-h-screen overflow-y-auto flex-col gap-y-1 overflow-y-auto
-			border-r border-gray-800 bg-gray-900 px-3 duration-300 sticky top-0`,
+			border-r border-default-800 bg-default-900 px-3 duration-300 sticky top-0`,
 			{
 				'w-16': menubar.collapsed,
 				'w-16 xl:w-72 shrink-0': !menubar.collapsed
@@ -91,7 +91,7 @@
 		<ul role="list" class="flex flex-1 flex-col gap-y-1">
 			{#each navigationItems as item, index (index)}
 				{#if 'type' in item && item.type === 'horizontal-divider'}
-					<li class="my-3 border-t border-gray-700"></li>
+					<li class="my-3 border-t border-default-700"></li>
 				{:else if 'children' in item}
 					<NavGroup active={item.active}>
 						{#snippet labelArea(classes)}
@@ -101,7 +101,7 @@
 							<NavItem href={child.href} active={child.active}>
 								{#if child.Icon}
 									{@const Icon = child.Icon}
-									<Icon class="size-6 shrink-0 text-gray-600" />
+									<Icon class="size-6 shrink-0 text-default-600" />
 								{/if}
 								<span class="truncate">{child.label}</span>
 							</NavItem>
@@ -112,7 +112,7 @@
 						{#snippet children(classes)}
 							{#if item.Icon}
 								{@const Icon = item.Icon}
-								<Icon class="size-6 shrink-0 text-gray-600" />
+								<Icon class="size-6 shrink-0 text-default-600" />
 							{/if}
 							<span class={cn(classes)}>{item.label}</span>
 						{/snippet}
@@ -123,7 +123,7 @@
 	</nav>
 </div>
 
-{#snippet ToggleIcon(classes = 'size-6 shrink-0 text-gray-600')}
+{#snippet ToggleIcon(classes = 'size-6 shrink-0 text-default-600')}
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
 		width="0.8em"

package/dist/modal/modal.js

@@ -5,10 +5,10 @@ export const modal = tv({
         backdrop: 'fixed inset-0 transition-opacity bg-black/50',
         contentWrapper: 'absolute transform overflow-hidden transition-all px-2',
         content: 'bg-white overflow-hidden rounded-lg',
-        header: 'px-4 py-3 flex items-center justify-between border-b border-gray-200',
+        header: 'px-4 py-3 flex items-center justify-between border-b border-default-200',
         body: 'px-3 py-2 max-h-[70dvh] overflow-y-auto',
         title: 'text-default-900 leading-6 text-base font-semibold',
-        closeButton: 'text-gray-400 hover:text-gray-500 rounded-md cursor-pointer'
+        closeButton: 'text-default-400 hover:text-default-500 rounded-md cursor-pointer'
     },
     variants: {
         open: {
@@ -65,7 +65,7 @@ export const modal = tv({
                 content: 'border-0'
             },
             default: {
-                content: 'border border-gray-200'
+                content: 'border border-default-200'
             },
             colored: {
                 content: 'border'

package/package.json

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

package/dist/header/pageheaders.d.ts

@@ -1,10 +0,0 @@
-import { type ClassValue } from 'tailwind-variants';
-import type { BreadcrumbItem } from '../index.js';
-import type { Snippet } from 'svelte';
-export type PageHeaderProps = {
-    title: string;
-    breadcrumbs?: BreadcrumbItem[];
-    children?: Snippet;
-    class?: ClassValue;
-    titleclass?: ClassValue;
-};

package/dist/header/pageheaders.js

@@ -1 +0,0 @@
-import {} from 'tailwind-variants';