@cerberus-design/react 0.18.3 → 0.18.4

package/build/modern/{chunk-A5UXCB4L.js → chunk-SHBKM6EW.js}

@@ -6,15 +6,15 @@ import {
 } from "./chunk-QD3WAARV.js";
 import {
   DialogCloseIconTrigger
-} from "./chunk-F3XFJHGR.js";
+} from "./chunk-D7PY357P.js";
 import {
   Dialog
-} from "./chunk-Z2KBUTCO.js";
+} from "./chunk-BMDNCJUB.js";
 import {
   DialogDescription,
   DialogHeading,
   DialogProvider
-} from "./chunk-SSR3CWJZ.js";
+} from "./chunk-LUGOJGMO.js";
 import {
   Avatar
 } from "./chunk-CF4TCMJI.js";
@@ -68,38 +68,47 @@ function CTAModal(props) {
   );
   return /* @__PURE__ */ jsxs(CTAModalContext.Provider, { value, children: [
     props.children,
-    /* @__PURE__ */ jsx(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ jsxs(Dialog, { size: "sm", children: [
-      /* @__PURE__ */ jsx(DialogCloseIconTrigger, {}),
-      /* @__PURE__ */ jsxs(VStack, { gap: "xl", w: "full", children: [
-        /* @__PURE__ */ jsx(VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", w: "full", children: [
-          /* @__PURE__ */ jsx(
-            Avatar,
-            {
-              gradient: "charon-light",
-              fallback: /* @__PURE__ */ jsx(
-                Show,
+    /* @__PURE__ */ jsx(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        size: "sm",
+        style: {
+          "--dialog-content-min-h": "auto"
+        },
+        children: [
+          /* @__PURE__ */ jsx(DialogCloseIconTrigger, {}),
+          /* @__PURE__ */ jsxs(VStack, { gap: "xl", w: "full", children: [
+            /* @__PURE__ */ jsx(VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", w: "full", children: [
+              /* @__PURE__ */ jsx(
+                Avatar,
                 {
-                  when: confirmIcon,
-                  fallback: /* @__PURE__ */ jsx(FallbackIcon, { size: 24 }),
-                  children: confirmIcon
+                  gradient: "charon-light",
+                  fallback: /* @__PURE__ */ jsx(
+                    Show,
+                    {
+                      when: confirmIcon,
+                      fallback: /* @__PURE__ */ jsx(FallbackIcon, { size: 24 }),
+                      children: confirmIcon
+                    }
+                  )
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(DialogHeading, { children: content?.heading }),
-          /* @__PURE__ */ jsx(DialogDescription, { children: content?.description })
-        ] }) }),
-        /* @__PURE__ */ jsx(HStack, { gap: "md", w: "full", children: /* @__PURE__ */ jsx(For, { each: content?.actions._actions, children: (action, index) => /* @__PURE__ */ jsx(
-          Show,
-          {
-            when: content?.actions?.type === "btnAction",
-            fallback: /* @__PURE__ */ jsx(TriggerItem, { asChild: true, children: action }),
-            children: /* @__PURE__ */ jsx(TriggerItem, { "data-index": index, onClick: handleActionClick, children: action?.text })
-          },
-          index
-        ) }) })
-      ] })
-    ] }) })
+              ),
+              /* @__PURE__ */ jsx(DialogHeading, { children: content?.heading }),
+              /* @__PURE__ */ jsx(DialogDescription, { children: content?.description })
+            ] }) }),
+            /* @__PURE__ */ jsx(HStack, { gap: "md", w: "full", children: /* @__PURE__ */ jsx(For, { each: content?.actions._actions, children: (action, index) => /* @__PURE__ */ jsx(
+              Show,
+              {
+                when: content?.actions?.type === "btnAction",
+                fallback: /* @__PURE__ */ jsx(TriggerItem, { asChild: true, children: action }),
+                children: /* @__PURE__ */ jsx(TriggerItem, { "data-index": index, onClick: handleActionClick, children: action?.text })
+              },
+              index
+            ) }) })
+          ] })
+        ]
+      }
+    ) })
   ] });
 }
 function useCTAModal() {
@@ -114,4 +123,4 @@ export {
   CTAModal,
   useCTAModal
 };
-//# sourceMappingURL=chunk-A5UXCB4L.js.map
+//# sourceMappingURL=chunk-SHBKM6EW.js.map

package/build/modern/chunk-SHBKM6EW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/cta-dialog/provider.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { HStack, VStack } from 'styled-system/jsx'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { Show } from '../Show'\nimport { For } from '../for'\nimport { Avatar } from '../avatar/avatar'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogHeading,\n  DialogProvider,\n} from '../dialog'\nimport { DialogCloseIconTrigger } from '../dialog/close-icon-trigger'\nimport type { CTAButtonAction, CTAModalActionReturn } from './utils'\nimport {\n  CTAModalContext,\n  type CTAModalValue,\n  type ShowCTAModalOptions,\n} from './context'\nimport { TriggerItem } from './trigger-item'\n\n/**\n * This module provides the provider and hook for the cta modal.\n * @module 'react/cta-modal/provider'\n */\n\n/**\n * Provides a CTA modal to the app.\n * @see https://cerberus.digitalu.design/react/cta-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <CTAModal>\n *   <SomeFeatureSection />\n * </CTAModal>\n *\n * // Use the hook to show the cta modal.\n * const cta = useCTAModal()\n *\n * const handleClick = useCallback(async () => {\n *  const userConsent = await cta.show({\n *   heading: 'Create or copy a Cohort',\n *  description:\n *   'Create a new cohort or copy and existing one.',\n *  icon: <Copy size={24} />,\n *  actions: [\n *  {\n *   text: 'Create Cohort',\n *   onClick: () => {},\n *  {\n *   text: 'Copy Cohort',\n *   onClick: () => {}\n *  }\n * })\n * setConsent(userConsent)\n * }, [cta])\n * ```\n */\nexport function CTAModal(props: PropsWithChildren<object>) {\n  const [open, setOpen] = useState<boolean>(false)\n  const [content, setContent] = useState<ShowCTAModalOptions | null>(null)\n  const confirmIcon = content?.icon\n\n  const { icons } = useCerberusContext()\n  const { confirmModal: FallbackIcon } = icons\n\n  const handleShow = useCallback(\n    (options: ShowCTAModalOptions) => {\n      setContent({ ...options })\n      setOpen(true)\n    },\n    [setOpen],\n  )\n\n  const handleActionClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      const index = Number(event.currentTarget.getAttribute('data-index'))\n      const contentActions = content?.actions as CTAModalActionReturn\n      const action = contentActions._actions[index] as CTAButtonAction\n      action?.handleClick?.(event)\n      setOpen(false)\n    },\n    [content, setOpen],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <CTAModalContext.Provider value={value}>\n      {props.children}\n\n      <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>\n        <Dialog\n          size=\"sm\"\n          style={{\n            '--dialog-content-min-h': 'auto',\n          }}\n        >\n          <DialogCloseIconTrigger />\n\n          <VStack gap=\"xl\" w=\"full\">\n            <VStack alignItems=\"flex-start\" gap=\"md\" w=\"full\">\n              <VStack gap=\"lg\" w=\"full\">\n                <Avatar\n                  gradient=\"charon-light\"\n                  fallback={\n                    <Show\n                      when={confirmIcon}\n                      fallback={<FallbackIcon size={24} />}\n                    >\n                      {confirmIcon}\n                    </Show>\n                  }\n                />\n                <DialogHeading>{content?.heading}</DialogHeading>\n                <DialogDescription>{content?.description}</DialogDescription>\n              </VStack>\n            </VStack>\n\n            <HStack gap=\"md\" w=\"full\">\n              <For each={content?.actions._actions}>\n                {(action, index) => (\n                  <Show\n                    key={index}\n                    when={content?.actions?.type === 'btnAction'}\n                    fallback={\n                      <TriggerItem asChild>{action as ReactNode}</TriggerItem>\n                    }\n                  >\n                    <TriggerItem data-index={index} onClick={handleActionClick}>\n                      {(action as CTAButtonAction)?.text}\n                    </TriggerItem>\n                  </Show>\n                )}\n              </For>\n            </HStack>\n          </VStack>\n        </Dialog>\n      </DialogProvider>\n    </CTAModalContext.Provider>\n  )\n}\n\nexport function useCTAModal(): CTAModalValue {\n  const context = useContext(CTAModalContext)\n  if (context === null) {\n    throw new Error('useCTAModal must be used within a CTAModal Provider')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,QAAQ,cAAc;AAsGrB,cAII,YAJJ;AA7CH,SAAS,SAAS,OAAkC;AACzD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,KAAK;AAC/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAqC,IAAI;AACvE,QAAM,cAAc,SAAS;AAE7B,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,cAAc,aAAa,IAAI;AAEvC,QAAM,aAAa;AAAA,IACjB,CAAC,YAAiC;AAChC,iBAAW,EAAE,GAAG,QAAQ,CAAC;AACzB,cAAQ,IAAI;AAAA,IACd;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,UAAyC;AACxC,YAAM,QAAQ,OAAO,MAAM,cAAc,aAAa,YAAY,CAAC;AACnE,YAAM,iBAAiB,SAAS;AAChC,YAAM,SAAS,eAAe,SAAS,KAAK;AAC5C,cAAQ,cAAc,KAAK;AAC3B,cAAQ,KAAK;AAAA,IACf;AAAA,IACA,CAAC,SAAS,OAAO;AAAA,EACnB;AAEA,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,SACE,qBAAC,gBAAgB,UAAhB,EAAyB,OACvB;AAAA,UAAM;AAAA,IAEP,oBAAC,kBAAe,MAAY,cAAc,CAAC,MAAM,QAAQ,EAAE,IAAI,GAC7D;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,UACL,0BAA0B;AAAA,QAC5B;AAAA,QAEA;AAAA,8BAAC,0BAAuB;AAAA,UAExB,qBAAC,UAAO,KAAI,MAAK,GAAE,QACjB;AAAA,gCAAC,UAAO,YAAW,cAAa,KAAI,MAAK,GAAE,QACzC,+BAAC,UAAO,KAAI,MAAK,GAAE,QACjB;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAS;AAAA,kBACT,UACE;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAM;AAAA,sBACN,UAAU,oBAAC,gBAAa,MAAM,IAAI;AAAA,sBAEjC;AAAA;AAAA,kBACH;AAAA;AAAA,cAEJ;AAAA,cACA,oBAAC,iBAAe,mBAAS,SAAQ;AAAA,cACjC,oBAAC,qBAAmB,mBAAS,aAAY;AAAA,eAC3C,GACF;AAAA,YAEA,oBAAC,UAAO,KAAI,MAAK,GAAE,QACjB,8BAAC,OAAI,MAAM,SAAS,QAAQ,UACzB,WAAC,QAAQ,UACR;AAAA,cAAC;AAAA;AAAA,gBAEC,MAAM,SAAS,SAAS,SAAS;AAAA,gBACjC,UACE,oBAAC,eAAY,SAAO,MAAE,kBAAoB;AAAA,gBAG5C,8BAAC,eAAY,cAAY,OAAO,SAAS,mBACrC,kBAA4B,MAChC;AAAA;AAAA,cARK;AAAA,YASP,GAEJ,GACF;AAAA,aACF;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,cAA6B;AAC3C,QAAM,UAAU,WAAW,eAAe;AAC1C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}

