ui-svelte 0.1.0

package/dist/charts/PieChart.svelte.d.ts

@@ -0,0 +1,28 @@
+type Color = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'muted';
+type DataPoint = {
+    label: string;
+    value: number;
+    color?: Color;
+};
+type Props = {
+    data?: DataPoint[];
+    colors?: Color[];
+    donut?: boolean;
+    donutWidth?: number;
+    showLabels?: boolean;
+    showValues?: boolean;
+    showLegend?: boolean;
+    showPercentages?: boolean;
+    centerLabel?: string;
+    centerValue?: string | number;
+    startAngle?: number;
+    padAngle?: number;
+    loading?: boolean;
+    empty?: boolean;
+    emptyText?: string;
+    class?: string;
+    chartClass?: string;
+};
+declare const PieChart: import("svelte").Component<Props, {}, "">;
+type PieChart = ReturnType<typeof PieChart>;
+export default PieChart;

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

@@ -0,0 +1,237 @@
+@layer components {
+	.arc-chart-container {
+		@apply relative w-full flex flex-col md:flex-row justify-center items-center gap-4;
+	}
+
+	.arc-chart {
+		@apply relative flex items-center justify-center w-auto h-56;
+	}
+
+	.arc-chart-svg {
+		@apply w-full h-full overflow-visible;
+	}
+
+	.arc-chart-background {
+		@apply fill-none stroke-muted;
+		stroke-opacity: 0.2;
+		stroke-linecap: round;
+	}
+
+	.arc-chart-arc {
+		@apply fill-none transition-all duration-200 ease-in-out cursor-pointer;
+		stroke-linecap: round;
+	}
+
+	.arc-chart-arc:hover {
+		opacity: 0.8;
+		transform: scale(1.02);
+		transform-origin: center;
+	}
+
+	.arc-chart-arc.is-primary {
+		@apply stroke-primary;
+	}
+
+	.arc-chart-arc.is-secondary {
+		@apply stroke-secondary;
+	}
+
+	.arc-chart-arc.is-success {
+		@apply stroke-success;
+	}
+
+	.arc-chart-arc.is-info {
+		@apply stroke-info;
+	}
+
+	.arc-chart-arc.is-warning {
+		@apply stroke-warning;
+	}
+
+	.arc-chart-arc.is-danger {
+		@apply stroke-danger;
+	}
+
+	.arc-chart-arc.is-muted {
+		@apply stroke-muted;
+	}
+
+	.arc-chart-point {
+		@apply transition-all duration-200 ease-in-out;
+		stroke-width: 2;
+	}
+
+	.arc-chart-point.is-primary {
+		@apply fill-primary stroke-on-primary;
+	}
+
+	.arc-chart-point.is-secondary {
+		@apply fill-secondary stroke-on-secondary;
+	}
+
+	.arc-chart-point.is-success {
+		@apply fill-success stroke-on-success;
+	}
+
+	.arc-chart-point.is-info {
+		@apply fill-info stroke-on-info;
+	}
+
+	.arc-chart-point.is-warning {
+		@apply fill-warning stroke-on-warning;
+	}
+
+	.arc-chart-point.is-danger {
+		@apply fill-danger stroke-on-danger;
+	}
+
+	.arc-chart-point.is-muted {
+		@apply fill-muted stroke-on-muted;
+	}
+
+	.arc-chart-value {
+		@apply fill-on-background font-bold;
+	}
+
+	.arc-chart-label {
+		@apply fill-on-background opacity-70;
+	}
+
+	.arc-chart-min-max {
+		@apply fill-on-background;
+	}
+
+	.arc-chart-tooltip {
+		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: translateY(-50%);
+	}
+
+	.arc-chart-tooltip-title {
+		font-weight: 600;
+		margin-bottom: 0.25rem;
+	}
+
+	.arc-chart-tooltip-row {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.arc-chart-tooltip-color {
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 50%;
+	}
+
+	.arc-chart-tooltip-color.is-primary {
+		background: var(--color-primary, #3b82f6);
+	}
+
+	.arc-chart-tooltip-color.is-secondary {
+		background: var(--color-secondary, #6366f1);
+	}
+
+	.arc-chart-tooltip-color.is-success {
+		background: var(--color-success, #22c55e);
+	}
+
+	.arc-chart-tooltip-color.is-info {
+		background: var(--color-info, #06b6d4);
+	}
+
+	.arc-chart-tooltip-color.is-warning {
+		background: var(--color-warning, #f59e0b);
+	}
+
+	.arc-chart-tooltip-color.is-danger {
+		background: var(--color-danger, #ef4444);
+	}
+
+	.arc-chart-tooltip-color.is-muted {
+		background: var(--color-muted, #9ca3af);
+	}
+
+	.arc-chart-tooltip-value {
+		font-weight: 600;
+	}
+
+	.arc-chart-loading {
+		@apply absolute inset-0 flex items-center justify-center bg-muted rounded-md;
+	}
+
+	.arc-chart-loading-spinner {
+		@apply w-8 h-8 text-primary;
+		animation: arc-chart-spin 1s linear infinite;
+	}
+
+	@keyframes arc-chart-spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.arc-chart-empty {
+		@apply absolute inset-0 flex flex-col items-center justify-center text-on-muted opacity-50 text-sm;
+	}
+
+	.arc-chart-legend {
+		@apply flex flex-wrap md:flex-col gap-2 items-center justify-center text-sm text-on-muted text-nowrap;
+	}
+
+	.arc-chart-legend-item {
+		@apply flex items-center gap-2 cursor-pointer transition-opacity duration-200;
+	}
+
+	.arc-chart-legend-item:hover {
+		@apply opacity-80;
+	}
+
+	.arc-chart-legend-color {
+		@apply w-3 h-3 rounded-sm;
+	}
+
+	.arc-chart-legend-color.is-primary {
+		@apply bg-primary;
+	}
+
+	.arc-chart-legend-color.is-secondary {
+		@apply bg-secondary;
+	}
+
+	.arc-chart-legend-color.is-success {
+		@apply bg-success;
+	}
+
+	.arc-chart-legend-color.is-info {
+		@apply bg-info;
+	}
+
+	.arc-chart-legend-color.is-warning {
+		@apply bg-warning;
+	}
+
+	.arc-chart-legend-color.is-danger {
+		@apply bg-danger;
+	}
+
+	.arc-chart-legend-color.is-muted {
+		@apply bg-muted;
+	}
+
+	.arc-chart-legend-value {
+		@apply text-xs opacity-70;
+	}
+}

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

@@ -0,0 +1,289 @@
+@layer components {
+	.area-chart-container {
+		@apply relative w-full flex flex-col md:flex-row justify-center items-center gap-4;
+	}
+
+	.area-chart {
+		@apply relative flex items-center justify-center w-auto h-56 text-on-muted;
+	}
+
+	.area-chart-svg {
+		@apply w-full h-full overflow-visible;
+	}
+
+	.area-chart-axis-line {
+		@apply stroke-muted;
+		stroke-width: 1;
+	}
+
+	.area-chart-axis-label {
+		@apply fill-on-muted text-xs;
+	}
+
+	.area-chart-grid-line {
+		@apply stroke-muted;
+		stroke-opacity: 0.3;
+		stroke-width: 1;
+		stroke-dasharray: 2, 2;
+	}
+
+	.area-chart-area.is-primary {
+		@apply fill-primary;
+	}
+
+	.area-chart-area.is-secondary {
+		@apply fill-secondary;
+	}
+
+	.area-chart-area.is-success {
+		@apply fill-success;
+	}
+
+	.area-chart-area.is-info {
+		@apply fill-info;
+	}
+
+	.area-chart-area.is-warning {
+		@apply fill-warning;
+	}
+
+	.area-chart-area.is-danger {
+		@apply fill-danger;
+	}
+
+	.area-chart-area.is-muted {
+		@apply fill-muted;
+	}
+
+	.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;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+
+	.area-chart-line.is-primary {
+		@apply stroke-primary;
+	}
+
+	.area-chart-line.is-secondary {
+		@apply stroke-secondary;
+	}
+
+	.area-chart-line.is-success {
+		@apply stroke-success;
+	}
+
+	.area-chart-line.is-info {
+		@apply stroke-info;
+	}
+
+	.area-chart-line.is-warning {
+		@apply stroke-warning;
+	}
+
+	.area-chart-line.is-danger {
+		@apply stroke-danger;
+	}
+
+	.area-chart-line.is-muted {
+		@apply stroke-muted;
+	}
+
+	.area-chart-point {
+		@apply cursor-pointer transition-all duration-200 ease-in-out;
+		stroke-width: 2;
+	}
+
+	.area-chart-point:hover {
+		r: 5;
+	}
+
+	.area-chart-point.is-primary {
+		@apply fill-primary stroke-on-primary;
+	}
+
+	.area-chart-point.is-secondary {
+		@apply fill-secondary stroke-on-secondary;
+	}
+
+	.area-chart-point.is-success {
+		@apply fill-success stroke-on-success;
+	}
+
+	.area-chart-point.is-info {
+		@apply fill-info stroke-on-info;
+	}
+
+	.area-chart-point.is-warning {
+		@apply fill-warning stroke-on-warning;
+	}
+
+	.area-chart-point.is-danger {
+		@apply fill-danger stroke-on-danger;
+	}
+
+	.area-chart-point.is-muted {
+		@apply fill-muted stroke-on-muted;
+	}
+
+	.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%);
+	}
+
+	.area-chart-tooltip-title {
+		@apply font-semibold mb-1;
+	}
+
+	.area-chart-tooltip-row {
+		@apply flex items-center gap-2;
+	}
+
+	.area-chart-tooltip-label {
+		@apply opacity-80;
+	}
+
+	.area-chart-tooltip-value {
+		@apply font-semibold;
+	}
+
+	.area-chart-legend {
+		@apply flex flex-wrap md:flex-col gap-2 items-center justify-center text-sm text-on-muted text-nowrap;
+	}
+
+	.area-chart-legend-item {
+		@apply flex items-center gap-2 cursor-pointer transition-opacity duration-200;
+	}
+
+	.area-chart-legend-item:hover {
+		@apply opacity-80;
+	}
+
+	.area-chart-legend-color {
+		@apply w-3 h-3 rounded-sm;
+	}
+
+	.area-chart-legend-color.is-primary {
+		@apply bg-primary;
+	}
+
+	.area-chart-legend-color.is-secondary {
+		@apply bg-secondary;
+	}
+
+	.area-chart-legend-color.is-success {
+		@apply bg-success;
+	}
+
+	.area-chart-legend-color.is-info {
+		@apply bg-info;
+	}
+
+	.area-chart-legend-color.is-warning {
+		@apply bg-warning;
+	}
+
+	.area-chart-legend-color.is-danger {
+		@apply bg-danger;
+	}
+
+	.area-chart-legend-color.is-muted {
+		@apply bg-muted;
+	}
+
+	.area-chart-loading {
+		@apply absolute inset-0 flex items-center justify-center bg-muted rounded-md;
+	}
+
+	.area-chart-loading-spinner {
+		@apply w-8 h-8 text-primary;
+		animation: area-chart-spin 1s linear infinite;
+	}
+
+	@keyframes area-chart-spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.area-chart-empty {
+		@apply absolute inset-0 flex flex-col items-center justify-center text-on-muted opacity-50 text-sm;
+	}
+
+	.area-chart-empty-icon {
+		@apply w-12 h-12 mb-2;
+	}
+}

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

@@ -0,0 +1,167 @@
+@layer components {
+	.bar-chart-container {
+		@apply relative w-full h-full;
+	}
+
+	.bar-chart {
+		@apply relative w-full h-full text-on-muted;
+	}
+
+	.bar-chart-svg {
+		@apply w-full h-full overflow-visible;
+	}
+
+	.bar-chart-axis-line {
+		@apply stroke-muted;
+		stroke-width: 1;
+	}
+
+	.bar-chart-axis-label {
+		@apply fill-on-muted text-xs;
+	}
+
+	.bar-chart-grid-line {
+		@apply stroke-muted;
+		stroke-opacity: 0.3;
+		stroke-width: 1;
+		stroke-dasharray: 2, 2;
+	}
+
+	.bar-chart-bar {
+		@apply transition-all duration-200 ease-in-out cursor-pointer;
+	}
+
+	.bar-chart-bar:hover {
+		opacity: 0.8;
+		filter: brightness(1.1);
+	}
+
+	.bar-chart-bar.is-primary {
+		@apply fill-primary;
+	}
+
+	.bar-chart-bar.is-secondary {
+		@apply fill-secondary;
+	}
+
+	.bar-chart-bar.is-success {
+		@apply fill-success;
+	}
+
+	.bar-chart-bar.is-info {
+		@apply fill-info;
+	}
+
+	.bar-chart-bar.is-warning {
+		@apply fill-warning;
+	}
+
+	.bar-chart-bar.is-danger {
+		@apply fill-danger;
+	}
+
+	.bar-chart-bar.is-muted {
+		@apply fill-muted;
+	}
+
+	.bar-chart-tooltip {
+		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: translateY(-50%);
+	}
+
+	.bar-chart-tooltip-title {
+		@apply font-semibold mb-1;
+	}
+
+	.bar-chart-tooltip-row {
+		@apply flex items-center gap-2;
+	}
+
+	.bar-chart-tooltip-label {
+		opacity: 0.8;
+	}
+
+	.bar-chart-tooltip-value {
+		@apply font-semibold;
+	}
+
+	.bar-chart-legend {
+		@apply flex flex-wrap gap-4 items-center justify-center mt-4 text-sm text-on-muted;
+	}
+
+	.bar-chart-legend-item {
+		@apply flex items-center gap-2 cursor-pointer transition-opacity duration-200;
+	}
+
+	.bar-chart-legend-item:hover {
+		@apply opacity-80;
+	}
+
+	.bar-chart-legend-color {
+		@apply w-3 h-3 rounded-sm;
+	}
+
+	.bar-chart-legend-color.is-primary {
+		@apply bg-primary;
+	}
+
+	.bar-chart-legend-color.is-secondary {
+		@apply bg-secondary;
+	}
+
+	.bar-chart-legend-color.is-success {
+		@apply bg-success;
+	}
+
+	.bar-chart-legend-color.is-info {
+		@apply bg-info;
+	}
+
+	.bar-chart-legend-color.is-warning {
+		@apply bg-warning;
+	}
+
+	.bar-chart-legend-color.is-danger {
+		@apply bg-danger;
+	}
+
+	.bar-chart-legend-color.is-muted {
+		@apply bg-muted;
+	}
+
+	.bar-chart-loading {
+		@apply absolute inset-0 flex items-center justify-center bg-muted rounded-md;
+	}
+
+	.bar-chart-loading-spinner {
+		@apply w-8 h-8 text-primary;
+		animation: bar-chart-spin 1s linear infinite;
+	}
+
+	@keyframes bar-chart-spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.bar-chart-empty {
+		@apply absolute inset-0 flex flex-col items-center justify-center text-on-muted opacity-50 text-sm;
+	}
+
+	.bar-chart-empty-icon {
+		@apply w-12 h-12 mb-2;
+	}
+}