@cerberus-design/react 0.13.2 → 0.14.0

package/build/modern/{chunk-7SGPJM66.js → chunk-HP4ZN473.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-JIZQFTW6.js";
 import {
   $cerberusIcons
-} from "./chunk-VERRHMW4.js";
+} from "./chunk-DDOTCGGA.js";
 
 // src/components/Notification.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -72,4 +72,4 @@ function Notification(props) {
 export {
   Notification
 };
-//# sourceMappingURL=chunk-7SGPJM66.js.map
+//# sourceMappingURL=chunk-HP4ZN473.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Notification.tsx"],"sourcesContent":["'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 { $cerberusIcons } from '../config/defineIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\n\n/**\n * This module exports the Notification component.\n * @module\n */\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n  const palette = (props.palette || 'info') as\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n  const key = `${palette}Notification` as keyof typeof $cerberusIcons\n  const Icon = $cerberusIcons[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  const onKeyDown = trapFocus(ref)\n  const styles = notification({ palette })\n  const { close: CloseIcon } = $cerberusIcons\n\n  return (\n    <dialog\n      {...nativeProps}\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"],"mappings":";;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,QAAQ,cAAc;AAC/B;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,OAIK;AAiBE,cAuCL,YAvCK;AART,SAAS,sBAAsB,OAAiC;AAC9D,QAAM,UAAW,MAAM,WAAW;AAKlC,QAAM,MAAM,GAAG,OAAO;AACtB,QAAM,OAAO,eAAe,GAAG;AAC/B,SAAO,oBAAC,QAAK;AACf;AA8BO,SAAS,aAAa,OAA6C;AACxE,QAAM,EAAE,UAAU,SAAS,SAAS,GAAG,YAAY,IAAI;AACvD,QAAM,MAAM,OAA0B,IAAI;AAC1C,QAAM,YAAY,UAAU,GAAG;AAC/B,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AACvC,QAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,UAAK,WAAW,OAAO,MACtB,8BAAC,yBAAsB,SAAkB,GAC3C;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,OAAO;AAAA,cAChB,YAAY;AAAA,cACZ,KAAK;AAAA,cACL,IAAI;AAAA,YACN,CAAC;AAAA,YAEA;AAAA;AAAA,QACH;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,OAAO;AAAA,YAClB,SAAS;AAAA,YACT,OAAO,MAAM;AAAA,YAEb,8BAAC,aAAU;AAAA;AAAA,QACb;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/chunk-IP5VFOPZ.js

