@cerberus-design/react 0.0.0-next-bd980a6d9bd07d60e8d7200bd4d56624754e936c

package/dist/context/navMenu.js

@@ -0,0 +1,42 @@
+"use client";
+"use client";
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
+import { css } from "styled-system/css";
+import { jsx } from "react/jsx-runtime";
+//#region src/context/navMenu.tsx
+var NavMenuContext = createContext(null);
+/**
+* @deprecated use the {@link Menu} family instead
+*/
+function NavMenu(props) {
+	const triggerRef = useRef(null);
+	const menuRef = useRef(null);
+	const [expanded, setExpanded] = useState(false);
+	const handleToggle = useCallback(() => {
+		setExpanded((prev) => !prev);
+	}, []);
+	const value = useMemo(() => ({
+		triggerRef,
+		menuRef,
+		expanded,
+		onToggle: handleToggle
+	}), [expanded, handleToggle]);
+	return /* @__PURE__ */ jsx(NavMenuContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx("nav", {
+			className: css({ position: "relative" }),
+			children: props.children
+		})
+	});
+}
+/**
+* Used to access the nav menu context.
+* @returns The nav menu context.
+*/
+function useNavMenuContext() {
+	const context = useContext(NavMenuContext);
+	if (!context) throw new Error("useNavMenuContext must be used within a NavMenu.");
+	return context;
+}
+//#endregion
+export { NavMenu, useNavMenuContext };

package/dist/context/prompt-modal.cjs

