@svkit/styles 0.0.2-beta.0

package/dist/components/button.css

@@ -0,0 +1,205 @@
+@layer components {
+  .sv-button {
+    @apply inline-flex items-center justify-center gap-1.5 tracking-wide  whitespace-nowrap select-none;
+
+    font-weight: 500;
+    line-height: 1;
+
+    border-radius: var(--radius);
+    cursor: var(--cursor-interactive);
+
+    transition: var(--transition-all);
+
+    background-color: var(--sv-bg);
+    color: var(--sv-fg);
+    border: var(--border-width) solid var(--sv-border);
+
+    height: var(--sv-height);
+    padding-inline: var(--sv-px);
+    font-size: var(--sv-text);
+
+    --sv-icon-size: 1rem;
+
+    --sv-bg-hover: var(--state-bg-hover);
+    --sv-bg-active: var(--state-bg-hover);
+  }
+
+  /* =========================
+     VARIANTS
+  ========================== */
+
+  .sv-button:is(.sv-variant--primary, [data-variant="primary"]) {
+    --sv-bg: var(--color-primary);
+    --sv-fg: var(--color-primary-foreground);
+    --sv-border: transparent;
+
+    --sv-bg-hover: var(--color-primary-hover);
+    --sv-bg-active: var(--color-primary-hover);
+  }
+
+  .sv-button:is(.sv-variant--secondary, [data-variant="secondary"]) {
+    --sv-bg: var(--color-secondary);
+    --sv-fg: var(--color-secondary-foreground);
+
+    --sv-bg-hover: var(--color-secondary-hover);
+    --sv-bg-active: var(--color-secondary-hover);
+  }
+
+  .sv-button:is(.sv-variant--outline, [data-variant="outline"]) {
+    --sv-bg: transparent;
+    --sv-fg: var(--color-foreground);
+    --sv-border: var(--color-border);
+
+    --sv-bg-hover: var(--color-surface-hover);
+    --sv-bg-active: var(--color-surface-hover);
+  }
+
+  .sv-button:is(.sv-variant--ghost, [data-variant="ghost"]) {
+    --sv-bg: transparent;
+    --sv-fg: var(--color-foreground);
+    --sv-border: transparent;
+
+    --sv-bg-hover: var(--color-surface-hover);
+    --sv-bg-active: var(--color-surface-hover);
+  }
+
+  .sv-button:is(.sv-variant--danger, [data-variant="danger"]) {
+    @apply inset-shadow-xs inset-shadow-white/10;
+    --sv-bg: var(--color-danger);
+    --sv-fg: var(--color-danger-foreground);
+
+    --sv-bg-hover: var(--color-danger-hover);
+    --sv-bg-active: var(--color-danger-hover);
+  }
+
+  .sv-button:is(.sv-variant--link, [data-variant="link"]) {
+    --sv-bg: transparent;
+    --sv-fg: var(--color-primary-foreground);
+    --sv-border: transparent;
+
+    --sv-bg-hover: transparent;
+    --sv-bg-active: transparent;
+
+    @apply underline-offset-4 hover:underline;
+    text-decoration-color: var(--color-primary);
+  }
+
+  /* =========================
+     SIZES
+  ========================== */
+
+  .sv-button:is(.sv-size--xs, [data-size="xs"]) {
+    --sv-height: 1.5rem; /* 24px */
+    --sv-px: 0.5rem;
+    --sv-text: 0.75rem;
+    --sv-gap: 0.25rem;
+    --sv-icon-size: 0.75rem;
+  }
+
+  .sv-button:is(.sv-size--sm, [data-size="sm"]) {
+    --sv-height: 1.75rem; /* 28px */
+    --sv-px: 0.625rem;
+    --sv-text: 0.8rem;
+    --sv-gap: 0.25rem;
+    --sv-icon-size: 0.875rem;
+  }
+
+  .sv-button:is(.sv-size--md, [data-size="md"]) {
+    --sv-height: 2rem; /* 32px */
+    --sv-px: 0.75rem;
+    --sv-text: 0.875rem;
+    --sv-gap: 0.375rem;
+    --sv-icon-size: 1rem;
+  }
+
+  .sv-button:is(.sv-size--lg, [data-size="lg"]) {
+    --sv-height: 2.25rem; /* 36px */
+    --sv-px: 0.875rem;
+    --sv-text: 0.9rem;
+    --sv-gap: 0.375rem;
+    --sv-icon-size: 1.125rem;
+  }
+
+  /* =========================
+     ICON SIZES
+  ========================== */
+
+  .sv-button:is(.sv-size--icon-xs, [data-size="icon-xs"]) {
+    --sv-height: 1.5rem;
+    --sv-px: 0;
+    width: var(--sv-height);
+    --sv-icon-size: 0.75rem;
+  }
+
+  .sv-button:is(.sv-size--icon-sm, [data-size="icon-sm"]) {
+    --sv-height: 1.75rem;
+    --sv-px: 0;
+    width: var(--sv-height);
+    --sv-icon-size: 0.875rem;
+  }
+
+  .sv-button:is(.sv-size--icon, [data-size="icon"]) {
+    --sv-height: 2rem;
+    --sv-px: 0;
+    width: var(--sv-height);
+    --sv-icon-size: 1rem;
+  }
+
+  .sv-button:is(.sv-size--icon-lg, [data-size="icon-lg"]) {
+    --sv-height: 2.25rem;
+    --sv-px: 0;
+    width: var(--sv-height);
+    --sv-icon-size: 1.125rem;
+  }
+
+  /* =========================
+     STATES
+  ========================== */
+
+  .sv-button:hover:not(:disabled) {
+    background-color: var(--sv-bg-hover);
+  }
+
+  .sv-button:active:not(:disabled) {
+    transform: translateY(var(--press-offset));
+    background-color: var(--sv-bg-active);
+  }
+
+  /* =========================
+     DISABLED
+  ========================== */
+
+  .sv-button:disabled,
+  .sv-button[aria-disabled="true"] {
+    opacity: var(--disabled-opacity);
+    cursor: var(--cursor-disabled);
+    pointer-events: none;
+  }
+
+  /* =========================
+     EXTENSIONS
+  ========================== */
+
+  .sv-button:is(.sv-block, [data-block="true"]) {
+    @apply w-full;
+  }
+
+  /*.sv-button[aria-expanded='true'] {
+    background-color: var(--color-surface-hover);
+  }*/
+
+  .sv-button[aria-invalid="true"] {
+    outline-color: var(--color-danger);
+  }
+
+  /* =========================
+     ICON SYSTEM
+  ========================== */
+
+  .sv-button > svg,
+  .sv-button__icon {
+    width: var(--sv-icon-size);
+    height: var(--sv-icon-size);
+    flex-shrink: 0;
+  }
+}

