@qeetrix/react 0.0.0-stage → 0.0.2

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;
+  }
+}

package/dist/css/input.css

@@ -0,0 +1,98 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-input {
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    min-inline-size: 0;
+    block-size: var(--qx-size-control-lg);
+    padding-inline: var(--qx-space-inset-md);
+    background: var(--qx-color-bg-neutral-subtle);
+    box-shadow: inset 0 calc(-1 * var(--qx-border-width-default)) 0 var(--qx-color-border-strong);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-default);
+    cursor: text;
+    transition-property: background-color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    border: 0;
+    border-start-start-radius: var(--qx-radius-control);
+    border-start-end-radius: var(--qx-radius-control);
+    display: flex;
+  }
+  
+  .qx-input:hover {
+    background: var(--qx-color-bg-neutral-subtle-hover);
+  }
+  
+  .qx-input:has( > .qx-input-control[data-invalid]), .qx-input.qx-textarea[data-invalid] {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-danger);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+    box-shadow: none;
+  }
+  
+  .qx-input:has( > .qx-input-control:focus), .qx-input.qx-textarea:focus {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+    box-shadow: none;
+    background: var(--qx-color-bg-neutral-subtle);
+  }
+  
+  .qx-input:has( > .qx-input-control[readonly]), .qx-input.qx-textarea[readonly] {
+    box-shadow: inset 0 calc(-1 * var(--qx-border-width-default)) 0 var(--qx-color-border-subtle);
+    background: none;
+  }
+  
+  .qx-input:has( > .qx-input-control:disabled), .qx-input.qx-textarea:disabled {
+    background: var(--qx-color-bg-disabled);
+    box-shadow: inset 0 calc(-1 * var(--qx-border-width-default)) 0 var(--qx-color-border-disabled);
+    color: var(--qx-color-text-disabled);
+    cursor: not-allowed;
+  }
+  
+  .qx-input-control {
+    block-size: 100%;
+    min-inline-size: 0;
+    font: inherit;
+    color: inherit;
+    cursor: inherit;
+    background: none;
+    border: 0;
+    outline: 0;
+    flex: 1;
+    margin: 0;
+    padding: 0;
+  }
+  
+  .qx-input-control::placeholder, .qx-textarea::placeholder {
+    color: var(--qx-color-text-subtlest);
+    opacity: 1;
+  }
+  
+  .qx-input-icon {
+    color: var(--qx-color-icon-subtle);
+    flex: none;
+  }
+  
+  .qx-input-adornment {
+    color: var(--qx-color-text-subtle);
+    flex: none;
+    align-items: center;
+    display: inline-flex;
+  }
+  
+  .qx-textarea {
+    block-size: auto;
+    inline-size: 100%;
+    min-block-size: calc(var(--qx-textarea-rows) * 1lh + var(--qx-size-control-lg) - 1lh);
+    padding-block: calc((var(--qx-size-control-lg) - 1lh) / 2);
+    field-sizing: content;
+    resize: vertical;
+    display: block;
+  }
+  
+  .qx-textarea[data-max-rows] {
+    max-block-size: calc(var(--qx-textarea-max-rows) * 1lh + var(--qx-size-control-lg) - 1lh);
+  }
+}

package/dist/css/link.css

@@ -0,0 +1,45 @@
+@import "./base.css";
+@import "./visually-hidden.css";
+
+@layer qx.components {
+  .qx-link {
+    border-radius: var(--qx-radius-sm);
+    color: var(--qx-color-text-link);
+    text-decoration-line: underline;
+    text-decoration-thickness: var(--qx-border-width-default);
+    text-underline-offset: 3px;
+    transition-property: color, text-decoration-thickness;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    align-items: baseline;
+    gap: 2px;
+    display: inline-flex;
+  }
+  
+  .qx-link:hover {
+    color: var(--qx-color-text-link-hover);
+    text-decoration-thickness: var(--qx-border-width-strong);
+  }
+  
+  .qx-link:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: var(--qx-focus-ring-offset);
+  }
+  
+  .qx-link[data-tone="subtle"] {
+    color: var(--qx-color-text-subtle);
+  }
+  
+  .qx-link[data-tone="subtle"]:hover {
+    color: var(--qx-color-text-default);
+  }
+  
+  .qx-link[data-tone="inherit"] {
+    color: inherit;
+  }
+  
+  .qx-link .qx-link-icon {
+    flex: none;
+    align-self: center;
+  }
+}

