nitro_kit 0.9.0 → 2.0.0.alpha.2

data/src/stylesheets/nitro_kit/components/layout.css

@@ -0,0 +1,440 @@
+@layer nitro-kit.variant {
+  :where([data-nk="flex"][data-gap~="0"], [data-nk="grid"][data-gap~="0"]) {
+    --_nk-layout-gap: 0;
+  }
+
+  :where([data-nk="flex"][data-gap~="1"], [data-nk="grid"][data-gap~="1"]) {
+    --_nk-layout-gap: var(--nk-space);
+  }
+
+  :where([data-nk="flex"][data-gap~="2"], [data-nk="grid"][data-gap~="2"]) {
+    --_nk-layout-gap: calc(var(--nk-space) * 2);
+  }
+
+  :where([data-nk="flex"][data-gap~="3"], [data-nk="grid"][data-gap~="3"]) {
+    --_nk-layout-gap: calc(var(--nk-space) * 3);
+  }
+
+  :where([data-nk="flex"][data-gap~="4"], [data-nk="grid"][data-gap~="4"]) {
+    --_nk-layout-gap: calc(var(--nk-space) * 4);
+  }
+
+  :where([data-nk="flex"][data-gap~="5"], [data-nk="grid"][data-gap~="5"]) {
+    --_nk-layout-gap: calc(var(--nk-space) * 5);
+  }
+
+  :where([data-nk="flex"][data-gap~="6"], [data-nk="grid"][data-gap~="6"]) {
+    --_nk-layout-gap: calc(var(--nk-space) * 6);
+  }
+
+  :where([data-nk="flex"][data-gap~="8"], [data-nk="grid"][data-gap~="8"]) {
+    --_nk-layout-gap: calc(var(--nk-space) * 8);
+  }
+
+  :where([data-nk="flex"][data-gap~="10"], [data-nk="grid"][data-gap~="10"]) {
+    --_nk-layout-gap: calc(var(--nk-space) * 10);
+  }
+
+  :where([data-nk="flex"][data-gap~="12"], [data-nk="grid"][data-gap~="12"]) {
+    --_nk-layout-gap: calc(var(--nk-space) * 12);
+  }
+
+  :where([data-nk="flex"][data-gap~="16"], [data-nk="grid"][data-gap~="16"]) {
+    --_nk-layout-gap: calc(var(--nk-space) * 16);
+  }
+
+  @media (min-width: 40rem) {
+    :where(
+      [data-nk="flex"][data-gap~="sm:0"],
+      [data-nk="grid"][data-gap~="sm:0"]
+    ) {
+      --_nk-layout-gap: 0;
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="sm:1"],
+      [data-nk="grid"][data-gap~="sm:1"]
+    ) {
+      --_nk-layout-gap: var(--nk-space);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="sm:2"],
+      [data-nk="grid"][data-gap~="sm:2"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 2);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="sm:3"],
+      [data-nk="grid"][data-gap~="sm:3"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 3);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="sm:4"],
+      [data-nk="grid"][data-gap~="sm:4"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 4);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="sm:5"],
+      [data-nk="grid"][data-gap~="sm:5"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 5);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="sm:6"],
+      [data-nk="grid"][data-gap~="sm:6"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 6);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="sm:8"],
+      [data-nk="grid"][data-gap~="sm:8"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 8);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="sm:10"],
+      [data-nk="grid"][data-gap~="sm:10"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 10);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="sm:12"],
+      [data-nk="grid"][data-gap~="sm:12"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 12);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="sm:16"],
+      [data-nk="grid"][data-gap~="sm:16"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 16);
+    }
+  }
+
+  @media (min-width: 48rem) {
+    :where(
+      [data-nk="flex"][data-gap~="md:0"],
+      [data-nk="grid"][data-gap~="md:0"]
+    ) {
+      --_nk-layout-gap: 0;
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="md:1"],
+      [data-nk="grid"][data-gap~="md:1"]
+    ) {
+      --_nk-layout-gap: var(--nk-space);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="md:2"],
+      [data-nk="grid"][data-gap~="md:2"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 2);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="md:3"],
+      [data-nk="grid"][data-gap~="md:3"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 3);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="md:4"],
+      [data-nk="grid"][data-gap~="md:4"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 4);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="md:5"],
+      [data-nk="grid"][data-gap~="md:5"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 5);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="md:6"],
+      [data-nk="grid"][data-gap~="md:6"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 6);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="md:8"],
+      [data-nk="grid"][data-gap~="md:8"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 8);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="md:10"],
+      [data-nk="grid"][data-gap~="md:10"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 10);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="md:12"],
+      [data-nk="grid"][data-gap~="md:12"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 12);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="md:16"],
+      [data-nk="grid"][data-gap~="md:16"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 16);
+    }
+  }
+
+  @media (min-width: 64rem) {
+    :where(
+      [data-nk="flex"][data-gap~="lg:0"],
+      [data-nk="grid"][data-gap~="lg:0"]
+    ) {
+      --_nk-layout-gap: 0;
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="lg:1"],
+      [data-nk="grid"][data-gap~="lg:1"]
+    ) {
+      --_nk-layout-gap: var(--nk-space);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="lg:2"],
+      [data-nk="grid"][data-gap~="lg:2"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 2);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="lg:3"],
+      [data-nk="grid"][data-gap~="lg:3"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 3);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="lg:4"],
+      [data-nk="grid"][data-gap~="lg:4"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 4);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="lg:5"],
+      [data-nk="grid"][data-gap~="lg:5"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 5);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="lg:6"],
+      [data-nk="grid"][data-gap~="lg:6"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 6);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="lg:8"],
+      [data-nk="grid"][data-gap~="lg:8"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 8);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="lg:10"],
+      [data-nk="grid"][data-gap~="lg:10"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 10);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="lg:12"],
+      [data-nk="grid"][data-gap~="lg:12"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 12);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="lg:16"],
+      [data-nk="grid"][data-gap~="lg:16"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 16);
+    }
+  }
+
+  @media (min-width: 80rem) {
+    :where(
+      [data-nk="flex"][data-gap~="xl:0"],
+      [data-nk="grid"][data-gap~="xl:0"]
+    ) {
+      --_nk-layout-gap: 0;
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="xl:1"],
+      [data-nk="grid"][data-gap~="xl:1"]
+    ) {
+      --_nk-layout-gap: var(--nk-space);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="xl:2"],
+      [data-nk="grid"][data-gap~="xl:2"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 2);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="xl:3"],
+      [data-nk="grid"][data-gap~="xl:3"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 3);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="xl:4"],
+      [data-nk="grid"][data-gap~="xl:4"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 4);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="xl:5"],
+      [data-nk="grid"][data-gap~="xl:5"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 5);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="xl:6"],
+      [data-nk="grid"][data-gap~="xl:6"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 6);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="xl:8"],
+      [data-nk="grid"][data-gap~="xl:8"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 8);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="xl:10"],
+      [data-nk="grid"][data-gap~="xl:10"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 10);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="xl:12"],
+      [data-nk="grid"][data-gap~="xl:12"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 12);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="xl:16"],
+      [data-nk="grid"][data-gap~="xl:16"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 16);
+    }
+  }
+
+  @media (min-width: 96rem) {
+    :where(
+      [data-nk="flex"][data-gap~="2xl:0"],
+      [data-nk="grid"][data-gap~="2xl:0"]
+    ) {
+      --_nk-layout-gap: 0;
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="2xl:1"],
+      [data-nk="grid"][data-gap~="2xl:1"]
+    ) {
+      --_nk-layout-gap: var(--nk-space);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="2xl:2"],
+      [data-nk="grid"][data-gap~="2xl:2"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 2);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="2xl:3"],
+      [data-nk="grid"][data-gap~="2xl:3"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 3);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="2xl:4"],
+      [data-nk="grid"][data-gap~="2xl:4"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 4);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="2xl:5"],
+      [data-nk="grid"][data-gap~="2xl:5"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 5);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="2xl:6"],
+      [data-nk="grid"][data-gap~="2xl:6"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 6);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="2xl:8"],
+      [data-nk="grid"][data-gap~="2xl:8"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 8);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="2xl:10"],
+      [data-nk="grid"][data-gap~="2xl:10"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 10);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="2xl:12"],
+      [data-nk="grid"][data-gap~="2xl:12"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 12);
+    }
+
+    :where(
+      [data-nk="flex"][data-gap~="2xl:16"],
+      [data-nk="grid"][data-gap~="2xl:16"]
+    ) {
+      --_nk-layout-gap: calc(var(--nk-space) * 16);
+    }
+  }
+}

