@svkit/styles 0.0.2-beta.0

package/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/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/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@svkit/styles",
+  "version": "0.0.2-beta.0",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "node scripts/build.js",
+    "prepare": "node scripts/build.js"
+  },
+  "files": [
+    "dist",
+    "index.css",
+    "index-full.css",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "style": "./index-full.css"
+    },
+    "./core": {
+      "style": "./index.css"
+    },
+    "./components/*.css": "./dist/components/*.css"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "tailwindcss": "^4.2.2",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.2.4"
+  }
+}

package/src/base/base.css

@@ -0,0 +1,161 @@
+@layer base {
+  /*
+   * ========================================
+   * DOCUMENT ROOT
+   * ========================================
+   */
+
+  html {
+    color-scheme: light dark;
+    -webkit-text-size-adjust: 100%;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+
+    font-family: var(--font-sans, ui-sans-serif, system-ui);
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  /* @media (prefers-reduced-motion: reduce) {
+    * {
+      transition-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+    }
+  } */
+
+  /*
+   * ========================================
+   * TYPOGRAPHY
+   * ========================================
+   */
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.25;
+    color: var(--color-foreground);
+  }
+
+  p {
+    line-height: 1.6;
+    /* color: var(--color-foreground); */
+  }
+
+  small {
+    font-size: 0.875em;
+    color: var(--color-muted);
+  }
+
+  /*
+   * ========================================
+   * LINKS
+   * ========================================
+   */
+
+  a {
+    color: var(--color-link);
+    text-decoration: none;
+
+    transition: color var(--duration-fast) var(--ease-standard);
+  }
+
+  a:hover {
+    color: var(--color-link-hover);
+  }
+
+  /*
+   * ========================================
+   * INTERACTIVE ELEMENTS
+   * ========================================
+   */
+
+  button,
+  [role="button"] {
+    cursor: var(--cursor-interactive);
+  }
+
+  button:disabled,
+  [aria-disabled="true"] {
+    cursor: var(--cursor-disabled);
+    opacity: var(--disabled-opacity);
+  }
+
+  /*
+   * ========================================
+   * GLOBAL FOCUS RING
+   * ========================================
+   */
+
+  :focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  /*
+   * ========================================
+   * BORDERS & SEPARATORS
+   * ========================================
+   */
+
+  hr {
+    border: none;
+    border-top: var(--border-width) solid var(--color-separator);
+  }
+
+  /*
+   * ========================================
+   * MEDIA DEFAULTS
+   * ========================================
+   */
+
+  img,
+  video,
+  canvas,
+  svg {
+    display: block;
+    max-width: 100%;
+  }
+
+  /*
+   * ========================================
+   * SELECTION
+   * ========================================
+   */
+
+  ::selection {
+    background-color: var(--color-primary);
+    color: var(--color-primary-foreground);
+  }
+
+  /* modern OKLCH support */
+  @supports (background-color: oklch(from white l c h / 0.5)) {
+    ::selection {
+      background-color: oklch(from var(--color-primary) l c h / 0.25);
+    }
+  }
+
+  /*
+   * ========================================
+   * SCROLLBAR (optional but useful)
+   * ========================================
+   */
+
+  /*::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-muted);
+    border-radius: var(--radius-sm);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--color-border);
+  }*/
+}

package/src/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/src/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/src/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/src/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/src/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/src/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;
+		}
+	}
+}