@qeetrix/react 0.0.1 → 0.0.4

package/dist/dialog/dialog.js

@@ -0,0 +1,121 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { IconButton } from "../button/button.js";
+import { useMessages } from "../provider/provider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use } from "react";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+import { Dialog } from "@base-ui/react/dialog";
+import { XIcon } from "@qeetrix/icons/icons/x";
+// src/dialog/dialog.tsx
+/** The ways a user dismisses a dialog, as opposed to choosing one of its actions. */
+const DISMISSALS = /* @__PURE__ */ new Set([
+	"escape-key",
+	"outside-press",
+	"focus-out"
+]);
+const DialogContext = createContext({
+	intent: "standard",
+	dismissible: true
+});
+/** Holds a dialog's open state: `open` / `defaultOpen` / `onOpenChange(open, details)`. */
+function Dialog$1({ intent = "standard", dismissible = intent !== "danger", modal, onOpenChange, children, ...props }) {
+	const handleOpenChange = (open, details) => {
+		if (!open && !dismissible && DISMISSALS.has(details.reason)) {
+			details.cancel();
+			return;
+		}
+		onOpenChange?.(open, details);
+	};
+	return /* @__PURE__ */ jsx(DialogContext, {
+		value: {
+			intent,
+			dismissible
+		},
+		children: intent === "standard" ? /* @__PURE__ */ jsx(Dialog.Root, {
+			...props,
+			modal,
+			disablePointerDismissal: !dismissible,
+			onOpenChange: handleOpenChange,
+			children
+		}) : /* @__PURE__ */ jsx(AlertDialog.Root, {
+			...props,
+			onOpenChange: handleOpenChange,
+			children
+		})
+	});
+}
+/** Opens the dialog. Render your own control: `render={<Button tone="danger">Revoke</Button>}`. */
+function DialogTrigger(props) {
+	const { intent } = use(DialogContext);
+	return intent === "standard" ? /* @__PURE__ */ jsx(Dialog.Trigger, { ...props }) : /* @__PURE__ */ jsx(AlertDialog.Trigger, { ...props });
+}
+/** Closes the dialog, e.g. Cancel: `render={<Button variant="ghost">Cancel</Button>}`. */
+function DialogClose(props) {
+	return /* @__PURE__ */ jsx(Dialog.Close, { ...props });
+}
+/**
+* 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.
+*/
+function DialogContent({ title, description, size = "md", messages, className, children, ...props }) {
+	const { intent, dismissible } = use(DialogContext);
+	const strings = useMessages("overlay", messages);
+	return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+		className: "qx-dialog-backdrop",
+		"data-slot": "dialog-backdrop"
+	}), /* @__PURE__ */ jsx(Dialog.Viewport, {
+		className: "qx-dialog-viewport",
+		children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+			...props,
+			className: cx("qx-dialog", className),
+			"data-slot": "dialog-popup",
+			"data-intent": intent,
+			"data-size": size,
+			"data-dismissible": dismissible ? "" : void 0,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "qx-dialog-header",
+					"data-slot": "dialog-header",
+					children: [/* @__PURE__ */ jsx(Dialog.Title, {
+						className: "qx-dialog-title",
+						"data-slot": "dialog-title",
+						children: title
+					}), description != null && /* @__PURE__ */ jsx(Dialog.Description, {
+						className: "qx-dialog-description",
+						"data-slot": "dialog-description",
+						children: description
+					})]
+				}),
+				children,
+				dismissible && /* @__PURE__ */ jsx("div", {
+					className: "qx-dialog-close",
+					"data-slot": "dialog-close",
+					children: /* @__PURE__ */ jsx(Dialog.Close, { render: /* @__PURE__ */ jsx(IconButton, {
+						icon: XIcon,
+						"aria-label": strings.close,
+						size: "sm"
+					}) })
+				})
+			]
+		})
+	})] });
+}
+/** The dialog's content; it scrolls when the dialog reaches its maximum height. */
+function DialogBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cx("qx-dialog-body", className),
+		"data-slot": "dialog-body"
+	});
+}
+/** The actions, end-aligned: tertiary first, then the primary or destructive action. */
+function DialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cx("qx-dialog-footer", className),
+		"data-slot": "dialog-footer"
+	});
+}
+export { Dialog$1 as Dialog, DialogBody, DialogClose, DialogContent, DialogFooter, DialogTrigger };