package/dist/components/button.js

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

package/dist/components/calendar.css

@@ -0,0 +1,34 @@
+@layer components {
+	.sv-calendar {
+		@apply p-2;
+	}
+
+	.sv-calendar-header {
+		@apply flex items-center justify-between pb-2;
+	}
+
+	.sv-calendar-heading {
+		@apply text-sm font-medium;
+	}
+
+	.sv-calendar-grid {
+		@apply w-full border-collapse;
+	}
+
+	.sv-calendar-head-cell {
+		@apply text-muted-foreground w-8 rounded-md text-xs font-normal;
+	}
+
+	.sv-calendar-cell {
+		@apply [&:has([data-selected])]:bg-primary relative p-0 text-center text-sm [&:has([data-selected])]:rounded-md;
+	}
+
+	.sv-calendar-day {
+		@apply hover:bg-surface data-selected:bg-primary data-selected:text-primary-foreground data-today:bg-surface h-8 w-8 rounded-md p-0 font-normal aria-selected:opacity-100 data-disabled:pointer-events-none data-disabled:opacity-50 data-outside-month:opacity-30;
+	}
+
+	.sv-calendar-prev-button,
+	.sv-calendar-next-button {
+		@apply size-7 bg-transparent p-0 opacity-50 hover:opacity-100;
+	}
+}

package/dist/components/calendar.js

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

package/dist/components/card.css

