@cerberus-design/react 0.14.2-next-d5ed509 → 0.14.2-next-81321e7

package/build/legacy/_tsup-dts-rollup.d.cts

@@ -2649,10 +2649,23 @@ export { RadioRecipe as RadioRecipe_alias_1 }
  * </Field>
  * ```
  */
-declare function RangePickerInput(props: DatePickerInputProps): JSX_2.Element;
+declare function RangePickerInput(props: RangePickerInputProps): JSX_2.Element;
 export { RangePickerInput }
 export { RangePickerInput as RangePickerInput_alias_1 }
 
+declare 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']
+    ];
+}
+export { RangePickerInputProps }
+export { RangePickerInputProps as RangePickerInputProps_alias_1 }
+
 export { rectIntersection }
 
 /**

package/build/legacy/components/DatePicker.client.cjs

@@ -167,6 +167,7 @@ function useCerberusContext() {
 }
 
 // src/components/DatePicker.client.tsx
+var import_react6 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var datePickerStyles2 = (0, import_recipes4.datePicker)();
 function DatePicker(props) {
@@ -241,15 +242,19 @@ function DatePickerInput(props) {
 }
 function RangePickerInput(props) {
   const { invalid, ...fieldStates } = useFieldContext();
+  const { defaultValue, ...nativeProps } = props;
+  const startDate = (0, import_react6.useMemo)(() => defaultValue == null ? void 0 : defaultValue[0], [defaultValue]);
+  const endDate = (0, import_react6.useMemo)(() => defaultValue == null ? void 0 : defaultValue[1], [defaultValue]);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react5.DatePicker.Control, { "data-range": true, className: datePickerStyles2.control, children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DatePickerTrigger, {}),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_react5.DatePicker.Input,
       {
-        ...props,
+        ...nativeProps,
         ...fieldStates,
         ...invalid && { "aria-invalid": true },
         "data-range-input": true,
+        defaultValue: startDate,
         className: (0, import_css4.cx)(props.className, datePickerStyles2.input),
         placeholder: props.placeholder ?? "DD MMM YYYY",
         maxLength: 11,
@@ -259,10 +264,11 @@ function RangePickerInput(props) {
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_react5.DatePicker.Input,
       {
-        ...props,
+        ...nativeProps,
         ...fieldStates,
         ...invalid && { "aria-invalid": true },
         "data-range-input": true,
+        defaultValue: endDate,
         "data-range-end-input": true,
         className: (0, import_css4.cx)(props.className, datePickerStyles2.input),
         placeholder: props.placeholder ?? "DD MMM YYYY",

package/build/legacy/components/DatePicker.client.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DatePicker.client.tsx","../../../src/components/Portal.tsx","../../../src/context/field.tsx","../../../src/components/DatePicker.server.tsx","../../../src/components/IconButton.tsx","../../../src/components/Button.tsx","../../../src/context/cerberus.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'\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\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: DatePickerInputProps) {\n  const { invalid, ...fieldStates } = useFieldContext()\n  return (\n    <ArkDP.Control data-range className={datePickerStyles.control}>\n      <DatePickerTrigger />\n      <ArkDP.Input\n        {...props}\n        {...fieldStates}\n        {...(invalid && { 'aria-invalid': true })}\n        data-range-input\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        {...props}\n        {...fieldStates}\n        {...(invalid && { 'aria-invalid': true })}\n        data-range-input\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(props: DatePickerContentProps) {\n  const { children, ...contentProps } = props\n  return (\n    <Portal>\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() {\n  return (\n    <DatePickerContent>\n      <DatePickerDayView />\n      <DatePickerMonthView />\n      <DatePickerYearView />\n    </DatePickerContent>\n  )\n}\n","import {\n  Portal as ArkPortal,\n  type PortalProps as ArkPortalProps,\n} from '@ark-ui/react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type PortalProps = ArkPortalProps\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport const Portal = ArkPortal\n","'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n  /**\n   * Whether the field is disabled.\n   * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n   */\n  disabled?: boolean\n  /**\n   * Whether the field is read-only.\n   */\n  readOnly?: boolean\n  /**\n   * Whether the field is required.\n   */\n  required?: boolean\n  /**\n   * Whether the field is invalid.\n   */\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      {props.children}\n    </FieldContext.Provider>\n  )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n","import {\n  DatePicker as ArkDP,\n  type DatePickerLabelProps,\n  type DatePickerTableCellProps,\n  type DatePickerTableCellTriggerProps,\n  type DatePickerTableHeaderProps,\n  type DatePickerTableProps,\n  type DatePickerViewControlProps,\n} from '@ark-ui/react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { datePicker, label } from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the DatePicker server family components.\n * @module DatePicker\n */\n\n// We are not exposing this to the public API\nconst datePickerStyles = datePicker()\n\n/**\n * The label component for the DatePicker.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerLabel>\n *   <DatePickerLabel.Label>...</DatePickerLabel.Label>\n * </DatePickerLabel>\n * ```\n */\nexport function DatePickerLabel(props: DatePickerLabelProps) {\n  const { className, ...arkProps } = props\n  return (\n    <ArkDP.Label\n      {...arkProps}\n      className={cx(\n        className,\n        label({\n          size: 'sm',\n        }),\n      )}\n    />\n  )\n}\n\n/**\n * The control component for the DatePicker which wraps the triggers to switch\n * between calendar views.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerViewControl>\n *   <PrevTrigger />\n *   <ViewTrigger />\n *   <NextTrigger />\n * </DatePickerViewControl>\n * ```\n */\nexport function DatePickerViewControl(props: DatePickerViewControlProps) {\n  return (\n    <ArkDP.Control\n      {...props}\n      className={cx(props.className, datePickerStyles.viewControl)}\n    />\n  )\n}\n\n/**\n * The table component for the DatePicker.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTable />\n * ```\n */\nexport function DatePickerTable(props: DatePickerTableProps) {\n  return (\n    <ArkDP.Table\n      {...props}\n      className={cx(props.className, datePickerStyles.table)}\n    />\n  )\n}\n\n/**\n * The header component for the DatePicker table.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTableHeader />\n * ```\n */\nexport function DatePickerTableHeader(props: DatePickerTableHeaderProps) {\n  return (\n    <ArkDP.TableHeader\n      {...props}\n      className={cx(props.className, datePickerStyles.tableHeader)}\n    />\n  )\n}\n\n/**\n * The cell component for the DatePicker table.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTableCell />\n * ```\n */\nexport function DatePickerTableCell(props: DatePickerTableCellProps) {\n  return (\n    <ArkDP.TableCell\n      {...props}\n      className={cx(props.className, datePickerStyles.tableCell)}\n    />\n  )\n}\n\n/**\n * The cell component for the DatePicker table.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTableCell />\n * ```\n */\nexport function DatePickerTableCellTrigger(\n  props: DatePickerTableCellTriggerProps,\n) {\n  return (\n    <ArkDP.TableCellTrigger\n      {...props}\n      className={cx(props.className, datePickerStyles.tableCellTrigger)}\n    />\n  )\n}\n\n/**\n * The view container which wraps the control and content components.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerView />\n * ```\n */\nexport const DatePickerView = ArkDP.View\n\n/**\n * The context component for the DatePicker which provides the DatePicker state.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerContext />\n * ```\n */\nexport const DatePickerContext = ArkDP.Context\n","import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  iconButton,\n  type IconButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport interface IconButtonRawProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The aria-label attribute for the icon button.\n   */\n  ariaLabel: string\n}\nexport type IconButtonProps = IconButtonRawProps & IconButtonVariantProps\n\n/**\n * A component that allows the user to perform actions using an icon\n * @see https://cerberus.digitalu.design/react/icon-button\n */\nexport function IconButton(props: IconButtonProps): JSX.Element {\n  const { ariaLabel, palette, usage, size, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n          size,\n        }),\n      )}\n    />\n  )\n}\n","import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  ButtonVariantProps\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        button({\n          palette,\n          usage,\n          shape,\n        }),\n      )}\n    />\n  )\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n"],"mappings":"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","names":["import_react","ArkPortal","import_recipes","import_css","import_react","import_react","import_jsx_runtime","ArkDP","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime","datePickerStyles","ArkDP","datePicker","id"]}
+{"version":3,"sources":["../../../src/components/DatePicker.client.tsx","../../../src/components/Portal.tsx","../../../src/context/field.tsx","../../../src/components/DatePicker.server.tsx","../../../src/components/IconButton.tsx","../../../src/components/Button.tsx","../../../src/context/cerberus.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(props: DatePickerContentProps) {\n  const { children, ...contentProps } = props\n  return (\n    <Portal>\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() {\n  return (\n    <DatePickerContent>\n      <DatePickerDayView />\n      <DatePickerMonthView />\n      <DatePickerYearView />\n    </DatePickerContent>\n  )\n}\n","import {\n  Portal as ArkPortal,\n  type PortalProps as ArkPortalProps,\n} from '@ark-ui/react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type PortalProps = ArkPortalProps\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport const Portal = ArkPortal\n","'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n  /**\n   * Whether the field is disabled.\n   * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n   */\n  disabled?: boolean\n  /**\n   * Whether the field is read-only.\n   */\n  readOnly?: boolean\n  /**\n   * Whether the field is required.\n   */\n  required?: boolean\n  /**\n   * Whether the field is invalid.\n   */\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      {props.children}\n    </FieldContext.Provider>\n  )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n","import {\n  DatePicker as ArkDP,\n  type DatePickerLabelProps,\n  type DatePickerTableCellProps,\n  type DatePickerTableCellTriggerProps,\n  type DatePickerTableHeaderProps,\n  type DatePickerTableProps,\n  type DatePickerViewControlProps,\n} from '@ark-ui/react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { datePicker, label } from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the DatePicker server family components.\n * @module DatePicker\n */\n\n// We are not exposing this to the public API\nconst datePickerStyles = datePicker()\n\n/**\n * The label component for the DatePicker.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerLabel>\n *   <DatePickerLabel.Label>...</DatePickerLabel.Label>\n * </DatePickerLabel>\n * ```\n */\nexport function DatePickerLabel(props: DatePickerLabelProps) {\n  const { className, ...arkProps } = props\n  return (\n    <ArkDP.Label\n      {...arkProps}\n      className={cx(\n        className,\n        label({\n          size: 'sm',\n        }),\n      )}\n    />\n  )\n}\n\n/**\n * The control component for the DatePicker which wraps the triggers to switch\n * between calendar views.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerViewControl>\n *   <PrevTrigger />\n *   <ViewTrigger />\n *   <NextTrigger />\n * </DatePickerViewControl>\n * ```\n */\nexport function DatePickerViewControl(props: DatePickerViewControlProps) {\n  return (\n    <ArkDP.Control\n      {...props}\n      className={cx(props.className, datePickerStyles.viewControl)}\n    />\n  )\n}\n\n/**\n * The table component for the DatePicker.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTable />\n * ```\n */\nexport function DatePickerTable(props: DatePickerTableProps) {\n  return (\n    <ArkDP.Table\n      {...props}\n      className={cx(props.className, datePickerStyles.table)}\n    />\n  )\n}\n\n/**\n * The header component for the DatePicker table.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTableHeader />\n * ```\n */\nexport function DatePickerTableHeader(props: DatePickerTableHeaderProps) {\n  return (\n    <ArkDP.TableHeader\n      {...props}\n      className={cx(props.className, datePickerStyles.tableHeader)}\n    />\n  )\n}\n\n/**\n * The cell component for the DatePicker table.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTableCell />\n * ```\n */\nexport function DatePickerTableCell(props: DatePickerTableCellProps) {\n  return (\n    <ArkDP.TableCell\n      {...props}\n      className={cx(props.className, datePickerStyles.tableCell)}\n    />\n  )\n}\n\n/**\n * The cell component for the DatePicker table.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTableCell />\n * ```\n */\nexport function DatePickerTableCellTrigger(\n  props: DatePickerTableCellTriggerProps,\n) {\n  return (\n    <ArkDP.TableCellTrigger\n      {...props}\n      className={cx(props.className, datePickerStyles.tableCellTrigger)}\n    />\n  )\n}\n\n/**\n * The view container which wraps the control and content components.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerView />\n * ```\n */\nexport const DatePickerView = ArkDP.View\n\n/**\n * The context component for the DatePicker which provides the DatePicker state.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerContext />\n * ```\n */\nexport const DatePickerContext = ArkDP.Context\n","import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  iconButton,\n  type IconButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport interface IconButtonRawProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The aria-label attribute for the icon button.\n   */\n  ariaLabel: string\n}\nexport type IconButtonProps = IconButtonRawProps & IconButtonVariantProps\n\n/**\n * A component that allows the user to perform actions using an icon\n * @see https://cerberus.digitalu.design/react/icon-button\n */\nexport function IconButton(props: IconButtonProps): JSX.Element {\n  const { ariaLabel, palette, usage, size, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n          size,\n        }),\n      )}\n    />\n  )\n}\n","import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  ButtonVariantProps\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        button({\n          palette,\n          usage,\n          shape,\n        }),\n      )}\n    />\n  )\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n"],"mappings":"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","names":["import_react","ArkPortal","import_recipes","import_css","import_react","import_react","import_jsx_runtime","ArkDP","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_react","import_jsx_runtime","import_react","import_jsx_runtime","datePickerStyles","ArkDP","datePicker","id"]}

