@cronus-ui/ui 0.6.0 → 0.6.1

package/dist/components/invite-dialog.d.ts

@@ -0,0 +1,62 @@
+import { type ComponentPropsWithoutRef, type ReactNode, type Ref } from "react";
+import { DialogContent } from "./dialog.js";
+export interface InviteDialogLabels {
+    title?: string;
+    description?: string;
+    email?: string;
+    emailPlaceholder?: string;
+    role?: string;
+    send?: string;
+    cancel?: string;
+    sending?: string;
+    errorFallback?: string;
+}
+export interface InviteRole {
+    value: string;
+    label: string;
+}
+export interface InviteDialogProps extends Omit<ComponentPropsWithoutRef<typeof DialogContent>, "title" | "children"> {
+    /** Element that opens the dialog. Rendered inside a `DialogTrigger asChild`. Omit when driving the dialog purely via `open`. */
+    trigger?: ReactNode;
+    /** Controlled open state. Provide alongside `onOpenChange` to control the dialog externally. */
+    open?: boolean;
+    /** Uncontrolled initial open state. @default false */
+    defaultOpen?: boolean;
+    /** Called whenever the open state changes. Dismissal is suppressed while an invite promise is pending. */
+    onOpenChange?: (open: boolean) => void;
+    /** Roles offered in the select. Defaults to Member and Admin. */
+    roles?: readonly InviteRole[];
+    /** Initially selected role `value`. Falls back to the first role. */
+    defaultRole?: string;
+    /**
+     * Invoked with the submitted email and role. If it returns a promise, the send
+     * button shows a spinner and actions are disabled until it settles; on resolve
+     * the dialog closes, on reject it stays open and surfaces the error.
+     */
+    onInvite?: (payload: {
+        email: string;
+        role: string;
+    }) => void | Promise<void>;
+    /** Override any subset of the built-in English strings. */
+    labels?: InviteDialogLabels;
+    /** Forwarded to the dialog content surface. */
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * An ergonomic invite dialog for adding a member by email and role, composed
+ * on top of the accessible `Dialog` primitive (focus trap, overlay, Escape).
+ *
+ * Behavior: `onInvite` may be async — while its promise is pending the send
+ * button shows a `Spinner`, both actions are disabled, and the dialog cannot be
+ * dismissed so the operation can't be interrupted mid-flight. On resolve the
+ * dialog closes; on reject it stays open and renders the error in a
+ * `role="alert"` region. Works controlled (`open`/`onOpenChange`) or
+ * uncontrolled (`defaultOpen`).
+ *
+ * Performance/a11y: late promise settlements are ignored after unmount via a
+ * mounted ref. The spinner is decorative (`aria-hidden`) with loading state
+ * conveyed through `aria-busy`. All entrance/exit motion is owned by the
+ * underlying primitive and degrades under `prefers-reduced-motion`.
+ */
+export declare function InviteDialog({ trigger, open, defaultOpen, onOpenChange, roles, defaultRole, onInvite, labels, className, ref, ...contentProps }: InviteDialogProps): import("react").JSX.Element;
+//# sourceMappingURL=invite-dialog.d.ts.map

package/dist/components/invite-dialog.js

@@ -0,0 +1,141 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleAlert } from "lucide-react";
+import { useCallback, useEffect, useId, useRef, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "./dialog.js";
+import { Field, FieldLabel } from "./field.js";
+import { Input } from "./input.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
+import { Spinner } from "./spinner.js";
+const DEFAULT_LABELS = {
+    title: "Invite member",
+    description: "Send an invitation to join this workspace.",
+    email: "Email",
+    emailPlaceholder: "name@example.com",
+    role: "Role",
+    send: "Send invite",
+    cancel: "Cancel",
+    sending: "Sending",
+    errorFallback: "Something went wrong. Please try again.",
+};
+const DEFAULT_ROLES = [
+    { value: "member", label: "Member" },
+    { value: "admin", label: "Admin" },
+];
+function resolveErrorMessage(error, fallback) {
+    if (error instanceof Error && error.message) {
+        return error.message;
+    }
+    if (typeof error === "string" && error) {
+        return error;
+    }
+    return fallback;
+}
+function resolveRoles(roles) {
+    return roles && roles.length > 0 ? roles : DEFAULT_ROLES;
+}
+function resolveDefaultRole(roles, defaultRole) {
+    if (defaultRole && roles.some((role) => role.value === defaultRole)) {
+        return defaultRole;
+    }
+    return roles[0]?.value ?? "";
+}
+/**
+ * An ergonomic invite dialog for adding a member by email and role, composed
+ * on top of the accessible `Dialog` primitive (focus trap, overlay, Escape).
+ *
+ * Behavior: `onInvite` may be async — while its promise is pending the send
+ * button shows a `Spinner`, both actions are disabled, and the dialog cannot be
+ * dismissed so the operation can't be interrupted mid-flight. On resolve the
+ * dialog closes; on reject it stays open and renders the error in a
+ * `role="alert"` region. Works controlled (`open`/`onOpenChange`) or
+ * uncontrolled (`defaultOpen`).
+ *
+ * Performance/a11y: late promise settlements are ignored after unmount via a
+ * mounted ref. The spinner is decorative (`aria-hidden`) with loading state
+ * conveyed through `aria-busy`. All entrance/exit motion is owned by the
+ * underlying primitive and degrades under `prefers-reduced-motion`.
+ */
+export function InviteDialog({ trigger, open, defaultOpen, onOpenChange, roles, defaultRole, onInvite, labels, className, ref, ...contentProps }) {
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const resolvedRoles = resolveRoles(roles);
+    const initialRole = resolveDefaultRole(resolvedRoles, defaultRole);
+    const isControlled = open !== undefined;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);
+    const isOpen = isControlled ? open : uncontrolledOpen;
+    const [email, setEmail] = useState("");
+    const [role, setRole] = useState(initialRole);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const loadingRef = useRef(false);
+    const mountedRef = useRef(true);
+    const emailId = useId();
+    const roleId = useId();
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    const setOpen = useCallback((next) => {
+        if (!isControlled) {
+            setUncontrolledOpen(next);
+        }
+        onOpenChange?.(next);
+    }, [isControlled, onOpenChange]);
+    const handleOpenChange = useCallback((next) => {
+        if (loadingRef.current && !next) {
+            return;
+        }
+        if (next) {
+            setError(null);
+            setEmail("");
+            setRole(initialRole);
+        }
+        setOpen(next);
+    }, [initialRole, setOpen]);
+    const beginLoading = useCallback((value) => {
+        loadingRef.current = value;
+        setLoading(value);
+    }, []);
+    const handleSubmit = useCallback(async (event) => {
+        event.preventDefault();
+        if (loadingRef.current) {
+            return;
+        }
+        const trimmed = email.trim();
+        if (!trimmed) {
+            return;
+        }
+        setError(null);
+        if (!onInvite) {
+            setOpen(false);
+            return;
+        }
+        const result = onInvite({ email: trimmed, role });
+        if (!(result instanceof Promise)) {
+            setOpen(false);
+            return;
+        }
+        beginLoading(true);
+        try {
+            await result;
+            if (!mountedRef.current) {
+                return;
+            }
+            beginLoading(false);
+            setOpen(false);
+        }
+        catch (err) {
+            if (!mountedRef.current) {
+                return;
+            }
+            beginLoading(false);
+            setError(resolveErrorMessage(err, resolvedLabels.errorFallback));
+        }
+    }, [beginLoading, email, onInvite, resolvedLabels.errorFallback, role, setOpen]);
+    return (_jsxs(Dialog, { open: isOpen, onOpenChange: handleOpenChange, children: [trigger ? _jsx(DialogTrigger, { asChild: true, children: trigger }) : null, _jsxs(DialogContent, { ref: ref, "data-slot": "invite-dialog", className: cn("max-w-md", className), ...contentProps, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: resolvedLabels.title }), resolvedLabels.description ? (_jsx(DialogDescription, { children: resolvedLabels.description })) : null] }), _jsxs("form", { className: "flex flex-col gap-4", onSubmit: handleSubmit, children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: emailId, children: resolvedLabels.email }), _jsx(Input, { id: emailId, type: "email", name: "email", autoComplete: "email", required: true, value: email, onChange: (event) => setEmail(event.target.value), placeholder: resolvedLabels.emailPlaceholder, disabled: loading })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: roleId, children: resolvedLabels.role }), _jsxs(Select, { value: role, onValueChange: setRole, disabled: loading, children: [_jsx(SelectTrigger, { id: roleId, children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: resolvedRoles.map((item) => (_jsx(SelectItem, { value: item.value, children: item.label }, item.value))) })] })] }), error ? (_jsxs("div", { role: "alert", "data-slot": "invite-dialog-error", className: "flex items-start gap-2 rounded-lg border border-error/30 bg-error/10 px-3 py-2 text-start text-sm text-error-strong", children: [_jsx(CircleAlert, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0" }), _jsx("span", { children: error })] })) : null, _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", disabled: loading, onClick: () => handleOpenChange(false), children: resolvedLabels.cancel }), _jsxs(Button, { type: "submit", "data-slot": "invite-dialog-send", disabled: loading, "aria-busy": loading, className: "min-w-24", children: [loading ? _jsx(Spinner, { size: "sm", "aria-hidden": true }) : null, loading ? resolvedLabels.sending : resolvedLabels.send] })] })] })] })] }));
+}
+//# sourceMappingURL=invite-dialog.js.map