@@ -0,0 +1,114 @@
+@layer components {
+  /* =========================
+     CARD ROOT
+  ========================== */
+
+  .sv-card {
+    @apply bg-surface;
+    /* color: var(--color-surface-foreground); */
+
+    @apply gap-4 overflow-hidden rounded-lg py-4 text-sm;
+    @apply ring-1 ring-foreground/10;
+
+    /* Remove bottom padding when a footer is present */
+    &:has([data-slot="card-footer"]) {
+      @apply pb-0;
+    }
+
+    /* Remove top padding when the first child is an image */
+    &:has(> img:first-child) {
+      @apply pt-0;
+    }
+
+    /* Images at the edges get matching radius */
+    & > img:first-child {
+      @apply rounded-t-lg;
+    }
+    & > img:last-child {
+      @apply rounded-b-lg;
+    }
+
+    /* sm size */
+    &[data-size="sm"] {
+      @apply gap-3 py-3;
+
+      &:has([data-slot="card-footer"]) {
+        @apply pb-0;
+      }
+    }
+  }
+
+  /* =========================
+     CARD HEADER
+  ========================== */
+
+  .sv-card-header {
+    @apply gap-1 rounded-t-lg px-4;
+
+    /* Bordered header variant */
+    &.border-b {
+      @apply pb-4;
+    }
+
+    /* sm size — driven by parent group */
+    .group\/card[data-size="sm"] & {
+      @apply px-3;
+
+      &.border-b {
+        @apply pb-3;
+      }
+    }
+  }
+
+  /* =========================
+     CARD TITLE
+  ========================== */
+
+  .sv-card-title {
+    @apply text-base font-medium leading-snug;
+
+    .group\/card[data-size="sm"] & {
+      @apply text-sm;
+    }
+  }
+
+  /* =========================
+     CARD DESCRIPTION
+  ========================== */
+
+  .sv-card-description {
+    @apply text-muted-foreground text-sm;
+  }
+
+  /* =========================
+     CARD CONTENT
+  ========================== */
+
+  .sv-card-content {
+    @apply px-4;
+
+    .group\/card[data-size="sm"] & {
+      @apply px-3;
+    }
+  }
+
+  /* =========================
+     CARD FOOTER
+  ========================== */
+
+  .sv-card-footer {
+    @apply bg-muted/50 rounded-b-lg border-t border-border p-4;
+
+    .group\/card[data-size="sm"] & {
+      @apply p-3;
+    }
+  }
+
+  /* =========================
+     CARD ACTION
+  ========================== */
+
+  .sv-card-action {
+    /* Layout handled inline via Tailwind utilities (col/row positioning) */
+  }
+}

package/dist/components/card.js

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

package/dist/components/carousel.css

@@ -0,0 +1,5 @@
+@layer components {
+	.sv-carousel-previous, .sv-carousel-next { @apply absolute touch-manipulation rounded-full; }
+	.sv-carousel-previous { @apply left-[-3rem] top-1/2 -translate-y-1/2; }
+	.sv-carousel-next { @apply right-[-3rem] top-1/2 -translate-y-1/2; }
+}

package/dist/components/carousel.js

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

package/dist/components/chart.css

@@ -0,0 +1,5 @@
+@layer components {
+	.sv-chart { @apply flex items-center justify-center; }
+	.sv-chart-tooltip { @apply bg-surface text-surface-foreground rounded-lg border border-border px-2.5 py-1.5 text-xs shadow-md; }
+	.sv-chart-tooltip-content { @apply flex flex-col gap-1; }
+}

package/dist/components/chart.js

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

package/dist/components/checkbox.css

@@ -0,0 +1,20 @@
+@layer components {
+	.sv-checkbox {
+		@apply border-border flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors;
+		@apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3;
+		@apply data-checked:bg-primary data-checked:text-primary-foreground data-checked:border-primary;
+		@apply disabled:cursor-not-allowed disabled:opacity-50;
+		@apply group-has-[[data-slot=field]]/field:opacity-50;
+	}
+
+	.sv-checkbox[aria-invalid='true'] {
+		@apply border-danger ring-danger/20 ring-3;
+	}
+
+	.sv-checkbox-indicator {
+		@apply grid place-content-center text-current transition-none;
+		& > svg {
+			@apply size-3.5;
+		}
+	}
+}

package/dist/components/checkbox.js

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

package/dist/components/command.css

@@ -0,0 +1,14 @@
+@layer components {
+	.sv-command { @apply flex size-full flex-col overflow-hidden rounded-lg border border-border bg-surface; }
+	.sv-command-input-wrapper { @apply relative flex items-center border-b border-border px-3; }
+	.sv-command-input { @apply flex h-9 w-full bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50; }
+	.sv-command-input-icon { @apply absolute right-3 size-4 text-muted-foreground; }
+	.sv-command-list { @apply max-h-[300px] overflow-y-auto overflow-x-hidden p-1; }
+	.sv-command-item { @apply cursor-default rounded-sm px-2 py-1.5 text-sm outline-none select-none data-selected:bg-surface data-disabled:pointer-events-none data-disabled:opacity-50; }
+	.sv-command-item-indicator { @apply ml-auto size-4 opacity-0 group-data-checked/command-item:opacity-100; }
+	.sv-command-group-heading { @apply text-muted-foreground px-2 py-1.5 text-xs font-medium; }
+	.sv-command-empty { @apply py-6 text-center text-sm text-muted-foreground; }
+	.sv-command-separator { @apply bg-border -mx-1 my-1 h-px; }
+	.sv-command-shortcut { @apply text-muted-foreground ml-auto text-xs tracking-widest; }
+	.sv-command-dialog { @apply top-1/3 translate-y-0 overflow-hidden p-0; }
+}

