@svkit/styles 0.0.2-beta.0

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

package/dist/components/menu.js

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

package/dist/components/menubar.css

@@ -0,0 +1,54 @@
+@layer components {
+	.sv-menubar {
+		@apply flex h-8 items-center gap-0.5 rounded-lg border border-border bg-surface p-[3px];
+	}
+
+	.sv-menubar-trigger {
+		@apply rounded-sm px-1.5 py-[2px] text-sm font-medium outline-none transition-colors;
+		@apply hover:bg-muted;
+		@apply aria-expanded:bg-muted;
+		@apply focus-visible:ring-ring/50 focus-visible:ring-3;
+	}
+
+	.sv-menubar-content {
+		@apply min-w-36;
+	}
+
+	.sv-menubar-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-menubar-checkbox-item,
+	.sv-menubar-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-menubar-label {
+		@apply text-muted-foreground px-2 py-1.5 text-xs font-medium;
+	}
+
+	.sv-menubar-separator {
+		@apply bg-border -mx-1 my-1 h-px;
+	}
+
+	.sv-menubar-shortcut {
+		@apply text-muted-foreground ml-auto text-xs tracking-widest;
+	}
+
+	.sv-menubar-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-menubar-sub-content {
+		@apply min-w-36;
+	}
+
+	.sv-menubar-group-heading {
+		@apply text-muted-foreground px-2 py-1.5 text-xs font-medium;
+	}
+}

package/dist/components/menubar.js

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

package/dist/components/native-select.css

@@ -0,0 +1,23 @@
+@layer components {
+	.sv-native-select-wrapper {
+		@apply relative w-fit;
+	}
+
+	.sv-native-select {
+		@apply border-border h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm outline-none transition-colors select-none;
+		@apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3;
+		@apply disabled:pointer-events-none disabled:cursor-not-allowed;
+	}
+
+	.sv-native-select[data-size='sm'] {
+		@apply h-7;
+	}
+
+	.sv-native-select[aria-invalid='true'] {
+		@apply border-danger ring-danger/20 ring-3;
+	}
+
+	.sv-native-select-icon {
+		@apply text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none;
+	}
+}

package/dist/components/native-select.js

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

package/dist/components/navigation-menu.css

@@ -0,0 +1,48 @@
+@layer components {
+	.sv-navigation-menu {
+		@apply relative flex max-w-max flex-1 items-center justify-center;
+	}
+
+	.sv-navigation-menu-list {
+		@apply flex flex-1 list-none items-center justify-center;
+	}
+
+	.sv-navigation-menu-trigger {
+		@apply inline-flex h-9 w-max items-center justify-center gap-1 rounded-sm px-2.5 py-1 text-sm font-medium outline-none transition-colors;
+		@apply hover:bg-surface;
+		@apply focus-visible:ring-ring/50 focus-visible:ring-3;
+		@apply disabled:pointer-events-none;
+	}
+
+	.sv-navigation-menu-trigger-icon {
+		@apply size-3.5;
+	}
+
+	.sv-navigation-menu-content {
+		@apply absolute top-0 left-0 w-full md:absolute md:w-auto;
+	}
+
+	.sv-navigation-menu-item {
+		@apply relative;
+	}
+
+	.sv-navigation-menu-link {
+		@apply text-sm;
+	}
+
+	.sv-navigation-menu-indicator {
+		@apply top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden;
+	}
+
+	.sv-navigation-menu-indicator-arrow {
+		@apply relative top-[60%] h-2 w-2 rotate-45 bg-surface;
+	}
+
+	.sv-navigation-menu-viewport-wrapper {
+		@apply absolute start-0 top-full z-50 flex justify-center;
+	}
+
+	.sv-navigation-menu-viewport {
+		@apply relative mt-1.5 h-(--bits-navigation-menu-viewport-height) w-full overflow-hidden rounded-lg border border-border bg-surface shadow-lg md:w-(--bits-navigation-menu-viewport-width);
+	}
+}

package/dist/components/navigation-menu.js

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

package/dist/components/pagination.css

@@ -0,0 +1,33 @@
+@layer components {
+	.sv-pagination {
+		@apply mx-auto flex w-full justify-center;
+	}
+
+	.sv-pagination-content {
+		@apply flex items-center gap-0.5;
+	}
+
+	.sv-pagination-link {
+		@apply inline-flex size-8 items-center justify-center rounded-lg text-sm font-medium transition-colors;
+		@apply hover:bg-surface;
+	}
+
+	.sv-pagination-link[data-active] {
+		@apply border-border border bg-transparent;
+	}
+
+	.sv-pagination-ellipsis {
+		@apply inline-flex size-8 items-center justify-center;
+		& > svg {
+			@apply size-4;
+		}
+	}
+
+	.sv-pagination-previous {
+		@apply gap-1 pl-1.5;
+	}
+
+	.sv-pagination-next {
+		@apply gap-1 pr-1.5;
+	}
+}

package/dist/components/pagination.js

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

package/dist/components/popover.css

