@cerberus-design/react 0.0.0-next-bd980a6d9bd07d60e8d7200bd4d56624754e936c

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

@@ -0,0 +1,82 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { DialogRootProps } from '../components/dialog';
+/**
+ * This module provides a context and hook for the confirm modal.
+ * @module
+ */
+export interface BaseConfirmOptions {
+    /**
+     * The heading of the confirm modal.
+     */
+    heading: string;
+    /**
+     * The text for the action button.
+     */
+    actionText: string;
+    /**
+     * The text for the cancel button.
+     */
+    cancelText: string;
+    /**
+     * Whether to show the avatar icon at the top of the modal.
+     * @default true
+     */
+    showAvatar?: boolean;
+}
+export interface DestructiveConfirmOptions extends BaseConfirmOptions {
+    /**
+     * The kind of confirm modal to show.
+     */
+    kind?: 'destructive';
+    /**
+     * The description of the confirm modal. Can only be a string for destructive confirm modals.
+     */
+    description?: ReactNode;
+}
+export interface NonDestructiveConfirmModalOptions extends BaseConfirmOptions {
+    /**
+     * The kind of confirm modal to show.
+     * @default 'non-destructive'
+     */
+    kind?: 'non-destructive';
+    /**
+     * The description of the confirm modal. Can be a ReactNode for non-destructive kind if you need to display text links.
+     * @example
+     * ```tsx
+     * description: <>Use a Fragment because we put the content within a Paragraph tag.</>
+     */
+    description?: ReactNode;
+}
+export type ShowConfirmModalOptions = NonDestructiveConfirmModalOptions | DestructiveConfirmOptions;
+export type ShowResult = ((value: boolean | null) => void) | null;
+export interface ConfirmModalValue {
+    show: (options: ShowConfirmModalOptions) => Promise<boolean | null>;
+}
+export type ConfirmModalProviderProps = PropsWithChildren<DialogRootProps>;
+/**
+ * Provides a confirm modal to the app.
+ * @see https://cerberus.digitalu.design/react/confirm-modal
+ * @example
+ * ```tsx
+ * // Wrap the Provider around the root of the feature.
+ * <ConfirmModal>
+ *   <SomeFeatureSection />
+ * </ConfirmModal>
+ *
+ * // Use the hook to show the confirm modal.
+ * const confirm = useConfirmModal()
+ *
+ * const handleClick = useCallback(async () => {
+ *  const userConsent = await confirm.show({
+ *   heading: 'Add new payment method?',
+ *  description:
+ *   'This will add a new payment method to your account to be billed for future purchases.',
+ * actionText: 'Yes, add payment method',
+ * cancelText: 'No, cancel',
+ * })
+ * setConsent(userConsent)
+ * }, [confirm])
+ * ```
+ */
+export declare function ConfirmModal(props: PropsWithChildren<ConfirmModalProviderProps>): import("react").JSX.Element;
+export declare function useConfirmModal(): ConfirmModalValue;

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