package/build/modern/{chunk-CEJIKL6N.js → chunk-T44C3KQO.js}

@@ -19,4 +19,4 @@ function DatePicker(props) {
 export {
   DatePicker
 };
-//# sourceMappingURL=chunk-CEJIKL6N.js.map
+//# sourceMappingURL=chunk-T44C3KQO.js.map

package/build/modern/chunk-T44C3KQO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/date-picker/date-picker.tsx"],"sourcesContent":["import type { DatePickerRootProps } from '@ark-ui/react/date-picker'\nimport { DatePickerParts } from './parts'\n\n/**\n * This module contains an abstraction of the DatePicker.Root primitive.\n * @module 'date-picker/root'\n */\n\n/**\n * DatePicker component is an abstraction of the DatePickerRoot primitive which\n * is the context provider to the DatePicker.\n * @description [Cerberus Docs](https://cerberus.digitalu.design/react/date-picker)\n * @description [Ark Docs](https://ark-ui.com/react/docs/components/date-picker)\n */\nexport function DatePicker(props: DatePickerRootProps) {\n  // const handleFormat = useCallback((date: DateValue) => {\n  //   const day = date.day.toString().padStart(2, '0')\n  //   const year = date.year.toString()\n  //   const formattedMonth = new DateFormatter('en-US', {\n  //     month: 'short',\n  //   }).format(date.toDate(getLocalTimeZone()))\n\n  //   // Format the date as \"DD MMM YYYY\"\n  //   return `${day} ${formattedMonth} ${year}`\n  // }, [])\n\n  return (\n    <DatePickerParts.Root\n      {...props}\n      positioning={{\n        placement: 'bottom-start',\n      }}\n    />\n  )\n}\n"],"mappings":";;;;;AA2BI;AAbG,SAAS,WAAW,OAA4B;AAYrD,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACE,GAAG;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA,MACb;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-V6EAWUCQ.js → chunk-TRT6OCHJ.js}

@@ -7,7 +7,7 @@ import {
   DialogPositioner,
   DialogRoot,
   DialogTrigger
-} from "./chunk-SSR3CWJZ.js";
+} from "./chunk-LUGOJGMO.js";
 
 // src/components/dialog/parts.ts
 var DialogParts = {
@@ -24,4 +24,4 @@ var DialogParts = {
 export {
   DialogParts
 };
-//# sourceMappingURL=chunk-V6EAWUCQ.js.map
+//# sourceMappingURL=chunk-TRT6OCHJ.js.map

package/build/modern/chunk-WSOITM7D.js

@@ -0,0 +1,182 @@
+import {
+  Dialog
+} from "./chunk-BMDNCJUB.js";
+import {
+  DialogCloseTrigger,
+  DialogDescription,
+  DialogHeading,
+  DialogProvider
+} from "./chunk-LUGOJGMO.js";
+import {
+  Button
+} from "./chunk-GB7W3YNU.js";
+import {
+  Avatar
+} from "./chunk-CF4TCMJI.js";
+import {
+  useCerberusContext
+} from "./chunk-GITT5645.js";
+import {
+  Show
+} from "./chunk-VEAC4I3F.js";
+
+// src/context/confirm-modal.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { css } from "styled-system/css";
+import { HStack, VStack } from "styled-system/jsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ConfirmModalContext = createContext(null);
+function ConfirmModal(props) {
+  const [open, setOpen] = useState(false);
+  const [content, setContent] = useState(null);
+  const resolveRef = useRef(null);
+  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) => {
+      const target = e.currentTarget;
+      if (target.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: open2 }) => {
+      setOpen(open2);
+      if (!open2) {
+        resolveRef.current?.(null);
+        resolveRef.current = null;
+      }
+    },
+    [setOpen]
+  );
+  const value = useMemo(
+    () => ({
+      show: handleShow
+    }),
+    [handleShow]
+  );
+  return /* @__PURE__ */ jsxs(ConfirmModalContext.Provider, { value, children: [
+    props.children,
+    /* @__PURE__ */ jsx(DialogProvider, { open, onOpenChange: handleOpenChange, 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(
+                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;
+}
+
+export {
+  ConfirmModal,
+  useConfirmModal
+};
+//# sourceMappingURL=chunk-WSOITM7D.js.map

package/build/modern/chunk-WSOITM7D.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/confirm-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { css } from 'styled-system/css'\nimport { HStack, VStack } from 'styled-system/jsx'\nimport { Button } from '../components/button/button'\nimport { Show } from '../components/Show'\nimport { Avatar } from '../components/avatar/avatar'\nimport {\n  Dialog,\n  DialogCloseTrigger,\n  DialogDescription,\n  DialogHeading,\n  DialogProvider,\n  type OpenChangeDetails,\n} from '../components/dialog'\nimport { useCerberusContext } from './cerberus'\n\n/**\n * This module provides a context and hook for the confirm modal.\n * @module\n */\n\nexport interface BaseConfirmOptions {\n  /**\n   * The heading of the confirm modal.\n   */\n  heading: string\n  /**\n   * The text for the action button.\n   */\n  actionText: string\n  /**\n   * The text for the cancel button.\n   */\n  cancelText: string\n}\n\nexport interface DestructiveConfirmOptions extends BaseConfirmOptions {\n  /**\n   * The kind of confirm modal to show.\n   */\n  kind?: 'destructive'\n  /**\n   * The description of the confirm modal. Can only be a string for destructive confirm modals.\n   */\n  description?: string\n}\n\nexport interface NonDestructiveConfirmModalOptions extends BaseConfirmOptions {\n  /**\n   * The kind of confirm modal to show.\n   * @default 'non-destructive'\n   */\n  kind?: 'non-destructive'\n  /**\n   * The description of the confirm modal. Can be a ReactNode for non-destructive kind if you need to display text links.\n   * @example\n   * ```tsx\n   * description: <>Use a Fragment because we put the content within a Paragraph tag.</>\n   */\n  description?: ReactNode\n}\n\nexport type ShowConfirmModalOptions =\n  | NonDestructiveConfirmModalOptions\n  | DestructiveConfirmOptions\n\nexport type ShowResult = ((value: boolean | null) => void) | null\n\nexport interface ConfirmModalValue {\n  show: (options: ShowConfirmModalOptions) => Promise<boolean | null>\n}\n\nconst ConfirmModalContext = createContext<ConfirmModalValue | null>(null)\n\nexport type ConfirmModalProviderProps = PropsWithChildren<unknown>\n\n/**\n * Provides a confirm modal to the app.\n * @see https://cerberus.digitalu.design/react/confirm-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <ConfirmModal>\n *   <SomeFeatureSection />\n * </ConfirmModal>\n *\n * // Use the hook to show the confirm modal.\n * const confirm = useConfirmModal()\n *\n * const handleClick = useCallback(async () => {\n *  const userConsent = await confirm.show({\n *   heading: 'Add new payment method?',\n *  description:\n *   'This will add a new payment method to your account to be billed for future purchases.',\n * actionText: 'Yes, add payment method',\n * cancelText: 'No, cancel',\n * })\n * setConsent(userConsent)\n * }, [confirm])\n * ```\n */\nexport function ConfirmModal(\n  props: PropsWithChildren<ConfirmModalProviderProps>,\n) {\n  const [open, setOpen] = useState<boolean>(false)\n  const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n  const resolveRef = useRef<ShowResult>(null)\n  const kind = content?.kind ?? 'non-destructive'\n\n  const { icons } = useCerberusContext()\n  const { confirmModal: ConfirmIcon } = icons\n\n  const palette = useMemo(\n    () => (kind === 'destructive' ? 'danger' : 'action'),\n    [kind],\n  )\n\n  const handleChoice = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const target = e.currentTarget as HTMLButtonElement\n      if (target.value === 'true') {\n        resolveRef.current?.(true)\n      }\n      resolveRef.current?.(false)\n      setOpen(false)\n    },\n    [setOpen],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowConfirmModalOptions) => {\n      return new Promise<boolean | null>((resolve) => {\n        setContent({ ...options })\n        setOpen(true)\n        resolveRef.current = resolve\n      })\n    },\n    [setOpen, setContent],\n  )\n\n  const handleOpenChange = useCallback(\n    ({ open }: OpenChangeDetails) => {\n      setOpen(open)\n      if (!open) {\n        resolveRef.current?.(null)\n        resolveRef.current = null\n      }\n    },\n    [setOpen],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <ConfirmModalContext.Provider value={value}>\n      {props.children}\n\n      <DialogProvider open={open} onOpenChange={handleOpenChange}>\n        <Dialog\n          size=\"sm\"\n          style={{\n            '--dialog-content-min-h': 'auto',\n          }}\n        >\n          <VStack\n            alignItems=\"flex-start\"\n            gap=\"md\"\n            justify=\"space-between\"\n            w=\"full\"\n          >\n            <HStack\n              alignSelf=\"center\"\n              justify=\"center\"\n              paddingBlockEnd=\"md\"\n              w=\"full\"\n            >\n              <Show\n                when={palette === 'danger'}\n                fallback={\n                  <Avatar\n                    gradient=\"charon-light\"\n                    fallback={<ConfirmIcon size={24} />}\n                  />\n                }\n              >\n                <Avatar\n                  gradient=\"hades-dark\"\n                  fallback={<ConfirmIcon size={24} />}\n                />\n              </Show>\n            </HStack>\n\n            <DialogHeading>{content?.heading}</DialogHeading>\n\n            <Show when={content?.description}>\n              <DialogDescription>{content?.description}</DialogDescription>\n            </Show>\n\n            <HStack gap=\"md\" pt=\"md\" w=\"full\">\n              <Button\n                autoFocus\n                className={css({\n                  w: '1/2',\n                })}\n                name=\"confirm\"\n                onClick={handleChoice}\n                palette={palette}\n                value=\"true\"\n              >\n                {content?.actionText}\n              </Button>\n              <DialogCloseTrigger asChild>\n                <Button\n                  className={css({\n                    w: '1/2',\n                  })}\n                  name=\"cancel\"\n                  onClick={handleChoice}\n                  usage=\"outlined\"\n                  value=\"false\"\n                >\n                  {content?.cancelText}\n                </Button>\n              </DialogCloseTrigger>\n            </HStack>\n          </VStack>\n        </Dialog>\n      </DialogProvider>\n    </ConfirmModalContext.Provider>\n  )\n}\n\nexport function useConfirmModal(): ConfirmModalValue {\n  const context = useContext(ConfirmModalContext)\n  if (context === null) {\n    throw new Error(\n      'useConfirmModal must be used within a ConfirmModal Provider',\n    )\n  }\n  return context\n}\n"],"mappings":"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","names":["open"]}

package/build/modern/chunk-ZPHPCKAG.js

@@ -0,0 +1,41 @@
+// src/components/Text.tsx
+import {
+  Em,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  P,
+  Small,
+  Span,
+  Strong
+} from "styled-system/jsx";
+import { jsx } from "react/jsx-runtime";
+function Text(props) {
+  const { as = "p", ...pandaJSXProps } = props;
+  const cache = {
+    h1: H1,
+    h2: H2,
+    h3: H3,
+    h4: H4,
+    h5: H5,
+    h6: H6,
+    strong: Strong,
+    em: Em,
+    small: Small,
+    span: Span,
+    p: P
+  };
+  if (as in cache) {
+    const Component = cache[as];
+    return /* @__PURE__ */ jsx(Component, { ...pandaJSXProps });
+  }
+  return /* @__PURE__ */ jsx(P, { ...pandaJSXProps });
+}
+
+export {
+  Text
+};
+//# sourceMappingURL=chunk-ZPHPCKAG.js.map

package/build/modern/chunk-ZPHPCKAG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Text.tsx"],"sourcesContent":["import {\n  Em,\n  H1,\n  H2,\n  H3,\n  H4,\n  H5,\n  H6,\n  P,\n  Small,\n  Span,\n  Strong,\n  type PProps,\n} from 'styled-system/jsx'\n\n/**\n * This module exports a component for rendering text utilizing the styled-system JSX utility.\n * @module @cerberus/react/Text\n */\n\nexport type Headings = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\nexport type TextElements = 'p' | 'strong' | 'em' | 'small' | 'span'\n\n// For some reason we have to use the HTMLParagraphElement type here\n// or else TS will fail for non-style props like 'id' or 'className'\nexport interface TextProps extends PProps {\n  /**\n   * The element to render as. Defaults to 'p'.\n   */\n  as?: TextElements | Headings\n}\n\n/**\n * A component for rendering text utilizing the styled-system JSX utility.\n * @definition [Text docs](https://cerberus.digitalu.design/react/text)\n * @example\n * ```tsx\n * <Text as=\"h1\" color=\"page.text.100\" textStyle={{\n *   base: 'heading-md',\n *   md: 'heading-lg',\n * }}>\n *  Hello, world!\n * </Text>\n */\nexport function Text(props: TextProps) {\n  const { as = 'p', ...pandaJSXProps } = props\n\n  const cache = {\n    h1: H1,\n    h2: H2,\n    h3: H3,\n    h4: H4,\n    h5: H5,\n    h6: H6,\n    strong: Strong,\n    em: Em,\n    small: Small,\n    span: Span,\n    p: P,\n  }\n\n  if (as in cache) {\n    const Component = cache[as as keyof typeof cache]\n    return <Component {...pandaJSXProps} />\n  }\n\n  return <P {...pandaJSXProps} />\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAkDI;AAnBJ,SAAS,KAAK,OAAkB;AACrC,QAAM,EAAE,KAAK,KAAK,GAAG,cAAc,IAAI;AAEvC,QAAM,QAAQ;AAAA,IACZ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,GAAG;AAAA,EACL;AAEA,MAAI,MAAM,OAAO;AACf,UAAM,YAAY,MAAM,EAAwB;AAChD,WAAO,oBAAC,aAAW,GAAG,eAAe;AAAA,EACvC;AAEA,SAAO,oBAAC,KAAG,GAAG,eAAe;AAC/B;","names":[]}

package/build/modern/components/FileStatus.js

@@ -2,11 +2,12 @@
 import {
   FileStatus,
   processStatus
-} from "../chunk-KABRV6TB.js";
+} from "../chunk-JXWNDJJW.js";
 import "../chunk-TYPULJMJ.js";
-import "../chunk-ILROS7ST.js";
-import "../chunk-LEBDLXJE.js";
-import "../chunk-WEL43I6Y.js";
+import "../chunk-DVCTN3GN.js";
+import "../chunk-RTLS6K4E.js";
+import "../chunk-2U2JYN3D.js";
+import "../chunk-OK3VJFQL.js";
 import "../chunk-EMDNETC7.js";
 import "../chunk-VIKVLJGG.js";
 import "../chunk-CF4TCMJI.js";

package/build/modern/components/Text.js

@@ -1,6 +1,6 @@
 import {
   Text
-} from "../chunk-L64HQGLQ.js";
+} from "../chunk-ZPHPCKAG.js";
 export {
   Text
 };

package/build/modern/components/admonition/admonition.js

@@ -1,9 +1,9 @@
 import {
   Admonition
-} from "../../chunk-3IT3V3YA.js";
-import "../../chunk-NJ37QRAI.js";
+} from "../../chunk-M3TZCQ7J.js";
 import "../../chunk-JQYW4IOC.js";
 import "../../chunk-OY33UHBG.js";
+import "../../chunk-NJ37QRAI.js";
 import "../../chunk-CF4TCMJI.js";
 import "../../chunk-IUF74GEL.js";
 import "../../chunk-UGFSACHC.js";

package/build/modern/components/admonition/index.js

@@ -1,8 +1,7 @@
 import "../../chunk-UR2NYAQC.js";
 import {
   Admonition
-} from "../../chunk-3IT3V3YA.js";
-import "../../chunk-NJ37QRAI.js";
+} from "../../chunk-M3TZCQ7J.js";
 import {
   AdmonitionParts
 } from "../../chunk-JQYW4IOC.js";