package/dist/components/command.js

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

package/dist/components/context-menu.css

@@ -0,0 +1,43 @@
+@layer components {
+	.sv-context-menu-content {
+		@apply min-w-32;
+	}
+
+	.sv-context-menu-item {
+		@apply cursor-default rounded-sm px-2 py-1.5 text-sm outline-none select-none;
+		@apply data-highlighted:bg-surface data-highlighted:text-surface-foreground;
+		@apply data-disabled:pointer-events-none data-disabled:opacity-50;
+	}
+
+	.sv-context-menu-checkbox-item,
+	.sv-context-menu-radio-item {
+		@apply cursor-default rounded-sm py-1 pr-8 pl-6 text-sm outline-none select-none;
+		@apply data-highlighted:bg-surface data-highlighted:text-surface-foreground;
+		@apply data-disabled:pointer-events-none data-disabled:opacity-50;
+	}
+
+	.sv-context-menu-label {
+		@apply text-muted-foreground px-2 py-1.5 text-xs font-medium;
+	}
+
+	.sv-context-menu-separator {
+		@apply bg-border -mx-1 my-1 h-px;
+	}
+
+	.sv-context-menu-shortcut {
+		@apply text-muted-foreground ml-auto text-xs tracking-widest;
+	}
+
+	.sv-context-menu-sub-trigger {
+		@apply cursor-default rounded-sm px-2 py-1.5 text-sm outline-none select-none;
+		@apply data-highlighted:bg-surface data-highlighted:text-surface-foreground;
+	}
+
+	.sv-context-menu-sub-content {
+		@apply min-w-32;
+	}
+
+	.sv-context-menu-group-heading {
+		@apply text-muted-foreground px-2 py-1.5 text-xs font-medium;
+	}
+}

package/dist/components/context-menu.js

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

package/dist/components/data-table.css

@@ -0,0 +1,5 @@
+@layer components {
+	.sv-data-table { @apply w-full overflow-auto; }
+	.sv-data-table-toolbar { @apply flex items-center justify-between gap-2 pb-4; }
+	.sv-data-table-content { @apply rounded-lg border border-border; }
+}

package/dist/components/data-table.js

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

package/dist/components/dialog.css

@@ -0,0 +1,30 @@
+@layer components {
+	.sv-dialog-overlay {
+		@apply fixed inset-0 z-50 bg-black/10 data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0;
+	}
+
+	.sv-dialog-content {
+		@apply bg-surface text-surface-foreground fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl border border-border p-4 text-sm 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-dialog-close {
+		@apply absolute top-2 right-2;
+	}
+
+	.sv-dialog-header {
+		@apply flex flex-col gap-2;
+	}
+
+	.sv-dialog-footer {
+		@apply -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t border-border bg-muted/50 p-4 sm:flex-row sm:justify-end;
+	}
+
+	.sv-dialog-title {
+		@apply text-base leading-none font-medium;
+	}
+
+	.sv-dialog-description {
+		@apply text-muted-foreground text-sm;
+	}
+}

package/dist/components/dialog.js

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

package/dist/components/drawer.css

@@ -0,0 +1,10 @@
+@layer components {
+	.sv-drawer-overlay { @apply fixed inset-0 z-50 bg-black/10; }
+	.sv-drawer-content { @apply bg-surface text-surface-foreground fixed z-50 flex flex-col border-border text-sm; }
+	.sv-drawer-content[data-vaul-drawer-direction=bottom] { @apply inset-x-0 bottom-0 mt-24 max-h-[80vh] rounded-t-xl border-t; }
+	.sv-drawer-handle { @apply bg-muted mx-auto mt-4 h-1 w-[100px] shrink-0 rounded-full; }
+	.sv-drawer-header { @apply flex flex-col gap-0.5 p-4 text-center; }
+	.sv-drawer-title { @apply text-foreground text-base font-medium; }
+	.sv-drawer-description { @apply text-muted-foreground text-sm; }
+	.sv-drawer-footer { @apply mt-auto flex flex-col gap-2 p-4; }
+}

package/dist/components/drawer.js

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