@@ -0,0 +1,82 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { DialogRootProps } from '../components/dialog';
+/**
+ * This module provides a context and hook for the confirm modal.
+ * @module
+ */
+export interface BaseConfirmOptions {
+    /**
+     * The heading of the confirm modal.
+     */
+    heading: string;
+    /**
+     * The text for the action button.
+     */
+    actionText: string;
+    /**
+     * The text for the cancel button.
+     */
+    cancelText: string;
+    /**
+     * Whether to show the avatar icon at the top of the modal.
+     * @default true
+     */
+    showAvatar?: boolean;
+}
+export interface DestructiveConfirmOptions extends BaseConfirmOptions {
+    /**
+     * The kind of confirm modal to show.
+     */
+    kind?: 'destructive';
+    /**
+     * The description of the confirm modal. Can only be a string for destructive confirm modals.
+     */
+    description?: ReactNode;
+}
+export interface NonDestructiveConfirmModalOptions extends BaseConfirmOptions {
+    /**
+     * The kind of confirm modal to show.
+     * @default 'non-destructive'
+     */
+    kind?: 'non-destructive';
+    /**
+     * The description of the confirm modal. Can be a ReactNode for non-destructive kind if you need to display text links.
+     * @example
+     * ```tsx
+     * description: <>Use a Fragment because we put the content within a Paragraph tag.</>
+     */
+    description?: ReactNode;
+}
+export type ShowConfirmModalOptions = NonDestructiveConfirmModalOptions | DestructiveConfirmOptions;
+export type ShowResult = ((value: boolean | null) => void) | null;
+export interface ConfirmModalValue {
+    show: (options: ShowConfirmModalOptions) => Promise<boolean | null>;
+}
+export type ConfirmModalProviderProps = PropsWithChildren<DialogRootProps>;
+/**
+ * Provides a confirm modal to the app.
+ * @see https://cerberus.digitalu.design/react/confirm-modal
+ * @example
+ * ```tsx
+ * // Wrap the Provider around the root of the feature.
+ * <ConfirmModal>
+ *   <SomeFeatureSection />
+ * </ConfirmModal>
+ *
+ * // Use the hook to show the confirm modal.
+ * const confirm = useConfirmModal()
+ *
+ * const handleClick = useCallback(async () => {
+ *  const userConsent = await confirm.show({
+ *   heading: 'Add new payment method?',
+ *  description:
+ *   'This will add a new payment method to your account to be billed for future purchases.',
+ * actionText: 'Yes, add payment method',
+ * cancelText: 'No, cancel',
+ * })
+ * setConsent(userConsent)
+ * }, [confirm])
+ * ```
+ */
+export declare function ConfirmModal(props: PropsWithChildren<ConfirmModalProviderProps>): import("react").JSX.Element;
+export declare function useConfirmModal(): ConfirmModalValue;

package/dist/context/confirm-modal.js