@@ -0,0 +1,132 @@
+import {
+  IconButton
+} from "./chunk-APD6IX5R.js";
+import {
+  Button
+} from "./chunk-EXGKZGML.js";
+import {
+  $cerberusIcons
+} from "./chunk-DDOTCGGA.js";
+
+// src/components/DatePicker.server.tsx
+import {
+  DatePicker as ArkDP
+} from "@ark-ui/react";
+import { css, cx } from "@cerberus/styled-system/css";
+import { datePicker, iconButton, label } from "@cerberus/styled-system/recipes";
+import { jsx, jsxs } from "react/jsx-runtime";
+var datePickerStyles = datePicker();
+function DatePickerLabel(props) {
+  const { className, ...arkProps } = props;
+  return /* @__PURE__ */ jsx(
+    ArkDP.Label,
+    {
+      ...arkProps,
+      className: cx(
+        className,
+        label({
+          size: "sm"
+        })
+      )
+    }
+  );
+}
+function DatePickerTrigger(props) {
+  const { calendar: CalendarIcon } = $cerberusIcons;
+  return /* @__PURE__ */ jsx(
+    ArkDP.Trigger,
+    {
+      ...props,
+      className: cx(
+        props.className,
+        iconButton({
+          size: "sm",
+          usage: "ghost"
+        }),
+        datePickerStyles.trigger
+      ),
+      children: /* @__PURE__ */ jsx(CalendarIcon, {})
+    }
+  );
+}
+function DatePickerViewControl(props) {
+  return /* @__PURE__ */ jsx(
+    ArkDP.Control,
+    {
+      ...props,
+      className: cx(props.className, datePickerStyles.viewControl)
+    }
+  );
+}
+function DatePickerViewControlGroup(props) {
+  const { calendarPrev: PrevIcon, calendarNext: NextIcon } = $cerberusIcons;
+  return /* @__PURE__ */ jsxs(DatePickerViewControl, { ...props, children: [
+    /* @__PURE__ */ jsx(ArkDP.PrevTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { ariaLabel: "Previous", size: "sm", children: /* @__PURE__ */ jsx(PrevIcon, {}) }) }),
+    /* @__PURE__ */ jsx(ArkDP.ViewTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: css({
+          h: "2rem",
+          paddingInline: "md"
+        }),
+        shape: "rounded",
+        size: "sm",
+        usage: "ghost",
+        children: /* @__PURE__ */ jsx(ArkDP.RangeText, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(ArkDP.NextTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { ariaLabel: "Next", size: "sm", children: /* @__PURE__ */ jsx(NextIcon, {}) }) })
+  ] });
+}
+function DatePickerTable(props) {
+  return /* @__PURE__ */ jsx(
+    ArkDP.Table,
+    {
+      ...props,
+      className: cx(props.className, datePickerStyles.table)
+    }
+  );
+}
+function DatePickerTableHeader(props) {
+  return /* @__PURE__ */ jsx(
+    ArkDP.TableHeader,
+    {
+      ...props,
+      className: cx(props.className, datePickerStyles.tableHeader)
+    }
+  );
+}
+function DatePickerTableCell(props) {
+  return /* @__PURE__ */ jsx(
+    ArkDP.TableCell,
+    {
+      ...props,
+      className: cx(props.className, datePickerStyles.tableCell)
+    }
+  );
+}
+function DatePickerTableCellTrigger(props) {
+  return /* @__PURE__ */ jsx(
+    ArkDP.TableCellTrigger,
+    {
+      ...props,
+      className: cx(props.className, datePickerStyles.tableCellTrigger)
+    }
+  );
+}
+var DatePickerView = ArkDP.View;
+var DatePickerContext = ArkDP.Context;
+
+export {
+  DatePickerLabel,
+  DatePickerTrigger,
+  DatePickerViewControl,
+  DatePickerViewControlGroup,
+  DatePickerTable,
+  DatePickerTableHeader,
+  DatePickerTableCell,
+  DatePickerTableCellTrigger,
+  DatePickerView,
+  DatePickerContext
+};
+//# sourceMappingURL=chunk-IP5VFOPZ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/DatePicker.server.tsx"],"sourcesContent":["import {\n  DatePicker as ArkDP,\n  type DatePickerLabelProps,\n  type DatePickerTableCellProps,\n  type DatePickerTableCellTriggerProps,\n  type DatePickerTableHeaderProps,\n  type DatePickerTableProps,\n  type DatePickerTriggerProps,\n  type DatePickerViewControlProps,\n} from '@ark-ui/react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { datePicker, iconButton, label } from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { IconButton } from './IconButton'\nimport { Button } from './Button'\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 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 { calendar: CalendarIcon } = $cerberusIcons\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 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 * 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 { calendarPrev: PrevIcon, calendarNext: NextIcon } = $cerberusIcons\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 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"],"mappings":";;;;;;;;;;;AAAA;AAAA,EACE,cAAc;AAAA,OAQT;AACP,SAAS,KAAK,UAAU;AACxB,SAAS,YAAY,YAAY,aAAa;AA0B1C,cAyEA,YAzEA;AAfJ,IAAM,mBAAmB,WAAW;AAY7B,SAAS,gBAAgB,OAA6B;AAC3D,QAAM,EAAE,WAAW,GAAG,SAAS,IAAI;AACnC,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA,MAAM;AAAA,UACJ,MAAM;AAAA,QACR,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAUO,SAAS,kBAAkB,OAA+B;AAC/D,QAAM,EAAE,UAAU,aAAa,IAAI;AACnC,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,MAAM;AAAA,QACN,WAAW;AAAA,UACT,MAAM;AAAA,UACN,OAAO;AAAA,QACT,CAAC;AAAA,QACD,iBAAiB;AAAA,MACnB;AAAA,MAEA,8BAAC,gBAAa;AAAA;AAAA,EAChB;AAEJ;AAeO,SAAS,sBAAsB,OAAmC;AACvE,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,iBAAiB,WAAW;AAAA;AAAA,EAC7D;AAEJ;AAWO,SAAS,2BAA2B,OAAmC;AAC5E,QAAM,EAAE,cAAc,UAAU,cAAc,SAAS,IAAI;AAC3D,SACE,qBAAC,yBAAuB,GAAG,OACzB;AAAA,wBAAC,MAAM,aAAN,EAAkB,SAAO,MACxB,8BAAC,cAAW,WAAU,YAAW,MAAK,MACpC,8BAAC,YAAS,GACZ,GACF;AAAA,IAEA,oBAAC,MAAM,aAAN,EAAkB,SAAO,MACxB;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,IAAI;AAAA,UACb,GAAG;AAAA,UACH,eAAe;AAAA,QACjB,CAAC;AAAA,QACD,OAAM;AAAA,QACN,MAAK;AAAA,QACL,OAAM;AAAA,QAEN,8BAAC,MAAM,WAAN,EAAgB;AAAA;AAAA,IACnB,GACF;AAAA,IAEA,oBAAC,MAAM,aAAN,EAAkB,SAAO,MACxB,8BAAC,cAAW,WAAU,QAAO,MAAK,MAChC,8BAAC,YAAS,GACZ,GACF;AAAA,KACF;AAEJ;AAUO,SAAS,gBAAgB,OAA6B;AAC3D,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,iBAAiB,KAAK;AAAA;AAAA,EACvD;AAEJ;AAUO,SAAS,sBAAsB,OAAmC;AACvE,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,iBAAiB,WAAW;AAAA;AAAA,EAC7D;AAEJ;AAUO,SAAS,oBAAoB,OAAiC;AACnE,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,iBAAiB,SAAS;AAAA;AAAA,EAC3D;AAEJ;AAUO,SAAS,2BACd,OACA;AACA,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,iBAAiB,gBAAgB;AAAA;AAAA,EAClE;AAEJ;AAUO,IAAM,iBAAiB,MAAM;AAU7B,IAAM,oBAAoB,MAAM;","names":[]}

