@cerberus-design/react 0.14.2-next-81321e7 → 0.14.2-next-2f75188

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/DatePicker.client.tsx"],"sourcesContent":["'use client'\n\nimport {\n  DatePicker as ArkDP,\n  type DatePickerContentProps,\n  type DatePickerInputProps,\n  type DatePickerRootProps,\n  type DatePickerTriggerProps,\n  type DatePickerViewControlProps,\n  type DatePickerViewProps,\n} from '@ark-ui/react'\nimport { Portal } from './Portal'\nimport { datePicker, iconButton } from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport {\n  DatePickerView,\n  DatePickerContext,\n  DatePickerTable,\n  DatePickerTableHeader,\n  DatePickerTableCellTrigger,\n  DatePickerTableCell,\n  DatePickerViewControl,\n} from './DatePicker.server'\nimport { IconButton } from './IconButton'\nimport { Button } from './Button'\nimport { useCerberusContext } from '../context/cerberus'\nimport { useMemo, type InputHTMLAttributes } from 'react'\n\n/**\n * This module contains the DatePicker client family components.\n * @module DatePicker:client\n */\n\n// We are not exposing this to the public API\nconst datePickerStyles = datePicker()\n\n/**\n * The main context provider for the DatePicker family components.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePicker(props: DatePickerRootProps) {\n  const states = useFieldContext()\n\n  // TODO: Remove this once the bug is fixed: https://github.com/chakra-ui/ark/issues/3112\n\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  // const handleFormat = useCallback((value: DateValue) => {\n  //   return formatISOToMilitary(value.toString())\n  // }, [])\n\n  return (\n    <ArkDP.Root\n      {...props}\n      {...states}\n      positioning={{\n        placement: 'bottom-start',\n      }}\n    />\n  )\n}\n\n/**\n * An abstraction of the DatePicker control that contains the prev, view, and\n * next triggers which control the calendar output.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerViewControlGroup />\n * ```\n */\nexport function DatePickerViewControlGroup(props: DatePickerViewControlProps) {\n  const { icons } = useCerberusContext()\n  const { calendarPrev: PrevIcon, calendarNext: NextIcon } = icons\n  return (\n    <DatePickerViewControl {...props}>\n      <ArkDP.PrevTrigger asChild>\n        <IconButton ariaLabel=\"Previous\" size=\"sm\">\n          <PrevIcon />\n        </IconButton>\n      </ArkDP.PrevTrigger>\n\n      <ArkDP.ViewTrigger asChild>\n        <Button\n          className={css({\n            h: '2rem',\n            paddingInline: 'md',\n          })}\n          shape=\"rounded\"\n          size=\"sm\"\n          usage=\"ghost\"\n        >\n          <ArkDP.RangeText />\n        </Button>\n      </ArkDP.ViewTrigger>\n\n      <ArkDP.NextTrigger asChild>\n        <IconButton ariaLabel=\"Next\" size=\"sm\">\n          <NextIcon />\n        </IconButton>\n      </ArkDP.NextTrigger>\n    </DatePickerViewControl>\n  )\n}\n\n/**\n * The trigger component for the DatePicker which opens the calendar.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTrigger />\n * ```\n */\nexport function DatePickerTrigger(props: DatePickerTriggerProps) {\n  const { icons } = useCerberusContext()\n  const { calendar: CalendarIcon } = icons\n  return (\n    <ArkDP.Trigger\n      {...props}\n      className={cx(\n        props.className,\n        iconButton({\n          size: 'sm',\n          usage: 'ghost',\n        }),\n        datePickerStyles.trigger,\n      )}\n    >\n      <CalendarIcon />\n    </ArkDP.Trigger>\n  )\n}\n\n/**\n * The input component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerInput(props: DatePickerInputProps) {\n  const { invalid, ...fieldStates } = useFieldContext()\n  return (\n    <ArkDP.Control className={datePickerStyles.control}>\n      <DatePickerTrigger />\n      <ArkDP.Input\n        {...props}\n        {...fieldStates}\n        {...(invalid && { 'aria-invalid': true })}\n        className={cx(props.className, datePickerStyles.input)}\n        placeholder={props.placeholder ?? 'DD MMM YYYY'}\n        maxLength={11}\n      />\n    </ArkDP.Control>\n  )\n}\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 * The input component for the DatePicker that uses ranges.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\" selection=\"range\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <RangePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function RangePickerInput(props: RangePickerInputProps) {\n  const { invalid, ...fieldStates } = useFieldContext()\n  const { defaultValue, ...nativeProps } = props\n\n  const startDate = useMemo(() => defaultValue?.[0], [defaultValue])\n  const endDate = useMemo(() => defaultValue?.[1], [defaultValue])\n\n  return (\n    <ArkDP.Control data-range className={datePickerStyles.control}>\n      <DatePickerTrigger />\n      <ArkDP.Input\n        {...nativeProps}\n        {...fieldStates}\n        {...(invalid && { 'aria-invalid': true })}\n        data-range-input\n        defaultValue={startDate}\n        className={cx(props.className, datePickerStyles.input)}\n        placeholder={props.placeholder ?? 'DD MMM YYYY'}\n        maxLength={11}\n        index={0}\n      />\n      <ArkDP.Input\n        {...nativeProps}\n        {...fieldStates}\n        {...(invalid && { 'aria-invalid': true })}\n        data-range-input\n        defaultValue={endDate}\n        data-range-end-input\n        className={cx(props.className, datePickerStyles.input)}\n        placeholder={props.placeholder ?? 'DD MMM YYYY'}\n        maxLength={11}\n        index={1}\n      />\n    </ArkDP.Control>\n  )\n}\n\n/**\n * The content component for the DatePicker which contains the calendar.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerContent(\n  props: DatePickerContentProps & {\n    withModal?: boolean\n  },\n) {\n  const { children, withModal, ...contentProps } = props\n  return (\n    <Portal disabled={withModal ?? false}>\n      <ArkDP.Positioner className={datePickerStyles.positioner}>\n        <ArkDP.Content\n          {...contentProps}\n          className={cx(contentProps.className, datePickerStyles.content)}\n        >\n          {children}\n        </ArkDP.Content>\n      </ArkDP.Positioner>\n    </Portal>\n  )\n}\n\n/**\n * The day view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerDayView(props: Omit<DatePickerViewProps, 'view'>) {\n  function isToday(date: ArkDP.DateValue): boolean {\n    const today = new Date()\n    const formatted = today.toISOString().split('T')[0]\n    const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`\n    return formatted === arkDate\n  }\n\n  function isPastDay(date: ArkDP.DateValue): boolean {\n    const today = new Date()\n    const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`\n    return new Date(arkDate) < today\n  }\n\n  function getDayValue(date: ArkDP.DateValue): 'today' | 'past' | 'future' {\n    if (isToday(date)) return 'today'\n    if (isPastDay(date)) return 'past'\n    return 'future'\n  }\n\n  return (\n    <DatePickerView {...props} view=\"day\">\n      <DatePickerContext>\n        {(datePicker) => (\n          <>\n            <DatePickerViewControlGroup />\n\n            <DatePickerTable>\n              <ArkDP.TableHead>\n                <ArkDP.TableRow>\n                  {datePicker.weekDays.map((weekDay, id) => (\n                    <DatePickerTableHeader key={id}>\n                      {weekDay.narrow}\n                    </DatePickerTableHeader>\n                  ))}\n                </ArkDP.TableRow>\n              </ArkDP.TableHead>\n\n              <ArkDP.TableBody>\n                {datePicker.weeks.map((week, id) => (\n                  <ArkDP.TableRow key={id}>\n                    {week.map((day, id) => (\n                      <DatePickerTableCell key={id} value={day}>\n                        <DatePickerTableCellTrigger\n                          data-date={getDayValue(day)}\n                        >\n                          {day.day}\n                        </DatePickerTableCellTrigger>\n                      </DatePickerTableCell>\n                    ))}\n                  </ArkDP.TableRow>\n                ))}\n              </ArkDP.TableBody>\n            </DatePickerTable>\n          </>\n        )}\n      </DatePickerContext>\n    </DatePickerView>\n  )\n}\n\n/**\n * The month view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerMonthView(props: Omit<DatePickerViewProps, 'view'>) {\n  return (\n    <ArkDP.View {...props} view=\"month\">\n      <ArkDP.Context>\n        {(datePicker) => (\n          <>\n            <DatePickerViewControlGroup />\n\n            <DatePickerTable>\n              <ArkDP.TableBody>\n                {datePicker\n                  .getMonthsGrid({ columns: 4, format: 'short' })\n                  .map((months, id) => (\n                    <ArkDP.TableRow key={id}>\n                      {months.map((month, id) => (\n                        <DatePickerTableCell key={id} value={month.value}>\n                          <DatePickerTableCellTrigger>\n                            {month.label}\n                          </DatePickerTableCellTrigger>\n                        </DatePickerTableCell>\n                      ))}\n                    </ArkDP.TableRow>\n                  ))}\n              </ArkDP.TableBody>\n            </DatePickerTable>\n          </>\n        )}\n      </ArkDP.Context>\n    </ArkDP.View>\n  )\n}\n\n/**\n * The year view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerYearView(props: Omit<DatePickerViewProps, 'view'>) {\n  return (\n    <ArkDP.View {...props} view=\"year\">\n      <ArkDP.Context>\n        {(datePicker) => (\n          <>\n            <DatePickerViewControlGroup />\n\n            <DatePickerTable>\n              <ArkDP.TableBody>\n                {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (\n                  <ArkDP.TableRow key={id}>\n                    {years.map((year, id) => (\n                      <DatePickerTableCell key={id} value={year.value}>\n                        <DatePickerTableCellTrigger>\n                          {year.label}\n                        </DatePickerTableCellTrigger>\n                      </DatePickerTableCell>\n                    ))}\n                  </ArkDP.TableRow>\n                ))}\n              </ArkDP.TableBody>\n            </DatePickerTable>\n          </>\n        )}\n      </ArkDP.Context>\n    </ArkDP.View>\n  )\n}\n\n/**\n * An abstraction of the DatePicker content components that contain the\n * different calendar views and controls.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerCalendar(props: { withModal?: boolean }) {\n  return (\n    <DatePickerContent withModal={props.withModal}>\n      <DatePickerDayView />\n      <DatePickerMonthView />\n      <DatePickerYearView />\n    </DatePickerContent>\n  )\n}\n"],"mappings":"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","names":["datePicker","id"]}