@@ -0,0 +1,148 @@
+"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 { DialogCloseTrigger, DialogDescription, DialogHeading, DialogProvider } from "../components/dialog/primitives.js";
+import { Dialog } from "../components/dialog/dialog.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";
+//#region src/context/confirm-modal.tsx
+var ConfirmModalContext = createContext(null);
+/**
+* Provides a confirm modal to the app.
+* @see https://cerberus.digitalu.design/react/confirm-modal
+* @example
+* ```tsx
+* // Wrap the Provider around the root of the feature.
+* <ConfirmModal>
+*   <SomeFeatureSection />
+* </ConfirmModal>
+*
+* // Use the hook to show the confirm modal.
+* const confirm = useConfirmModal()
+*
+* const handleClick = useCallback(async () => {
+*  const userConsent = await confirm.show({
+*   heading: 'Add new payment method?',
+*  description:
+*   'This will add a new payment method to your account to be billed for future purchases.',
+* actionText: 'Yes, add payment method',
+* cancelText: 'No, cancel',
+* })
+* setConsent(userConsent)
+* }, [confirm])
+* ```
+*/
+function ConfirmModal(props) {
+	const { children, ...rootProps } = props;
+	const [open, setOpen] = useState(false);
+	const [content, setContent] = useState(null);
+	const resolveRef = useRef(null);
+	const showAvatar = content?.showAvatar ?? true;
+	const kind = content?.kind ?? "non-destructive";
+	const { icons } = useCerberusContext();
+	const { confirmModal: ConfirmIcon } = icons;
+	const palette = useMemo(() => kind === "destructive" ? "danger" : "action", [kind]);
+	const handleChoice = useCallback((e) => {
+		if (e.currentTarget.value === "true") resolveRef.current?.(true);
+		resolveRef.current?.(false);
+		setOpen(false);
+	}, [setOpen]);
+	const handleShow = useCallback((options) => {
+		return new Promise((resolve) => {
+			setContent({ ...options });
+			setOpen(true);
+			resolveRef.current = resolve;
+		});
+	}, [setOpen, setContent]);
+	const handleOpenChange = useCallback(({ open }) => {
+		setOpen(open);
+		if (!open) {
+			resolveRef.current?.(null);
+			resolveRef.current = null;
+		}
+	}, [setOpen]);
+	const value = useMemo(() => ({ show: handleShow }), [handleShow]);
+	return /* @__PURE__ */ jsxs(ConfirmModalContext.Provider, {
+		value,
+		children: [children, /* @__PURE__ */ jsx(DialogProvider, {
+			lazyMount: true,
+			open,
+			onOpenChange: handleOpenChange,
+			unmountOnExit: true,
+			...rootProps,
+			children: /* @__PURE__ */ jsx(Dialog, {
+				size: "sm",
+				style: { "--dialog-content-min-h": "auto" },
+				children: /* @__PURE__ */ jsxs(VStack, {
+					alignItems: "flex-start",
+					gap: "md",
+					justify: "space-between",
+					w: "full",
+					children: [
+						/* @__PURE__ */ jsx(Show, {
+							when: showAvatar,
+							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(ConfirmIcon, { size: 24 })
+									}),
+									children: /* @__PURE__ */ jsx(Avatar, {
+										gradient: "hades-dark",
+										fallback: /* @__PURE__ */ jsx(ConfirmIcon, { size: 24 })
+									})
+								})
+							})
+						}),
+						/* @__PURE__ */ jsx(DialogHeading, { children: content?.heading }),
+						/* @__PURE__ */ jsx(Show, {
+							when: content?.description,
+							children: /* @__PURE__ */ jsx(DialogDescription, { children: content?.description })
+						}),
+						/* @__PURE__ */ jsxs(HStack, {
+							gap: "md",
+							pt: "md",
+							w: "full",
+							children: [/* @__PURE__ */ jsx(Button, {
+								autoFocus: true,
+								className: css({ w: "1/2" }),
+								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
+								})
+							})]
+						})
+					]
+				})
+			})
+		})]
+	});
+}
+function useConfirmModal() {
+	const context = useContext(ConfirmModalContext);
+	if (context === null) throw new Error("useConfirmModal must be used within a ConfirmModal Provider");
+	return context;
+}
+//#endregion
+export { ConfirmModal, useConfirmModal };

package/dist/context/feature-flags.cjs

@@ -0,0 +1,45 @@
+"use client";
+"use client";
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/context/feature-flags.tsx
+var FeatureFlagContext = (0, react.createContext)(null);
+/**
+* Provides feature flags to the application.
+* @see https://cerberus.digitalu.design/react/feature-flags
+* @example
+* ```tsx
+* // This should be a JSON file or a server response.
+* const flags = {
+*  featureOne: true,
+*  featureTwo: false
+* }
+*
+* // Wrap the Provider around the root of your application.
+* <FeatureFlags flags={flags}>
+*    <FeatureFlag flag="featureOne">
+*      This is visible.
+*    </FeatureFlag>
+*   <FeatureFlag flag="featureTwo">
+*     This is hidden.
+*   </FeatureFlag>
+* </FeatureFlags>
+* ```
+*/
+function FeatureFlags(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FeatureFlagContext.Provider, {
+		value: props.flags,
+		children: props.children
+	});
+}
+/**
+* Used to retrieve the context of the FeatureFlags provider.
+*/
+function useFeatureFlags(key) {
+	const context = (0, react.useContext)(FeatureFlagContext);
+	if (context === null) throw new Error("useFeatureFlag must be used within a FeatureFlags Provider");
+	return context[key] ?? false;
+}
+//#endregion
+exports.FeatureFlags = FeatureFlags;
+exports.useFeatureFlags = useFeatureFlags;

package/dist/context/feature-flags.d.cts

