@svkit/styles 0.0.2-beta.0

package/src/components/dropdown-menu.css

@@ -0,0 +1,195 @@
+@layer components {
+  /* =========================
+     CONTENT
+  ========================== */
+
+  .sv-dropdown-menu-content {
+    @apply z-50 overflow-visible outline-none;
+    width: var(--bits-dropdown-menu-anchor-width);
+
+    &[data-state="closed"] {
+      @apply overflow-hidden;
+    }
+  }
+
+  /* =========================
+     ITEM (shared base)
+  ========================== */
+
+  .sv-dropdown-menu-item {
+    @apply focus:bg-secondary focus:text-secondary-foreground;
+    @apply gap-1.5 rounded-md px-1.5 py-1 text-sm;
+    @apply relative flex cursor-default items-center outline-hidden select-none;
+    @apply [&_svg]:pointer-events-none [&_svg]:shrink-0;
+    @apply [&_svg:not([class*='size-'])]:size-4;
+
+    /* Inset */
+    &[data-inset] {
+      @apply ps-7;
+    }
+
+    /* Disabled */
+    &[data-disabled] {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    /* Destructive variant */
+    &[data-variant="destructive"] {
+      @apply text-danger;
+
+      &:focus {
+        @apply bg-danger/10 text-danger;
+      }
+
+      & *:not([data-slot]) > svg {
+        color: var(--color-danger);
+      }
+    }
+
+    /* Non-destructive focus: propagate accent color to descendants */
+    &:not([data-variant="destructive"]):focus *:not([data-slot]) {
+      @apply text-secondary-foreground;
+    }
+  }
+
+  /* =========================
+     CHECKBOX ITEM
+  ========================== */
+
+  .sv-dropdown-menu-checkbox-item {
+    @apply focus:bg-secondary focus:text-secondary-foreground;
+    @apply gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm;
+    @apply relative flex cursor-default items-center outline-hidden select-none;
+    @apply [&_svg]:pointer-events-none [&_svg]:shrink-0;
+    @apply [&_svg:not([class*='size-'])]:size-4;
+
+    &[data-inset] {
+      @apply ps-7;
+    }
+
+    &[data-disabled] {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    &:focus *:not([data-slot]) {
+      @apply text-secondary-foreground;
+    }
+  }
+
+  /* =========================
+     RADIO ITEM
+  ========================== */
+
+  .sv-dropdown-menu-radio-item {
+    @apply focus:bg-secondary focus:text-secondary-foreground;
+    @apply gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm;
+    @apply relative flex cursor-default items-center outline-hidden select-none;
+    @apply [&_svg]:pointer-events-none [&_svg]:shrink-0;
+    @apply [&_svg:not([class*='size-'])]:size-4;
+
+    &[data-inset] {
+      @apply ps-7;
+    }
+
+    &[data-disabled] {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    &:focus *:not([data-slot]) {
+      @apply text-secondary-foreground;
+    }
+  }
+
+  /* =========================
+     ITEM INDICATOR
+     (checkbox & radio shared)
+  ========================== */
+
+  .sv-dropdown-menu-item-indicator {
+    @apply absolute right-2 flex items-center justify-center;
+  }
+
+  /* =========================
+     SUB TRIGGER
+  ========================== */
+
+  .sv-dropdown-menu-sub-trigger {
+    @apply focus:bg-secondary focus:text-secondary-foreground;
+    @apply gap-1.5 rounded-md px-1.5 py-1 text-sm;
+    @apply relative flex cursor-default items-center outline-hidden select-none;
+    @apply [&_svg]:pointer-events-none [&_svg]:shrink-0;
+    @apply [&_svg:not([class*='size-'])]:size-4;
+
+    &[data-inset] {
+      @apply ps-7;
+    }
+
+    &[data-disabled] {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    &[data-state="open"] {
+      @apply bg-secondary text-secondary-foreground;
+    }
+
+    &:not([data-variant="destructive"]):focus *:not([data-slot]) {
+      @apply text-secondary-foreground;
+    }
+  }
+
+  /* =========================
+     LABEL
+  ========================== */
+
+  .sv-dropdown-menu-label {
+    @apply text-muted-foreground px-1.5 py-1 text-xs font-medium;
+
+    &[data-inset] {
+      @apply ps-7;
+    }
+  }
+
+  /* =========================
+     GROUP HEADING
+  ========================== */
+
+  .sv-dropdown-menu-group-heading {
+    @apply px-2 py-1.5 text-sm font-semibold;
+
+    &[data-inset] {
+      @apply ps-8;
+    }
+  }
+
+  /* =========================
+     SEPARATOR
+  ========================== */
+
+  .sv-dropdown-menu-separator {
+    @apply bg-border -mx-1 my-1 h-px;
+  }
+
+  /* =========================
+     SHORTCUT
+  ========================== */
+
+  .sv-dropdown-menu-shortcut {
+    @apply text-muted-foreground ms-auto text-xs tracking-widest;
+
+    .sv-dropdown-menu-item:focus & {
+      @apply text-secondary-foreground;
+    }
+  }
+
+  /* =========================
+     SUB CONTENT
+  ========================== */
+
+  .sv-dropdown-menu-sub-content {
+    @apply shadow-lg w-auto border-border border;
+  }
+}

package/src/components/empty.css

@@ -0,0 +1,25 @@
+@layer components {
+	.sv-empty {
+		@apply flex w-full min-w-0 flex-1 flex-col items-center justify-center text-balance text-center;
+	}
+
+	.sv-empty-header {
+		@apply flex max-w-sm flex-col items-center;
+	}
+
+	.sv-empty-content {
+		@apply flex w-full max-w-sm min-w-0 flex-col items-center text-balance;
+	}
+
+	.sv-empty-title {
+		@apply text-lg font-medium;
+	}
+
+	.sv-empty-description {
+		@apply text-muted-foreground text-sm;
+	}
+
+	.sv-empty-media {
+		@apply flex shrink-0 items-center justify-center;
+	}
+}

package/src/components/field.css

@@ -0,0 +1,25 @@
+@layer components {
+	.sv-field {
+		@apply flex w-full flex-col gap-1.5;
+	}
+
+	.sv-field[data-orientation='horizontal'] {
+		@apply flex-row items-center;
+	}
+
+	.sv-field-content {
+		@apply flex w-full flex-col gap-1;
+	}
+
+	.sv-field-label {
+		@apply text-sm font-medium;
+	}
+
+	.sv-field-description {
+		@apply text-muted-foreground text-xs;
+	}
+
+	.sv-field-error {
+		@apply text-danger text-xs;
+	}
+}

package/src/components/form.css

@@ -0,0 +1,7 @@
+@layer components {
+	.sv-form { @apply flex flex-col gap-4; }
+	.sv-form-field { @apply flex flex-col gap-1.5; }
+	.sv-form-label { @apply text-sm font-medium; }
+	.sv-form-label-error { @apply text-danger; }
+	.sv-form-field-errors { @apply text-danger text-xs; }
+}

package/src/components/hover-card.css

@@ -0,0 +1,3 @@
+@layer components {
+	.sv-hover-card-content { @apply z-50 w-72 rounded-lg text-sm; }
+}

package/src/components/index.css

@@ -0,0 +1,55 @@
+@import './button.css';
+@import './label.css';
+@import './input.css';
+@import './badge.css';
+@import './separator.css';
+@import './menu.css';
+@import './dropdown-menu.css';
+@import './button-group.css';
+@import './accordion.css';
+@import './card.css';
+@import './avatar.css';
+@import './tooltip.css';
+@import './skeleton.css';
+@import './toast.css';
+@import './checkbox.css';
+@import './switch.css';
+@import './toggle.css';
+@import './slider.css';
+@import './textarea.css';
+@import './progress.css';
+@import './spinner.css';
+@import './kbd.css';
+@import './breadcrumb.css';
+@import './tabs.css';
+@import './radio-group.css';
+@import './toggle-group.css';
+@import './pagination.css';
+@import './dialog.css';
+@import './sheet.css';
+@import './popover.css';
+@import './alert-dialog.css';
+@import './alert.css';
+@import './select.css';
+@import './native-select.css';
+@import './input-group.css';
+@import './input-otp.css';
+@import './scroll-area.css';
+@import './navigation-menu.css';
+@import './empty.css';
+@import './item.css';
+@import './field.css';
+@import './context-menu.css';
+@import './menubar.css';
+@import './carousel.css';
+@import './drawer.css';
+@import './resizable.css';
+@import './command.css';
+@import './form.css';
+@import './hover-card.css';
+@import './table.css';
+@import './calendar.css';
+@import './range-calendar.css';
+@import './data-table.css';
+@import './chart.css';
+@import './sidebar.css';

package/src/components/input-group.css

@@ -0,0 +1,42 @@
+@layer components {
+	.sv-input-group {
+		@apply relative flex w-full min-w-0 items-center outline-none;
+		@apply border-border rounded-lg border transition-colors;
+		@apply focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-3;
+		@apply has-[[data-slot][aria-invalid=true]]:border-danger has-[[data-slot][aria-invalid=true]]:ring-danger/20 has-[[data-slot][aria-invalid=true]]:ring-3;
+		@apply has-disabled:opacity-50;
+	}
+
+	.sv-input-group-input,
+	.sv-input-group-textarea {
+		@apply flex-1 border-0 bg-transparent outline-none;
+	}
+
+	.sv-input-group-text {
+		@apply flex items-center;
+	}
+
+	.sv-input-group-addon {
+		@apply flex cursor-text items-center justify-center select-none;
+	}
+
+	.sv-input-group-addon[data-align='inline-start'] {
+		@apply order-first;
+	}
+
+	.sv-input-group-addon[data-align='inline-end'] {
+		@apply order-last;
+	}
+
+	.sv-input-group-addon[data-align='block-start'] {
+		@apply order-first w-full justify-start;
+	}
+
+	.sv-input-group-addon[data-align='block-end'] {
+		@apply order-last w-full justify-start;
+	}
+
+	.sv-input-group-button {
+		@apply flex items-center shadow-none;
+	}
+}

package/src/components/input-otp.css

@@ -0,0 +1,33 @@
+@layer components {
+	.sv-input-otp {
+		@apply flex items-center gap-2;
+		@apply disabled:cursor-not-allowed has-disabled:opacity-50;
+	}
+
+	.sv-input-otp-group {
+		@apply flex items-center rounded-lg;
+		@apply has-[[data-slot][aria-invalid=true]]:border-danger has-[[data-slot][aria-invalid=true]]:ring-danger/20 has-[[data-slot][aria-invalid=true]]:ring-3;
+	}
+
+	.sv-input-otp-slot {
+		@apply border-border relative flex size-8 items-center justify-center border-y border-r text-sm outline-none transition-all;
+		@apply first:rounded-l-lg first:border-l last:rounded-r-lg;
+		@apply data-active:z-10 data-active:border-ring data-active:ring-ring/50 data-active:ring-3;
+		@apply aria-[invalid]:border-danger;
+	}
+
+	.sv-input-otp-caret {
+		@apply pointer-events-none absolute inset-0 flex items-center justify-center;
+	}
+
+	.sv-input-otp-caret-line {
+		@apply bg-foreground h-4 w-px animate-pulse;
+	}
+
+	.sv-input-otp-separator {
+		@apply flex items-center;
+		& > svg {
+			@apply size-4;
+		}
+	}
+}

package/src/components/input.css

@@ -0,0 +1,65 @@
+@layer components {
+  .sv-input {
+    @apply w-full min-w-0 outline-none;
+    @apply flex items-center;
+
+    height: 2.25rem; /* 36px */
+    padding-inline: 0.625rem;
+    padding-block: 0.25rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+
+    border-radius: var(--radius-lg);
+    border: var(--border-width, 1px) solid var(--color-border);
+    background-color: transparent;
+
+    box-shadow: var(--shadow-xs);
+    transition:
+      color var(--transition-duration),
+      box-shadow var(--transition-duration);
+
+    /* Placeholder */
+    &::placeholder {
+      color: var(--color-muted-foreground);
+    }
+
+    /* Focus visible */
+    &:focus-visible {
+      outline: none;
+      border-color: var(--color-ring);
+      box-shadow: 0 0 0 3px var(--color-ring);
+    }
+
+    /* Invalid */
+    &[aria-invalid="true"] {
+      border-color: var(--color-danger);
+      box-shadow: 0 0 0 3px
+        color-mix(in srgb, var(--color-danger) 20%, transparent);
+    }
+
+    /* Disabled */
+    &:disabled {
+      @apply pointer-events-none cursor-not-allowed opacity-50;
+    }
+
+    /* =========================
+       FILE INPUT PSEUDO-ELEMENTS
+    ========================== */
+
+    &[type="file"] {
+      &::file-selector-button {
+        display: inline-flex;
+        align-items: center;
+        height: 1.75rem; /* 28px */
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--color-foreground);
+        background-color: transparent;
+        border: none;
+        padding: 0;
+        margin-inline-end: 0.5rem;
+        cursor: pointer;
+      }
+    }
+  }
+}

package/src/components/item.css

@@ -0,0 +1,62 @@
+@layer components {
+	.sv-item {
+		@apply flex w-full flex-wrap items-center transition-colors duration-100 outline-none;
+		@apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3;
+	}
+
+	.sv-item[data-variant='outline'] {
+		@apply rounded-lg border border-border;
+	}
+
+	.sv-item[data-variant='muted'] {
+		@apply rounded-lg bg-muted;
+	}
+
+	.sv-item[data-size='xs'] {
+		@apply gap-1 p-1 text-xs;
+	}
+
+	.sv-item[data-size='sm'] {
+		@apply gap-1.5 p-1.5 text-sm;
+	}
+
+	.sv-item[data-size='md'] {
+		@apply gap-2 p-2;
+	}
+
+	.sv-item-title {
+		@apply line-clamp-1 flex w-fit items-center font-medium;
+	}
+
+	.sv-item-description {
+		@apply text-muted-foreground line-clamp-2 font-normal;
+	}
+
+	.sv-item-content {
+		@apply flex flex-1 flex-col;
+	}
+
+	.sv-item-header {
+		@apply flex basis-full items-center justify-between;
+	}
+
+	.sv-item-footer {
+		@apply flex basis-full items-center justify-between;
+	}
+
+	.sv-item-group {
+		@apply flex w-full flex-col;
+	}
+
+	.sv-item-separator {
+		@apply bg-border h-px w-full;
+	}
+
+	.sv-item-media {
+		@apply flex shrink-0 items-center justify-center;
+	}
+
+	.sv-item-actions {
+		@apply flex items-center;
+	}
+}

package/src/components/kbd.css

@@ -0,0 +1,12 @@
+@layer components {
+	.sv-kbd {
+		@apply bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-mono text-xs font-medium select-none;
+		& > svg {
+			@apply size-3;
+		}
+	}
+
+	.sv-kbd-group {
+		@apply inline-flex items-center gap-1;
+	}
+}

package/src/components/label.css

@@ -0,0 +1,20 @@
+@layer components {
+  .sv-label {
+    @apply flex items-center gap-2 select-none;
+
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1;
+
+    /* Disabled — via parent group (e.g. form field wrapper) */
+    .group[data-disabled="true"] & {
+      @apply pointer-events-none opacity-50;
+    }
+
+    /* Disabled — via sibling peer (e.g. paired input) */
+    &:has(~ [data-peer]:disabled),
+    .peer:disabled ~ & {
+      @apply cursor-not-allowed opacity-50;
+    }
+  }
+}

package/src/components/menu.css

@@ -0,0 +1,110 @@
+@layer components {
+  /* =========================
+     MENU TARGET
+     Shared floating panel shell
+  ========================== */
+
+  .sv-menu-target {
+    @apply flex flex-col bg-surface text-surface-foreground;
+
+    min-width: 8rem;
+    padding: 0.25rem;
+    border-radius: var(--radius);
+    box-shadow:
+      0 0 0 1px color-mix(in oklab, var(--color-foreground) 10%, transparent),
+      var(--shadow-md);
+    outline: none;
+
+    /* Entrance / exit animations driven by bits-ui data attributes */
+    &[data-state="open"] {
+      @apply animate-in fade-in-0 zoom-in-95;
+    }
+
+    &[data-state="closed"] {
+      @apply animate-out fade-out-0 zoom-out-95;
+    }
+
+    /* Slide direction based on which side the menu opens from */
+    &[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;
+    }
+    &[data-side="inline-start"] {
+      @apply slide-in-from-right-2;
+    }
+    &[data-side="inline-end"] {
+      @apply slide-in-from-left-2;
+    }
+  }
+
+  /* =========================
+     MENU TRANSLUCENT
+     Frosted glass surface --
+     descendant interactive states
+  ========================== */
+
+  .sv-menu-translucent {
+    @apply bg-surface/70 relative;
+
+    &::before {
+      content: "";
+      @apply pointer-events-none absolute inset-0 rounded-[inherit] backdrop-blur-2xl backdrop-saturate-150;
+      z-index: -1;
+      animation: none !important;
+    }
+
+    /* Items: focus and data-highlighted */
+    [data-slot$="-item"]:focus,
+    [data-slot$="-item"][data-highlighted] {
+      background-color: color-mix(
+        in oklab,
+        var(--color-foreground) 10%,
+        transparent
+      );
+    }
+
+    /* Separators */
+    [data-slot$="-separator"] {
+      background-color: color-mix(
+        in oklab,
+        var(--color-foreground) 5%,
+        transparent
+      );
+    }
+
+    /* Triggers: focus and aria-expanded */
+    [data-slot$="-trigger"]:focus,
+    [data-slot$="-trigger"][aria-expanded="true"] {
+      background-color: color-mix(
+        in oklab,
+        var(--color-foreground) 10%,
+        transparent
+      ) !important;
+    }
+
+    /* Destructive variant overrides inside translucent */
+    [data-variant="destructive"]:focus {
+      background-color: color-mix(
+        in oklab,
+        var(--color-foreground) 10%,
+        transparent
+      ) !important;
+    }
+
+    [data-variant="destructive"] {
+      @apply text-secondary-foreground!;
+    }
+
+    [data-variant="destructive"] *:not([data-slot]) {
+      @apply text-secondary-foreground!;
+    }
+  }
+}