@-reddacted-/react-ui 0.3.0 → 0.4.0

package/dist/components/Accordion.d.ts

@@ -0,0 +1,27 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+type AccordionProps = HTMLAttributes<HTMLDivElement> & {
+    /** Only one item open at a time (native `name` on the <details>). */
+    exclusive?: boolean;
+    /** Defaults to `"joined"`. */
+    variant?: "separated" | "joined";
+    /** Defaults to `"end"`. */
+    chevron?: "start" | "end" | "none";
+    children: ReactNode;
+};
+export declare function Accordion({ exclusive, variant, chevron, className, ...props }: AccordionProps): import("react").JSX.Element;
+export declare namespace Accordion {
+    var Item: ({ title, children, defaultOpen, open, onOpenChange, className, style }: AccordionItemProps) => import("react").JSX.Element;
+}
+type AccordionItemProps = {
+    title: ReactNode;
+    children: ReactNode;
+    /** Uncontrolled: open on mount. */
+    defaultOpen?: boolean;
+    /** Controlled mode, kept in sync with the native toggle. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+    style?: CSSProperties;
+};
+export {};
+//# sourceMappingURL=Accordion.d.ts.map

package/dist/components/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAA;AAOrF,KAAK,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACrD,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAA;IAChC,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAA;IAClC,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAiB,EACjB,OAAkB,EAClB,OAAe,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,+BAahB;yBAnBe,SAAS;uFAiCqE,kBAAkB;;AAZhH,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;IACnB,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA"}

package/dist/components/Accordion.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId, useRef } from "react";
+import { accordionCss } from "../style/accordionCss.js";
+import { useStyle } from "../style/useStyle.js";
+// Shared `name` of the group's <details> when exclusive: the browser keeps one open.
+const AccordionContext = createContext(undefined);
+export function Accordion({ exclusive = false, variant = "joined", chevron = "end", className, ...props }) {
+    useStyle("accordion", accordionCss);
+    const name = useId();
+    return (_jsx(AccordionContext.Provider, { value: exclusive ? name : undefined, children: _jsx("div", { ...props, className: className ? `rui-accordion ${className}` : "rui-accordion", "data-variant": variant, "data-chevron": chevron }) }));
+}
+function Item({ title, children, defaultOpen = false, open, onOpenChange, className, style }) {
+    const name = useContext(AccordionContext);
+    const controlled = open !== undefined;
+    const openRef = useRef(open);
+    openRef.current = open;
+    // <details> toggles natively before React knows: report it. In controlled mode, once the
+    // parent had a chance to re-render, put the element back if the change was not accepted
+    // (not synchronously: an exclusive group would then reopen and close items in a loop).
+    const onToggle = (event) => {
+        const el = event.currentTarget;
+        if (controlled && el.open === openRef.current)
+            return;
+        onOpenChange?.(el.open);
+        if (!controlled)
+            return;
+        requestAnimationFrame(() => {
+            const wanted = openRef.current;
+            if (wanted !== undefined && el.open !== wanted)
+                el.open = wanted;
+        });
+    };
+    return (_jsxs("details", { ...{ name }, open: controlled ? open : defaultOpen, onToggle: onToggle, className: className, style: style, children: [_jsx("summary", { children: title }), _jsx("div", { className: "rui-accordion-content", children: children })] }));
+}
+Accordion.Item = Item;

package/dist/components/Badge.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from "react";
+export type BadgeVariant = "solid" | "outline" | "soft";
+export type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
+    /** Defaults to `"solid"`. */
+    variant?: BadgeVariant;
+    /**
+     * `"--color-x"` reads the theme variable (text on solid reads `--color-on-x`, falling back
+     * to `--color-bg`); anything else is a raw CSS color. Defaults to `"--color-primary"`.
+     */
+    color?: string;
+    /** Font size; padding and radius follow. Numbers are pixels. Defaults to `"0.75em"`. */
+    size?: string | number;
+};
+export declare function Badge({ variant, color, size, className, style, ...props }: BadgeProps): import("react").JSX.Element;
+//# sourceMappingURL=Badge.d.ts.map