package/build/legacy/context/notification-center.cjs

@@ -248,7 +248,7 @@ function NotificationCenter(props) {
         id,
         state: "closed"
       });
-      setTimeout(() => {
+      window.setTimeout(() => {
         removeNotification(dispatch, id);
       }, 150);
     },
@@ -262,7 +262,7 @@ function NotificationCenter(props) {
         id,
         state: "open"
       });
-      setTimeout(() => {
+      window.setTimeout(() => {
         closeNotification(id);
       }, timeout);
     },

package/build/legacy/context/notification-center.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/notification-center.tsx","../../../src/components/Show.tsx","../../../src/components/NotificationHeading.tsx","../../../src/components/NotificationDescription.tsx","../../../src/components/Notification.tsx","../../../src/aria-helpers/trap-focus.aria.ts","../../../src/context/cerberus.tsx","../../../src/components/Portal.tsx","../../../src/components/Button.tsx","../../../src/context/notification-center/store.ts"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useReducer,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { animateIn, vstack } from '@cerberus/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { notification } from '@cerberus/styled-system/recipes'\nimport { Button } from '../components/Button'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  addNotification,\n  clearNotificationState,\n  notificationCenterReducer,\n  removeNotification,\n  updateNotificationState,\n} from './notification-center/store'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n  /**\n   * The palette of the notification.\n   * @default 'info'\n   */\n  palette: 'info' | 'success' | 'warning' | 'danger'\n  /**\n   * The heading of the notification.\n   */\n  heading: string\n  /**\n   * The unique id of the notification.\n   */\n  id?: string\n  /**\n   * The description of the notification.\n   */\n  description?: ReactNode\n  /**\n   * The action to take when the notification is closed\n   */\n  onClose?: () => void\n}\n\nexport interface NotificationsValue {\n  notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport type NotificationsProviderProps = PortalProps & {\n  /**\n   * The duration in milliseconds to show the notification.\n   * @default 6000\n   */\n  duration?: number\n}\n\n/**\n * Provides a notification center to the app.\n * @see https://cerberus.digitalu.design/react/notification\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n *   <SomeFeatureSection />\n * </Notifications>\n *\n * // Use the hook to show a notification.\n * const notify = useNotifications()\n *\n * const handleClick = useCallback(() => {\n *  notify({\n *   palette: 'info',\n *   heading: 'New feature!',\n *   description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n */\nexport function NotificationCenter(\n  props: PropsWithChildren<NotificationsProviderProps>,\n) {\n  const [state, dispatch] = useReducer(notificationCenterReducer, [])\n  const styles = notification()\n\n  const timeout = useMemo<number>(\n    () => props.duration || 6000,\n    [props.duration],\n  )\n\n  const closeNotification = useCallback(\n    (id: string) => {\n      updateNotificationState(dispatch, {\n        id,\n        state: 'closed',\n      })\n      setTimeout(() => {\n        removeNotification(dispatch, id)\n      }, 150)\n    },\n    [dispatch],\n  )\n\n  const handleNotify = useCallback(\n    (options: NotifyOptions) => {\n      const id = `${options.palette}:${state.length + 1}`\n      addNotification(dispatch, {\n        ...options,\n        id,\n        state: 'open',\n      })\n\n      setTimeout(() => {\n        closeNotification(id)\n      }, timeout)\n    },\n    [dispatch, state, timeout, closeNotification],\n  )\n\n  const handleClose = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const target = e.currentTarget as HTMLButtonElement\n      closeNotification(target.value)\n    },\n    [closeNotification],\n  )\n\n  const handleCloseAll = useCallback(() => {\n    state.forEach((item) => {\n      if (item.onClose) item.onClose()\n    })\n    // we don't want to animate out for this one\n    clearNotificationState(dispatch)\n  }, [state, dispatch])\n\n  const value = useMemo(\n    () => ({\n      notify: handleNotify,\n    }),\n    [handleNotify],\n  )\n\n  // For some reason, the vstack pattern alignItems is not registering here.\n  // So we are forcing it with the style prop.\n\n  return (\n    <NotificationsContext.Provider value={value}>\n      {props.children}\n\n      <Show when={state.length > 0}>\n        <Portal container={props.container}>\n          <div className={styles.center}>\n            <Show when={state.length >= 4}>\n              <Button\n                className={cx(styles.closeAll, animateIn())}\n                onClick={handleCloseAll}\n                palette=\"action\"\n                shape=\"rounded\"\n                size=\"sm\"\n                usage=\"ghost\"\n              >\n                Close all\n              </Button>\n            </Show>\n\n            <div\n              className={vstack({\n                alignItems: 'flex-end',\n                gap: '4',\n              })}\n              style={{\n                alignItems: 'flex-end',\n              }}\n            >\n              {state.map((option) => (\n                <MatchNotification\n                  key={option.id}\n                  {...option}\n                  onClose={handleClose}\n                  open={option.state}\n                />\n              ))}\n            </div>\n          </div>\n        </Portal>\n      </Show>\n    </NotificationsContext.Provider>\n  )\n}\n\ninterface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {\n  open: 'open' | 'closed'\n  onClose: (e: MouseEvent<HTMLButtonElement>) => void\n  key: string | undefined\n}\n\nfunction MatchNotification(props: MatchNotificationProps) {\n  const { palette, id, onClose, heading, description, open } = props\n  const sharedProps = useMemo(\n    () => ({\n      id: id!,\n      open: true,\n      onClose,\n      'data-state': open,\n    }),\n    [id, open, onClose],\n  )\n\n  switch (palette) {\n    case 'success':\n      return (\n        <Notification {...sharedProps} palette=\"success\">\n          <NotificationHeading palette=\"success\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"success\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'warning':\n      return (\n        <Notification {...sharedProps} palette=\"warning\">\n          <NotificationHeading palette=\"warning\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"warning\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'danger':\n      return (\n        <Notification {...sharedProps} palette=\"danger\">\n          <NotificationHeading palette=\"danger\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"danger\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'info':\n    default:\n      return (\n        <Notification {...sharedProps} palette=\"info\">\n          <NotificationHeading palette=\"info\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"info\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n  }\n}\n\n/**\n * The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n *  palette: 'info',\n *  heading: 'New feature',\n *  description: 'We have added a new feature to the app.',\n * })\n * ```\n */\nexport function useNotificationCenter(): NotificationsValue {\n  const context = useContext(NotificationsContext)\n  if (!context) {\n    throw new Error(\n      'useNotificationCenter must be used within a NotificationsProvider',\n    )\n  }\n  return context\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n","import { cx } from '@cerberus/styled-system/css'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module exports the NotificationHeading component.\n * @module\n */\n\nexport type BaseNotificationHeadingProps = HTMLAttributes<HTMLParagraphElement>\nexport type NotificationHeadingProps = BaseNotificationHeadingProps &\n  NotificationVariantProps\n\n/**\n * Used to render the heading of a notification.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationHeading(props: NotificationHeadingProps) {\n  const { palette, ...nativeProps } = props\n  const styles = notification({ palette })\n  return (\n    <p className={cx(nativeProps.className, styles.heading)} {...nativeProps} />\n  )\n}\n","import { cx } from '@cerberus/styled-system/css'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module exports the NotificationDescription component.\n * @module\n */\n\nexport type BaseNotificationDescriptionProps =\n  HTMLAttributes<HTMLParagraphElement>\nexport type NotificationDescriptionProps = BaseNotificationDescriptionProps &\n  NotificationVariantProps\n\n/**\n * Used to render the description of a notification.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationDescription(props: NotificationDescriptionProps) {\n  const { palette, ...nativeProps } = props\n  const styles = notification({ palette })\n  return (\n    <p\n      className={cx(nativeProps.className, styles.description)}\n      {...nativeProps}\n    />\n  )\n}\n","'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport {\n  useRef,\n  type DialogHTMLAttributes,\n  type PropsWithChildren,\n  type MouseEvent,\n} from 'react'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { useCerberusContext } from '../context/cerberus'\n\n/**\n * This module exports the Notification component.\n * @module\n */\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n  const { icons } = useCerberusContext()\n  const palette = (props.palette || 'info') as\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n  const key = `${palette}Notification` as keyof typeof icons\n  const Icon = icons[key]\n  return <Icon />\n}\n\nexport interface NotificationBaseProps\n  extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {\n  /**\n   * The unique id of the notification. Required for the onClose callback.\n   */\n  id: string\n  /**\n   * Called when the close button is clicked.\n   */\n  onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/**\n * A static Notification component that displays a message to the user. This\n * is typically only used when not utilizing the NotificationCenter.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @example\n * ```tsx\n * <Notification id=\"info:1\" open>\n *  <NotificationHeading>Info Notification</NotificationHeading>\n *  <NotificationDescription>\n *   This is a description with a <a href=\"#\">link</a> in the message.\n *  </NotificationDescription>\n * </Notification>\n * ```\n */\nexport function Notification(props: PropsWithChildren<NotificationProps>) {\n  const { children, palette, onClose, ...nativeProps } = props\n  const ref = useRef<HTMLDialogElement>(null)\n\n  const onKeyDown = trapFocus(ref)\n  const styles = notification({ palette })\n\n  const { icons } = useCerberusContext()\n  const { close: CloseIcon } = icons\n\n  return (\n    <dialog\n      {...nativeProps}\n      data-placement=\"left\"\n      className={cx(\n        nativeProps.className,\n        hstack({\n          position: 'relative',\n          gap: '4',\n        }),\n        styles.dialog,\n      )}\n      onKeyDown={onKeyDown}\n      ref={ref}\n    >\n      <span className={styles.icon}>\n        <MatchNotificationIcon palette={palette} />\n      </span>\n\n      <div\n        className={vstack({\n          alignItems: 'flex-start',\n          gap: '0',\n          py: '2',\n        })}\n      >\n        {children}\n      </div>\n\n      <button\n        aria-label=\"Close\"\n        className={styles.close}\n        onClick={onClose}\n        value={props.id}\n      >\n        <CloseIcon />\n      </button>\n    </dialog>\n  )\n}\n","import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\nexport function trapFocus(\n  modalRef: RefObject<HTMLDialogElement>,\n): KeyboardEventHandler<HTMLDialogElement> {\n  const focusableElements =\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  const focusable = Array.from(\n    modalRef.current?.querySelectorAll(focusableElements) ?? [],\n  )\n  const firstFocusable = focusable[0] as HTMLElement\n  const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n  return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n    if (event.key === 'Tab') {\n      if (event.shiftKey) {\n        if (document.activeElement === firstFocusable) {\n          lastFocusable.focus()\n          event.preventDefault()\n        }\n      } else {\n        if (document.activeElement === lastFocusable) {\n          firstFocusable.focus()\n          event.preventDefault()\n        }\n      }\n    }\n  }\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n","import {\n  Portal as ArkPortal,\n  type PortalProps as ArkPortalProps,\n} from '@ark-ui/react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type PortalProps = ArkPortalProps\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport const Portal = ArkPortal\n","import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  ButtonVariantProps\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        button({\n          palette,\n          usage,\n          shape,\n        }),\n      )}\n    />\n  )\n}\n","import type { Dispatch } from 'react'\nimport type {\n  AddNotifyAction,\n  ClearNotifyAction,\n  NotificationsStore,\n  RemoveNotifyAction,\n  UpdateNotifyAction,\n} from './types'\n\n/**\n * This module contains the reducer store and actions for the notification\n * center.\n * @module notification-center/store\n */\n\n/**\n * The reducer for the notification center.\n * @param state An array of notifications.\n * @param action An action to take on the notifications.\n * @returns The new state of the notifications.\n */\nexport function notificationCenterReducer(\n  state: NotificationsStore,\n  action:\n    | AddNotifyAction\n    | RemoveNotifyAction\n    | UpdateNotifyAction\n    | ClearNotifyAction,\n): NotificationsStore {\n  switch (action.type) {\n    case 'ADD_NOTIFICATION':\n      return [...state, action.payload]\n    case 'REMOVE_NOTIFICATION':\n      return state.filter((n) => n.id !== action.payload.id)\n    case 'UPDATE_NOTIFICATION':\n      return state.map((n) =>\n        n.id === action.payload.id ? { ...n, ...action.payload } : n,\n      )\n    case 'CLEAR_NOTIFICATIONS':\n      return []\n    default:\n      return state\n  }\n}\n\n/**\n * Adds a notification to the notification center.\n * @param dispatch The dispatch function.\n * @param options The notification options.\n */\nexport function addNotification(\n  dispatch: Dispatch<AddNotifyAction>,\n  options: AddNotifyAction['payload'],\n) {\n  dispatch({ type: 'ADD_NOTIFICATION', payload: { ...options } })\n}\n\n/**\n * Removes a notification from the notification center.\n * @param dispatch The dispatch function.\n * @param id The id of the notification to remove.\n */\nexport function removeNotification(\n  dispatch: Dispatch<RemoveNotifyAction>,\n  id: RemoveNotifyAction['payload']['id'],\n) {\n  dispatch({ type: 'REMOVE_NOTIFICATION', payload: { id } })\n}\n\n/**\n * Updates a notification in the notification center.\n * @param dispatch The dispatch function.\n * @param options The notification options.\n */\nexport function updateNotificationState(\n  dispatch: Dispatch<UpdateNotifyAction>,\n  options: UpdateNotifyAction['payload'],\n) {\n  dispatch({ type: 'UPDATE_NOTIFICATION', payload: { ...options } })\n}\n\n/**\n * Clears the notification state.\n * @param dispatch The dispatch function.\n */\nexport function clearNotificationState(dispatch: Dispatch<ClearNotifyAction>) {\n  dispatch({ type: 'CLEAR_NOTIFICATIONS' })\n}\n"],"mappings":"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","names":["import_react","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_react","import_react","import_jsx_runtime","import_jsx_runtime","import_patterns","import_react","ArkPortal","import_recipes","import_css","import_recipes","import_jsx_runtime","import_css","import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/context/notification-center.tsx","../../../src/components/Show.tsx","../../../src/components/NotificationHeading.tsx","../../../src/components/NotificationDescription.tsx","../../../src/components/Notification.tsx","../../../src/aria-helpers/trap-focus.aria.ts","../../../src/context/cerberus.tsx","../../../src/components/Portal.tsx","../../../src/components/Button.tsx","../../../src/context/notification-center/store.ts"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useReducer,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { animateIn, vstack } from '@cerberus/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { notification } from '@cerberus/styled-system/recipes'\nimport { Button } from '../components/Button'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  addNotification,\n  clearNotificationState,\n  notificationCenterReducer,\n  removeNotification,\n  updateNotificationState,\n} from './notification-center/store'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n  /**\n   * The palette of the notification.\n   * @default 'info'\n   */\n  palette: 'info' | 'success' | 'warning' | 'danger'\n  /**\n   * The heading of the notification.\n   */\n  heading: string\n  /**\n   * The unique id of the notification.\n   */\n  id?: string\n  /**\n   * The description of the notification.\n   */\n  description?: ReactNode\n  /**\n   * The action to take when the notification is closed\n   */\n  onClose?: () => void\n}\n\nexport interface NotificationsValue {\n  notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport type NotificationsProviderProps = PortalProps & {\n  /**\n   * The duration in milliseconds to show the notification.\n   * @default 6000\n   */\n  duration?: number\n}\n\n/**\n * Provides a notification center to the app.\n * @see https://cerberus.digitalu.design/react/notification\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n *   <SomeFeatureSection />\n * </Notifications>\n *\n * // Use the hook to show a notification.\n * const notify = useNotifications()\n *\n * const handleClick = useCallback(() => {\n *  notify({\n *   palette: 'info',\n *   heading: 'New feature!',\n *   description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n */\nexport function NotificationCenter(\n  props: PropsWithChildren<NotificationsProviderProps>,\n) {\n  const [state, dispatch] = useReducer(notificationCenterReducer, [])\n  const styles = notification()\n\n  const timeout = useMemo<number>(\n    () => props.duration || 6000,\n    [props.duration],\n  )\n\n  const closeNotification = useCallback(\n    (id: string) => {\n      updateNotificationState(dispatch, {\n        id,\n        state: 'closed',\n      })\n      window.setTimeout(() => {\n        removeNotification(dispatch, id)\n      }, 150)\n    },\n    [dispatch],\n  )\n\n  const handleNotify = useCallback(\n    (options: NotifyOptions) => {\n      const id = `${options.palette}:${state.length + 1}`\n      addNotification(dispatch, {\n        ...options,\n        id,\n        state: 'open',\n      })\n\n      window.setTimeout(() => {\n        closeNotification(id)\n      }, timeout)\n    },\n    [dispatch, state, timeout, closeNotification],\n  )\n\n  const handleClose = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const target = e.currentTarget as HTMLButtonElement\n      closeNotification(target.value)\n    },\n    [closeNotification],\n  )\n\n  const handleCloseAll = useCallback(() => {\n    state.forEach((item) => {\n      if (item.onClose) item.onClose()\n    })\n    // we don't want to animate out for this one\n    clearNotificationState(dispatch)\n  }, [state, dispatch])\n\n  const value = useMemo(\n    () => ({\n      notify: handleNotify,\n    }),\n    [handleNotify],\n  )\n\n  // For some reason, the vstack pattern alignItems is not registering here.\n  // So we are forcing it with the style prop.\n\n  return (\n    <NotificationsContext.Provider value={value}>\n      {props.children}\n\n      <Show when={state.length > 0}>\n        <Portal container={props.container}>\n          <div className={styles.center}>\n            <Show when={state.length >= 4}>\n              <Button\n                className={cx(styles.closeAll, animateIn())}\n                onClick={handleCloseAll}\n                palette=\"action\"\n                shape=\"rounded\"\n                size=\"sm\"\n                usage=\"ghost\"\n              >\n                Close all\n              </Button>\n            </Show>\n\n            <div\n              className={vstack({\n                alignItems: 'flex-end',\n                gap: '4',\n              })}\n              style={{\n                alignItems: 'flex-end',\n              }}\n            >\n              {state.map((option) => (\n                <MatchNotification\n                  key={option.id}\n                  {...option}\n                  onClose={handleClose}\n                  open={option.state}\n                />\n              ))}\n            </div>\n          </div>\n        </Portal>\n      </Show>\n    </NotificationsContext.Provider>\n  )\n}\n\ninterface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {\n  open: 'open' | 'closed'\n  onClose: (e: MouseEvent<HTMLButtonElement>) => void\n  key: string | undefined\n}\n\nfunction MatchNotification(props: MatchNotificationProps) {\n  const { palette, id, onClose, heading, description, open } = props\n  const sharedProps = useMemo(\n    () => ({\n      id: id!,\n      open: true,\n      onClose,\n      'data-state': open,\n    }),\n    [id, open, onClose],\n  )\n\n  switch (palette) {\n    case 'success':\n      return (\n        <Notification {...sharedProps} palette=\"success\">\n          <NotificationHeading palette=\"success\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"success\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'warning':\n      return (\n        <Notification {...sharedProps} palette=\"warning\">\n          <NotificationHeading palette=\"warning\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"warning\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'danger':\n      return (\n        <Notification {...sharedProps} palette=\"danger\">\n          <NotificationHeading palette=\"danger\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"danger\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n\n    case 'info':\n    default:\n      return (\n        <Notification {...sharedProps} palette=\"info\">\n          <NotificationHeading palette=\"info\">{heading}</NotificationHeading>\n          <NotificationDescription palette=\"info\">\n            {description}\n          </NotificationDescription>\n        </Notification>\n      )\n  }\n}\n\n/**\n * The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n *  palette: 'info',\n *  heading: 'New feature',\n *  description: 'We have added a new feature to the app.',\n * })\n * ```\n */\nexport function useNotificationCenter(): NotificationsValue {\n  const context = useContext(NotificationsContext)\n  if (!context) {\n    throw new Error(\n      'useNotificationCenter must be used within a NotificationsProvider',\n    )\n  }\n  return context\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n","import { cx } from '@cerberus/styled-system/css'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module exports the NotificationHeading component.\n * @module\n */\n\nexport type BaseNotificationHeadingProps = HTMLAttributes<HTMLParagraphElement>\nexport type NotificationHeadingProps = BaseNotificationHeadingProps &\n  NotificationVariantProps\n\n/**\n * Used to render the heading of a notification.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationHeading(props: NotificationHeadingProps) {\n  const { palette, ...nativeProps } = props\n  const styles = notification({ palette })\n  return (\n    <p className={cx(nativeProps.className, styles.heading)} {...nativeProps} />\n  )\n}\n","import { cx } from '@cerberus/styled-system/css'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module exports the NotificationDescription component.\n * @module\n */\n\nexport type BaseNotificationDescriptionProps =\n  HTMLAttributes<HTMLParagraphElement>\nexport type NotificationDescriptionProps = BaseNotificationDescriptionProps &\n  NotificationVariantProps\n\n/**\n * Used to render the description of a notification.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationDescription(props: NotificationDescriptionProps) {\n  const { palette, ...nativeProps } = props\n  const styles = notification({ palette })\n  return (\n    <p\n      className={cx(nativeProps.className, styles.description)}\n      {...nativeProps}\n    />\n  )\n}\n","'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n  notification,\n  type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport {\n  useRef,\n  type DialogHTMLAttributes,\n  type PropsWithChildren,\n  type MouseEvent,\n} from 'react'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { useCerberusContext } from '../context/cerberus'\n\n/**\n * This module exports the Notification component.\n * @module\n */\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n  const { icons } = useCerberusContext()\n  const palette = (props.palette || 'info') as\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n  const key = `${palette}Notification` as keyof typeof icons\n  const Icon = icons[key]\n  return <Icon />\n}\n\nexport interface NotificationBaseProps\n  extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {\n  /**\n   * The unique id of the notification. Required for the onClose callback.\n   */\n  id: string\n  /**\n   * Called when the close button is clicked.\n   */\n  onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/**\n * A static Notification component that displays a message to the user. This\n * is typically only used when not utilizing the NotificationCenter.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @example\n * ```tsx\n * <Notification id=\"info:1\" open>\n *  <NotificationHeading>Info Notification</NotificationHeading>\n *  <NotificationDescription>\n *   This is a description with a <a href=\"#\">link</a> in the message.\n *  </NotificationDescription>\n * </Notification>\n * ```\n */\nexport function Notification(props: PropsWithChildren<NotificationProps>) {\n  const { children, palette, onClose, ...nativeProps } = props\n  const ref = useRef<HTMLDialogElement>(null)\n\n  const onKeyDown = trapFocus(ref)\n  const styles = notification({ palette })\n\n  const { icons } = useCerberusContext()\n  const { close: CloseIcon } = icons\n\n  return (\n    <dialog\n      {...nativeProps}\n      data-placement=\"left\"\n      className={cx(\n        nativeProps.className,\n        hstack({\n          position: 'relative',\n          gap: '4',\n        }),\n        styles.dialog,\n      )}\n      onKeyDown={onKeyDown}\n      ref={ref}\n    >\n      <span className={styles.icon}>\n        <MatchNotificationIcon palette={palette} />\n      </span>\n\n      <div\n        className={vstack({\n          alignItems: 'flex-start',\n          gap: '0',\n          py: '2',\n        })}\n      >\n        {children}\n      </div>\n\n      <button\n        aria-label=\"Close\"\n        className={styles.close}\n        onClick={onClose}\n        value={props.id}\n      >\n        <CloseIcon />\n      </button>\n    </dialog>\n  )\n}\n","import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\nexport function trapFocus(\n  modalRef: RefObject<HTMLDialogElement>,\n): KeyboardEventHandler<HTMLDialogElement> {\n  const focusableElements =\n    'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n  const focusable = Array.from(\n    modalRef.current?.querySelectorAll(focusableElements) ?? [],\n  )\n  const firstFocusable = focusable[0] as HTMLElement\n  const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n  return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n    if (event.key === 'Tab') {\n      if (event.shiftKey) {\n        if (document.activeElement === firstFocusable) {\n          lastFocusable.focus()\n          event.preventDefault()\n        }\n      } else {\n        if (document.activeElement === lastFocusable) {\n          firstFocusable.focus()\n          event.preventDefault()\n        }\n      }\n    }\n  }\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n","import {\n  Portal as ArkPortal,\n  type PortalProps as ArkPortalProps,\n} from '@ark-ui/react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type PortalProps = ArkPortalProps\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport const Portal = ArkPortal\n","import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  ButtonVariantProps\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        button({\n          palette,\n          usage,\n          shape,\n        }),\n      )}\n    />\n  )\n}\n","import type { Dispatch } from 'react'\nimport type {\n  AddNotifyAction,\n  ClearNotifyAction,\n  NotificationsStore,\n  RemoveNotifyAction,\n  UpdateNotifyAction,\n} from './types'\n\n/**\n * This module contains the reducer store and actions for the notification\n * center.\n * @module notification-center/store\n */\n\n/**\n * The reducer for the notification center.\n * @param state An array of notifications.\n * @param action An action to take on the notifications.\n * @returns The new state of the notifications.\n */\nexport function notificationCenterReducer(\n  state: NotificationsStore,\n  action:\n    | AddNotifyAction\n    | RemoveNotifyAction\n    | UpdateNotifyAction\n    | ClearNotifyAction,\n): NotificationsStore {\n  switch (action.type) {\n    case 'ADD_NOTIFICATION':\n      return [...state, action.payload]\n    case 'REMOVE_NOTIFICATION':\n      return state.filter((n) => n.id !== action.payload.id)\n    case 'UPDATE_NOTIFICATION':\n      return state.map((n) =>\n        n.id === action.payload.id ? { ...n, ...action.payload } : n,\n      )\n    case 'CLEAR_NOTIFICATIONS':\n      return []\n    default:\n      return state\n  }\n}\n\n/**\n * Adds a notification to the notification center.\n * @param dispatch The dispatch function.\n * @param options The notification options.\n */\nexport function addNotification(\n  dispatch: Dispatch<AddNotifyAction>,\n  options: AddNotifyAction['payload'],\n) {\n  dispatch({ type: 'ADD_NOTIFICATION', payload: { ...options } })\n}\n\n/**\n * Removes a notification from the notification center.\n * @param dispatch The dispatch function.\n * @param id The id of the notification to remove.\n */\nexport function removeNotification(\n  dispatch: Dispatch<RemoveNotifyAction>,\n  id: RemoveNotifyAction['payload']['id'],\n) {\n  dispatch({ type: 'REMOVE_NOTIFICATION', payload: { id } })\n}\n\n/**\n * Updates a notification in the notification center.\n * @param dispatch The dispatch function.\n * @param options The notification options.\n */\nexport function updateNotificationState(\n  dispatch: Dispatch<UpdateNotifyAction>,\n  options: UpdateNotifyAction['payload'],\n) {\n  dispatch({ type: 'UPDATE_NOTIFICATION', payload: { ...options } })\n}\n\n/**\n * Clears the notification state.\n * @param dispatch The dispatch function.\n */\nexport function clearNotificationState(dispatch: Dispatch<ClearNotifyAction>) {\n  dispatch({ type: 'CLEAR_NOTIFICATIONS' })\n}\n"],"mappings":"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","names":["import_react","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_react","import_react","import_jsx_runtime","import_jsx_runtime","import_patterns","import_react","ArkPortal","import_recipes","import_css","import_recipes","import_jsx_runtime","import_css","import_jsx_runtime"]}