@qeetrix/react 0.0.0-stage → 0.0.2

package/dist/button/button.d.ts

@@ -0,0 +1,46 @@
+import { ControlSize, QeetrixIcon } from "../internal/control.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+import { Button } from "@base-ui/react/button";
+export type ButtonVariant = "solid" | "soft" | "ghost";
+export type ButtonTone = "brand" | "danger";
+interface ButtonBaseProps extends Omit<ComponentProps<"button">, "children"> {
+  /** Emphasis: `solid` (primary, Ember), `soft` (secondary, graphite), `ghost` (tertiary). */
+  variant?: ButtonVariant;
+  /** `danger` for the confirming action of a destructive flow. */
+  tone?: ButtonTone;
+  /** Height from the density tokens. Default `md`. */
+  size?: ControlSize;
+  /** Busy: a spinner replaces the icon, clicks are ignored and `aria-busy` is set. */
+  loading?: boolean;
+  /** Render a different element through Base UI, e.g. a router link. */
+  render?: Button.Props["render"];
+}
+export interface ButtonProps extends ButtonBaseProps {
+  /** The label. Write it as a verb: "Create invoice". */
+  children?: ReactNode;
+  /** A trailing icon from `@qeetrix/icons`; rendered in the sharp shape. */
+  icon?: QeetrixIcon;
+  /** Fill the width of the container (forms, mobile). */
+  fullWidth?: boolean;
+}
+export interface IconButtonProps extends ButtonBaseProps {
+  /** The icon, from `@qeetrix/icons`; rendered in the sharp shape. */
+  icon: QeetrixIcon;
+  /** Required: an icon-only button has no visible label. */
+  "aria-label": string;
+  /**
+   * The tooltip, which shows the `aria-label` by default (06-component-specs.md §1). Pass other text
+   * to show that instead, or `false` where the label is visible nearby.
+   */
+  tooltip?: ReactNode | false;
+}
+/**
+ * An action. One `solid` and one `soft` per region, everything else `ghost` (design rules §7).
+ * Disabled buttons stay focusable, so the reason they're disabled can be read.
+ */
+declare function Button$1({ variant, tone, size, icon, loading, fullWidth, disabled, className, children, type, ...props }: ButtonProps): ReactElement;
+/**
+ * A square, icon-only button. Its `aria-label` is required by its type, and it shows as a tooltip.
+ */
+export declare function IconButton({ variant, tone, size, icon, loading, tooltip, disabled, className, type, ...props }: IconButtonProps): ReactElement;
+export { Button$1 as Button };

package/dist/button/button.js

@@ -0,0 +1,74 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { iconSize } from "../internal/control.js";
+import { Spinner } from "../spinner/spinner.js";
+import { Tooltip } from "../tooltip/tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+// src/button/button.tsx
+function content(icon, size, loading) {
+	if (loading) return /* @__PURE__ */ jsx(Spinner, {
+		decorative: true,
+		size: size === "lg" ? "lg" : "md"
+	});
+	if (!icon) return null;
+	return /* @__PURE__ */ jsx(icon, {
+		shape: "sharp",
+		size: iconSize(size),
+		"aria-hidden": true,
+		className: "qx-button-icon",
+		"data-slot": "button-icon"
+	});
+}
+/**
+* An action. One `solid` and one `soft` per region, everything else `ghost` (design rules §7).
+* Disabled buttons stay focusable, so the reason they're disabled can be read.
+*/
+function Button$1({ variant = "solid", tone = "brand", size = "md", icon, loading = false, fullWidth, disabled, className, children, type = "button", ...props }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		...props,
+		type,
+		disabled: disabled || loading,
+		focusableWhenDisabled: true,
+		"aria-busy": loading || void 0,
+		className: cx("qx-button", className),
+		"data-slot": "button",
+		"data-variant": variant,
+		"data-tone": tone,
+		"data-size": size,
+		"data-icon": icon ? "" : void 0,
+		"data-loading": loading ? "" : void 0,
+		"data-full-width": fullWidth ? "" : void 0,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "qx-button-label",
+			"data-slot": "button-label",
+			children
+		}), content(icon, size, loading)]
+	});
+}
+/**
+* A square, icon-only button. Its `aria-label` is required by its type, and it shows as a tooltip.
+*/
+function IconButton({ variant = "ghost", tone = "brand", size = "md", icon, loading = false, tooltip, disabled, className, type = "button", ...props }) {
+	const button = /* @__PURE__ */ jsx(Button, {
+		...props,
+		type,
+		disabled: disabled || loading,
+		focusableWhenDisabled: true,
+		"aria-busy": loading || void 0,
+		className: cx("qx-button qx-icon-button", className),
+		"data-slot": "icon-button",
+		"data-variant": variant,
+		"data-tone": tone,
+		"data-size": size,
+		"data-icon": "",
+		"data-loading": loading ? "" : void 0,
+		children: content(icon, size, loading)
+	});
+	if (tooltip === false) return button;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: tooltip ?? props["aria-label"],
+		children: button
+	});
+}
+export { Button$1 as Button, IconButton };