@@ -0,0 +1,6 @@
+@layer components {
+	.sv-popover-content {
+		@apply bg-surface text-surface-foreground z-50 w-72 rounded-lg border border-border p-2.5 text-sm shadow-md outline-hidden;
+		@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;
+	}
+}

package/dist/components/popover.js

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

package/dist/components/progress.css

@@ -0,0 +1,9 @@
+@layer components {
+	.sv-progress {
+		@apply bg-muted relative flex h-1 w-full items-center overflow-x-hidden rounded-full;
+	}
+
+	.sv-progress-indicator {
+		@apply bg-primary size-full flex-1 rounded-full transition-all;
+	}
+}

package/dist/components/progress.js

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

package/dist/components/radio-group.css

@@ -0,0 +1,24 @@
+@layer components {
+	.sv-radio-group {
+		@apply grid w-full gap-2;
+	}
+
+	.sv-radio-group-item {
+		@apply border-border relative aspect-square size-4 shrink-0 rounded-full border outline-none;
+		@apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3;
+		@apply disabled:cursor-not-allowed disabled:opacity-50;
+		@apply data-checked:bg-primary data-checked:border-primary;
+	}
+
+	.sv-radio-group-item[aria-invalid='true'] {
+		@apply border-danger ring-danger/20 ring-3;
+	}
+
+	.sv-radio-group-indicator {
+		@apply flex size-4 items-center justify-center;
+	}
+
+	.sv-radio-group-indicator-icon {
+		@apply text-primary-foreground size-2 fill-current;
+	}
+}

package/dist/components/radio-group.js

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

package/dist/components/range-calendar.css

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

package/dist/components/range-calendar.js

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

package/dist/components/resizable.css

@@ -0,0 +1,4 @@
+@layer components {
+	.sv-resizable-pane-group { @apply flex h-full w-full data-direction-vertical:flex-col; }
+	.sv-resizable-handle { @apply bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-direction-vertical:h-px data-direction-vertical:w-full; }
+}

package/dist/components/resizable.js

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

package/dist/components/scroll-area.css

@@ -0,0 +1,18 @@
+@layer components {
+	.sv-scroll-area {
+		@apply relative;
+	}
+
+	.sv-scroll-area-viewport {
+		@apply size-full rounded-[inherit] outline-none transition-[color,box-shadow];
+		@apply focus-visible:ring-ring/50 focus-visible:ring-3;
+	}
+
+	.sv-scroll-area-scrollbar {
+		@apply flex touch-none select-none p-px transition-colors;
+	}
+
+	.sv-scroll-area-thumb {
+		@apply bg-border relative flex-1 rounded-full;
+	}
+}

package/dist/components/scroll-area.js

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

package/dist/components/select.css

@@ -0,0 +1,57 @@
+@layer components {
+	.sv-select-trigger {
+		@apply flex w-fit items-center justify-between gap-1.5 whitespace-nowrap rounded-lg border border-border bg-transparent py-2 pr-2 pl-2.5 text-sm outline-none transition-colors select-none;
+		@apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3;
+		@apply disabled:cursor-not-allowed disabled:opacity-50;
+	}
+
+	.sv-select-trigger[data-size='md'] {
+		@apply h-8;
+	}
+
+	.sv-select-trigger[data-size='sm'] {
+		@apply h-7;
+	}
+
+	.sv-select-trigger-icon {
+		@apply text-muted-foreground size-4 pointer-events-none;
+	}
+
+	.sv-select-content {
+		@apply relative z-50 overflow-x-hidden overflow-y-auto;
+	}
+
+	.sv-select-item {
+		@apply relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-none select-none;
+		@apply focus:bg-surface focus:text-surface-foreground;
+		@apply data-disabled:pointer-events-none data-disabled:opacity-50;
+	}
+
+	.sv-select-item-indicator {
+		@apply pointer-events-none absolute right-2 flex size-4 items-center justify-center;
+	}
+
+	.sv-select-label {
+		@apply text-muted-foreground px-1.5 py-1 text-xs;
+	}
+
+	.sv-select-separator {
+		@apply bg-border -mx-1 my-1 h-px;
+	}
+
+	.sv-select-group {
+		@apply scroll-my-1 p-1;
+	}
+
+	.sv-select-group-heading {
+		@apply text-muted-foreground px-2 py-1.5 text-xs;
+	}
+
+	.sv-select-scroll-up-button,
+	.sv-select-scroll-down-button {
+		@apply z-10 flex cursor-default items-center justify-center py-1;
+		& > svg {
+			@apply size-4;
+		}
+	}
+}

package/dist/components/select.js

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

package/dist/components/separator.css

@@ -0,0 +1,13 @@
+@layer components {
+  .sv-separator {
+    @apply bg-border shrink-0;
+
+    &[data-orientation="horizontal"] {
+      @apply h-px w-full;
+    }
+
+    &[data-orientation="vertical"] {
+      @apply w-px h-full;
+    }
+  }
+}

package/dist/components/separator.js

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

package/dist/components/sheet.css

