@svkit/styles 0.0.2-beta.0

package/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/components/slider.css

@@ -0,0 +1,43 @@
+@layer components {
+	.sv-slider {
+		@apply relative flex w-full touch-none items-center select-none;
+		@apply data-disabled:opacity-50;
+		@apply data-vertical:h-full data-vertical:w-auto data-vertical:flex-col;
+	}
+
+	.sv-slider[data-orientation='vertical'] {
+		@apply min-h-40;
+	}
+
+	.sv-slider-track {
+		@apply bg-muted relative grow overflow-hidden rounded-full;
+	}
+
+	.sv-slider-track[data-orientation='horizontal'] {
+		@apply h-1 w-full;
+	}
+
+	.sv-slider-track[data-orientation='vertical'] {
+		@apply h-full w-1;
+	}
+
+	.sv-slider-range {
+		@apply bg-primary absolute select-none;
+	}
+
+	.sv-slider-track[data-orientation='horizontal'] .sv-slider-range {
+		@apply h-full;
+	}
+
+	.sv-slider-track[data-orientation='vertical'] .sv-slider-range {
+		@apply w-full;
+	}
+
+	.sv-slider-thumb {
+		@apply relative block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none;
+		@apply border-ring ring-ring/50;
+		@apply focus-visible:ring-3 focus-visible:outline-hidden;
+		@apply disabled:pointer-events-none disabled:opacity-50;
+		@apply hover:ring-3 active:ring-3;
+	}
+}

package/src/components/spinner.css

@@ -0,0 +1,5 @@
+@layer components {
+	.sv-spinner {
+		@apply size-4 animate-spin;
+	}
+}

package/src/components/switch.css

@@ -0,0 +1,46 @@
+@layer components {
+	.sv-switch {
+		@apply shrink-0 rounded-full border border-transparent transition-colors;
+		@apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3;
+		@apply bg-surface;
+		@apply data-state-checked:bg-primary;
+		@apply data-disabled:cursor-not-allowed data-disabled:opacity-50;
+	}
+
+	.sv-switch[data-size='sm'] {
+		@apply h-[14px] w-[24px];
+	}
+
+	.sv-switch[data-size='md'] {
+		@apply h-[18px] w-[32px];
+	}
+
+	.sv-switch-thumb {
+		@apply bg-background block rounded-full transition-transform;
+		@apply pointer-events-none ring-0;
+	}
+
+	.sv-switch[data-size='sm'] .sv-switch-thumb {
+		@apply size-3;
+	}
+
+	.sv-switch[data-size='md'] .sv-switch-thumb {
+		@apply size-4;
+	}
+
+	.sv-switch[data-size='sm'][data-state='checked'] .sv-switch-thumb {
+		transform: translateX(calc(100% - 2px));
+	}
+
+	.sv-switch[data-size='md'][data-state='checked'] .sv-switch-thumb {
+		transform: translateX(calc(100% - 2px));
+	}
+
+	.sv-switch[data-state='unchecked'] .sv-switch-thumb {
+		transform: translateX(0);
+	}
+
+	.sv-switch[aria-invalid='true'] {
+		@apply border-danger ring-danger/20 ring-3;
+	}
+}

package/src/components/table.css

@@ -0,0 +1,10 @@
+@layer components {
+	.sv-table-container { @apply relative w-full overflow-x-auto; }
+	.sv-table { @apply w-full caption-bottom text-sm; }
+	.sv-table-header { @apply [&_tr]:border-b; }
+	.sv-table-body { @apply [&_tr:last-child]:border-0; }
+	.sv-table-row { @apply border-b border-border transition-colors hover:bg-muted/50 data-state-selected:bg-muted; }
+	.sv-table-head { @apply h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0; }
+	.sv-table-cell { @apply p-2 align-middle [&:has([role=checkbox])]:pr-0; }
+	.sv-table-caption { @apply text-muted-foreground mt-4 text-sm; }
+}

package/src/components/tabs.css

@@ -0,0 +1,40 @@
+@layer components {
+	.sv-tabs {
+		@apply flex gap-2 data-orientation-horizontal:flex-col;
+	}
+
+	.sv-tabs-list {
+		@apply text-muted-foreground inline-flex h-8 w-fit items-center justify-center rounded-lg p-[3px];
+		@apply bg-muted;
+	}
+
+	.sv-tabs-list[data-variant='line'] {
+		@apply gap-1 rounded-none bg-transparent;
+	}
+
+	.sv-tabs-trigger {
+		@apply text-foreground/60 hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all;
+		@apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3;
+		@apply disabled:pointer-events-none disabled:opacity-50;
+
+		&[data-state='active'] {
+			@apply bg-background text-foreground shadow-sm;
+		}
+	}
+
+	.sv-tabs-list[data-variant='line'] .sv-tabs-trigger[data-state='active'] {
+		@apply bg-transparent shadow-none;
+	}
+
+	.sv-tabs-list:not([data-variant='line']) .sv-tabs-trigger::after {
+		@apply bg-foreground absolute inset-x-0 bottom-[-5px] h-0.5 rounded-full opacity-0 transition-opacity content-[''];
+	}
+
+	.sv-tabs-list:not([data-variant='line']) .sv-tabs-trigger[data-state='active']::after {
+		@apply opacity-100;
+	}
+
+	.sv-tabs-content {
+		@apply flex-1 text-sm outline-none;
+	}
+}

package/src/components/textarea.css

@@ -0,0 +1,11 @@
+@layer components {
+	.sv-textarea {
+		@apply placeholder:text-muted-foreground border-border flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none md:text-sm;
+		@apply focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3;
+		@apply disabled:cursor-not-allowed disabled:opacity-50;
+	}
+
+	.sv-textarea[aria-invalid='true'] {
+		@apply border-danger ring-danger/20 ring-3;
+	}
+}