@ciridae/ui 0.16.1 → 1.0.1

package/dist/components/status-banner.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircleIcon, InfoIcon, WarningCircleIcon, XIcon } from "@phosphor-icons/react";
+import { cva, css, cx } from "#primitives/css";
+import { icon } from "./icon.js";
+import { useCiridaeLocale } from "./locale.js";
+/*
+ * A status message in two weights. `inline` is a quiet line: no box, the tone in the icon alone,
+ * the message, its detail running on after it, and an action as a link at the end. `filled` is
+ * the soft-fill box for a state that blocks the reader, such as a failed request: the tone's wash
+ * behind it and its color in the text and icon. A `danger` banner is filled unless it says not.
+ */
+const banner = cva({
+    base: {
+        position: "relative",
+        display: "flex",
+        alignItems: "flex-start",
+        gap: "layout.controlGap",
+        width: "100%",
+        color: "fg.primary",
+        fontSize: "body",
+        lineHeight: "compact",
+        letterSpacing: "compact",
+    },
+    variants: {
+        emphasis: {
+            inline: { paddingBlock: "control.compactBlock" },
+            filled: {
+                paddingBlock: "control.block",
+                paddingInline: "control.compactInline",
+                borderRadius: "action",
+            },
+        },
+        tone: { neutral: {}, info: {}, success: {}, warning: {}, danger: {} },
+    },
+    compoundVariants: [
+        { emphasis: "filled", tone: "neutral", css: { background: "bg.hover" } },
+        {
+            emphasis: "filled",
+            tone: "info",
+            css: { background: "bg.infoSubtle", color: "accent.blue" },
+        },
+        {
+            emphasis: "filled",
+            tone: "success",
+            css: { background: "bg.successSubtle", color: "accent.green" },
+        },
+        {
+            emphasis: "filled",
+            tone: "warning",
+            css: { background: "bg.warningSubtle", color: "accent.yellow" },
+        },
+        {
+            emphasis: "filled",
+            tone: "danger",
+            css: { background: "bg.errorSubtle", color: "accent.red" },
+        },
+    ],
+    defaultVariants: { emphasis: "inline", tone: "info" },
+});
+const bannerIcon = cva({
+    base: {
+        display: "inline-flex",
+        flexShrink: "0",
+        // Centred on the first line of text.
+        height: "1lh",
+        alignItems: "center",
+    },
+    variants: {
+        tone: {
+            neutral: { color: "fg.muted" },
+            info: { color: "accent.blue" },
+            success: { color: "accent.green" },
+            warning: { color: "accent.yellow" },
+            danger: { color: "accent.red" },
+        },
+    },
+    defaultVariants: { tone: "info" },
+});
+const message = css({ flex: "1", minWidth: "0", overflowWrap: "anywhere" });
+const titleStyle = css({ fontWeight: "medium" });
+const detailStyle = css({
+    color: "fg.muted",
+    "[data-emphasis=filled] &": { color: "inherit", opacity: "0.85" },
+});
+// An action reads as a link at the end of the message; a filled banner underlines it.
+const actionStyle = css({
+    display: "inline-flex",
+    marginInlineStart: "control.iconGap",
+    color: "accent.brand",
+    "[data-emphasis=filled] &": { color: "inherit", textDecoration: "underline" },
+    "& :is(a, button)": {
+        padding: "none",
+        height: "auto",
+        border: "0",
+        background: "transparent",
+        color: "inherit",
+        font: "inherit",
+        textDecoration: "inherit",
+        cursor: "pointer",
+    },
+    "& :is(a, button):hover": { textDecoration: "underline" },
+    // A button passed as the action keeps its label and loses its face, hairline included.
+    "& [data-edge]::before": { display: "none" },
+});
+const dismissButton = css({
+    display: "grid",
+    placeItems: "center",
+    flexShrink: "0",
+    width: "control.shortcut",
+    height: "control.shortcut",
+    marginBlock: "calc((1lh - token(sizes.control.shortcut)) / 2)",
+    padding: "none",
+    border: "0",
+    borderRadius: "round",
+    background: "transparent",
+    color: "fg.muted",
+    cursor: "pointer",
+    _hover: { color: "fg.primary", background: "bg.hover" },
+    _focusVisible: { focusRing: "outer" },
+});
+const bannerIcons = {
+    neutral: InfoIcon,
+    info: InfoIcon,
+    success: CheckCircleIcon,
+    warning: WarningCircleIcon,
+    danger: WarningCircleIcon,
+};
+export function StatusBanner({ title, description, tone = "info", emphasis = tone === "danger" ? "filled" : "inline", action, onDismiss, dismissLabel, className, ...props }) {
+    const { labels } = useCiridaeLocale();
+    const BannerIcon = bannerIcons[tone];
+    return (_jsxs("div", { ...props, className: cx(banner({ tone, emphasis }), className), "data-ciridae-ui": "", "data-emphasis": emphasis, role: tone === "danger" ? "alert" : "status", children: [_jsx("span", { className: bannerIcon({ tone }), children: _jsx(BannerIcon, { className: icon({ size: "small" }) }) }), _jsxs("span", { className: message, children: [_jsx("span", { className: titleStyle, children: title }), description && _jsxs("span", { className: detailStyle, children: [" ", description] }), action && _jsx("span", { className: actionStyle, children: action })] }), onDismiss && (_jsx("button", { "aria-label": dismissLabel ?? labels.common.dismiss, className: dismissButton, onClick: onDismiss, type: "button", children: _jsx(XIcon, { className: icon({ size: "small" }) }) }))] }));
+}

