nitro_kit 0.9.0 → 2.0.0.alpha.2

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

@@ -0,0 +1,100 @@
+@layer nitro-kit.base {
+  :where([data-nk="settings-layout"]) {
+    display: grid;
+    grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
+    gap: calc(var(--nk-space) * 6);
+    align-items: start;
+    min-width: 0;
+  }
+
+  :where(
+    [data-nk="settings-layout"] > [data-slot="settings-layout-navigation"],
+    [data-nk="settings-layout"] > [data-slot="settings-layout-content"]
+  ) {
+    min-width: 0;
+  }
+
+  :where([data-nk="settings-layout"] [data-slot="settings-layout-items"]) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nk-space);
+    min-width: 0;
+  }
+
+  :where([data-nk="settings-layout"] [data-slot="settings-layout-item"]) {
+    min-width: 0;
+  }
+
+  :where([data-nk="settings-layout"] [data-slot="settings-layout-item-link"]) {
+    display: flex;
+    gap: calc(var(--nk-space) * 2);
+    align-items: center;
+    min-block-size: var(--nk-control-height-sm);
+    padding: var(--nk-space) calc(var(--nk-space) * 2);
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-sm);
+    font-weight: var(--nk-font-weight-medium);
+    line-height: var(--nk-leading-tight);
+    text-decoration: none;
+    border-radius: var(--nk-radius-md);
+    transition:
+      color var(--nk-duration-normal) var(--nk-ease),
+      background-color var(--nk-duration-normal) var(--nk-ease);
+  }
+
+  :where([data-nk="settings-layout"] [data-slot="settings-layout-item-icon"]) {
+    flex: none;
+    color: var(--nk-color-muted-foreground);
+  }
+}
+
+@layer nitro-kit.state {
+  /* Emphasis alone marks the current destination without adding a decorative
+     edge or a filled block that would outweigh the content beside it. */
+  :where(
+    [data-nk="settings-layout"]
+      [data-slot="settings-layout-item-link"][data-state="current"]
+  ) {
+    color: var(--nk-color-foreground);
+    font-weight: var(--nk-font-weight-semibold);
+  }
+
+  :where(
+    [data-nk="settings-layout"]
+      [data-slot="settings-layout-item-link"][data-state="current"]
+      [data-slot="settings-layout-item-icon"]
+  ) {
+    color: var(--nk-color-foreground);
+  }
+
+  @media (hover: hover) {
+    :where(
+      [data-nk="settings-layout"] [data-slot="settings-layout-item-link"]:hover
+    ) {
+      color: var(--nk-color-foreground);
+      background: color-mix(in oklab, var(--nk-color-muted) 60%, transparent);
+    }
+  }
+
+  :where(
+    [data-nk="settings-layout"]
+      [data-slot="settings-layout-item-link"]:focus-visible
+  ) {
+    outline: var(--nk-focus-width) solid var(--nk-color-focus);
+    outline-offset: calc(var(--nk-focus-offset) * -1);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(
+      [data-nk="settings-layout"] [data-slot="settings-layout-item-link"]
+    ) {
+      transition-duration: 0.01ms;
+    }
+  }
+
+  @media (max-width: 48rem) {
+    :where([data-nk="settings-layout"]) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+}

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

@@ -0,0 +1,100 @@
+@layer nitro-kit.base {
+  :where([data-nk="sheet"]) {
+    display: contents;
+  }
+
+  :where([data-nk="sheet"] > [data-slot="sheet-panel"]) {
+    position: fixed;
+    inset-block: 0;
+    max-block-size: none;
+    height: 100dvh;
+    margin-block: 0;
+    padding: calc(var(--nk-space) * 6);
+    overflow: auto;
+    color: var(--nk-color-foreground);
+    background: var(--nk-color-surface);
+    border: 0;
+    box-shadow: var(--nk-shadow-lg);
+  }
+
+  :where([data-nk="sheet"][data-side="left"] > [data-slot="sheet-panel"]) {
+    margin-inline: 0 auto;
+    border-inline-end: var(--nk-border-width) solid var(--nk-color-border);
+  }
+
+  :where([data-nk="sheet"][data-side="right"] > [data-slot="sheet-panel"]) {
+    margin-inline: auto 0;
+    border-inline-start: var(--nk-border-width) solid var(--nk-color-border);
+  }
+
+  :where([data-nk="sheet"][data-size="sm"] > [data-slot="sheet-panel"]) {
+    width: min(calc(100% - (var(--nk-space) * 8)), 20rem);
+  }
+
+  :where([data-nk="sheet"][data-size="md"] > [data-slot="sheet-panel"]) {
+    width: min(calc(100% - (var(--nk-space) * 8)), 28rem);
+  }
+
+  :where([data-nk="sheet"][data-size="lg"] > [data-slot="sheet-panel"]) {
+    width: min(calc(100% - (var(--nk-space) * 8)), 40rem);
+  }
+
+  :where([data-nk="sheet"] > [data-slot="sheet-panel"])::backdrop {
+    background: var(--nk-color-overlay);
+  }
+
+  :where([data-nk="sheet"] [data-slot="sheet-close"]) {
+    position: sticky;
+    z-index: 1;
+    float: inline-end;
+    inset-block-start: 0;
+  }
+
+  :where([data-nk="sheet"] [data-slot="sheet-title"]) {
+    padding-inline-end: calc(var(--nk-space) * 10);
+    font-size: var(--nk-text-lg);
+    font-weight: var(--nk-font-weight-semibold);
+    line-height: var(--nk-leading-tight);
+  }
+
+  :where([data-nk="sheet"] [data-slot="sheet-description"]) {
+    margin-block-start: calc(var(--nk-space) * 2);
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-sm);
+  }
+
+  :where([data-nk="sheet"] [data-slot="sheet-body"]) {
+    margin-block-start: calc(var(--nk-space) * 6);
+  }
+}
+
+@layer nitro-kit.state {
+  :where([data-nk="sheet"] > [data-slot="sheet-panel"][open]) {
+    animation: nk-sheet-enter var(--nk-duration-slow) var(--nk-ease);
+  }
+
+  :where([data-nk="sheet"][data-side="left"] > [data-slot="sheet-panel"][open]) {
+    --_nk-sheet-from: -1rem;
+  }
+
+  :where([data-nk="sheet"][data-side="right"] > [data-slot="sheet-panel"][open]) {
+    --_nk-sheet-from: 1rem;
+  }
+
+  @keyframes nk-sheet-enter {
+    from {
+      opacity: 0;
+      transform: translateX(var(--_nk-sheet-from));
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-nk="sheet"] > [data-slot="sheet-panel"]) {
+      animation-duration: 0.01ms;
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+@layer nitro-kit.base {
+  :where([data-nk="stat-grid"]) {
+    color: var(--nk-color-foreground);
+  }
+
+  :where(
+    [data-nk="stat-grid"]
+      > [data-slot="stat-grid-grid"]
+      > [data-slot="stat-grid-list"]
+  ) {
+    display: contents;
+  }
+
+  :where(
+    [data-nk="stat-grid"]
+      > [data-slot="stat-grid-grid"]
+      > [data-slot="stat-grid-list"]
+      > [data-slot="stat-grid-stat"]
+  ) {
+    display: grid;
+    align-content: start;
+    gap: calc(var(--nk-space) * 2);
+    min-height: 100%;
+    padding: calc(var(--nk-space) * 5);
+    background: var(--nk-color-surface);
+    border: var(--nk-border-width) solid var(--nk-color-border);
+    border-radius: var(--nk-radius-lg);
+    box-shadow: var(--nk-shadow-sm);
+  }
+
+  :where([data-nk="stat-grid"] [data-slot="stat-grid-label"]) {
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-sm);
+    font-weight: var(--nk-font-weight-medium);
+  }
+
+  :where([data-nk="stat-grid"] [data-slot="stat-grid-value"]) {
+    font-size: var(--nk-text-2xl);
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--nk-font-weight-bold);
+    line-height: var(--nk-leading-tight);
+    overflow-wrap: anywhere;
+  }
+
+  :where([data-nk="stat-grid"] [data-slot="stat-grid-detail"]) {
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-xs);
+    line-height: var(--nk-leading-normal);
+    text-wrap: pretty;
+  }
+}

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