package/dist/components/workspace-switcher.d.ts

@@ -0,0 +1,36 @@
+import { type Ref } from "react";
+export interface WorkspaceItem {
+    id: string;
+    name: string;
+    initials?: string;
+    image?: string;
+}
+export interface WorkspaceSwitcherLabels {
+    /** Accessible name for the trigger. @default "Switch workspace" */
+    label?: string;
+}
+export interface WorkspaceSwitcherProps {
+    workspaces: readonly WorkspaceItem[];
+    /** Controlled selected workspace id. Pair with `onValueChange`. */
+    value?: string;
+    /** Uncontrolled initial workspace id. Defaults to the first workspace. */
+    defaultValue?: string;
+    /** Called with the selected workspace id. */
+    onValueChange?: (id: string) => void;
+    /** Override any subset of the built-in English strings. */
+    labels?: WorkspaceSwitcherLabels;
+    className?: string;
+    /** Forwarded to the trigger button. */
+    ref?: Ref<HTMLButtonElement>;
+}
+/**
+ * Compact workspace/org switcher for app chrome. The trigger shows the current
+ * workspace avatar, name, and a chevron; the menu lists every workspace with
+ * the selected row marked as a radio item (`menuitemradio`).
+ *
+ * Controlled via `value`/`onValueChange` or uncontrolled via `defaultValue`.
+ * Renders nothing when `workspaces` is empty. Keyboard access is owned by the
+ * underlying (non-modal) dropdown menu.
+ */
+export declare function WorkspaceSwitcher({ workspaces, value, defaultValue, onValueChange, labels, className, ref, }: WorkspaceSwitcherProps): import("react").JSX.Element | null;
+//# sourceMappingURL=workspace-switcher.d.ts.map

