@qeetrix/react 0.0.1 → 0.0.2

package/dist/css/table.css

@@ -0,0 +1,68 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-table {
+    border-collapse: collapse;
+    inline-size: 100%;
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+  }
+  
+  .qx-table-caption {
+    caption-side: top;
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+    text-align: start;
+    padding-block-end: var(--qx-space-gap-sm);
+  }
+  
+  .qx-table-head {
+    background: var(--qx-color-bg-neutral-subtle);
+    font: var(--qx-typography-label-sm);
+    font-weight: var(--qx-typography-title-sm-font-weight);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    white-space: nowrap;
+  }
+  
+  .qx-table-cell {
+    border-block-start: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+  }
+  
+  .qx-table-head, .qx-table-cell {
+    block-size: var(--qx-size-row);
+    padding-block: 0;
+    padding-inline: var(--qx-space-inset-sm);
+    text-align: start;
+    vertical-align: middle;
+  }
+  
+  :is(.qx-table-head, .qx-table-cell):first-child {
+    padding-inline-start: var(--qx-space-inset-md);
+  }
+  
+  :is(.qx-table-head, .qx-table-cell):last-child {
+    padding-inline-end: var(--qx-space-inset-md);
+  }
+  
+  :is(.qx-table-head, .qx-table-cell)[data-align="center"] {
+    text-align: center;
+  }
+  
+  :is(.qx-table-head, .qx-table-cell)[data-align="end"] {
+    text-align: end;
+  }
+  
+  :is(.qx-table-head, .qx-table-cell)[data-numeric] {
+    font-variant-numeric: tabular-nums;
+  }
+  
+  .qx-table-row[data-selected] > .qx-table-cell {
+    background: var(--qx-color-bg-selected);
+  }
+  
+  .qx-table-body > .qx-table-row:not([data-selected]):hover > .qx-table-cell {
+    background: var(--qx-color-bg-neutral-subtle);
+  }
+}

package/dist/css/tabs.css

@@ -0,0 +1,112 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-tabs {
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-tabs[data-orientation="vertical"] {
+    flex-direction: row;
+  }
+  
+  .qx-tabs-list {
+    min-inline-size: 0;
+    box-shadow: inset 0 calc(-1 * var(--qx-border-width-strong)) 0 var(--qx-color-border-subtle);
+    scrollbar-width: none;
+    display: flex;
+    position: relative;
+    overflow-x: auto;
+  }
+  
+  .qx-tabs-list[data-orientation="vertical"] {
+    box-shadow: none;
+    border-inline-start: var(--qx-border-width-strong) solid var(--qx-color-border-subtle);
+    flex-direction: column;
+    flex: none;
+    overflow-x: visible;
+  }
+  
+  .qx-tab {
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    block-size: var(--qx-size-control-lg);
+    padding-inline: clamp(12px, var(--qx-size-control-lg) - 20px, 16px);
+    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: color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    background: none;
+    border: 0;
+    flex: none;
+    display: inline-flex;
+    position: relative;
+  }
+  
+  .qx-tab:hover {
+    color: var(--qx-color-text-default);
+  }
+  
+  .qx-tab[data-active] {
+    color: var(--qx-color-text-default);
+    font-weight: var(--qx-typography-title-sm-font-weight);
+  }
+  
+  .qx-tab[data-disabled] {
+    color: var(--qx-color-text-disabled);
+    cursor: not-allowed;
+  }
+  
+  .qx-tab:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+  }
+  
+  .qx-tab-icon {
+    flex: none;
+  }
+  
+  .qx-tab-icon-filled, .qx-tab:has( > .qx-tab-icon-filled)[data-active] > .qx-tab-icon-outline {
+    display: none;
+  }
+  
+  .qx-tab[data-active] > .qx-tab-icon-filled {
+    display: block;
+  }
+  
+  .qx-tabs-indicator {
+    inline-size: var(--active-tab-width);
+    block-size: var(--qx-border-width-accent);
+    translate: var(--active-tab-left) 0;
+    background: var(--qx-color-border-brand);
+    transition-property: translate, inline-size, block-size;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+  }
+  
+  [data-orientation="vertical"] > .qx-tabs-indicator {
+    inline-size: var(--qx-border-width-accent);
+    block-size: var(--active-tab-height);
+    translate: 0 var(--active-tab-top);
+    inset-block-end: auto;
+    inset-inline-start: calc(-1 * var(--qx-border-width-strong));
+  }
+  
+  .qx-tabs-panel {
+    outline: 0;
+    min-inline-size: 0;
+  }
+  
+  .qx-tabs-panel:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: var(--qx-focus-ring-offset);
+  }
+}

