@cerberus-design/react 0.18.3 → 0.18.4

package/src/components/date-picker/input.tsx

@@ -18,8 +18,8 @@ export function DatePickerInput(props: DatePickerInputProps) {
       <DatePickerTrigger />
       <DatePickerParts.Input
         {...props}
-        placeholder={props.placeholder ?? 'DD MMM YYYY'}
         maxLength={11}
+        placeholder={props.placeholder ?? 'DD MMM YYYY'}
       />
     </DatePickerParts.Control>
   )

package/src/components/date-picker/range-input.tsx

@@ -1,21 +1,13 @@
-'use client'
-
-import type { DatePickerInputProps } from '@ark-ui/react/date-picker'
-import { useMemo, type InputHTMLAttributes } from 'react'
+import { type DatePickerInputProps } from '@ark-ui/react/date-picker'
 import { DatePickerParts } from './parts'
 import { DatePickerTrigger } from './trigger'
 
-export interface RangePickerInputProps
-  extends Omit<DatePickerInputProps, 'defaultValue'> {
-  /**
-   * The defaultValue to add for the inputs. The first item is the start date
-   * and the second item is the end date.
-   */
-  defaultValue?: [
-    InputHTMLAttributes<HTMLInputElement>['defaultValue'],
-    InputHTMLAttributes<HTMLInputElement>['defaultValue'],
-  ]
-}
+/**
+ * This private module contains the RangePickerInput component.
+ * @module RangePickerInput
+ */
+
+export type RangePickerInputProps = DatePickerInputProps
 
 /**
  * An abstraction of the DatePicker input that wraps the input and the
@@ -23,26 +15,19 @@ export interface RangePickerInputProps
  * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
  */
 export function RangePickerInput(props: RangePickerInputProps) {
-  const { defaultValue, ...nativeProps } = props
-
-  const startDate = useMemo(() => defaultValue?.[0], [defaultValue])
-  const endDate = useMemo(() => defaultValue?.[1], [defaultValue])
-
   return (
     <DatePickerParts.Control data-range>
       <DatePickerTrigger />
       <DatePickerParts.Input
-        {...nativeProps}
+        {...props}
         data-range-input
-        defaultValue={startDate}
         placeholder={props.placeholder ?? 'DD MMM YYYY'}
         maxLength={11}
         index={0}
       />
       <DatePickerParts.Input
-        {...nativeProps}
+        {...props}
         data-range-input
-        defaultValue={endDate}
         data-range-end-input
         placeholder={props.placeholder ?? 'DD MMM YYYY'}
         maxLength={11}

package/src/components/dialog/dialog.tsx

@@ -1,5 +1,6 @@
 import type { DialogContentProps } from '@ark-ui/react/dialog'
 import type { DialogVariantProps } from 'styled-system/recipes'
+import type { WithCss } from '../../types'
 import { Portal } from '../Portal'
 import { DialogBackdrop, DialogContent, DialogPositioner } from './primitives'
 
@@ -9,8 +10,9 @@ import { DialogBackdrop, DialogContent, DialogPositioner } from './primitives'
  */
 
 export interface DialogProps
-  extends Omit<DialogContentProps, 'size'>,
-    DialogVariantProps {}
+  extends Omit<DialogContentProps, 'size' | 'style'>,
+    DialogVariantProps,
+    WithCss {}
 
 /**
  * An abstraction of the Dialog primitives that controls the content of the

package/src/components/dialog/index.ts

@@ -2,3 +2,7 @@ export * from './parts'
 export * from './primitives'
 export * from './close-icon-trigger'
 export * from './dialog'
+
+export interface OpenChangeDetails {
+  open: boolean
+}

package/src/components/dialog/primitives.tsx

@@ -8,8 +8,9 @@ import {
   type DialogTitleProps,
   type DialogTriggerProps,
 } from '@ark-ui/react/dialog'
-import { cx } from 'styled-system/css'
+import { css, cx } from 'styled-system/css'
 import { dialog, type DialogVariantProps } from 'styled-system/recipes'
+import type { WithCss } from '../../types'
 
 /**
  * This module contains the primitives of the Dialog component.
@@ -65,13 +66,15 @@ export function DialogPositioner(props: DialogPositionerProps) {
 /**
  * The visible content of the dialog.
  */
-export function DialogContent(props: DialogContentProps & DialogVariantProps) {
-  const { size, ...contentProps } = props
+export function DialogContent(
+  props: DialogContentProps & DialogVariantProps & WithCss,
+) {
+  const { size, css: customStyles, ...contentProps } = props
   const styles = dialog({ size })
   return (
     <Dialog.Content
       {...contentProps}
-      className={cx(styles.content, contentProps.className)}
+      className={cx(styles.content, css(customStyles), contentProps.className)}
     />
   )
 }

package/src/components/field/field.tsx

@@ -8,6 +8,7 @@ import {
 } from './primitives'
 import { HStack } from 'styled-system/jsx'
 import { Show } from '../Show'
+import { HelperText } from './helper-text'
 
 export interface FieldProps extends FieldRootProps {
   /**
@@ -62,16 +63,17 @@ export function Field(props: FieldProps) {
 
       {fieldProps.children}
 
-      <Show when={fieldProps.helperText && !statusProps.invalid}>
-        <HStack justifyContent="space-between" w="full">
-          <FieldHelperText>{fieldProps.helperText}</FieldHelperText>
-          <Show when={fieldProps.secondaryHelperText}>
-            <FieldHelperText>{fieldProps.secondaryHelperText}</FieldHelperText>
-          </Show>
-        </HStack>
-      </Show>
+      <HStack justifyContent="space-between" w="full">
+        <HelperText invalid={statusProps.invalid}>
+          {fieldProps.helperText}
+        </HelperText>
+
+        <FieldErrorText>{fieldProps.errorText}</FieldErrorText>
 
-      <FieldErrorText>{fieldProps.errorText}</FieldErrorText>
+        <Show when={fieldProps.secondaryHelperText}>
+          <FieldHelperText>{fieldProps.secondaryHelperText}</FieldHelperText>
+        </Show>
+      </HStack>
     </FieldRoot>
   )
 }

package/src/components/field/helper-text.tsx

@@ -0,0 +1,20 @@
+import type { PropsWithChildren } from 'react'
+import { FieldHelperText } from './primitives'
+
+interface HelperTextProps {
+  invalid?: boolean
+}
+
+/**
+ * The HelperText component is an abstraction for hiding the helper text
+ * when the field is invalid. Ark UI assumes people want the helper text
+ * to always be visible, so this is a workaround for that.
+ */
+export function HelperText(props: PropsWithChildren<HelperTextProps>) {
+  if (props.invalid) return null
+  return (
+    <FieldHelperText data-has-content={Boolean(props.children)}>
+      {props.children}
+    </FieldHelperText>
+  )
+}

package/src/components/field/primitives.tsx

@@ -124,9 +124,6 @@ export function FieldInput(props: FieldInputProps) {
  */
 export function FieldHelperText(props: FieldHelperTextProps) {
   const styles = field()
-
-  if (!props.children) return null
-
   return (
     <Field.HelperText
       {...props}

package/src/context/confirm-modal.tsx

@@ -22,6 +22,7 @@ import {
   DialogDescription,
   DialogHeading,
   DialogProvider,
+  type OpenChangeDetails,
 } from '../components/dialog'
 import { useCerberusContext } from './cerberus'
 
@@ -75,12 +76,10 @@ export type ShowConfirmModalOptions =
   | NonDestructiveConfirmModalOptions
   | DestructiveConfirmOptions
 
-export type ShowResult =
-  | ((value: boolean | PromiseLike<boolean>) => void)
-  | null
+export type ShowResult = ((value: boolean | null) => void) | null
 
 export interface ConfirmModalValue {
-  show: (options: ShowConfirmModalOptions) => Promise<boolean>
+  show: (options: ShowConfirmModalOptions) => Promise<boolean | null>
 }
 
 const ConfirmModalContext = createContext<ConfirmModalValue | null>(null)
@@ -142,7 +141,7 @@ export function ConfirmModal(
 
   const handleShow = useCallback(
     (options: ShowConfirmModalOptions) => {
-      return new Promise<boolean>((resolve) => {
+      return new Promise<boolean | null>((resolve) => {
         setContent({ ...options })
         setOpen(true)
         resolveRef.current = resolve
@@ -151,6 +150,17 @@ export function ConfirmModal(
     [setOpen, setContent],
   )
 
+  const handleOpenChange = useCallback(
+    ({ open }: OpenChangeDetails) => {
+      setOpen(open)
+      if (!open) {
+        resolveRef.current?.(null)
+        resolveRef.current = null
+      }
+    },
+    [setOpen],
+  )
+
   const value = useMemo(
     () => ({
       show: handleShow,
@@ -162,36 +172,48 @@ export function ConfirmModal(
     <ConfirmModalContext.Provider value={value}>
       {props.children}
 
-      <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>
-        <Dialog size="sm">
-          <VStack gap="xl" w="full">
-            <VStack alignItems="flex-start" gap="md" w="full">
-              <HStack
-                alignSelf="center"
-                justify="center"
-                paddingBlockEnd="md"
-                w="full"
-              >
-                <Show
-                  when={palette === 'danger'}
-                  fallback={
-                    <Avatar
-                      gradient="charon-light"
-                      fallback={<ConfirmIcon size={24} />}
-                    />
-                  }
-                >
+      <DialogProvider open={open} onOpenChange={handleOpenChange}>
+        <Dialog
+          size="sm"
+          style={{
+            '--dialog-content-min-h': 'auto',
+          }}
+        >
+          <VStack
+            alignItems="flex-start"
+            gap="md"
+            justify="space-between"
+            w="full"
+          >
+            <HStack
+              alignSelf="center"
+              justify="center"
+              paddingBlockEnd="md"
+              w="full"
+            >
+              <Show
+                when={palette === 'danger'}
+                fallback={
                   <Avatar
-                    gradient="hades-dark"
+                    gradient="charon-light"
                     fallback={<ConfirmIcon size={24} />}
                   />
-                </Show>
-              </HStack>
-              <DialogHeading>{content?.heading}</DialogHeading>
+                }
+              >
+                <Avatar
+                  gradient="hades-dark"
+                  fallback={<ConfirmIcon size={24} />}
+                />
+              </Show>
+            </HStack>
+
+            <DialogHeading>{content?.heading}</DialogHeading>
+
+            <Show when={content?.description}>
               <DialogDescription>{content?.description}</DialogDescription>
-            </VStack>
+            </Show>
 
-            <HStack gap="4" w="full">
+            <HStack gap="md" pt="md" w="full">
               <Button
                 autoFocus
                 className={css({

package/src/context/prompt-modal.tsx

@@ -176,33 +176,42 @@ export function PromptModal(
       {props.children}
 
       <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>
-        <Dialog size="sm">
-          <VStack gap="xl" w="full">
-            <VStack alignItems="flex-start" gap="md" w="full">
-              <HStack
-                alignSelf="center"
-                justify="center"
-                paddingBlockEnd="md"
-                w="full"
-              >
-                <Show
-                  when={palette === 'danger'}
-                  fallback={
-                    <Avatar
-                      gradient="charon-light"
-                      fallback={<PromptIcon size={24} />}
-                    />
-                  }
-                >
+        <Dialog
+          size="sm"
+          style={{
+            '--dialog-content-min-h': 'auto',
+          }}
+        >
+          <VStack
+            alignItems="flex-start"
+            h="full"
+            justify="space-between"
+            w="full"
+          >
+            <HStack
+              alignSelf="center"
+              justify="center"
+              paddingBlockEnd="md"
+              w="full"
+            >
+              <Show
+                when={palette === 'danger'}
+                fallback={
                   <Avatar
-                    gradient="hades-dark"
+                    gradient="charon-light"
                     fallback={<PromptIcon size={24} />}
                   />
-                </Show>
-              </HStack>
-              <DialogHeading>{content?.heading}</DialogHeading>
-              <DialogDescription>{content?.description}</DialogDescription>
-            </VStack>
+                }
+              >
+                <Avatar
+                  gradient="hades-dark"
+                  fallback={<PromptIcon size={24} />}
+                />
+              </Show>
+            </HStack>
+
+            <DialogHeading>{content?.heading}</DialogHeading>
+            <DialogDescription>{content?.description}</DialogDescription>
 
             <VStack
               alignItems="flex-start"
@@ -210,18 +219,14 @@ export function PromptModal(
               marginBlockEnd="lg"
               w="full"
             >
-              <FieldRoot
-                ids={{
-                  control: 'confirm',
-                }}
-                invalid={!isValid}
-              >
+              <FieldRoot invalid={!isValid}>
                 <FieldLabel
                   className={hstack({
                     gap: 'xs',
-                    justify: 'flex-start !important',
+                    justify: 'flex-start',
                     marginBlockEnd: 'xs',
                     textStyle: 'label-md',
+                    w: 'initial',
                   })}
                 >
                   Type

package/src/types.ts

@@ -1 +1,22 @@
+import type { CSSProperties } from 'react'
+import type { SystemStyleObject } from 'styled-system/types'
+
+export interface WithCss {
+  /**
+   * The CSS styles to apply to the component.
+   * Can be a single style object or an array of style objects.
+   */
+  css?: SystemStyleObject | SystemStyleObject[]
+  /**
+   * The strict CSS styles to apply to the component. This will override any
+   * other styles applied to the component and is only recommended for advanced
+   * use cases.
+   *
+   * In most cases, you should use the `css` prop instead.
+   */
+  style?: CSSProperties | Record<string, number | string>
+}
+
+// types
+
 export type Positions = 'top' | 'right' | 'bottom' | 'left'

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

@@ -1 +0,0 @@
-{"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 size=\"sm\">\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;AAiGrB,cAII,YAJJ;AAxCH,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,+BAAC,UAAO,MAAK,MACX;AAAA,0BAAC,0BAAuB;AAAA,MAExB,qBAAC,UAAO,KAAI,MAAK,GAAE,QACjB;AAAA,4BAAC,UAAO,YAAW,cAAa,KAAI,MAAK,GAAE,QACzC,+BAAC,UAAO,KAAI,MAAK,GAAE,QACjB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,UAAS;AAAA,cACT,UACE;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM;AAAA,kBACN,UAAU,oBAAC,gBAAa,MAAM,IAAI;AAAA,kBAEjC;AAAA;AAAA,cACH;AAAA;AAAA,UAEJ;AAAA,UACA,oBAAC,iBAAe,mBAAS,SAAQ;AAAA,UACjC,oBAAC,qBAAmB,mBAAS,aAAY;AAAA,WAC3C,GACF;AAAA,QAEA,oBAAC,UAAO,KAAI,MAAK,GAAE,QACjB,8BAAC,OAAI,MAAM,SAAS,QAAQ,UACzB,WAAC,QAAQ,UACR;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM,SAAS,SAAS,SAAS;AAAA,YACjC,UACE,oBAAC,eAAY,SAAO,MAAE,kBAAoB;AAAA,YAG5C,8BAAC,eAAY,cAAY,OAAO,SAAS,mBACrC,kBAA4B,MAChC;AAAA;AAAA,UARK;AAAA,QASP,GAEJ,GACF;AAAA,SACF;AAAA,OACF,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-ADZRQNW3.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/date-picker/range-input.tsx"],"sourcesContent":["'use client'\n\nimport type { DatePickerInputProps } from '@ark-ui/react/date-picker'\nimport { useMemo, type InputHTMLAttributes } from 'react'\nimport { DatePickerParts } from './parts'\nimport { DatePickerTrigger } from './trigger'\n\nexport interface RangePickerInputProps\n  extends Omit<DatePickerInputProps, 'defaultValue'> {\n  /**\n   * The defaultValue to add for the inputs. The first item is the start date\n   * and the second item is the end date.\n   */\n  defaultValue?: [\n    InputHTMLAttributes<HTMLInputElement>['defaultValue'],\n    InputHTMLAttributes<HTMLInputElement>['defaultValue'],\n  ]\n}\n\n/**\n * An abstraction of the DatePicker input that wraps the input and the\n * triggers to open the DatePicker and clear the value.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n */\nexport function RangePickerInput(props: RangePickerInputProps) {\n  const { defaultValue, ...nativeProps } = props\n\n  const startDate = useMemo(() => defaultValue?.[0], [defaultValue])\n  const endDate = useMemo(() => defaultValue?.[1], [defaultValue])\n\n  return (\n    <DatePickerParts.Control data-range>\n      <DatePickerTrigger />\n      <DatePickerParts.Input\n        {...nativeProps}\n        data-range-input\n        defaultValue={startDate}\n        placeholder={props.placeholder ?? 'DD MMM YYYY'}\n        maxLength={11}\n        index={0}\n      />\n      <DatePickerParts.Input\n        {...nativeProps}\n        data-range-input\n        defaultValue={endDate}\n        data-range-end-input\n        placeholder={props.placeholder ?? 'DD MMM YYYY'}\n        maxLength={11}\n        index={1}\n      />\n    </DatePickerParts.Control>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,eAAyC;AA4B9C,SACE,KADF;AAPG,SAAS,iBAAiB,OAA8B;AAC7D,QAAM,EAAE,cAAc,GAAG,YAAY,IAAI;AAEzC,QAAM,YAAY,QAAQ,MAAM,eAAe,CAAC,GAAG,CAAC,YAAY,CAAC;AACjE,QAAM,UAAU,QAAQ,MAAM,eAAe,CAAC,GAAG,CAAC,YAAY,CAAC;AAE/D,SACE,qBAAC,gBAAgB,SAAhB,EAAwB,cAAU,MACjC;AAAA,wBAAC,qBAAkB;AAAA,IACnB;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACE,GAAG;AAAA,QACJ,oBAAgB;AAAA,QAChB,cAAc;AAAA,QACd,aAAa,MAAM,eAAe;AAAA,QAClC,WAAW;AAAA,QACX,OAAO;AAAA;AAAA,IACT;AAAA,IACA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACE,GAAG;AAAA,QACJ,oBAAgB;AAAA,QAChB,cAAc;AAAA,QACd,wBAAoB;AAAA,QACpB,aAAa,MAAM,eAAe;AAAA,QAClC,WAAW;AAAA,QACX,OAAO;AAAA;AAAA,IACT;AAAA,KACF;AAEJ;","names":[]}

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

@@ -1 +0,0 @@
-{"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  // There is a bug with the Root component that causes random date selection\n  // onBlur after the first selection if the format prop is used.\n  // ref: https://github.com/chakra-ui/ark/issues/3112#event-16047829195\n\n  // const handleFormat = useCallback((value: DateValue) => {\n  //   return formatISOToMilitary(value.toString())\n  // }, [])\n\n  return (\n    <DatePickerParts.Root\n      {...props}\n      positioning={{\n        placement: 'bottom-start',\n      }}\n    />\n  )\n}\n"],"mappings":";;;;;AAwBI;AAVG,SAAS,WAAW,OAA4B;AASrD,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-DHKSNGQX.js

@@ -1,156 +0,0 @@
-import {
-  Dialog
-} from "./chunk-Z2KBUTCO.js";
-import {
-  DialogCloseTrigger,
-  DialogDescription,
-  DialogHeading,
-  DialogProvider
-} from "./chunk-SSR3CWJZ.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 value = useMemo(
-    () => ({
-      show: handleShow
-    }),
-    [handleShow]
-  );
-  return /* @__PURE__ */ jsxs(ConfirmModalContext.Provider, { value, children: [
-    props.children,
-    /* @__PURE__ */ jsx(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ jsx(Dialog, { size: "sm", children: /* @__PURE__ */ jsxs(VStack, { gap: "xl", w: "full", children: [
-      /* @__PURE__ */ jsxs(VStack, { alignItems: "flex-start", gap: "md", 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(DialogDescription, { children: content?.description })
-      ] }),
-      /* @__PURE__ */ jsxs(HStack, { gap: "4", 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-DHKSNGQX.js.map

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

@@ -1 +0,0 @@
-{"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} 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 =\n  | ((value: boolean | PromiseLike<boolean>) => void)\n  | null\n\nexport interface ConfirmModalValue {\n  show: (options: ShowConfirmModalOptions) => Promise<boolean>\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>((resolve) => {\n        setContent({ ...options })\n        setOpen(true)\n        resolveRef.current = resolve\n      })\n    },\n    [setOpen, setContent],\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={(e) => setOpen(e.open)}>\n        <Dialog size=\"sm\">\n          <VStack gap=\"xl\" w=\"full\">\n            <VStack alignItems=\"flex-start\" gap=\"md\" w=\"full\">\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              <DialogHeading>{content?.heading}</DialogHeading>\n              <DialogDescription>{content?.description}</DialogDescription>\n            </VStack>\n\n            <HStack gap=\"4\" 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":[]}