package/build/modern/{chunk-Q7BRMIBR.js → chunk-ZL6ZITLA.js}

@@ -9,4 +9,4 @@ function ModalDescription(props) {
 export {
   ModalDescription
 };
-//# sourceMappingURL=chunk-Q7BRMIBR.js.map
+//# sourceMappingURL=chunk-ZL6ZITLA.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ModalDescription.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalDescription component for a customizable modal.\n * @module\n */\n\nexport type ModalDescriptionProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * @deprecated use `DialogDescription` instead\n */\nexport function ModalDescription(props: ModalDescriptionProps) {\n  return <p {...props} className={cx(props.className, modal().description)} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAcb;AADF,SAAS,iBAAiB,OAA8B;AAC7D,SAAO,oBAAC,OAAG,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,WAAW,GAAG;AAC5E;","names":[]}

package/build/modern/components/DatePicker.client.js

@@ -10,11 +10,11 @@ import {
   DatePickerViewControlGroup,
   DatePickerYearView,
   RangePickerInput
-} from "../chunk-Q4JXWPU7.js";
-import "../chunk-IQJDVFPP.js";
-import "../chunk-APD6IX5R.js";
-import "../chunk-5EWCH7AI.js";
+} from "../chunk-YKKNWILF.js";
 import "../chunk-UZDVOIW5.js";
