@qeetrix/react 0.0.1 → 0.0.2

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,63 @@
+@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);
+  }
+}

package/dist/css/select.css

@@ -0,0 +1,173 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-select-trigger {
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    inline-size: 100%;
+    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);
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    text-align: start;
+    cursor: pointer;
+    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-select-trigger:hover {
+    background: var(--qx-color-bg-neutral-subtle-hover);
+  }
+  
+  .qx-select-trigger[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-select-trigger:focus-visible, .qx-select-trigger[data-popup-open] {
+    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-select-trigger[data-readonly] {
+    box-shadow: inset 0 calc(-1 * var(--qx-border-width-default)) 0 var(--qx-color-border-subtle);
+    cursor: default;
+    background: none;
+  }
+  
+  .qx-select-trigger[data-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-select-value {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+  
+  .qx-select-value[data-placeholder] {
+    color: var(--qx-color-text-subtlest);
+  }
+  
+  .qx-select-icon {
+    color: var(--qx-color-icon-default);
+    flex: none;
+    display: flex;
+  }
+  
+  [data-disabled] > .qx-select-icon {
+    color: var(--qx-color-icon-disabled);
+  }
+  
+  .qx-select-positioner {
+    z-index: var(--qx-z-popover);
+  }
+  
+  .qx-select-popup {
+    min-inline-size: var(--anchor-width);
+    max-inline-size: var(--available-width);
+    max-block-size: min(320px, 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-select-popup[data-starting-style], .qx-select-popup[data-ending-style] {
+    opacity: 0;
+  }
+  
+  .qx-select-popup[data-side="bottom"]:is([data-starting-style], [data-ending-style]) {
+    translate: 0 -4px;
+  }
+  
+  .qx-select-popup[data-side="top"]:is([data-starting-style], [data-ending-style]) {
+    translate: 0 4px;
+  }
+  
+  .qx-select-popup[data-ending-style] {
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-exit);
+  }
+  
+  .qx-select-option {
+    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);
+    cursor: default;
+    -webkit-user-select: none;
+    user-select: none;
+    outline: 0;
+    display: flex;
+    position: relative;
+  }
+  
+  .qx-select-option[data-highlighted] {
+    background: var(--qx-color-bg-neutral-subtle-hover);
+  }
+  
+  .qx-select-option[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-select-option[data-selected] {
+    font-weight: var(--qx-typography-label-md-font-weight);
+  }
+  
+  .qx-select-option[data-disabled] {
+    color: var(--qx-color-text-disabled);
+  }
+  
+  .qx-select-option-text {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+  
+  .qx-select-option-check {
+    color: var(--qx-color-icon-brand);
+    flex: none;
+    display: flex;
+  }
+  
+  .qx-select-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);
+  }
+}

package/dist/css/separator.css

@@ -0,0 +1,28 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-separator {
+    background: var(--qx-color-border-subtle);
+    border: 0;
+    flex: none;
+    margin: 0;
+  }
+  
+  .qx-separator[data-orientation="horizontal"] {
+    inline-size: 100%;
+    block-size: var(--qx-border-width-default);
+  }
+  
+  .qx-separator[data-orientation="vertical"] {
+    inline-size: var(--qx-border-width-default);
+    align-self: stretch;
+  }
+  
+  .qx-separator[data-tone="default"] {
+    background: var(--qx-color-border-default);
+  }
+  
+  .qx-separator[data-tone="strong"] {
+    background: var(--qx-color-border-strong);
+  }
+}

package/dist/css/skeleton.css

@@ -0,0 +1,33 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-skeleton {
+    border-radius: var(--qx-radius-sm);
+    background: var(--qx-color-bg-neutral-subtle-pressed);
+    block-size: 1lh;
+    inline-size: 100%;
+    animation-name: qx-skeleton-pulse;
+    animation-duration: calc(4 * var(--qx-motion-duration-slower));
+    animation-timing-function: var(--qx-motion-easing-standard);
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    display: block;
+  }
+  
+  .qx-skeleton[data-variant="block"] {
+    border-radius: var(--qx-radius-surface);
+    block-size: 64px;
+  }
+  
+  .qx-skeleton[data-variant="circle"] {
+    border-radius: var(--qx-radius-full);
+    block-size: 32px;
+    inline-size: 32px;
+  }
+  
+  @keyframes qx-skeleton-pulse {
+    to {
+      opacity: .45;
+    }
+  }
+}

package/dist/css/skip-link.css

@@ -0,0 +1,33 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-skip-link {
+    z-index: var(--qx-z-skip-link);
+    padding: var(--qx-space-inset-sm) var(--qx-space-inset-md);
+    border-radius: var(--qx-radius-control);
+    background: var(--qx-color-surface-overlay);
+    box-shadow: var(--qx-shadow-overlay);
+    color: var(--qx-color-text-link);
+    font: var(--qx-typography-label-md);
+    text-underline-offset: 3px;
+    text-decoration: underline;
+    position: fixed;
+    inset-block-start: var(--qx-space-inset-sm);
+    inset-inline-start: var(--qx-space-inset-sm);
+  }
+  
+  .qx-skip-link:not(:focus) {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+  }
+  
+  .qx-skip-link:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: var(--qx-focus-ring-offset);
+  }
+}

package/dist/css/slider.css

