@qeetrix/react 0.0.0-stage → 0.0.2

package/dist/separator/separator.js

@@ -0,0 +1,16 @@
+import { cx } from "../internal/cx.js";
+import { renderElement } from "../internal/render.js";
+// src/separator/separator.tsx
+/** A 1px line between groups of content. */
+function Separator({ orientation = "horizontal", tone, decorative, render, className, ...props }) {
+	return renderElement("div", render, {
+		role: decorative ? "none" : "separator",
+		"aria-orientation": decorative || orientation === "horizontal" ? void 0 : orientation,
+		...props,
+		className: cx("qx-separator", className),
+		"data-slot": "separator",
+		"data-orientation": orientation,
+		"data-tone": tone
+	});
+}
+export { Separator };

package/dist/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+import { Skeleton, SkeletonProps, SkeletonVariant } from "./skeleton.js";
+export { Skeleton, type SkeletonProps, type SkeletonVariant };

package/dist/skeleton/index.js

@@ -0,0 +1 @@
+export { Skeleton } from "./skeleton.js";

package/dist/skeleton/skeleton.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps, ReactElement } from "react";
+export type SkeletonVariant = "text" | "block" | "circle";
+export interface SkeletonProps extends ComponentProps<"span"> {
+  /** `text` (one line), `block` (a card or image) or `circle` (an avatar). Default `text`. */
+  variant?: SkeletonVariant;
+}
+/**
+ * A placeholder shaped like the content that is loading (06-component-specs.md, increment 6). Size
+ * it with `style` or `className`. It is hidden from assistive technology: set `aria-busy` on the
+ * loading region and announce the wait with a Spinner or text. Server-safe.
+ */
+export declare function Skeleton({ variant, className, ...props }: SkeletonProps): ReactElement;

package/dist/skeleton/skeleton.js

@@ -0,0 +1,18 @@
+import { cx } from "../internal/cx.js";
+import { jsx } from "react/jsx-runtime";
+// src/skeleton/skeleton.tsx
+/**
+* A placeholder shaped like the content that is loading (06-component-specs.md, increment 6). Size
+* it with `style` or `className`. It is hidden from assistive technology: set `aria-busy` on the
+* loading region and announce the wait with a Spinner or text. Server-safe.
+*/
+function Skeleton({ variant = "text", className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"aria-hidden": true,
+		className: cx("qx-skeleton", className),
+		"data-slot": "skeleton",
+		"data-variant": variant
+	});
+}
+export { Skeleton };

package/dist/skip-link/index.d.ts

@@ -0,0 +1,2 @@
+import { SkipLink, SkipLinkProps } from "./skip-link.js";
+export { SkipLink, type SkipLinkProps };

package/dist/skip-link/index.js

@@ -0,0 +1 @@
+export { SkipLink } from "./skip-link.js";

package/dist/skip-link/skip-link.d.ts

@@ -0,0 +1,13 @@
+import { RenderProp } from "../internal/render.js";
+import { ComponentProps, ReactElement } from "react";
+export interface SkipLinkProps extends ComponentProps<"a"> {
+  /** Where the link jumps to. Default `#main`. */
+  href?: string;
+  /** Render a different element, e.g. a router link. */
+  render?: RenderProp;
+}
+/**
+ * The first focusable element on a page: it jumps past the navigation to the main content
+ * (WCAG 2.4.1 Bypass Blocks). Hidden until focused.
+ */
+export declare function SkipLink({ href, children, render, className, ...props }: SkipLinkProps): ReactElement;

package/dist/skip-link/skip-link.js

@@ -0,0 +1,18 @@
+import { cx } from "../internal/cx.js";
+import { renderElement } from "../internal/render.js";
+import { messages } from "../internal/messages.js";
+// src/skip-link/skip-link.tsx
+/**
+* The first focusable element on a page: it jumps past the navigation to the main content
+* (WCAG 2.4.1 Bypass Blocks). Hidden until focused.
+*/
+function SkipLink({ href = "#main", children = messages.skipLink.label, render, className, ...props }) {
+	return renderElement("a", render, {
+		...props,
+		href,
+		children,
+		className: cx("qx-skip-link", className),
+		"data-slot": "skip-link"
+	});
+}
+export { SkipLink };

package/dist/slider/index.d.ts

@@ -0,0 +1,2 @@
+import { Slider, SliderProps } from "./slider.js";
+export { Slider, type SliderProps };

package/dist/slider/index.js

@@ -0,0 +1 @@
+export { Slider } from "./slider.js";

package/dist/slider/slider.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties, ReactElement, ReactNode } from "react";
+import { Slider } from "@base-ui/react/slider";
+export interface SliderProps<Value extends number | readonly number[] = number> extends Omit<Slider.Root.Props<Value>, "className" | "style" | "children"> {
+  /** The visible label. Without one, give the slider an `aria-label`. */
+  label?: ReactNode;
+  /** Show the formatted value at the end of the header. */
+  showValue?: boolean;
+  /** Placement only. */
+  className?: string;
+  style?: CSSProperties;
+}
+/**
+ * A number, or a range, on a continuous scale (06-component-specs.md, increment 5). An array value
+ * renders one thumb per value. Arrow keys step, Page Up and Down take `largeStep`, Home and End jump.
+ */
+declare function Slider$1<Value extends number | readonly number[] = number>({ label, showValue, className, value, defaultValue, ...props }: SliderProps<Value>): ReactElement;
+export { Slider$1 as Slider };

package/dist/slider/slider.js