@@ -0,0 +1,152 @@
+@layer nitro-kit.base {
+  :where([data-nk="switch"]) {
+    display: inline-grid;
+    color: var(--nk-color-foreground);
+  }
+
+  :where([data-nk="switch"] > [data-slot="switch-label"]) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: calc(var(--nk-space) * 3);
+    align-items: center;
+    min-block-size: var(--nk-control-height-md);
+    cursor: pointer;
+  }
+
+  :where(
+    [data-nk="switch"] [data-slot="switch-control"],
+    [data-nk="switch"] [data-slot="switch-track"]
+  ) {
+    grid-area: 1 / 1;
+  }
+
+  :where([data-nk="switch"] [data-slot="switch-control"]) {
+    z-index: 1;
+    inline-size: 2.5rem;
+    block-size: 1.5rem;
+    margin: 0;
+    cursor: pointer;
+    appearance: none;
+    opacity: 0;
+  }
+
+  :where([data-nk="switch"] [data-slot="switch-track"]) {
+    display: flex;
+    align-items: center;
+    inline-size: 2.5rem;
+    block-size: 1.5rem;
+    padding: 0.1875rem;
+    pointer-events: none;
+    background: var(--nk-color-muted);
+    border: var(--nk-border-width) solid var(--nk-color-border);
+    border-radius: var(--nk-radius-full);
+    transition:
+      background-color var(--nk-duration-normal) var(--nk-ease),
+      border-color var(--nk-duration-normal) var(--nk-ease);
+  }
+
+  :where(
+    [data-nk="switch"][data-size="lg"] [data-slot="switch-control"],
+    [data-nk="switch"][data-size="lg"] [data-slot="switch-track"]
+  ) {
+    inline-size: 3.25rem;
+    block-size: 2rem;
+  }
+
+  :where([data-nk="switch"] [data-slot="switch-handle"]) {
+    inline-size: 1rem;
+    block-size: 1rem;
+    background: var(--nk-color-surface);
+    border-radius: var(--nk-radius-full);
+    box-shadow: var(--nk-shadow-sm);
+    transition: transform var(--nk-duration-normal) var(--nk-ease);
+  }
+
+  :where([data-nk="switch"][data-size="lg"] [data-slot="switch-handle"]) {
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+  }
+
+  :where([data-nk="switch"] [data-slot="switch-label-text"]) {
+    display: block;
+    grid-column: 2;
+  }
+
+  :where([data-nk="switch"] > [data-slot="switch-description"]) {
+    display: block;
+    margin-block-start: var(--nk-space);
+    padding-inline-start: calc(2.5rem + (var(--nk-space) * 3));
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-sm);
+    font-weight: var(--nk-font-weight-normal);
+    text-wrap: pretty;
+  }
+
+  :where(
+    [data-nk="switch"][data-size="lg"] > [data-slot="switch-description"]
+  ) {
+    padding-inline-start: calc(3.25rem + (var(--nk-space) * 3));
+  }
+}
+
+@layer nitro-kit.state {
+  :where(
+    [data-nk="switch"]
+      [data-slot="switch-control"]:checked
+      + [data-slot="switch-track"]
+  ) {
+    background: var(--nk-color-primary);
+    border-color: var(--nk-color-primary);
+  }
+
+  :where(
+    [data-nk="switch"]
+      [data-slot="switch-control"]:checked
+      + [data-slot="switch-track"]
+      > [data-slot="switch-handle"]
+  ) {
+    transform: translateX(1rem);
+  }
+
+  :where(
+    [data-nk="switch"][data-size="lg"]
+      [data-slot="switch-control"]:checked
+      + [data-slot="switch-track"]
+      > [data-slot="switch-handle"]
+  ) {
+    transform: translateX(1.25rem);
+  }
+
+  :where(
+    [data-nk="switch"]
+      [data-slot="switch-control"]:focus-visible
+      + [data-slot="switch-track"]
+  ) {
+    outline: var(--nk-focus-width) solid var(--nk-color-focus);
+    outline-offset: var(--nk-focus-offset);
+  }
+
+  :where([data-nk="switch"][data-disabled="true"]) {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  :where(
+    [data-nk="switch"]
+      [data-slot="switch-control"][aria-invalid="true"]
+      + [data-slot="switch-track"]
+  ) {
+    border-color: var(--nk-color-danger);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  @layer nitro-kit.base {
+    :where(
+      [data-nk="switch"] [data-slot="switch-track"],
+      [data-nk="switch"] [data-slot="switch-handle"]
+    ) {
+      transition-duration: 0.01ms;
+    }
+  }
+}

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

@@ -0,0 +1,116 @@
+@layer nitro-kit.base {
+  :where([data-nk="table"]) {
+    inline-size: 100%;
+    overflow-x: auto;
+    color: var(--nk-color-foreground);
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :where([data-nk="table"] > [data-slot="table-element"]) {
+    inline-size: 100%;
+    font-size: var(--nk-text-sm);
+    border-collapse: collapse;
+  }
+
+  :where([data-nk="table"] [data-slot="table-caption"]) {
+    padding-block: calc(var(--nk-space) * 2);
+    color: var(--nk-color-muted-foreground);
+    text-align: start;
+  }
+
+  :where([data-nk="table"] [data-slot="table-row"]) {
+    border-block-end: var(--nk-border-width) solid var(--nk-color-border);
+  }
+
+  :where(
+    [data-nk="table"] [data-slot="table-header"],
+    [data-nk="table"] [data-slot="table-cell"]
+  ) {
+    min-block-size: var(--nk-control-height-md);
+    padding: calc(var(--nk-space) * 2);
+    text-align: start;
+    vertical-align: middle;
+  }
+
+  :where([data-nk="table"] [data-slot="table-header"]) {
+    color: var(--nk-color-muted-foreground);
+    font-weight: var(--nk-font-weight-medium);
+  }
+
+  :where([data-nk="table"] [data-slot="table-sort"]) {
+    display: inline-flex;
+    align-items: center;
+    min-block-size: var(--nk-control-height-md);
+    gap: calc(var(--nk-space) * 1.5);
+    margin-block: calc(var(--nk-space) * -2);
+    padding-block: calc(var(--nk-space) * 2);
+    color: inherit;
+    text-decoration: none;
+  }
+
+  :where([data-nk="table"] [data-slot="table-sort-indicator"]) {
+    color: var(--nk-color-muted-foreground);
+    opacity: 0.5;
+  }
+}
+
+@layer nitro-kit.state {
+  :where(
+    [data-nk="table"]
+      [data-slot="table-header"]:is(
+        [aria-sort="ascending"],
+        [aria-sort="descending"]
+      )
+      [data-slot="table-sort"]
+  ) {
+    color: var(--nk-color-foreground);
+    font-weight: var(--nk-font-weight-semibold);
+  }
+
+  :where(
+    [data-nk="table"]
+      [data-slot="table-header"]:is(
+        [aria-sort="ascending"],
+        [aria-sort="descending"]
+      )
+      [data-slot="table-sort-indicator"]
+  ) {
+    color: var(--nk-color-primary);
+    opacity: 1;
+  }
+
+  @media (hover: hover) {
+    :where([data-nk="table"] [data-slot="table-sort"]:hover) {
+      color: var(--nk-color-foreground);
+    }
+
+    :where(
+      [data-nk="table"]
+        [data-slot="table-sort"]:hover
+        [data-slot="table-sort-indicator"]
+    ) {
+      opacity: 1;
+    }
+  }
+
+  :where([data-nk="table"] [data-slot="table-sort"]:focus-visible) {
+    outline: var(--nk-focus-width) solid var(--nk-color-focus);
+    outline-offset: var(--nk-focus-offset);
+  }
+}
+
+@layer nitro-kit.compound {
+  :where(
+    [data-nk="table"] [data-slot="table-header"][data-align="center"],
+    [data-nk="table"] [data-slot="table-cell"][data-align="center"]
+  ) {
+    text-align: center;
+  }
+  :where(
+    [data-nk="table"] [data-slot="table-header"][data-align="right"],
+    [data-nk="table"] [data-slot="table-cell"][data-align="right"]
+  ) {
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+  }
+}

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

@@ -0,0 +1,138 @@
+@layer nitro-kit.base {
+  :where([data-nk="tabs"]) {
+    width: 100%;
+    color: var(--nk-color-foreground);
+  }
+
+  :where([data-nk="tabs"] > [data-slot="tabs-list"]) {
+    display: flex;
+    max-width: 100%;
+    overflow-x: auto;
+    border-block-end: var(--nk-border-width) solid var(--nk-color-border);
+  }
+
+  :where([data-nk="tabs"] > [data-slot="tabs-list"] > [data-slot="tabs-tab"]) {
+    display: flex;
+    min-height: 2.5rem;
+    align-items: center;
+    justify-content: center;
+    padding: calc(var(--nk-space) * 2) calc(var(--nk-space) * 3);
+    font: inherit;
+    font-weight: var(--nk-font-weight-medium);
+    color: var(--nk-color-muted-foreground);
+    white-space: nowrap;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    border-block-end: var(--nk-focus-width) solid transparent;
+    transition:
+      border-color var(--nk-duration-fast) var(--nk-ease),
+      color var(--nk-duration-fast) var(--nk-ease);
+  }
+
+  :where([data-nk="tabs"] > [data-slot="tabs-panel"]) {
+    padding-block: calc(var(--nk-space) * 4);
+    line-height: var(--nk-leading-normal);
+  }
+}
+
+@layer nitro-kit.variant {
+  :where([data-nk="tabs"][data-orientation="vertical"][data-enhanced="true"]) {
+    display: grid;
+    grid-template-columns: minmax(min-content, max-content) minmax(0, 1fr);
+    column-gap: calc(var(--nk-space) * 5);
+  }
+
+  :where(
+    [data-nk="tabs"][data-orientation="vertical"] > [data-slot="tabs-list"]
+  ) {
+    flex-direction: column;
+    grid-column: 1;
+    grid-row: 1;
+    align-items: stretch;
+    overflow-x: visible;
+    border-block-end: 0;
+    border-inline-end: var(--nk-border-width) solid var(--nk-color-border);
+  }
+
+  :where(
+    [data-nk="tabs"][data-orientation="vertical"]
+      > [data-slot="tabs-list"]
+      > [data-slot="tabs-tab"]
+  ) {
+    justify-content: flex-start;
+    text-align: start;
+    border-block-end: 0;
+    border-inline-end: var(--nk-focus-width) solid transparent;
+  }
+
+  :where(
+    [data-nk="tabs"][data-orientation="vertical"]
+      > [data-slot="tabs-list"]
+      > [data-slot="tabs-tab"][aria-selected="true"]
+  ) {
+    border-inline-end-color: var(--nk-color-primary);
+  }
+
+  :where(
+    [data-nk="tabs"][data-orientation="vertical"] > [data-slot="tabs-panel"]
+  ) {
+    grid-column: 2;
+    grid-row: 1;
+    padding-block-start: calc(var(--nk-space) * 2);
+  }
+}
+
+@layer nitro-kit.state {
+  @media (hover: hover) {
+    :where(
+      [data-nk="tabs"]
+        > [data-slot="tabs-list"]
+        > [data-slot="tabs-tab"]:hover:not(:disabled)
+    ) {
+      color: var(--nk-color-foreground);
+    }
+  }
+
+  :where(
+    [data-nk="tabs"]
+      > [data-slot="tabs-list"]
+      > [data-slot="tabs-tab"][aria-selected="true"]
+  ) {
+    color: var(--nk-color-foreground);
+    border-block-end-color: var(--nk-color-primary);
+  }
+
+  :where(
+    [data-nk="tabs"][data-orientation="vertical"]
+      > [data-slot="tabs-list"]
+      > [data-slot="tabs-tab"][aria-selected="true"]
+  ) {
+    border-block-end-color: transparent;
+  }
+
+  :where(
+    [data-nk="tabs"]
+      > [data-slot="tabs-list"]
+      > [data-slot="tabs-tab"]:focus-visible
+  ) {
+    outline: var(--nk-focus-width) solid var(--nk-color-focus);
+    outline-offset: calc(var(--nk-focus-offset) * -1);
+  }
+
+  :where(
+    [data-nk="tabs"] > [data-slot="tabs-list"] > [data-slot="tabs-tab"]:disabled
+  ) {
+    color: var(--nk-color-muted-foreground);
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(
+      [data-nk="tabs"] > [data-slot="tabs-list"] > [data-slot="tabs-tab"]
+    ) {
+      transition-duration: 0.01ms;
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+@layer nitro-kit.base {
+  :where([data-nk="textarea"]) {
+    display: block;
+    inline-size: 100%;
+    min-block-size: 6rem;
+    padding: calc(var(--nk-space) * 2) calc(var(--nk-space) * 3);
+    color: var(--nk-color-foreground);
+    font: inherit;
+    line-height: var(--nk-leading-normal);
+    resize: vertical;
+    background: var(--nk-color-surface);
+    border: var(--nk-border-width) solid var(--nk-color-border);
+    border-radius: var(--nk-radius-md);
+    transition:
+      border-color var(--nk-duration-normal) var(--nk-ease),
+      box-shadow var(--nk-duration-normal) var(--nk-ease);
+  }
+}
+
+@layer nitro-kit.state {
+  :where([data-nk="textarea"]:focus-visible) {
+    outline: var(--nk-focus-width) solid var(--nk-color-focus);
+    outline-offset: var(--nk-focus-offset);
+  }
+
+  :where([data-nk="textarea"][readonly]:not(:disabled)) {
+    color: var(--nk-color-muted-foreground);
+    background: var(--nk-color-muted);
+  }
+
+  :where([data-nk="textarea"]:disabled) {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  :where([data-nk="textarea"][aria-invalid="true"]) {
+    border-color: var(--nk-color-danger);
+  }
+}