@svkit/styles 0.0.2-beta.0

package/dist/components/accordion.css

@@ -0,0 +1,82 @@
+@layer components {
+	/* =========================
+     ROOT
+  ========================== */
+
+	.sv-accordion {
+		@apply flex w-full flex-col rounded-lg px-3;
+		/* @apply flex w-full flex-col bg-surface px-3 rounded-lg; */
+	}
+
+	.sv-accordion:is(.sv-variant--surface, [data-variant='surface']) {
+		@apply bg-surface;
+	}
+
+	/* =========================
+     ITEM
+  ========================== */
+
+	.sv-accordion-item {
+		@apply border-border not-last:border-b;
+	}
+
+	/* =========================
+     TRIGGER
+  ========================== */
+	/* group/accordion-trigger */
+	.sv-accordion-trigger {
+		@apply relative flex flex-1 items-start justify-between;
+		@apply border border-transparent transition-all outline-none;
+		@apply disabled:pointer-events-none disabled:opacity-50;
+
+		/* Layout & typography */
+		@apply rounded-lg py-2.5 text-left text-sm font-medium hover:underline;
+
+		/* Focus visible */
+
+		@apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3;
+
+		/* Trigger icon — targets both ChevronDown and ChevronUp via data-slot */
+		& [data-slot='accordion-trigger-icon'] {
+			@apply text-muted-foreground ml-auto size-4;
+		}
+
+		& [data-chevron-up] {
+			@apply pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline;
+		}
+
+		& [data-chevron-down] {
+			@apply pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden;
+		}
+	}
+
+	/* =========================
+     CONTENT
+  ========================== */
+
+	.sv-accordion-content {
+		@apply text-sm;
+
+		/* Open / close animations */
+		&[data-state='open'] {
+			@apply animate-accordion-down;
+		}
+
+		&[data-state='closed'] {
+			@apply animate-accordion-up;
+		}
+	}
+
+	.sv-accordion-content-inner {
+		@apply pt-0 pb-2.5;
+
+		/* Rich text defaults inside content */
+		& a {
+			@apply hover:text-foreground underline underline-offset-3;
+		}
+
+		& p:not(:last-child) {
+			@apply mb-4;
+		}
+	}
+}

package/dist/components/accordion.js

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

package/dist/components/alert-dialog.css

@@ -0,0 +1,26 @@
+@layer components {
+	.sv-alert-dialog-overlay {
+		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs;
+	}
+
+	.sv-alert-dialog-content {
+		@apply bg-surface text-surface-foreground border-border fixed top-1/2 left-1/2 z-50 grid w-full max-w-xs -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl border p-4 shadow-lg outline-none sm:max-w-sm;
+		@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95;
+	}
+
+	.sv-alert-dialog-header {
+		@apply flex flex-col gap-1.5 text-center sm:text-left;
+	}
+
+	.sv-alert-dialog-title {
+		@apply text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2;
+	}
+
+	.sv-alert-dialog-description {
+		@apply text-muted-foreground text-sm;
+	}
+
+	.sv-alert-dialog-footer {
+		@apply border-border bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end;
+	}
+}

package/dist/components/alert-dialog.js

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

package/dist/components/alert.css

@@ -0,0 +1,21 @@
+@layer components {
+	.sv-alert {
+		@apply relative grid w-full gap-0.5 rounded-lg border border-border px-2.5 py-2 text-left text-sm;
+	}
+
+	.sv-alert[data-variant='danger'] {
+		@apply border-danger/50 text-danger;
+	}
+
+	.sv-alert-title {
+		@apply font-medium;
+	}
+
+	.sv-alert-description {
+		@apply text-muted-foreground text-sm;
+	}
+
+	.sv-alert-action {
+		@apply absolute top-2 right-2;
+	}
+}

package/dist/components/alert.js

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

package/dist/components/avatar.css