package/dist/css/menu.css

@@ -0,0 +1,149 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-menu-positioner {
+    z-index: var(--qx-z-popover);
+  }
+  
+  .qx-menu {
+    min-inline-size: 200px;
+    max-inline-size: min(320px, var(--available-width));
+    max-block-size: var(--available-height);
+    border: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+    border-radius: var(--qx-radius-overlay);
+    background: var(--qx-color-surface-overlay);
+    box-shadow: var(--qx-shadow-overlay);
+    color: var(--qx-color-text-default);
+    transition-property: opacity, translate;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-enter);
+    outline: 0;
+    padding-block: 4px;
+    overflow-y: auto;
+  }
+  
+  .qx-menu[data-starting-style], .qx-menu[data-ending-style] {
+    opacity: 0;
+  }
+  
+  .qx-menu[data-side="bottom"]:is([data-starting-style], [data-ending-style]) {
+    translate: 0 -4px;
+  }
+  
+  .qx-menu[data-side="top"]:is([data-starting-style], [data-ending-style]) {
+    translate: 0 4px;
+  }
+  
+  .qx-menu[data-ending-style] {
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-exit);
+  }
+  
+  .qx-menu-item-icon {
+    color: var(--qx-color-icon-subtle);
+    flex: none;
+  }
+  
+  .qx-menu-item {
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    block-size: var(--qx-size-control-md);
+    padding-inline: var(--qx-space-inset-md);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    white-space: nowrap;
+    cursor: default;
+    -webkit-user-select: none;
+    user-select: none;
+    outline: 0;
+    display: flex;
+    position: relative;
+  }
+  
+  .qx-menu-item[data-highlighted] {
+    background: var(--qx-color-bg-neutral-subtle-hover);
+  }
+  
+  .qx-menu-item[data-highlighted]:before {
+    content: "";
+    inline-size: var(--qx-border-width-strong);
+    background: var(--qx-color-border-brand);
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+  }
+  
+  .qx-menu-item[data-popup-open] {
+    background: var(--qx-color-bg-neutral-subtle-hover);
+  }
+  
+  .qx-menu-item[data-tone="danger"] {
+    color: var(--qx-color-text-danger);
+  }
+  
+  .qx-menu-item[data-tone="danger"] .qx-menu-item-icon {
+    color: var(--qx-color-icon-danger);
+  }
+  
+  .qx-menu-item[data-disabled] {
+    color: var(--qx-color-text-disabled);
+  }
+  
+  .qx-menu-item[data-disabled] .qx-menu-item-icon {
+    color: var(--qx-color-icon-disabled);
+  }
+  
+  .qx-menu-item-label {
+    text-overflow: ellipsis;
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+  
+  .qx-menu-shortcut {
+    font: var(--qx-typography-code-sm);
+    color: var(--qx-color-text-subtlest);
+    margin-inline-start: var(--qx-space-gap-lg);
+  }
+  
+  .qx-menu-submenu-icon {
+    color: var(--qx-color-icon-subtle);
+    flex: none;
+  }
+  
+  [dir="rtl"] .qx-menu-submenu-icon {
+    scale: -1 1;
+  }
+  
+  .qx-menu-mark {
+    flex: none;
+    place-items: center;
+    block-size: 16px;
+    inline-size: 16px;
+    display: inline-grid;
+  }
+  
+  .qx-menu-mark-indicator {
+    display: flex;
+  }
+  
+  .qx-menu-dot {
+    border-radius: var(--qx-radius-full);
+    background: currentColor;
+    block-size: 6px;
+    inline-size: 6px;
+  }
+  
+  .qx-menu-group-label {
+    padding: 8px var(--qx-space-inset-md) 4px;
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+  }
+  
+  .qx-menu-separator {
+    block-size: var(--qx-border-width-default);
+    background: var(--qx-color-border-subtle);
+    margin-block: 4px;
+  }
+}

