@qeetrix/react 0.0.1 → 0.0.4

package/dist/css/badge.css

@@ -0,0 +1,59 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-badge {
+    align-items: center;
+    gap: var(--qx-space-gap-xs);
+    border-radius: var(--qx-radius-chip);
+    background: var(--qx-color-bg-neutral-subtle-pressed);
+    max-inline-size: 100%;
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    white-space: nowrap;
+    vertical-align: middle;
+    padding: 2px 8px;
+    display: inline-flex;
+  }
+  
+  .qx-badge[data-tone="brand"] {
+    background: var(--qx-color-bg-brand-subtle);
+    color: var(--qx-color-text-brand);
+  }
+  
+  .qx-badge[data-tone="info"] {
+    background: var(--qx-color-bg-info-subtle);
+    color: var(--qx-color-text-info);
+  }
+  
+  .qx-badge[data-tone="success"] {
+    background: var(--qx-color-bg-success-subtle);
+    color: var(--qx-color-text-success);
+  }
+  
+  .qx-badge[data-tone="warning"] {
+    background: var(--qx-color-bg-warning-subtle);
+    color: var(--qx-color-text-warning);
+  }
+  
+  .qx-badge[data-tone="danger"] {
+    background: var(--qx-color-bg-danger-subtle);
+    color: var(--qx-color-text-danger);
+  }
+  
+  .qx-badge-icon {
+    flex: none;
+  }
+  
+  .qx-badge-label {
+    text-overflow: ellipsis;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-badge {
+      border: var(--qx-border-width-default) solid CanvasText;
+    }
+  }
+}

package/dist/css/box.css

@@ -0,0 +1,163 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-box[data-padding="none"] {
+    padding: 0;
+  }
+  
+  .qx-box[data-padding="xs"] {
+    padding: var(--qx-space-inset-xs);
+  }
+  
+  .qx-box[data-padding="sm"] {
+    padding: var(--qx-space-inset-sm);
+  }
+  
+  .qx-box[data-padding="md"] {
+    padding: var(--qx-space-inset-md);
+  }
+  
+  .qx-box[data-padding="lg"] {
+    padding: var(--qx-space-inset-lg);
+  }
+  
+  .qx-box[data-padding="xl"] {
+    padding: var(--qx-space-inset-xl);
+  }
+  
+  .qx-box[data-padding-inline="none"] {
+    padding-inline: 0;
+  }
+  
+  .qx-box[data-padding-inline="xs"] {
+    padding-inline: var(--qx-space-inset-xs);
+  }
+  
+  .qx-box[data-padding-inline="sm"] {
+    padding-inline: var(--qx-space-inset-sm);
+  }
+  
+  .qx-box[data-padding-inline="md"] {
+    padding-inline: var(--qx-space-inset-md);
+  }
+  
+  .qx-box[data-padding-inline="lg"] {
+    padding-inline: var(--qx-space-inset-lg);
+  }
+  
+  .qx-box[data-padding-inline="xl"] {
+    padding-inline: var(--qx-space-inset-xl);
+  }
+  
+  .qx-box[data-padding-block="none"] {
+    padding-block: 0;
+  }
+  
+  .qx-box[data-padding-block="xs"] {
+    padding-block: var(--qx-space-inset-xs);
+  }
+  
+  .qx-box[data-padding-block="sm"] {
+    padding-block: var(--qx-space-inset-sm);
+  }
+  
+  .qx-box[data-padding-block="md"] {
+    padding-block: var(--qx-space-inset-md);
+  }
+  
+  .qx-box[data-padding-block="lg"] {
+    padding-block: var(--qx-space-inset-lg);
+  }
+  
+  .qx-box[data-padding-block="xl"] {
+    padding-block: var(--qx-space-inset-xl);
+  }
+  
+  .qx-box[data-background="canvas"] {
+    background: var(--qx-color-surface-canvas);
+  }
+  
+  .qx-box[data-background="default"] {
+    background: var(--qx-color-surface-default);
+  }
+  
+  .qx-box[data-background="raised"] {
+    background: var(--qx-color-surface-raised);
+  }
+  
+  .qx-box[data-background="sunken"] {
+    background: var(--qx-color-surface-sunken);
+  }
+  
+  .qx-box[data-background="overlay"] {
+    background: var(--qx-color-surface-overlay);
+  }
+  
+  .qx-box[data-background="inverse"] {
+    background: var(--qx-color-surface-inverse);
+  }
+  
+  .qx-box[data-background="neutral"] {
+    background: var(--qx-color-bg-neutral-subtle);
+  }
+  
+  .qx-box[data-background="brand"] {
+    background: var(--qx-color-bg-brand-subtle);
+  }
+  
+  .qx-box[data-background="selected"] {
+    background: var(--qx-color-bg-selected);
+  }
+  
+  .qx-box[data-background="inverse"] {
+    color: var(--qx-color-text-inverse);
+  }
+  
+  .qx-box[data-border="none"] {
+    border: 0;
+  }
+  
+  .qx-box[data-border="subtle"] {
+    border: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+  }
+  
+  .qx-box[data-border="default"] {
+    border: var(--qx-border-width-default) solid var(--qx-color-border-default);
+  }
+  
+  .qx-box[data-border="strong"] {
+    border: var(--qx-border-width-default) solid var(--qx-color-border-strong);
+  }
+  
+  .qx-box[data-radius="none"] {
+    border-radius: var(--qx-radius-none);
+  }
+  
+  .qx-box[data-radius="sm"] {
+    border-radius: var(--qx-radius-sm);
+  }
+  
+  .qx-box[data-radius="control"] {
+    border-radius: var(--qx-radius-control);
+  }
+  
+  .qx-box[data-radius="surface"] {
+    border-radius: var(--qx-radius-surface);
+  }
+  
+  .qx-box[data-radius="overlay"] {
+    border-radius: var(--qx-radius-overlay);
+  }
+  
+  .qx-box[data-radius="modal"] {
+    border-radius: var(--qx-radius-modal);
+  }
+  
+  .qx-box[data-radius="chip"] {
+    border-radius: var(--qx-radius-chip);
+  }
+  
+  .qx-box[data-radius="full"] {
+    border-radius: var(--qx-radius-full);
+  }
+}