package/dist/components/status.d.ts

@@ -0,0 +1,32 @@
+import type { ComponentProps, ReactNode } from "react";
+declare const colors: {
+    readonly default: string;
+    readonly dedicated: string;
+    readonly "needs-review": string;
+    readonly healthy: string;
+    readonly running: string;
+    readonly queued: string;
+    readonly succeeded: string;
+    readonly merged: string;
+    readonly failed: string;
+    readonly pending: string;
+    readonly connecting: string;
+    readonly live: string;
+    readonly archived: string;
+    readonly lite: string;
+};
+export type StatusVariant = keyof typeof colors;
+export type StatusProps = ComponentProps<"span"> & {
+    variant?: StatusVariant;
+    /** Shows only the icon, with the children as its tooltip and accessible name. */
+    iconOnly?: boolean;
+};
+export declare function Status({ variant, iconOnly, className, style, ...props }: StatusProps): import("@types/react").JSX.Element;
+export type PendingTextProps = Omit<ComponentProps<"span">, "children"> & {
+    children: ReactNode;
+    /** `centered` holds the place of a page or panel that is still loading. */
+    placement?: "inline" | "centered";
+};
+/** Work in progress, named: the spinner and a label such as "Signing in…", announced as a status. */
+export declare function PendingText({ children, placement, className, ...props }: PendingTextProps): import("@types/react").JSX.Element;
+export {};

package/dist/components/status.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArchiveIcon, ClockIcon, CubeIcon, FeatherIcon, GitMergeIcon, ShieldCheckIcon, SparkleIcon, SpinnerGapIcon, WarningCircleIcon, WarningIcon, } from "@phosphor-icons/react";
+import { css, cx } from "#primitives/css";
+import { icon, Spinner, spinning } from "./icon.js";
+import { Tooltip } from "./overlays.js";
+const colors = {
+    default: css({ color: "fg.primary" }),
+    dedicated: css({ color: "fg.primary" }),
+    "needs-review": css({ color: "accent.red" }),
+    healthy: css({ color: "accent.green" }),
+    running: css({ color: "accent.blue" }),
+    queued: css({ color: "accent.yellow" }),
+    succeeded: css({ color: "fg.muted" }),
+    merged: css({ color: "fg.muted" }),
+    failed: css({ color: "accent.red" }),
+    pending: css({ color: "accent.yellow" }),
+    connecting: css({ color: "accent.yellow" }),
+    live: css({ color: "accent.green" }),
+    archived: css({ color: "fg.archived" }),
+    lite: css({ color: "fg.muted" }),
+};
+const statusIcons = {
+    default: CubeIcon,
+    dedicated: SparkleIcon,
+    "needs-review": WarningIcon,
+    healthy: ShieldCheckIcon,
+    running: SpinnerGapIcon,
+    queued: ClockIcon,
+    succeeded: null,
+    merged: GitMergeIcon,
+    failed: WarningCircleIcon,
+    pending: ClockIcon,
+    connecting: SpinnerGapIcon,
+    archived: ArchiveIcon,
+    lite: FeatherIcon,
+};
+const indicator = css({
+    width: "indicator.live",
+    height: "indicator.live",
+    flexShrink: "0",
+    borderRadius: "round",
+    backgroundColor: "currentColor",
+});
+const dotBox = css({
+    display: "inline-flex",
+    flexShrink: "0",
+    fontSize: "icon.small",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "1em",
+    height: "1em",
+});
+const liveIndicator = css({
+    boxShadow: "indicator.live",
+    animation: "livePulse 2s ease-in-out infinite",
+    _motionReduce: { animation: "none" },
+});
+const status = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    fontFamily: "sans",
+    fontSize: "body",
+    lineHeight: "tight",
+    letterSpacing: "compact",
+    whiteSpace: "nowrap",
+});
+export function Status({ variant = "default", iconOnly = false, className, style, ...props }) {
+    const { children, ...rest } = props;
+    const StatusIcon = variant === "live" ? null : statusIcons[variant];
+    const dot = (_jsx("span", { "aria-hidden": "true", className: cx(indicator, variant === "live" && liveIndicator) }));
+    const content = (_jsxs("span", { ...rest, className: cx(status, colors[variant], className), style: style, "data-ciridae-ui": "", ...(iconOnly && {
+            role: "img",
+            "aria-label": typeof children === "string" ? children : undefined,
+        }), children: [StatusIcon ? (_jsx(StatusIcon, { className: cx(icon({ size: "small" }), StatusIcon === SpinnerGapIcon && spinning) })) : iconOnly ? (_jsx("span", { className: dotBox, children: dot })) : (dot), !iconOnly && children] }));
+    return iconOnly ? _jsx(Tooltip, { content: children, children: content }) : content;
+}
+const pendingText = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    color: "fg.muted",
+    "&[data-placement=centered]": {
+        display: "flex",
+        justifyContent: "center",
+        width: "100%",
+        minHeight: "emptyState.minimum",
+    },
+});
+/** Work in progress, named: the spinner and a label such as "Signing in…", announced as a status. */
+export function PendingText({ children, placement = "inline", className, ...props }) {
+    return (_jsxs("span", { role: "status", ...props, className: cx(pendingText, className), "data-placement": placement, "data-ciridae-ui": "", children: [_jsx(Spinner, { "aria-hidden": "true" }), children] }));
+}