package/dist/components/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;AAEvD,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,eAAe,CAAC,GAAG;IACzD,6BAA6B;IAC7B,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wFAAwF;IACxF,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,KAAK,CAAC,EAAE,OAAiB,EAAE,KAAyB,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAUnH"}

package/dist/components/Badge.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { badgeCss, badgeVars } from "../style/badgeCss.js";
+import { useStyle } from "../style/useStyle.js";
+export function Badge({ variant = "solid", color = "--color-primary", size, className, style, ...props }) {
+    useStyle("badge", badgeCss);
+    return (_jsx("span", { ...props, className: className ? `rui-badge ${className}` : "rui-badge", "data-variant": variant, style: { ...badgeVars(color, size), ...style } }));
+}

package/dist/components/Button.d.ts

@@ -1,9 +1,22 @@
 import type { ButtonHTMLAttributes, ReactNode } from "react";
-export type ButtonVariant = "primary" | "secondary" | "ghost";
+export type ButtonVariant = "solid" | "outline" | "ghost";
+/** Name of a theme variable, e.g. `"--color-primary"`. */
+export type ThemeColorVar = `--color-${string}`;
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** Shape: filled, bordered or text only. Defaults to `"solid"`. */
     variant?: ButtonVariant;
+    /**
+     * Theme variable used by the button. Text on a solid background reads the matching
+     * `--color-on-x` variable, falling back to `--color-bg`. Defaults to `"--color-primary"`.
+     */
+    color?: ThemeColorVar;
+    /** Numbers are pixels; strings are any CSS length (`"100%"`, `"2.5rem"`). */
+    width?: string | number;
+    height?: string | number;
+    /** Shows a spinner instead of the content, keeping the width, and disables the button. */
+    loading?: boolean;
     children: ReactNode;
 };
-export declare function Button({ variant, style, disabled, children, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ variant, color, width, height, loading, disabled, className, style, children, ...props }: ButtonProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=Button.d.ts.map

package/dist/components/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3E,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAA;AAE7D,KAAK,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3D,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,wBAAgB,MAAM,CAAC,EAAE,OAAmB,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BAe/F"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAK3E,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;AAEzD,0DAA0D;AAC1D,MAAM,MAAM,aAAa,GAAG,WAAW,MAAM,EAAE,CAAA;AAE/C,KAAK,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3D,mEAAmE;IACnE,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAiB,EACjB,KAAyB,EACzB,KAAK,EACL,MAAM,EACN,OAAe,EACf,QAAQ,EACR,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,+BAyBb"}

package/dist/components/Button.js