package/dist/dialog/index.d.ts

@@ -0,0 +1,2 @@
+import { Dialog, DialogBody, DialogBodyProps, DialogClose, DialogCloseProps, DialogContent, DialogContentProps, DialogFooter, DialogFooterProps, DialogIntent, DialogProps, DialogSize, DialogTrigger, DialogTriggerProps } from "./dialog.js";
+export { Dialog, DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogFooter, type DialogFooterProps, type DialogIntent, type DialogProps, type DialogSize, DialogTrigger, type DialogTriggerProps };

package/dist/dialog/index.js

@@ -0,0 +1 @@
+export { Dialog, DialogBody, DialogClose, DialogContent, DialogFooter, DialogTrigger } from "./dialog.js";

package/dist/drawer/drawer.d.ts

@@ -0,0 +1,49 @@
+import { QeetrixMessages } from "../internal/messages.js";
+import { CSSProperties, ComponentProps, ReactElement, ReactNode } from "react";
+import { Drawer } from "@base-ui/react/drawer";
+/** The edge a drawer opens from, in the text direction: `end` is the right edge in English. */
+export type DrawerSide = "start" | "end";
+export type DrawerSize = "sm" | "md" | "lg";
+export interface DrawerProps extends Omit<Drawer.Root.Props, "swipeDirection"> {
+  /** Default `end`. Right-to-left layouts need Base UI's DirectionProvider, as its keyboard does. */
+  side?: DrawerSide;
+}
+export type DrawerTriggerProps = Drawer.Trigger.Props;
+export type DrawerCloseProps = Drawer.Close.Props;
+export interface DrawerContentProps extends Omit<Drawer.Popup.Props, "className" | "style" | "title" | "children"> {
+  /** The title; it labels the drawer. */
+  title: ReactNode;
+  /** A line under the title; it describes the drawer. */
+  description?: ReactNode;
+  /** Width: `sm` 400, `md` 560 (default) or `lg` 800px. */
+  size?: DrawerSize;
+  /** The close button's label, over QeetrixProvider's and the English default. */
+  messages?: Partial<QeetrixMessages["overlay"]>;
+  /** Placement only. */
+  className?: string;
+  style?: CSSProperties;
+  /** DrawerBody and DrawerFooter. */
+  children?: ReactNode;
+}
+export interface DrawerBodyProps extends Omit<Drawer.Content.Props, "className"> {
+  className?: string;
+}
+export interface DrawerFooterProps extends ComponentProps<"div"> {}
+/** Holds a drawer's open state: `open` / `defaultOpen` / `onOpenChange(open, details)`. */
+declare function Drawer$1({ side, ...props }: DrawerProps): ReactElement;
+/** Opens the drawer. Render your own control: `render={<Button>Edit</Button>}`. */
+export declare function DrawerTrigger(props: DrawerTriggerProps): ReactElement;
+/** Closes the drawer, e.g. Cancel: `render={<Button variant="ghost">Cancel</Button>}`. */
+export declare function DrawerClose(props: DrawerCloseProps): ReactElement;
+/**
+ * A full-height side panel (06-component-specs.md, increment 4) with a ruled header, a scrolling
+ * body and a ruled footer. Escape, an outside click and a swipe toward its edge close it. On open,
+ * focus goes to the first focusable element in the body, as in a dialog; on touch it goes to the
+ * drawer itself, so a phone's keyboard doesn't open over it.
+ */
+export declare function DrawerContent({ title, description, size, messages, initialFocus, ref, className, children, ...props }: DrawerContentProps): ReactElement;
+/** The drawer's content; it scrolls, and text in it can be selected without starting a swipe. */
+export declare function DrawerBody({ className, ...props }: DrawerBodyProps): ReactElement;
+/** The actions, end-aligned under a rule: tertiary first, then the primary action. */
+export declare function DrawerFooter({ className, ...props }: DrawerFooterProps): ReactElement;
+export { Drawer$1 as Drawer };

package/dist/drawer/drawer.js

