@svkit/styles 0.0.2-beta.0

package/dist/components/slider.css

@@ -0,0 +1,43 @@
+@layer components {
+	.sv-slider {
+		@apply relative flex w-full touch-none items-center select-none;
+		@apply data-disabled:opacity-50;
+		@apply data-vertical:h-full data-vertical:w-auto data-vertical:flex-col;
+	}
+
+	.sv-slider[data-orientation='vertical'] {
+		@apply min-h-40;
+	}
+
+	.sv-slider-track {
+		@apply bg-muted relative grow overflow-hidden rounded-full;
+	}
+
+	.sv-slider-track[data-orientation='horizontal'] {
+		@apply h-1 w-full;
+	}
+
+	.sv-slider-track[data-orientation='vertical'] {
+		@apply h-full w-1;
+	}
+
+	.sv-slider-range {
+		@apply bg-primary absolute select-none;
+	}
+
+	.sv-slider-track[data-orientation='horizontal'] .sv-slider-range {
+		@apply h-full;
+	}
+
+	.sv-slider-track[data-orientation='vertical'] .sv-slider-range {
+		@apply w-full;
+	}
+
+	.sv-slider-thumb {
+		@apply relative block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none;
+		@apply border-ring ring-ring/50;
+		@apply focus-visible:ring-3 focus-visible:outline-hidden;
+		@apply disabled:pointer-events-none disabled:opacity-50;
+		@apply hover:ring-3 active:ring-3;
+	}
+}

package/dist/components/slider.js

@@ -0,0 +1 @@
+import '../styles.css';

package/dist/components/spinner.css

@@ -0,0 +1,5 @@
+@layer components {
+	.sv-spinner {
+		@apply size-4 animate-spin;
+	}
+}

package/dist/components/spinner.js

@@ -0,0 +1 @@
+import '../styles.css';

package/dist/components/switch.css

@@ -0,0 +1,46 @@
+@layer components {
+	.sv-switch {
+		@apply shrink-0 rounded-full border border-transparent transition-colors;
+		@apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3;
+		@apply bg-surface;
+		@apply data-state-checked:bg-primary;
+		@apply data-disabled:cursor-not-allowed data-disabled:opacity-50;
+	}
+
+	.sv-switch[data-size='sm'] {
+		@apply h-[14px] w-[24px];
+	}
+
+	.sv-switch[data-size='md'] {
+		@apply h-[18px] w-[32px];
+	}
+
+	.sv-switch-thumb {
+		@apply bg-background block rounded-full transition-transform;
+		@apply pointer-events-none ring-0;
+	}
+
+	.sv-switch[data-size='sm'] .sv-switch-thumb {
+		@apply size-3;
+	}
+
+	.sv-switch[data-size='md'] .sv-switch-thumb {
+		@apply size-4;
+	}
+
+	.sv-switch[data-size='sm'][data-state='checked'] .sv-switch-thumb {
+		transform: translateX(calc(100% - 2px));
+	}
+
+	.sv-switch[data-size='md'][data-state='checked'] .sv-switch-thumb {
+		transform: translateX(calc(100% - 2px));
+	}
+
+	.sv-switch[data-state='unchecked'] .sv-switch-thumb {
+		transform: translateX(0);
+	}
+
+	.sv-switch[aria-invalid='true'] {
+		@apply border-danger ring-danger/20 ring-3;
+	}
+}

package/dist/components/switch.js

@@ -0,0 +1 @@
+import '../styles.css';

package/dist/components/table.css

@@ -0,0 +1,10 @@
+@layer components {
+	.sv-table-container { @apply relative w-full overflow-x-auto; }
+	.sv-table { @apply w-full caption-bottom text-sm; }
+	.sv-table-header { @apply [&_tr]:border-b; }
+	.sv-table-body { @apply [&_tr:last-child]:border-0; }
+	.sv-table-row { @apply border-b border-border transition-colors hover:bg-muted/50 data-state-selected:bg-muted; }
+	.sv-table-head { @apply h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0; }
+	.sv-table-cell { @apply p-2 align-middle [&:has([role=checkbox])]:pr-0; }
+	.sv-table-caption { @apply text-muted-foreground mt-4 text-sm; }
+}