@@ -1,44 +1,76 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export function Button({ variant = "primary", style, disabled, children, ...props }) {
-    return (_jsx("button", { disabled: disabled, style: {
-            ...baseStyle,
-            ...variantStyles[variant],
-            ...(disabled ? disabledStyle : undefined),
-            ...style,
-        }, ...props, children: children }));
-}
-const baseStyle = {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "0.5rem",
-    padding: "0.5rem 1rem",
-    borderRadius: "6px",
-    fontSize: "0.875rem",
-    fontWeight: 500,
-    cursor: "pointer",
-    border: "1px solid transparent",
-    lineHeight: 1,
-    whiteSpace: "nowrap",
-};
-const disabledStyle = {
-    opacity: 0.4,
-    cursor: "not-allowed",
-};
-const variantStyles = {
-    primary: {
-        backgroundColor: "var(--color-primary)",
-        color: "var(--color-on-primary)",
-        borderColor: "var(--color-primary)",
-    },
-    secondary: {
-        backgroundColor: "transparent",
-        color: "var(--color-primary)",
-        borderColor: "var(--color-primary)",
-    },
-    ghost: {
-        backgroundColor: "transparent",
-        color: "var(--color-text-muted)",
-        borderColor: "transparent",
-    },
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toLength } from "../style/toLength.js";
+import { useStyle } from "../style/useStyle.js";
+import { Spinner } from "./Spinner.js";
+export function Button({ variant = "solid", color = "--color-primary", width, height, loading = false, disabled, className, style, children, ...props }) {
+    useStyle("button", buttonCss);
+    const onColor = color.replace(/^--color-/, "--color-on-");
+    const buttonStyle = {
+        "--rui-btn-color": `var(${color})`,
+        "--rui-btn-on": `var(${onColor}, var(--color-bg))`,
+        width: toLength(width),
+        height: toLength(height),
+        ...style,
+    };
+    return (_jsxs("button", { ...props, className: className ? `rui-button ${className}` : "rui-button", "data-variant": variant, disabled: disabled || loading, "aria-busy": loading || undefined, style: buttonStyle, children: [_jsx("span", { className: "rui-button-label", children: children }), loading && _jsx(Spinner, { className: "rui-button-spinner", "aria-hidden": "true" })] }));
+}
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+const buttonCss = `
+:where(.rui-button) {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--rui-btn-color);
+  border-radius: 6px;
+  background-color: var(--rui-btn-color);
+  color: var(--rui-btn-on);
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 120ms, border-color 120ms;
+}
+:where(.rui-button[data-variant="solid"]:hover:not(:disabled)) {
+  background-color: color-mix(in srgb, var(--rui-btn-color) 85%, black);
+  border-color: color-mix(in srgb, var(--rui-btn-color) 85%, black);
+}
+:where(.rui-button[data-variant="outline"], .rui-button[data-variant="ghost"]) {
+  background-color: transparent;
+  color: var(--rui-btn-color);
+}
+:where(.rui-button[data-variant="ghost"]) {
+  border-color: transparent;
+}
+:where(.rui-button[data-variant="outline"]:hover:not(:disabled), .rui-button[data-variant="ghost"]:hover:not(:disabled)) {
+  background-color: color-mix(in srgb, var(--rui-btn-color) 12%, transparent);
+}
+:where(.rui-button:focus-visible) {
+  outline: 2px solid var(--rui-btn-color);
+  outline-offset: 2px;
+}
+:where(.rui-button:disabled) {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+:where(.rui-button[aria-busy="true"]) {
+  opacity: 1;
+  cursor: progress;
+}
+:where(.rui-button-label) {
+  display: contents;
+}
+:where(.rui-button[aria-busy="true"] > .rui-button-label) {
+  visibility: hidden;
+}
+:where(.rui-button-spinner) {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+}
+`;

package/dist/components/Card.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from "react";
+type CardProps = HTMLAttributes<HTMLDivElement> & {
+    /** Colors: `"--color-x"` reads the theme variable; anything else is a raw CSS value. */
+    bg?: string;
+    border?: string;
+    /** Any `box-shadow` value, or a theme variable holding one. */
+    shadow?: string;
+    /** Numbers are pixels. */
+    padding?: string | number;
+    radius?: string | number;
+    /** Focus ring color when interactive. Defaults to `--color-primary`. */
+    accent?: string;
+    /**
+     * Hover and focus states, pointer cursor, and `tabIndex={0}` unless set. Keyboard
+     * activation stays with the project: prefer `<a className="rui-card">` or `<button>`.
+     */
+    interactive?: boolean;
+};
+export declare function Card({ bg, border, shadow, padding, radius, accent, interactive, className, style, tabIndex, ...props }: CardProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAA;AAM1D,KAAK,SAAS,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAChD,wFAAwF;IACxF,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+DAA+D;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,0BAA0B;IAC1B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,wBAAgB,IAAI,CAAC,EACnB,EAAE,EACF,MAAM,EACN,MAAM,EACN,OAAO,EACP,MAAM,EACN,MAAM,EACN,WAAmB,EACnB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,SAAS,+BAqBX"}

package/dist/components/Card.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cardCss } from "../style/cardCss.js";
+import { resolveColor } from "../style/resolveColor.js";
+import { toLength } from "../style/toLength.js";
+import { useStyle } from "../style/useStyle.js";
+export function Card({ bg, border, shadow, padding, radius, accent, interactive = false, className, style, tabIndex, ...props }) {
+    useStyle("card", cardCss);
+    return (_jsx("div", { ...props, className: className ? `rui-card ${className}` : "rui-card", "data-interactive": interactive || undefined, tabIndex: tabIndex ?? (interactive ? 0 : undefined), style: {
+            "--rui-card-bg": bg && resolveColor(bg),
+            "--rui-card-border": border && resolveColor(border),
+            "--rui-card-shadow": shadow && resolveColor(shadow),
+            "--rui-card-padding": toLength(padding),
+            "--rui-card-radius": toLength(radius),
+            "--rui-card-accent": accent && resolveColor(accent),
+            ...style,
+        } }));
+}