@@ -0,0 +1,102 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { IconButton } from "../button/button.js";
+import { useMessages } from "../provider/provider.js";
+import { mergeRefs } from "../internal/refs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useRef } from "react";
+import { useDirection } from "@base-ui/react/direction-provider";
+import { XIcon } from "@qeetrix/icons/icons/x";
+import { Drawer } from "@base-ui/react/drawer";
+// src/drawer/drawer.tsx
+const SideContext = createContext("end");
+const FOCUSABLE = "input:not([type=\"hidden\"], :disabled), textarea:not(:disabled), select:not(:disabled), button:not(:disabled), [href], [tabindex]:not([tabindex=\"-1\"])";
+/** Holds a drawer's open state: `open` / `defaultOpen` / `onOpenChange(open, details)`. */
+function Drawer$1({ side = "end", ...props }) {
+	const rtl = useDirection() === "rtl";
+	const swipeDirection = side === "end" === rtl ? "left" : "right";
+	return /* @__PURE__ */ jsx(SideContext, {
+		value: side,
+		children: /* @__PURE__ */ jsx(Drawer.Root, {
+			...props,
+			swipeDirection
+		})
+	});
+}
+/** Opens the drawer. Render your own control: `render={<Button>Edit</Button>}`. */
+function DrawerTrigger(props) {
+	return /* @__PURE__ */ jsx(Drawer.Trigger, { ...props });
+}
+/** Closes the drawer, e.g. Cancel: `render={<Button variant="ghost">Cancel</Button>}`. */
+function DrawerClose(props) {
+	return /* @__PURE__ */ jsx(Drawer.Close, { ...props });
+}
+/**
+* A full-height side panel (06-component-specs.md, increment 4) with a ruled header, a scrolling
+* body and a ruled footer. Escape, an outside click and a swipe toward its edge close it. On open,
+* focus goes to the first focusable element in the body, as in a dialog; on touch it goes to the
+* drawer itself, so a phone's keyboard doesn't open over it.
+*/
+function DrawerContent({ title, description, size = "md", messages, initialFocus, ref, className, children, ...props }) {
+	const side = use(SideContext);
+	const strings = useMessages("overlay", messages);
+	const popup = useRef(null);
+	const firstInBody = (type) => type === "touch" || (popup.current?.querySelector(`[data-slot="drawer-body"] :is(${FOCUSABLE})`) ?? true);
+	return /* @__PURE__ */ jsxs(Drawer.Portal, { children: [/* @__PURE__ */ jsx(Drawer.Backdrop, {
+		className: "qx-drawer-backdrop",
+		"data-slot": "drawer-backdrop"
+	}), /* @__PURE__ */ jsx(Drawer.Viewport, {
+		className: "qx-drawer-viewport",
+		"data-side": side,
+		children: /* @__PURE__ */ jsxs(Drawer.Popup, {
+			...props,
+			ref: mergeRefs(ref, popup),
+			initialFocus: initialFocus ?? firstInBody,
+			className: cx("qx-drawer", className),
+			"data-slot": "drawer-popup",
+			"data-size": size,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "qx-drawer-header",
+					"data-slot": "drawer-header",
+					children: [/* @__PURE__ */ jsx(Drawer.Title, {
+						className: "qx-drawer-title",
+						"data-slot": "drawer-title",
+						children: title
+					}), description != null && /* @__PURE__ */ jsx(Drawer.Description, {
+						className: "qx-drawer-description",
+						"data-slot": "drawer-description",
+						children: description
+					})]
+				}),
+				children,
+				/* @__PURE__ */ jsx("div", {
+					className: "qx-drawer-close",
+					"data-slot": "drawer-close",
+					children: /* @__PURE__ */ jsx(Drawer.Close, { render: /* @__PURE__ */ jsx(IconButton, {
+						icon: XIcon,
+						"aria-label": strings.close,
+						size: "sm"
+					}) })
+				})
+			]
+		})
+	})] });
+}
+/** The drawer's content; it scrolls, and text in it can be selected without starting a swipe. */
+function DrawerBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Content, {
+		...props,
+		className: cx("qx-drawer-body", className),
+		"data-slot": "drawer-body"
+	});
+}
+/** The actions, end-aligned under a rule: tertiary first, then the primary action. */
+function DrawerFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cx("qx-drawer-footer", className),
+		"data-slot": "drawer-footer"
+	});
+}
+export { Drawer$1 as Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerTrigger };

