@qeetrix/react 0.0.1 → 0.0.4

package/dist/css/dialog.css

@@ -0,0 +1,128 @@
+@import "./base.css";
+@import "./button.css";
+
+@layer qx.components {
+  .qx-dialog-backdrop {
+    z-index: var(--qx-z-overlay);
+    background: var(--qx-color-overlay-scrim);
+    transition-property: opacity;
+    transition-duration: var(--qx-motion-duration-slow);
+    transition-timing-function: var(--qx-motion-easing-enter);
+    position: fixed;
+    inset: 0;
+  }
+  
+  .qx-dialog-backdrop[data-starting-style], .qx-dialog-backdrop[data-ending-style] {
+    opacity: 0;
+  }
+  
+  .qx-dialog-backdrop[data-ending-style] {
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-exit);
+  }
+  
+  .qx-dialog-viewport {
+    z-index: var(--qx-z-modal);
+    padding: var(--qx-space-inset-xl);
+    place-items: center;
+    display: grid;
+    position: fixed;
+    inset: 0;
+  }
+  
+  .qx-dialog {
+    border-block-start: var(--qx-border-width-accent) solid var(--qx-color-border-brand);
+    border-radius: var(--qx-radius-modal);
+    background: var(--qx-color-surface-overlay);
+    max-block-size: 85vh;
+    inline-size: min(100%, 560px);
+    box-shadow: var(--qx-shadow-modal);
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    transition-property: opacity, translate;
+    transition-duration: var(--qx-motion-duration-slow);
+    transition-timing-function: var(--qx-motion-easing-enter);
+    outline: 0;
+    flex-direction: column;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .qx-dialog[data-size="sm"] {
+    inline-size: min(100%, 400px);
+  }
+  
+  .qx-dialog[data-size="lg"] {
+    inline-size: min(100%, 800px);
+  }
+  
+  .qx-dialog[data-intent="danger"] {
+    border-block-start-color: var(--qx-color-border-danger);
+  }
+  
+  .qx-dialog[data-intent="warning"] {
+    border-block-start-color: var(--qx-color-icon-warning);
+  }
+  
+  .qx-dialog[data-starting-style], .qx-dialog[data-ending-style] {
+    opacity: 0;
+    translate: 0 8px;
+  }
+  
+  .qx-dialog[data-ending-style] {
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-exit);
+  }
+  
+  .qx-dialog-header {
+    gap: var(--qx-space-gap-xs);
+    padding: var(--qx-space-inset-xl);
+    flex-direction: column;
+    display: flex;
+  }
+  
+  .qx-dialog[data-dismissible] .qx-dialog-header {
+    padding-inline-end: 56px;
+  }
+  
+  .qx-dialog-title {
+    font: var(--qx-typography-title-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    margin: 0;
+  }
+  
+  .qx-dialog-description {
+    color: var(--qx-color-text-subtle);
+    margin: 0;
+  }
+  
+  .qx-dialog-body {
+    min-block-size: 0;
+    padding: 0 var(--qx-space-inset-xl) var(--qx-space-inset-xl);
+    flex: 1;
+    overflow-y: auto;
+  }
+  
+  .qx-dialog-footer {
+    justify-content: flex-end;
+    gap: var(--qx-space-gap-sm);
+    padding: 0 var(--qx-space-inset-xl) var(--qx-space-inset-xl);
+    flex-wrap: wrap;
+    display: flex;
+  }
+  
+  .qx-dialog-close {
+    position: absolute;
+    inset-block-start: 12px;
+    inset-inline-end: 12px;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-dialog {
+      border: var(--qx-border-width-default) solid CanvasText;
+      border-block-start-width: var(--qx-border-width-accent);
+    }
+  }
+}

package/dist/css/drawer.css