@@ -13,6 +12,7 @@ import {
   AdmonitionIndicator,
   AdmonitionRoot
 } from "../../chunk-OY33UHBG.js";
+import "../../chunk-NJ37QRAI.js";
 import "../../chunk-CF4TCMJI.js";
 import "../../chunk-IUF74GEL.js";
 import "../../chunk-UGFSACHC.js";

package/build/modern/components/checkbox/checkbox.js

@@ -1,10 +1,10 @@
 import {
   Checkbox
-} from "../../chunk-OY7BOKWW.js";
+} from "../../chunk-QBA6KLL7.js";
 import "../../chunk-NYEUNVKR.js";
 import "../../chunk-52ZQ26IV.js";
 import "../../chunk-ENJUQNVT.js";
-import "../../chunk-L64HQGLQ.js";
+import "../../chunk-ZPHPCKAG.js";
 import "../../chunk-GITT5645.js";
 import "../../chunk-VEAC4I3F.js";
 export {

package/build/modern/components/checkbox/index.js

@@ -1,7 +1,7 @@
 import "../../chunk-TIJAFPHQ.js";
 import {
   Checkbox
-} from "../../chunk-OY7BOKWW.js";
+} from "../../chunk-QBA6KLL7.js";
 import "../../chunk-NYEUNVKR.js";
 import {
   CheckboxParts
@@ -14,7 +14,7 @@ import {
   CheckboxLabel,
   CheckboxRoot
 } from "../../chunk-ENJUQNVT.js";
-import "../../chunk-L64HQGLQ.js";
+import "../../chunk-ZPHPCKAG.js";
 import "../../chunk-GITT5645.js";
 import "../../chunk-VEAC4I3F.js";
 export {

package/build/modern/components/cta-dialog/index.js

@@ -2,17 +2,17 @@ import "../../chunk-IKDXADLX.js";
 import {
   CTAModal,
   useCTAModal
-} from "../../chunk-A5UXCB4L.js";
+} from "../../chunk-SHBKM6EW.js";
 import "../../chunk-4LSTU6WU.js";
 import "../../chunk-QD3WAARV.js";
 import {
   createCTAModalActions
 } from "../../chunk-PLHYOCY3.js";
 import "../../chunk-DJOYRUNT.js";
-import "../../chunk-F3XFJHGR.js";
-import "../../chunk-Z2KBUTCO.js";
-import "../../chunk-V6EAWUCQ.js";
-import "../../chunk-SSR3CWJZ.js";
+import "../../chunk-D7PY357P.js";
+import "../../chunk-BMDNCJUB.js";
+import "../../chunk-TRT6OCHJ.js";
+import "../../chunk-LUGOJGMO.js";
 import "../../chunk-GB7W3YNU.js";
 import "../../chunk-CF4TCMJI.js";
 import "../../chunk-IUF74GEL.js";

package/build/modern/components/cta-dialog/provider.js

@@ -2,14 +2,14 @@
 import {
   CTAModal,
   useCTAModal
-} from "../../chunk-A5UXCB4L.js";
+} from "../../chunk-SHBKM6EW.js";
 import "../../chunk-4LSTU6WU.js";
 import "../../chunk-QD3WAARV.js";
 import "../../chunk-DJOYRUNT.js";