@@ -0,0 +1,51 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { messages } from "../internal/messages.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slider } from "@base-ui/react/slider";
+// src/slider/slider.tsx
+/**
+* A number, or a range, on a continuous scale (06-component-specs.md, increment 5). An array value
+* renders one thumb per value. Arrow keys step, Page Up and Down take `largeStep`, Home and End jump.
+*/
+function Slider$1({ label, showValue, className, value, defaultValue, ...props }) {
+	const initial = value ?? defaultValue;
+	const thumbs = Array.isArray(initial) ? initial.length : 1;
+	const range = thumbs > 1;
+	return /* @__PURE__ */ jsxs(Slider.Root, {
+		...props,
+		value,
+		defaultValue,
+		className: cx("qx-slider", className),
+		"data-slot": "slider",
+		children: [(label != null || showValue) && /* @__PURE__ */ jsxs("div", {
+			className: "qx-slider-header",
+			"data-slot": "slider-header",
+			children: [label != null && /* @__PURE__ */ jsx(Slider.Label, {
+				className: "qx-slider-label",
+				"data-slot": "slider-label",
+				children: label
+			}), showValue && /* @__PURE__ */ jsx(Slider.Value, {
+				className: "qx-slider-value",
+				"data-slot": "slider-value"
+			})]
+		}), /* @__PURE__ */ jsx(Slider.Control, {
+			className: "qx-slider-control",
+			"data-slot": "slider-control",
+			children: /* @__PURE__ */ jsxs(Slider.Track, {
+				className: "qx-slider-track",
+				"data-slot": "slider-track",
+				children: [/* @__PURE__ */ jsx(Slider.Indicator, {
+					className: "qx-slider-indicator",
+					"data-slot": "slider-indicator"
+				}), Array.from({ length: thumbs }, (_, index) => /* @__PURE__ */ jsx(Slider.Thumb, {
+					index,
+					getAriaLabel: range ? (i) => i === 0 ? messages.slider.minimum : messages.slider.maximum : null,
+					className: "qx-slider-thumb",
+					"data-slot": "slider-thumb"
+				}, index))]
+			})
+		})]
+	});
+}
+export { Slider$1 as Slider };

package/dist/spinner/index.d.ts

@@ -0,0 +1,2 @@
+import { Spinner, SpinnerProps, SpinnerSize, SpinnerTone } from "./spinner.js";
+export { Spinner, type SpinnerProps, type SpinnerSize, type SpinnerTone };

package/dist/spinner/index.js

@@ -0,0 +1 @@
+export { Spinner } from "./spinner.js";

package/dist/spinner/spinner.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps, ReactElement } from "react";
+export type SpinnerSize = "sm" | "md" | "lg" | "xl";
+export type SpinnerTone = "default" | "brand";
+export interface SpinnerProps extends Omit<ComponentProps<"span">, "children"> {
+  /** `sm` 14px, `md` 16px (default), `lg` 20px, `xl` 24px. */
+  size?: SpinnerSize;
+  /** `default` follows the text colour; `brand` is Ember. */
+  tone?: SpinnerTone;
+  /** The accessible name. Default "Loading". */
+  label?: string;
+  /** Hidden from assistive technology, when something else announces the wait (a busy Button). */
+  decorative?: boolean;
+}
+/** An indeterminate wait: a 2px ring that turns, or fades under reduced motion. */
+export declare function Spinner({ size, tone, label, decorative, className, ...props }: SpinnerProps): ReactElement;

package/dist/spinner/spinner.js

@@ -0,0 +1,19 @@
+import { cx } from "../internal/cx.js";
+import { messages } from "../internal/messages.js";
+import { jsx } from "react/jsx-runtime";
+// src/spinner/spinner.tsx
+/** An indeterminate wait: a 2px ring that turns, or fades under reduced motion. */
+function Spinner({ size, tone, label = messages.spinner.label, decorative, className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...decorative ? { "aria-hidden": true } : {
+			role: "status",
+			"aria-label": label
+		},
+		...props,
+		className: cx("qx-spinner", className),
+		"data-slot": "spinner",
+		"data-size": size,
+		"data-tone": tone
+	});
+}
+export { Spinner };

package/dist/stack/index.d.ts

@@ -0,0 +1,2 @@
+import { FlowJustify, Stack, StackAlign, StackProps } from "./stack.js";
+export { type FlowJustify, Stack, type StackAlign, type StackProps };

package/dist/stack/index.js

@@ -0,0 +1 @@
+export { Stack } from "./stack.js";

package/dist/stack/stack.d.ts

@@ -0,0 +1,17 @@
+import { RenderProp } from "../internal/render.js";
+import { Space } from "../internal/space.js";
+import { ComponentProps, ReactElement } from "react";
+export type StackAlign = "start" | "center" | "end" | "stretch";
+export type FlowJustify = "start" | "center" | "end" | "between";
+export interface StackProps extends ComponentProps<"div"> {
+  /** Space between children, from the space scale. Default `md` (12px). */
+  gap?: Space;
+  /** Cross-axis alignment. Default `stretch`. */
+  align?: StackAlign;
+  /** Main-axis distribution. */
+  justify?: FlowJustify;
+  /** Render a different element, e.g. `<ul />`. */
+  render?: RenderProp;
+}
+/** A vertical flow with token gaps. */
+export declare function Stack({ gap, align, justify, render, className, ...props }: StackProps): ReactElement;

package/dist/stack/stack.js

@@ -0,0 +1,15 @@
+import { cx } from "../internal/cx.js";
+import { renderElement } from "../internal/render.js";
+// src/stack/stack.tsx
+/** A vertical flow with token gaps. */
+function Stack({ gap = "md", align, justify, render, className, ...props }) {
+	return renderElement("div", render, {
+		...props,
+		className: cx("qx-stack", className),
+		"data-slot": "stack",
+		"data-gap": gap,
+		"data-align": align,
+		"data-justify": justify
+	});
+}
+export { Stack };