package/dist/button/index.d.ts

@@ -0,0 +1,2 @@
+import { Button, ButtonProps, ButtonTone, ButtonVariant, IconButton, IconButtonProps } from "./button.js";
+export { Button, type ButtonProps, type ButtonTone, type ButtonVariant, IconButton, type IconButtonProps };

package/dist/button/index.js

@@ -0,0 +1 @@
+export { Button, IconButton } from "./button.js";

package/dist/card/card.d.ts

@@ -0,0 +1,30 @@
+import { RenderProp } from "../internal/render.js";
+import { HeadingLevel } from "../heading/heading.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+/** A titled card names its heading level, so the page sets the outline, not the look. */
+type CardTitle = {
+  title: ReactNode;
+  level: HeadingLevel;
+} | {
+  title?: undefined;
+  level?: undefined;
+};
+interface CardOwnProps extends Omit<ComponentProps<"div">, "title"> {
+  /** A line under the title. */
+  description?: ReactNode;
+  /** Actions at the end of the header, e.g. a ghost "View all" button. */
+  actions?: ReactNode;
+  /** A ruled footer, e.g. the card's actions. */
+  footer?: ReactNode;
+  /** Render a different element, e.g. `render={<article />}`. */
+  render?: RenderProp;
+}
+/** Card props: a `title` needs its heading `level`. The children are the body. */
+export type CardProps = CardOwnProps & CardTitle;
+/**
+ * Related content on a page (06-component-specs.md §9): a raised, ruled surface with no shadow. A
+ * titled card is a section labelled by its title. A Table as the body's direct child runs edge to
+ * edge. Server-safe.
+ */
+export declare function Card({ title, level, description, actions, footer, render, className, children, ...props }: CardProps): ReactElement;
+export {};

package/dist/card/card.js

@@ -0,0 +1,56 @@
+import { cx } from "../internal/cx.js";
+import { renderElement } from "../internal/render.js";
+import { Heading } from "../heading/heading.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+// src/card/card.tsx
+/**
+* Related content on a page (06-component-specs.md §9): a raised, ruled surface with no shadow. A
+* titled card is a section labelled by its title. A Table as the body's direct child runs edge to
+* edge. Server-safe.
+*/
+function Card({ title, level, description, actions, footer, render, className, children, ...props }) {
+	const titleId = useId();
+	const titled = title != null && level !== void 0;
+	const header = titled || description != null || actions != null;
+	return renderElement(titled ? "section" : "div", render, {
+		...titled ? { "aria-labelledby": titleId } : {},
+		...props,
+		className: cx("qx-card", className),
+		"data-slot": "card",
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			header && /* @__PURE__ */ jsxs("div", {
+				className: "qx-card-header",
+				"data-slot": "card-header",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "qx-card-heading",
+					children: [titled && /* @__PURE__ */ jsx(Heading, {
+						level,
+						size: "title-sm",
+						id: titleId,
+						children: title
+					}), description != null && /* @__PURE__ */ jsx("p", {
+						className: "qx-card-description",
+						"data-slot": "card-description",
+						children: description
+					})]
+				}), actions != null && /* @__PURE__ */ jsx("div", {
+					className: "qx-card-actions",
+					"data-slot": "card-actions",
+					children: actions
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "qx-card-body",
+				"data-slot": "card-body",
+				children
+			}),
+			footer != null && /* @__PURE__ */ jsx("div", {
+				className: "qx-card-footer",
+				"data-slot": "card-footer",
+				children: footer
+			})
+		] })
+	});
+}
+export { Card };

package/dist/card/index.d.ts

@@ -0,0 +1,2 @@
+import { Card, CardProps } from "./card.js";
+export { Card, type CardProps };

package/dist/card/index.js

@@ -0,0 +1 @@
+export { Card } from "./card.js";