package/dist/css/popover.css

@@ -0,0 +1,72 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-popover-positioner {
+    z-index: var(--qx-z-popover);
+  }
+  
+  .qx-popover {
+    gap: var(--qx-space-gap-md);
+    min-inline-size: 0;
+    max-inline-size: min(360px, var(--available-width));
+    max-block-size: var(--available-height);
+    padding: var(--qx-space-inset-lg);
+    border: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+    border-radius: var(--qx-radius-overlay);
+    background: var(--qx-color-surface-overlay);
+    box-shadow: var(--qx-shadow-overlay);
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    transform-origin: var(--transform-origin);
+    transition-property: opacity, translate;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-enter);
+    outline: 0;
+    flex-direction: column;
+    display: flex;
+    overflow: auto;
+  }
+  
+  .qx-popover[data-starting-style], .qx-popover[data-ending-style] {
+    opacity: 0;
+  }
+  
+  .qx-popover[data-side="bottom"]:is([data-starting-style], [data-ending-style]) {
+    translate: 0 -4px;
+  }
+  
+  .qx-popover[data-side="top"]:is([data-starting-style], [data-ending-style]) {
+    translate: 0 4px;
+  }
+  
+  .qx-popover[data-side="left"]:is([data-starting-style], [data-ending-style]) {
+    translate: 4px;
+  }
+  
+  .qx-popover[data-side="right"]:is([data-starting-style], [data-ending-style]) {
+    translate: -4px;
+  }
+  
+  .qx-popover[data-ending-style] {
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-exit);
+  }
+  
+  .qx-popover-header {
+    gap: var(--qx-space-gap-xs);
+    flex-direction: column;
+    display: flex;
+  }
+  
+  .qx-popover-title {
+    font: var(--qx-typography-title-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    margin: 0;
+  }
+  
+  .qx-popover-description {
+    color: var(--qx-color-text-subtle);
+    margin: 0;
+  }
+}

package/dist/css/progress.css

@@ -0,0 +1,88 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-progress {
+    gap: var(--qx-space-gap-xs);
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-progress-header {
+    justify-content: space-between;
+    align-items: baseline;
+    gap: var(--qx-space-gap-md);
+    display: flex;
+  }
+  
+  .qx-progress-label {
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+  }
+  
+  .qx-progress-value {
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    font-variant-numeric: tabular-nums;
+    color: var(--qx-color-text-default);
+  }
+  
+  .qx-progress-track {
+    background: var(--qx-color-border-default);
+    block-size: 4px;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .qx-progress-indicator {
+    background: var(--qx-color-bg-brand-bold);
+    block-size: 100%;
+    transition-property: inline-size;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-standard);
+  }
+  
+  [data-tone="success"] .qx-progress-indicator {
+    background: var(--qx-color-bg-success-bold);
+  }
+  
+  [data-tone="warning"] .qx-progress-indicator {
+    background: var(--qx-color-bg-warning-bold);
+  }
+  
+  [data-tone="danger"] .qx-progress-indicator {
+    background: var(--qx-color-bg-danger-bold);
+  }
+  
+  .qx-progress-indicator[data-indeterminate] {
+    inline-size: 30%;
+    animation-name: qx-progress-slide;
+    animation-duration: calc(4 * var(--qx-motion-duration-slower));
+    animation-timing-function: var(--qx-motion-easing-standard);
+    animation-iteration-count: infinite;
+  }
+  
+  @keyframes qx-progress-slide {
+    from {
+      translate: -100%;
+    }
+  
+    to {
+      translate: 334%;
+    }
+  }
+  
+  @media (prefers-reduced-motion: reduce) {
+    .qx-progress-indicator[data-indeterminate] {
+      inline-size: 100%;
+      animation: 1.6s ease-in-out infinite qx-progress-fade;
+    }
+  }
+  
+  @keyframes qx-progress-fade {
+    50% {
+      opacity: .35;
+    }
+  }
+}