ui-svelte 0.1.0

package/dist/charts/css/candlestick.css

@@ -0,0 +1,197 @@
+@layer components {
+	.candlestick-chart-container {
+		@apply relative w-full h-full;
+	}
+
+	.candlestick-chart {
+		@apply relative w-full h-56 text-on-muted;
+	}
+
+	.candlestick-chart-svg {
+		@apply w-full h-full overflow-visible;
+	}
+
+	.candlestick-chart-axis-line {
+		@apply stroke-muted;
+		stroke-width: 1;
+	}
+
+	.candlestick-chart-axis-label {
+		@apply fill-on-muted text-xs;
+		user-select: none;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+	}
+
+	.candlestick-chart-grid-line {
+		@apply stroke-muted;
+		stroke-opacity: 0.3;
+		stroke-width: 1;
+		stroke-dasharray: 2, 2;
+	}
+
+	.candlestick-chart-candle {
+		@apply cursor-pointer;
+	}
+
+	.candlestick-chart-candle:hover {
+		@apply opacity-80;
+	}
+
+	.candlestick-chart-candle.is-primary {
+		@apply fill-primary stroke-primary;
+	}
+
+	.candlestick-chart-candle.is-secondary {
+		@apply fill-secondary stroke-secondary;
+	}
+
+	.candlestick-chart-candle.is-success {
+		@apply fill-success stroke-success;
+	}
+
+	.candlestick-chart-candle.is-info {
+		@apply fill-info stroke-info;
+	}
+
+	.candlestick-chart-candle.is-warning {
+		@apply fill-warning stroke-warning;
+	}
+
+	.candlestick-chart-candle.is-danger {
+		@apply fill-danger stroke-danger;
+	}
+
+	.candlestick-chart-candle.is-muted {
+		@apply fill-muted stroke-muted;
+	}
+
+	.candlestick-chart-wick.is-primary {
+		@apply stroke-primary;
+	}
+
+	.candlestick-chart-wick.is-secondary {
+		@apply stroke-secondary;
+	}
+
+	.candlestick-chart-wick.is-success {
+		@apply stroke-success;
+	}
+
+	.candlestick-chart-wick.is-info {
+		@apply stroke-info;
+	}
+
+	.candlestick-chart-wick.is-warning {
+		@apply stroke-warning;
+	}
+
+	.candlestick-chart-wick.is-danger {
+		@apply stroke-danger;
+	}
+
+	.candlestick-chart-wick.is-muted {
+		@apply stroke-muted;
+	}
+
+	.candlestick-chart-volume {
+		@apply opacity-30;
+	}
+
+	.candlestick-chart-volume.is-primary {
+		@apply fill-primary;
+	}
+
+	.candlestick-chart-volume.is-secondary {
+		@apply fill-secondary;
+	}
+
+	.candlestick-chart-volume.is-success {
+		@apply fill-success;
+	}
+
+	.candlestick-chart-volume.is-info {
+		@apply fill-info;
+	}
+
+	.candlestick-chart-volume.is-warning {
+		@apply fill-warning;
+	}
+
+	.candlestick-chart-volume.is-danger {
+		@apply fill-danger;
+	}
+
+	.candlestick-chart-volume.is-muted {
+		@apply fill-muted;
+	}
+
+	.candlestick-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%);
+	}
+
+	.candlestick-chart-tooltip-title {
+		@apply font-semibold text-sm mb-1.5;
+	}
+
+	.candlestick-chart-tooltip-rows {
+		@apply flex flex-col gap-0.5;
+	}
+
+	.candlestick-chart-tooltip-row {
+		@apply flex items-center justify-between gap-3;
+	}
+
+	.candlestick-chart-tooltip-label {
+		@apply opacity-80;
+	}
+
+	.candlestick-chart-tooltip-value {
+		@apply font-semibold;
+	}
+
+	.candlestick-chart-tooltip-volume {
+		@apply pt-1 mt-1;
+		border-top: 1px solid rgba(255, 255, 255, 0.2);
+	}
+
+	.candlestick-chart-loading {
+		@apply flex flex-col items-center justify-center h-full;
+	}
+
+	.candlestick-chart-loading-icon {
+		@apply h-12 w-auto text-primary;
+	}
+
+	.candlestick-chart-empty {
+		@apply absolute inset-0 flex flex-col items-center justify-center text-on-muted opacity-50 text-sm;
+	}
+
+	.candlestick-chart-empty-icon {
+		@apply w-12 h-12 mb-2;
+	}
+
+	.candlestick-chart-dragging {
+		cursor: grabbing !important;
+	}
+
+	.candlestick-chart-svg {
+		cursor: grab;
+	}
+
+	.candlestick-chart-scrollbar {
+		@apply relative w-full h-2 bg-muted rounded-full mt-2;
+	}
+}

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

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

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

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