package/dist/components/steps.d.ts

@@ -0,0 +1,17 @@
+export type StepContent = {
+    title?: string;
+    description: string;
+    imagePath?: string;
+    imageWidth?: number;
+    imageHeight?: number;
+    linkUrl?: string;
+    linkText?: string;
+};
+/**
+ * Numbered instructions, each with an optional link or screenshot, followed by any notes. Readers
+ * jump around instructions rather than walk them, so every step shows at once.
+ */
+export declare function Steps({ steps, notes, }: {
+    steps: readonly StepContent[];
+    notes?: readonly string[];
+}): import("@types/react").JSX.Element;

package/dist/components/steps.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { css } from "#primitives/css";
+import { Link } from "./link.js";
+// A step lays out as a grid, and a grid item draws no list marker, so each step draws its own
+// number in a muted circle beside its content instead of leaving the list's indent empty.
+const list = css({
+    display: "grid",
+    gap: "layout.sectionGap",
+    margin: "none",
+    padding: "none",
+    listStyle: "none",
+    fontSize: "caption",
+});
+const item = css({
+    display: "grid",
+    gridTemplateColumns: "auto minmax(0, 1fr)",
+    columnGap: "layout.contentGap",
+    alignItems: "start",
+});
+const number = css({
+    display: "inline-grid",
+    placeItems: "center",
+    width: "control.mark",
+    height: "control.mark",
+    background: "bg.avatar",
+    borderRadius: "round",
+    color: "fg.primary",
+    fontSize: "caption",
+    fontVariantNumeric: "tabular-nums",
+    lineHeight: "1",
+});
+const content = css({ display: "grid", gap: "layout.controlGap", minWidth: "0" });
+const stepTitle = css({ fontWeight: "medium" });
+const muted = css({ color: "fg.muted", fontSize: "caption" });
+const screenshot = css({
+    display: "block",
+    maxWidth: "100%",
+    maxHeight: "steps.image",
+    width: "auto",
+    height: "auto",
+    objectFit: "contain",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "field",
+});
+/**
+ * Numbered instructions, each with an optional link or screenshot, followed by any notes. Readers
+ * jump around instructions rather than walk them, so every step shows at once.
+ */
+export function Steps({ steps, notes = [], }) {
+    return (_jsxs(_Fragment, { children: [_jsx("ol", { className: list, role: "list", "data-ciridae-ui": "", children: steps.map((step, index) => (_jsxs("li", { className: item, children: [_jsx("span", { className: number, "aria-hidden": "true", children: index + 1 }), _jsxs("div", { className: content, children: [step.title && _jsx("span", { className: stepTitle, children: step.title }), _jsx("span", { className: muted, children: step.description }), step.linkUrl && (_jsx(Link, { href: step.linkUrl, external: true, children: step.linkText ?? step.linkUrl })), step.imagePath && (_jsx("img", { className: screenshot, src: step.imagePath, width: step.imageWidth, height: step.imageHeight, loading: "lazy", alt: step.title ?? "" }))] })] }, step.imagePath ?? `${index}-${step.title ?? ""}`))) }), notes.map((note) => (_jsx("p", { className: muted, children: note }, note)))] }));
+}