package/dist/components/table.js

@@ -0,0 +1 @@
+import '../styles.css';

package/dist/components/tabs.css

@@ -0,0 +1,40 @@
+@layer components {
+	.sv-tabs {
+		@apply flex gap-2 data-orientation-horizontal:flex-col;
+	}
+
+	.sv-tabs-list {
+		@apply text-muted-foreground inline-flex h-8 w-fit items-center justify-center rounded-lg p-[3px];
+		@apply bg-muted;
+	}
+
+	.sv-tabs-list[data-variant='line'] {
+		@apply gap-1 rounded-none bg-transparent;
+	}
+
+	.sv-tabs-trigger {
+		@apply text-foreground/60 hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all;
+		@apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3;
+		@apply disabled:pointer-events-none disabled:opacity-50;
+
+		&[data-state='active'] {
+			@apply bg-background text-foreground shadow-sm;
+		}
+	}
+
+	.sv-tabs-list[data-variant='line'] .sv-tabs-trigger[data-state='active'] {
+		@apply bg-transparent shadow-none;
+	}
+
+	.sv-tabs-list:not([data-variant='line']) .sv-tabs-trigger::after {
+		@apply bg-foreground absolute inset-x-0 bottom-[-5px] h-0.5 rounded-full opacity-0 transition-opacity content-[''];
+	}
+
+	.sv-tabs-list:not([data-variant='line']) .sv-tabs-trigger[data-state='active']::after {
+		@apply opacity-100;
+	}
+
+	.sv-tabs-content {
+		@apply flex-1 text-sm outline-none;
+	}
+}

package/dist/components/tabs.js

@@ -0,0 +1 @@
+import '../styles.css';

package/dist/components/textarea.css

@@ -0,0 +1,11 @@
+@layer components {
+	.sv-textarea {
+		@apply placeholder:text-muted-foreground border-border flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none md:text-sm;
+		@apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3;
+		@apply disabled:cursor-not-allowed disabled:opacity-50;
+	}
+
+	.sv-textarea[aria-invalid='true'] {
+		@apply border-danger ring-danger/20 ring-3;
+	}
+}

package/dist/components/textarea.js

@@ -0,0 +1 @@
+import '../styles.css';

package/dist/components/toast.css