-import "../../chunk-F3XFJHGR.js";
-import "../../chunk-Z2KBUTCO.js";
-import "../../chunk-V6EAWUCQ.js";
-import "../../chunk-SSR3CWJZ.js";
+import "../../chunk-D7PY357P.js";
+import "../../chunk-BMDNCJUB.js";
+import "../../chunk-TRT6OCHJ.js";
+import "../../chunk-LUGOJGMO.js";
 import "../../chunk-GB7W3YNU.js";
 import "../../chunk-CF4TCMJI.js";
 import "../../chunk-IUF74GEL.js";

package/build/modern/components/date-picker/date-picker.js

@@ -1,6 +1,6 @@
 import {
   DatePicker
-} from "../../chunk-CEJIKL6N.js";
+} from "../../chunk-T44C3KQO.js";
 import "../../chunk-J76SGDYP.js";
 import "../../chunk-RW3YEBDW.js";
 export {

package/build/modern/components/date-picker/day-view.d.ts

@@ -1,2 +1,2 @@
 export { DatePickerDayView } from '../../_tsup-dts-rollup.js';
-export { DateValue } from '../../_tsup-dts-rollup.js';
+export { DateValue_alias_1 as DateValue } from '../../_tsup-dts-rollup.js';

package/build/modern/components/date-picker/index.d.ts

@@ -1,3 +1,9 @@
+export { parseDate_alias_1 as parseDate } from '../../_tsup-dts-rollup.js';
+export { DateValue_alias_2 as DateValue } from '../../_tsup-dts-rollup.js';
+export { CalendarDate_alias_1 as CalendarDate } from '../../_tsup-dts-rollup.js';
+export { today_alias_1 as today } from '../../_tsup-dts-rollup.js';
+export { getLocalTimeZone_alias_1 as getLocalTimeZone } from '../../_tsup-dts-rollup.js';
+export { DateFormatter_alias_1 as DateFormatter } from '../../_tsup-dts-rollup.js';
 export { DatePickerParts_alias_1 as DatePickerParts } from '../../_tsup-dts-rollup.js';
 export { DatePickerLabel_alias_1 as DatePickerLabel } from '../../_tsup-dts-rollup.js';
 export { DatePickerControl_alias_1 as DatePickerControl } from '../../_tsup-dts-rollup.js';

package/build/modern/components/date-picker/index.js

@@ -1,13 +1,19 @@
-import "../../chunk-U3ISYEUF.js";
+import {
+  CalendarDate,
+  DateFormatter,
+  getLocalTimeZone,
+  parseDate,
+  today
+} from "../../chunk-ADI4DOEW.js";
 import {
   RangePickerInput
-} from "../../chunk-ADZRQNW3.js";
+} from "../../chunk-P7FPAUWN.js";
 import {
   DatePicker
-} from "../../chunk-CEJIKL6N.js";
+} from "../../chunk-T44C3KQO.js";
 import {
   DatePickerInput
-} from "../../chunk-NP73HOHI.js";
+} from "../../chunk-GJBUGESH.js";
 import "../../chunk-ZL7AX5EM.js";
 import {
   DatePickerCalendar
@@ -53,6 +59,8 @@ import "../../chunk-53YVHIGJ.js";
 import "../../chunk-AUI74W7J.js";
 import "../../chunk-VEAC4I3F.js";
 export {
+  CalendarDate,
+  DateFormatter,
   DatePicker,
   DatePickerCalendar,
   DatePickerClearTrigger,
@@ -81,6 +89,9 @@ export {
   DatePickerViewControl,
   DatePickerViewTrigger,
   DatePickerYearSelect,
-  RangePickerInput
+  RangePickerInput,
+  getLocalTimeZone,
+  parseDate,
+  today
 };
 //# sourceMappingURL=index.js.map

package/build/modern/components/date-picker/input.js

@@ -1,6 +1,6 @@
 import {
   DatePickerInput
-} from "../../chunk-NP73HOHI.js";
+} from "../../chunk-GJBUGESH.js";
 import "../../chunk-ZL7AX5EM.js";
 import "../../chunk-J76SGDYP.js";
 import "../../chunk-RW3YEBDW.js";

package/build/modern/components/date-picker/range-input.js

@@ -1,7 +1,6 @@
-"use client";
 import {
   RangePickerInput
-} from "../../chunk-ADZRQNW3.js";
+} from "../../chunk-P7FPAUWN.js";
 import "../../chunk-ZL7AX5EM.js";
 import "../../chunk-J76SGDYP.js";
 import "../../chunk-RW3YEBDW.js";

package/build/modern/components/deprecated/Label.js

@@ -1,10 +1,11 @@
 import {
   Label
-} from "../../chunk-GBCF6DOS.js";
+} from "../../chunk-AN65HXHS.js";
 import "../../chunk-TYPULJMJ.js";
-import "../../chunk-ILROS7ST.js";
-import "../../chunk-LEBDLXJE.js";
-import "../../chunk-WEL43I6Y.js";
+import "../../chunk-DVCTN3GN.js";
+import "../../chunk-RTLS6K4E.js";
+import "../../chunk-2U2JYN3D.js";
+import "../../chunk-OK3VJFQL.js";
 import "../../chunk-EMDNETC7.js";
 import "../../chunk-VIKVLJGG.js";
 import "../../chunk-BL7G3577.js";