@@ -0,0 +1,129 @@
+@import "./base.css";
+@import "./button.css";
+
+@layer qx.components {
+  .qx-drawer-backdrop {
+    z-index: var(--qx-z-overlay);
+    background: var(--qx-color-overlay-scrim);
+    transition-property: opacity;
+    transition-duration: var(--qx-motion-duration-slow);
+    transition-timing-function: var(--qx-motion-easing-enter);
+    position: fixed;
+    inset: 0;
+  }
+  
+  .qx-drawer-backdrop[data-starting-style], .qx-drawer-backdrop[data-ending-style] {
+    opacity: 0;
+  }
+  
+  .qx-drawer-backdrop[data-ending-style] {
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-exit);
+  }
+  
+  .qx-drawer-viewport {
+    z-index: var(--qx-z-modal);
+    justify-content: flex-end;
+    display: flex;
+    position: fixed;
+    inset: 0;
+  }
+  
+  .qx-drawer-viewport[data-side="start"] {
+    justify-content: flex-start;
+  }
+  
+  .qx-drawer {
+    background: var(--qx-color-surface-overlay);
+    block-size: 100%;
+    inline-size: min(560px, 100vw - 48px);
+    box-shadow: var(--qx-shadow-modal);
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    transform: translateX(var(--drawer-swipe-movement-x, 0px));
+    transition-property: transform;
+    transition-duration: var(--qx-motion-duration-slow);
+    transition-timing-function: var(--qx-motion-easing-enter);
+    outline: 0;
+    flex-direction: column;
+    display: flex;
+    position: relative;
+  }
+  
+  .qx-drawer[data-size="sm"] {
+    inline-size: min(400px, 100vw - 48px);
+  }
+  
+  .qx-drawer[data-size="lg"] {
+    inline-size: min(800px, 100vw - 48px);
+  }
+  
+  .qx-drawer[data-swipe-direction="right"]:is([data-starting-style], [data-ending-style]) {
+    transform: translateX(100%);
+  }
+  
+  .qx-drawer[data-swipe-direction="left"]:is([data-starting-style], [data-ending-style]) {
+    transform: translateX(-100%);
+  }
+  
+  .qx-drawer[data-swiping] {
+    transition: none;
+  }
+  
+  .qx-drawer[data-ending-style] {
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-exit);
+  }
+  
+  .qx-drawer-header {
+    gap: var(--qx-space-gap-xs);
+    padding: var(--qx-space-inset-xl);
+    border-block-end: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+    flex-direction: column;
+    flex: none;
+    padding-inline-end: 56px;
+    display: flex;
+  }
+  
+  .qx-drawer-title {
+    font: var(--qx-typography-title-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    margin: 0;
+  }
+  
+  .qx-drawer-description {
+    color: var(--qx-color-text-subtle);
+    margin: 0;
+  }
+  
+  .qx-drawer-body {
+    overscroll-behavior: contain;
+    min-block-size: 0;
+    padding: var(--qx-space-inset-xl);
+    flex: 1;
+    overflow-y: auto;
+  }
+  
+  .qx-drawer-footer {
+    justify-content: flex-end;
+    gap: var(--qx-space-gap-sm);
+    padding: var(--qx-space-inset-lg) var(--qx-space-inset-xl);
+    border-block-start: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+    flex-wrap: wrap;
+    flex: none;
+    display: flex;
+  }
+  
+  .qx-drawer-close {
+    position: absolute;
+    inset-block-start: 20px;
+    inset-inline-end: 16px;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-drawer {
+      border-inline: var(--qx-border-width-default) solid CanvasText;
+    }
+  }
+}

package/dist/css/experimental/alert.css