package/dist/checkbox/checkbox.d.ts

@@ -0,0 +1,33 @@
+import { FieldMessageProps } from "../field/field.js";
+import { ChoiceLabelProps, ChoiceOrientation } from "../field/choice.js";
+import { CSSProperties, ReactElement, ReactNode } from "react";
+import { Checkbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+interface CheckboxOwnProps extends Omit<Checkbox.Root.Props, "className" | "style" | "children"> {
+  /** A line under the label. */
+  description?: ReactNode;
+  /** Placement of the row (or of the control alone, with no label) only. */
+  className?: string;
+  style?: CSSProperties;
+}
+/** Checkbox props: Base UI's, plus `label` — or, with no visible label, a required `aria-label`. */
+export type CheckboxProps = CheckboxOwnProps & ChoiceLabelProps;
+/**
+ * Turns one option on or off, or picks several inside a CheckboxGroup (06-component-specs.md §3).
+ * `ref` and Base UI props go to the control; the label makes the whole row the click target.
+ */
+declare function Checkbox$1({ label, description, className, style, indeterminate, ...props }: CheckboxProps): ReactElement;
+export interface CheckboxGroupProps extends Omit<CheckboxGroup.Props, "className" | "style" | "render">, FieldMessageProps {
+  /** The question, shown as the group's legend. */
+  label: ReactNode;
+  /** The field name the checked values submit under. */
+  name?: string;
+  /** `vertical` (default) or `horizontal` for short options. */
+  orientation?: ChoiceOrientation;
+  /** Placement only (margin, width, grid placement). */
+  className?: string;
+  style?: CSSProperties;
+}
+/** Several options under one question; `value` is the array of checked options' values. */
+declare function CheckboxGroup$1({ label, description, error, name, disabled, orientation, className, style, children, ...props }: CheckboxGroupProps): ReactElement;
+export { Checkbox$1 as Checkbox, CheckboxGroup$1 as CheckboxGroup };

package/dist/checkbox/checkbox.js

@@ -0,0 +1,61 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { ChoiceGroup, ChoiceRow } from "../field/choice.js";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup } from "@base-ui/react/checkbox-group";
+import { CheckIcon } from "@qeetrix/icons/icons/check";
+import { MinusIcon } from "@qeetrix/icons/icons/minus";
+// src/checkbox/checkbox.tsx
+/**
+* Turns one option on or off, or picks several inside a CheckboxGroup (06-component-specs.md §3).
+* `ref` and Base UI props go to the control; the label makes the whole row the click target.
+*/
+function Checkbox$1({ label, description, className, style, indeterminate, ...props }) {
+	const Mark = indeterminate ? MinusIcon : CheckIcon;
+	return /* @__PURE__ */ jsx(ChoiceRow, {
+		kind: "checkbox",
+		label,
+		description,
+		disabled: props.disabled,
+		className,
+		style,
+		children: /* @__PURE__ */ jsx(Checkbox.Root, {
+			...props,
+			indeterminate,
+			className: cx("qx-checkbox", label == null ? className : void 0),
+			style: label == null ? style : void 0,
+			"data-slot": "checkbox-indicator",
+			children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+				className: "qx-checkbox-mark",
+				"data-slot": "checkbox-mark",
+				children: /* @__PURE__ */ jsx(Mark, {
+					shape: "sharp",
+					size: 12,
+					strokeWidth: 3,
+					"aria-hidden": true
+				})
+			})
+		})
+	});
+}
+/** Several options under one question; `value` is the array of checked options' values. */
+function CheckboxGroup$1({ label, description, error, name, disabled, orientation = "vertical", className, style, children, ...props }) {
+	return /* @__PURE__ */ jsx(ChoiceGroup, {
+		kind: "checkbox",
+		label,
+		description,
+		error,
+		name,
+		disabled,
+		orientation,
+		className,
+		style,
+		group: /* @__PURE__ */ jsx(CheckboxGroup, {
+			...props,
+			disabled
+		}),
+		children
+	});
+}
+export { Checkbox$1 as Checkbox, CheckboxGroup$1 as CheckboxGroup };

package/dist/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import { Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps } from "./checkbox.js";
+export { Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps };

package/dist/checkbox/index.js

@@ -0,0 +1 @@
+export { Checkbox, CheckboxGroup } from "./checkbox.js";

package/dist/css/accordion.css