+import "../chunk-5EWCH7AI.js";
+import "../chunk-APD6IX5R.js";
+import "../chunk-IQJDVFPP.js";
 import "../chunk-GITT5645.js";
 import "../chunk-EXGKZGML.js";
 export {

package/build/modern/components/Dialog.client.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  DialogCloseIconTrigger
+} from "../chunk-6BN3XKQF.js";
+import "../chunk-APD6IX5R.js";
+import "../chunk-GITT5645.js";
+export {
+  DialogCloseIconTrigger
+};
+//# sourceMappingURL=Dialog.client.js.map

package/build/modern/components/Dialog.client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/Dialog.js

@@ -0,0 +1,24 @@
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogDescription,
+  DialogHeading,
+  DialogPositioner,
+  DialogProvider,
+  DialogTrigger
+} from "../chunk-TFL56AYR.js";
+import "../chunk-IQJDVFPP.js";
+export {
+  Dialog,
+  DialogBackdrop,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogDescription,
+  DialogHeading,
+  DialogPositioner,
+  DialogProvider,
+  DialogTrigger
+};
+//# sourceMappingURL=Dialog.js.map

package/build/modern/components/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/FileStatus.js

@@ -2,11 +2,11 @@
 import {
   FileStatus,
   processStatus
-} from "../chunk-USYM6XU6.js";
+} from "../chunk-O6LFWUHI.js";
 import "../chunk-WZJ5UQNM.js";