@@ -0,0 +1,89 @@
+@import "../base.css";
+@import "../button.css";
+@import "../visually-hidden.css";
+
+@layer qx.components {
+  .qx-alert {
+    align-items: flex-start;
+    gap: var(--qx-space-gap-md);
+    padding: var(--qx-space-inset-md) var(--qx-space-inset-sm) var(--qx-space-inset-md)
+      var(--qx-space-inset-md);
+    border-inline-start: var(--qx-border-width-accent) solid var(--qx-color-icon-info);
+    background: var(--qx-color-bg-info-subtle);
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    display: flex;
+  }
+  
+  .qx-alert[data-tone="success"] {
+    border-inline-start-color: var(--qx-color-icon-success);
+    background: var(--qx-color-bg-success-subtle);
+  }
+  
+  .qx-alert[data-tone="warning"] {
+    border-inline-start-color: var(--qx-color-icon-warning);
+    background: var(--qx-color-bg-warning-subtle);
+  }
+  
+  .qx-alert[data-tone="danger"] {
+    border-inline-start-color: var(--qx-color-icon-danger);
+    background: var(--qx-color-bg-danger-subtle);
+  }
+  
+  .qx-alert-icon {
+    color: var(--qx-color-icon-info);
+    flex: none;
+    margin-block-start: 2px;
+  }
+  
+  [data-tone="success"] > .qx-alert-icon {
+    color: var(--qx-color-icon-success);
+  }
+  
+  [data-tone="warning"] > .qx-alert-icon {
+    color: var(--qx-color-icon-warning);
+  }
+  
+  [data-tone="danger"] > .qx-alert-icon {
+    color: var(--qx-color-icon-danger);
+  }
+  
+  .qx-alert-body {
+    min-inline-size: 0;
+    flex-direction: column;
+    flex: 1;
+    gap: 2px;
+    padding-inline-end: var(--qx-space-gap-xs);
+    display: flex;
+  }
+  
+  .qx-alert-title {
+    font: var(--qx-typography-label-md);
+    font-weight: var(--qx-typography-title-sm-font-weight);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+  }
+  
+  .qx-alert-description {
+    color: var(--qx-color-text-subtle);
+  }
+  
+  .qx-alert-actions {
+    gap: var(--qx-space-gap-sm);
+    flex-wrap: wrap;
+    margin-block-start: var(--qx-space-gap-sm);
+    display: flex;
+  }
+  
+  .qx-alert-dismiss {
+    flex: none;
+    margin-block: -2px;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-alert {
+      border: var(--qx-border-width-default) solid CanvasText;
+      border-inline-start: var(--qx-border-width-accent) solid CanvasText;
+    }
+  }
+}

package/dist/css/experimental/app-shell.css