package/dist/components/workspace-switcher.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronsUpDown } from "lucide-react";
+import { useCallback, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "./dropdown-menu.js";
+const DEFAULT_LABELS = {
+    label: "Switch workspace",
+};
+function workspaceInitials(workspace) {
+    if (workspace.initials) {
+        return workspace.initials;
+    }
+    const parts = workspace.name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length >= 2) {
+        const first = parts[0]?.[0] ?? "";
+        const second = parts[1]?.[0] ?? "";
+        return `${first}${second}`.toUpperCase();
+    }
+    return workspace.name.slice(0, 2).toUpperCase();
+}
+/**
+ * Compact workspace/org switcher for app chrome. The trigger shows the current
+ * workspace avatar, name, and a chevron; the menu lists every workspace with
+ * the selected row marked as a radio item (`menuitemradio`).
+ *
+ * Controlled via `value`/`onValueChange` or uncontrolled via `defaultValue`.
+ * Renders nothing when `workspaces` is empty. Keyboard access is owned by the
+ * underlying (non-modal) dropdown menu.
+ */
+export function WorkspaceSwitcher({ workspaces, value, defaultValue, onValueChange, labels, className, ref, }) {
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const isControlled = value !== undefined;
+    const [uncontrolled, setUncontrolled] = useState(() => defaultValue ?? workspaces[0]?.id ?? "");
+    const selectedId = isControlled ? value : uncontrolled;
+    const handleChange = useCallback((id) => {
+        if (!isControlled) {
+            setUncontrolled(id);
+        }
+        onValueChange?.(id);
+    }, [isControlled, onValueChange]);
+    if (workspaces.length === 0) {
+        return null;
+    }
+    const current = workspaces.find((workspace) => workspace.id === selectedId) ?? workspaces[0];
+    if (!current) {
+        return null;
+    }
+    const triggerLabel = `${resolvedLabels.label}, ${current.name}`;
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { ref: ref, type: "button", "data-slot": "workspace-switcher", "aria-label": triggerLabel, className: cn("flex w-full min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-fg outline-none hover:bg-surface-overlay focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base disabled:pointer-events-none disabled:opacity-50", className), children: [_jsx(WorkspaceAvatar, { workspace: current }), _jsx("span", { className: "min-w-0 flex-1 truncate text-start font-medium", children: current.name }), _jsx(ChevronsUpDown, { className: "size-4 shrink-0 text-fg-tertiary", "aria-hidden": true })] }) }), _jsx(DropdownMenuContent, { "data-slot": "workspace-switcher-content", align: "start", className: "min-w-56", children: _jsx(DropdownMenuRadioGroup, { value: current.id, onValueChange: handleChange, children: workspaces.map((workspace) => (_jsxs(DropdownMenuRadioItem, { value: workspace.id, className: "gap-2", children: [_jsx(WorkspaceAvatar, { workspace: workspace }), _jsx("span", { className: "min-w-0 flex-1 truncate text-start", children: workspace.name })] }, workspace.id))) }) })] }));
+}
+function WorkspaceAvatar({ workspace }) {
+    return (_jsxs(Avatar, { className: "size-6", children: [workspace.image ? _jsx(AvatarImage, { src: workspace.image, alt: "" }) : null, _jsx(AvatarFallback, { className: "text-xs", children: workspaceInitials(workspace) })] }));
+}
+//# sourceMappingURL=workspace-switcher.js.map

