@qeetrix/react 0.0.1 → 0.0.4

package/dist/css/experimental/top-bar.css

@@ -0,0 +1,299 @@
+@import "../base.css";
+@import "../button.css";
+@import "./app-shell.css";
+
+@layer qx.components {
+  .qx-top-bar {
+    align-items: stretch;
+    column-gap: var(--qx-space-gap-lg);
+    block-size: calc(var(--qx-size-control-lg) + 16px);
+    border-block-start: var(--qx-border-width-strong) solid var(--qx-color-border-brand);
+    border-block-end: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+    background: var(--qx-color-surface-sunken);
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    grid-template-columns: minmax(max-content, 1fr) auto;
+    padding-inline-end: var(--qx-space-inset-md);
+    display: grid;
+  }
+  
+  .qx-top-bar[data-search] {
+    grid-template-columns: minmax(max-content, 1fr) minmax(240px, 480px) minmax(max-content, 1fr);
+  }
+  
+  .qx-top-bar-start, .qx-top-bar-end {
+    align-items: center;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-top-bar-end {
+    justify-content: flex-end;
+    gap: var(--qx-space-gap-xs);
+  }
+  
+  .qx-top-bar-cell {
+    aspect-ratio: 1;
+    border-inline-end: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+    flex: none;
+    align-self: stretch;
+    place-items: center;
+    display: grid;
+  }
+  
+  .qx-top-bar-identity {
+    align-self: stretch;
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    padding-inline: var(--qx-space-inset-lg) var(--qx-space-inset-sm);
+    color: var(--qx-color-text-default);
+    white-space: nowrap;
+    flex: none;
+    text-decoration: none;
+    display: flex;
+  }
+  
+  .qx-top-bar-identity:hover {
+    background: var(--qx-color-overlay-hover);
+  }
+  
+  .qx-top-bar-identity:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+  }
+  
+  .qx-top-bar-product {
+    font: var(--qx-typography-label-md);
+    font-weight: var(--qx-typography-title-sm-font-weight);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+  }
+  
+  .qx-top-bar-slash {
+    inline-size: var(--qx-border-width-default);
+    block-size: 16px;
+    margin-inline: var(--qx-space-gap-sm);
+    background: var(--qx-color-border-strong);
+    flex: none;
+    rotate: 20deg;
+  }
+  
+  [dir="rtl"] .qx-top-bar-slash {
+    rotate: -20deg;
+  }
+  
+  .qx-top-bar-switcher {
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    min-inline-size: 0;
+    block-size: var(--qx-size-control-md);
+    padding-inline: var(--qx-space-inset-sm);
+    border-radius: var(--qx-radius-control);
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-label-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    white-space: nowrap;
+    cursor: pointer;
+    transition-property: background-color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    background: none;
+    border: 0;
+    display: flex;
+  }
+  
+  .qx-top-bar-switcher:hover, .qx-top-bar-switcher[data-popup-open] {
+    background: var(--qx-color-overlay-hover);
+  }
+  
+  .qx-top-bar-switcher:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+  }
+  
+  .qx-top-bar-switcher-label {
+    text-overflow: ellipsis;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+  
+  .qx-top-bar-mark {
+    border-radius: var(--qx-radius-sm);
+    background: var(--qx-color-overlay-pressed);
+    block-size: 20px;
+    inline-size: 20px;
+    font: var(--qx-typography-label-sm);
+    font-weight: var(--qx-typography-title-sm-font-weight);
+    flex: none;
+    place-items: center;
+    display: grid;
+    overflow: hidden;
+  }
+  
+  .qx-top-bar-status {
+    border-radius: var(--qx-radius-full);
+    background: var(--qx-color-icon-subtle);
+    flex: none;
+    block-size: 8px;
+    inline-size: 8px;
+  }
+  
+  .qx-top-bar-status[data-status="success"] {
+    background: var(--qx-color-bg-success-bold);
+  }
+  
+  .qx-top-bar-status[data-status="info"] {
+    background: var(--qx-color-bg-info-bold);
+  }
+  
+  .qx-top-bar-status[data-status="warning"] {
+    background: var(--qx-color-bg-warning-bold);
+  }
+  
+  .qx-top-bar-status[data-status="danger"] {
+    background: var(--qx-color-bg-danger-bold);
+  }
+  
+  .qx-top-bar-caret {
+    color: var(--qx-color-icon-subtle);
+    flex: none;
+  }
+  
+  .qx-top-bar-search {
+    align-items: center;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-top-bar-search-trigger {
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    inline-size: 100%;
+    block-size: var(--qx-size-control-lg);
+    padding-inline: var(--qx-space-inset-sm) var(--qx-space-gap-xs);
+    border: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    border-radius: var(--qx-radius-control);
+    background: var(--qx-color-overlay-hover);
+    color: var(--qx-color-text-subtlest);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    cursor: pointer;
+    transition-property: background-color, border-color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    display: flex;
+  }
+  
+  .qx-top-bar-search-trigger:hover {
+    border-color: var(--qx-color-border-strong);
+    background: var(--qx-color-overlay-pressed);
+  }
+  
+  .qx-top-bar-search-trigger:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+  }
+  
+  .qx-top-bar-search-icon {
+    color: var(--qx-color-icon-subtle);
+    flex: none;
+  }
+  
+  .qx-top-bar-search-text {
+    text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+  
+  .qx-top-bar-keys {
+    flex: none;
+    gap: 2px;
+    display: flex;
+  }
+  
+  .qx-top-bar-key {
+    block-size: 20px;
+    min-inline-size: 20px;
+    padding-inline: var(--qx-space-gap-xs);
+    border: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    border-radius: var(--qx-radius-sm);
+    color: var(--qx-color-text-subtle);
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    place-items: center;
+    display: grid;
+  }
+  
+  .qx-top-bar-tools {
+    align-items: center;
+    gap: var(--qx-space-gap-xs);
+    display: flex;
+  }
+  
+  .qx-top-bar-tool {
+    position: relative;
+  }
+  
+  .qx-top-bar-tool > [aria-pressed="true"] {
+    background: var(--qx-color-overlay-pressed);
+    color: var(--qx-color-text-default);
+  }
+  
+  .qx-top-bar-tool[data-badge]:after {
+    content: "";
+    border: var(--qx-border-width-strong) solid var(--qx-color-surface-sunken);
+    border-radius: var(--qx-radius-full);
+    background: var(--qx-color-icon-brand);
+    pointer-events: none;
+    block-size: 10px;
+    inline-size: 10px;
+    position: absolute;
+    inset-block-start: 3px;
+    inset-inline-end: 3px;
+  }
+  
+  .qx-top-bar-rule {
+    inline-size: var(--qx-border-width-default);
+    block-size: 20px;
+    margin-inline: var(--qx-space-gap-sm);
+    background: var(--qx-color-border-subtle);
+    flex: none;
+  }
+  
+  @media (width < 840px) {
+    .qx-top-bar, .qx-top-bar[data-search] {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+  
+    .qx-top-bar-search {
+      display: none;
+    }
+  }
+  
+  @media (forced-colors: active) {
+    .qx-top-bar {
+      border-block-end-color: canvastext;
+    }
+  
+    .qx-top-bar-cell {
+      border-inline-end-color: canvastext;
+    }
+  
+    .qx-top-bar-slash, .qx-top-bar-rule {
+      forced-color-adjust: none;
+      background: canvastext;
+    }
+  
+    .qx-top-bar-status, .qx-top-bar-tool[data-badge]:after {
+      forced-color-adjust: none;
+      background: highlight;
+    }
+  
+    .qx-top-bar-search-trigger, .qx-top-bar-key {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/css/field.css

@@ -0,0 +1,121 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-field {
+    gap: var(--qx-space-gap-xs);
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-field-label {
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+  }
+  
+  .qx-field-label[data-disabled] {
+    color: var(--qx-color-text-disabled);
+  }
+  
+  .qx-field-label[data-hidden] {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    position: absolute;
+    overflow: hidden;
+  }
+  
+  .qx-field-optional {
+    font-weight: var(--qx-typography-body-sm-font-weight);
+    color: var(--qx-color-text-subtlest);
+  }
+  
+  .qx-field-description {
+    font: var(--qx-typography-body-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+    margin: 0;
+  }
+  
+  .qx-field[data-invalid] > .qx-field-description {
+    display: none;
+  }
+  
+  .qx-field-error {
+    align-items: flex-start;
+    gap: var(--qx-space-gap-xs);
+    font: var(--qx-typography-body-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-danger);
+    display: flex;
+  }
+  
+  .qx-field-error-icon {
+    color: var(--qx-color-icon-danger);
+    flex: none;
+  }
+  
+  .qx-choice {
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-choice-label {
+    align-items: flex-start;
+    gap: var(--qx-space-gap-sm);
+    inline-size: fit-content;
+    min-block-size: var(--qx-size-target-min);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-default);
+    cursor: pointer;
+    padding-block: 2px;
+    display: inline-flex;
+  }
+  
+  .qx-choice-label > :first-child {
+    margin-block: 2px;
+  }
+  
+  .qx-choice[data-disabled] .qx-choice-label {
+    color: var(--qx-color-text-disabled);
+    cursor: not-allowed;
+  }
+  
+  .qx-choice-description {
+    font: var(--qx-typography-body-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+    margin: 0;
+    padding-inline-start: 24px;
+  }
+  
+  .qx-choice[data-slot="switch"] .qx-choice-description {
+    padding-inline-start: 40px;
+  }
+  
+  .qx-choice-group-set {
+    gap: var(--qx-space-gap-xs);
+    border: 0;
+    flex-direction: column;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    display: flex;
+  }
+  
+  .qx-choice-group-options {
+    gap: var(--qx-space-gap-xs);
+    flex-direction: column;
+    display: flex;
+  }
+  
+  .qx-choice-group[data-orientation="horizontal"] .qx-choice-group-options {
+    column-gap: var(--qx-space-gap-lg);
+    flex-flow: wrap;
+  }
+}

package/dist/css/fieldset.css

@@ -0,0 +1,37 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-fieldset {
+    gap: var(--qx-space-form-gap);
+    border: 0;
+    flex-direction: column;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    display: flex;
+  }
+  
+  .qx-fieldset-header {
+    gap: var(--qx-space-gap-xs);
+    flex-direction: column;
+    display: flex;
+  }
+  
+  .qx-fieldset-legend {
+    font: var(--qx-typography-title-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    color: var(--qx-color-text-default);
+    padding: 0;
+  }
+  
+  .qx-fieldset-legend[data-disabled] {
+    color: var(--qx-color-text-disabled);
+  }
+  
+  .qx-fieldset-description {
+    font: var(--qx-typography-body-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+    margin: 0;
+  }
+}

package/dist/css/grid.css

@@ -0,0 +1,86 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-grid {
+    --qx-grid-current: var(--qx-grid-base, 1);
+    grid-template-columns: repeat(var(--qx-grid-current), minmax(0, 1fr));
+    align-items: stretch;
+    display: grid;
+  }
+  
+  .qx-grid[data-gap="none"] {
+    gap: 0;
+  }
+  
+  .qx-grid[data-gap="xs"] {
+    gap: var(--qx-space-gap-xs);
+  }
+  
+  .qx-grid[data-gap="sm"] {
+    gap: var(--qx-space-gap-sm);
+  }
+  
+  .qx-grid[data-gap="md"] {
+    gap: var(--qx-space-gap-md);
+  }
+  
+  .qx-grid[data-gap="lg"] {
+    gap: var(--qx-space-gap-lg);
+  }
+  
+  .qx-grid[data-gap="xl"] {
+    gap: var(--qx-space-gap-xl);
+  }
+  
+  .qx-grid[data-gap="2xl"] {
+    gap: var(--qx-space-layout-md);
+  }
+  
+  .qx-grid[data-gap="3xl"] {
+    gap: var(--qx-space-layout-lg);
+  }
+  
+  .qx-grid[data-gap="4xl"] {
+    gap: var(--qx-space-layout-xl);
+  }
+  
+  .qx-grid[data-align="start"] {
+    align-items: start;
+  }
+  
+  .qx-grid[data-align="center"] {
+    align-items: center;
+  }
+  
+  .qx-grid[data-align="end"] {
+    align-items: end;
+  }
+  
+  .qx-grid[data-align="stretch"] {
+    align-items: stretch;
+  }
+  
+  @media (width >= 600px) {
+    .qx-grid {
+      --qx-grid-current: var(--qx-grid-medium, var(--qx-grid-base, 1));
+    }
+  }
+  
+  @media (width >= 840px) {
+    .qx-grid {
+      --qx-grid-current: var(--qx-grid-expanded, var(--qx-grid-medium, var(--qx-grid-base, 1)));
+    }
+  }
+  
+  @media (width >= 1200px) {
+    .qx-grid {
+      --qx-grid-current: var(--qx-grid-large, var(--qx-grid-expanded, var(--qx-grid-medium, var(--qx-grid-base, 1))));
+    }
+  }
+  
+  @media (width >= 1600px) {
+    .qx-grid {
+      --qx-grid-current: var(--qx-grid-xlarge, var(--qx-grid-large, var(--qx-grid-expanded, var(--qx-grid-medium, var(--qx-grid-base, 1)))));
+    }
+  }
+}

package/dist/css/heading.css

@@ -0,0 +1,93 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-heading {
+    font: var(--qx-typography-heading-lg);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    color: var(--qx-color-text-default);
+    margin: 0;
+  }
+  
+  .qx-heading[data-size="display-lg"] {
+    font-size: var(--qx-typography-display-lg-font-size);
+    line-height: var(--qx-typography-display-lg-line-height);
+  }
+  
+  .qx-heading[data-size="display-md"] {
+    font-size: var(--qx-typography-display-md-font-size);
+    line-height: var(--qx-typography-display-md-line-height);
+  }
+  
+  .qx-heading[data-size="display-sm"] {
+    font-size: var(--qx-typography-display-sm-font-size);
+    line-height: var(--qx-typography-display-sm-line-height);
+  }
+  
+  .qx-heading[data-size="heading-lg"] {
+    font-size: var(--qx-typography-heading-lg-font-size);
+    line-height: var(--qx-typography-heading-lg-line-height);
+  }
+  
+  .qx-heading[data-size="heading-md"] {
+    font-size: var(--qx-typography-heading-md-font-size);
+    line-height: var(--qx-typography-heading-md-line-height);
+  }
+  
+  .qx-heading[data-size="heading-sm"] {
+    font-size: var(--qx-typography-heading-sm-font-size);
+    line-height: var(--qx-typography-heading-sm-line-height);
+  }
+  
+  .qx-heading[data-size="title-lg"] {
+    font-size: var(--qx-typography-title-lg-font-size);
+    line-height: var(--qx-typography-title-lg-line-height);
+  }
+  
+  .qx-heading[data-size="title-md"] {
+    font-size: var(--qx-typography-title-md-font-size);
+    line-height: var(--qx-typography-title-md-line-height);
+  }
+  
+  .qx-heading[data-size="title-sm"] {
+    font-size: var(--qx-typography-title-sm-font-size);
+    line-height: var(--qx-typography-title-sm-line-height);
+  }
+  
+  .qx-heading[data-size^="display-"] {
+    font-variation-settings: "GEOM" var(--qx-font-geometry-display);
+  }
+  
+  .qx-heading[data-tone="subtle"] {
+    color: var(--qx-color-text-subtle);
+  }
+  
+  .qx-heading[data-tone="inverse"] {
+    color: var(--qx-color-text-inverse);
+  }
+  
+  .qx-heading[data-truncate="line"] {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  
+  .qx-heading[data-truncate="lines"] {
+    -webkit-line-clamp: var(--qx-text-lines);
+    line-clamp: var(--qx-text-lines);
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+  
+  .qx-heading[data-align="start"] {
+    text-align: start;
+  }
+  
+  .qx-heading[data-align="center"] {
+    text-align: center;
+  }
+  
+  .qx-heading[data-align="end"] {
+    text-align: end;
+  }
+}

package/dist/css/inline.css

@@ -0,0 +1,85 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-inline {
+    flex-wrap: wrap;
+    align-items: center;
+    display: flex;
+  }
+  
+  .qx-inline[data-wrap="false"] {
+    flex-wrap: nowrap;
+  }
+  
+  .qx-inline[data-gap="none"] {
+    gap: 0;
+  }
+  
+  .qx-inline[data-gap="xs"] {
+    gap: var(--qx-space-gap-xs);
+  }
+  
+  .qx-inline[data-gap="sm"] {
+    gap: var(--qx-space-gap-sm);
+  }
+  
+  .qx-inline[data-gap="md"] {
+    gap: var(--qx-space-gap-md);
+  }
+  
+  .qx-inline[data-gap="lg"] {
+    gap: var(--qx-space-gap-lg);
+  }
+  
+  .qx-inline[data-gap="xl"] {
+    gap: var(--qx-space-gap-xl);
+  }
+  
+  .qx-inline[data-gap="2xl"] {
+    gap: var(--qx-space-layout-md);
+  }
+  
+  .qx-inline[data-gap="3xl"] {
+    gap: var(--qx-space-layout-lg);
+  }
+  
+  .qx-inline[data-gap="4xl"] {
+    gap: var(--qx-space-layout-xl);
+  }
+  
+  .qx-inline[data-align="start"] {
+    align-items: flex-start;
+  }
+  
+  .qx-inline[data-align="center"] {
+    align-items: center;
+  }
+  
+  .qx-inline[data-align="end"] {
+    align-items: flex-end;
+  }
+  
+  .qx-inline[data-align="baseline"] {
+    align-items: baseline;
+  }
+  
+  .qx-inline[data-align="stretch"] {
+    align-items: stretch;
+  }
+  
+  .qx-inline[data-justify="start"] {
+    justify-content: flex-start;
+  }
+  
+  .qx-inline[data-justify="center"] {
+    justify-content: center;
+  }
+  
+  .qx-inline[data-justify="end"] {
+    justify-content: flex-end;
+  }
+  
+  .qx-inline[data-justify="between"] {
+    justify-content: space-between;
+  }
+}