@@ -0,0 +1,258 @@
+@import "../base.css";
+@import "../button.css";
+@import "../skip-link.css";
+@import "../tooltip.css";
+
+@layer qx.components {
+  .qx-app-shell {
+    --qx-app-shell-top: calc(var(--qx-size-control-lg) + 16px);
+    background: var(--qx-color-surface-default);
+    min-block-size: 100dvh;
+    color: var(--qx-color-text-default);
+    grid-template-rows: auto minmax(0, 1fr);
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    display: grid;
+  }
+  
+  .qx-app-shell-top {
+    z-index: var(--qx-z-sticky);
+    grid-column: 1 / -1;
+    position: sticky;
+    inset-block-start: 0;
+  }
+  
+  .qx-app-shell-nav {
+    z-index: calc(var(--qx-z-sticky) - 1);
+    block-size: calc(100dvh - var(--qx-app-shell-top));
+    inline-size: var(--qx-component-sidebar-width-expanded);
+    transition-property: inline-size;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    grid-area: 2 / 1;
+    position: sticky;
+    inset-block-start: var(--qx-app-shell-top);
+  }
+  
+  .qx-app-shell[data-collapsed] > .qx-app-shell-nav {
+    inline-size: var(--qx-component-sidebar-width-collapsed);
+  }
+  
+  .qx-app-shell-nav-panel {
+    border-inline-end: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    background: var(--qx-color-surface-canvas);
+    flex-direction: column;
+    block-size: 100%;
+    inline-size: 100%;
+    display: flex;
+    overflow: hidden;
+  }
+  
+  [data-peek] > .qx-app-shell-nav-panel {
+    inline-size: var(--qx-component-sidebar-width-expanded);
+    box-shadow: var(--qx-shadow-overlay);
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+  }
+  
+  .qx-app-shell-nav-body {
+    flex: 1;
+    min-block-size: 0;
+  }
+  
+  .qx-app-shell-nav-foot {
+    border-block-start: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    flex: none;
+  }
+  
+  .qx-app-shell-collapse {
+    inline-size: 100%;
+    block-size: var(--qx-size-control-lg);
+    padding-inline: var(--qx-space-inset-lg);
+    color: var(--qx-color-text-subtle);
+    font: var(--qx-typography-label-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    white-space: nowrap;
+    cursor: pointer;
+    transition-property: background-color, color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    background: none;
+    border: 0;
+    align-items: center;
+    gap: 10px;
+    display: flex;
+  }
+  
+  .qx-app-shell-collapse:hover {
+    background: var(--qx-color-overlay-hover);
+    color: var(--qx-color-text-default);
+  }
+  
+  .qx-app-shell-collapse:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+  }
+  
+  .qx-app-shell-collapse-icon {
+    color: var(--qx-color-icon-subtle);
+    flex: none;
+  }
+  
+  [dir="rtl"] .qx-app-shell-collapse-icon {
+    scale: -1 1;
+  }
+  
+  .qx-app-shell[data-collapsed] .qx-app-shell-nav:not([data-peek]) .qx-app-shell-collapse-label {
+    clip-path: inset(50%);
+    block-size: 1px;
+    inline-size: 1px;
+    position: absolute;
+    overflow: hidden;
+  }
+  
+  .qx-app-shell-main {
+    outline: 0;
+    grid-area: 2 / 2;
+    min-inline-size: 0;
+  }
+  
+  .qx-app-shell-notifications {
+    gap: var(--qx-space-gap-sm);
+    padding: var(--qx-space-inset-lg) var(--qx-space-layout-md) 0;
+    flex-direction: column;
+    display: flex;
+  }
+  
+  .qx-app-shell-panel {
+    z-index: calc(var(--qx-z-sticky) - 1);
+    inline-size: 320px;
+    block-size: calc(100dvh - var(--qx-app-shell-top));
+    border-inline-start: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    background: var(--qx-color-surface-default);
+    flex-direction: column;
+    grid-area: 2 / 3;
+    display: flex;
+    position: sticky;
+    inset-block-start: var(--qx-app-shell-top);
+  }
+  
+  .qx-app-shell-panel-header {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    block-size: calc(var(--qx-size-control-lg) + 8px);
+    padding-inline: var(--qx-space-inset-lg) var(--qx-space-inset-sm);
+    border-block-end: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    background: var(--qx-color-surface-canvas);
+    flex: none;
+    display: flex;
+  }
+  
+  .qx-app-shell-panel-title {
+    font: var(--qx-typography-label-md);
+    font-weight: var(--qx-typography-title-sm-font-weight);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    margin: 0;
+  }
+  
+  .qx-app-shell-panel-body {
+    min-block-size: 0;
+    padding: var(--qx-space-inset-lg);
+    flex: 1;
+    overflow-y: auto;
+  }
+  
+  @media (width < 1200px) {
+    .qx-app-shell-panel {
+      inset-block: var(--qx-app-shell-top) 0;
+      block-size: auto;
+      box-shadow: var(--qx-shadow-overlay);
+      position: fixed;
+      inset-inline-end: 0;
+    }
+  }
+  
+  @media (width < 840px) {
+    .qx-app-shell {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  
+    .qx-app-shell-nav {
+      display: none;
+    }
+  
+    .qx-app-shell-main {
+      grid-column: 1;
+    }
+  
+    .qx-app-shell-panel {
+      inline-size: min(320px, 100vw);
+    }
+  
+    .qx-app-shell-notifications {
+      padding-inline: var(--qx-space-inset-lg);
+    }
+  }
+  
+  .qx-app-shell-backdrop {
+    z-index: var(--qx-z-overlay);
+    background: var(--qx-color-overlay-scrim);
+    transition-property: opacity;
+    transition-duration: var(--qx-motion-duration-slow);
+    transition-timing-function: var(--qx-motion-easing-enter);
+    position: fixed;
+    inset: 0;
+  }
+  
+  .qx-app-shell-backdrop[data-starting-style], .qx-app-shell-backdrop[data-ending-style] {
+    opacity: 0;
+  }
+  
+  .qx-app-shell-viewport {
+    z-index: var(--qx-z-modal);
+    justify-content: flex-start;
+    display: flex;
+    position: fixed;
+    inset: 0;
+  }
+  
+  .qx-app-shell-drawer {
+    inline-size: min(var(--qx-component-sidebar-width-mobile), 100vw - 48px);
+    background: var(--qx-color-surface-canvas);
+    block-size: 100%;
+    box-shadow: var(--qx-shadow-modal);
+    transform: translateX(var(--drawer-swipe-movement-x, 0px));
+    transition-property: transform;
+    transition-duration: var(--qx-motion-duration-slow);
+    transition-timing-function: var(--qx-motion-easing-enter);
+    outline: 0;
+  }
+  
+  .qx-app-shell-drawer[data-swipe-direction="left"]:is([data-starting-style], [data-ending-style]) {
+    transform: translateX(-100%);
+  }
+  
+  .qx-app-shell-drawer[data-swipe-direction="right"]:is([data-starting-style], [data-ending-style]) {
+    transform: translateX(100%);
+  }
+  
+  .qx-app-shell-drawer[data-swiping] {
+    transition: none;
+  }
+  
+  .qx-app-shell-drawer[data-ending-style] {
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-exit);
+  }
+  
+  @media (forced-colors: active) {
+    .qx-app-shell-nav-panel, .qx-app-shell-nav-foot, .qx-app-shell-panel, .qx-app-shell-panel-header {
+      border-color: canvastext;
+    }
+  
+    .qx-app-shell-drawer {
+      border-inline-end: var(--qx-border-width-default) solid CanvasText;
+    }
+  }
+}