package/dist/drawer/index.d.ts

@@ -0,0 +1,2 @@
+import { Drawer, DrawerBody, DrawerBodyProps, DrawerClose, DrawerCloseProps, DrawerContent, DrawerContentProps, DrawerFooter, DrawerFooterProps, DrawerProps, DrawerSide, DrawerSize, DrawerTrigger, DrawerTriggerProps } from "./drawer.js";
+export { Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerFooter, type DrawerFooterProps, type DrawerProps, type DrawerSide, type DrawerSize, DrawerTrigger, type DrawerTriggerProps };

package/dist/drawer/index.js

@@ -0,0 +1 @@
+export { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerTrigger } from "./drawer.js";

package/dist/experimental/alert/alert.d.ts

@@ -0,0 +1,29 @@
+import { QeetrixMessages } from "../../internal/messages.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+export type AlertTone = "info" | "success" | "warning" | "danger";
+export interface AlertProps extends Omit<ComponentProps<"div">, "title"> {
+  /** Default `info`. The icon and a hidden word ("Warning:") carry it, never colour alone. */
+  tone?: AlertTone;
+  /** What happened, in a few words: "Directory sync failed". */
+  title: ReactNode;
+  /** One or two sentences: why, and what to do. */
+  children?: ReactNode;
+  /** Buttons or links under the text: one primary at most. */
+  actions?: ReactNode;
+  /** Adds a Dismiss button. The product decides whether the alert comes back. */
+  onDismiss?: () => void;
+  /**
+   * Only for an alert that appears after something happens: `polite` (`role="status"`) waits its
+   * turn; `urgent` (`role="alert"`) interrupts, for errors that block the task. An alert that is
+   * there when the page loads needs neither.
+   */
+  announce?: "polite" | "urgent";
+  /** This alert's strings, over QeetrixProvider's and the English defaults. */
+  messages?: Partial<QeetrixMessages["alert"]>;
+}
+/**
+ * A message in the page (07-components.md, C2): above a form, inside a card, or across the top of
+ * a console page in AppShell's `notifications`. A tinted surface with the 3px status edge on its
+ * start side. It never takes focus and never disappears by itself.
+ */
+export declare function Alert({ tone, title, children, actions, onDismiss, announce, messages, className, ...props }: AlertProps): ReactElement;

package/dist/experimental/alert/alert.js

@@ -0,0 +1,72 @@
+"use client";
+import { cx } from "../../internal/cx.js";
+import { IconButton } from "../../button/button.js";
+import { useMessages } from "../../provider/provider.js";
+import { VisuallyHidden } from "../../visually-hidden/visually-hidden.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleAlertIcon } from "@qeetrix/icons/icons/circle-alert";
+import { XIcon } from "@qeetrix/icons/icons/x";
+import { CircleCheckIcon } from "@qeetrix/icons/icons/circle-check";
+import { InfoIcon } from "@qeetrix/icons/icons/info";
+import { TriangleAlertIcon } from "@qeetrix/icons/icons/triangle-alert";
+// src/experimental/alert/alert.tsx
+const ICONS = {
+	info: InfoIcon,
+	success: CircleCheckIcon,
+	warning: TriangleAlertIcon,
+	danger: CircleAlertIcon
+};
+/**
+* A message in the page (07-components.md, C2): above a form, inside a card, or across the top of
+* a console page in AppShell's `notifications`. A tinted surface with the 3px status edge on its
+* start side. It never takes focus and never disappears by itself.
+*/
+function Alert({ tone = "info", title, children, actions, onDismiss, announce, messages, className, ...props }) {
+	const strings = useMessages("alert", messages);
+	const Icon = ICONS[tone];
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		role: announce === "urgent" ? "alert" : announce === "polite" ? "status" : void 0,
+		className: cx("qx-alert", className),
+		"data-slot": "alert",
+		"data-tone": tone,
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				shape: "sharp",
+				size: 16,
+				"aria-hidden": true,
+				className: "qx-alert-icon"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "qx-alert-body",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "qx-alert-title",
+						"data-slot": "alert-title",
+						children: [/* @__PURE__ */ jsx(VisuallyHidden, { children: `${strings[tone]}: ` }), title]
+					}),
+					children != null && /* @__PURE__ */ jsx("div", {
+						className: "qx-alert-description",
+						"data-slot": "alert-description",
+						children
+					}),
+					actions != null && /* @__PURE__ */ jsx("div", {
+						className: "qx-alert-actions",
+						"data-slot": "alert-actions",
+						children: actions
+					})
+				]
+			}),
+			onDismiss && /* @__PURE__ */ jsx(IconButton, {
+				icon: XIcon,
+				"aria-label": strings.dismiss,
+				size: "sm",
+				tone: "neutral",
+				tooltip: false,
+				onClick: onDismiss,
+				className: "qx-alert-dismiss"
+			})
+		]
+	});
+}
+export { Alert };

