@cerberus-design/react 0.25.0 → 0.25.1-rc.1

package/dist/components/combobox/combobox.cjs

@@ -5,7 +5,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const cerberus = require('../../context/cerberus.cjs');
 const index = require('../../utils/index.cjs');
-const portal = require('../portal/portal.cjs');
 const show = require('../show/show.cjs');
 const parts = require('./parts.cjs');
 const primitives = require('./primitives.cjs');
@@ -33,7 +32,7 @@ function Combobox(props) {
       /* @__PURE__ */ jsxRuntime.jsx(parts.ComboboxParts.ClearTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) }),
       /* @__PURE__ */ jsxRuntime.jsx(parts.ComboboxParts.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectArrow, {}) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, { container: elProps.container, children: /* @__PURE__ */ jsxRuntime.jsx(parts.ComboboxParts.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsx(parts.ComboboxParts.Content, { size: rootProps.size, children: elProps.children }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(parts.ComboboxParts.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsx(parts.ComboboxParts.Content, { size: rootProps.size, children: elProps.children }) })
   ] });
 }
 

package/dist/components/combobox/combobox.d.cts

@@ -13,9 +13,7 @@ export interface ComboboxProps extends ComboboxRootProps<SelectCollectionItem>,
      */
     startIcon?: FieldInputElProps['startIcon'];
     /**
-     * The container element to render the Select dropdown in. This is used
-     * to render the Select dropdown in a specific context, such as a modal.
-     * @default document.body
+     * @deprecated - this is no longer needed
      */
     container?: RefObject<HTMLElement | null>;
 }

package/dist/components/combobox/combobox.d.ts

@@ -13,9 +13,7 @@ export interface ComboboxProps extends ComboboxRootProps<SelectCollectionItem>,
      */
     startIcon?: FieldInputElProps['startIcon'];
     /**
-     * The container element to render the Select dropdown in. This is used
-     * to render the Select dropdown in a specific context, such as a modal.
-     * @default document.body
+     * @deprecated - this is no longer needed
      */
     container?: RefObject<HTMLElement | null>;
 }

package/dist/components/combobox/combobox.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useCerberusContext } from '../../context/cerberus.js';
 import { splitProps } from '../../utils/index.js';
-import { Portal } from '../portal/portal.js';
 import { Show } from '../show/show.js';
 import { ComboboxParts } from './parts.js';
 import { ComboboxStartIcon } from './primitives.js';
@@ -29,7 +28,7 @@ function Combobox(props) {
       /* @__PURE__ */ jsx(ComboboxParts.ClearTrigger, { children: /* @__PURE__ */ jsx(CloseIcon, {}) }),
       /* @__PURE__ */ jsx(ComboboxParts.Trigger, { children: /* @__PURE__ */ jsx(SelectArrow, {}) })
     ] }),
-    /* @__PURE__ */ jsx(Portal, { container: elProps.container, children: /* @__PURE__ */ jsx(ComboboxParts.Positioner, { children: /* @__PURE__ */ jsx(ComboboxParts.Content, { size: rootProps.size, children: elProps.children }) }) })
+    /* @__PURE__ */ jsx(ComboboxParts.Positioner, { children: /* @__PURE__ */ jsx(ComboboxParts.Content, { size: rootProps.size, children: elProps.children }) })
   ] });
 }
 

package/dist/components/cta-dialog/provider.cjs