package/dist/css/text-field.css

@@ -0,0 +1,4 @@
+@import "./base.css";
+@import "./field.css";
+@import "./input.css";
+

package/dist/css/text.css

@@ -0,0 +1,106 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-text {
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    margin: 0;
+  }
+  
+  .qx-text[data-size="sm"] {
+    font-size: var(--qx-typography-body-sm-font-size);
+    line-height: var(--qx-typography-body-sm-line-height);
+  }
+  
+  .qx-text[data-size="md"] {
+    font-size: var(--qx-typography-body-md-font-size);
+    line-height: var(--qx-typography-body-md-line-height);
+  }
+  
+  .qx-text[data-size="lg"] {
+    font-size: var(--qx-typography-body-lg-font-size);
+    line-height: var(--qx-typography-body-lg-line-height);
+  }
+  
+  .qx-text[data-weight="regular"] {
+    font-weight: var(--qx-typography-body-md-font-weight);
+  }
+  
+  .qx-text[data-weight="medium"] {
+    font-weight: var(--qx-typography-label-md-font-weight);
+  }
+  
+  .qx-text[data-weight="semibold"] {
+    font-weight: var(--qx-typography-title-md-font-weight);
+  }
+  
+  .qx-text[data-mono] {
+    font-family: var(--qx-font-family-mono);
+  }
+  
+  .qx-text[data-tone="default"] {
+    color: var(--qx-color-text-default);
+  }
+  
+  .qx-text[data-tone="subtle"] {
+    color: var(--qx-color-text-subtle);
+  }
+  
+  .qx-text[data-tone="subtlest"] {
+    color: var(--qx-color-text-subtlest);
+  }
+  
+  .qx-text[data-tone="disabled"] {
+    color: var(--qx-color-text-disabled);
+  }
+  
+  .qx-text[data-tone="inverse"] {
+    color: var(--qx-color-text-inverse);
+  }
+  
+  .qx-text[data-tone="brand"] {
+    color: var(--qx-color-text-brand);
+  }
+  
+  .qx-text[data-tone="danger"] {
+    color: var(--qx-color-text-danger);
+  }
+  
+  .qx-text[data-tone="success"] {
+    color: var(--qx-color-text-success);
+  }
+  
+  .qx-text[data-tone="warning"] {
+    color: var(--qx-color-text-warning);
+  }
+  
+  .qx-text[data-tone="info"] {
+    color: var(--qx-color-text-info);
+  }
+  
+  .qx-text[data-truncate="line"] {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  
+  .qx-text[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-text[data-align="start"] {
+    text-align: start;
+  }
+  
+  .qx-text[data-align="center"] {
+    text-align: center;
+  }
+  
+  .qx-text[data-align="end"] {
+    text-align: end;
+  }
+}

package/dist/css/toast.css

@@ -0,0 +1,108 @@
+@import "./base.css";
+@import "./button.css";
+
+@layer qx.components {
+  .qx-toast-viewport {
+    z-index: var(--qx-z-toast);
+    gap: var(--qx-space-gap-sm);
+    outline: 0;
+    flex-direction: column-reverse;
+    inline-size: min(360px, 100vw - 32px);
+    display: flex;
+    position: fixed;
+    inset-block-end: var(--qx-space-inset-lg);
+    inset-inline-end: var(--qx-space-inset-lg);
+  }
+  
+  .qx-toast {
+    align-items: flex-start;
+    gap: var(--qx-space-gap-md);
+    border-inline-start: var(--qx-border-width-accent) solid var(--qx-color-icon-info);
+    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: translate(var(--toast-swipe-movement-x, 0px), var(--toast-swipe-movement-y, 0px));
+    transition-property: opacity, translate, transform;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-enter);
+    padding: 12px 8px 12px 14px;
+    display: flex;
+  }
+  
+  .qx-toast[data-starting-style], .qx-toast[data-ending-style] {
+    opacity: 0;
+    translate: 0 4px;
+  }
+  
+  .qx-toast[data-ending-style] {
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-exit);
+  }
+  
+  .qx-toast[data-swiping] {
+    transition: none;
+  }
+  
+  .qx-toast[data-limited] {
+    display: none;
+  }
+  
+  .qx-toast[data-tone="success"] {
+    border-inline-start-color: var(--qx-color-icon-success);
+  }
+  
+  .qx-toast[data-tone="warning"] {
+    border-inline-start-color: var(--qx-color-icon-warning);
+  }
+  
+  .qx-toast[data-tone="danger"] {
+    border-inline-start-color: var(--qx-color-icon-danger);
+  }
+  
+  .qx-toast-icon {
+    color: var(--qx-color-icon-info);
+    flex: none;
+    margin-block-start: 1px;
+  }
+  
+  .qx-toast[data-tone="success"] .qx-toast-icon {
+    color: var(--qx-color-icon-success);
+  }
+  
+  .qx-toast[data-tone="warning"] .qx-toast-icon {
+    color: var(--qx-color-icon-warning);
+  }
+  
+  .qx-toast[data-tone="danger"] .qx-toast-icon {
+    color: var(--qx-color-icon-danger);
+  }
+  
+  .qx-toast-content {
+    flex-direction: column;
+    flex: 1;
+    gap: 2px;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-toast-title {
+    font: var(--qx-typography-title-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    margin: 0;
+  }
+  
+  .qx-toast-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-toast-action {
+    flex: none;
+    margin-block: -2px;
+  }
+}

package/dist/css/toggle.css

@@ -0,0 +1,112 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-toggle {
+    justify-content: center;
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    block-size: var(--qx-size-control-md);
+    border-radius: var(--qx-radius-control);
+    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;
+    -webkit-user-select: none;
+    user-select: none;
+    transition-property: background-color, color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    background: none;
+    border: 0;
+    padding-inline: 12px;
+    display: inline-flex;
+  }
+  
+  .qx-toggle:hover:not([data-disabled]):not([data-pressed]) {
+    background: var(--qx-color-bg-neutral-subtle);
+    color: var(--qx-color-text-default);
+  }
+  
+  .qx-toggle[data-pressed] {
+    background: var(--qx-color-bg-neutral-bold);
+    color: var(--qx-color-text-inverse);
+  }
+  
+  .qx-toggle[data-disabled] {
+    color: var(--qx-color-text-disabled);
+    cursor: not-allowed;
+  }
+  
+  .qx-toggle: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-toggle[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);
+    padding-inline: 8px;
+  }
+  
+  .qx-toggle[data-size="lg"] {
+    block-size: var(--qx-size-control-lg);
+    padding-inline: 16px;
+  }
+  
+  .qx-toggle[data-icon-only] {
+    aspect-ratio: 1;
+    padding-inline: 0;
+  }
+  
+  .qx-toggle .qx-toggle-icon-filled {
+    display: none;
+  }
+  
+  .qx-toggle[data-pressed] .qx-toggle-icon-filled {
+    display: block;
+  }
+  
+  .qx-toggle[data-pressed]:has(.qx-toggle-icon-filled) .qx-toggle-icon-outline {
+    display: none;
+  }
+  
+  .qx-toggle-group {
+    align-items: stretch;
+    display: inline-flex;
+  }
+  
+  .qx-toggle-group[data-orientation="vertical"] {
+    flex-direction: column;
+  }
+  
+  .qx-toggle-group[data-variant="separate"] {
+    gap: var(--qx-space-gap-xs);
+  }
+  
+  .qx-toggle-group[data-variant="segmented"] {
+    border: var(--qx-border-width-default) solid var(--qx-color-border-strong);
+    border-radius: var(--qx-radius-control);
+    overflow: hidden;
+  }
+  
+  .qx-toggle-group[data-variant="segmented"] > .qx-toggle {
+    block-size: calc(var(--qx-size-control-md) - 2 * var(--qx-border-width-default));
+    border-radius: 0;
+  }
+  
+  .qx-toggle-group[data-variant="segmented"] > .qx-toggle + .qx-toggle {
+    border-inline-start: var(--qx-border-width-default) solid var(--qx-color-border-strong);
+  }
+  
+  .qx-toggle-group[data-variant="segmented"][data-size="sm"] > .qx-toggle {
+    block-size: calc(var(--qx-size-control-sm) - 2 * var(--qx-border-width-default));
+  }
+  
+  .qx-toggle-group[data-variant="segmented"][data-size="lg"] > .qx-toggle {
+    block-size: calc(var(--qx-size-control-lg) - 2 * var(--qx-border-width-default));
+  }
+}