data/src/stylesheets/nitro_kit/components/page_header.css

@@ -0,0 +1,61 @@
+@layer nitro-kit.base {
+  :where([data-nk="page-header"]) {
+    display: grid;
+    gap: calc(var(--nk-space) * 2);
+    color: var(--nk-color-foreground);
+  }
+
+  :where([data-nk="page-header"] > [data-slot="page-header-eyebrow"]) {
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-sm);
+    font-weight: var(--nk-font-weight-normal);
+    line-height: var(--nk-leading-tight);
+  }
+
+  :where([data-nk="page-header"] > [data-slot="page-header-title"]) {
+    max-width: var(--nk-content-lg);
+    font-size: var(--nk-text-2xl);
+    font-weight: var(--nk-font-weight-bold);
+    line-height: var(--nk-leading-tight);
+    text-wrap: balance;
+  }
+
+  :where([data-nk="page-header"] > [data-slot="page-header-description"]) {
+    max-width: var(--nk-content-lg);
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-sm);
+    line-height: var(--nk-leading-relaxed);
+    text-wrap: pretty;
+  }
+
+  :where([data-nk="page-header"] > [data-slot="page-header-actions"]) {
+    margin-block-start: calc(var(--nk-space) * 2);
+  }
+}
+
+@layer nitro-kit.compound {
+  @media (min-width: 48rem) {
+    :where([data-nk="page-header"]:has(> [data-slot="page-header-actions"])) {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+
+    /* Every text slot owns the first column, so the eyebrow, title, and
+       description each keep a row of their own. Actions explicitly occupy
+       the first row so their top edge aligns with the header instead of
+       dropping beside the final line of supporting text. */
+    :where(
+      [data-nk="page-header"]:has(> [data-slot="page-header-actions"])
+        > :not([data-slot="page-header-actions"])
+    ) {
+      grid-column: 1;
+    }
+
+    :where([data-nk="page-header"] > [data-slot="page-header-actions"]) {
+      grid-column: 2;
+      grid-row: 1;
+      justify-self: end;
+      align-self: start;
+      margin-block-start: 0;
+    }
+  }
+}

data/src/stylesheets/nitro_kit/components/pagination.css

@@ -0,0 +1,119 @@
+@layer nitro-kit.base {
+  :where([data-nk="pagination"]) {
+    display: block;
+    inline-size: fit-content;
+    max-inline-size: 100%;
+    overflow-x: auto;
+    font-size: var(--nk-text-sm);
+    scrollbar-width: thin;
+  }
+
+  :where([data-nk="pagination"] > [data-slot="pagination-list"]) {
+    display: flex;
+    inline-size: max-content;
+    align-items: center;
+    gap: var(--nk-space);
+    list-style: none;
+  }
+
+  :where(
+    [data-nk="pagination"]
+      > [data-slot="pagination-list"]
+      > [data-slot="pagination-item"]
+  ) {
+    display: flex;
+    flex: none;
+  }
+
+  :where(
+    [data-nk="pagination"]
+      > [data-slot="pagination-list"]
+      > [data-slot="pagination-item"]
+      > [data-slot="pagination-ellipsis-label"]
+  ) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    white-space: nowrap;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    border: 0;
+  }
+}
+
+@layer nitro-kit.compound {
+  :where(
+    [data-nk="pagination"]
+      > [data-slot="pagination-list"]
+      > [data-slot="pagination-item"]
+      > [data-slot="pagination-page"],
+    [data-nk="pagination"]
+      > [data-slot="pagination-list"]
+      > [data-slot="pagination-item"]
+      > [data-slot="pagination-current"],
+    [data-nk="pagination"]
+      > [data-slot="pagination-list"]
+      > [data-slot="pagination-item"]
+      > [data-slot="pagination-ellipsis"]
+  ) {
+    min-inline-size: var(--nk-control-height-md);
+    min-block-size: var(--nk-control-height-md);
+    padding-inline: calc(var(--nk-space) * 2);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where(
+    [data-nk="pagination"]
+      > [data-slot="pagination-list"]
+      > [data-slot="pagination-item"]
+      > [data-slot="pagination-page"]
+  ) {
+    justify-content: center;
+  }
+
+  :where(
+    [data-nk="pagination"]
+      > [data-slot="pagination-list"]
+      > [data-slot="pagination-item"]
+      > [data-slot="pagination-page"][aria-current="page"],
+    [data-nk="pagination"]
+      > [data-slot="pagination-list"]
+      > [data-slot="pagination-item"]
+      > [data-slot="pagination-current"]
+  ) {
+    color: var(--nk-color-foreground);
+    cursor: default;
+    background: var(--nk-color-muted);
+    border-color: var(--nk-color-border);
+    opacity: 1;
+  }
+
+  :where(
+    [data-nk="pagination"]
+      > [data-slot="pagination-list"]
+      > [data-slot="pagination-item"]
+      > [data-slot="pagination-current"]
+  ) {
+    display: inline-grid;
+    place-items: center;
+    font-size: var(--nk-text-sm);
+    font-weight: var(--nk-font-weight-medium);
+    border: var(--nk-border-width) solid var(--nk-color-border);
+    border-radius: var(--nk-radius-md);
+  }
+
+  :where(
+    [data-nk="pagination"]
+      > [data-slot="pagination-list"]
+      > [data-slot="pagination-item"]
+      > [data-slot="pagination-ellipsis"]
+  ) {
+    display: inline-grid;
+    place-items: center;
+    color: var(--nk-color-muted-foreground);
+    user-select: none;
+  }
+}

data/src/stylesheets/nitro_kit/components/pagination_bar.css

@@ -0,0 +1,41 @@
+@layer nitro-kit.base {
+  :where([data-nk="pagination-bar"]) {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(var(--nk-space) * 4);
+  }
+
+  :where([data-nk="pagination-bar"] > [data-slot="pagination-bar-summary"]) {
+    min-width: 0;
+    margin: 0;
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-sm);
+    text-wrap: pretty;
+  }
+
+  :where(
+    [data-nk="pagination-bar"]
+      > [data-nk="pagination"][data-slot="pagination-bar-pagination"]
+  ) {
+    margin-inline-start: auto;
+  }
+}
+
+@layer nitro-kit.state {
+  @media (max-width: 48rem) {
+    :where([data-nk="pagination-bar"]) {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    :where(
+      [data-nk="pagination-bar"]
+        > [data-nk="pagination"][data-slot="pagination-bar-pagination"]
+    ) {
+      margin-inline-start: 0;
+    }
+  }
+}