package/dist/experimental/alert/index.d.ts

@@ -0,0 +1,2 @@
+import { Alert, AlertProps, AlertTone } from "./alert.js";
+export { Alert, type AlertProps, type AlertTone };

package/dist/experimental/app-shell/app-shell.d.ts

@@ -0,0 +1,60 @@
+import { QeetrixIcon } from "../../internal/control.js";
+import { QeetrixMessages } from "../../internal/messages.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+/** The frame's density; `inherit` leaves it to the page. */
+export type AppShellDensity = "compact" | "default" | "comfortable" | "inherit";
+/** An end-edge panel: help, the assistant, activity. */
+export interface AppShellDrawer {
+  id: string;
+  /** The trigger's label and the panel's title. */
+  label: string;
+  /** The trigger's icon, from `@qeetrix/icons`. */
+  icon: QeetrixIcon;
+  /** The panel's content. */
+  content: ReactNode;
+  /** A dot on the trigger: something new inside. */
+  badge?: boolean;
+}
+export interface AppShellProps extends Omit<ComponentProps<"div">, "children"> {
+  /** The global bar: a TopBar. */
+  topBar?: ReactNode;
+  /** The navigation: a Sidebar. */
+  sidebar?: ReactNode;
+  /** End-edge panels: help, the assistant, activity. Their triggers sit in the TopBar. */
+  drawers?: AppShellDrawer[];
+  /** The open panel's id, or `null`, controlled. */
+  activeDrawer?: string | null;
+  /** The open panel when uncontrolled. Default none. */
+  defaultActiveDrawer?: string | null;
+  /** Called with the panel that opens, or `null` when it closes. */
+  onActiveDrawerChange?: (id: string | null) => void;
+  /** Page messages (Alerts) above the page header. */
+  notifications?: ReactNode;
+  /** The frame's density. Default `compact`: consoles are dense (design rules §15). */
+  density?: AppShellDensity;
+  /** The page: a PageHeader and PageContent. */
+  children?: ReactNode;
+  /** Whether the sidebar is collapsed to its icon rail, controlled. */
+  sidebarCollapsed?: boolean;
+  /** The initial collapsed state when uncontrolled. Default `false`. */
+  defaultSidebarCollapsed?: boolean;
+  /** Called with the new collapsed state. Persist it in the product, e.g. the user's settings. */
+  onSidebarCollapsedChange?: (collapsed: boolean) => void;
+  /** The main region's id, which the built-in skip link targets. Default `main`. */
+  mainId?: string;
+  /** The shell's strings, over QeetrixProvider's and the English defaults. */
+  messages?: Partial<QeetrixMessages["appShell"]>;
+}
+export interface AppShellState {
+  /** The sidebar is showing as its icon rail. */
+  collapsed: boolean;
+}
+/** The AppShell's state, for content inside its sidebar or bar. */
+export declare function useAppShell(): AppShellState;
+/**
+ * The frame of a Qeet console (07-components.md, C1 · Ruled): the black scope bar across the full
+ * width; the ruled navigation column, which collapses to a 48px icon rail that expands while
+ * hovered or focused; the page; and a panel on the end edge that the bar's tools open. Seams are
+ * 1px rules, never shadows. Compact by default.
+ */
+export declare function AppShell({ topBar, sidebar, drawers, activeDrawer, defaultActiveDrawer, onActiveDrawerChange, notifications, density, children, sidebarCollapsed, defaultSidebarCollapsed, onSidebarCollapsedChange, mainId, messages, className, ...props }: AppShellProps): ReactElement;