@qeetrix/react 0.0.1 → 0.0.4

package/dist/css/input.css

@@ -0,0 +1,108 @@
+@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);
+  }
+  
+  @media (forced-colors: active) {
+    .qx-input {
+      border: var(--qx-border-width-default) solid FieldText;
+    }
+  
+    .qx-input:has( > .qx-input-control:disabled), .qx-textarea:disabled {
+      border-color: graytext;
+    }
+  }
+}

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,166 @@
+@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;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-menu-item[data-highlighted] {
+      forced-color-adjust: none;
+      color: highlighttext;
+      background: highlight;
+    }
+  
+    .qx-menu-item[data-highlighted] .qx-menu-item-icon, .qx-menu-item[data-highlighted] .qx-menu-submenu-icon {
+      color: highlighttext;
+    }
+  
+    .qx-menu-separator {
+      forced-color-adjust: none;
+      background: canvastext;
+    }
+  }
+}

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,102 @@
+@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;
+    }
+  }
+  
+  @media (forced-colors: active) {
+    .qx-progress-track, .qx-progress-indicator {
+      forced-color-adjust: none;
+    }
+  
+    .qx-progress-track {
+      background: graytext;
+    }
+  
+    .qx-progress-indicator {
+      background: highlight;
+    }
+  }
+}

package/dist/css/radio.css

@@ -0,0 +1,54 @@
+@import "./base.css";
+@import "./field.css";
+
+@layer qx.components {
+  .qx-radio {
+    border: var(--qx-border-width-default) solid var(--qx-color-border-strong);
+    border-radius: var(--qx-radius-full);
+    background: var(--qx-color-bg-input);
+    cursor: pointer;
+    block-size: 16px;
+    inline-size: 16px;
+    transition-property: border-color, border-width;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    flex: none;
+    display: inline-block;
+  }
+  
+  .qx-radio:hover:not([data-disabled], [data-readonly]) {
+    border-color: var(--qx-color-border-strong-hover);
+  }
+  
+  .qx-radio[data-invalid] {
+    border-color: var(--qx-color-border-danger);
+  }
+  
+  .qx-radio[data-checked] {
+    border-width: 5px;
+    border-color: var(--qx-color-bg-brand-bold);
+  }
+  
+  .qx-radio[data-checked]:hover:not([data-disabled], [data-readonly]) {
+    border-color: var(--qx-color-bg-brand-bold-hover);
+  }
+  
+  .qx-radio[data-disabled] {
+    border-color: var(--qx-color-border-disabled);
+    background: var(--qx-color-bg-disabled);
+    cursor: not-allowed;
+  }
+  
+  .qx-radio[data-disabled][data-checked] {
+    border-color: var(--qx-color-icon-disabled);
+  }
+  
+  .qx-radio[data-readonly] {
+    cursor: default;
+  }
+  
+  .qx-radio:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: var(--qx-focus-ring-offset);
+  }
+}

package/dist/css/scroll-area.css

@@ -0,0 +1,70 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-scroll-area {
+    min-block-size: 0;
+    min-inline-size: 0;
+    display: flex;
+    position: relative;
+  }
+  
+  .qx-scroll-area-viewport {
+    overscroll-behavior: contain;
+    outline: 0;
+    flex: 1;
+    min-inline-size: 0;
+  }
+  
+  .qx-scroll-area-viewport:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+  }
+  
+  .qx-scroll-area-scrollbar {
+    opacity: 0;
+    transition-property: opacity;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    padding: 2px;
+    display: flex;
+  }
+  
+  .qx-scroll-area-scrollbar[data-orientation="vertical"] {
+    inline-size: 8px;
+  }
+  
+  .qx-scroll-area-scrollbar[data-orientation="horizontal"] {
+    block-size: 8px;
+  }
+  
+  .qx-scroll-area-scrollbar:is([data-hovering], [data-scrolling]), .qx-scroll-area:has( > .qx-scroll-area-viewport:focus-visible) > .qx-scroll-area-scrollbar {
+    opacity: 1;
+  }
+  
+  .qx-scroll-area-thumb {
+    border-radius: var(--qx-radius-sm);
+    background: var(--qx-color-border-strong);
+    flex: 1;
+  }
+  
+  [data-orientation="vertical"] > .qx-scroll-area-thumb {
+    inline-size: 100%;
+    block-size: var(--scroll-area-thumb-height);
+  }
+  
+  [data-orientation="horizontal"] > .qx-scroll-area-thumb {
+    inline-size: var(--scroll-area-thumb-width);
+    block-size: 100%;
+  }
+  
+  .qx-scroll-area-thumb:hover, .qx-scroll-area-thumb:active {
+    background: var(--qx-color-icon-subtle);
+  }
+  
+  @media (forced-colors: active) {
+    .qx-scroll-area-thumb {
+      forced-color-adjust: none;
+      background: canvastext;
+    }
+  }
+}