package/dist/index.d.ts

@@ -142,6 +142,8 @@ export { Input } from "./components/input.js";
 export type { InputGroupAddonProps, InputGroupProps } from "./components/input-group.js";
 export { InputGroup, InputGroupAddon } from "./components/input-group.js";
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, } from "./components/input-otp.js";
+export type { InviteDialogLabels, InviteDialogProps, InviteRole, } from "./components/invite-dialog.js";
+export { InviteDialog } from "./components/invite-dialog.js";
 export type { JsonViewerProps } from "./components/json-viewer.js";
 export { JsonViewer } from "./components/json-viewer.js";
 export type { KanbanColumn, KanbanItem, KanbanProps } from "./components/kanban.js";
@@ -302,5 +304,7 @@ export type { VideoPlayerLabels, VideoPlayerProps } from "./components/video-pla
 export { VideoPlayer, videoPlayerVariants } from "./components/video-player.js";
 export type { WordRotateProps } from "./components/word-rotate.js";
 export { WordRotate } from "./components/word-rotate.js";
+export type { WorkspaceItem, WorkspaceSwitcherLabels, WorkspaceSwitcherProps, } from "./components/workspace-switcher.js";
+export { WorkspaceSwitcher } from "./components/workspace-switcher.js";
 export { cn } from "./lib/cn.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -85,6 +85,7 @@ export { ImageZoom, imageZoomVariants } from "./components/image-zoom.js";
 export { Input } from "./components/input.js";
 export { InputGroup, InputGroupAddon } from "./components/input-group.js";
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, } from "./components/input-otp.js";
+export { InviteDialog } from "./components/invite-dialog.js";
 export { JsonViewer } from "./components/json-viewer.js";
 export { Kanban } from "./components/kanban.js";
 export { Kbd } from "./components/kbd.js";
@@ -175,5 +176,6 @@ export { TypingText } from "./components/typing-text.js";
 export { UsageMeter, UsageMeterCircular, UsageMeterLinear } from "./components/usage-meter.js";
 export { VideoPlayer, videoPlayerVariants } from "./components/video-player.js";
 export { WordRotate } from "./components/word-rotate.js";
+export { WorkspaceSwitcher } from "./components/workspace-switcher.js";
 export { cn } from "./lib/cn.js";
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronus-ui/ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Cronus UI — themeable, accessible React components (Radix + CVA + Tailwind v4).",
   "type": "module",
   "exports": {
@@ -316,6 +316,10 @@
       "types": "./dist/components/input-otp.d.ts",
       "import": "./dist/components/input-otp.js"
     },
+    "./invite-dialog": {
+      "types": "./dist/components/invite-dialog.d.ts",
+      "import": "./dist/components/invite-dialog.js"
+    },
     "./json-viewer": {
       "types": "./dist/components/json-viewer.d.ts",
       "import": "./dist/components/json-viewer.js"
@@ -668,6 +672,10 @@
       "types": "./dist/components/word-rotate.d.ts",
       "import": "./dist/components/word-rotate.js"
     },
+    "./workspace-switcher": {
+      "types": "./dist/components/workspace-switcher.d.ts",
+      "import": "./dist/components/workspace-switcher.js"
+    },
     "./package.json": "./package.json"
   },
   "main": "./dist/index.js",
@@ -747,7 +755,7 @@
     "vaul": "^1.1.2"
   },
   "peerDependencies": {
-    "@cronus-ui/theme": "0.6.0",
+    "@cronus-ui/theme": "0.6.1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -891,7 +899,7 @@
     }
   },
   "devDependencies": {
-    "@cronus-ui/theme": "0.6.0",
+    "@cronus-ui/theme": "0.6.1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",