package/build/modern/{chunk-KML4CTMK.js → chunk-LPALHB6R.js}

@@ -6,13 +6,13 @@ import { cx } from "@cerberus/styled-system/css";
 import { tooltip } from "@cerberus/styled-system/recipes";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Tooltip(props) {
-  const { content, children, ...nativeProps } = props;
+  const { content, children, asChild, ...nativeProps } = props;
   const styles = tooltip();
   const position = {
     placement: props.position || "top"
   };
   return /* @__PURE__ */ jsxs(ArkTooltip.Root, { openDelay: 400, positioning: position, children: [
-    /* @__PURE__ */ jsx(ArkTooltip.Trigger, { className: styles.trigger, children }),
+    /* @__PURE__ */ jsx(ArkTooltip.Trigger, { className: styles.trigger, asChild, children }),
     /* @__PURE__ */ jsx(ArkTooltip.Positioner, { children: /* @__PURE__ */ jsxs(
       ArkTooltip.Content,
       {
@@ -30,4 +30,4 @@ function Tooltip(props) {
 export {
   Tooltip
 };
-//# sourceMappingURL=chunk-KML4CTMK.js.map
+//# sourceMappingURL=chunk-LPALHB6R.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Tooltip.tsx"],"sourcesContent":["import {\n  Tooltip as ArkTooltip,\n  type TooltipContentProps,\n} from '@ark-ui/react/tooltip'\nimport { cx } from '@cerberus/styled-system/css'\nimport { tooltip } from '@cerberus/styled-system/recipes'\nimport type { ReactNode } from 'react'\n\n/**\n * This module contains the Tooltip component.\n * @module Tooltip\n */\n\nexport interface TooltipProps {\n  /**\n   * The text content to display in the tooltip.\n   */\n  content: ReactNode\n  /**\n   * The position of the tooltip relative to the trigger element.\n   */\n  position?: 'top' | 'right' | 'bottom' | 'left'\n}\n\n/**\n * The Tooltip component is used to provide additional information about an element when it is hovered over.\n * @definition [Tooltip docs](https://cerberus.digitalu.design/react/tooltip)\n * @example\n * ```tsx\n * <Tooltip content=\"This is a tooltip\">\n *   <Information />\n * </Tooltip>\n */\nexport function Tooltip(props: TooltipProps & TooltipContentProps) {\n  const { content, children, asChild, ...nativeProps } = props\n  const styles = tooltip()\n  const position = {\n    placement: props.position || 'top',\n  }\n\n  return (\n    <ArkTooltip.Root openDelay={400} positioning={position}>\n      <ArkTooltip.Trigger className={styles.trigger} asChild={asChild}>\n        {children}\n      </ArkTooltip.Trigger>\n\n      <ArkTooltip.Positioner>\n        <ArkTooltip.Content\n          {...nativeProps}\n          className={cx(nativeProps.className, styles.content)}\n        >\n          <ArkTooltip.Arrow className={styles.arrow}>\n            <ArkTooltip.ArrowTip className={styles.arrowTip} />\n          </ArkTooltip.Arrow>\n\n          {content}\n        </ArkTooltip.Content>\n      </ArkTooltip.Positioner>\n    </ArkTooltip.Root>\n  )\n}\n"],"mappings":";AAAA;AAAA,EACE,WAAW;AAAA,OAEN;AACP,SAAS,UAAU;AACnB,SAAS,eAAe;AAqClB,cAKE,YALF;AATC,SAAS,QAAQ,OAA2C;AACjE,QAAM,EAAE,SAAS,UAAU,SAAS,GAAG,YAAY,IAAI;AACvD,QAAM,SAAS,QAAQ;AACvB,QAAM,WAAW;AAAA,IACf,WAAW,MAAM,YAAY;AAAA,EAC/B;AAEA,SACE,qBAAC,WAAW,MAAX,EAAgB,WAAW,KAAK,aAAa,UAC5C;AAAA,wBAAC,WAAW,SAAX,EAAmB,WAAW,OAAO,SAAS,SAC5C,UACH;AAAA,IAEA,oBAAC,WAAW,YAAX,EACC;AAAA,MAAC,WAAW;AAAA,MAAX;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,GAAG,YAAY,WAAW,OAAO,OAAO;AAAA,QAEnD;AAAA,8BAAC,WAAW,OAAX,EAAiB,WAAW,OAAO,OAClC,8BAAC,WAAW,UAAX,EAAoB,WAAW,OAAO,UAAU,GACnD;AAAA,UAEC;AAAA;AAAA;AAAA,IACH,GACF;AAAA,KACF;AAEJ;","names":[]}

package/build/modern/{chunk-3XGLNXJJ.js → chunk-M73ECA25.js}

@@ -1,15 +1,15 @@
+import {
+  Notification
+} from "./chunk-HP4ZN473.js";
+import {
+  NotificationDescription
+} from "./chunk-UXY3KCC3.js";
 import {
   NotificationHeading
-} from "./chunk-SXIXDXG3.js";
+} from "./chunk-SLHYBPJ5.js";
 import {
   Portal
 } from "./chunk-IQJDVFPP.js";
-import {
-  Notification
-} from "./chunk-7SGPJM66.js";
-import {
-  NotificationDescription
-} from "./chunk-XEW6TJJ4.js";
 import {
   Button
 } from "./chunk-EXGKZGML.js";
@@ -159,4 +159,4 @@ export {
   NotificationCenter,
   useNotificationCenter
 };
-//# sourceMappingURL=chunk-3XGLNXJJ.js.map
+//# sourceMappingURL=chunk-M73ECA25.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/notification-center.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\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'\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/**\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 [activeNotifications, setActiveNotifications] = useState<\n    NotifyOptions[]\n  >([])\n  const styles = notification()\n\n  const handleNotify = useCallback((options: NotifyOptions) => {\n    setActiveNotifications((prev) => {\n      const id = `${options.palette}:${prev.length + 1}`\n      return [...prev, { ...options, id }]\n    })\n  }, [])\n\n  const handleClose = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n    const target = e.currentTarget as HTMLButtonElement\n    setActiveNotifications((prev) => {\n      const item = prev.find((option) => option.id === target.value)\n      if (item?.onClose) item.onClose()\n      return prev.filter((option) => option.id !== target.value)\n    })\n  }, [])\n\n  const handleCloseAll = useCallback(() => {\n    setActiveNotifications((prev) => {\n      prev.forEach((item) => {\n        if (item.onClose) item.onClose()\n      })\n      return []\n    })\n  }, [])\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={activeNotifications.length > 0}>\n        <Portal container={props.container}>\n          <div className={styles.center}>\n            <Show when={activeNotifications.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              {activeNotifications.map((option) => (\n                <MatchNotification\n                  key={option.id}\n                  {...option}\n                  onClose={handleClose}\n                />\n              ))}\n            </div>\n          </div>\n        </Portal>\n      </Show>\n    </NotificationsContext.Provider>\n  )\n}\n\ninterface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {\n  onClose: (e: MouseEvent<HTMLButtonElement>) => void\n  key: string | undefined\n}\n\nfunction MatchNotification(props: MatchNotificationProps) {\n  const { palette, id, onClose, heading, description } = props\n\n  switch (palette) {\n    case 'success':\n      return (\n        <Notification\n          id={id!}\n          key={id}\n          onClose={onClose}\n          open\n          palette=\"success\"\n        >\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\n          id={id!}\n          key={id}\n          onClose={onClose}\n          open\n          palette=\"warning\"\n        >\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 id={id!} key={id} onClose={onClose} open 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 id={id!} key={id} onClose={onClose} open 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"],"mappings":"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","names":[]}

package/build/modern/chunk-N7O6D7BW.js

@@ -0,0 +1,63 @@
+import {
+  useTabsContext
+} from "./chunk-RZ7NG77U.js";
+
+// src/components/Tabs.client.tsx
+import { Tabs as ArkTabs } from "@ark-ui/react/tabs";
+import { cx } from "@cerberus/styled-system/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TabsList(props) {
+  const { children, ...tabsProps } = props;
+  const { styles } = useTabsContext();
+  return /* @__PURE__ */ jsxs(
+    ArkTabs.List,
+    {
+      ...tabsProps,
+      className: cx(tabsProps.className, styles.list),
+      children: [
+        children,
+        /* @__PURE__ */ jsx(TabIndicator, {})
+      ]
+    }
+  );
+}
+var TabList = TabsList;
+function Tab(props) {
+  const { styles } = useTabsContext();
+  return /* @__PURE__ */ jsx(
+    ArkTabs.Trigger,
+    {
+      ...props,
+      className: cx(props.className, styles.trigger)
+    }
+  );
+}
+function TabIndicator(props) {
+  const { styles } = useTabsContext();
+  return /* @__PURE__ */ jsx(
+    ArkTabs.Indicator,
+    {
+      ...props,
+      className: cx(props.className, styles.indicator)
+    }
+  );
+}
+function TabPanel(props) {
+  const { styles } = useTabsContext();
+  return /* @__PURE__ */ jsx(
+    ArkTabs.Content,
+    {
+      ...props,
+      className: cx(props.className, styles.content)
+    }
+  );
+}
+
+export {
+  TabsList,
+  TabList,
+  Tab,
+  TabIndicator,
+  TabPanel
+};
+//# sourceMappingURL=chunk-N7O6D7BW.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Tabs.client.tsx"],"sourcesContent":["'use client'\n\nimport { Tabs as ArkTabs } from '@ark-ui/react/tabs'\nimport { cx } from '@cerberus/styled-system/css'\nimport { useTabsContext } from '../context/tabs'\n\n/**\n * This module provides the Tabs family.\n * @module\n */\n\n/**\n * The tab list container for the Tabs group.\n * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)\n * @example\n * ```tsx\n * <Tabs>\n *   <TabList description=\"Profile settings\">\n *     <Tab value=\"overview\">Overview</Tab>\n *  </TabList>\n *  <TabPanel tab=\"overview\">...</TabPanel>\n * </Tabs>\n * ```\n */\nexport function TabsList(props: ArkTabs.ListProps) {\n  const { children, ...tabsProps } = props\n  const { styles } = useTabsContext()\n\n  return (\n    <ArkTabs.List\n      {...tabsProps}\n      className={cx(tabsProps.className, styles.list)}\n    >\n      {children}\n      <TabIndicator />\n    </ArkTabs.List>\n  )\n}\n\n/**\n * @deprecated Use `TabsList` instead.\n */\nexport const TabList = TabsList\n\n/**\n * The trigger for the Tabs group.\n * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)\n * @example\n * ```tsx\n * <Tabs>\n *   <TabList description=\"Profile settings\">\n *     <Tab value=\"overview\">Overview</Tab>\n *  </TabList>\n *  <TabPanel tab=\"overview\">...</TabPanel>\n * </Tabs>\n * ```\n */\nexport function Tab(props: ArkTabs.TriggerProps) {\n  const { styles } = useTabsContext()\n  return (\n    <ArkTabs.Trigger\n      {...props}\n      className={cx(props.className, styles.trigger)}\n    />\n  )\n}\n\n/**\n * The indicator for the Tabs group which shows the active tab.\n * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)\n * @example\n * ```tsx\n * <Tabs>\n *   <TabList description=\"Profile settings\">\n *     <Tab value=\"overview\">Overview</Tab>\n *     <TabsIndicator />\n *  </TabList>\n *  <TabPanel tab=\"overview\">...</TabPanel>\n * </Tabs>\n * ```\n */\nexport function TabIndicator(props: ArkTabs.IndicatorProps) {\n  const { styles } = useTabsContext()\n  return (\n    <ArkTabs.Indicator\n      {...props}\n      className={cx(props.className, styles.indicator)}\n    />\n  )\n}\n\n/**\n * The content for the Tabs group.\n * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)\n * @example\n * ```tsx\n * <Tabs>\n *   <TabList description=\"Profile settings\">\n *     <Tab value=\"overview\">Overview</Tab>\n *  </TabList>\n *  <TabPanel tab=\"overview\">...</TabPanel>\n * </Tabs>\n * ```\n */\nexport function TabPanel(props: ArkTabs.ContentProps) {\n  const { styles } = useTabsContext()\n  return (\n    <ArkTabs.Content\n      {...props}\n      className={cx(props.className, styles.content)}\n    />\n  )\n}\n"],"mappings":";;;;;AAEA,SAAS,QAAQ,eAAe;AAChC,SAAS,UAAU;AA0Bf,SAKE,KALF;AALG,SAAS,SAAS,OAA0B;AACjD,QAAM,EAAE,UAAU,GAAG,UAAU,IAAI;AACnC,QAAM,EAAE,OAAO,IAAI,eAAe;AAElC,SACE;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,UAAU,WAAW,OAAO,IAAI;AAAA,MAE7C;AAAA;AAAA,QACD,oBAAC,gBAAa;AAAA;AAAA;AAAA,EAChB;AAEJ;AAKO,IAAM,UAAU;AAehB,SAAS,IAAI,OAA6B;AAC/C,QAAM,EAAE,OAAO,IAAI,eAAe;AAClC,SACE;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,OAAO,OAAO;AAAA;AAAA,EAC/C;AAEJ;AAgBO,SAAS,aAAa,OAA+B;AAC1D,QAAM,EAAE,OAAO,IAAI,eAAe;AAClC,SACE;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,OAAO,SAAS;AAAA;AAAA,EACjD;AAEJ;AAeO,SAAS,SAAS,OAA6B;AACpD,QAAM,EAAE,OAAO,IAAI,eAAe;AAClC,SACE;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,OAAO,OAAO;AAAA;AAAA,EAC/C;AAEJ;","names":[]}

package/build/modern/{chunk-W4DXACNV.js → chunk-O7QVCF3H.js}

@@ -1,12 +1,12 @@
 import {
   Avatar
-} from "./chunk-SPZYPRZ6.js";
+} from "./chunk-BU5JK37R.js";
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
 import {
   $cerberusIcons
-} from "./chunk-VERRHMW4.js";
+} from "./chunk-DDOTCGGA.js";
 
 // src/components/FileUploader.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -72,4 +72,4 @@ function FileUploader(props) {
 export {
   FileUploader
 };
-//# sourceMappingURL=chunk-W4DXACNV.js.map
+//# sourceMappingURL=chunk-O7QVCF3H.js.map

package/build/modern/chunk-RIZGWERR.js

@@ -0,0 +1,161 @@
+import {
+  Portal
+} from "./chunk-IQJDVFPP.js";
+import {
+  useFieldContext
+} from "./chunk-UZDVOIW5.js";
+import {
+  DatePickerContext,
+  DatePickerTable,
+  DatePickerTableCell,
+  DatePickerTableCellTrigger,
+  DatePickerTableHeader,
+  DatePickerTrigger,
+  DatePickerView,
+  DatePickerViewControlGroup
+} from "./chunk-IP5VFOPZ.js";
+
+// src/components/DatePicker.client.tsx
+import {
+  DatePicker as ArkDP
+} from "@ark-ui/react";
+import { datePicker } from "@cerberus/styled-system/recipes";
+import { cx } from "@cerberus/styled-system/css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var datePickerStyles = datePicker();
+function DatePicker(props) {
+  const states = useFieldContext();
+  return /* @__PURE__ */ jsx(
+    ArkDP.Root,
+    {
+      ...props,
+      ...states,
+      positioning: {
+        placement: "bottom-start"
+      }
+    }
+  );
+}
+function DatePickerInput(props) {
+  const { invalid, ...fieldStates } = useFieldContext();
+  return /* @__PURE__ */ jsxs(ArkDP.Control, { className: datePickerStyles.control, children: [
+    /* @__PURE__ */ jsx(DatePickerTrigger, {}),
+    /* @__PURE__ */ jsx(
+      ArkDP.Input,
+      {
+        ...props,
+        ...fieldStates,
+        ...invalid && { "aria-invalid": true },
+        className: cx(props.className, datePickerStyles.input),
+        placeholder: props.placeholder ?? "DD MMM YYYY",
+        maxLength: 11
+      }
+    )
+  ] });
+}
+function RangePickerInput(props) {
+  const { invalid, ...fieldStates } = useFieldContext();
+  return /* @__PURE__ */ jsxs(ArkDP.Control, { "data-range": true, className: datePickerStyles.control, children: [
+    /* @__PURE__ */ jsx(DatePickerTrigger, {}),
+    /* @__PURE__ */ jsx(
+      ArkDP.Input,
+      {
+        ...props,
+        ...fieldStates,
+        ...invalid && { "aria-invalid": true },
+        "data-range-input": true,
+        className: cx(props.className, datePickerStyles.input),
+        placeholder: props.placeholder ?? "DD MMM YYYY",
+        maxLength: 11,
+        index: 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ArkDP.Input,
+      {
+        ...props,
+        ...fieldStates,
+        ...invalid && { "aria-invalid": true },
+        "data-range-input": true,
+        "data-range-end-input": true,
+        className: cx(props.className, datePickerStyles.input),
+        placeholder: props.placeholder ?? "DD MMM YYYY",
+        maxLength: 11,
+        index: 1
+      }
+    )
+  ] });
+}
+function DatePickerContent(props) {
+  const { children, ...contentProps } = props;
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(ArkDP.Positioner, { className: datePickerStyles.positioner, children: /* @__PURE__ */ jsx(
+    ArkDP.Content,
+    {
+      ...contentProps,
+      className: cx(contentProps.className, datePickerStyles.content),
+      children
+    }
+  ) }) });
+}
+function DatePickerDayView(props) {
+  function isToday(date) {
+    const today = /* @__PURE__ */ new Date();
+    const formatted = today.toISOString().split("T")[0];
+    const arkDate = `${date.year}-${String(date.month).padStart(2, "0")}-${String(date.day).padStart(2, "0")}`;
+    return formatted === arkDate;
+  }
+  function isPastDay(date) {
+    const today = /* @__PURE__ */ new Date();
+    const arkDate = `${date.year}-${String(date.month).padStart(2, "0")}-${String(date.day).padStart(2, "0")}`;
+    return new Date(arkDate) < today;
+  }
+  function getDayValue(date) {
+    if (isToday(date)) return "today";
+    if (isPastDay(date)) return "past";
+    return "future";
+  }
+  return /* @__PURE__ */ jsx(DatePickerView, { ...props, view: "day", children: /* @__PURE__ */ jsx(DatePickerContext, { children: (datePicker2) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ jsxs(DatePickerTable, { children: [
+      /* @__PURE__ */ jsx(ArkDP.TableHead, { children: /* @__PURE__ */ jsx(ArkDP.TableRow, { children: datePicker2.weekDays.map((weekDay, id) => /* @__PURE__ */ jsx(DatePickerTableHeader, { children: weekDay.narrow }, id)) }) }),
+      /* @__PURE__ */ jsx(ArkDP.TableBody, { children: datePicker2.weeks.map((week, id) => /* @__PURE__ */ jsx(ArkDP.TableRow, { children: week.map((day, id2) => /* @__PURE__ */ jsx(DatePickerTableCell, { value: day, children: /* @__PURE__ */ jsx(
+        DatePickerTableCellTrigger,
+        {
+          "data-date": getDayValue(day),
+          children: day.day
+        }
+      ) }, id2)) }, id)) })
+    ] })
+  ] }) }) });
+}
+function DatePickerMonthView(props) {
+  return /* @__PURE__ */ jsx(ArkDP.View, { ...props, view: "month", children: /* @__PURE__ */ jsx(ArkDP.Context, { children: (datePicker2) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ jsx(DatePickerTable, { children: /* @__PURE__ */ jsx(ArkDP.TableBody, { children: datePicker2.getMonthsGrid({ columns: 4, format: "short" }).map((months, id) => /* @__PURE__ */ jsx(ArkDP.TableRow, { children: months.map((month, id2) => /* @__PURE__ */ jsx(DatePickerTableCell, { value: month.value, children: /* @__PURE__ */ jsx(DatePickerTableCellTrigger, { children: month.label }) }, id2)) }, id)) }) })
+  ] }) }) });
+}
+function DatePickerYearView(props) {
+  return /* @__PURE__ */ jsx(ArkDP.View, { ...props, view: "year", children: /* @__PURE__ */ jsx(ArkDP.Context, { children: (datePicker2) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DatePickerViewControlGroup, {}),
+    /* @__PURE__ */ jsx(DatePickerTable, { children: /* @__PURE__ */ jsx(ArkDP.TableBody, { children: datePicker2.getYearsGrid({ columns: 4 }).map((years, id) => /* @__PURE__ */ jsx(ArkDP.TableRow, { children: years.map((year, id2) => /* @__PURE__ */ jsx(DatePickerTableCell, { value: year.value, children: /* @__PURE__ */ jsx(DatePickerTableCellTrigger, { children: year.label }) }, id2)) }, id)) }) })
+  ] }) }) });
+}
+function DatePickerCalendar() {
+  return /* @__PURE__ */ jsxs(DatePickerContent, { children: [
+    /* @__PURE__ */ jsx(DatePickerDayView, {}),
+    /* @__PURE__ */ jsx(DatePickerMonthView, {}),
+    /* @__PURE__ */ jsx(DatePickerYearView, {})
+  ] });
+}
+
+export {
+  DatePicker,
+  DatePickerInput,
+  RangePickerInput,
+  DatePickerContent,
+  DatePickerDayView,
+  DatePickerMonthView,
+  DatePickerYearView,
+  DatePickerCalendar
+};
+//# sourceMappingURL=chunk-RIZGWERR.js.map