@@ -0,0 +1,206 @@
+"use client";
+"use client";
+const require_show = require("../components/show/show.cjs");
+const require_cerberus = require("./cerberus.cjs");
+const require_avatar = require("../components/avatar/avatar.cjs");
+const require_button = require("../components/button/button.cjs");
+const require_text = require("../components/text/text.cjs");
+const require_parts = require("../components/clipboard/parts.cjs");
+const require_button$1 = require("../components/icon-button/button.cjs");
+const require_primitives = require("../components/dialog/primitives.cjs");
+const require_dialog = require("../components/dialog/dialog.cjs");
+const require_primitives$1 = require("../components/field/primitives.cjs");
+let react = require("react");
+let styled_system_css = require("styled-system/css");
+let react_jsx_runtime = require("react/jsx-runtime");
+let styled_system_jsx = require("styled-system/jsx");
+let _ark_ui_react_dialog = require("@ark-ui/react/dialog");
+let styled_system_patterns = require("styled-system/patterns");
+//#region src/context/prompt-modal.tsx
+var PromptModalContext = (0, react.createContext)(null);
+/**
+* Provides a prompt modal to the app.
+* @see https://cerberus.digitalu.design/react/prompt-modal
+* @example
+* ```tsx
+* // Wrap the Provider around the root of the feature.
+* <PromptModal>
+*   <SomeFeatureSection />
+* </PromptModal>
+*
+* // Use the hook to show the prompt modal.
+* const prompt = usePromptModal()
+*
+* const handleClick = useCallback(async () => {
+*  const accepted = await prompt.show({
+*   kind: 'destructive',
+*   heading: 'Delete channel?',
+*  description:
+*   'This will permanently delete a channel on your account. There is no going back.',
+* key: CHANNEL_NAME,
+* actionText: 'Yes, delete channel',
+* cancelText: 'No, cancel',
+* })
+* // do something with accepted
+* }, [prompt])
+* ```
+*/
+function PromptModal(props) {
+	const { children, ...rootProps } = props;
+	const [open, setOpen] = (0, react.useState)(false);
+	const [content, setContent] = (0, react.useState)(null);
+	const [inputValue, setInputValue] = (0, react.useState)("");
+	const resolveRef = (0, react.useRef)(null);
+	const { icons } = require_cerberus.useCerberusContext();
+	const { promptModal: PromptIcon } = icons;
+	const isValid = (0, react.useMemo)(() => inputValue === content?.key, [inputValue, content]);
+	const palette = (0, react.useMemo)(() => content?.kind === "destructive" ? "danger" : "action", [content]);
+	const handleChange = (0, react.useCallback)((e) => {
+		setInputValue(e.currentTarget.value);
+	}, []);
+	const handleChoice = (0, react.useCallback)((e) => {
+		if (e.currentTarget.value === "true") resolveRef.current?.(inputValue);
+		setOpen(false);
+	}, [inputValue, setOpen]);
+	const handleShow = (0, react.useCallback)((options) => {
+		return new Promise((resolve) => {
+			setContent({
+				...options,
+				kind: options.kind || "non-destructive"
+			});
+			setOpen(true);
+			resolveRef.current = resolve;
+		});
+	}, [setOpen]);
+	const value = (0, react.useMemo)(() => ({ show: handleShow }), [handleShow]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PromptModalContext.Provider, {
+		value,
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives.DialogProvider, {
+			lazyMount: true,
+			open,
+			onOpenChange: (e) => setOpen(e.open),
+			unmountOnExit: true,
+			...rootProps,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dialog.Dialog, {
+				size: "sm",
+				style: { "--dialog-content-min-h": "auto" },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.VStack, {
+					alignItems: "flex-start",
+					h: "full",
+					justify: "space-between",
+					w: "full",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.HStack, {
+							alignSelf: "center",
+							justify: "center",
+							paddingBlockEnd: "md",
+							w: "full",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_show.Show, {
+								when: palette === "danger",
+								fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_avatar.Avatar, {
+									gradient: "charon-light",
+									fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PromptIcon, { size: 24 })
+								}),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_avatar.Avatar, {
+									gradient: "hades-dark",
+									fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PromptIcon, { size: 24 })
+								})
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives.DialogHeading, { children: content?.heading }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives.DialogDescription, { children: content?.description }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.VStack, {
+							alignItems: "flex-start",
+							marginBlockStart: "md",
+							marginBlockEnd: "lg",
+							w: "full",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_primitives$1.FieldRoot, {
+								invalid: !isValid,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_primitives$1.FieldLabel, {
+									className: (0, styled_system_patterns.hstack)({
+										gap: "xs",
+										justify: "flex-start",
+										marginBlockEnd: "xs",
+										textStyle: "label-md",
+										w: "initial"
+									}),
+									children: [
+										"Type",
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_parts.Clipboard.Root, {
+											value: content?.key || "",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_parts.Clipboard.Control, {
+												asChild: true,
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
+													gap: "xs",
+													w: "full",
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_parts.Clipboard.Label, {
+														asChild: true,
+														children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
+															as: "strong",
+															userSelect: "text",
+															children: content?.key
+														})
+													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_parts.Clipboard.Trigger, {
+														asChild: true,
+														children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button$1.IconButton, {
+															clipboard: true,
+															shape: "square",
+															size: "sm",
+															rounded: "xs",
+															children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_parts.Clipboard.Indicator, {})
+														})
+													})]
+												})
+											})
+										}),
+										"to confirm"
+									]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives$1.Input, {
+									name: "confirm",
+									onChange: handleChange,
+									type: "text"
+								})]
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
+							gap: "md",
+							justify: "stretch",
+							w: "full",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+								autoFocus: true,
+								className: (0, styled_system_css.css)({ w: "1/2" }),
+								disabled: !isValid,
+								name: "confirm",
+								onClick: handleChoice,
+								palette,
+								value: "true",
+								children: content?.actionText
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_dialog.DialogCloseTrigger, {
+								asChild: true,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+									className: (0, styled_system_css.css)({ w: "1/2" }),
+									name: "cancel",
+									onClick: handleChoice,
+									usage: "outlined",
+									value: "false",
+									children: content?.cancelText
+								})
+							})]
+						})
+					]
+				})
+			})
+		})]
+	});
+}
+/**
+* Used to retrieve the context of the PromptModal provider.
+*/
+function usePromptModal() {
+	const context = (0, react.useContext)(PromptModalContext);
+	if (context === null) throw new Error("usePromptModal must be used within a PromptModal Provider");
+	return context;
+}
+//#endregion
+exports.PromptModal = PromptModal;
+exports.usePromptModal = usePromptModal;

package/dist/context/prompt-modal.d.cts