@@ -0,0 +1,86 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-slider {
+    gap: var(--qx-space-gap-xs);
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-slider-header {
+    justify-content: space-between;
+    align-items: baseline;
+    gap: var(--qx-space-gap-md);
+    display: flex;
+  }
+  
+  .qx-slider-label {
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+  }
+  
+  .qx-slider-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-slider-control {
+    block-size: var(--qx-size-target-min);
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+    align-items: center;
+    padding-inline: 8px;
+    display: flex;
+  }
+  
+  .qx-slider-track {
+    background: var(--qx-color-border-default);
+    block-size: 4px;
+    inline-size: 100%;
+    position: relative;
+  }
+  
+  .qx-slider-indicator {
+    background: var(--qx-color-bg-brand-bold);
+    block-size: 100%;
+  }
+  
+  [data-disabled] .qx-slider-indicator {
+    background: var(--qx-color-bg-disabled);
+  }
+  
+  .qx-slider-thumb {
+    border-radius: var(--qx-radius-sm);
+    background: var(--qx-color-bg-brand-bold);
+    block-size: 16px;
+    inline-size: 16px;
+    box-shadow: 0 0 0 var(--qx-border-width-strong) var(--qx-color-surface-default);
+    cursor: grab;
+    transition-property: background-color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+  }
+  
+  .qx-slider-thumb:hover {
+    background: var(--qx-color-bg-brand-bold-hover);
+  }
+  
+  .qx-slider-thumb[data-dragging] {
+    cursor: grabbing;
+  }
+  
+  .qx-slider-thumb:has(:focus-visible) {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: var(--qx-focus-ring-offset);
+  }
+  
+  .qx-slider-thumb[data-disabled] {
+    background: var(--qx-color-icon-disabled);
+    cursor: not-allowed;
+  }
+}

package/dist/css/spinner.css

@@ -0,0 +1,55 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-spinner {
+    border: 2px solid;
+    border-radius: var(--qx-radius-full);
+    block-size: 16px;
+    inline-size: 16px;
+    animation-name: qx-spinner-turn;
+    animation-duration: calc(2 * var(--qx-motion-duration-slower));
+    animation-timing-function: var(--qx-motion-easing-linear);
+    border-inline-end-color: #0000;
+    flex: none;
+    animation-iteration-count: infinite;
+    display: inline-block;
+  }
+  
+  .qx-spinner[data-size="sm"] {
+    block-size: 14px;
+    inline-size: 14px;
+  }
+  
+  .qx-spinner[data-size="lg"] {
+    block-size: 20px;
+    inline-size: 20px;
+  }
+  
+  .qx-spinner[data-size="xl"] {
+    block-size: 24px;
+    inline-size: 24px;
+  }
+  
+  .qx-spinner[data-tone="brand"] {
+    color: var(--qx-color-icon-brand);
+  }
+  
+  @keyframes qx-spinner-turn {
+    to {
+      rotate: 1turn;
+    }
+  }
+  
+  @media (prefers-reduced-motion: reduce) {
+    .qx-spinner {
+      border-inline-end-color: currentColor;
+      animation: 1.6s ease-in-out infinite qx-spinner-fade;
+    }
+  }
+  
+  @keyframes qx-spinner-fade {
+    50% {
+      opacity: .35;
+    }
+  }
+}

package/dist/css/stack.css

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

package/dist/css/switch.css

@@ -0,0 +1,79 @@
+@import "./base.css";
+@import "./field.css";
+
+@layer qx.components {
+  .qx-switch {
+    border: var(--qx-border-width-default) solid var(--qx-color-border-strong);
+    border-radius: var(--qx-radius-sm);
+    background: var(--qx-color-bg-input);
+    cursor: pointer;
+    block-size: 18px;
+    inline-size: 32px;
+    transition-property: background-color, border-color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    flex: none;
+    display: inline-block;
+    position: relative;
+  }
+  
+  .qx-switch:hover:not([data-disabled], [data-readonly]) {
+    border-color: var(--qx-color-border-strong-hover);
+  }
+  
+  .qx-switch[data-invalid] {
+    border-color: var(--qx-color-border-danger);
+  }
+  
+  .qx-switch[data-checked] {
+    border-color: var(--qx-color-bg-brand-bold);
+    background: var(--qx-color-bg-brand-bold);
+  }
+  
+  .qx-switch[data-checked]:hover:not([data-disabled], [data-readonly]) {
+    border-color: var(--qx-color-bg-brand-bold-hover);
+    background: var(--qx-color-bg-brand-bold-hover);
+  }
+  
+  .qx-switch[data-disabled] {
+    border-color: var(--qx-color-border-disabled);
+    background: var(--qx-color-bg-disabled);
+    cursor: not-allowed;
+  }
+  
+  .qx-switch[data-readonly] {
+    cursor: default;
+  }
+  
+  .qx-switch:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: var(--qx-focus-ring-offset);
+  }
+  
+  .qx-switch-thumb {
+    border-radius: calc(var(--qx-radius-sm) / 2);
+    background: var(--qx-color-icon-subtle);
+    block-size: 12px;
+    inline-size: 12px;
+    transition-property: inset-inline-start, background-color;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 2px;
+    translate: 0 -50%;
+  }
+  
+  .qx-switch-thumb[data-checked] {
+    background: var(--qx-color-surface-default);
+    inset-inline-start: 16px;
+  }
+  
+  .qx-switch-thumb[data-disabled] {
+    background: var(--qx-color-icon-disabled);
+  }
+  
+  .qx-choice-label > .qx-switch {
+    margin-block: 1px;
+  }
+}