@@ -0,0 +1,73 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-accordion {
+    border-block-end: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-accordion-item {
+    border-block-start: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+  }
+  
+  .qx-accordion-header {
+    margin: 0;
+  }
+  
+  .qx-accordion-trigger {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--qx-space-gap-md);
+    inline-size: 100%;
+    min-block-size: var(--qx-size-control-lg);
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-title-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    text-align: start;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    padding: 0;
+    display: flex;
+  }
+  
+  .qx-accordion-trigger:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+  }
+  
+  .qx-accordion-trigger[data-disabled] {
+    color: var(--qx-color-text-disabled);
+    cursor: not-allowed;
+  }
+  
+  .qx-accordion-icon {
+    color: var(--qx-color-icon-subtle);
+    transition-property: rotate;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    flex: none;
+  }
+  
+  [data-panel-open] > .qx-accordion-icon {
+    rotate: 180deg;
+  }
+  
+  .qx-accordion-panel, .qx-collapsible-panel {
+    block-size: var(--accordion-panel-height, var(--collapsible-panel-height));
+    transition-property: block-size;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    overflow: hidden;
+  }
+  
+  :is(.qx-accordion-panel, .qx-collapsible-panel)[data-starting-style], :is(.qx-accordion-panel, .qx-collapsible-panel)[data-ending-style] {
+    block-size: 0;
+  }
+  
+  .qx-accordion-content {
+    padding-block-end: var(--qx-space-inset-lg);
+  }
+}

package/dist/css/avatar.css

@@ -0,0 +1,44 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-avatar {
+    border-radius: var(--qx-radius-full);
+    background: var(--qx-color-bg-neutral-subtle-pressed);
+    block-size: 32px;
+    inline-size: 32px;
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    vertical-align: middle;
+    -webkit-user-select: none;
+    user-select: none;
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+    overflow: hidden;
+  }
+  
+  .qx-avatar[data-size="sm"] {
+    block-size: 24px;
+    inline-size: 24px;
+    font-size: var(--qx-typography-label-sm-font-size);
+  }
+  
+  .qx-avatar[data-size="lg"] {
+    block-size: 40px;
+    inline-size: 40px;
+    font: var(--qx-typography-label-md);
+  }
+  
+  .qx-avatar[data-size="xl"] {
+    block-size: 48px;
+    inline-size: 48px;
+    font: var(--qx-typography-label-md);
+  }
+  
+  .qx-avatar-image {
+    object-fit: cover;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+}

package/dist/css/badge.css

@@ -0,0 +1,53 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-badge {
+    align-items: center;
+    gap: var(--qx-space-gap-xs);
+    border-radius: var(--qx-radius-chip);
+    background: var(--qx-color-bg-neutral-subtle-pressed);
+    max-inline-size: 100%;
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    white-space: nowrap;
+    vertical-align: middle;
+    padding: 2px 8px;
+    display: inline-flex;
+  }
+  
+  .qx-badge[data-tone="brand"] {
+    background: var(--qx-color-bg-brand-subtle);
+    color: var(--qx-color-text-brand);
+  }
+  
+  .qx-badge[data-tone="info"] {
+    background: var(--qx-color-bg-info-subtle);
+    color: var(--qx-color-text-info);
+  }
+  
+  .qx-badge[data-tone="success"] {
+    background: var(--qx-color-bg-success-subtle);
+    color: var(--qx-color-text-success);
+  }
+  
+  .qx-badge[data-tone="warning"] {
+    background: var(--qx-color-bg-warning-subtle);
+    color: var(--qx-color-text-warning);
+  }
+  
+  .qx-badge[data-tone="danger"] {
+    background: var(--qx-color-bg-danger-subtle);
+    color: var(--qx-color-text-danger);
+  }
+  
+  .qx-badge-icon {
+    flex: none;
+  }
+  
+  .qx-badge-label {
+    text-overflow: ellipsis;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+}

package/dist/css/base.css

@@ -0,0 +1,5 @@
+@layer qx.base {
+  :where([class^="qx-"], [class*=" qx-"]), :where([class^="qx-"], [class*=" qx-"]):before, :where([class^="qx-"], [class*=" qx-"]):after {
+    box-sizing: border-box;
+  }
+}

package/dist/css/box.css

