nitro_kit 0.9.0 → 2.0.0.alpha.2

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

@@ -0,0 +1,198 @@
+@layer nitro-kit.base {
+  :where([data-nk="dropzone"]) {
+    display: grid;
+    gap: calc(var(--nk-space) * 3);
+    padding: calc(var(--nk-space) * 4);
+    color: var(--nk-color-foreground);
+    background: var(--nk-color-surface);
+    border: calc(var(--nk-border-width) * 2) dashed var(--nk-color-border);
+    border-radius: var(--nk-radius-lg);
+  }
+
+  :where([data-nk="dropzone"] > [data-slot="dropzone-message"]) {
+    display: grid;
+    gap: var(--nk-space);
+    cursor: pointer;
+    text-align: center;
+  }
+
+  :where(
+    [data-nk="dropzone"] [data-slot="dropzone-instruction"],
+    [data-nk="dropzone"] [data-slot="dropzone-description"],
+    [data-nk="dropzone"] [data-slot="dropzone-file-size"],
+    [data-nk="dropzone"] [data-slot="dropzone-file-status"],
+    [data-nk="dropzone"] > [data-slot="dropzone-status"]
+  ) {
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-sm);
+  }
+
+  :where([data-nk="dropzone"] > [data-slot="dropzone-input"]) {
+    inline-size: 100%;
+    min-block-size: var(--nk-control-height-md);
+    color: var(--nk-color-foreground);
+    background: var(--nk-color-canvas);
+    border: var(--nk-border-width) solid var(--nk-color-border);
+    border-radius: var(--nk-radius-md);
+  }
+
+  :where(
+    [data-nk="dropzone"] > [data-slot="dropzone-input"]
+  )::file-selector-button {
+    min-block-size: calc(
+      var(--nk-control-height-md) - (var(--nk-border-width) * 2)
+    );
+    margin-inline-end: calc(var(--nk-space) * 3);
+    padding-inline: calc(var(--nk-space) * 3);
+    color: var(--nk-color-foreground);
+    font-weight: var(--nk-font-weight-medium);
+    background: var(--nk-color-muted);
+    border: 0;
+    border-inline-end: var(--nk-border-width) solid var(--nk-color-border);
+  }
+
+  /* The minimal presentation keeps the native input operable and in the
+     accessibility tree while the drop target is the only visible affordance.
+     The label already points at the input, so clicking anywhere in the message
+     still opens the file picker. */
+  :where([data-nk="dropzone"][data-presentation="minimal"]) {
+    position: relative;
+  }
+
+  :where(
+    [data-nk="dropzone"][data-presentation="minimal"]
+      > [data-slot="dropzone-input"]
+  ) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+
+  :where([data-nk="dropzone"] > [data-slot="dropzone-preview-list"]) {
+    display: grid;
+    gap: calc(var(--nk-space) * 2);
+    padding: 0;
+    list-style: none;
+  }
+
+  :where([data-nk="dropzone"] [data-slot="dropzone-preview"]) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: calc(var(--nk-space) * 2);
+    align-items: center;
+    padding: calc(var(--nk-space) * 2);
+    background: var(--nk-color-canvas);
+    border: var(--nk-border-width) solid var(--nk-color-border);
+    border-radius: var(--nk-radius-md);
+  }
+
+  :where([data-nk="dropzone"] [data-slot="dropzone-preview-image"]) {
+    grid-row: span 2;
+    inline-size: 3rem;
+    block-size: 3rem;
+    object-fit: cover;
+    border-radius: var(--nk-radius-sm);
+  }
+
+  :where([data-nk="dropzone"] [data-slot="dropzone-file"]) {
+    display: grid;
+    min-inline-size: 0;
+  }
+
+  :where([data-nk="dropzone"] [data-slot="dropzone-file-name"]) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where([data-nk="dropzone"] [data-slot="dropzone-progress"]) {
+    inline-size: 100%;
+    block-size: calc(var(--nk-space) * 2);
+    accent-color: var(--nk-color-primary);
+  }
+
+  :where([data-nk="dropzone"] [data-slot="dropzone-remove-control"]) {
+    grid-column: -2 / -1;
+    justify-self: end;
+    min-block-size: var(--nk-control-height-md);
+    padding-inline: calc(var(--nk-space) * 2);
+    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-sm);
+  }
+}
+
+@layer nitro-kit.state {
+  :where([data-nk="dropzone"][data-state="drag"]) {
+    background: var(--nk-color-muted);
+    border-color: var(--nk-color-primary);
+  }
+
+  :where(
+    [data-nk="dropzone"][data-presentation="minimal"][data-state="idle"]
+      > [data-slot="dropzone-status"]
+  ) {
+    text-align: center;
+  }
+
+  :where([data-nk="dropzone"][data-state="uploading"]) {
+    border-color: var(--nk-color-info);
+  }
+
+  :where([data-nk="dropzone"][data-state="success"]) {
+    border-color: var(--nk-color-success);
+  }
+
+  :where([data-nk="dropzone"][data-state="error"]) {
+    border-color: var(--nk-color-danger);
+  }
+
+  :where([data-nk="dropzone"][data-state="disabled"]) {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  :where(
+    [data-nk="dropzone"] > [data-slot="dropzone-input"]:focus-visible,
+    [data-nk="dropzone"] [data-slot="dropzone-remove-control"]:focus-visible
+  ) {
+    outline: var(--nk-focus-width) solid var(--nk-color-focus);
+    outline-offset: var(--nk-focus-offset);
+  }
+
+  /* The clipped input cannot carry a visible ring, so the drop target it
+     labels wears the focus treatment on its behalf. */
+  :where(
+    [data-nk="dropzone"][data-presentation="minimal"]:has(
+        > [data-slot="dropzone-input"]:focus-visible
+      )
+  ) {
+    outline: var(--nk-focus-width) solid var(--nk-color-focus);
+    outline-offset: var(--nk-focus-offset);
+  }
+
+  :where([data-nk="dropzone"] [data-slot="dropzone-remove-control"]:hover) {
+    background: var(--nk-color-surface-hover);
+  }
+
+  :where([data-nk="dropzone"] > [data-slot="dropzone-error"]) {
+    color: var(--nk-color-danger-content);
+    font-size: var(--nk-text-sm);
+  }
+}
+
+@media (max-width: 40rem) {
+  @layer nitro-kit.base {
+    :where([data-nk="dropzone"] [data-slot="dropzone-preview"]) {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+
+    :where([data-nk="dropzone"] [data-slot="dropzone-preview-image"]) {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,53 @@
+@layer nitro-kit.base {
+  :where([data-nk="empty-state"]) {
+    display: grid;
+    justify-items: center;
+    gap: calc(var(--nk-space) * 3);
+    width: 100%;
+    padding: calc(var(--nk-space) * 10) calc(var(--nk-space) * 5);
+    color: var(--nk-color-foreground);
+    text-align: center;
+    background: var(--nk-color-surface);
+    border: var(--nk-border-width) dashed var(--nk-color-border);
+    border-radius: var(--nk-radius-lg);
+  }
+
+  :where([data-nk="empty-state"] > [data-slot="empty-state-icon"]) {
+    width: 2rem;
+    height: 2rem;
+    color: var(--nk-color-muted-foreground);
+  }
+
+  :where([data-nk="empty-state"] > [data-slot="empty-state-title"]) {
+    max-width: var(--nk-content-md);
+    font-size: var(--nk-text-lg);
+    font-weight: var(--nk-font-weight-semibold);
+    line-height: var(--nk-leading-tight);
+    text-wrap: balance;
+  }
+
+  :where([data-nk="empty-state"] > [data-slot="empty-state-description"]) {
+    max-width: var(--nk-content-md);
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-sm);
+    line-height: var(--nk-leading-relaxed);
+    text-wrap: pretty;
+  }
+
+  :where([data-nk="empty-state"] > [data-slot="empty-state-actions"]) {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: calc(var(--nk-space) * 2);
+    margin-block-start: calc(var(--nk-space) * 2);
+  }
+}
+
+@layer nitro-kit.variant {
+  /* The dashed default reads as a drop target. The borderless variant drops
+     that frame for regions a Card, DataSection, or table already encloses. */
+  :where([data-nk="empty-state"][data-variant="borderless"]) {
+    background: none;
+    border-color: transparent;
+  }
+}

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

@@ -0,0 +1,79 @@
+@layer nitro-kit.base {
+  :where([data-nk="field"]) {
+    display: grid;
+    align-items: start;
+    color: var(--nk-color-foreground);
+  }
+
+  :where([data-nk="field"] > [data-slot="field-label"]) {
+    font-size: var(--nk-text-sm);
+    font-weight: var(--nk-font-weight-medium);
+  }
+
+  :where([data-nk="field"] > [data-slot="field-description"]) {
+    color: var(--nk-color-muted-foreground);
+    font-size: var(--nk-text-sm);
+    text-wrap: pretty;
+  }
+
+  :where([data-nk="field"] > [data-slot="field-error"]) {
+    padding: 0;
+    color: var(--nk-color-danger-content);
+    font-size: var(--nk-text-sm);
+    list-style: none;
+  }
+
+  :where([data-nk="field"] > [data-slot="field-control"][data-nk="select"]) {
+    inline-size: 100%;
+  }
+}
+
+@layer nitro-kit.compound {
+  :where(
+    [data-nk="field"] > [data-slot="field-label"] + [data-slot="field-control"]
+  ) {
+    margin-block-start: calc(var(--nk-space) * 2);
+  }
+
+  :where(
+    [data-nk="field"]
+      > [data-slot="field-label"]
+      + [data-slot="field-description"]
+  ) {
+    margin-block-start: var(--nk-space);
+  }
+
+  :where(
+    [data-nk="field"]
+      > [data-slot="field-description"]
+      + [data-slot="field-control"]
+  ) {
+    margin-block-start: calc(var(--nk-space) * 3);
+  }
+
+  :where(
+    [data-nk="field"]
+      > [data-slot="field-control"]
+      + [data-slot="field-description"],
+    [data-nk="field"] > [data-slot="field-control"] + [data-slot="field-error"],
+    [data-nk="field"]
+      > [data-slot="field-description"]
+      + [data-slot="field-error"]
+  ) {
+    margin-block-start: calc(var(--nk-space) * 2);
+  }
+}
+
+@layer nitro-kit.state {
+  :where(
+    [data-nk="field"][data-state="invalid"]
+      > [data-slot="field-control"][data-nk="select"]
+      > [data-slot="select-control"],
+    [data-nk="field"][data-state="invalid"]
+      > [data-slot="field-control"][data-nk="textarea"],
+    [data-nk="field"][data-state="invalid"]
+      > [data-slot="field-control"][data-nk="input"]
+  ) {
+    border-color: var(--nk-color-danger);
+  }
+}

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

@@ -0,0 +1,6 @@
+@layer nitro-kit.compound {
+  :where([data-nk="field-group"]) {
+    display: grid;
+    gap: calc(var(--nk-space) * 6);
+  }
+}

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

@@ -0,0 +1,28 @@
+@layer nitro-kit.base {
+  :where([data-nk="fieldset"]) {
+    min-inline-size: 0;
+    padding: 0;
+    color: var(--nk-color-foreground);
+    border: 0;
+  }
+
+  :where([data-nk="fieldset"] > [data-slot="fieldset-legend"]) {
+    padding: 0;
+    font-size: var(--nk-text-lg);
+    font-weight: var(--nk-font-weight-semibold);
+    line-height: var(--nk-leading-tight);
+  }
+
+  :where([data-nk="fieldset"] > [data-slot="fieldset-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="fieldset"] > [data-slot="fieldset-fields"]) {
+    display: grid;
+    gap: calc(var(--nk-space) * 6);
+    margin-block-start: calc(var(--nk-space) * 6);
+  }
+}