@@ -0,0 +1,85 @@
+import { PropsWithChildren } from 'react';
+import { DialogRootProps } from '../components/dialog/index';
+/**
+ * This module provides a context and hook for the prompt modal.
+ * @module PromptModal
+ */
+export interface ShowPromptModalOptions {
+    /**
+     * The kind of prompt modal to show.
+     * @default 'non-destructive'
+     */
+    kind?: 'destructive' | 'non-destructive';
+    /**
+     * The heading of the prompt modal.
+     */
+    heading: string;
+    /**
+     * The description of the prompt modal.
+     */
+    description?: string;
+    /**
+     * The key to confirm the action.
+     */
+    key: string;
+    /**
+     * The text for the action button.
+     */
+    actionText: string;
+    /**
+     * The text for the cancel button.
+     */
+    cancelText: string;
+}
+export type PromptShowResult = ((value: string | PromiseLike<string>) => void) | null;
+export interface PromptModalValue {
+    /**
+     * The method to trigger the prompt modal.
+     * @returns the value of the key if the action is confirmed.
+     * @example
+     * ```tsx
+     * const accepted = await prompt.show({
+     *  kind: 'destructive',
+     *  heading: 'Delete channel?',
+     *  description:
+     *   'This will permanently delete a channel on your account. There is no going back.',
+     *  key: CHANNEL_NAME,
+     *  actionText: 'Yes, delete channel',
+     *  cancelText: 'No, cancel',
+     * })
+     */
+    show: (options: ShowPromptModalOptions) => Promise<string>;
+}
+export type PromptModalProviderProps = PropsWithChildren<DialogRootProps>;
+/**
+ * Provides a prompt modal to the app.
+ * @see https://cerberus.digitalu.design/react/prompt-modal
+ * @example
+ * ```tsx
+ * // Wrap the Provider around the root of the feature.
+ * <PromptModal>
+ *   <SomeFeatureSection />
+ * </PromptModal>
+ *
+ * // Use the hook to show the prompt modal.
+ * const prompt = usePromptModal()
+ *
+ * const handleClick = useCallback(async () => {
+ *  const accepted = await prompt.show({
+ *   kind: 'destructive',
+ *   heading: 'Delete channel?',
+ *  description:
+ *   'This will permanently delete a channel on your account. There is no going back.',
+ * key: CHANNEL_NAME,
+ * actionText: 'Yes, delete channel',
+ * cancelText: 'No, cancel',
+ * })
+ * // do something with accepted
+ * }, [prompt])
+ * ```
+ */
+export declare function PromptModal(props: PropsWithChildren<PromptModalProviderProps>): import("react").JSX.Element;
+/**
+ * Used to retrieve the context of the PromptModal provider.
+ */
+export declare function usePromptModal(): PromptModalValue;

package/dist/context/prompt-modal.d.ts

@@ -0,0 +1,85 @@
+import { PropsWithChildren } from 'react';
+import { DialogRootProps } from '../components/dialog/index';
+/**
+ * This module provides a context and hook for the prompt modal.
+ * @module PromptModal
+ */
+export interface ShowPromptModalOptions {
+    /**
+     * The kind of prompt modal to show.
+     * @default 'non-destructive'
+     */
+    kind?: 'destructive' | 'non-destructive';
+    /**
+     * The heading of the prompt modal.
+     */
+    heading: string;
+    /**
+     * The description of the prompt modal.
+     */
+    description?: string;
+    /**
+     * The key to confirm the action.
+     */
+    key: string;
+    /**
+     * The text for the action button.
+     */
+    actionText: string;
+    /**
+     * The text for the cancel button.
+     */
+    cancelText: string;
+}
+export type PromptShowResult = ((value: string | PromiseLike<string>) => void) | null;
+export interface PromptModalValue {
+    /**
+     * The method to trigger the prompt modal.
+     * @returns the value of the key if the action is confirmed.
+     * @example
+     * ```tsx
+     * const accepted = await prompt.show({
+     *  kind: 'destructive',
+     *  heading: 'Delete channel?',
+     *  description:
+     *   'This will permanently delete a channel on your account. There is no going back.',
+     *  key: CHANNEL_NAME,
+     *  actionText: 'Yes, delete channel',
+     *  cancelText: 'No, cancel',
+     * })
+     */
+    show: (options: ShowPromptModalOptions) => Promise<string>;
+}
+export type PromptModalProviderProps = PropsWithChildren<DialogRootProps>;
+/**
+ * Provides a prompt modal to the app.
+ * @see https://cerberus.digitalu.design/react/prompt-modal
+ * @example
+ * ```tsx
+ * // Wrap the Provider around the root of the feature.
+ * <PromptModal>
+ *   <SomeFeatureSection />
+ * </PromptModal>
+ *
+ * // Use the hook to show the prompt modal.
+ * const prompt = usePromptModal()
+ *
+ * const handleClick = useCallback(async () => {
+ *  const accepted = await prompt.show({
+ *   kind: 'destructive',
+ *   heading: 'Delete channel?',
+ *  description:
+ *   'This will permanently delete a channel on your account. There is no going back.',
+ * key: CHANNEL_NAME,
+ * actionText: 'Yes, delete channel',
+ * cancelText: 'No, cancel',
+ * })
+ * // do something with accepted
+ * }, [prompt])
+ * ```
+ */
+export declare function PromptModal(props: PropsWithChildren<PromptModalProviderProps>): import("react").JSX.Element;
+/**
+ * Used to retrieve the context of the PromptModal provider.
+ */
+export declare function usePromptModal(): PromptModalValue;