-import "../chunk-APD6IX5R.js";
 import "../chunk-JWIJHSI6.js";
 import "../chunk-UZDVOIW5.js";
+import "../chunk-APD6IX5R.js";
 import "../chunk-GCQMH4QA.js";
 import "../chunk-BUVVRQLZ.js";
 import "../chunk-GITT5645.js";

package/build/modern/components/Modal.js

@@ -1,6 +1,6 @@
 import {
   Modal
-} from "../chunk-BE4EOU2P.js";
+} from "../chunk-JIRW4XOJ.js";
 export {
   Modal
 };

package/build/modern/components/ModalDescription.js

@@ -1,6 +1,6 @@
 import {
   ModalDescription
-} from "../chunk-Q7BRMIBR.js";
+} from "../chunk-ZL6ZITLA.js";
 export {
   ModalDescription
 };

package/build/modern/components/ModalHeader.js

@@ -1,6 +1,6 @@
 import {
   ModalHeader
-} from "../chunk-XY6WL55R.js";
+} from "../chunk-NUMM4TNC.js";
 export {
   ModalHeader
 };

package/build/modern/components/ModalHeading.js

@@ -1,6 +1,6 @@
 import {
   ModalHeading
-} from "../chunk-2UXE5PDG.js";
+} from "../chunk-7NN3SJ7W.js";
 export {
   ModalHeading
 };

package/build/modern/context/confirm-modal.js

@@ -2,11 +2,11 @@
 import {
   ConfirmModal,
   useConfirmModal
-} from "../chunk-YJI4Y7BH.js";
-import "../chunk-BE4EOU2P.js";
-import "../chunk-Q7BRMIBR.js";
-import "../chunk-XY6WL55R.js";
-import "../chunk-2UXE5PDG.js";
+} from "../chunk-MUTAYS3P.js";
+import "../chunk-JIRW4XOJ.js";
+import "../chunk-ZL6ZITLA.js";
+import "../chunk-NUMM4TNC.js";
+import "../chunk-7NN3SJ7W.js";
 import "../chunk-IQJDVFPP.js";
 import "../chunk-GCQMH4QA.js";
 import "../chunk-BUVVRQLZ.js";

package/build/modern/context/cta-modal.js

@@ -2,13 +2,13 @@
 import {
   CTAModal,
   useCTAModal
-} from "../chunk-XDDLXEFV.js";
-import "../chunk-BE4EOU2P.js";
-import "../chunk-Q7BRMIBR.js";
-import "../chunk-XY6WL55R.js";
-import "../chunk-2UXE5PDG.js";
-import "../chunk-IQJDVFPP.js";
+} from "../chunk-R4RFWDBM.js";
+import "../chunk-JIRW4XOJ.js";
+import "../chunk-ZL6ZITLA.js";
+import "../chunk-NUMM4TNC.js";
+import "../chunk-7NN3SJ7W.js";
 import "../chunk-APD6IX5R.js";