package/dist/css/tooltip.css

@@ -0,0 +1,41 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-tooltip-positioner {
+    z-index: var(--qx-z-tooltip);
+  }
+  
+  .qx-tooltip {
+    border-radius: var(--qx-radius-tooltip);
+    background: var(--qx-color-surface-inverse);
+    max-inline-size: 280px;
+    color: var(--qx-color-text-inverse);
+    font: var(--qx-typography-body-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    transition-property: opacity, translate;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-enter);
+    padding: 4px 8px;
+  }
+  
+  .qx-tooltip[data-starting-style], .qx-tooltip[data-ending-style] {
+    opacity: 0;
+  }
+  
+  .qx-tooltip[data-side="top"]:is([data-starting-style], [data-ending-style]) {
+    translate: 0 4px;
+  }
+  
+  .qx-tooltip[data-side="bottom"]:is([data-starting-style], [data-ending-style]) {
+    translate: 0 -4px;
+  }
+  
+  .qx-tooltip[data-ending-style] {
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-exit);
+  }
+  
+  .qx-tooltip[data-instant] {
+    transition: none;
+  }
+}

package/dist/css/visually-hidden.css

@@ -0,0 +1,15 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-visually-hidden {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+}

package/dist/dialog/dialog.d.ts

@@ -0,0 +1,51 @@
+import { CSSProperties, ComponentProps, ReactElement, ReactNode } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+/** The kind of decision: `standard`, or a `danger` / `warning` alert dialog. */
+export type DialogIntent = "standard" | "danger" | "warning";
+export type DialogSize = "sm" | "md" | "lg";
+export interface DialogProps extends Omit<Dialog.Root.Props, "disablePointerDismissal" | "handle"> {
+  /**
+   * `danger` and `warning` render an alert dialog (`role="alertdialog"`) and its intent line in red
+   * or amber. Default `standard` (Ember).
+   */
+  intent?: DialogIntent;
+  /**
+   * Whether Escape, an outside click and the close button can dismiss it. Default `true`, except
+   * for `danger`, which only its actions close. Alert dialogs never close on an outside click.
+   */
+  dismissible?: boolean;
+}
+export type DialogTriggerProps = Omit<Dialog.Trigger.Props, "handle" | "payload">;
+export type DialogCloseProps = Dialog.Close.Props;
+export interface DialogContentProps extends Omit<Dialog.Popup.Props, "className" | "style" | "title" | "children"> {
+  /** The title: the question or task ("Revoke this API key?"). It labels the dialog. */
+  title: ReactNode;
+  /** A line under the title; it describes the dialog. */
+  description?: ReactNode;
+  /** Width: `sm` 400, `md` 560 (default) or `lg` 800px. */
+  size?: DialogSize;
+  /** Placement only. */
+  className?: string;
+  style?: CSSProperties;
+  /** DialogBody and DialogFooter. */
+  children?: ReactNode;
+}
+export interface DialogBodyProps extends ComponentProps<"div"> {}
+export interface DialogFooterProps extends ComponentProps<"div"> {}
+/** Holds a dialog's open state: `open` / `defaultOpen` / `onOpenChange(open, details)`. */
+declare function Dialog$1({ intent, dismissible, modal, onOpenChange, children, ...props }: DialogProps): ReactElement;
+/** Opens the dialog. Render your own control: `render={<Button tone="danger">Revoke</Button>}`. */
+export declare function DialogTrigger(props: DialogTriggerProps): ReactElement;
+/** Closes the dialog, e.g. Cancel: `render={<Button variant="ghost">Cancel</Button>}`. */
+export declare function DialogClose(props: DialogCloseProps): ReactElement;
+/**
+ * The dialog (06-component-specs.md §6): over a scrim, with the intent line, the header, then your
+ * body and footer. The close button comes last in the DOM, so initial focus lands on the first field
+ * or else the footer's first (least destructive) action.
+ */
+export declare function DialogContent({ title, description, size, className, children, ...props }: DialogContentProps): ReactElement;
+/** The dialog's content; it scrolls when the dialog reaches its maximum height. */
+export declare function DialogBody({ className, ...props }: DialogBodyProps): ReactElement;
+/** The actions, end-aligned: tertiary first, then the primary or destructive action. */
+export declare function DialogFooter({ className, ...props }: DialogFooterProps): ReactElement;
+export { Dialog$1 as Dialog };