package/dist/components/ColorField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorField.d.ts","sourceRoot":"","sources":["../../src/components/ColorField.tsx"],"names":[],"mappings":"AAKA,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,WAA4B,EAAE,EAAE,eAAe,+BAanG"}
+{"version":3,"file":"ColorField.d.ts","sourceRoot":"","sources":["../../src/components/ColorField.tsx"],"names":[],"mappings":"AAKA,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,WAA4B,EAAE,EAAE,eAAe,+BAmBnG"}

package/dist/components/ColorField.js

@@ -3,7 +3,7 @@ import ColorPicker from "./ColorPicker.js";
 import { Button } from "./Button.js";
 import { randomHex } from "../theme/clipboard.js";
 export function ColorField({ label, value, onChange, randomLabel = "Random color" }) {
-    return (_jsxs("div", { style: rowStyle, children: [_jsx("label", { style: labelStyle, children: label }), _jsxs("div", { style: controlsStyle, children: [_jsx("code", { style: hexStyle, children: value }), _jsx(ColorPicker, { value: value, onChange: onChange, ariaLabel: label }), _jsx(Button, { variant: "ghost", onClick: () => onChange(randomHex()), style: randomBtnStyle, title: randomLabel, children: "\u21BB" })] })] }));
+    return (_jsxs("div", { style: rowStyle, children: [_jsx("label", { style: labelStyle, children: label }), _jsxs("div", { style: controlsStyle, children: [_jsx("code", { style: hexStyle, children: value }), _jsx(ColorPicker, { value: value, onChange: onChange, ariaLabel: label }), _jsx(Button, { variant: "ghost", color: "--color-text-muted", onClick: () => onChange(randomHex()), style: randomBtnStyle, title: randomLabel, children: "\u21BB" })] })] }));
 }
 const rowStyle = {
     display: "flex",

package/dist/components/ConfirmDeleteButton.d.ts

@@ -1,13 +1,16 @@
 import type { CSSProperties } from "react";
+import type { ThemeColorVar } from "./Button.js";
 type Props = {
     onConfirm: () => void;
     label?: string;
     confirmLabel?: string;
+    /** Theme variable used by the button, as for `Button`. Defaults to `"--color-primary"`. */
+    color?: ThemeColorVar;
     className?: string;
     style?: CSSProperties;
     /** Delay in ms before the confirm state auto-resets (default: 10000) */
     resetDelay?: number;
 };
-export default function ConfirmDeleteButton({ onConfirm, label, confirmLabel, className, style, resetDelay, }: Props): import("react").JSX.Element;
+export default function ConfirmDeleteButton({ onConfirm, label, confirmLabel, color, className, style, resetDelay, }: Props): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=ConfirmDeleteButton.d.ts.map

package/dist/components/ConfirmDeleteButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDeleteButton.d.ts","sourceRoot":"","sources":["../../src/components/ConfirmDeleteButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAG1C,KAAK,KAAK,GAAG;IACX,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,SAAS,EACT,KAAgB,EAChB,YAA8B,EAC9B,SAAS,EACT,KAAK,EACL,UAAmB,GACpB,EAAE,KAAK,+BAgCP"}
+{"version":3,"file":"ConfirmDeleteButton.d.ts","sourceRoot":"","sources":["../../src/components/ConfirmDeleteButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAEhD,KAAK,KAAK,GAAG;IACX,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,SAAS,EACT,KAAgB,EAChB,YAA8B,EAC9B,KAAyB,EACzB,SAAS,EACT,KAAK,EACL,UAAmB,GACpB,EAAE,KAAK,+BA4BP"}

package/dist/components/ConfirmDeleteButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Button } from "./Button.js";
-export default function ConfirmDeleteButton({ onConfirm, label = "Delete", confirmLabel = "Are you sure?", className, style, resetDelay = 10000, }) {
+export default function ConfirmDeleteButton({ onConfirm, label = "Delete", confirmLabel = "Are you sure?", color = "--color-primary", className, style, resetDelay = 10000, }) {
     const [confirming, setConfirming] = useState(false);
     useEffect(() => {
         if (!confirming)
@@ -16,10 +16,9 @@ export default function ConfirmDeleteButton({ onConfirm, label = "Delete", confi
         }
         onConfirm();
     };
-    return (_jsx(Button, { variant: "ghost", onClick: handleClick, className: className, style: {
-            color: "var(--color-danger)",
-            borderColor: "var(--color-danger)",
-            backgroundColor: confirming ? "var(--color-danger-soft)" : "transparent",
-            ...style,
-        }, children: confirming ? confirmLabel : label }));
+    return (_jsx(Button, { variant: "outline", color: color, onClick: handleClick, className: className, style: confirming ? { ...confirmingStyle, ...style } : style, children: confirming ? confirmLabel : label }));
 }
+// Soft tint of the button color, read from the variable Button sets.
+const confirmingStyle = {
+    backgroundColor: "color-mix(in srgb, var(--rui-btn-color) 12%, transparent)",
+};

package/dist/components/Drawer.d.ts

@@ -0,0 +1,33 @@
+import type { CSSProperties, ReactNode } from "react";
+export type DrawerSide = "left" | "right" | "top" | "bottom";
+/**
+ * - `fixed`: always open, in the page flow.
+ * - `hover`: a rail in the flow that expands over the page while hovered or focused.
+ * - `manual`: opened and closed by call only (`openDrawer` / `closeDrawer` / `toggleDrawer`), over the page.
+ * - `hover-manual`: both; opened by call it stays pinned until closed by call.
+ */
+export type DrawerMode = "fixed" | "hover" | "manual" | "hover-manual";
+type DrawerProps = {
+    id: string;
+    /** Defaults to `"left"`. */
+    side?: DrawerSide;
+    /** Defaults to `"manual"`. */
+    mode?: DrawerMode;
+    /** Width for left / right, height for top / bottom. Numbers are pixels. Defaults to 320. */
+    size?: string | number;
+    /** Rail size in `hover` / `hover-manual` modes. Numbers are pixels. Defaults to 56. */
+    collapsedSize?: string | number;
+    /** Controlled mode: the parent owns visibility and calls by id are ignored. */
+    open?: boolean;
+    /** Called when the drawer asks to change state (hover), in controlled mode. */
+    onOpenChange?: (open: boolean) => void;
+    /** Delay in ms before a hovered drawer closes once the pointer leaves. Defaults to 200. */
+    closeDelay?: number;
+    ariaLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+};
+export declare function Drawer({ id, side, mode, size, collapsedSize, open, onOpenChange, closeDelay, ariaLabel, className, style, children, }: DrawerProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=Drawer.d.ts.map

package/dist/components/Drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/components/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAc,SAAS,EAAE,MAAM,OAAO,CAAA;AAOjE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAA;AAE5D;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,cAAc,CAAA;AAEtE,KAAK,WAAW,GAAG;IACjB,EAAE,EAAE,MAAM,CAAA;IACV,4BAA4B;IAC5B,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,4FAA4F;IAC5F,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,uFAAuF;IACvF,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B,+EAA+E;IAC/E,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,+EAA+E;IAC/E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,2FAA2F;IAC3F,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,IAAa,EACb,IAAe,EACf,IAAU,EACV,aAAkB,EAClB,IAAI,EACJ,YAAY,EACZ,UAAgB,EAChB,SAAS,EACT,SAAS,EACT,KAAK,EACL,QAAQ,GACT,EAAE,WAAW,sCA+Eb"}

package/dist/components/Drawer.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useOverlayStack } from "@-reddacted-/react-hooks";
+import { toLength } from "../style/toLength.js";
+import { useStyle } from "../style/useStyle.js";
+import { useDrawer } from "./drawerStore.js";
+export function Drawer({ id, side = "left", mode = "manual", size = 320, collapsedSize = 56, open, onOpenChange, closeDelay = 200, ariaLabel, className, style, children, }) {
+    useStyle("drawer", drawerCss);
+    const controlled = open !== undefined;
+    const hoverable = mode === "hover" || mode === "hover-manual";
+    const callable = mode === "manual" || mode === "hover-manual";
+    const { isOpen: openByCall } = useDrawer(id);
+    const [hovered, setHovered] = useState(false);
+    // Controlled hover-manual: remembers that the parent opened the drawer because of the
+    // hover, so leaving only closes what the hover opened.
+    const openedByHover = useRef(false);
+    const closeTimer = useRef();
+    const isOpen = mode === "fixed" || (controlled ? open : (callable && openByCall) || (hoverable && hovered));
+    const { zIndex } = useOverlayStack(isOpen && mode !== "fixed");
+    useEffect(() => () => clearTimeout(closeTimer.current), []);
+    const enter = () => {
+        clearTimeout(closeTimer.current);
+        if (!controlled) {
+            setHovered(true);
+        }
+        else if (!open) {
+            openedByHover.current = true;
+            onOpenChange?.(true);
+        }
+    };
+    const leave = () => {
+        clearTimeout(closeTimer.current);
+        closeTimer.current = setTimeout(() => {
+            if (!controlled) {
+                setHovered(false);
+            }
+            else if (mode === "hover" || openedByHover.current) {
+                openedByHover.current = false;
+                onOpenChange?.(false);
+            }
+        }, closeDelay);
+    };
+    // Focus moving between children of the drawer is not a leave.
+    const blur = (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget))
+            leave();
+    };
+    const sizeVars = {
+        "--rui-drawer-size": toLength(size),
+        "--rui-drawer-collapsed": toLength(collapsedSize),
+    };
+    const aside = (_jsx("aside", { className: className ? `rui-drawer ${className}` : "rui-drawer", "data-side": side, "data-mode": mode, "data-open": isOpen || undefined, "aria-label": ariaLabel, style: { ...sizeVars, ...(isOpen && mode !== "fixed" ? { zIndex } : undefined), ...style }, onMouseEnter: hoverable ? enter : undefined, onMouseLeave: hoverable ? leave : undefined, onFocus: hoverable ? enter : undefined, onBlur: hoverable ? blur : undefined, children: children }));
+    if (mode === "manual")
+        return isOpen ? createPortal(aside, document.body) : null;
+    if (hoverable) {
+        return (_jsx("div", { className: "rui-drawer-rail", "data-side": side, style: sizeVars, children: aside }));
+    }
+    return aside;
+}
+// Every selector is wrapped in :where() so it has zero specificity:
+// any class or style set by the consuming project wins without !important.
+const drawerCss = `
+:where(.rui-drawer) {
+  box-sizing: border-box;
+  overflow: auto;
+  background-color: var(--color-surface);
+}
+:where(.rui-drawer[data-side="left"]) { border-right: 1px solid var(--color-border); }
+:where(.rui-drawer[data-side="right"]) { border-left: 1px solid var(--color-border); }
+:where(.rui-drawer[data-side="top"]) { border-bottom: 1px solid var(--color-border); }
+:where(.rui-drawer[data-side="bottom"]) { border-top: 1px solid var(--color-border); }
+:where(.rui-drawer[data-side="left"], .rui-drawer[data-side="right"]) { width: var(--rui-drawer-size); }
+:where(.rui-drawer[data-side="top"], .rui-drawer[data-side="bottom"]) { height: var(--rui-drawer-size); }
+:where(.rui-drawer[data-mode="fixed"]) { flex-shrink: 0; }
+
+:where(.rui-drawer[data-mode="manual"]) {
+  position: fixed;
+  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-text) 15%, transparent);
+  animation: 180ms ease-out both;
+}
+:where(.rui-drawer[data-mode="manual"][data-side="left"]) { top: 0; bottom: 0; left: 0; animation-name: rui-drawer-in-left; }
+:where(.rui-drawer[data-mode="manual"][data-side="right"]) { top: 0; bottom: 0; right: 0; animation-name: rui-drawer-in-right; }
+:where(.rui-drawer[data-mode="manual"][data-side="top"]) { top: 0; left: 0; right: 0; animation-name: rui-drawer-in-top; }
+:where(.rui-drawer[data-mode="manual"][data-side="bottom"]) { bottom: 0; left: 0; right: 0; animation-name: rui-drawer-in-bottom; }
+
+:where(.rui-drawer-rail) {
+  position: relative;
+  flex-shrink: 0;
+}
+:where(.rui-drawer-rail[data-side="left"], .rui-drawer-rail[data-side="right"]) { width: var(--rui-drawer-collapsed); }
+:where(.rui-drawer-rail[data-side="top"], .rui-drawer-rail[data-side="bottom"]) { height: var(--rui-drawer-collapsed); }
+:where(.rui-drawer-rail > .rui-drawer) {
+  position: absolute;
+  overflow: hidden;
+  transition: width 150ms ease-out, height 150ms ease-out;
+}
+:where(.rui-drawer-rail > .rui-drawer[data-side="left"]) { top: 0; bottom: 0; left: 0; width: var(--rui-drawer-collapsed); }
+:where(.rui-drawer-rail > .rui-drawer[data-side="right"]) { top: 0; bottom: 0; right: 0; width: var(--rui-drawer-collapsed); }
+:where(.rui-drawer-rail > .rui-drawer[data-side="top"]) { top: 0; left: 0; right: 0; height: var(--rui-drawer-collapsed); }
+:where(.rui-drawer-rail > .rui-drawer[data-side="bottom"]) { bottom: 0; left: 0; right: 0; height: var(--rui-drawer-collapsed); }
+:where(.rui-drawer-rail > .rui-drawer[data-open]) {
+  overflow: auto;
+  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-text) 15%, transparent);
+}
+:where(.rui-drawer-rail > .rui-drawer[data-open][data-side="left"], .rui-drawer-rail > .rui-drawer[data-open][data-side="right"]) {
+  width: var(--rui-drawer-size);
+}
+:where(.rui-drawer-rail > .rui-drawer[data-open][data-side="top"], .rui-drawer-rail > .rui-drawer[data-open][data-side="bottom"]) {
+  height: var(--rui-drawer-size);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where(.rui-drawer, .rui-drawer-rail > .rui-drawer) {
+    animation: none;
+    transition: none;
+  }
+}
+@keyframes rui-drawer-in-left { from { transform: translateX(-100%); } }
+@keyframes rui-drawer-in-right { from { transform: translateX(100%); } }
+@keyframes rui-drawer-in-top { from { transform: translateY(-100%); } }
+@keyframes rui-drawer-in-bottom { from { transform: translateY(100%); } }
+`;

package/dist/components/DropdownMenu.d.ts

@@ -0,0 +1,61 @@
+import type { HTMLAttributes, MouseEvent, ReactElement, ReactNode } from "react";
+import type { TooltipPlacement } from "../tooltip/tooltipEngine.js";
+type DropdownMenuProps = {
+    /** Defaults to `"click"`. On touch, `"hover"` behaves like `"click"`. */
+    trigger?: "click" | "hover";
+    /** Flips and shifts by itself when there is no room. Defaults to `"bottom-start"`. */
+    placement?: TooltipPlacement;
+    /** Controlled mode. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Delay in ms before closing once the pointer left both trigger and menu (`hover`). Defaults to 200. */
+    closeDelay?: number;
+    /** Hovered / focused item tint and indicators. `"--color-x"` reads the theme variable. Defaults to `"--color-primary"`. */
+    color?: string;
+    children: ReactNode;
+};
+export declare function DropdownMenu({ trigger, placement, open: controlledOpen, defaultOpen, onOpenChange, closeDelay, color, children, }: DropdownMenuProps): import("react").JSX.Element;
+export declare namespace DropdownMenu {
+    var Trigger: ({ children }: {
+        children: ReactElement;
+    }) => ReactElement<ChildProps, string | import("react").JSXElementConstructor<any>>;
+    var Content: ({ minWidth, className, style, onKeyDown, children, ...props }: ContentProps) => import("react").ReactPortal | null;
+    var Item: ({ disabled, closeOnSelect, textValue, onSelect, asChild, className, children, ...props }: ItemProps) => import("react").JSX.Element;
+    var CheckboxItem: ({ disabled, closeOnSelect, textValue, checked, onCheckedChange, className, children, ...props }: CheckboxItemProps) => import("react").JSX.Element;
+    var RadioGroup: ({ value, onValueChange, ...props }: RadioGroupProps) => import("react").JSX.Element;
+    var RadioItem: ({ value, disabled, closeOnSelect, textValue, className, children, ...props }: RadioItemProps) => import("react").JSX.Element;
+    var Label: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+    var Separator: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react").JSX.Element;
+}
+type ChildProps = HTMLAttributes<HTMLElement>;
+type ContentProps = HTMLAttributes<HTMLDivElement> & {
+    /** Numbers are pixels. Defaults to the trigger's width. */
+    minWidth?: string | number;
+};
+type ItemBaseProps = {
+    disabled?: boolean;
+    /** Defaults to true. */
+    closeOnSelect?: boolean;
+    /** Text used by typeahead when the content is not plain text. */
+    textValue?: string;
+};
+type ItemProps = ItemBaseProps & Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> & {
+    /** Call `event.preventDefault()` to keep the menu open. */
+    onSelect?: (event: MouseEvent<HTMLElement>) => void;
+    /** Renders the single child (a link, a router Link…) as the item. */
+    asChild?: boolean;
+};
+type CheckboxItemProps = ItemBaseProps & HTMLAttributes<HTMLDivElement> & {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+};
+type RadioGroupProps = HTMLAttributes<HTMLDivElement> & {
+    value: string | undefined;
+    onValueChange: (value: string) => void;
+};
+type RadioItemProps = ItemBaseProps & HTMLAttributes<HTMLDivElement> & {
+    value: string;
+};
+export {};
+//# sourceMappingURL=DropdownMenu.d.ts.map

package/dist/components/DropdownMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/components/DropdownMenu.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAEV,cAAc,EAEd,UAAU,EAEV,YAAY,EACZ,SAAS,EAEV,MAAM,OAAO,CAAA;AAQd,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAyCnE,KAAK,iBAAiB,GAAG;IACvB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAC3B,sFAAsF;IACtF,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,uBAAuB;IACvB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,yGAAyG;IACzG,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2HAA2H;IAC3H,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAiB,EACjB,SAA0B,EAC1B,IAAI,EAAE,cAAc,EACpB,WAAmB,EACnB,YAAY,EACZ,UAAgB,EAChB,KAAyB,EACzB,QAAQ,GACT,EAAE,iBAAiB,+BAyDnB;yBAlEe,YAAY;gCAuEG;QAAE,QAAQ,EAAE,YAAY,CAAA;KAAE;iFA+DuB,YAAY;yGAmKY,SAAS;wHAqC9G,iBAAiB;yDAyBoC,eAAe;kGAU0B,cAAc;yCAqBvE,cAAc,CAAC,cAAc,CAAC;6CAI1B,cAAc,CAAC,cAAc,CAAC;;AAtU1E,KAAK,UAAU,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;AA6D7C,KAAK,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACnD,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC3B,CAAA;AAyHD,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wBAAwB;IACxB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA8BD,KAAK,SAAS,GAAG,aAAa,GAC5B,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACjD,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAA;IACnD,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAwBH,KAAK,iBAAiB,GAAG,aAAa,GACpC,cAAc,CAAC,cAAc,CAAC,GAAG;IAC/B,OAAO,EAAE,OAAO,CAAA;IAChB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAC5C,CAAA;AA+BH,KAAK,eAAe,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACtD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACvC,CAAA;AAUD,KAAK,cAAc,GAAG,aAAa,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA"}