+import "../chunk-IQJDVFPP.js";
 import "../chunk-GCQMH4QA.js";
 import "../chunk-BUVVRQLZ.js";
 import "../chunk-GITT5645.js";

package/build/modern/context/notification-center.js

@@ -2,10 +2,10 @@
 import {
   NotificationCenter,
   useNotificationCenter
-} from "../chunk-XHM46FXT.js";
+} from "../chunk-JAROS4Q3.js";
+import "../chunk-RDRD6ACD.js";
 import "../chunk-UXY3KCC3.js";
 import "../chunk-SLHYBPJ5.js";
-import "../chunk-RDRD6ACD.js";
 import "../chunk-IQJDVFPP.js";
 import "../chunk-BUVVRQLZ.js";
 import "../chunk-GITT5645.js";

package/build/modern/context/prompt-modal.js

@@ -2,15 +2,15 @@
 import {
   PromptModal,
   usePromptModal
-} from "../chunk-ZHBHPMTP.js";
-import "../chunk-BE4EOU2P.js";
-import "../chunk-Q7BRMIBR.js";
-import "../chunk-XY6WL55R.js";
-import "../chunk-2UXE5PDG.js";
+} from "../chunk-VGEK2DQB.js";
+import "../chunk-JIRW4XOJ.js";
+import "../chunk-ZL6ZITLA.js";
+import "../chunk-NUMM4TNC.js";
+import "../chunk-7NN3SJ7W.js";
 import "../chunk-MZ3UCDUL.js";
 import "../chunk-NMF2HYWO.js";
-import "../chunk-IQJDVFPP.js";
 import "../chunk-UZDVOIW5.js";
+import "../chunk-IQJDVFPP.js";
 import "../chunk-GCQMH4QA.js";
 import "../chunk-BUVVRQLZ.js";
 import "../chunk-GITT5645.js";

package/build/modern/index.js

@@ -1,15 +1,21 @@
 import {
   NotificationCenter,
   useNotificationCenter
-} from "./chunk-XHM46FXT.js";
+} from "./chunk-JAROS4Q3.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-ZHBHPMTP.js";
+} from "./chunk-VGEK2DQB.js";
 import {
   ThemeProvider,
   useThemeContext
 } from "./chunk-EB37HRCN.js";
+import {
+  Textarea
+} from "./chunk-JIJM6JFJ.js";
+import {
+  Th
+} from "./chunk-SGKHA4EB.js";
 import {
   Thead
 } from "./chunk-Y6QQCRQV.js";
@@ -22,11 +28,14 @@ import {
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-YJI4Y7BH.js";
+} from "./chunk-MUTAYS3P.js";
 import {
   CTAModal,
   useCTAModal
-} from "./chunk-XDDLXEFV.js";
+} from "./chunk-R4RFWDBM.js";
+import {
+  Spinner
+} from "./chunk-7SYJFI5E.js";
 import {
   Table,
   Tr
@@ -56,11 +65,11 @@ import {
   Text
 } from "./chunk-RU5LOXWI.js";
 import {
-  Textarea
-} from "./chunk-JIJM6JFJ.js";
+  NavMenuTrigger
+} from "./chunk-PM7CWT3N.js";
 import {
-  Th
-} from "./chunk-SGKHA4EB.js";
+  Notification
+} from "./chunk-RDRD6ACD.js";
 import {
   NotificationDescription
 } from "./chunk-UXY3KCC3.js";