@@ -0,0 +1,158 @@
+@layer components {
+  /* =========================
+     AVATAR ROOT
+  ========================== */
+
+  .sv-avatar {
+    /* Default size */
+    width: 2rem; /* 32px */
+    height: 2rem;
+
+    border-radius: 9999px;
+
+    /* Inner border overlay via ::after — adapts to light/dark via mix-blend */
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: 9999px;
+      border: var(--border-width) solid var(--color-border);
+      mix-blend-mode: darken;
+      pointer-events: none;
+
+      @media (prefers-color-scheme: dark) {
+        mix-blend-mode: lighten;
+      }
+    }
+
+    /* Sizes */
+    &[data-size="sm"] {
+      width: 1.5rem; /* 24px */
+      height: 1.5rem;
+    }
+
+    &[data-size="lg"] {
+      width: 2.5rem; /* 40px */
+      height: 2.5rem;
+    }
+  }
+
+  /* =========================
+     AVATAR IMAGE
+  ========================== */
+
+  .sv-avatar-image {
+    border-radius: 9999px;
+    aspect-ratio: 1;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* =========================
+     AVATAR FALLBACK
+  ========================== */
+
+  .sv-avatar-fallback {
+    @apply bg-muted text-muted-foreground flex size-full items-center justify-center text-sm;
+    border-radius: 9999px;
+    font-size: 0.875rem;
+
+    .group\/avatar[data-size="sm"] & {
+      font-size: 0.75rem;
+    }
+  }
+
+  /* =========================
+     AVATAR BADGE
+  ========================== */
+
+  .sv-avatar-badge {
+    @apply bg-primary text-primary-foreground ring-background;
+
+    /* sm */
+    .group\/avatar[data-size="sm"] & {
+      width: 0.5rem;
+      height: 0.5rem;
+
+      & > svg {
+        display: none;
+      }
+    }
+
+    /* default */
+    .group\/avatar[data-size="default"] & {
+      width: 0.625rem;
+      height: 0.625rem;
+
+      & > svg {
+        width: 0.5rem;
+        height: 0.5rem;
+      }
+    }
+
+    /* lg */
+    .group\/avatar[data-size="lg"] & {
+      width: 0.75rem;
+      height: 0.75rem;
+
+      & > svg {
+        width: 0.5rem;
+        height: 0.5rem;
+      }
+    }
+  }
+
+  /* =========================
+     AVATAR GROUP
+  ========================== */
+
+  .sv-avatar-group {
+    /* Avatars inside the group get a ring border */
+    & [data-slot="avatar"] {
+      @apply ring-background ring-2;
+    }
+  }
+
+  /* =========================
+     AVATAR GROUP COUNT
+  ========================== */
+
+  .sv-avatar-group-count {
+    @apply bg-muted text-muted-foreground;
+
+    border-radius: 9999px;
+    font-size: 0.875rem;
+
+    /* Default size — matches avatar default */
+    width: 2rem;
+    height: 2rem;
+
+    & > svg {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    /* sm — driven by parent group */
+    .group\/avatar-group:has([data-slot="avatar"][data-size="sm"]) & {
+      width: 1.5rem;
+      height: 1.5rem;
+
+      & > svg {
+        width: 0.75rem;
+        height: 0.75rem;
+      }
+    }
+
+    /* lg */
+    .group\/avatar-group:has([data-slot="avatar"][data-size="lg"]) & {
+      width: 2.5rem;
+      height: 2.5rem;
+
+      & > svg {
+        width: 1.25rem;
+        height: 1.25rem;
+      }
+    }
+  }
+}

package/dist/components/avatar.js

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

package/dist/components/badge.css

@@ -0,0 +1,125 @@
+@layer components {
+  .sv-badge {
+    @apply inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap select-none;
+
+    height: 1.25rem; /* 20px */
+    gap: 0.25rem;
+    border-radius: 9999px;
+    padding-inline: 0.5rem;
+    padding-block: 0.125rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+
+    border: var(--border-width) solid transparent;
+    background-color: var(--sv-bg);
+    color: var(--sv-fg);
+
+    transition: var(--transition-colors);
+
+    /* Icon adjustments */
+    &:has([data-icon="inline-start"]) {
+      padding-inline-start: 0.375rem;
+    }
+
+    &:has([data-icon="inline-end"]) {
+      padding-inline-end: 0.375rem;
+    }
+
+    & > svg {
+      width: 0.75rem !important;
+      height: 0.75rem !important;
+      flex-shrink: 0;
+      pointer-events: none;
+    }
+
+    /* Focus visible */
+    &:focus-visible {
+      outline: none;
+      border-color: var(--color-ring);
+      box-shadow: 0 0 0 3px var(--color-ring-shadow);
+    }
+
+    /* Invalid */
+    &[aria-invalid="true"] {
+      border-color: var(--color-danger);
+      box-shadow: 0 0 0 3px
+        color-mix(in srgb, var(--color-danger) 20%, transparent);
+    }
+  }
+
+  /* =========================
+     VARIANTS
+  ========================== */
+
+  .sv-badge:is(.sv-variant--primary, [data-variant="primary"]) {
+    --sv-bg: var(--color-primary);
+    --sv-fg: var(--color-primary-foreground);
+
+    &:is(a):hover {
+      background-color: color-mix(
+        in srgb,
+        var(--color-primary) 80%,
+        transparent
+      );
+    }
+  }
+
+  .sv-badge:is(.sv-variant--secondary, [data-variant="secondary"]) {
+    --sv-bg: var(--color-secondary);
+    --sv-fg: var(--color-secondary-foreground);
+
+    &:is(a):hover {
+      background-color: color-mix(
+        in srgb,
+        var(--color-secondary) 80%,
+        transparent
+      );
+    }
+  }
+
+  .sv-badge:is(.sv-variant--danger, [data-variant="danger"]) {
+    --sv-bg: color-mix(in srgb, var(--color-danger) 10%, transparent);
+    --sv-fg: var(--color-danger);
+
+    &:focus-visible {
+      box-shadow: 0 0 0 3px
+        color-mix(in srgb, var(--color-danger) 20%, transparent);
+    }
+
+    &:is(a):hover {
+      background-color: color-mix(
+        in srgb,
+        var(--color-danger) 20%,
+        transparent
+      );
+    }
+  }
+
+  .sv-badge:is(.sv-variant--outline, [data-variant="outline"]) {
+    --sv-bg: transparent;
+    --sv-fg: var(--color-foreground);
+    border-color: var(--color-border);
+
+    &:is(a):hover {
+      background-color: var(--color-muted);
+      color: var(--color-muted-foreground);
+    }
+  }
+
+  .sv-badge:is(.sv-variant--ghost, [data-variant="ghost"]) {
+    --sv-bg: transparent;
+    --sv-fg: var(--color-foreground);
+
+    &:hover {
+      background-color: var(--color-muted);
+      color: var(--color-muted-foreground);
+    }
+  }
+
+  .sv-badge:is(.sv-variant--link, [data-variant="link"]) {
+    --sv-bg: transparent;
+    --sv-fg: var(--color-primary);
+
+    @apply underline-offset-4 hover:underline;
+  }
+}

package/dist/components/badge.js

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

package/dist/components/breadcrumb.css

@@ -0,0 +1,30 @@
+@layer components {
+	.sv-breadcrumb-list {
+		@apply text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm;
+	}
+
+	.sv-breadcrumb-item {
+		@apply inline-flex items-center gap-1;
+	}
+
+	.sv-breadcrumb-link {
+		@apply hover:text-foreground transition-colors;
+	}
+
+	.sv-breadcrumb-page {
+		@apply text-foreground font-normal;
+	}
+
+	.sv-breadcrumb-separator {
+		& > svg {
+			@apply size-3.5;
+		}
+	}
+
+	.sv-breadcrumb-ellipsis {
+		@apply flex size-5 items-center justify-center;
+		& > svg {
+			@apply size-4;
+		}
+	}
+}

package/dist/components/breadcrumb.js

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

package/dist/components/button-group.css

@@ -0,0 +1,99 @@
+@layer components {
+  .sv-button-group {
+    @apply flex w-fit items-stretch;
+    /* @apply inline-flex h-auto items-center justify-center gap-0; */
+
+    /* Nested button-group spacing */
+    &:has(> [data-slot="button-group"]) {
+      @apply gap-2;
+    }
+
+    /* Trailing select trigger: restore right radius when a hidden select is last */
+    /* &:has(select[aria-hidden="true"]:last-child)
+      > [data-slot="select-trigger"]:last-of-type {
+      @apply rounded-r-md;
+    } */
+
+    /* Focus-visible stacking */
+    & > *:focus-visible {
+      @apply z-10;
+    }
+
+    /* Select trigger auto-width */
+    & > [data-slot="select-trigger"]:not([class*="w-"]) {
+      @apply w-fit;
+    }
+
+    /* Inputs stretch to fill */
+    & > input {
+      @apply flex-1;
+    }
+  }
+
+  /* =========================
+     ORIENTATION — HORIZONTAL
+  ========================== */
+
+  .sv-button-group[data-orientation="horizontal"] {
+    /* Nested button groups: don't stretch vertically */
+    & > [data-slot="button-group"] {
+      align-self: start;
+    }
+
+    /* All slots: flatten right side */
+    & > [data-slot] {
+      @apply rounded-r-none;
+    }
+
+    /* Last slot: restore right radius */
+    & > [data-slot]:not(:has(~ [data-slot])) {
+      border-top-right-radius: var(--radius) !important;
+      border-bottom-right-radius: var(--radius) !important;
+    }
+
+    /* Every slot after the first: flatten left side + remove duplicate border */
+    & > [data-slot] ~ [data-slot] {
+      @apply rounded-l-none border-l-0;
+    }
+  }
+
+  /* =========================
+     ORIENTATION — VERTICAL
+  ========================== */
+
+  .sv-button-group[data-orientation="vertical"] {
+    @apply flex-col;
+
+    /* All slots: flatten bottom side */
+    & > [data-slot] {
+      @apply rounded-b-none;
+    }
+
+    /* Last slot: restore bottom radius */
+    & > [data-slot]:not(:has(~ [data-slot])) {
+      border-bottom-left-radius: var(--radius) !important;
+      border-bottom-right-radius: var(--radius) !important;
+    }
+
+    /* Every slot after the first: flatten top side + remove duplicate border */
+    & > [data-slot] ~ [data-slot] {
+      @apply rounded-t-none border-t-0;
+    }
+  }
+
+  /* =========================
+     BUTTON GROUP SEPARATOR
+  ========================== */
+
+  .sv-button-group-separator {
+    @apply bg-border;
+
+    &[data-orientation="horizontal"] {
+      @apply mx-px w-auto;
+    }
+
+    &[data-orientation="vertical"] {
+      @apply my-px h-auto;
+    }
+  }
+}

package/dist/components/button-group.js

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