@@ -0,0 +1,38 @@
+import { PropsWithChildren } from 'react';
+/**
+ * This module provides a context and hook for feature flags.
+ * @module
+ */
+export interface FeatureFlagValue {
+    [key: string]: boolean;
+}
+export interface FeatureFlagProviderProps {
+    flags: FeatureFlagValue;
+}
+/**
+ * Provides feature flags to the application.
+ * @see https://cerberus.digitalu.design/react/feature-flags
+ * @example
+ * ```tsx
+ * // This should be a JSON file or a server response.
+ * const flags = {
+ *  featureOne: true,
+ *  featureTwo: false
+ * }
+ *
+ * // Wrap the Provider around the root of your application.
+ * <FeatureFlags flags={flags}>
+ *    <FeatureFlag flag="featureOne">
+ *      This is visible.
+ *    </FeatureFlag>
+ *   <FeatureFlag flag="featureTwo">
+ *     This is hidden.
+ *   </FeatureFlag>
+ * </FeatureFlags>
+ * ```
+ */
+export declare function FeatureFlags(props: PropsWithChildren<FeatureFlagProviderProps>): import("react").JSX.Element;
+/**
+ * Used to retrieve the context of the FeatureFlags provider.
+ */
+export declare function useFeatureFlags(key: string): boolean;

package/dist/context/feature-flags.d.ts

@@ -0,0 +1,38 @@
+import { PropsWithChildren } from 'react';
+/**
+ * This module provides a context and hook for feature flags.
+ * @module
+ */
+export interface FeatureFlagValue {
+    [key: string]: boolean;
+}
+export interface FeatureFlagProviderProps {
+    flags: FeatureFlagValue;
+}
+/**
+ * Provides feature flags to the application.
+ * @see https://cerberus.digitalu.design/react/feature-flags
+ * @example
+ * ```tsx
+ * // This should be a JSON file or a server response.
+ * const flags = {
+ *  featureOne: true,
+ *  featureTwo: false
+ * }
+ *
+ * // Wrap the Provider around the root of your application.
+ * <FeatureFlags flags={flags}>
+ *    <FeatureFlag flag="featureOne">
+ *      This is visible.
+ *    </FeatureFlag>
+ *   <FeatureFlag flag="featureTwo">
+ *     This is hidden.
+ *   </FeatureFlag>
+ * </FeatureFlags>
+ * ```
+ */
+export declare function FeatureFlags(props: PropsWithChildren<FeatureFlagProviderProps>): import("react").JSX.Element;
+/**
+ * Used to retrieve the context of the FeatureFlags provider.
+ */
+export declare function useFeatureFlags(key: string): boolean;

package/dist/context/feature-flags.js

@@ -0,0 +1,44 @@
+"use client";
+"use client";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/context/feature-flags.tsx
+var FeatureFlagContext = createContext(null);
+/**
+* Provides feature flags to the application.
+* @see https://cerberus.digitalu.design/react/feature-flags
+* @example
+* ```tsx
+* // This should be a JSON file or a server response.
+* const flags = {
+*  featureOne: true,
+*  featureTwo: false
+* }
+*
+* // Wrap the Provider around the root of your application.
+* <FeatureFlags flags={flags}>
+*    <FeatureFlag flag="featureOne">
+*      This is visible.
+*    </FeatureFlag>
+*   <FeatureFlag flag="featureTwo">
+*     This is hidden.
+*   </FeatureFlag>
+* </FeatureFlags>
+* ```
+*/
+function FeatureFlags(props) {
+	return /* @__PURE__ */ jsx(FeatureFlagContext.Provider, {
+		value: props.flags,
+		children: props.children
+	});
+}
+/**
+* Used to retrieve the context of the FeatureFlags provider.
+*/
+function useFeatureFlags(key) {
+	const context = useContext(FeatureFlagContext);
+	if (context === null) throw new Error("useFeatureFlag must be used within a FeatureFlags Provider");
+	return context[key] ?? false;
+}
+//#endregion
+export { FeatureFlags, useFeatureFlags };

package/dist/context/field.d.cts