@@ -75,20 +84,29 @@ import {
   Select
 } from "./chunk-KKHL3ZO4.js";
 import {
-  Spinner
-} from "./chunk-7SYJFI5E.js";
+  Legend
+} from "./chunk-ILQW5VZT.js";
+import {
+  Menu,
+  MenuContent,
+  MenuGroupLabel,
+  MenuItem,
+  MenuItemGroup,
+  MenuSeparator,
+  MenuTrigger
+} from "./chunk-RUR5MV54.js";
 import {
   Modal
-} from "./chunk-BE4EOU2P.js";
+} from "./chunk-JIRW4XOJ.js";
 import {
   ModalDescription
-} from "./chunk-Q7BRMIBR.js";
+} from "./chunk-ZL6ZITLA.js";
 import {
   ModalHeader
-} from "./chunk-XY6WL55R.js";
+} from "./chunk-NUMM4TNC.js";
 import {
   ModalHeading
-} from "./chunk-2UXE5PDG.js";
+} from "./chunk-7NN3SJ7W.js";
 import {
   NavMenuLink
 } from "./chunk-WPVDQRRF.js";
@@ -96,26 +114,26 @@ import {
   NavMenuList,
   getPosition
 } from "./chunk-UZVQ4INR.js";
-import {
-  NavMenuTrigger
-} from "./chunk-PM7CWT3N.js";
 import {
   NavMenu,
   useNavMenuContext
 } from "./chunk-6WS765J3.js";
 import {
-  Notification
-} from "./chunk-RDRD6ACD.js";
+  Fieldset
+} from "./chunk-3ZDFQO25.js";
 import {
   FieldsetLabel
 } from "./chunk-PZAZKQMO.js";
 import {
   FileStatus,
   processStatus
-} from "./chunk-USYM6XU6.js";
+} from "./chunk-O6LFWUHI.js";
 import {
   ProgressBar
 } from "./chunk-WZJ5UQNM.js";
+import {
+  FieldMessage
+} from "./chunk-JWIJHSI6.js";
 import {
   FileUploader
 } from "./chunk-25HMVHLT.js";
@@ -125,18 +143,6 @@ import {
 import {
   Label
 } from "./chunk-NMF2HYWO.js";
-import {
-  Legend
-} from "./chunk-ILQW5VZT.js";
-import {
-  Menu,
-  MenuContent,
-  MenuGroupLabel,
-  MenuItem,
-  MenuItemGroup,
-  MenuSeparator,
-  MenuTrigger
-} from "./chunk-RUR5MV54.js";
 import {
   Checkbox
 } from "./chunk-N24COMHJ.js";
@@ -154,13 +160,11 @@ import {
   DatePickerViewControlGroup,
   DatePickerYearView,
   RangePickerInput
-} from "./chunk-Q4JXWPU7.js";
-import {
-  Portal
-} from "./chunk-IQJDVFPP.js";
+} from "./chunk-YKKNWILF.js";
 import {
-  IconButton
-} from "./chunk-APD6IX5R.js";
+  Field,
+  useFieldContext
+} from "./chunk-UZDVOIW5.js";
 import {
   DatePickerContext,
   DatePickerLabel,
@@ -171,6 +175,26 @@ import {
   DatePickerView,
   DatePickerViewControl
 } from "./chunk-5EWCH7AI.js";
+import {
+  DialogCloseIconTrigger
+} from "./chunk-6BN3XKQF.js";
+import {
+  IconButton
+} from "./chunk-APD6IX5R.js";
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogDescription,
+  DialogHeading,
+  DialogPositioner,
+  DialogProvider,
+  DialogTrigger
+} from "./chunk-TFL56AYR.js";
+import {
+  Portal
+} from "./chunk-IQJDVFPP.js";
 import {
   Droppable
 } from "./chunk-TKI2CKHH.js";
@@ -181,16 +205,6 @@ import {
   FeatureFlags,
   useFeatureFlags
 } from "./chunk-CJFW36DZ.js";
-import {
-  FieldMessage
-} from "./chunk-JWIJHSI6.js";
-import {
-  Fieldset
-} from "./chunk-3ZDFQO25.js";
-import {
-  Field,
-  useFieldContext
-} from "./chunk-UZDVOIW5.js";
 import {
   AccordionItemGroup
 } from "./chunk-BAWZBF5Q.js";