@@ -0,0 +1,156 @@
+@layer components {
+	.sv-toast-viewport {
+		@apply fixed z-50 mx-auto flex w-62.5 sm:w-75;
+	}
+
+	.sv-toast-viewport[data-position='bottom-right'] {
+		@apply top-auto right-4 bottom-4 sm:right-8 sm:bottom-8;
+	}
+
+	.sv-toast-root {
+		@apply border-border absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 h-(--height) w-full origin-bottom transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] rounded-lg border bg-clip-padding p-4 shadow-lg select-none [--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s] after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:transform-[translateY(150%)] data-ending-style:opacity-0 data-expanded:h-(--toast-height) data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))] data-limited:opacity-0 data-starting-style:transform-[translateY(150%)] data-ending-style:data-swipe-direction-down:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-swipe-direction-down:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-swipe-direction-left:transform-[translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-swipe-direction-left:transform-[translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-swipe-direction-right:transform-[translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-swipe-direction-right:transform-[translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-swipe-direction-up:transform-[translateY(calc(var(--toast-swipe-movement-y)-150%))];
+	}
+
+	.sv-toast-content {
+		@apply overflow-hidden transition-opacity duration-250 data-behind:pointer-events-none data-behind:opacity-0 data-expanded:pointer-events-auto data-expanded:opacity-100;
+	}
+
+	.sv-toast-title {
+		@apply text-surface-foreground text-[0.975rem] leading-5;
+	}
+
+	.sv-toast-description {
+		@apply text-surface-foreground/85 text-sm leading-5;
+	}
+
+	.sv-toast-icon {
+		@apply relative size-5 rounded-[10px] opacity-0;
+		transform: rotate(45deg);
+		animation: circleAnimation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+		animation-delay: 150ms;
+	}
+
+	.sv-toast-icon[data-type='success'] {
+		@apply bg-success/75;
+	}
+
+	.sv-toast-icon[data-type='error'] {
+		@apply bg-danger/75;
+	}
+
+	.sv-toast-icon[data-type='warning'] {
+		@apply bg-warning/75;
+	}
+
+	.sv-toast-icon[data-type='loading'] {
+		@apply bg-primary/75;
+		animation:
+			circleAnimation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
+			toastLoadingSpin 1.2s linear infinite;
+		animation-delay: 150ms, 450ms;
+	}
+
+	.sv-toast-icon[data-type='message'] {
+		/* @apply bg-primary/75; */
+	}
+
+	.sv-toast-icon[data-type='error']::after,
+	.sv-toast-icon[data-type='error']::before {
+		content: '';
+		animation: firstLineAnimation 0.15s ease-out forwards;
+		animation-delay: 150ms;
+		position: absolute;
+		border-radius: 3px;
+		opacity: 0;
+		background: var(--color-danger-foreground);
+		bottom: 9px;
+		left: 4px;
+		height: 2px;
+		width: 12px;
+	}
+
+	.sv-toast-icon[data-type='error']::after {
+		animation: secondLineAnimation 0.15s ease-out forwards;
+		animation-delay: 180ms;
+		transform: rotate(90deg);
+	}
+
+	.sv-toast-icon[data-type='success']::after {
+		content: '';
+		box-sizing: border-box;
+		animation: checkmarkAnimation 0.2s ease-out forwards;
+		opacity: 0;
+		animation-delay: 200ms;
+		position: absolute;
+		border-right: 2px solid;
+		border-bottom: 2px solid;
+		border-color: var(--color-primary-foreground);
+		bottom: 6px;
+		left: 6px;
+		height: 10px;
+		width: 6px;
+	}
+
+	@keyframes firstLineAnimation {
+		from {
+			transform: scale(0);
+			opacity: 0;
+		}
+		to {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+
+	@keyframes secondLineAnimation {
+		from {
+			transform: scale(0) rotate(90deg);
+			opacity: 0;
+		}
+		to {
+			transform: scale(1) rotate(90deg);
+			opacity: 1;
+		}
+	}
+
+	@keyframes checkmarkAnimation {
+		0% {
+			height: 0;
+			width: 0;
+			opacity: 0;
+		}
+		40% {
+			height: 0;
+			width: 6px;
+			opacity: 1;
+		}
+		100% {
+			opacity: 1;
+			height: 10px;
+		}
+	}
+
+	@keyframes toastLoadingSpin {
+		from {
+			transform: rotate(45deg);
+		}
+		to {
+			transform: rotate(405deg);
+		}
+	}
+
+	@keyframes circleAnimation {
+		from {
+			transform: scale(0) rotate(45deg);
+			opacity: 0;
+		}
+		to {
+			transform: scale(1) rotate(45deg);
+			opacity: 1;
+		}
+	}
+
+	.sv-toast-close {
+		@apply text-surface-foreground/50 hover:text-surface-foreground absolute top-2 right-2 flex h-5 w-5 cursor-pointer items-center justify-center rounded-sm border-none bg-transparent;
+	}
+}

package/dist/components/toast.js

@@ -0,0 +1 @@
+import '../styles.css';

package/dist/components/toggle-group.css

@@ -0,0 +1,13 @@
+@layer components {
+	.sv-toggle-group {
+		@apply flex w-fit flex-row items-center gap-2;
+	}
+
+	.sv-toggle-group[data-orientation='vertical'] {
+		@apply flex-col items-stretch;
+	}
+
+	.sv-toggle-group-item {
+		@apply shrink-0;
+	}
+}

package/dist/components/toggle-group.js

@@ -0,0 +1 @@
+import '../styles.css';

package/dist/components/toggle.css

@@ -0,0 +1,25 @@
+@layer components {
+	.sv-toggle {
+		@apply inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none;
+		@apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3;
+		@apply hover:text-foreground hover:bg-muted;
+		@apply data-state-on:bg-muted;
+		@apply [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
+	}
+
+	.sv-toggle[data-size='sm'] {
+		@apply h-7 min-w-7 px-2.5 text-xs;
+	}
+
+	.sv-toggle[data-size='md'] {
+		@apply h-8 min-w-8 px-2.5;
+	}
+
+	.sv-toggle[data-size='lg'] {
+		@apply h-9 min-w-9 px-2.5;
+	}
+
+	.sv-toggle[data-variant='outline'] {
+		@apply border-border border bg-transparent;
+	}
+}

package/dist/components/toggle.js

@@ -0,0 +1 @@
+import '../styles.css';

package/dist/components/tooltip.css

@@ -0,0 +1,90 @@
+@layer components {
+  /* =========================
+     TOOLTIP CONTENT
+  ========================== */
+
+  .sv-tooltip-content {
+    @apply inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs bg-foreground text-background;
+
+    /* Open animations */
+    &[data-state="open"],
+    &[data-state="delayed-open"] {
+      @apply animate-in fade-in-0 zoom-in-95;
+    }
+
+    /* Close animation */
+    &[data-state="closed"] {
+      @apply animate-out fade-out-0 zoom-out-95;
+    }
+
+    /* Slide direction — physical sides */
+    &[data-side="bottom"] {
+      @apply slide-in-from-top-2;
+    }
+    &[data-side="top"] {
+      @apply slide-in-from-bottom-2;
+    }
+    &[data-side="left"] {
+      @apply slide-in-from-right-2;
+    }
+    &[data-side="right"] {
+      @apply slide-in-from-left-2;
+    }
+
+    /* Slide direction — logical sides */
+    &[data-side="inline-start"] {
+      @apply slide-in-from-right-2;
+    }
+    &[data-side="inline-end"] {
+      @apply slide-in-from-left-2;
+    }
+
+    /* kbd slot adjustments */
+    &:has([data-slot="kbd"]) {
+      padding-inline-end: 0.375rem;
+    }
+
+    /* Styles for nested kbd elements */
+    & [data-slot="kbd"] {
+      @apply relative isolate z-50 rounded-sm;
+    }
+  }
+
+  /* =========================
+     TOOLTIP ARROW
+  ========================== */
+
+  .sv-tooltip-arrow {
+    @apply size-2.5 rotate-45 rounded-xs bg-foreground fill-foreground;
+
+    /* Physical side offsets */
+    &[data-side="top"] {
+      translate: 50% calc(-50% + 2px);
+    }
+
+    &[data-side="bottom"] {
+      translate: -50% calc(- ((-50% + 1px)));
+    }
+
+    &[data-side="right"] {
+      translate: calc(50% + 2px) 50%;
+    }
+
+    &[data-side="left"] {
+      translate: 0 calc(- (50% - 3px));
+    }
+
+    /* Logical side offsets */
+    &[data-side="inline-end"] {
+      top: 50% !important;
+      left: -0.25rem;
+      translate: 0 -50%;
+    }
+
+    &[data-side="inline-start"] {
+      top: 50% !important;
+      right: -0.25rem;
+      translate: 0 -50%;
+    }
+  }
+}

package/dist/components/tooltip.js

@@ -0,0 +1 @@
+import '../styles.css';

package/dist/index-full.css

@@ -0,0 +1,11 @@
+/* @import "tailwindcss"; */
+@import "tw-animate-css";
+
+@import "./src/tokens/variables.css";
+@import "./src/tokens/interactions.css";
+
+@import "./src/themes/default.css";
+
+@import "./src/base/base.css";
+
+@import "./src/components/index.css";

package/dist/index.css

@@ -0,0 +1,9 @@
+/* @import "tailwindcss"; */
+@import "tw-animate-css";
+
+@import "./src/tokens/variables.css";
+@import "./src/tokens/interactions.css";
+
+@import "./src/themes/default.css";
+
+@import "./src/base/base.css";

package/dist/index.js

@@ -0,0 +1 @@
+import './styles.css';