package/dist/components/switch.d.ts

@@ -0,0 +1,6 @@
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import type { ComponentProps } from "react";
+export type SwitchProps = Omit<ComponentProps<typeof BaseSwitch.Root>, "className"> & {
+    className?: string;
+};
+export declare function Switch({ className, ...props }: SwitchProps): import("@types/react").JSX.Element;

package/dist/components/switch.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import { css, cx } from "#primitives/css";
+// The Round 2 toggle: a short track two insets wider than its knob, grey off and green on.
+const track = css({
+    display: "inline-flex",
+    alignItems: "center",
+    flexShrink: "0",
+    width: "control.compact",
+    height: "control.toggleTrack",
+    border: "0",
+    borderRadius: "round",
+    padding: "control.trackInset",
+    background: "bg.track",
+    cursor: "pointer",
+    transitionProperty: "background",
+    transitionDuration: "fast",
+    "&[data-checked]": { background: "accent.green" },
+    _focusVisible: { focusRing: "outer" },
+    "&:disabled, &[data-disabled]": { opacity: "disabled", cursor: "not-allowed" },
+});
+const thumb = css({
+    display: "block",
+    width: "control.knob",
+    height: "control.knob",
+    borderRadius: "round",
+    background: "bg.knob",
+    transitionProperty: "transform",
+    transitionDuration: "fast",
+    "&[data-checked]": {
+        transform: "translateX(calc(token(sizes.control.compact) - 2 * token(spacing.control.trackInset) - token(sizes.control.knob)))",
+        _rtl: {
+            transform: "translateX(calc((token(sizes.control.compact) - 2 * token(spacing.control.trackInset) - token(sizes.control.knob)) * -1))",
+        },
+    },
+});
+export function Switch({ className, ...props }) {
+    return (_jsx(BaseSwitch.Root, { ...props, className: cx(track, className), "data-ciridae-ui": "", children: _jsx(BaseSwitch.Thumb, { className: thumb }) }));
+}

package/dist/components/tabs.d.ts

@@ -0,0 +1,48 @@
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import type { ComponentProps, ReactNode } from "react";
+export declare function TabsRoot({ className, ...props }: Omit<ComponentProps<typeof BaseTabs.Root>, "className"> & {
+    className?: string;
+}): import("@types/react").JSX.Element;
+export declare const TabsPanel: import("@types/react").ForwardRefExoticComponent<Omit<import("@base-ui/react").TabsPanelProps, "ref"> & import("@types/react").RefAttributes<HTMLDivElement>>;
+export declare function TabsGroup({ border, className, ...props }: ComponentProps<"span"> & {
+    border?: "control" | "glass";
+}): import("@types/react").JSX.Element;
+export declare function TabsList({ className, variant, overflow: ownOverflow, children, ...props }: Omit<ComponentProps<typeof BaseTabs.List>, "className"> & {
+    className?: string;
+    /**
+     * `contained` sits the tabs in a pill track; `text` is words only; `underline` is words on a
+     * hairline, the open one underlined.
+     */
+    variant?: "plain" | "contained" | "text" | "underline";
+    /**
+     * Past the row's width, `menu` tucks the last tabs into a "more" menu at its end and `scroll`
+     * scrolls the row. `menu` in a `TabsBar`, `scroll` elsewhere.
+     */
+    overflow?: "menu" | "scroll";
+}): import("@types/react").JSX.Element;
+export type TabsTabProps = Omit<ComponentProps<typeof BaseTabs.Tab>, "className"> & {
+    className?: string;
+    /** Tint the tab icon bronze while inactive, as the Projects hub type tabs do. */
+    iconTone?: "bronze";
+    /**
+     * Makes the tab a link to this address, for tabs that each have their own URL; pass a router's
+     * link as `render` instead to navigate through the router.
+     */
+    href?: string;
+    /** Muted after the label, such as how many rows the tab holds. */
+    count?: ReactNode;
+};
+export declare function TabsTab({ className, iconTone, href, render, count: tabCount, children, ...props }: TabsTabProps): import("@types/react").JSX.Element;
+/**
+ * Wraps a page's `TabsBar` and the section below it, so the section can place its controls on the
+ * tab row with `TabsBarActions` while keeping its own state.
+ */
+export declare function TabsBarProvider({ children }: {
+    children: ReactNode;
+}): import("@types/react").JSX.Element;
+/** Section tabs (a `TabsRoot`) with a slot at the end of the row for the open section's controls. */
+export declare function TabsBar({ className, children, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+/** Renders the open section's controls at the end of the nearest `TabsBar` row. */
+export declare function TabsBarActions({ children }: {
+    children: ReactNode;
+}): import("@types/react").ReactPortal | null;