package/build/modern/chunk-RIZGWERR.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 DatePickerViewProps,\n  // type DateValue,\n} from '@ark-ui/react'\nimport { Portal } from './Portal'\n// import { useCallback } from 'react'\nimport { datePicker } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport {\n  DatePickerTrigger,\n  DatePickerView,\n  DatePickerContext,\n  DatePickerViewControlGroup,\n  DatePickerTable,\n  DatePickerTableHeader,\n  DatePickerTableCellTrigger,\n  DatePickerTableCell,\n} from './DatePicker.server'\n// import { formatISOToMilitary } from '../hooks/useDate'\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 * 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"],"mappings":"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","names":["datePicker","id"]}

package/build/modern/chunk-RZ7NG77U.js

@@ -0,0 +1,77 @@
+import {
+  getLocalStorage,
+  setLocalStorage
+} from "./chunk-FQLMPEYX.js";
+
+// src/context/tabs.tsx
+import { Tabs as ArkTabs } from "@ark-ui/react/tabs";
+import { tabs } from "@cerberus/styled-system/recipes";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var TabsContext = createContext(null);
+function Tabs(props) {
+  const { cache, defaultValue, palette, uuid, ...arkProps } = props;
+  const [activeTab, setActiveTab] = useState(
+    () => cache ? "" : defaultValue
+  );
+  const styles = tabs({ palette });
+  const cacheKey = useMemo(
+    () => uuid ? `cerberus-tabs-${uuid}` : "cerberus-tabs",
+    [uuid]
+  );
+  const handleValueChange = useCallback(
+    (details) => {
+      if (cache) {
+        setLocalStorage(cacheKey, details.value);
+      }
+      setActiveTab(details.value);
+    },
+    [cache]
+  );
+  useEffect(() => {
+    if (cache && !activeTab) {
+      const cachedTab = getLocalStorage(cacheKey, defaultValue ?? "");
+      setActiveTab(cachedTab);
+    }
+  }, [cache, defaultValue, activeTab]);
+  const value = useMemo(
+    () => ({
+      active: activeTab,
+      styles
+    }),
+    [activeTab, palette, styles]
+  );
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    ArkTabs.Root,
+    {
+      ...arkProps,
+      "aria-busy": !activeTab,
+      className: styles.root,
+      defaultValue,
+      onValueChange: handleValueChange,
+      value: activeTab,
+      children: props.children
+    }
+  ) });
+}
+function useTabsContext() {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error("useTabsContext must be used within a Tabs Provider.");
+  }
+  return context;
+}
+
+export {
+  TabsContext,
+  Tabs,
+  useTabsContext
+};
+//# sourceMappingURL=chunk-RZ7NG77U.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/tabs.tsx"],"sourcesContent":["'use client'\n\nimport { Tabs as ArkTabs } from '@ark-ui/react/tabs'\nimport { tabs, type TabsVariantProps } from '@cerberus/styled-system/recipes'\nimport type { Pretty } from '@cerberus/styled-system/types'\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type PropsWithChildren,\n} from 'react'\nimport { getLocalStorage, setLocalStorage } from '../utils/localStorage'\n\n/**\n * This module provides a Tabs component and a hook to access its context.\n * @module Tabs\n */\n\nexport interface TabsContextValue {\n  /**\n   * The styles for the tabs.\n   */\n  styles: {\n    list: Pretty<string>\n    trigger: Pretty<string>\n    content: Pretty<string>\n    indicator: Pretty<string>\n  }\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport interface TabsProviderBaseProps extends ArkTabs.RootProps {\n  /**\n   * A unique identifier for the Tabs component. Typically used when there are\n   * multiple Tabs components on the same page and you want to uniquely cache\n   * the active tab state.\n   */\n  uuid?: string\n  /**\n   * The default tab to display when the component is first rendered.\n   */\n  defaultValue?: string\n  /**\n   * Whether to cache the active tab state in local storage.\n   */\n  cache?: boolean\n}\n\nexport type TabsProviderProps = TabsProviderBaseProps & TabsVariantProps\n\n/**\n * The Tabs component provides a context to manage tab state.\n * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)\n * @example\n * ```tsx\n * <Tabs cache>\n *  <TabsList>\n *    <Tab value=\"overview\">Overview</Tab>\n *    <Tab value=\"guidelines\">Guidelines</Tab>\n *  </TabsList>\n *  <TabPanel value=\"overview\">Overview content</TabPanel>\n *  <TabPanel value=\"guidelines\">Guidelines content</TabPanel>\n * </Tabs>\n * ```\n */\nexport function Tabs(props: PropsWithChildren<TabsProviderProps>): JSX.Element {\n  const { cache, defaultValue, palette, uuid, ...arkProps } = props\n  const [activeTab, setActiveTab] = useState<string | undefined>(() =>\n    cache ? '' : defaultValue,\n  )\n  const styles = tabs({ palette })\n\n  const cacheKey = useMemo(\n    () => (uuid ? `cerberus-tabs-${uuid}` : 'cerberus-tabs'),\n    [uuid],\n  )\n\n  const handleValueChange = useCallback(\n    (details: { value: string }) => {\n      if (cache) {\n        setLocalStorage(cacheKey, details.value)\n      }\n      setActiveTab(details.value)\n    },\n    [cache],\n  )\n\n  useEffect(() => {\n    if (cache && !activeTab) {\n      const cachedTab = getLocalStorage(cacheKey, defaultValue ?? '')\n      setActiveTab(cachedTab)\n    }\n  }, [cache, defaultValue, activeTab])\n\n  const value = useMemo(\n    () => ({\n      active: activeTab,\n      styles,\n    }),\n    [activeTab, palette, styles],\n  )\n\n  return (\n    <TabsContext.Provider value={value}>\n      <ArkTabs.Root\n        {...arkProps}\n        aria-busy={!activeTab}\n        className={styles.root}\n        defaultValue={defaultValue}\n        onValueChange={handleValueChange}\n        value={activeTab}\n      >\n        {props.children}\n      </ArkTabs.Root>\n    </TabsContext.Provider>\n  )\n}\n\n/**\n * Used to access the tabs context.\n * @returns The tabs context.\n */\nexport function useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext)\n  if (!context) {\n    throw new Error('useTabsContext must be used within a Tabs Provider.')\n  }\n  return context\n}\n"],"mappings":";;;;;;AAEA,SAAS,QAAQ,eAAe;AAChC,SAAS,YAAmC;AAE5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA+FD;AA3EC,IAAM,cAAc,cAAuC,IAAI;AAoC/D,SAAS,KAAK,OAA0D;AAC7E,QAAM,EAAE,OAAO,cAAc,SAAS,MAAM,GAAG,SAAS,IAAI;AAC5D,QAAM,CAAC,WAAW,YAAY,IAAI;AAAA,IAA6B,MAC7D,QAAQ,KAAK;AAAA,EACf;AACA,QAAM,SAAS,KAAK,EAAE,QAAQ,CAAC;AAE/B,QAAM,WAAW;AAAA,IACf,MAAO,OAAO,iBAAiB,IAAI,KAAK;AAAA,IACxC,CAAC,IAAI;AAAA,EACP;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,YAA+B;AAC9B,UAAI,OAAO;AACT,wBAAgB,UAAU,QAAQ,KAAK;AAAA,MACzC;AACA,mBAAa,QAAQ,KAAK;AAAA,IAC5B;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,YAAU,MAAM;AACd,QAAI,SAAS,CAAC,WAAW;AACvB,YAAM,YAAY,gBAAgB,UAAU,gBAAgB,EAAE;AAC9D,mBAAa,SAAS;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,OAAO,cAAc,SAAS,CAAC;AAEnC,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,QAAQ;AAAA,MACR;AAAA,IACF;AAAA,IACA,CAAC,WAAW,SAAS,MAAM;AAAA,EAC7B;AAEA,SACE,oBAAC,YAAY,UAAZ,EAAqB,OACpB;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACE,GAAG;AAAA,MACJ,aAAW,CAAC;AAAA,MACZ,WAAW,OAAO;AAAA,MAClB;AAAA,MACA,eAAe;AAAA,MACf,OAAO;AAAA,MAEN,gBAAM;AAAA;AAAA,EACT,GACF;AAEJ;AAMO,SAAS,iBAAmC;AACjD,QAAM,UAAU,WAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}