@@ -0,0 +1,45 @@
+@layer components {
+	.sv-sheet-overlay {
+		@apply fixed inset-0 z-50 bg-black/10;
+	}
+
+	.sv-sheet-content {
+		@apply bg-surface text-surface-foreground fixed z-50 flex flex-col gap-4 border-border bg-clip-padding p-4 text-sm shadow-lg transition duration-200 ease-in-out;
+	}
+
+	.sv-sheet-content[data-side='bottom'] {
+		@apply inset-x-0 bottom-0 h-auto border-t;
+	}
+
+	.sv-sheet-content[data-side='left'] {
+		@apply inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm;
+	}
+
+	.sv-sheet-content[data-side='right'] {
+		@apply inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm;
+	}
+
+	.sv-sheet-content[data-side='top'] {
+		@apply inset-x-0 top-0 h-auto border-b;
+	}
+
+	.sv-sheet-close {
+		@apply absolute top-3 right-3;
+	}
+
+	.sv-sheet-header {
+		@apply flex flex-col gap-0.5 p-4;
+	}
+
+	.sv-sheet-footer {
+		@apply mt-auto flex flex-col gap-2 p-4;
+	}
+
+	.sv-sheet-title {
+		@apply text-foreground text-base font-medium;
+	}
+
+	.sv-sheet-description {
+		@apply text-muted-foreground text-sm;
+	}
+}

package/dist/components/sheet.js

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

package/dist/components/sidebar.css

@@ -0,0 +1,71 @@
+@layer components {
+	.sv-sidebar {
+		@apply bg-surface text-surface-foreground flex h-full w-[16rem] flex-col border-r border-border transition-[width] duration-200;
+	}
+	.sv-sidebar[data-state=closed] {
+		@apply w-[3rem];
+	}
+	.sv-sidebar-header {
+		@apply flex flex-col gap-2 p-2;
+	}
+	.sv-sidebar-footer {
+		@apply flex flex-col gap-2 p-2;
+	}
+	.sv-sidebar-content {
+		@apply flex flex-1 flex-col gap-2 overflow-auto p-2;
+	}
+	.sv-sidebar-group {
+		@apply flex flex-col gap-1;
+	}
+	.sv-sidebar-group-label {
+		@apply text-muted-foreground px-2 text-xs font-medium;
+	}
+	.sv-sidebar-menu {
+		@apply flex flex-col gap-1;
+	}
+	.sv-sidebar-menu-item {
+		@apply relative;
+	}
+	.sv-sidebar-menu-button {
+		@apply flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium outline-none transition-colors hover:bg-muted data-active:bg-muted;
+	}
+	.sv-sidebar-menu-button[data-size=sm] {
+		@apply text-xs;
+	}
+	.sv-sidebar-menu-button[data-size=lg] {
+		@apply text-base;
+	}
+	.sv-sidebar-group-content {
+		@apply flex flex-col gap-1;
+	}
+	.sv-sidebar-group-action {
+		@apply opacity-0 group-hover/sidebar-group:opacity-100;
+	}
+	.sv-sidebar-menu-sub {
+		@apply flex flex-col gap-1 pl-4;
+	}
+	.sv-sidebar-menu-sub-button {
+		@apply flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors hover:bg-muted;
+	}
+	.sv-sidebar-menu-sub-item {
+		@apply flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors hover:bg-muted;
+	}
+	.sv-sidebar-menu-action {
+		@apply opacity-0 group-hover/sidebar-menu-item:opacity-100;
+	}
+	.sv-sidebar-menu-badge {
+		@apply pointer-events-none absolute right-2 flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-xs;
+	}
+	.sv-sidebar-rail {
+		@apply w-[3rem];
+	}
+	.sv-sidebar-trigger {
+		@apply absolute top-2 right-2;
+	}
+	.sv-sidebar-inset {
+		@apply p-4;
+	}
+	.sv-sidebar-separator {
+		@apply mx-2;
+	}
+}

package/dist/components/sidebar.js

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

package/dist/components/skeleton.css

@@ -0,0 +1,33 @@
+@layer components {
+  .sv-skeleton {
+    @apply bg-surface rounded-md;
+  }
+
+  .sv-skeleton:is(.sv-animation-type--none, [data-animation-type="none"]) {
+    /* No animation styles applied */
+  }
+
+  .sv-skeleton:is(.sv-animation-type--pulse, [data-animation-type="pulse"]) {
+    @apply animate-pulse;
+  }
+
+  .sv-skeleton:is(
+    .sv-animation-type--shimmer,
+    [data-animation-type="shimmer"]
+  ) {
+    @apply relative overflow-hidden;
+
+    &::before {
+      --animate-skeleton: skeleton 1.5s linear infinite;
+
+      @apply animate-(--animate-skeleton) via-muted absolute inset-0 -translate-x-full
+         bg-linear-to-r from-transparent to-transparent content-[''];
+    }
+  }
+
+  @keyframes skeleton {
+    100% {
+      transform: translateX(200%);
+    }
+  }
+}

package/dist/components/skeleton.js

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