package/dist/css/button.css

@@ -0,0 +1,243 @@
+@import "./base.css";
+@import "./spinner.css";
+@import "./tooltip.css";
+
+@layer qx.components {
+  .qx-button {
+    block-size: var(--qx-size-control-md);
+    border-radius: var(--qx-radius-control);
+    font: var(--qx-typography-label-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    white-space: nowrap;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    transition-property: background-color, color, box-shadow;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    border: 0;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    padding-inline: 14px 0;
+    text-decoration: none;
+    display: inline-flex;
+    position: relative;
+  }
+  
+  .qx-button:not([data-icon]):not([data-loading]) {
+    padding-inline: 14px;
+  }
+  
+  .qx-button[data-size="sm"] {
+    block-size: var(--qx-size-control-sm);
+    font-size: var(--qx-typography-label-sm-font-size);
+    line-height: var(--qx-typography-label-sm-line-height);
+    gap: 8px;
+    padding-inline: 10px 0;
+  }
+  
+  .qx-button[data-size="sm"]:not([data-icon]):not([data-loading]) {
+    padding-inline: 10px;
+  }
+  
+  .qx-button[data-size="lg"] {
+    block-size: var(--qx-size-control-lg);
+    gap: 14px;
+    padding-inline: 16px 0;
+  }
+  
+  .qx-button[data-size="lg"]:not([data-icon]):not([data-loading]) {
+    padding-inline: 16px;
+  }
+  
+  .qx-button[data-full-width] {
+    inline-size: 100%;
+  }
+  
+  .qx-button[data-variant="solid"] {
+    background: var(--qx-color-bg-brand-bold);
+    color: var(--qx-color-text-on-brand);
+  }
+  
+  .qx-button[data-variant="solid"]:hover:not([data-disabled]) {
+    background: var(--qx-color-bg-brand-bold-hover);
+  }
+  
+  .qx-button[data-variant="solid"]:active:not([data-disabled]) {
+    background: var(--qx-color-bg-brand-bold-pressed);
+  }
+  
+  .qx-button[data-variant="soft"] {
+    background: var(--qx-color-bg-neutral-bold);
+    color: var(--qx-color-text-inverse);
+  }
+  
+  .qx-button[data-variant="soft"]:hover:not([data-disabled]) {
+    background: var(--qx-color-bg-neutral-bold-hover);
+  }
+  
+  .qx-button[data-variant="soft"]:active:not([data-disabled]) {
+    background: var(--qx-color-bg-neutral-bold-pressed);
+  }
+  
+  .qx-button[data-variant="ghost"] {
+    color: var(--qx-color-text-brand);
+    background: none;
+  }
+  
+  .qx-button[data-variant="ghost"]:hover:not([data-disabled]) {
+    background: var(--qx-color-bg-brand-subtle);
+  }
+  
+  .qx-button[data-variant="ghost"]:active:not([data-disabled]) {
+    background: var(--qx-color-bg-brand-subtle-pressed);
+  }
+  
+  .qx-button[data-tone="danger"]:not([data-variant="ghost"]) {
+    background: var(--qx-color-bg-danger-bold);
+    color: var(--qx-color-text-on-bold);
+  }
+  
+  .qx-button[data-tone="danger"]:not([data-variant="ghost"]):hover:not([data-disabled]) {
+    background: var(--qx-color-bg-danger-bold-hover);
+  }
+  
+  .qx-button[data-tone="danger"]:not([data-variant="ghost"]):active:not([data-disabled]) {
+    background: var(--qx-color-bg-danger-bold-pressed);
+  }
+  
+  .qx-button[data-tone="danger"][data-variant="ghost"] {
+    color: var(--qx-color-text-danger);
+  }
+  
+  .qx-button[data-tone="danger"][data-variant="ghost"]:hover:not([data-disabled]) {
+    background: var(--qx-color-bg-danger-subtle);
+  }
+  
+  .qx-button[data-tone="neutral"][data-variant="ghost"] {
+    color: var(--qx-color-text-subtle);
+  }
+  
+  .qx-button[data-tone="neutral"][data-variant="ghost"]:hover:not([data-disabled]) {
+    background: var(--qx-color-bg-neutral-subtle);
+    color: var(--qx-color-text-default);
+  }
+  
+  .qx-button[data-tone="neutral"][data-variant="ghost"]:active:not([data-disabled]) {
+    background: var(--qx-color-bg-neutral-subtle-pressed);
+  }
+  
+  .qx-button[data-tone="neutral"]:not([data-variant="ghost"]) {
+    background: var(--qx-color-bg-neutral-bold);
+    color: var(--qx-color-text-inverse);
+  }
+  
+  .qx-button[data-disabled]:not([data-loading]) {
+    background: var(--qx-color-bg-disabled);
+    color: var(--qx-color-text-disabled);
+    cursor: not-allowed;
+  }
+  
+  .qx-button[data-variant="ghost"][data-disabled]:not([data-loading]) {
+    background: none;
+  }
+  
+  .qx-button[data-loading] {
+    cursor: progress;
+  }
+  
+  .qx-button:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+    box-shadow: inset 0 0 0 calc(var(--qx-focus-ring-width) + var(--qx-border-width-default))
+        var(--qx-color-surface-default);
+  }
+  
+  .qx-button .qx-button-label {
+    text-overflow: ellipsis;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+  
+  .qx-button .qx-button-icon {
+    flex: none;
+  }
+  
+  .qx-button-zone {
+    flex: none;
+    align-self: stretch;
+    place-items: center;
+    padding-inline: 10px;
+    display: grid;
+    position: relative;
+  }
+  
+  .qx-button-zone:before {
+    content: "";
+    inline-size: var(--qx-border-width-default);
+    block-size: var(--qx-size-icon-sm);
+    opacity: .55;
+    background: currentColor;
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 0;
+    translate: 0 -50%;
+  }
+  
+  .qx-button[data-size="sm"] > .qx-button-zone {
+    padding-inline: 8px;
+  }
+  
+  .qx-button[data-size="sm"] > .qx-button-zone:before {
+    block-size: var(--qx-size-icon-xs);
+  }
+  
+  .qx-button[data-size="lg"] > .qx-button-zone {
+    padding-inline: 12px;
+  }
+  
+  .qx-button[data-size="lg"] > .qx-button-zone:before {
+    block-size: var(--qx-size-icon-md);
+  }
+  
+  .qx-icon-button {
+    inline-size: var(--qx-size-control-md);
+    justify-content: center;
+    padding-inline: 0;
+  }
+  
+  .qx-icon-button[data-size="sm"] {
+    inline-size: var(--qx-size-control-sm);
+    padding-inline: 0;
+  }
+  
+  .qx-icon-button[data-size="lg"] {
+    inline-size: var(--qx-size-control-lg);
+    padding-inline: 0;
+  }
+  
+  .qx-icon-button:not([data-icon]):not([data-loading]) {
+    padding-inline: 0;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-button {
+      border: var(--qx-border-width-default) solid ButtonText;
+    }
+  
+    .qx-button[data-disabled]:not([data-loading]) {
+      color: graytext;
+      border-color: graytext;
+    }
+  
+    .qx-button-zone:before {
+      opacity: 1;
+      background: buttontext;
+    }
+  
+    .qx-button[data-disabled]:not([data-loading]) .qx-button-zone:before {
+      background: graytext;
+    }
+  }
+}

package/dist/css/card.css

@@ -0,0 +1,75 @@
+@import "./base.css";
+@import "./heading.css";
+
+@layer qx.components {
+  .qx-card {
+    border: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    border-radius: var(--qx-radius-surface);
+    background: var(--qx-color-surface-raised);
+    min-inline-size: 0;
+    color: var(--qx-color-text-default);
+    flex-direction: column;
+    display: flex;
+    overflow: hidden;
+  }
+  
+  .qx-card-header {
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: var(--qx-space-gap-md);
+    padding: var(--qx-space-inset-lg);
+    border-block-end: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    display: flex;
+  }
+  
+  .qx-card-heading {
+    gap: var(--qx-space-gap-xs);
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-card-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-card-actions {
+    gap: var(--qx-space-gap-sm);
+    flex: none;
+    margin-block: -4px;
+    display: flex;
+  }
+  
+  .qx-card-body {
+    min-inline-size: 0;
+    padding: var(--qx-space-inset-lg);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    flex: 1;
+  }
+  
+  .qx-card-body > :is(.qx-table, .qx-scroll-area) {
+    inline-size: calc(100% + 2 * var(--qx-space-inset-lg));
+    margin-inline: calc(-1 * var(--qx-space-inset-lg));
+  }
+  
+  .qx-card-body > :is(.qx-table, .qx-scroll-area):first-child {
+    margin-block-start: calc(-1 * var(--qx-space-inset-lg));
+  }
+  
+  .qx-card-body > :is(.qx-table, .qx-scroll-area):last-child {
+    margin-block-end: calc(-1 * var(--qx-space-inset-lg));
+  }
+  
+  .qx-card-footer {
+    justify-content: flex-end;
+    gap: var(--qx-space-gap-sm);
+    padding: var(--qx-space-inset-md);
+    border-block-start: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    flex-wrap: wrap;
+    display: flex;
+  }
+}

package/dist/css/checkbox.css

@@ -0,0 +1,67 @@
+@import "./base.css";
+@import "./field.css";
+
+@layer qx.components {
+  .qx-checkbox {
+    border: var(--qx-border-width-default) solid var(--qx-color-border-strong);
+    border-radius: var(--qx-radius-sm);
+    background: var(--qx-color-bg-input);
+    block-size: 16px;
+    inline-size: 16px;
+    color: var(--qx-color-icon-on-brand);
+    cursor: pointer;
+    transition-property: background-color, border-color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+  }
+  
+  .qx-checkbox:hover:not([data-disabled], [data-readonly]) {
+    border-color: var(--qx-color-border-strong-hover);
+  }
+  
+  .qx-checkbox[data-invalid] {
+    border-color: var(--qx-color-border-danger);
+  }
+  
+  .qx-checkbox:is([data-checked], [data-indeterminate]) {
+    border-color: var(--qx-color-bg-brand-bold);
+    background: var(--qx-color-bg-brand-bold);
+  }
+  
+  .qx-checkbox:is([data-checked], [data-indeterminate]):hover:not([data-disabled], [data-readonly]) {
+    border-color: var(--qx-color-bg-brand-bold-hover);
+    background: var(--qx-color-bg-brand-bold-hover);
+  }
+  
+  .qx-checkbox[data-disabled] {
+    border-color: var(--qx-color-border-disabled);
+    background: var(--qx-color-bg-disabled);
+    color: var(--qx-color-icon-disabled);
+    cursor: not-allowed;
+  }
+  
+  .qx-checkbox[data-readonly] {
+    cursor: default;
+  }
+  
+  .qx-checkbox:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: var(--qx-focus-ring-offset);
+  }
+  
+  .qx-checkbox-mark {
+    display: flex;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-checkbox:is([data-checked], [data-indeterminate]):not([data-disabled]) {
+      forced-color-adjust: none;
+      color: highlighttext;
+      background: highlight;
+      border-color: highlight;
+    }
+  }
+}