@@ -305,6 +319,16 @@ export {
   DatePickerViewControl,
   DatePickerViewControlGroup,
   DatePickerYearView,
+  Dialog,
+  DialogBackdrop,
+  DialogCloseIconTrigger,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogDescription,
+  DialogHeading,
+  DialogPositioner,
+  DialogProvider,
+  DialogTrigger,
   Droppable,
   FeatureFlag,
   FeatureFlags,

package/build/modern/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Accordion'\nexport * from './components/Accordion.client'\nexport * from './components/AccordionItemGroup'\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/DatePicker.client'\nexport * from './components/DatePicker.server'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/Fieldset'\nexport * from './components/FieldsetLabel'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Legend'\nexport * from './components/Menu'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tabs.client'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Text'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Tooltip'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/cerberus'\nexport * from './context/confirm-modal'\nexport * from './context/cta-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\nexport * from './hooks/useRootColors'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/index'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,cAAc;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Accordion'\nexport * from './components/Accordion.client'\nexport * from './components/AccordionItemGroup'\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/DatePicker.client'\nexport * from './components/DatePicker.server'\nexport * from './components/Dialog'\nexport * from './components/Dialog.client'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/Fieldset'\nexport * from './components/FieldsetLabel'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Legend'\nexport * from './components/Menu'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tabs.client'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Text'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Tooltip'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/cerberus'\nexport * from './context/confirm-modal'\nexport * from './context/cta-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\nexport * from './hooks/useRootColors'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/index'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgGA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.14.2-next-81321e7",
+  "version": "0.14.2-next-2f75188",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -26,7 +26,7 @@
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@0.14.2-next-81321e7"
+    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@0.14.2-next-2f75188"
   },
   "publishConfig": {
     "access": "public"

package/src/components/DatePicker.client.tsx

@@ -250,10 +250,14 @@ export function RangePickerInput(props: RangePickerInputProps) {
  * </Field>
  * ```
  */
-export function DatePickerContent(props: DatePickerContentProps) {
-  const { children, ...contentProps } = props
+export function DatePickerContent(
+  props: DatePickerContentProps & {
+    withModal?: boolean
+  },
+) {
+  const { children, withModal, ...contentProps } = props
   return (
-    <Portal>
+    <Portal disabled={withModal ?? false}>
       <ArkDP.Positioner className={datePickerStyles.positioner}>
         <ArkDP.Content
           {...contentProps}
@@ -446,9 +450,9 @@ export function DatePickerYearView(props: Omit<DatePickerViewProps, 'view'>) {
  * </Field>
  * ```
  */
-export function DatePickerCalendar() {
+export function DatePickerCalendar(props: { withModal?: boolean }) {
   return (
-    <DatePickerContent>
+    <DatePickerContent withModal={props.withModal}>
       <DatePickerDayView />
       <DatePickerMonthView />
       <DatePickerYearView />

package/src/components/Dialog.client.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import {
+  Dialog as ArkDialog,
+  type DialogCloseTriggerProps,
+} from '@ark-ui/react'
+import { dialog } from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus/styled-system/css'
+import { IconButton } from './IconButton'
+import { useCerberusContext } from '../context/cerberus'
+
+/**
+ * This module contains client-side components for the Dialog family.
+ * @module @cerberus-design/react/dialog
+ */
+
+export function DialogCloseIconTrigger(props: DialogCloseTriggerProps) {
+  const { icons } = useCerberusContext()
+  const { close: CloseIcon } = icons
+
+  const styles = dialog()
+
+  return (
+    <ArkDialog.CloseTrigger
+      {...props}
+      className={cx(props.className, styles.closeTrigger)}
+      asChild
+    >
+      <IconButton
+        ariaLabel="Close dialog"
+        palette="action"
+        size="lg"
+        usage="ghost"
+      >
+        <CloseIcon />
+      </IconButton>
+    </ArkDialog.CloseTrigger>
+  )
+}