@@ -17,6 +17,7 @@ const context = require('./context.cjs');
 const triggerItem = require('./trigger-item.cjs');
 
 function CTAModal(props) {
+  const { children, ...rootProps } = props;
   const [open, setOpen] = React.useState(false);
   const [content, setContent] = React.useState(null);
   const confirmIcon = content?.icon;
@@ -46,7 +47,7 @@ function CTAModal(props) {
     [handleShow]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(context.CTAModalContext.Provider, { value, children: [
-    props.children,
+    children,
     /* @__PURE__ */ jsxRuntime.jsx(
       primitives.DialogProvider,
       {
@@ -54,6 +55,7 @@ function CTAModal(props) {
         open,
         onOpenChange: (e) => setOpen(e.open),
         unmountOnExit: true,
+        ...rootProps,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           dialog.Dialog,
           {

package/dist/components/cta-dialog/provider.d.cts

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from 'react';
+import { DialogRootProps } from '../dialog/index';
 import { CTAModalValue } from './context';
 /**
  * This module provides the provider and hook for the cta modal.
@@ -36,5 +37,5 @@ import { CTAModalValue } from './context';
  * }, [cta])
  * ```
  */
-export declare function CTAModal(props: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element;
+export declare function CTAModal(props: PropsWithChildren<DialogRootProps>): import("react/jsx-runtime").JSX.Element;
 export declare function useCTAModal(): CTAModalValue;

package/dist/components/cta-dialog/provider.d.ts

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from 'react';
+import { DialogRootProps } from '../dialog/index';
 import { CTAModalValue } from './context';
 /**
  * This module provides the provider and hook for the cta modal.
@@ -36,5 +37,5 @@ import { CTAModalValue } from './context';
  * }, [cta])
  * ```
  */
-export declare function CTAModal(props: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element;
+export declare function CTAModal(props: PropsWithChildren<DialogRootProps>): import("react/jsx-runtime").JSX.Element;
 export declare function useCTAModal(): CTAModalValue;

package/dist/components/cta-dialog/provider.js

@@ -13,6 +13,7 @@ import { CTAModalContext } from './context.js';
 import { TriggerItem } from './trigger-item.js';
 
 function CTAModal(props) {
+  const { children, ...rootProps } = props;
   const [open, setOpen] = useState(false);
   const [content, setContent] = useState(null);
   const confirmIcon = content?.icon;
@@ -42,7 +43,7 @@ function CTAModal(props) {
     [handleShow]
   );
   return /* @__PURE__ */ jsxs(CTAModalContext.Provider, { value, children: [
-    props.children,
+    children,
     /* @__PURE__ */ jsx(
       DialogProvider,
       {
@@ -50,6 +51,7 @@ function CTAModal(props) {
         open,
         onOpenChange: (e) => setOpen(e.open),
         unmountOnExit: true,
+        ...rootProps,
         children: /* @__PURE__ */ jsxs(
           Dialog,
           {

package/dist/components/date-picker/calendar.cjs

@@ -4,13 +4,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const index = require('../../utils/index.cjs');
 const content = require('./content.cjs');
 const dayView = require('./day-view.cjs');
 const monthView = require('./month-view.cjs');
 const yearView = require('./year-view.cjs');
 
 function DatePickerCalendar(props) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(content.DatePickerContent, { ...props, children: [
+  const [, contentProps] = index.splitProps(props, ["withModal", "container"]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(content.DatePickerContent, { ...contentProps, children: [
     /* @__PURE__ */ jsxRuntime.jsx(dayView.DatePickerDayView, {}),
     /* @__PURE__ */ jsxRuntime.jsx(monthView.DatePickerMonthView, { view: "month" }),
     /* @__PURE__ */ jsxRuntime.jsx(yearView.DatePickerYearView, { view: "year" })

package/dist/components/date-picker/calendar.d.cts

@@ -1,20 +1,16 @@
 import { RefObject } from 'react';
+import { DatePickerContentProps } from './primitives';
 /**
  * This module contains an abstraction of the DatePicker component.
  * @module 'date-picker/calendar'
  */
 export interface DatePickerCalendarProps {
     /**
-     * Determines whether to disable the Portal used to render the DatePicker
-     * content in a modal. This is an alternative to using the `container` prop
-     * which provides the context to the Portal instead.
-     * @default false
+     * @deprecated - this is no longer needed.
      */
     withModal?: boolean;
     /**
-     * The container element to render the DatePicker content in. This is used
-     * to render the DatePicker content in a specific context, such as a modal.
-     * @default document.body
+     * @deprecated - this is no longer needed.
      */
     container?: RefObject<HTMLElement | null>;
 }
@@ -33,4 +29,4 @@ export interface DatePickerCalendarProps {
  * </Field>
  * ```
  */
-export declare function DatePickerCalendar(props: DatePickerCalendarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePickerCalendar(props: DatePickerCalendarProps & DatePickerContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/date-picker/calendar.d.ts

@@ -1,20 +1,16 @@
 import { RefObject } from 'react';
+import { DatePickerContentProps } from './primitives';
 /**
  * This module contains an abstraction of the DatePicker component.
  * @module 'date-picker/calendar'
  */
 export interface DatePickerCalendarProps {
     /**
-     * Determines whether to disable the Portal used to render the DatePicker
-     * content in a modal. This is an alternative to using the `container` prop
-     * which provides the context to the Portal instead.
-     * @default false
+     * @deprecated - this is no longer needed.
      */
     withModal?: boolean;
     /**
-     * The container element to render the DatePicker content in. This is used
-     * to render the DatePicker content in a specific context, such as a modal.
-     * @default document.body
+     * @deprecated - this is no longer needed.
      */
     container?: RefObject<HTMLElement | null>;
 }
@@ -33,4 +29,4 @@ export interface DatePickerCalendarProps {
  * </Field>
  * ```
  */
-export declare function DatePickerCalendar(props: DatePickerCalendarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePickerCalendar(props: DatePickerCalendarProps & DatePickerContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/date-picker/calendar.js

@@ -1,12 +1,14 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { splitProps } from '../../utils/index.js';
 import { DatePickerContent } from './content.js';
 import { DatePickerDayView } from './day-view.js';
 import { DatePickerMonthView } from './month-view.js';
 import { DatePickerYearView } from './year-view.js';
 
 function DatePickerCalendar(props) {
-  return /* @__PURE__ */ jsxs(DatePickerContent, { ...props, children: [
+  const [, contentProps] = splitProps(props, ["withModal", "container"]);
+  return /* @__PURE__ */ jsxs(DatePickerContent, { ...contentProps, children: [
     /* @__PURE__ */ jsx(DatePickerDayView, {}),
     /* @__PURE__ */ jsx(DatePickerMonthView, { view: "month" }),
     /* @__PURE__ */ jsx(DatePickerYearView, { view: "year" })

package/dist/components/date-picker/content.cjs

@@ -4,12 +4,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const portal = require('../portal/portal.cjs');
 const parts = require('./parts.cjs');
 
 function DatePickerContent(props) {
-  const { withModal, container, ...contentProps } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, { disabled: withModal ?? false, container, children: /* @__PURE__ */ jsxRuntime.jsx(parts.DatePickerParts.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsx(parts.DatePickerParts.Content, { ...contentProps }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(parts.DatePickerParts.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsx(parts.DatePickerParts.Content, { ...props }) });
 }
 
 exports.DatePickerContent = DatePickerContent;

package/dist/components/date-picker/content.d.cts

@@ -1,4 +1,3 @@
-import { DatePickerCalendarProps } from './calendar';
 import { DatePickerContentProps } from './primitives';
 /**
  * This private module contains an abstraction of the DatePickerContent
@@ -10,4 +9,4 @@ import { DatePickerContentProps } from './primitives';
  * primitives.
  * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
  */
-export declare function DatePickerContent(props: DatePickerContentProps & DatePickerCalendarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePickerContent(props: DatePickerContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/date-picker/content.d.ts

@@ -1,4 +1,3 @@
-import { DatePickerCalendarProps } from './calendar';
 import { DatePickerContentProps } from './primitives';
 /**
  * This private module contains an abstraction of the DatePickerContent
@@ -10,4 +9,4 @@ import { DatePickerContentProps } from './primitives';
  * primitives.
  * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)
  */
-export declare function DatePickerContent(props: DatePickerContentProps & DatePickerCalendarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePickerContent(props: DatePickerContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/date-picker/content.js

@@ -1,11 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Portal } from '../portal/portal.js';
 import { DatePickerParts } from './parts.js';
 
 function DatePickerContent(props) {
-  const { withModal, container, ...contentProps } = props;
-  return /* @__PURE__ */ jsx(Portal, { disabled: withModal ?? false, container, children: /* @__PURE__ */ jsx(DatePickerParts.Positioner, { children: /* @__PURE__ */ jsx(DatePickerParts.Content, { ...contentProps }) }) });
+  return /* @__PURE__ */ jsx(DatePickerParts.Positioner, { children: /* @__PURE__ */ jsx(DatePickerParts.Content, { ...props }) });
 }
 
 export { DatePickerContent };

package/dist/components/date-picker/date-picker.cjs

@@ -4,17 +4,62 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const parts = require('./parts.cjs');
+const CalendarDate = require('../../node_modules/.pnpm/@internationalized_date@3.10.1/node_modules/@internationalized/date/src/CalendarDate.cjs');
 
+const FULL_DATE_REGEX = /^(\d{1,2})[\s/](\d{1,2})[\s/](\d{4})$/;
+const PARTIAL_DATE_REGEX = /^(\d{1,2})[\s/](\d{1,2})$/;
+const MONTH_REGEX = /^(\d{1,2})$/;
 function DatePicker(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     parts.DatePickerParts.Root,
     {
-      ...props,
+      format: handleFormat,
+      parse,
       positioning: {
         placement: "bottom-start"
-      }
+      },
+      ...props
     }
   );
 }
+function parse(value) {
+  const fullMatch = value.match(FULL_DATE_REGEX);
+  if (fullMatch) {
+    const [, month, day, year] = fullMatch.map(Number);
+    try {
+      return new CalendarDate.CalendarDate(year, month, day);
+    } catch {
+      return void 0;
+    }
+  }
+  const partialMatch = value.match(PARTIAL_DATE_REGEX);
+  if (partialMatch) {
+    const [, month, day] = partialMatch.map(Number);
+    const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+    try {
+      return new CalendarDate.CalendarDate(currentYear, month, day);
+    } catch {
+      return void 0;
+    }
+  }
+  const monthMatch = value.match(MONTH_REGEX);
+  if (monthMatch) {
+    const [, month] = monthMatch.map(Number);
+    const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+    try {
+      if (month < 1 || month > 12) return void 0;
+      return new CalendarDate.CalendarDate(currentYear, month, 1);
+    } catch {
+      return void 0;
+    }
+  }
+  return void 0;
+}
+function handleFormat(date) {
+  const day = date.day.toString().padStart(2, "0");
+  const month = date.month.toString().padStart(2, "0");
+  const year = date.year.toString();
+  return `${month} ${day} ${year}`;
+}
 
 exports.DatePicker = DatePicker;

package/dist/components/date-picker/date-picker.d.cts

@@ -1,12 +1,7 @@
 import { DatePickerRootProps } from './primitives';
-/**
- * This module contains an abstraction of the DatePicker.Root primitive.
- * @module 'date-picker/root'
- */
 /**
  * DatePicker component is an abstraction of the DatePickerRoot primitive which
  * is the context provider to the DatePicker.
- * @description [Cerberus Docs](https://cerberus.digitalu.design/react/date-picker)
- * @description [Ark Docs](https://ark-ui.com/react/docs/components/date-picker)
+ * @description [Cerberus Docs](https://cerberus.digitalu.design/docs/components/date-picker)
  */
 export declare function DatePicker(props: DatePickerRootProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/date-picker/date-picker.d.ts

@@ -1,12 +1,7 @@
 import { DatePickerRootProps } from './primitives';
-/**
- * This module contains an abstraction of the DatePicker.Root primitive.
- * @module 'date-picker/root'
- */
 /**
  * DatePicker component is an abstraction of the DatePickerRoot primitive which
  * is the context provider to the DatePicker.
- * @description [Cerberus Docs](https://cerberus.digitalu.design/react/date-picker)
- * @description [Ark Docs](https://ark-ui.com/react/docs/components/date-picker)
+ * @description [Cerberus Docs](https://cerberus.digitalu.design/docs/components/date-picker)
  */
 export declare function DatePicker(props: DatePickerRootProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/date-picker/date-picker.js

@@ -1,16 +1,61 @@
 import { jsx } from 'react/jsx-runtime';
 import { DatePickerParts } from './parts.js';
+import { CalendarDate } from '../../node_modules/.pnpm/@internationalized_date@3.10.1/node_modules/@internationalized/date/src/CalendarDate.js';
 
+const FULL_DATE_REGEX = /^(\d{1,2})[\s/](\d{1,2})[\s/](\d{4})$/;
+const PARTIAL_DATE_REGEX = /^(\d{1,2})[\s/](\d{1,2})$/;
+const MONTH_REGEX = /^(\d{1,2})$/;
 function DatePicker(props) {
   return /* @__PURE__ */ jsx(
     DatePickerParts.Root,
     {
-      ...props,
+      format: handleFormat,
+      parse,
       positioning: {
         placement: "bottom-start"
-      }
+      },
+      ...props
     }
   );
 }
+function parse(value) {
+  const fullMatch = value.match(FULL_DATE_REGEX);
+  if (fullMatch) {
+    const [, month, day, year] = fullMatch.map(Number);
+    try {
+      return new CalendarDate(year, month, day);
+    } catch {
+      return void 0;
+    }
+  }
+  const partialMatch = value.match(PARTIAL_DATE_REGEX);
+  if (partialMatch) {
+    const [, month, day] = partialMatch.map(Number);
+    const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+    try {
+      return new CalendarDate(currentYear, month, day);
+    } catch {
+      return void 0;
+    }
+  }
+  const monthMatch = value.match(MONTH_REGEX);
+  if (monthMatch) {
+    const [, month] = monthMatch.map(Number);
+    const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+    try {
+      if (month < 1 || month > 12) return void 0;
+      return new CalendarDate(currentYear, month, 1);
+    } catch {
+      return void 0;
+    }
+  }
+  return void 0;
+}
+function handleFormat(date) {
+  const day = date.day.toString().padStart(2, "0");
+  const month = date.month.toString().padStart(2, "0");
+  const year = date.year.toString();
+  return `${month} ${day} ${year}`;
+}
 
 export { DatePicker };

package/dist/components/date-picker/index.cjs

@@ -9,9 +9,9 @@ const input = require('./input.cjs');
 const rangeInput = require('./range-input.cjs');
 const calendar = require('./calendar.cjs');
 const index = require('../../node_modules/.pnpm/@zag-js_date-picker@1.31.1_@internationalized_date@3.10.0/node_modules/@zag-js/date-picker/dist/index.cjs');
-const CalendarDate = require('../../node_modules/.pnpm/@internationalized_date@3.10.0/node_modules/@internationalized/date/src/CalendarDate.cjs');
-const queries = require('../../node_modules/.pnpm/@internationalized_date@3.10.0/node_modules/@internationalized/date/src/queries.cjs');
-const DateFormatter = require('../../node_modules/.pnpm/@internationalized_date@3.10.0/node_modules/@internationalized/date/src/DateFormatter.cjs');
+const CalendarDate = require('../../node_modules/.pnpm/@internationalized_date@3.10.1/node_modules/@internationalized/date/src/CalendarDate.cjs');
+const queries = require('../../node_modules/.pnpm/@internationalized_date@3.10.1/node_modules/@internationalized/date/src/queries.cjs');
+const DateFormatter = require('../../node_modules/.pnpm/@internationalized_date@3.10.1/node_modules/@internationalized/date/src/DateFormatter.cjs');
 
 
 

package/dist/components/date-picker/index.js

@@ -5,6 +5,6 @@ export { DatePickerInput } from './input.js';
 export { RangePickerInput } from './range-input.js';
 export { DatePickerCalendar } from './calendar.js';
 export { parse as parseDate } from '../../node_modules/.pnpm/@zag-js_date-picker@1.31.1_@internationalized_date@3.10.0/node_modules/@zag-js/date-picker/dist/index.js';
-export { CalendarDate } from '../../node_modules/.pnpm/@internationalized_date@3.10.0/node_modules/@internationalized/date/src/CalendarDate.js';
-export { getLocalTimeZone, today } from '../../node_modules/.pnpm/@internationalized_date@3.10.0/node_modules/@internationalized/date/src/queries.js';
-export { DateFormatter } from '../../node_modules/.pnpm/@internationalized_date@3.10.0/node_modules/@internationalized/date/src/DateFormatter.js';
+export { CalendarDate } from '../../node_modules/.pnpm/@internationalized_date@3.10.1/node_modules/@internationalized/date/src/CalendarDate.js';
+export { getLocalTimeZone, today } from '../../node_modules/.pnpm/@internationalized_date@3.10.1/node_modules/@internationalized/date/src/queries.js';
+export { DateFormatter } from '../../node_modules/.pnpm/@internationalized_date@3.10.1/node_modules/@internationalized/date/src/DateFormatter.js';

package/dist/components/date-picker/input.cjs

@@ -15,7 +15,7 @@ function DatePickerInput(props) {
       {
         ...props,
         maxLength: 11,
-        placeholder: props.placeholder ?? "DD MMM YYYY"
+        placeholder: props.placeholder ?? "MM DD YYYY"
       }
     )
   ] });

package/dist/components/date-picker/input.js

@@ -11,7 +11,7 @@ function DatePickerInput(props) {
       {
         ...props,
         maxLength: 11,
-        placeholder: props.placeholder ?? "DD MMM YYYY"
+        placeholder: props.placeholder ?? "MM DD YYYY"
       }
     )
   ] });

package/dist/components/date-picker/primitives.cjs

@@ -57,7 +57,10 @@ const DatePickerTableCellTrigger = withSlotRecipe(
 );
 const DatePickerRoot = withNoRecipe(datePickerRoot.DatePickerRoot);
 const DatePickerClearTrigger = withNoRecipe(datePickerClearTrigger.DatePickerClearTrigger);
-const DatePickerPositioner = withNoRecipe(datePickerPositioner.DatePickerPositioner);
+const DatePickerPositioner = withSlotRecipe(
+  datePickerPositioner.DatePickerPositioner,
+  "positioner"
+);
 const DatePickerYearSelect = withNoRecipe(datePickerYearSelect.DatePickerYearSelect);
 const DatePickerMonthSelect = withNoRecipe(datePickerMonthSelect.DatePickerMonthSelect);
 const DatePickerView = withNoRecipe(datePickerView.DatePickerView);

package/dist/components/date-picker/primitives.d.cts

@@ -79,10 +79,7 @@ export declare const DatePickerClearTrigger: {
  * styles.
  */
 export type DatePickerPositionerProps = CerberusPrimitiveProps<ArkDatePickerPositionerProps>;
-export declare const DatePickerPositioner: {
-    (props: CerberusPrimitiveProps<DatePicker.PositionerProps & RefAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const DatePickerPositioner: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<DatePicker.PositionerProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<unknown>>;
 /**
  * The year select input component of the DatePicker. This primitive has no
  * Cerberus styles.

package/dist/components/date-picker/primitives.d.ts

@@ -79,10 +79,7 @@ export declare const DatePickerClearTrigger: {
  * styles.
  */
 export type DatePickerPositionerProps = CerberusPrimitiveProps<ArkDatePickerPositionerProps>;
-export declare const DatePickerPositioner: {
-    (props: CerberusPrimitiveProps<DatePicker.PositionerProps & RefAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const DatePickerPositioner: ForwardRefExoticComponent<Omit<CerberusPrimitiveProps<DatePicker.PositionerProps & RefAttributes<HTMLDivElement>>, "ref"> & RefAttributes<unknown>>;
 /**
  * The year select input component of the DatePicker. This primitive has no
  * Cerberus styles.

package/dist/components/date-picker/primitives.js

@@ -53,7 +53,10 @@ const DatePickerTableCellTrigger = withSlotRecipe(
 );
 const DatePickerRoot = withNoRecipe(DatePickerRoot$1);
 const DatePickerClearTrigger = withNoRecipe(DatePickerClearTrigger$1);
-const DatePickerPositioner = withNoRecipe(DatePickerPositioner$1);
+const DatePickerPositioner = withSlotRecipe(
+  DatePickerPositioner$1,
+  "positioner"
+);
 const DatePickerYearSelect = withNoRecipe(DatePickerYearSelect$1);
 const DatePickerMonthSelect = withNoRecipe(DatePickerMonthSelect$1);
 const DatePickerView = withNoRecipe(DatePickerView$1);

package/dist/components/date-picker/range-input.cjs

@@ -15,7 +15,7 @@ function RangePickerInput(props) {
       {
         ...props,
         "data-range-input": true,
-        placeholder: props.placeholder ?? "DD MMM YYYY",
+        placeholder: props.placeholder ?? "MM DD YYYY",
         maxLength: 11,
         index: 0
       }
@@ -26,7 +26,7 @@ function RangePickerInput(props) {
         ...props,
         "data-range-input": true,
         "data-range-end-input": true,
-        placeholder: props.placeholder ?? "DD MMM YYYY",
+        placeholder: props.placeholder ?? "MM DD YYYY",
         maxLength: 11,
         index: 1
       }

package/dist/components/date-picker/range-input.js

@@ -11,7 +11,7 @@ function RangePickerInput(props) {
       {
         ...props,
         "data-range-input": true,
-        placeholder: props.placeholder ?? "DD MMM YYYY",
+        placeholder: props.placeholder ?? "MM DD YYYY",
         maxLength: 11,
         index: 0
       }
@@ -22,7 +22,7 @@ function RangePickerInput(props) {
         ...props,
         "data-range-input": true,
         "data-range-end-input": true,
-        placeholder: props.placeholder ?? "DD MMM YYYY",
+        placeholder: props.placeholder ?? "MM DD YYYY",
         maxLength: 11,
         index: 1
       }

package/dist/components/field/status-indicator.cjs

@@ -15,8 +15,7 @@ function FieldStatusIndicator(props) {
   const styles = recipes.field();
   const { icons } = cerberus.useCerberusContext();
   const { invalid: InvalidIcon } = icons;
-  if (!fieldContext) return null;
-  if (fieldContext.invalid) {
+  if (fieldContext?.invalid) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {

package/dist/components/field/status-indicator.d.cts

@@ -15,4 +15,4 @@ export interface FieldStatusIndicatorProps extends HTMLAttributes<HTMLSpanElemen
  * </FieldRoot>
  * ```
  */
-export declare function FieldStatusIndicator(props: FieldStatusIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function FieldStatusIndicator(props: FieldStatusIndicatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/field/status-indicator.d.ts

@@ -15,4 +15,4 @@ export interface FieldStatusIndicatorProps extends HTMLAttributes<HTMLSpanElemen
  * </FieldRoot>
  * ```
  */
-export declare function FieldStatusIndicator(props: FieldStatusIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function FieldStatusIndicator(props: FieldStatusIndicatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/field/status-indicator.js

@@ -11,8 +11,7 @@ function FieldStatusIndicator(props) {
   const styles = field();
   const { icons } = useCerberusContext();
   const { invalid: InvalidIcon } = icons;
-  if (!fieldContext) return null;
-  if (fieldContext.invalid) {
+  if (fieldContext?.invalid) {
     return /* @__PURE__ */ jsx(
       "span",
       {