package/dist/context/prompt-modal.js

@@ -0,0 +1,205 @@
+"use client";
+"use client";
+import { Show } from "../components/show/show.js";
+import { useCerberusContext } from "./cerberus.js";
+import { Avatar } from "../components/avatar/avatar.js";
+import { Button } from "../components/button/button.js";
+import { Text } from "../components/text/text.js";
+import { Clipboard } from "../components/clipboard/parts.js";
+import { IconButton } from "../components/icon-button/button.js";
+import { DialogDescription, DialogHeading, DialogProvider } from "../components/dialog/primitives.js";
+import { Dialog as Dialog$1 } from "../components/dialog/dialog.js";
+import { FieldLabel, FieldRoot, Input } from "../components/field/primitives.js";
+import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
+import { css } from "styled-system/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HStack, VStack } from "styled-system/jsx";
+import { DialogCloseTrigger } from "@ark-ui/react/dialog";
+import { hstack } from "styled-system/patterns";
+//#region src/context/prompt-modal.tsx
+var PromptModalContext = createContext(null);
+/**
+* Provides a prompt modal to the app.
+* @see https://cerberus.digitalu.design/react/prompt-modal
+* @example
+* ```tsx
+* // Wrap the Provider around the root of the feature.
+* <PromptModal>
+*   <SomeFeatureSection />
+* </PromptModal>
+*
+* // Use the hook to show the prompt modal.
+* const prompt = usePromptModal()
+*
+* const handleClick = useCallback(async () => {
+*  const accepted = await prompt.show({
+*   kind: 'destructive',
+*   heading: 'Delete channel?',
+*  description:
+*   'This will permanently delete a channel on your account. There is no going back.',
+* key: CHANNEL_NAME,
+* actionText: 'Yes, delete channel',
+* cancelText: 'No, cancel',
+* })
+* // do something with accepted
+* }, [prompt])
+* ```
+*/
+function PromptModal(props) {
+	const { children, ...rootProps } = props;
+	const [open, setOpen] = useState(false);
+	const [content, setContent] = useState(null);
+	const [inputValue, setInputValue] = useState("");
+	const resolveRef = useRef(null);
+	const { icons } = useCerberusContext();
+	const { promptModal: PromptIcon } = icons;
+	const isValid = useMemo(() => inputValue === content?.key, [inputValue, content]);
+	const palette = useMemo(() => content?.kind === "destructive" ? "danger" : "action", [content]);
+	const handleChange = useCallback((e) => {
+		setInputValue(e.currentTarget.value);
+	}, []);
+	const handleChoice = useCallback((e) => {
+		if (e.currentTarget.value === "true") resolveRef.current?.(inputValue);
+		setOpen(false);
+	}, [inputValue, setOpen]);
+	const handleShow = useCallback((options) => {
+		return new Promise((resolve) => {
+			setContent({
+				...options,
+				kind: options.kind || "non-destructive"
+			});
+			setOpen(true);
+			resolveRef.current = resolve;
+		});
+	}, [setOpen]);
+	const value = useMemo(() => ({ show: handleShow }), [handleShow]);
+	return /* @__PURE__ */ jsxs(PromptModalContext.Provider, {
+		value,
+		children: [children, /* @__PURE__ */ jsx(DialogProvider, {
+			lazyMount: true,
+			open,
+			onOpenChange: (e) => setOpen(e.open),
+			unmountOnExit: true,
+			...rootProps,
+			children: /* @__PURE__ */ jsx(Dialog$1, {
+				size: "sm",
+				style: { "--dialog-content-min-h": "auto" },
+				children: /* @__PURE__ */ jsxs(VStack, {
+					alignItems: "flex-start",
+					h: "full",
+					justify: "space-between",
+					w: "full",
+					children: [
+						/* @__PURE__ */ jsx(HStack, {
+							alignSelf: "center",
+							justify: "center",
+							paddingBlockEnd: "md",
+							w: "full",
+							children: /* @__PURE__ */ jsx(Show, {
+								when: palette === "danger",
+								fallback: /* @__PURE__ */ jsx(Avatar, {
+									gradient: "charon-light",
+									fallback: /* @__PURE__ */ jsx(PromptIcon, { size: 24 })
+								}),
+								children: /* @__PURE__ */ jsx(Avatar, {
+									gradient: "hades-dark",
+									fallback: /* @__PURE__ */ jsx(PromptIcon, { size: 24 })
+								})
+							})
+						}),
+						/* @__PURE__ */ jsx(DialogHeading, { children: content?.heading }),
+						/* @__PURE__ */ jsx(DialogDescription, { children: content?.description }),
+						/* @__PURE__ */ jsx(VStack, {
+							alignItems: "flex-start",
+							marginBlockStart: "md",
+							marginBlockEnd: "lg",
+							w: "full",
+							children: /* @__PURE__ */ jsxs(FieldRoot, {
+								invalid: !isValid,
+								children: [/* @__PURE__ */ jsxs(FieldLabel, {
+									className: hstack({
+										gap: "xs",
+										justify: "flex-start",
+										marginBlockEnd: "xs",
+										textStyle: "label-md",
+										w: "initial"
+									}),
+									children: [
+										"Type",
+										/* @__PURE__ */ jsx(Clipboard.Root, {
+											value: content?.key || "",
+											children: /* @__PURE__ */ jsx(Clipboard.Control, {
+												asChild: true,
+												children: /* @__PURE__ */ jsxs(HStack, {
+													gap: "xs",
+													w: "full",
+													children: [/* @__PURE__ */ jsx(Clipboard.Label, {
+														asChild: true,
+														children: /* @__PURE__ */ jsx(Text, {
+															as: "strong",
+															userSelect: "text",
+															children: content?.key
+														})
+													}), /* @__PURE__ */ jsx(Clipboard.Trigger, {
+														asChild: true,
+														children: /* @__PURE__ */ jsx(IconButton, {
+															clipboard: true,
+															shape: "square",
+															size: "sm",
+															rounded: "xs",
+															children: /* @__PURE__ */ jsx(Clipboard.Indicator, {})
+														})
+													})]
+												})
+											})
+										}),
+										"to confirm"
+									]
+								}), /* @__PURE__ */ jsx(Input, {
+									name: "confirm",
+									onChange: handleChange,
+									type: "text"
+								})]
+							})
+						}),
+						/* @__PURE__ */ jsxs(HStack, {
+							gap: "md",
+							justify: "stretch",
+							w: "full",
+							children: [/* @__PURE__ */ jsx(Button, {
+								autoFocus: true,
+								className: css({ w: "1/2" }),
+								disabled: !isValid,
+								name: "confirm",
+								onClick: handleChoice,
+								palette,
+								value: "true",
+								children: content?.actionText
+							}), /* @__PURE__ */ jsx(DialogCloseTrigger, {
+								asChild: true,
+								children: /* @__PURE__ */ jsx(Button, {
+									className: css({ w: "1/2" }),
+									name: "cancel",
+									onClick: handleChoice,
+									usage: "outlined",
+									value: "false",
+									children: content?.cancelText
+								})
+							})]
+						})
+					]
+				})
+			})
+		})]
+	});
+}
+/**
+* Used to retrieve the context of the PromptModal provider.
+*/
+function usePromptModal() {
+	const context = useContext(PromptModalContext);
+	if (context === null) throw new Error("usePromptModal must be used within a PromptModal Provider");
+	return context;
+}
+//#endregion
+export { PromptModal, usePromptModal };

package/dist/context/theme.cjs

@@ -0,0 +1,40 @@
+"use client";
+"use client";
+const require_useTheme = require("../hooks/useTheme.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/context/theme.tsx
+var ThemeContext = (0, react.createContext)(null);
+/**
+* A context provider that allows the user to set the theme and mode of the
+* application.
+* @see https://cerberus.digitalu.design/react/use-theme-context
+* @example
+* ```tsx
+* <ThemeProvider>
+*  <App />
+* </ThemeProvider>
+* ```
+*/
+function ThemeProvider(props) {
+	const state = require_useTheme.useTheme(props.defaultTheme, props.defaultColorMode, {
+		cache: props.cache,
+		updateMode: props.updateMode,
+		updateTheme: props.updateTheme
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeContext.Provider, {
+		value: state,
+		children: props.children
+	});
+}
+/**
+* Used to access the theme context.
+*/
+function useThemeContext() {
+	const context = (0, react.useContext)(ThemeContext);
+	if (!context) throw new Error("useThemeContext must be used within a ThemeProvider");
+	return context;
+}
+//#endregion
+exports.ThemeProvider = ThemeProvider;
+exports.useThemeContext = useThemeContext;