package/dist/css/experimental/breadcrumb.css

@@ -0,0 +1,67 @@
+@import "../base.css";
+
+@layer qx.components {
+  .qx-breadcrumb {
+    min-inline-size: 0;
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+  }
+  
+  .qx-breadcrumb-list {
+    align-items: center;
+    gap: var(--qx-space-gap-xs);
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+  
+  .qx-breadcrumb-separator {
+    color: var(--qx-color-icon-subtle);
+    flex: none;
+  }
+  
+  [dir="rtl"] .qx-breadcrumb-separator {
+    scale: -1 1;
+  }
+  
+  .qx-breadcrumb-item {
+    align-items: center;
+    gap: var(--qx-space-gap-xs);
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-breadcrumb-item:first-child > .qx-breadcrumb-separator {
+    display: none;
+  }
+  
+  .qx-breadcrumb-link, .qx-breadcrumb-current {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-inline-size: 240px;
+    overflow: hidden;
+  }
+  
+  .qx-breadcrumb-link {
+    color: var(--qx-color-text-subtle);
+    text-decoration: none;
+  }
+  
+  .qx-breadcrumb-link:hover {
+    color: var(--qx-color-text-default);
+    text-underline-offset: 3px;
+    text-decoration: underline;
+  }
+  
+  .qx-breadcrumb-link:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: var(--qx-focus-ring-offset);
+  }
+  
+  .qx-breadcrumb-current {
+    color: var(--qx-color-text-default);
+    font-weight: var(--qx-typography-label-md-font-weight);
+  }
+}

package/dist/css/experimental/copy-button.css

@@ -0,0 +1,13 @@
+@import "../base.css";
+@import "../button.css";
+@import "../visually-hidden.css";
+
+@layer qx.components {
+  .qx-copy-button[data-variant="ghost"][data-state="copied"] .qx-button-icon {
+    color: var(--qx-color-icon-success);
+  }
+  
+  .qx-copy-button[data-variant="ghost"][data-state="failed"] .qx-button-icon {
+    color: var(--qx-color-icon-danger);
+  }
+}