@@ -0,0 +1,34 @@
+import { FieldRootProps } from '@ark-ui/react/field';
+import { PropsWithChildren } from 'react';
+/**
+ * This module provides a context and hook for the field.
+ * @module Field
+ */
+export interface FieldContextValue {
+    /**
+     * Whether the field is disabled.
+     * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)
+     */
+    disabled?: boolean;
+    /**
+     * Whether the field is read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the field is required.
+     */
+    required?: boolean;
+    /**
+     * Whether the field is invalid.
+     */
+    invalid?: boolean;
+}
+/**
+ * @deprecated use FieldRoot or FieldParts instead
+ */
+export declare function FieldProvider(props: PropsWithChildren<FieldRootProps>): import("react").JSX.Element;
+/**
+ * Used to access the field context.
+ * @returns The field context.
+ */
+export declare function useFieldContext(): FieldContextValue;

package/dist/context/field.d.ts

@@ -0,0 +1,34 @@
+import { FieldRootProps } from '@ark-ui/react/field';
+import { PropsWithChildren } from 'react';
+/**
+ * This module provides a context and hook for the field.
+ * @module Field
+ */
+export interface FieldContextValue {
+    /**
+     * Whether the field is disabled.
+     * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)
+     */
+    disabled?: boolean;
+    /**
+     * Whether the field is read-only.
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the field is required.
+     */
+    required?: boolean;
+    /**
+     * Whether the field is invalid.
+     */
+    invalid?: boolean;
+}
+/**
+ * @deprecated use FieldRoot or FieldParts instead
+ */
+export declare function FieldProvider(props: PropsWithChildren<FieldRootProps>): import("react").JSX.Element;
+/**
+ * Used to access the field context.
+ * @returns The field context.
+ */
+export declare function useFieldContext(): FieldContextValue;

package/dist/context/navMenu.cjs

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

package/dist/context/navMenu.d.cts

@@ -0,0 +1,34 @@
+import { PropsWithChildren, RefObject } from 'react';
+/**
+ * This module provides a context and hook for the nav menu.
+ * @module NavMenu
+ */
+export type NavTriggerRef = RefObject<HTMLButtonElement | null>;
+export type NavMenuRef = RefObject<HTMLUListElement | null>;
+export interface NavMenuContextValue {
+    /**
+     * The ref for the trigger button.
+     */
+    triggerRef: NavTriggerRef;
+    /**
+     * The ref for the menu.
+     */
+    menuRef: NavMenuRef;
+    /**
+     * Whether the menu is expanded.
+     */
+    expanded: boolean;
+    /**
+     * Called when the menu button is clicked.
+     */
+    onToggle: () => void;
+}
+/**
+ * @deprecated use the {@link Menu} family instead
+ */
+export declare function NavMenu(props: PropsWithChildren): import("react").JSX.Element;
+/**
+ * Used to access the nav menu context.
+ * @returns The nav menu context.
+ */
+export declare function useNavMenuContext(): NavMenuContextValue;

package/dist/context/navMenu.d.ts

@@ -0,0 +1,34 @@
+import { PropsWithChildren, RefObject } from 'react';
+/**
+ * This module provides a context and hook for the nav menu.
+ * @module NavMenu
+ */
+export type NavTriggerRef = RefObject<HTMLButtonElement | null>;
+export type NavMenuRef = RefObject<HTMLUListElement | null>;
+export interface NavMenuContextValue {
+    /**
+     * The ref for the trigger button.
+     */
+    triggerRef: NavTriggerRef;
+    /**
+     * The ref for the menu.
+     */
+    menuRef: NavMenuRef;
+    /**
+     * Whether the menu is expanded.
+     */
+    expanded: boolean;
+    /**
+     * Called when the menu button is clicked.
+     */
+    onToggle: () => void;
+}
+/**
+ * @deprecated use the {@link Menu} family instead
+ */
+export declare function NavMenu(props: PropsWithChildren): import("react").JSX.Element;
+/**
+ * Used to access the nav menu context.
+ * @returns The nav menu context.
+ */
+export declare function useNavMenuContext(): NavMenuContextValue;