nitro_kit 0.9.0 → 2.0.0.alpha.2

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

@@ -0,0 +1,160 @@
+@layer nitro-kit.base {
+  :where([data-nk="checkbox"]) {
+    display: inline-grid;
+    min-inline-size: var(--nk-control-height-md);
+    min-block-size: var(--nk-control-height-md);
+    color: var(--nk-color-foreground);
+  }
+
+  :where([data-nk="checkbox"] > [data-slot="checkbox-label"]) {
+    display: grid;
+    grid-template-columns: 1.125rem minmax(0, 1fr);
+    gap: calc(var(--nk-space) * 2);
+    align-items: center;
+    min-block-size: var(--nk-control-height-md);
+    cursor: pointer;
+  }
+
+  :where([data-nk="checkbox"][data-size="lg"] > [data-slot="checkbox-label"]) {
+    grid-template-columns: 1.5rem minmax(0, 1fr);
+  }
+
+  :where(
+    [data-nk="checkbox"] [data-slot="checkbox-control"],
+    [data-nk="checkbox"] [data-slot="checkbox-indicator"]
+  ) {
+    grid-area: 1 / 1;
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+  }
+
+  :where(
+    [data-nk="checkbox"][data-size="lg"] [data-slot="checkbox-control"],
+    [data-nk="checkbox"][data-size="lg"] [data-slot="checkbox-indicator"]
+  ) {
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+  }
+
+  :where([data-nk="checkbox"] [data-slot="checkbox-control"]) {
+    z-index: 1;
+    margin: 0;
+    cursor: pointer;
+    appearance: none;
+    opacity: 0;
+  }
+
+  :where([data-nk="checkbox"] [data-slot="checkbox-indicator"]) {
+    display: grid;
+    place-items: center;
+    color: var(--nk-color-primary-foreground);
+    pointer-events: none;
+    background: var(--nk-color-surface);
+    border: var(--nk-border-width) solid var(--nk-color-border);
+    border-radius: var(--nk-radius-sm);
+    transition:
+      background-color var(--nk-duration-fast) var(--nk-ease),
+      border-color var(--nk-duration-fast) var(--nk-ease);
+  }
+
+  :where([data-nk="checkbox"] [data-slot="checkbox-indicator"])::after {
+    inline-size: 0.5rem;
+    block-size: 0.3rem;
+    content: "";
+    border-block-end: 0.125rem solid currentcolor;
+    border-inline-start: 0.125rem solid currentcolor;
+    opacity: 0;
+    transform: translateY(-0.0625rem) rotate(-45deg);
+  }
+
+  :where(
+    [data-nk="checkbox"][data-size="lg"] [data-slot="checkbox-indicator"]
+  )::after {
+    inline-size: 0.625rem;
+    block-size: 0.375rem;
+  }
+
+  :where([data-nk="checkbox"] [data-slot="checkbox-label-text"]) {
+    display: block;
+  }
+
+  :where([data-nk="checkbox"] [data-slot="checkbox-content"]) {
+    grid-column: 2;
+  }
+
+  :where([data-nk="checkbox"] [data-slot="checkbox-description"]) {
+    display: block;
+    margin-block-start: var(--nk-space);
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-sm);
+    text-wrap: pretty;
+  }
+}
+
+@layer nitro-kit.state {
+  :where(
+    [data-nk="checkbox"]
+      [data-slot="checkbox-control"]:checked
+      + [data-slot="checkbox-indicator"],
+    [data-nk="checkbox"][data-state="indeterminate"]
+      [data-slot="checkbox-indicator"]
+  ) {
+    background: var(--nk-color-primary);
+    border-color: var(--nk-color-primary);
+  }
+
+  :where(
+    [data-nk="checkbox"]
+      [data-slot="checkbox-control"]:checked
+      + [data-slot="checkbox-indicator"]
+  )::after {
+    opacity: 1;
+  }
+
+  :where(
+    [data-nk="checkbox"][data-state="indeterminate"]
+      [data-slot="checkbox-indicator"]
+  )::after {
+    inline-size: 0.55rem;
+    block-size: 0;
+    border-block-end: 0.125rem solid currentcolor;
+    border-inline-start: 0;
+    opacity: 1;
+    transform: none;
+  }
+
+  :where(
+    [data-nk="checkbox"][data-size="lg"][data-state="indeterminate"]
+      [data-slot="checkbox-indicator"]
+  )::after {
+    inline-size: 0.7rem;
+  }
+
+  :where(
+    [data-nk="checkbox"]
+      [data-slot="checkbox-control"]:focus-visible
+      + [data-slot="checkbox-indicator"]
+  ) {
+    outline: var(--nk-focus-width) solid var(--nk-color-focus);
+    outline-offset: var(--nk-focus-offset);
+  }
+
+  :where([data-nk="checkbox"][data-disabled="true"]) {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  /* A server-rendered error describes the value that was submitted. Once the
+     user has interacted with the control and it satisfies its own constraints,
+     that error is stale, so the danger border stands down and the native
+     checked treatment takes over again. `:user-valid` never matches before the
+     user touches the control, so an untouched invalid checkbox keeps its
+     border. */
+  :where(
+    [data-nk="checkbox"]
+      [data-slot="checkbox-control"][aria-invalid="true"]:not(:user-valid)
+      + [data-slot="checkbox-indicator"]
+  ) {
+    border-color: var(--nk-color-danger);
+  }
+}

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

@@ -0,0 +1,61 @@
+@layer nitro-kit.base {
+  :where([data-nk="checkbox-group"]) {
+    min-inline-size: 0;
+    padding: 0;
+    color: var(--nk-color-foreground);
+    border: 0;
+  }
+
+  :where([data-nk="checkbox-group"] > [data-slot="checkbox-group-legend"]) {
+    padding: 0;
+    font-size: var(--nk-text-sm);
+    font-weight: var(--nk-font-weight-semibold);
+  }
+
+  :where(
+    [data-nk="checkbox-group"] > [data-slot="checkbox-group-description"]
+  ) {
+    margin-block-start: var(--nk-space);
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-sm);
+    text-wrap: pretty;
+  }
+
+  :where([data-nk="checkbox-group"] > [data-slot="checkbox-group-choices"]) {
+    display: grid;
+    gap: var(--nk-space);
+    margin-block-start: calc(var(--nk-space) * 2);
+  }
+
+  :where(
+    [data-nk="checkbox-group"][data-orientation="horizontal"]
+      > [data-slot="checkbox-group-choices"]
+  ) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--nk-space) * 4);
+  }
+
+  :where(
+    [data-nk="checkbox-group"][data-presentation="cards"]
+      > [data-slot="checkbox-group-choices"]
+      > [data-slot="checkbox-group-choice"]
+  ) {
+    inline-size: 100%;
+    padding: calc(var(--nk-space) * 3);
+    background: var(--nk-color-surface);
+    border: var(--nk-border-width) solid var(--nk-color-border);
+    border-radius: var(--nk-radius-md);
+  }
+}
+
+@layer nitro-kit.state {
+  :where(
+    [data-nk="checkbox-group"][data-presentation="cards"]
+      > [data-slot="checkbox-group-choices"]
+      > [data-slot="checkbox-group-choice"]:has(input:checked)
+  ) {
+    border-color: var(--nk-color-primary);
+    box-shadow: 0 0 0 var(--nk-border-width) var(--nk-color-primary);
+  }
+}

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