@@ -0,0 +1,163 @@
+@import "./base.css";
+
+@layer qx.components {
+  .qx-box[data-padding="none"] {
+    padding: 0;
+  }
+  
+  .qx-box[data-padding="xs"] {
+    padding: var(--qx-space-inset-xs);
+  }
+  
+  .qx-box[data-padding="sm"] {
+    padding: var(--qx-space-inset-sm);
+  }
+  
+  .qx-box[data-padding="md"] {
+    padding: var(--qx-space-inset-md);
+  }
+  
+  .qx-box[data-padding="lg"] {
+    padding: var(--qx-space-inset-lg);
+  }
+  
+  .qx-box[data-padding="xl"] {
+    padding: var(--qx-space-inset-xl);
+  }
+  
+  .qx-box[data-padding-inline="none"] {
+    padding-inline: 0;
+  }
+  
+  .qx-box[data-padding-inline="xs"] {
+    padding-inline: var(--qx-space-inset-xs);
+  }
+  
+  .qx-box[data-padding-inline="sm"] {
+    padding-inline: var(--qx-space-inset-sm);
+  }
+  
+  .qx-box[data-padding-inline="md"] {
+    padding-inline: var(--qx-space-inset-md);
+  }
+  
+  .qx-box[data-padding-inline="lg"] {
+    padding-inline: var(--qx-space-inset-lg);
+  }
+  
+  .qx-box[data-padding-inline="xl"] {
+    padding-inline: var(--qx-space-inset-xl);
+  }
+  
+  .qx-box[data-padding-block="none"] {
+    padding-block: 0;
+  }
+  
+  .qx-box[data-padding-block="xs"] {
+    padding-block: var(--qx-space-inset-xs);
+  }
+  
+  .qx-box[data-padding-block="sm"] {
+    padding-block: var(--qx-space-inset-sm);
+  }
+  
+  .qx-box[data-padding-block="md"] {
+    padding-block: var(--qx-space-inset-md);
+  }
+  
+  .qx-box[data-padding-block="lg"] {
+    padding-block: var(--qx-space-inset-lg);
+  }
+  
+  .qx-box[data-padding-block="xl"] {
+    padding-block: var(--qx-space-inset-xl);
+  }
+  
+  .qx-box[data-background="canvas"] {
+    background: var(--qx-color-surface-canvas);
+  }
+  
+  .qx-box[data-background="default"] {
+    background: var(--qx-color-surface-default);
+  }
+  
+  .qx-box[data-background="raised"] {
+    background: var(--qx-color-surface-raised);
+  }
+  
+  .qx-box[data-background="sunken"] {
+    background: var(--qx-color-surface-sunken);
+  }
+  
+  .qx-box[data-background="overlay"] {
+    background: var(--qx-color-surface-overlay);
+  }
+  
+  .qx-box[data-background="inverse"] {
+    background: var(--qx-color-surface-inverse);
+  }
+  
+  .qx-box[data-background="neutral"] {
+    background: var(--qx-color-bg-neutral-subtle);
+  }
+  
+  .qx-box[data-background="brand"] {
+    background: var(--qx-color-bg-brand-subtle);
+  }
+  
+  .qx-box[data-background="selected"] {
+    background: var(--qx-color-bg-selected);
+  }
+  
+  .qx-box[data-background="inverse"] {
+    color: var(--qx-color-text-inverse);
+  }
+  
+  .qx-box[data-border="none"] {
+    border: 0;
+  }
+  
+  .qx-box[data-border="subtle"] {
+    border: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+  }
+  
+  .qx-box[data-border="default"] {
+    border: var(--qx-border-width-default) solid var(--qx-color-border-default);
+  }
+  
+  .qx-box[data-border="strong"] {
+    border: var(--qx-border-width-default) solid var(--qx-color-border-strong);
+  }
+  
+  .qx-box[data-radius="none"] {
+    border-radius: var(--qx-radius-none);
+  }
+  
+  .qx-box[data-radius="sm"] {
+    border-radius: var(--qx-radius-sm);
+  }
+  
+  .qx-box[data-radius="control"] {
+    border-radius: var(--qx-radius-control);
+  }
+  
+  .qx-box[data-radius="surface"] {
+    border-radius: var(--qx-radius-surface);
+  }
+  
+  .qx-box[data-radius="overlay"] {
+    border-radius: var(--qx-radius-overlay);
+  }
+  
+  .qx-box[data-radius="modal"] {
+    border-radius: var(--qx-radius-modal);
+  }
+  
+  .qx-box[data-radius="chip"] {
+    border-radius: var(--qx-radius-chip);
+  }
+  
+  .qx-box[data-radius="full"] {
+    border-radius: var(--qx-radius-full);
+  }
+}