ui-svelte 0.2.10 → 0.2.12

package/dist/charts/css/arc-chart.css

@@ -49,7 +49,7 @@
 	}
 
 	.arc-chart-arc {
-		@apply fill-none transition-all duration-200 ease-in-out cursor-pointer;
+		@apply fill-none transition-all duration-300 ease-in-out cursor-pointer;
 	}
 
 	.arc-chart-arc:hover,
@@ -106,7 +106,7 @@
 	}
 
 	.arc-chart-point {
-		@apply transition-all duration-200 ease-in-out;
+		@apply transition-all duration-300 ease-in-out;
 		stroke-width: 2;
 	}
 
@@ -258,7 +258,7 @@
 	}
 
 	.arc-chart-legend-item {
-		@apply flex items-center gap-2 cursor-pointer transition-opacity duration-200;
+		@apply flex items-center gap-2 cursor-pointer transition-opacity duration-300;
 	}
 
 	.arc-chart-legend-item:hover {

package/dist/charts/css/area-chart.css

@@ -1,10 +1,42 @@
 @layer components {
 	.area-chart-container {
-		@apply relative w-full flex flex-col md:flex-row justify-center items-center gap-4;
+		@apply relative w-full flex justify-center items-center gap-4;
+	}
+
+	.area-chart-container.flex-row {
+		@apply flex-col md:flex-row;
+	}
+
+	.area-chart-container.flex-row-reverse {
+		@apply flex-col-reverse md:flex-row-reverse;
+	}
+
+	.area-chart-container.flex-col {
+		@apply flex-col;
+	}
+
+	.area-chart-container.flex-col-reverse {
+		@apply flex-col-reverse;
 	}
 
 	.area-chart {
-		@apply relative flex items-center justify-center w-auto h-56 text-on-muted;
+		@apply relative flex items-center justify-center w-full text-on-muted;
+	}
+
+	.area-chart.is-sm {
+		@apply h-[150px];
+	}
+
+	.area-chart.is-md {
+		@apply h-56;
+	}
+
+	.area-chart.is-lg {
+		@apply h-[300px];
+	}
+
+	.area-chart.is-xl {
+		@apply h-[400px];
 	}
 
 	.area-chart-svg {
@@ -17,7 +49,7 @@
 	}
 
 	.area-chart-axis-label {
-		@apply fill-on-muted text-xs;
+		@apply fill-on-muted;
 	}
 
 	.area-chart-grid-line {
@@ -27,6 +59,18 @@
 		stroke-dasharray: 2, 2;
 	}
 
+	.area-chart-area {
+		@apply transition-all duration-300 ease-in-out;
+	}
+
+	.area-chart-area.is-hovered {
+		opacity: 0.9;
+	}
+
+	.area-chart-area.has-glow {
+		filter: drop-shadow(0 0 6px currentColor);
+	}
+
 	.area-chart-area.is-primary {
 		@apply fill-primary;
 	}
@@ -56,81 +100,75 @@
 	}
 
 	.area-chart-gradient-start.is-primary {
-		@apply fill-primary;
 		stop-color: var(--color-primary, #3b82f6);
 	}
 
 	.area-chart-gradient-start.is-secondary {
-		@apply fill-secondary;
 		stop-color: var(--color-secondary, #6366f1);
 	}
 
 	.area-chart-gradient-start.is-success {
-		@apply fill-success;
 		stop-color: var(--color-success, #22c55e);
 	}
 
 	.area-chart-gradient-start.is-info {
-		@apply fill-info;
 		stop-color: var(--color-info, #06b6d4);
 	}
 
 	.area-chart-gradient-start.is-warning {
-		@apply fill-warning;
 		stop-color: var(--color-warning, #f59e0b);
 	}
 
 	.area-chart-gradient-start.is-danger {
-		@apply fill-danger;
 		stop-color: var(--color-danger, #ef4444);
 	}
 
 	.area-chart-gradient-start.is-muted {
-		@apply fill-muted;
 		stop-color: var(--color-muted, #9ca3af);
 	}
 
 	.area-chart-gradient-end.is-primary {
-		@apply fill-primary;
 		stop-color: var(--color-primary, #3b82f6);
 	}
 
 	.area-chart-gradient-end.is-secondary {
-		@apply fill-secondary;
 		stop-color: var(--color-secondary, #6366f1);
 	}
 
 	.area-chart-gradient-end.is-success {
-		@apply fill-success;
 		stop-color: var(--color-success, #22c55e);
 	}
 
 	.area-chart-gradient-end.is-info {
-		@apply fill-info;
 		stop-color: var(--color-info, #06b6d4);
 	}
 
 	.area-chart-gradient-end.is-warning {
-		@apply fill-warning;
 		stop-color: var(--color-warning, #f59e0b);
 	}
 
 	.area-chart-gradient-end.is-danger {
-		@apply fill-danger;
 		stop-color: var(--color-danger, #ef4444);
 	}
 
 	.area-chart-gradient-end.is-muted {
-		@apply fill-muted;
 		stop-color: var(--color-muted, #9ca3af);
 	}
 
 	.area-chart-line {
-		@apply fill-none;
+		@apply fill-none transition-all duration-300 ease-in-out;
 		stroke-linecap: round;
 		stroke-linejoin: round;
 	}
 
+	.area-chart-line.is-hovered {
+		stroke-width: 3;
+	}
+
+	.area-chart-line.has-glow {
+		filter: drop-shadow(0 0 4px currentColor);
+	}
+
 	.area-chart-line.is-primary {
 		@apply stroke-primary;
 	}
@@ -160,12 +198,17 @@
 	}
 
 	.area-chart-point {
-		@apply cursor-pointer transition-all duration-200 ease-in-out;
+		@apply cursor-pointer transition-all duration-300 ease-in-out;
 		stroke-width: 2;
 	}
 
 	.area-chart-point:hover {
-		r: 5;
+		r: 6;
+		filter: brightness(1.1);
+	}
+
+	.area-chart-point.has-glow:hover {
+		filter: drop-shadow(0 0 6px currentColor) brightness(1.1);
 	}
 
 	.area-chart-point.is-primary {
@@ -197,38 +240,93 @@
 	}
 
 	.area-chart-tooltip {
-		@apply fixed pointer-events-none z-50 bg-on-muted text-muted px-3 py-2 rounded-md shadow-sm text-xs font-medium whitespace-nowrap;
-		transform: translateY(-50%);
+		position: fixed;
+		pointer-events: none;
+		z-index: 50;
+		background: var(--color-on-muted, #1f2937);
+		color: var(--color-muted, #f9fafb);
+		padding: 0.5rem 0.75rem;
+		border-radius: 0.375rem;
+		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+		font-size: 0.75rem;
+		font-weight: 500;
+		white-space: nowrap;
+		transform: translate(-50%, -100%);
 	}
 
 	.area-chart-tooltip-title {
-		@apply font-semibold mb-1;
+		font-weight: 600;
+		margin-bottom: 0.25rem;
 	}
 
 	.area-chart-tooltip-row {
-		@apply flex items-center gap-2;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
 	}
 
-	.area-chart-tooltip-label {
-		@apply opacity-80;
+	.area-chart-tooltip-color {
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 50%;
+	}
+
+	.area-chart-tooltip-color.is-primary {
+		background: var(--color-primary, #3b82f6);
+	}
+
+	.area-chart-tooltip-color.is-secondary {
+		background: var(--color-secondary, #6366f1);
+	}
+
+	.area-chart-tooltip-color.is-success {
+		background: var(--color-success, #22c55e);
+	}
+
+	.area-chart-tooltip-color.is-info {
+		background: var(--color-info, #06b6d4);
+	}
+
+	.area-chart-tooltip-color.is-warning {
+		background: var(--color-warning, #f59e0b);
+	}
+
+	.area-chart-tooltip-color.is-danger {
+		background: var(--color-danger, #ef4444);
+	}
+
+	.area-chart-tooltip-color.is-muted {
+		background: var(--color-muted, #9ca3af);
 	}
 
 	.area-chart-tooltip-value {
-		@apply font-semibold;
+		font-weight: 600;
 	}
 
 	.area-chart-legend {
-		@apply flex flex-wrap md:flex-col gap-2 items-center justify-center text-sm text-on-muted text-nowrap;
+		@apply flex gap-3 items-center justify-center text-sm text-on-muted text-nowrap;
+	}
+
+	.area-chart-legend.flex-col {
+		@apply flex-wrap md:flex-col;
+	}
+
+	.area-chart-legend.flex-row {
+		@apply flex-row flex-wrap;
 	}
 
 	.area-chart-legend-item {
-		@apply flex items-center gap-2 cursor-pointer transition-opacity duration-200;
+		@apply flex items-center gap-2 cursor-pointer transition-all duration-300;
 	}
 
 	.area-chart-legend-item:hover {
 		@apply opacity-80;
 	}
 
+	.area-chart-legend-item.is-selected {
+		@apply font-semibold;
+	}
+
 	.area-chart-legend-color {
 		@apply w-3 h-3 rounded-sm;
 	}

package/dist/charts/css/bar-chart.css

@@ -1,10 +1,58 @@
 @layer components {
 	.bar-chart-container {
-		@apply relative w-full h-full;
+		@apply relative w-full flex justify-center items-center gap-4;
+	}
+
+	.bar-chart-container.flex-row {
+		@apply flex-col md:flex-row;
+	}
+
+	.bar-chart-container.flex-row-reverse {
+		@apply flex-col-reverse md:flex-row-reverse;
+	}
+
+	.bar-chart-container.flex-col {
+		@apply flex-col;
+	}
+
+	.bar-chart-container.flex-col-reverse {
+		@apply flex-col-reverse;
+	}
+
+	.bar-chart-container.is-sm {
+		@apply min-h-[200px];
+	}
+
+	.bar-chart-container.is-md {
+		@apply min-h-[300px];
+	}
+
+	.bar-chart-container.is-lg {
+		@apply min-h-[400px];
+	}
+
+	.bar-chart-container.is-xl {
+		@apply min-h-[500px];
 	}
 
 	.bar-chart {
-		@apply relative w-full h-full text-on-muted;
+		@apply relative flex-1 w-full h-full text-on-muted;
+	}
+
+	.bar-chart.is-sm {
+		@apply h-[200px];
+	}
+
+	.bar-chart.is-md {
+		@apply h-[300px];
+	}
+
+	.bar-chart.is-lg {
+		@apply h-[400px];
+	}
+
+	.bar-chart.is-xl {
+		@apply h-[500px];
 	}
 
 	.bar-chart-svg {
@@ -20,6 +68,10 @@
 		@apply fill-on-muted text-xs;
 	}
 
+	.bar-chart-value-label {
+		@apply fill-on-muted text-xs font-medium;
+	}
+
 	.bar-chart-grid-line {
 		@apply stroke-muted;
 		stroke-opacity: 0.3;
@@ -28,14 +80,24 @@
 	}
 
 	.bar-chart-bar {
-		@apply transition-all duration-200 ease-in-out cursor-pointer;
+		@apply transition-all duration-300 ease-in-out cursor-pointer;
 	}
 
-	.bar-chart-bar:hover {
-		opacity: 0.8;
+	.bar-chart-bar:hover,
+	.bar-chart-bar.is-hovered {
+		opacity: 0.85;
 		filter: brightness(1.1);
 	}
 
+	.bar-chart-bar.has-glow {
+		filter: drop-shadow(0 0 6px currentColor);
+	}
+
+	.bar-chart-bar.has-glow:hover,
+	.bar-chart-bar.has-glow.is-hovered {
+		filter: drop-shadow(0 0 10px currentColor) brightness(1.1);
+	}
+
 	.bar-chart-bar.is-primary {
 		@apply fill-primary;
 	}
@@ -79,14 +141,50 @@
 		transform: translateY(-50%);
 	}
 
+	.bar-chart-tooltip-content {
+		@apply flex flex-col gap-1;
+	}
+
 	.bar-chart-tooltip-title {
-		@apply font-semibold mb-1;
+		@apply font-semibold mb-0.5;
 	}
 
 	.bar-chart-tooltip-row {
 		@apply flex items-center gap-2;
 	}
 
+	.bar-chart-tooltip-color {
+		@apply w-2 h-2 rounded-full shrink-0;
+	}
+
+	.bar-chart-tooltip-color.is-primary {
+		background: var(--color-primary, #3b82f6);
+	}
+
+	.bar-chart-tooltip-color.is-secondary {
+		background: var(--color-secondary, #6366f1);
+	}
+
+	.bar-chart-tooltip-color.is-success {
+		background: var(--color-success, #22c55e);
+	}
+
+	.bar-chart-tooltip-color.is-info {
+		background: var(--color-info, #06b6d4);
+	}
+
+	.bar-chart-tooltip-color.is-warning {
+		background: var(--color-warning, #f59e0b);
+	}
+
+	.bar-chart-tooltip-color.is-danger {
+		background: var(--color-danger, #ef4444);
+	}
+
+	.bar-chart-tooltip-color.is-muted {
+		background: var(--color-muted, #9ca3af);
+	}
+
 	.bar-chart-tooltip-label {
 		opacity: 0.8;
 	}
@@ -96,11 +194,19 @@
 	}
 
 	.bar-chart-legend {
-		@apply flex flex-wrap gap-4 items-center justify-center mt-4 text-sm text-on-muted;
+		@apply flex gap-3 items-center justify-center text-sm text-on-muted text-nowrap;
+	}
+
+	.bar-chart-legend.flex-col {
+		@apply flex-wrap md:flex-col;
+	}
+
+	.bar-chart-legend.flex-row {
+		@apply flex-row flex-wrap;
 	}
 
 	.bar-chart-legend-item {
-		@apply flex items-center gap-2 cursor-pointer transition-opacity duration-200;
+		@apply flex items-center gap-2 cursor-pointer transition-opacity duration-300;
 	}
 
 	.bar-chart-legend-item:hover {

package/dist/charts/css/candlestick.css

@@ -105,6 +105,7 @@
 
 	.candlestick-chart-candle {
 		@apply cursor-pointer transition-opacity duration-150;
+		rx: var(--candlestick-candle-radius, 2px);
 	}
 
 	.candlestick-chart-candle:hover {
@@ -174,6 +175,7 @@
 
 	.candlestick-chart-volume {
 		@apply opacity-30;
+		rx: var(--candlestick-volume-radius, 1px);
 	}
 
 	.candlestick-chart-volume.is-primary {

package/dist/charts/css/line-chart.css

@@ -1,6 +1,38 @@
 @layer components {
 	.line-chart-container {
-		@apply relative w-full h-full;
+		@apply relative w-full flex justify-center items-center gap-4;
+	}
+
+	.line-chart-container.flex-row {
+		@apply flex-col md:flex-row;
+	}
+
+	.line-chart-container.flex-row-reverse {
+		@apply flex-col-reverse md:flex-row-reverse;
+	}
+
+	.line-chart-container.flex-col {
+		@apply flex-col;
+	}
+
+	.line-chart-container.flex-col-reverse {
+		@apply flex-col-reverse;
+	}
+
+	.line-chart.is-sm {
+		@apply h-[200px];
+	}
+
+	.line-chart.is-md {
+		@apply h-[300px];
+	}
+
+	.line-chart.is-lg {
+		@apply h-[400px];
+	}
+
+	.line-chart.is-xl {
+		@apply h-[500px];
 	}
 
 	.line-chart {
@@ -17,7 +49,7 @@
 	}
 
 	.line-chart-axis-label {
-		@apply fill-on-muted text-xs;
+		@apply fill-on-muted;
 	}
 
 	.line-chart-grid-line {
@@ -31,7 +63,19 @@
 		fill: none;
 		stroke-linecap: round;
 		stroke-linejoin: round;
-		@apply transition-all duration-200 ease-in-out;
+		@apply transition-all duration-300 ease-in-out;
+	}
+
+	.line-chart-line.is-hovered {
+		stroke-width: 3;
+	}
+
+	.line-chart-line.has-glow {
+		filter: drop-shadow(0 0 6px currentColor);
+	}
+
+	.line-chart-line.has-glow.is-hovered {
+		filter: drop-shadow(0 0 10px currentColor);
 	}
 
 	.line-chart-line.is-primary {
@@ -62,13 +106,26 @@
 		@apply stroke-muted;
 	}
 
+	.line-chart-area {
+		@apply transition-all duration-300 ease-in-out;
+		pointer-events: none;
+	}
+
 	.line-chart-point {
 		stroke-width: 2;
-		@apply cursor-pointer transition-all duration-200 ease-in-out;
+		@apply cursor-pointer transition-all duration-300 ease-in-out;
 	}
 
-	.line-chart-point:hover {
-		r: 5;
+	.line-chart-point.is-hovered {
+		transform-origin: center;
+	}
+
+	.line-chart-point.has-glow {
+		filter: drop-shadow(0 0 4px currentColor);
+	}
+
+	.line-chart-point.has-glow.is-hovered {
+		filter: drop-shadow(0 0 8px currentColor);
 	}
 
 	.line-chart-point.is-primary {
@@ -111,19 +168,51 @@
 		font-size: 0.75rem;
 		font-weight: 500;
 		white-space: nowrap;
-		transform: translateY(-50%);
+		transform: translate(-50%, -100%);
+	}
+
+	.line-chart-tooltip-content {
+		@apply flex flex-col gap-1;
 	}
 
 	.line-chart-tooltip-title {
-		@apply font-semibold mb-1;
+		@apply font-semibold;
 	}
 
 	.line-chart-tooltip-row {
 		@apply flex items-center gap-2;
 	}
 
-	.line-chart-tooltip-label {
-		opacity: 0.8;
+	.line-chart-tooltip-color {
+		@apply w-2 h-2 rounded-full;
+	}
+
+	.line-chart-tooltip-color.is-primary {
+		background: var(--color-primary, #3b82f6);
+	}
+
+	.line-chart-tooltip-color.is-secondary {
+		background: var(--color-secondary, #6366f1);
+	}
+
+	.line-chart-tooltip-color.is-success {
+		background: var(--color-success, #22c55e);
+	}
+
+	.line-chart-tooltip-color.is-info {
+		background: var(--color-info, #06b6d4);
+	}
+
+	.line-chart-tooltip-color.is-warning {
+		background: var(--color-warning, #f59e0b);
+	}
+
+	.line-chart-tooltip-color.is-danger {
+		background: var(--color-danger, #ef4444);
+	}
+
+	.line-chart-tooltip-color.is-muted {
+		background: var(--color-muted, #9ca3af);
 	}
 
 	.line-chart-tooltip-value {
@@ -131,14 +220,23 @@
 	}
 
 	.line-chart-legend {
-		@apply flex flex-wrap gap-4 items-center justify-center mt-4 text-sm text-on-muted;
+		@apply flex gap-4 items-center justify-center text-sm text-on-muted text-nowrap;
+	}
+
+	.line-chart-legend.flex-col {
+		@apply flex-wrap md:flex-col;
+	}
+
+	.line-chart-legend.flex-row {
+		@apply flex-row flex-wrap;
 	}
 
 	.line-chart-legend-item {
-		@apply flex items-center gap-2 cursor-pointer transition-opacity duration-200;
+		@apply flex items-center gap-2 cursor-pointer transition-opacity duration-300;
 	}
 
-	.line-chart-legend-item:hover {
+	.line-chart-legend-item:hover,
+	.line-chart-legend-item.is-active {
 		@apply opacity-80;
 	}