@@ -0,0 +1,148 @@
+@layer nitro-kit.base {
+  :where([data-nk="combobox"]) {
+    position: relative;
+    inline-size: 100%;
+  }
+
+  :where([data-nk="combobox"] > [data-slot="combobox-label"]) {
+    display: block;
+    margin-block-end: calc(var(--nk-space) * 2);
+  }
+
+  :where([data-nk="combobox"] > [data-slot="combobox-control"]) {
+    position: relative;
+    display: block;
+  }
+
+  :where([data-nk="combobox"] [data-slot="combobox-input"]) {
+    padding-inline-end: calc(var(--nk-space) * 10);
+  }
+
+  :where([data-nk="combobox"] [data-slot="combobox-icon"]) {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: calc(var(--nk-space) * 3);
+    color: var(--nk-color-muted-foreground);
+    pointer-events: none;
+    transform: translateY(-50%);
+  }
+
+  :where([data-nk="combobox"] > [data-slot="combobox-status"]) {
+    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;
+  }
+
+  :where([data-nk="combobox"] > [data-slot="combobox-listbox"]) {
+    position: fixed;
+    z-index: 50;
+    inline-size: max(var(--_nk-combobox-width, 12rem), 12rem);
+    max-inline-size: min(28rem, calc(100vw - (var(--nk-space) * 8)));
+    max-block-size: 15rem;
+    margin-block: var(--nk-space);
+    padding: var(--nk-space);
+    overflow-y: auto;
+    color: var(--nk-color-foreground);
+    list-style: none;
+    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-md);
+    inset: var(--_nk-overlay-top, auto) auto auto var(--_nk-overlay-left, auto);
+  }
+
+  :where([data-nk="combobox"] [data-slot="combobox-option"]) {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: center;
+    min-block-size: var(--nk-control-height-md);
+    padding-block: var(--nk-space);
+    padding-inline: calc(var(--nk-space) * 3);
+    font-size: var(--nk-text-sm);
+    line-height: var(--nk-leading-normal);
+    cursor: pointer;
+    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="combobox"] [data-slot="combobox-option-label"]) {
+    display: block;
+  }
+
+  :where(
+    [data-nk="combobox"]
+      > [data-slot="combobox-listbox"]
+      > [data-slot="combobox-option"]
+      > [data-slot="combobox-option-description"]
+  ) {
+    display: block;
+    margin-block-start: calc(var(--nk-space) * 0.5);
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-xs);
+    text-wrap: pretty;
+  }
+}
+
+@layer nitro-kit.state {
+  :where(
+    [data-nk="combobox"]
+      [data-slot="combobox-option"]:is(
+        [data-active="true"],
+        [aria-selected="true"]
+      )
+  ) {
+    background: var(--nk-color-muted);
+  }
+
+  :where(
+    [data-nk="combobox"]
+      > [data-slot="combobox-listbox"]
+      > [data-slot="combobox-option"]:is(
+        [data-active="true"],
+        [aria-selected="true"]
+      )
+      > [data-slot="combobox-option-description"]
+  ) {
+    color: var(--nk-color-foreground);
+  }
+
+  :where(
+    [data-nk="combobox"] [data-slot="combobox-option"][aria-disabled="true"]
+  ) {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  :where(
+    [data-nk="combobox"] > [data-slot="combobox-listbox"][data-state="open"]
+  ) {
+    animation: nk-combobox-enter var(--nk-duration-normal) var(--nk-ease);
+  }
+
+  @keyframes nk-combobox-enter {
+    from {
+      opacity: 0;
+      transform: translateY(-0.25rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-nk="combobox"] > [data-slot="combobox-listbox"]) {
+      animation-duration: 0.01ms;
+    }
+  }
+}

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

@@ -0,0 +1,255 @@
+@layer nitro-kit.base {
+  :where([data-nk="command-palette"]) {
+    inline-size: 100%;
+  }
+
+  :where([data-nk="command-palette"] > [data-slot="command-palette-trigger"]) {
+    justify-content: start;
+    inline-size: 100%;
+    color: var(--nk-color-muted-foreground);
+    font-weight: var(--nk-font-weight-normal);
+    background: var(--nk-color-surface);
+    box-shadow: none;
+  }
+
+  :where(
+    [data-nk="command-palette"]
+      > [data-slot="command-palette-trigger"]
+      > [data-slot="button-label"]
+  ) {
+    display: flex;
+    flex: 1 1 auto;
+    gap: calc(var(--nk-space) * 2);
+    align-items: center;
+    min-inline-size: 0;
+  }
+
+  :where(
+    [data-nk="command-palette"] [data-slot="command-palette-trigger-label"]
+  ) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where([data-nk="command-palette"] [data-slot="command-palette-shortcut"]) {
+    flex: 0 0 auto;
+    margin-inline-start: auto;
+    padding-block: calc(var(--nk-space) * 0.5);
+    padding-inline: calc(var(--nk-space) * 1.5);
+    color: var(--nk-color-foreground);
+    font-family: inherit;
+    font-size: var(--nk-text-xs);
+    line-height: var(--nk-leading-tight);
+    background: var(--nk-color-muted);
+    border: var(--nk-border-width) solid var(--nk-color-border);
+    border-radius: var(--nk-radius-sm);
+  }
+
+  :where([data-nk="command-palette"] > [data-slot="command-palette-panel"]) {
+    inline-size: min(calc(100% - (var(--nk-space) * 8)), var(--nk-content-md));
+    max-block-size: min(36rem, calc(100dvh - (var(--nk-space) * 8)));
+    margin: auto;
+    padding: 0;
+    overflow: hidden;
+    color: var(--nk-color-foreground);
+    background: var(--nk-color-surface);
+    border: var(--nk-border-width) solid var(--nk-color-border);
+    border-radius: var(--nk-radius-xl);
+    box-shadow: var(--nk-shadow-lg);
+  }
+
+  :where(
+    [data-nk="command-palette"] > [data-slot="command-palette-panel"]
+  )::backdrop {
+    background: var(--nk-color-overlay);
+  }
+
+  :where(
+    [data-nk="command-palette"] [data-slot="command-palette-title"],
+    [data-nk="command-palette"] [data-slot="command-palette-status"]
+  ) {
+    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;
+  }
+
+  :where([data-nk="command-palette"] [data-slot="command-palette-search"]) {
+    display: flex;
+    gap: calc(var(--nk-space) * 2);
+    align-items: center;
+    padding: calc(var(--nk-space) * 2);
+    border-block-end: var(--nk-border-width) solid var(--nk-color-border);
+  }
+
+  :where(
+    [data-nk="command-palette"]
+      > [data-slot="command-palette-panel"]
+      > [data-slot="command-palette-close"]
+  ) {
+    margin-block: calc(var(--nk-space) * 2);
+    margin-inline: auto calc(var(--nk-space) * 2);
+  }
+
+  :where(
+    [data-nk="command-palette"][data-enhanced]
+      > [data-slot="command-palette-panel"]
+      > [data-slot="command-palette-close"]
+  ) {
+    position: absolute;
+    z-index: 1;
+    inset-block-start: calc(var(--nk-space) * 2);
+    inset-inline-end: calc(var(--nk-space) * 2);
+    margin: 0;
+  }
+
+  :where(
+    [data-nk="command-palette"][data-enhanced]
+      [data-slot="command-palette-search"]
+  ) {
+    padding-inline-end: calc(
+      var(--nk-control-height-md) + (var(--nk-space) * 4)
+    );
+  }
+
+  :where(
+    [data-nk="command-palette"] [data-slot="command-palette-search"][hidden]
+  ) {
+    display: none;
+  }
+
+  :where(
+    [data-nk="command-palette"] [data-slot="command-palette-search-icon"]
+  ) {
+    flex: 0 0 auto;
+    margin-inline-start: calc(var(--nk-space) * 2);
+    color: var(--nk-color-muted-foreground);
+  }
+
+  :where([data-nk="command-palette"] [data-slot="command-palette-input"]) {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+
+  :where([data-nk="command-palette"])
+    [data-slot="command-palette-input"]::-webkit-search-cancel-button {
+    appearance: none;
+  }
+
+  :where([data-nk="command-palette"] [data-slot="command-palette-results"]) {
+    display: grid;
+    gap: var(--nk-space);
+    max-block-size: 26rem;
+    padding: calc(var(--nk-space) * 2);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  :where([data-nk="command-palette-results"]) {
+    display: block;
+    min-inline-size: 0;
+  }
+
+  :where(
+    [data-nk="command-palette"] [data-slot="command-palette-destination"]
+  ) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-block-size: var(--nk-control-height-md);
+    padding-block: var(--nk-space);
+    padding-inline: calc(var(--nk-space) * 3);
+    color: inherit;
+    font-size: var(--nk-text-sm);
+    line-height: var(--nk-leading-normal);
+    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="command-palette"]
+      [data-slot="command-palette-destination-description"]
+  ) {
+    margin-block-start: calc(var(--nk-space) * 0.5);
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-xs);
+    text-wrap: pretty;
+  }
+
+  :where([data-nk="command-palette"] [data-slot="command-palette-empty"]) {
+    margin: 0;
+    padding: calc(var(--nk-space) * 8) calc(var(--nk-space) * 4);
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-sm);
+    text-align: center;
+  }
+}
+
+@layer nitro-kit.state {
+  @media (hover: hover) {
+    :where(
+      [data-nk="command-palette"]
+        [data-slot="command-palette-destination"]:hover
+    ) {
+      color: var(--nk-color-foreground);
+      background: var(--nk-color-muted);
+    }
+  }
+
+  :where(
+    [data-nk="command-palette"]
+      [data-slot="command-palette-destination"]:focus-visible
+  ) {
+    color: var(--nk-color-foreground);
+    background: var(--nk-color-muted);
+    outline: var(--nk-focus-width) solid var(--nk-color-focus);
+    outline-offset: calc(var(--nk-focus-offset) * -1);
+  }
+
+  :where(
+    [data-nk="command-palette"]
+      [data-slot="command-palette-destination"]:is(:hover, :focus-visible)
+      [data-slot="command-palette-destination-description"]
+  ) {
+    color: var(--nk-color-foreground);
+  }
+
+  :where(
+    [data-nk="command-palette"] > [data-slot="command-palette-panel"][open]
+  ) {
+    animation: nk-command-palette-enter var(--nk-duration-slow) var(--nk-ease);
+  }
+
+  @keyframes nk-command-palette-enter {
+    from {
+      opacity: 0;
+      transform: translateY(-0.5rem) scale(0.98);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-nk="command-palette"] > [data-slot="command-palette-panel"]) {
+      animation-duration: 0.01ms;
+    }
+
+    :where(
+      [data-nk="command-palette"] [data-slot="command-palette-destination"]
+    ) {
+      transition-duration: 0.01ms;
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+@layer nitro-kit.base {
+  :where([data-nk="container"]) {
+    width: 100%;
+    min-width: 0;
+    margin-inline: auto;
+  }
+}
+
+@layer nitro-kit.size {
+  :where([data-nk="container"][data-size="sm"]) {
+    max-width: var(--nk-content-sm);
+  }
+
+  :where([data-nk="container"][data-size="md"]) {
+    max-width: var(--nk-content-md);
+  }
+
+  :where([data-nk="container"][data-size="lg"]) {
+    max-width: var(--nk-content-lg);
+  }
+
+  :where([data-nk="container"][data-size="xl"]) {
+    max-width: var(--nk-content-xl);
+  }
+}