@cerberus-design/react 0.15.0-next-e0ce56e → 0.15.0-next-5d7dc1e

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/field/field.tsx"],"sourcesContent":["import { type FieldRootProps } from '@ark-ui/react/field'\nimport { splitProps } from '../../utils/index'\nimport {\n  FieldErrorText,\n  FieldHelperText,\n  FieldLabel,\n  FieldRoot,\n} from './primitives'\nimport { HStack } from '@cerberus/styled-system/jsx'\nimport { Show } from '../Show'\n\nexport interface FieldProps extends FieldRootProps {\n  /**\n   * The label of the field.\n   */\n  label?: string\n  /**\n   * The helper text of the field.\n   */\n  helperText?: string\n  /**\n   * A helper text positioned at the end of the field. Good for Textarea fields.\n   */\n  secondaryHelperText?: string\n  /**\n   * The error text of the field. Shown when the field is invalid.\n   */\n  errorText?: string\n}\n\n/**\n * The Field component is the context provider for all FieldParts and displays\n * the label, helperText, and ErrorText.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <Field\n *  ids={{\n *   control: 'firstName',\n *  }}\n *  label=\"Label\"\n *  helperText=\"This is what people will see on your profile.\"\n *  errorText=\"A first name is required to create an account.\"\n *  required\n * >\n *   <Input name=\"firstName\" type=\"text\" />\n * </Field>\n * ```\n */\nexport function Field(props: FieldProps) {\n  const [statusProps, fieldProps, rootProps] = splitProps(\n    props,\n    ['disabled', 'required', 'readOnly', 'invalid'],\n    ['label', 'helperText', 'secondaryHelperText', 'errorText', 'children'],\n  )\n\n  return (\n    <FieldRoot {...statusProps} {...rootProps}>\n      <Show when={Boolean(fieldProps.label)}>\n        <FieldLabel>{fieldProps.label}</FieldLabel>\n      </Show>\n\n      {fieldProps.children}\n\n      <Show when={Boolean(fieldProps.helperText && !statusProps.invalid)}>\n        <HStack justifyContent=\"space-between\" w=\"full\">\n          <FieldHelperText>{fieldProps.helperText}</FieldHelperText>\n          <Show when={Boolean(fieldProps.secondaryHelperText)}>\n            <FieldHelperText>{fieldProps.secondaryHelperText}</FieldHelperText>\n          </Show>\n        </HStack>\n      </Show>\n\n      <FieldErrorText>{fieldProps.errorText}</FieldErrorText>\n    </FieldRoot>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAQA,SAAS,cAAc;AAmDf,cAMA,YANA;AAVD,SAAS,MAAM,OAAmB;AACvC,QAAM,CAAC,aAAa,YAAY,SAAS,IAAI;AAAA,IAC3C;AAAA,IACA,CAAC,YAAY,YAAY,YAAY,SAAS;AAAA,IAC9C,CAAC,SAAS,cAAc,uBAAuB,aAAa,UAAU;AAAA,EACxE;AAEA,SACE,qBAAC,aAAW,GAAG,aAAc,GAAG,WAC9B;AAAA,wBAAC,QAAK,MAAM,QAAQ,WAAW,KAAK,GAClC,8BAAC,cAAY,qBAAW,OAAM,GAChC;AAAA,IAEC,WAAW;AAAA,IAEZ,oBAAC,QAAK,MAAM,QAAQ,WAAW,cAAc,CAAC,YAAY,OAAO,GAC/D,+BAAC,UAAO,gBAAe,iBAAgB,GAAE,QACvC;AAAA,0BAAC,mBAAiB,qBAAW,YAAW;AAAA,MACxC,oBAAC,QAAK,MAAM,QAAQ,WAAW,mBAAmB,GAChD,8BAAC,mBAAiB,qBAAW,qBAAoB,GACnD;AAAA,OACF,GACF;AAAA,IAEA,oBAAC,kBAAgB,qBAAW,WAAU;AAAA,KACxC;AAEJ;","names":[]}

package/build/modern/{chunk-KU2AWAK3.js → chunk-FK52US7K.js}

@@ -1,6 +1,9 @@
 import {
-  useFieldContext
-} from "./chunk-UZDVOIW5.js";
+  Portal
+} from "./chunk-IQJDVFPP.js";
+import {
+  IconButton
+} from "./chunk-APD6IX5R.js";
 import {
   DatePickerContext,
   DatePickerTable,
@@ -10,18 +13,12 @@ import {
   DatePickerView,
   DatePickerViewControl
 } from "./chunk-5EWCH7AI.js";
-import {
-  IconButton
-} from "./chunk-APD6IX5R.js";
-import {
-  Portal
-} from "./chunk-IQJDVFPP.js";
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
 import {
   Button
-} from "./chunk-MER66QUY.js";
+} from "./chunk-6KZVE4HC.js";
 
 // src/components/DatePicker.client.tsx
 import {
@@ -33,12 +30,10 @@ import { useMemo } from "react";
 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"
       }
@@ -86,15 +81,12 @@ function DatePickerTrigger(props) {
   );
 }
 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
@@ -103,7 +95,6 @@ function DatePickerInput(props) {
   ] });
 }
 function RangePickerInput(props) {
-  const { invalid, ...fieldStates } = useFieldContext();
   const { defaultValue, ...nativeProps } = props;
   const startDate = useMemo(() => defaultValue?.[0], [defaultValue]);
   const endDate = useMemo(() => defaultValue?.[1], [defaultValue]);
@@ -113,8 +104,6 @@ function RangePickerInput(props) {
       ArkDP.Input,
       {
         ...nativeProps,
-        ...fieldStates,
-        ...invalid && { "aria-invalid": true },
         "data-range-input": true,
         defaultValue: startDate,
         className: cx(props.className, datePickerStyles.input),
@@ -127,8 +116,6 @@ function RangePickerInput(props) {
       ArkDP.Input,
       {
         ...nativeProps,
-        ...fieldStates,
-        ...invalid && { "aria-invalid": true },
         "data-range-input": true,
         defaultValue: endDate,
         "data-range-end-input": true,
@@ -214,4 +201,4 @@ export {
   DatePickerYearView,
   DatePickerCalendar
 };
-//# sourceMappingURL=chunk-KU2AWAK3.js.map
+//# sourceMappingURL=chunk-FK52US7K.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/DatePicker.client.tsx"],"sourcesContent":["'use client'\n\nimport {\n  DatePicker as ArkDP,\n  type DatePickerContentProps,\n  type DatePickerInputProps,\n  type DatePickerRootProps,\n  type DatePickerTriggerProps,\n  type DatePickerViewControlProps,\n  type DatePickerViewProps,\n} from '@ark-ui/react'\nimport { Portal } from './Portal'\nimport { datePicker, iconButton } from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport {\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/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  // There is a bug with the Root component that causes random date selection\n  // onBlur after the first selection if the format prop is used.\n  // ref: https://github.com/chakra-ui/ark/issues/3112#event-16047829195\n\n  // const handleFormat = useCallback((value: DateValue) => {\n  //   return formatISOToMilitary(value.toString())\n  // }, [])\n\n  return (\n    <ArkDP.Root\n      {...props}\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  return (\n    <ArkDP.Control className={datePickerStyles.control}>\n      <DatePickerTrigger />\n      <ArkDP.Input\n        {...props}\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 { 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        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        data-range-input\n        defaultValue={endDate}\n        data-range-end-input\n        className={cx(props.className, datePickerStyles.input)}\n        placeholder={props.placeholder ?? 'DD MMM YYYY'}\n        maxLength={11}\n        index={1}\n      />\n    </ArkDP.Control>\n  )\n}\n\n/**\n * The content component for the DatePicker which contains the calendar.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerContent(\n  props: DatePickerContentProps & {\n    withModal?: boolean\n  },\n) {\n  const { children, withModal, ...contentProps } = props\n  return (\n    <Portal disabled={withModal ?? false}>\n      <ArkDP.Positioner className={datePickerStyles.positioner}>\n        <ArkDP.Content\n          {...contentProps}\n          className={cx(contentProps.className, datePickerStyles.content)}\n        >\n          {children}\n        </ArkDP.Content>\n      </ArkDP.Positioner>\n    </Portal>\n  )\n}\n\n/**\n * The day view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerDayView(props: Omit<DatePickerViewProps, 'view'>) {\n  function isToday(date: ArkDP.DateValue): boolean {\n    const today = new Date()\n    const formatted = today.toISOString().split('T')[0]\n    const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`\n    return formatted === arkDate\n  }\n\n  function isPastDay(date: ArkDP.DateValue): boolean {\n    const today = new Date()\n    const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`\n    return new Date(arkDate) < today\n  }\n\n  function getDayValue(date: ArkDP.DateValue): 'today' | 'past' | 'future' {\n    if (isToday(date)) return 'today'\n    if (isPastDay(date)) return 'past'\n    return 'future'\n  }\n\n  return (\n    <DatePickerView {...props} view=\"day\">\n      <DatePickerContext>\n        {(datePicker) => (\n          <>\n            <DatePickerViewControlGroup />\n\n            <DatePickerTable>\n              <ArkDP.TableHead>\n                <ArkDP.TableRow>\n                  {datePicker.weekDays.map((weekDay, id) => (\n                    <DatePickerTableHeader key={id}>\n                      {weekDay.narrow}\n                    </DatePickerTableHeader>\n                  ))}\n                </ArkDP.TableRow>\n              </ArkDP.TableHead>\n\n              <ArkDP.TableBody>\n                {datePicker.weeks.map((week, id) => (\n                  <ArkDP.TableRow key={id}>\n                    {week.map((day, id) => (\n                      <DatePickerTableCell key={id} value={day}>\n                        <DatePickerTableCellTrigger\n                          data-date={getDayValue(day)}\n                        >\n                          {day.day}\n                        </DatePickerTableCellTrigger>\n                      </DatePickerTableCell>\n                    ))}\n                  </ArkDP.TableRow>\n                ))}\n              </ArkDP.TableBody>\n            </DatePickerTable>\n          </>\n        )}\n      </DatePickerContext>\n    </DatePickerView>\n  )\n}\n\n/**\n * The month view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerMonthView(props: Omit<DatePickerViewProps, 'view'>) {\n  return (\n    <ArkDP.View {...props} view=\"month\">\n      <ArkDP.Context>\n        {(datePicker) => (\n          <>\n            <DatePickerViewControlGroup />\n\n            <DatePickerTable>\n              <ArkDP.TableBody>\n                {datePicker\n                  .getMonthsGrid({ columns: 4, format: 'short' })\n                  .map((months, id) => (\n                    <ArkDP.TableRow key={id}>\n                      {months.map((month, id) => (\n                        <DatePickerTableCell key={id} value={month.value}>\n                          <DatePickerTableCellTrigger>\n                            {month.label}\n                          </DatePickerTableCellTrigger>\n                        </DatePickerTableCell>\n                      ))}\n                    </ArkDP.TableRow>\n                  ))}\n              </ArkDP.TableBody>\n            </DatePickerTable>\n          </>\n        )}\n      </ArkDP.Context>\n    </ArkDP.View>\n  )\n}\n\n/**\n * The year view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerYearView(props: Omit<DatePickerViewProps, 'view'>) {\n  return (\n    <ArkDP.View {...props} view=\"year\">\n      <ArkDP.Context>\n        {(datePicker) => (\n          <>\n            <DatePickerViewControlGroup />\n\n            <DatePickerTable>\n              <ArkDP.TableBody>\n                {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (\n                  <ArkDP.TableRow key={id}>\n                    {years.map((year, id) => (\n                      <DatePickerTableCell key={id} value={year.value}>\n                        <DatePickerTableCellTrigger>\n                          {year.label}\n                        </DatePickerTableCellTrigger>\n                      </DatePickerTableCell>\n                    ))}\n                  </ArkDP.TableRow>\n                ))}\n              </ArkDP.TableBody>\n            </DatePickerTable>\n          </>\n        )}\n      </ArkDP.Context>\n    </ArkDP.View>\n  )\n}\n\n/**\n * An abstraction of the DatePicker content components that contain the\n * different calendar views and controls.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n *   <DatePicker name=\"start_date\">\n *     <DatePickerLabel>Start date</DatePickerLabel>\n *     <DatePickerInput />\n *     <DatePickerCalendar />\n *   </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerCalendar(props: { withModal?: boolean }) {\n  return (\n    <DatePickerContent withModal={props.withModal}>\n      <DatePickerDayView />\n      <DatePickerMonthView />\n      <DatePickerYearView />\n    </DatePickerContent>\n  )\n}\n"],"mappings":"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","names":["datePicker","id"]}

package/build/modern/{chunk-Z7FGXAND.js → chunk-FMRWRVUS.js}

@@ -19,7 +19,7 @@ import {
 } from "./chunk-V3M3ZOQI.js";
 import {
   Button
-} from "./chunk-MER66QUY.js";
+} from "./chunk-6KZVE4HC.js";
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
@@ -177,4 +177,4 @@ export {
   NotificationCenter,
   useNotificationCenter
 };
-//# sourceMappingURL=chunk-Z7FGXAND.js.map
+//# sourceMappingURL=chunk-FMRWRVUS.js.map

package/build/modern/{chunk-XQICKZH4.js → chunk-GENS32QO.js}

@@ -1,11 +1,9 @@
-import {
-  useFieldContext
-} from "./chunk-UZDVOIW5.js";
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
 
 // src/components/Toggle.tsx
+import { useFieldContext } from "@ark-ui/react/field";
 import { cx } from "@cerberus/styled-system/css";
 import { hstack, vstack } from "@cerberus/styled-system/patterns";
 import {
@@ -13,9 +11,9 @@ import {
 } from "@cerberus/styled-system/recipes";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Toggle(props) {
-  const { size, describedBy, ...nativeProps } = props;
+  const { size, ...nativeProps } = props;
   const styles = toggle({ size });
-  const { invalid, ...state } = useFieldContext();
+  const { invalid, disabled, readOnly, required, ariaDescribedby } = useFieldContext();
   const { icons } = useCerberusContext();
   const CheckedIcon = icons.toggleChecked;
   return /* @__PURE__ */ jsxs(
@@ -28,8 +26,12 @@ function Toggle(props) {
           "input",
           {
             ...nativeProps,
-            ...state,
-            ...describedBy && { "aria-describedby": describedBy },
+            ...disabled && { disabled: true },
+            ...readOnly && { readOnly: true },
+            ...required && { required: true },
+            ...ariaDescribedby && {
+              "aria-describedby": ariaDescribedby
+            },
             ...invalid && { "aria-invalid": true },
             className: cx("peer", styles.input),
             role: "switch",
@@ -56,4 +58,4 @@ function Toggle(props) {
 export {
   Toggle
 };
-//# sourceMappingURL=chunk-XQICKZH4.js.map
+//# sourceMappingURL=chunk-GENS32QO.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Toggle.tsx"],"sourcesContent":["'use client'\n\nimport { useFieldContext } from '@ark-ui/react/field'\nimport type { InputHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n  toggle,\n  type ToggleVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { useCerberusContext } from '../context/cerberus'\n\n/**\n * This module provides a toggle component.\n * @module\n */\n\nexport type ToggleBase = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'id' | 'value'\n> & {\n  /**\n   * @deprecated\n   */\n  describedBy?: string\n  /**\n   * A unique identifier for the Toggle. Required for accessibility.\n   */\n  id: string\n  /**\n   * The value of the Toggle.\n   */\n  value: string\n}\nexport type ToggleProps = ToggleBase & ToggleVariantProps\n\n/**\n * The Toggle component is used to switch between two states. Optionally\n * combine with the `useToggle` hook.\n * @see https://cerberus.digitalu.design/react/toggle\n * @example\n * ```tsx\n * const { checked, handleChange } = useToggle({ checked: 'toggle' })\n *\n * <Hstack justify=\"space-between\" w=\"full\">\n *  <Field>\n *    <Label htmlFor=\"toggle\">Show notifications</Label>\n *    <Toggle\n *     checked={checked === 'toggle'}\n *     id=\"toggle\"\n *     onChange={handleChange}\n *     value=\"toggle\"\n *    />\n *  </Field>\n * </Hstack>\n * ```\n */\nexport function Toggle(props: ToggleProps) {\n  const { size, ...nativeProps } = props\n  const styles = toggle({ size })\n\n  const { invalid, disabled, readOnly, required, ariaDescribedby } =\n    useFieldContext()\n\n  const { icons } = useCerberusContext()\n  const CheckedIcon = icons.toggleChecked\n\n  return (\n    <span\n      className={cx('group', styles.track, hstack())}\n      data-checked={props.checked || props.defaultChecked}\n    >\n      <input\n        {...nativeProps}\n        {...(disabled && { disabled: true })}\n        {...(readOnly && { readOnly: true })}\n        {...(required && { required: true })}\n        {...(ariaDescribedby && {\n          'aria-describedby': ariaDescribedby,\n        })}\n        {...(invalid && { 'aria-invalid': true })}\n        className={cx('peer', styles.input)}\n        role=\"switch\"\n        type=\"checkbox\"\n      />\n      <span\n        className={cx(\n          styles.thumb,\n          vstack({\n            justify: 'center',\n          }),\n        )}\n      >\n        <CheckedIcon />\n      </span>\n    </span>\n  )\n}\n"],"mappings":";;;;;AAEA,SAAS,uBAAuB;AAEhC,SAAS,UAAU;AACnB,SAAS,QAAQ,cAAc;AAC/B;AAAA,EACE;AAAA,OAEK;AA2DH,SAIE,KAJF;AAXG,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,MAAM,GAAG,YAAY,IAAI;AACjC,QAAM,SAAS,OAAO,EAAE,KAAK,CAAC;AAE9B,QAAM,EAAE,SAAS,UAAU,UAAU,UAAU,gBAAgB,IAC7D,gBAAgB;AAElB,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,cAAc,MAAM;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,SAAS,OAAO,OAAO,OAAO,CAAC;AAAA,MAC7C,gBAAc,MAAM,WAAW,MAAM;AAAA,MAErC;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAI,YAAY,EAAE,UAAU,KAAK;AAAA,YACjC,GAAI,YAAY,EAAE,UAAU,KAAK;AAAA,YACjC,GAAI,YAAY,EAAE,UAAU,KAAK;AAAA,YACjC,GAAI,mBAAmB;AAAA,cACtB,oBAAoB;AAAA,YACtB;AAAA,YACC,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,YACvC,WAAW,GAAG,QAAQ,OAAO,KAAK;AAAA,YAClC,MAAK;AAAA,YACL,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,OAAO;AAAA,gBACL,SAAS;AAAA,cACX,CAAC;AAAA,YACH;AAAA,YAEA,8BAAC,eAAY;AAAA;AAAA,QACf;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-7S47NSGR.js → chunk-H54FR7IP.js}

@@ -13,7 +13,7 @@ import {
 } from "./chunk-GITT5645.js";
 import {
   Button
-} from "./chunk-MER66QUY.js";
+} from "./chunk-6KZVE4HC.js";
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
@@ -155,4 +155,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-7S47NSGR.js.map
+//# sourceMappingURL=chunk-H54FR7IP.js.map

package/build/modern/chunk-KWZ3CEG6.js

@@ -0,0 +1,23 @@
+import {
+  CheckboxControl,
+  CheckboxGroup,
+  CheckboxHiddenInput,
+  CheckboxIndicator,
+  CheckboxLabel,
+  CheckboxRoot
+} from "./chunk-BPRF34DU.js";
+
+// src/components/checkbox/parts.ts
+var CheckboxParts = {
+  Root: CheckboxRoot,
+  Label: CheckboxLabel,
+  Control: CheckboxControl,
+  Indicator: CheckboxIndicator,
+  HiddenInput: CheckboxHiddenInput,
+  Group: CheckboxGroup
+};
+
+export {
+  CheckboxParts
+};
+//# sourceMappingURL=chunk-KWZ3CEG6.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/checkbox/parts.ts"],"sourcesContent":["import type { ElementType } from 'react'\nimport {\n  CheckboxRoot,\n  CheckboxLabel,\n  CheckboxControl,\n  CheckboxIndicator,\n  CheckboxHiddenInput,\n  CheckboxGroup,\n} from './primitives'\n\n/**\n * This module contains the parts of the Field component.\n * @module 'field/parts'\n */\n\ninterface CheckboxPartsValue {\n  /**\n   * The container of the field.\n   */\n  Root: ElementType\n  /**\n   * The label of the field.\n   */\n  Label: ElementType\n  /**\n   * The control of the field.\n   */\n  Control: ElementType\n  /**\n   * The indicator of the field.\n   */\n  Indicator: ElementType\n  /**\n   * The hidden input of the field.\n   */\n  HiddenInput: ElementType\n  /**\n   * The checkbox group component.\n   */\n  Group: ElementType\n}\n\n/**\n * An Object containing the parts of the Checkbox component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the CheckboxParts object and\n * the entire family of components vs. only what you use.\n */\nexport const CheckboxParts: CheckboxPartsValue = {\n  Root: CheckboxRoot,\n  Label: CheckboxLabel,\n  Control: CheckboxControl,\n  Indicator: CheckboxIndicator,\n  HiddenInput: CheckboxHiddenInput,\n  Group: CheckboxGroup,\n}\n"],"mappings":";;;;;;;;;;AAmDO,IAAM,gBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa;AAAA,EACb,OAAO;AACT;","names":[]}

package/build/modern/{chunk-JWIJHSI6.js → chunk-L7N24B6B.js}

@@ -1,12 +1,9 @@
-import {
-  useFieldContext
-} from "./chunk-UZDVOIW5.js";
-
-// src/components/FieldMessage.tsx
+// src/components/deprecated/FieldMessage.tsx
 import { cx } from "@cerberus/styled-system/css";
 import {
   fieldMessage
 } from "@cerberus/styled-system/recipes";
+import { useFieldContext } from "@ark-ui/react/field";
 import { jsx } from "react/jsx-runtime";
 function FieldMessage(props) {
   const { invalid } = useFieldContext();
@@ -23,4 +20,4 @@ function FieldMessage(props) {
 export {
   FieldMessage
 };
-//# sourceMappingURL=chunk-JWIJHSI6.js.map
+//# sourceMappingURL=chunk-L7N24B6B.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/deprecated/FieldMessage.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  fieldMessage,\n  type FieldMessageVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { useFieldContext } from '@ark-ui/react/field'\n\n/**\n * This module contains the FieldMessage component.\n * @module\n */\nexport interface FieldMessageBaseProps\n  extends HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * The id of the FieldMessage element describing the field. Required for accessibility. It is considered best practice to use the `help` or `error` prefix to help screen readers identify the type of message.\n   *\n   * @example For help messages: `help:field_id`\n   * @example For error messages: `error:field_id`\n   */\n  id: string\n}\nexport type FieldMessageProps = FieldMessageBaseProps & FieldMessageVariantProps\n\n/**\n * @deprecated use FieldHelperText, FieldErrorText, or FieldParts instead\n */\nexport function FieldMessage(props: FieldMessageProps) {\n  const { invalid } = useFieldContext()\n  return (\n    <small\n      {...props}\n      {...(invalid && { 'aria-invalid': true })}\n      className={cx(props.className, fieldMessage())}\n    />\n  )\n}\n"],"mappings":";AAGA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AACP,SAAS,uBAAuB;AAwB5B;AAHG,SAAS,aAAa,OAA0B;AACrD,QAAM,EAAE,QAAQ,IAAI,gBAAgB;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,WAAW,GAAG,MAAM,WAAW,aAAa,CAAC;AAAA;AAAA,EAC/C;AAEJ;","names":[]}

package/build/modern/chunk-LT62577B.js

@@ -0,0 +1,23 @@
+import {
+  FieldLabel
+} from "./chunk-VSTOSLFS.js";
+
+// src/components/deprecated/Label.tsx
+import { label } from "@cerberus/styled-system/recipes";
+import { cx } from "@cerberus/styled-system/css";
+import { jsx } from "react/jsx-runtime";
+function Label(props) {
+  const { size, ...nativeProps } = props;
+  return /* @__PURE__ */ jsx(
+    FieldLabel,
+    {
+      ...nativeProps,
+      className: cx(label({ size }), props.className)
+    }
+  );
+}
+
+export {
+  Label
+};
+//# sourceMappingURL=chunk-LT62577B.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/deprecated/Label.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { FieldLabel } from '../field'\n\n/**\n * This module contains the Label component.\n * @module\n */\nexport type LabelBaseProps = HTMLAttributes<HTMLLabelElement>\nexport type LabelProps = LabelBaseProps & LabelVariantProps\n\n/**\n * @deprecated Use FieldLabel or FieldParts.Label instead.\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n  const { size, ...nativeProps } = props\n  return (\n    <FieldLabel\n      {...nativeProps}\n      className={cx(label({ size }), props.className)}\n    />\n  )\n}\n"],"mappings":";;;;;AACA,SAAS,aAAqC;AAC9C,SAAS,UAAU;AAgBf;AAHG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,MAAM,GAAG,YAAY,IAAI;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,EAAE,KAAK,CAAC,GAAG,MAAM,SAAS;AAAA;AAAA,EAChD;AAEJ;","names":[]}

package/build/modern/{chunk-3BM6MZ4A.js → chunk-MWRO5QYD.js}

@@ -102,4 +102,4 @@ export {
   formatISOToMilitary,
   DateFormats
 };
-//# sourceMappingURL=chunk-3BM6MZ4A.js.map
+//# sourceMappingURL=chunk-MWRO5QYD.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useDate.ts"],"sourcesContent":["'use client'\n\nimport {\n  useState,\n  useCallback,\n  ChangeEvent,\n  useMemo,\n  type InputHTMLAttributes,\n} from 'react'\n\nexport interface UseDateBase {\n  /**\n   * The format of the date input\n   */\n  format?: string\n  /**\n   * The callback to run when the date input changes\n   */\n  onChange?: InputHTMLAttributes<HTMLInputElement>['onChange']\n}\n\nexport interface UseDateOptions extends UseDateBase {\n  /**\n   * The initial value of the date input\n   */\n  initialValue?: string\n}\n\nexport interface UseDateReturn extends UseDateBase {\n  /**\n   * The ISO formatted date string\n   */\n  ISO: string\n  /**\n   * The value of the date input\n   */\n  value: string\n}\n\n/**\n * @deprecated use the DatePicker family instead\n */\nexport function useDate(options?: UseDateOptions): UseDateReturn {\n  const initialValue = options?.initialValue ?? ''\n  const format = options?.format ?? DateFormats.USMilitary\n  const onChange = options?.onChange\n  const [value, setValue] = useState(initialValue)\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const newValue = formatMilitaryDate(e.currentTarget.value)\n      if (onChange) onChange(e)\n      setValue(newValue)\n    },\n    [onChange],\n  )\n\n  return useMemo(\n    () => ({\n      format,\n      value,\n      ISO: formatMilitaryToISO(value),\n      onChange: handleChange,\n    }),\n    [format, value, handleChange],\n  )\n}\n\n// helpers\n\n/**\n * Converts a string in US Military format to ISO format. Used within the `useDate` hook.\n * @param input The string to format\n * @returns The formatted string in ISO format (YYYY-MM-DD)\n */\nexport function formatMilitaryToISO(input: string) {\n  const [day, month, year] = input.split(' ')\n  const monthIndex = MONTHS.findIndex((m) => m.startsWith(month))\n  const monthNum = monthIndex + 1\n  return `${year ?? '0000'}-${monthNum.toString().padStart(2, '0')}-${day.padStart(\n    2,\n    '0',\n  )}`\n}\n\n/**\n * Converts a string to US Military format. Used within the `useDate` hook.\n * @param input The string to format\n * @returns The formatted string in US Military format (DD MMM YYYY)\n */\nexport function formatMilitaryDate(input: string): string {\n  let formatted = input.toUpperCase().replace(/[^0-9A-Z]/g, '')\n  let day = ''\n  let month = ''\n  let year = ''\n\n  // Format day\n  if (formatted.length >= 2) {\n    day = formatted.replace(/[^0-9]/g, '').slice(0, 2)\n    const dayNum = parseInt(day, 10)\n    if (dayNum > 31) day = '31'\n    else if (dayNum === 0) day = '01'\n    formatted = formatted.slice(2)\n  }\n\n  // Format month\n  if (formatted.length >= 3) {\n    month = formatted.slice(0, 3)\n    const monthIndex = MONTHS.findIndex((m) => m.startsWith(month))\n    if (monthIndex !== -1) {\n      month = MONTHS[monthIndex]\n    } else {\n      month = month.replace(/[^A-Z]/g, '')\n    }\n    formatted = formatted.slice(3)\n  }\n\n  // Format year\n  if (formatted.length > 0) {\n    year = formatted.slice(0, 4)\n  }\n\n  return [day, month, year].filter(Boolean).join(' ')\n}\n\n/**\n * Formats a date string to US Military format.\n * @param date The date string to format (i.e., '2024-01-01')\n * @returns The formatted date string in US Military format (DD MMM YYYY)\n */\nexport function formatISOToMilitary(date: string): string {\n  const [year, month, day] = date.split('-')\n  const monthIndex = parseInt(month, 10) - 1\n  const monthStr = MONTHS[monthIndex]\n  return `${day} ${monthStr} ${year}`\n}\n\n/**\n * Date formatting options\n * @example\n * ```tsx\n * const date = new Date()\n * const formatted = date.format(DateFormats.USMilitary)\n */\nexport const DateFormats = {\n  get ISO() {\n    return 'YYYY-MM-DD'\n  },\n  get USMilitary() {\n    return 'DD MMM YYYY'\n  },\n  get Months() {\n    return MONTHS\n  },\n}\n\nconst MONTHS = [\n  'JAN',\n  'FEB',\n  'MAR',\n  'APR',\n  'MAY',\n  'JUN',\n  'JUL',\n  'AUG',\n  'SEP',\n  'OCT',\n  'NOV',\n  'DEC',\n]\n"],"mappings":";AAEA;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,OAEK;AAkCA,SAAS,QAAQ,SAAyC;AAC/D,QAAM,eAAe,SAAS,gBAAgB;AAC9C,QAAM,SAAS,SAAS,UAAU,YAAY;AAC9C,QAAM,WAAW,SAAS;AAC1B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAE/C,QAAM,eAAe;AAAA,IACnB,CAAC,MAAqC;AACpC,YAAM,WAAW,mBAAmB,EAAE,cAAc,KAAK;AACzD,UAAI,SAAU,UAAS,CAAC;AACxB,eAAS,QAAQ;AAAA,IACnB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,KAAK,oBAAoB,KAAK;AAAA,MAC9B,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,QAAQ,OAAO,YAAY;AAAA,EAC9B;AACF;AASO,SAAS,oBAAoB,OAAe;AACjD,QAAM,CAAC,KAAK,OAAO,IAAI,IAAI,MAAM,MAAM,GAAG;AAC1C,QAAM,aAAa,OAAO,UAAU,CAAC,MAAM,EAAE,WAAW,KAAK,CAAC;AAC9D,QAAM,WAAW,aAAa;AAC9B,SAAO,GAAG,QAAQ,MAAM,IAAI,SAAS,SAAS,EAAE,SAAS,GAAG,GAAG,CAAC,IAAI,IAAI;AAAA,IACtE;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAOO,SAAS,mBAAmB,OAAuB;AACxD,MAAI,YAAY,MAAM,YAAY,EAAE,QAAQ,cAAc,EAAE;AAC5D,MAAI,MAAM;AACV,MAAI,QAAQ;AACZ,MAAI,OAAO;AAGX,MAAI,UAAU,UAAU,GAAG;AACzB,UAAM,UAAU,QAAQ,WAAW,EAAE,EAAE,MAAM,GAAG,CAAC;AACjD,UAAM,SAAS,SAAS,KAAK,EAAE;AAC/B,QAAI,SAAS,GAAI,OAAM;AAAA,aACd,WAAW,EAAG,OAAM;AAC7B,gBAAY,UAAU,MAAM,CAAC;AAAA,EAC/B;AAGA,MAAI,UAAU,UAAU,GAAG;AACzB,YAAQ,UAAU,MAAM,GAAG,CAAC;AAC5B,UAAM,aAAa,OAAO,UAAU,CAAC,MAAM,EAAE,WAAW,KAAK,CAAC;AAC9D,QAAI,eAAe,IAAI;AACrB,cAAQ,OAAO,UAAU;AAAA,IAC3B,OAAO;AACL,cAAQ,MAAM,QAAQ,WAAW,EAAE;AAAA,IACrC;AACA,gBAAY,UAAU,MAAM,CAAC;AAAA,EAC/B;AAGA,MAAI,UAAU,SAAS,GAAG;AACxB,WAAO,UAAU,MAAM,GAAG,CAAC;AAAA,EAC7B;AAEA,SAAO,CAAC,KAAK,OAAO,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACpD;AAOO,SAAS,oBAAoB,MAAsB;AACxD,QAAM,CAAC,MAAM,OAAO,GAAG,IAAI,KAAK,MAAM,GAAG;AACzC,QAAM,aAAa,SAAS,OAAO,EAAE,IAAI;AACzC,QAAM,WAAW,OAAO,UAAU;AAClC,SAAO,GAAG,GAAG,IAAI,QAAQ,IAAI,IAAI;AACnC;AASO,IAAM,cAAc;AAAA,EACzB,IAAI,MAAM;AACR,WAAO;AAAA,EACT;AAAA,EACA,IAAI,aAAa;AACf,WAAO;AAAA,EACT;AAAA,EACA,IAAI,SAAS;AACX,WAAO;AAAA,EACT;AACF;AAEA,IAAM,SAAS;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;","names":[]}

package/build/modern/{chunk-PZAZKQMO.js → chunk-OYT7RGC7.js}

@@ -22,4 +22,4 @@ function FieldsetLabel(props) {
 export {
   FieldsetLabel
 };
-//# sourceMappingURL=chunk-PZAZKQMO.js.map
+//# sourceMappingURL=chunk-OYT7RGC7.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/FieldsetLabel.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'\nimport type { LabelProps } from './deprecated/Label'\n\n/**\n * This module contains the FieldsetLabel component.\n * @module FieldsetLabel\n */\n\nexport type FieldsetLabelProps = LabelProps &\n  LabelVariantProps & {\n    htmlFor?: string\n  }\n\n/**\n * Used for labeling inputs that are children of a Fieldset group.\n * @memberof Fieldset\n * @see https://cerberus.digitalu.design/react/fieldset\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @example\n * ```tsx\n * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'\n * import { Hstack } from '@cerberus/styled-system/jsx'\n *\n * function SomeForm() {\n *   return (\n *    <form>\n *     <Fieldset>\n *      <Legend>Do you like cats?</Legend>\n *      <Hstack>\n *        <Field>\n *          <Radio id=\"yes\" name=\"cats\" value=\"yes\" />\n *          <FieldsetLabel htmlFor=\"yes\">Yes</FieldsetLabel>\n *        </Field>\n *      </Hstack>\n *      <Hstack>\n *        <Field>\n *         <Radio id=\"no\" name=\"cats\" value=\"no\" />\n *         <FieldsetLabel htmlFor=\"no\">No</FieldsetLabel>\n *        </Field>\n *      </Hstack>\n *     </Fieldset>\n *    </form>\n *   )\n * }\n * ```\n */\nexport function FieldsetLabel(props: FieldsetLabelProps) {\n  const { size, usage, ...nativeProps } = props\n  return (\n    <label\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        label({\n          size,\n          usage,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAqC;AAiD1C;AAHG,SAAS,cAAc,OAA2B;AACvD,QAAM,EAAE,MAAM,OAAO,GAAG,YAAY,IAAI;AACxC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM;AAAA,UACJ;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-ILQW5VZT.js → chunk-RBNOEAWJ.js}

@@ -1,6 +1,3 @@
-import {
-  useFieldContext
-} from "./chunk-UZDVOIW5.js";
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
@@ -9,15 +6,15 @@ import {
 import { css, cx } from "@cerberus/styled-system/css";
 import { label } from "@cerberus/styled-system/recipes";
 import { hstack } from "@cerberus/styled-system/patterns";
+import { useFieldContext } from "@ark-ui/react/field";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Legend(props) {
   const { size, ...nativeProps } = props;
-  const { invalid, ...formState } = useFieldContext();
+  const { invalid, required } = useFieldContext();
   return /* @__PURE__ */ jsxs(
     "legend",
     {
       ...nativeProps,
-      ...formState,
       ...invalid && { "aria-invalid": true },
       className: cx(
         nativeProps.className,
@@ -31,7 +28,7 @@ function Legend(props) {
       ),
       children: [
         nativeProps.children,
-        /* @__PURE__ */ jsx(Show, { when: formState.required, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Show, { when: required, children: /* @__PURE__ */ jsx(
           "span",
           {
             className: css({
@@ -49,4 +46,4 @@ function Legend(props) {
 export {
   Legend
 };
-//# sourceMappingURL=chunk-ILQW5VZT.js.map
+//# sourceMappingURL=chunk-RBNOEAWJ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Legend.tsx"],"sourcesContent":["'use client'\n\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { type HTMLAttributes } from 'react'\nimport { Show } from './Show'\nimport { useFieldContext } from '@ark-ui/react/field'\n\n/**\n * This module contains the Fieldset component.\n * @module Fieldset\n */\n\nexport type LegendProps = HTMLAttributes<HTMLLegendElement> & LabelVariantProps\n\n/**\n * A component to provide a global label for a group of related elements in a form (for accessibility).\n * @memberof Fieldset\n * @see https://cerberus.digitalu.com/react/fieldset\n * @description [A11y Form Checklist](https://www.a11yproject.com/checklist/#forms)\n * @description [MDN Web Docs: Legend](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend)\n * @example\n * ```tsx\n * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'\n * import { Hstack } from '@cerberus/styled-system/jsx'\n *\n * function SomeForm() {\n *   return (\n *    <form>\n *     <Fieldset>\n *      <Legend>Do you like cats?</Legend>\n *      <Hstack>\n *        <Field>\n *          <Radio id=\"yes\" name=\"cats\" value=\"yes\" />\n *          <Label htmlFor=\"yes\">Yes</Label>\n *        </Field>\n *      </Hstack>\n *      <Hstack>\n *        <Field>\n *         <Radio id=\"no\" name=\"cats\" value=\"no\" />\n *         <Label htmlFor=\"no\">No</Label>\n *        </Field>\n *      </Hstack>\n *     </Fieldset>\n *    </form>\n *   )\n * }\n * ```\n */\nexport function Legend(props: LegendProps) {\n  const { size, ...nativeProps } = props\n  const { invalid, required } = useFieldContext()\n\n  return (\n    <legend\n      {...nativeProps}\n      {...(invalid && { 'aria-invalid': true })}\n      className={cx(\n        nativeProps.className,\n        hstack({\n          justify: 'space-between',\n          w: 'full',\n        }),\n        label({\n          size,\n        }),\n      )}\n    >\n      {nativeProps.children}\n      <Show when={required}>\n        <span\n          className={css({\n            color: 'page.text.100',\n            fontSize: 'inherit',\n          })}\n        >\n          (required)\n        </span>\n      </Show>\n    </legend>\n  )\n}\n"],"mappings":";;;;;AAEA,SAAS,KAAK,UAAU;AACxB,SAAS,aAAqC;AAC9C,SAAS,cAAc;AAGvB,SAAS,uBAAuB;AAgD5B,SAgBI,KAhBJ;AALG,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,MAAM,GAAG,YAAY,IAAI;AACjC,QAAM,EAAE,SAAS,SAAS,IAAI,gBAAgB;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,SAAS;AAAA,UACT,GAAG;AAAA,QACL,CAAC;AAAA,QACD,MAAM;AAAA,UACJ;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,oBAAY;AAAA,QACb,oBAAC,QAAK,MAAM,UACV;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-5QONP7GT.js → chunk-S2X5OEPK.js}

@@ -1,6 +1,3 @@
-import {
-  Text
-} from "./chunk-RU5LOXWI.js";
 import {
   SelectContent,
   SelectControl,
@@ -10,7 +7,6 @@ import {
   SelectItemGroupLabel,
   SelectItemIndicator,
   SelectItemText,
-  SelectLabel,
   SelectPositioner,
   SelectRoot,
   SelectTrigger,
@@ -38,15 +34,11 @@ import { cx } from "@cerberus/styled-system/css";
 import { HStack } from "@cerberus/styled-system/jsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Select(props) {
-  const { collection, label, placeholder, size, ...rootProps } = props;
+  const { collection, placeholder, size, ...rootProps } = props;
   const { icons } = useCerberusContext();
   const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons;
   const styles = select({ size });
   return /* @__PURE__ */ jsxs(SelectRoot, { className: styles.root, collection, ...rootProps, children: [
-    /* @__PURE__ */ jsxs(SelectLabel, { className: styles.label, children: [
-      label,
-      /* @__PURE__ */ jsx(Show, { when: props.required, children: /* @__PURE__ */ jsx(Text, { as: "span", color: "page.text.100", children: "(required)" }) })
-    ] }),
     /* @__PURE__ */ jsx(SelectControl, { className: styles.control, children: /* @__PURE__ */ jsxs(SelectTrigger, { className: styles.trigger, children: [
       /* @__PURE__ */ jsx(SelectValueText, { placeholder }),
       /* @__PURE__ */ jsxs(HStack, { children: [
@@ -94,4 +86,4 @@ export {
   OptionGroupLabel,
   createSelectCollection
 };
-//# sourceMappingURL=chunk-5QONP7GT.js.map
+//# sourceMappingURL=chunk-S2X5OEPK.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Select.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Select as ArkSelect,\n  createListCollection,\n  type SelectRootProps,\n  type SelectItemProps,\n  type SelectItemGroupProps,\n  type SelectItemGroupLabelProps,\n  type ListCollection,\n  type SelectValueChangeDetails,\n} from '@ark-ui/react/select'\nimport {\n  select,\n  type SelectVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { HStack } from '@cerberus/styled-system/jsx'\nimport { useCerberusContext } from '../context/cerberus'\nimport { Portal } from './Portal'\nimport { Show } from './Show'\nimport {\n  SelectContent,\n  SelectControl,\n  SelectIndicator,\n  SelectItem,\n  SelectItemGroup,\n  SelectItemGroupLabel,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectPositioner,\n  SelectRoot,\n  SelectTrigger,\n  SelectValueText,\n} from './Select.server'\n\n/**\n * This module contains the Select components.\n * @module 'react/select'\n */\n\nexport interface SelectCollectionItem {\n  /**\n   * What is displayed in the dropdown list.\n   */\n  label: string\n  /**\n   * The value of the selected item used in the form.\n   */\n  value: string\n  /**\n   * If the item is disabled.\n   */\n  disabled?: boolean\n}\n\nexport interface SelectCollection {\n  /**\n   * The items to be displayed in the dropdown list.\n   */\n  items: SelectCollectionItem[]\n}\n\nexport interface BaseSelectProps {\n  /**\n   * The placeholder text when no option is selected.\n   */\n  placeholder?: string\n}\n\nexport type SelectProps = SelectRootProps<SelectCollectionItem> &\n  BaseSelectProps &\n  SelectVariantProps\n\n/**\n * The Select component is a dropdown list that allows users to select an\n * option from a list.\n * @definition [Select docs](https://cerberus.digitalu.design/react/select)\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)\n * @example\n * ```tsx\n * import { Select, Option, createListCollection } from '@cerberus-design/react'\n *\n * export function SelectBasicPreview() {\n *  const collection = createListCollection({\n *   items: [\n *    { label: 'Hades', value: 'hades' },\n *    { label: 'Persephone', value: 'persephone' },\n *    { label: 'Zeus', value: 'zeus', disabled: true },\n *   ]\n *  })\n *\n *  return (\n *   <Select\n *    collection={collection}\n *    label=\"Select Relative\"\n *    placeholder=\"Choose option\"\n *   >\n *   {collection.items.map((item) => (\n *    <Option key={item.value} item={item} />\n *   ))}\n *  </Select>\n *  )\n * }\n */\nexport function Select(props: SelectProps) {\n  const { collection, placeholder, size, ...rootProps } = props\n  const { icons } = useCerberusContext()\n  const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons\n\n  const styles = select({ size })\n\n  return (\n    <SelectRoot className={styles.root} collection={collection} {...rootProps}>\n      <SelectControl className={styles.control}>\n        <SelectTrigger className={styles.trigger}>\n          <SelectValueText placeholder={placeholder} />\n\n          <HStack>\n            <Show when={props.invalid}>\n              <InvalidIcon data-part=\"invalid-icon\" />\n            </Show>\n            <SelectIndicator className={styles.indicator}>\n              <SelectArrow />\n            </SelectIndicator>\n          </HStack>\n        </SelectTrigger>\n      </SelectControl>\n\n      <Portal>\n        <SelectPositioner className={styles.positioner}>\n          <SelectContent className={styles.content}>\n            {props.children}\n          </SelectContent>\n        </SelectPositioner>\n      </Portal>\n\n      <ArkSelect.HiddenSelect />\n    </SelectRoot>\n  )\n}\n\nexport interface OptionProps extends SelectItemProps {\n  /**\n   * The CollectionListItem to be displayed in the dropdown list.\n   */\n  item: SelectCollectionItem\n}\n\nexport function Option(props: OptionProps) {\n  const { item, ...itemProps } = props\n\n  const { icons } = useCerberusContext()\n  const { selectChecked: CheckedIcon } = icons\n\n  const styles = select()\n\n  return (\n    <SelectItem {...itemProps} item={item} className={styles.item}>\n      <SelectItemText className={styles.itemText}>{item?.label}</SelectItemText>\n      <SelectItemIndicator className={styles.itemIndicator}>\n        <CheckedIcon />\n      </SelectItemIndicator>\n    </SelectItem>\n  )\n}\n\n/**\n * The OptionGroup component is a group of options in the dropdown list.\n * @definition [Select docs](https://cerberus.digitalu.design/react/select)\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)\n * @example\n * ```tsx\n * <OptionGroup>\n *  <OptionGroupLabel>Greek gods</OptionGroupLabel>\n *  ...\n * </OptionGroup>\n * ```\n */\nexport function OptionGroup(props: SelectItemGroupProps) {\n  return <SelectItemGroup {...props} />\n}\n\n/**\n * The OptionGroupLabel component is the label of the OptionGroup.\n * @definition [Select docs](https://cerberus.digitalu.design/react/select)\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)\n * @example\n * ```tsx\n * <OptionGroupLabel>Greek gods</OptionGroupLabel>\n * ```\n */\nexport function OptionGroupLabel(props: SelectItemGroupLabelProps) {\n  const styles = select()\n  return (\n    <SelectItemGroupLabel\n      {...props}\n      className={cx(props.className, styles.itemGroupLabel)}\n    />\n  )\n}\n\n/**\n * A helper function to create a SelectCollection object.\n * @param collection - An array of SelectCollectionItem objects that matches\n * the following shape:\n * ```ts\n * [{ label: 'Hades', value: 'hades', disabled?: true }]\n * ```\n */\nexport function createSelectCollection(\n  collection: SelectCollectionItem[],\n): ListCollection<SelectCollectionItem> {\n  return createListCollection({\n    items: collection,\n  })\n}\n\nexport type { SelectValueChangeDetails, ListCollection }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE,UAAU;AAAA,EACV;AAAA,OAOK;AACP;AAAA,EACE;AAAA,OAEK;AACP,SAAS,UAAU;AACnB,SAAS,cAAc;AAmGb,cAEA,YAFA;AAXH,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,YAAY,aAAa,MAAM,GAAG,UAAU,IAAI;AACxD,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,aAAa,aAAa,SAAS,YAAY,IAAI;AAE3D,QAAM,SAAS,OAAO,EAAE,KAAK,CAAC;AAE9B,SACE,qBAAC,cAAW,WAAW,OAAO,MAAM,YAAyB,GAAG,WAC9D;AAAA,wBAAC,iBAAc,WAAW,OAAO,SAC/B,+BAAC,iBAAc,WAAW,OAAO,SAC/B;AAAA,0BAAC,mBAAgB,aAA0B;AAAA,MAE3C,qBAAC,UACC;AAAA,4BAAC,QAAK,MAAM,MAAM,SAChB,8BAAC,eAAY,aAAU,gBAAe,GACxC;AAAA,QACA,oBAAC,mBAAgB,WAAW,OAAO,WACjC,8BAAC,eAAY,GACf;AAAA,SACF;AAAA,OACF,GACF;AAAA,IAEA,oBAAC,UACC,8BAAC,oBAAiB,WAAW,OAAO,YAClC,8BAAC,iBAAc,WAAW,OAAO,SAC9B,gBAAM,UACT,GACF,GACF;AAAA,IAEA,oBAAC,UAAU,cAAV,EAAuB;AAAA,KAC1B;AAEJ;AASO,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,MAAM,GAAG,UAAU,IAAI;AAE/B,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,eAAe,YAAY,IAAI;AAEvC,QAAM,SAAS,OAAO;AAEtB,SACE,qBAAC,cAAY,GAAG,WAAW,MAAY,WAAW,OAAO,MACvD;AAAA,wBAAC,kBAAe,WAAW,OAAO,UAAW,gBAAM,OAAM;AAAA,IACzD,oBAAC,uBAAoB,WAAW,OAAO,eACrC,8BAAC,eAAY,GACf;AAAA,KACF;AAEJ;AAcO,SAAS,YAAY,OAA6B;AACvD,SAAO,oBAAC,mBAAiB,GAAG,OAAO;AACrC;AAWO,SAAS,iBAAiB,OAAkC;AACjE,QAAM,SAAS,OAAO;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,OAAO,cAAc;AAAA;AAAA,EACtD;AAEJ;AAUO,SAAS,uBACd,YACsC;AACtC,SAAO,qBAAqB;AAAA,IAC1B,OAAO;AAAA,EACT,CAAC;AACH;","names":[]}

package/build/modern/chunk-TIJAFPHQ.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-TIJAFPHQ.js.map

package/build/modern/chunk-TYPULJMJ.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-TYPULJMJ.js.map

package/build/modern/chunk-UNN4LHRS.js

@@ -0,0 +1,31 @@
+import {
+  CheckboxIcon
+} from "./chunk-EL4MX2PG.js";
+import {
+  Text
+} from "./chunk-RU5LOXWI.js";
+import {
+  CheckboxParts
+} from "./chunk-KWZ3CEG6.js";
+import {
+  Show
+} from "./chunk-BUVVRQLZ.js";
+
+// src/components/checkbox/checkbox.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Checkbox(props) {
+  const { size, children, ...rootProps } = props;
+  return /* @__PURE__ */ jsxs(CheckboxParts.Root, { ...rootProps, children: [
+    /* @__PURE__ */ jsx(CheckboxParts.Control, { size, children: /* @__PURE__ */ jsx(CheckboxIcon, { indeterminate: rootProps.checked === "indeterminate" }) }),
+    /* @__PURE__ */ jsxs(CheckboxParts.Label, { size, children: [
+      children,
+      /* @__PURE__ */ jsx(Show, { when: props.required, children: /* @__PURE__ */ jsx(Text, { as: "span", "data-part": "required-indicator", children: "(required)" }) })
+    ] }),
+    /* @__PURE__ */ jsx(CheckboxParts.HiddenInput, {})
+  ] });
+}
+
+export {
+  Checkbox
+};
+//# sourceMappingURL=chunk-UNN4LHRS.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import type { CheckboxRootProps } from '@ark-ui/react'\nimport { type CheckboxVariantProps } from '@cerberus/styled-system/recipes'\nimport { Show } from '../Show'\nimport { Text } from '../Text'\nimport { CheckboxParts } from './parts'\nimport { CheckboxIcon } from './checkbox-icon'\n\n/**\n * This module contains the Checkbox component.\n * @module\n */\n\nexport type CheckboxProps = CheckboxVariantProps & CheckboxRootProps\n\n/**\n * Checkbox component\n * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @see https://cerberus.digitalu.design/react/checkbox\n * @example\n * ```tsx\n * <Field>\n *   <Checkbox id=\"legal\" checked={checked.legal} onChange={handleChange} />\n * </Field>\n * ```\n */\nexport function Checkbox(props: CheckboxProps) {\n  const { size, children, ...rootProps } = props\n\n  return (\n    <CheckboxParts.Root {...rootProps}>\n      <CheckboxParts.Control size={size}>\n        <CheckboxIcon indeterminate={rootProps.checked === 'indeterminate'} />\n      </CheckboxParts.Control>\n\n      <CheckboxParts.Label size={size}>\n        {children}\n        <Show when={props.required}>\n          <Text as=\"span\" data-part=\"required-indicator\">\n            (required)\n          </Text>\n        </Show>\n      </CheckboxParts.Label>\n\n      <CheckboxParts.HiddenInput />\n    </CheckboxParts.Root>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAgCQ,cAGF,YAHE;AAND,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,MAAM,UAAU,GAAG,UAAU,IAAI;AAEzC,SACE,qBAAC,cAAc,MAAd,EAAoB,GAAG,WACtB;AAAA,wBAAC,cAAc,SAAd,EAAsB,MACrB,8BAAC,gBAAa,eAAe,UAAU,YAAY,iBAAiB,GACtE;AAAA,IAEA,qBAAC,cAAc,OAAd,EAAoB,MAClB;AAAA;AAAA,MACD,oBAAC,QAAK,MAAM,MAAM,UAChB,8BAAC,QAAK,IAAG,QAAO,aAAU,sBAAqB,wBAE/C,GACF;AAAA,OACF;AAAA,IAEA,oBAAC,cAAc,aAAd,EAA0B;AAAA,KAC7B;AAEJ;","names":[]}

package/build/modern/chunk-VSTOSLFS.js

@@ -0,0 +1,100 @@
+import {
+  FieldStartIndicator
+} from "./chunk-Z52R6ABJ.js";
+import {
+  FieldStatusIndicator
+} from "./chunk-CNA2VKAH.js";
+
+// src/components/field/primitives.tsx
+import {
+  Field
+} from "@ark-ui/react/field";
+import { cx } from "@cerberus/styled-system/css";
+import { field } from "@cerberus/styled-system/recipes";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FieldRoot(props) {
+  const { size, ...fieldProps } = props;
+  const styles = field({ size });
+  return /* @__PURE__ */ jsx(
+    Field.Root,
+    {
+      ...fieldProps,
+      className: cx(styles.root, fieldProps.className)
+    }
+  );
+}
+function FieldLabel(props) {
+  const { children, ...nativeProps } = props;
+  const styles = field();
+  return /* @__PURE__ */ jsxs(Field.Label, { ...nativeProps, className: cx(styles.label, props.className), children: [
+    children,
+    /* @__PURE__ */ jsx(Field.RequiredIndicator, { children: "(required)" })
+  ] });
+}
+function FieldRequiredIndicator() {
+  return /* @__PURE__ */ jsx(Field.RequiredIndicator, { children: "(required)" });
+}
+function FieldInput(props) {
+  const { size, startIcon, endIcon, ...fieldProps } = props;
+  const styles = field({ size });
+  const hasStartIcon = Boolean(startIcon);
+  return /* @__PURE__ */ jsxs("div", { className: styles.inputRoot, children: [
+    /* @__PURE__ */ jsx(FieldStartIndicator, { children: startIcon }),
+    /* @__PURE__ */ jsx(
+      Field.Input,
+      {
+        ...fieldProps,
+        ...hasStartIcon && { "data-has": "start-indicator" },
+        className: cx(styles.input, fieldProps.className)
+      }
+    ),
+    /* @__PURE__ */ jsx(FieldStatusIndicator, { fallback: endIcon })
+  ] });
+}
+function FieldHelperText(props) {
+  const styles = field();
+  if (!props.children) return null;
+  return /* @__PURE__ */ jsx(
+    Field.HelperText,
+    {
+      ...props,
+      className: cx(styles.helperText, props.className)
+    }
+  );
+}
+function FieldErrorText(props) {
+  const styles = field();
+  if (!props.children) return null;
+  return /* @__PURE__ */ jsx(
+    Field.ErrorText,
+    {
+      ...props,
+      className: cx(styles.errorText, props.className)
+    }
+  );
+}
+function FieldTextarea(props) {
+  const styles = field();
+  return /* @__PURE__ */ jsx(
+    Field.Textarea,
+    {
+      ...props,
+      className: cx(styles.textarea, props.className)
+    }
+  );
+}
+var Input = FieldInput;
+var Textarea = FieldTextarea;
+
+export {
+  FieldRoot,
+  FieldLabel,
+  FieldRequiredIndicator,
+  FieldInput,
+  FieldHelperText,
+  FieldErrorText,
+  FieldTextarea,
+  Input,
+  Textarea
+};
+//# sourceMappingURL=chunk-VSTOSLFS.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/field/primitives.tsx"],"sourcesContent":["import {\n  Field,\n  type FieldHelperTextProps,\n  type FieldInputProps as ArkFieldInputProps,\n  type FieldLabelProps,\n  type FieldRootProps as ArkFieldRootProps,\n  type FieldTextareaProps,\n} from '@ark-ui/react/field'\nimport type { ReactNode } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { field, type FieldVariantProps } from '@cerberus/styled-system/recipes'\nimport { FieldStatusIndicator } from './status-indicator'\nimport { FieldStartIndicator } from './start-indicator'\n\n/**\n * This module contains all the primitives of the Field component.\n * @module 'field'\n */\n\nexport type FieldRootProps = ArkFieldRootProps & FieldVariantProps\n\n/**\n * The context & container for the Field components.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot required ids={{ input: 'exampleId' }}>\n *  <FieldLabel>Label</FieldLabel>\n *  <FieldInput />\n * </FieldRoot>\n * ```\n */\nexport function FieldRoot(props: FieldRootProps) {\n  const { size, ...fieldProps } = props\n  const styles = field({ size })\n  return (\n    <Field.Root\n      {...fieldProps}\n      className={cx(styles.root, fieldProps.className)}\n    />\n  )\n}\n\n/**\n * The label for the Field component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldLabel>Label</FieldLabel>\n * </FieldRoot>\n * ```\n */\nexport function FieldLabel(props: FieldLabelProps) {\n  const { children, ...nativeProps } = props\n  const styles = field()\n  return (\n    <Field.Label {...nativeProps} className={cx(styles.label, props.className)}>\n      {children}\n      <Field.RequiredIndicator>(required)</Field.RequiredIndicator>\n    </Field.Label>\n  )\n}\n\n/**\n * The required indicator for the Field component.\n */\nexport function FieldRequiredIndicator() {\n  return <Field.RequiredIndicator>(required)</Field.RequiredIndicator>\n}\n\nexport interface FieldInputProps\n  extends Omit<ArkFieldInputProps, 'size'>,\n    FieldVariantProps {\n  /**\n   * An optional icon to display at the start of the input.\n   */\n  startIcon?: ReactNode\n  /**\n   * An optional icon to display at the end of the input.\n   */\n  endIcon?: ReactNode\n}\n\n/**\n * The input for the Field component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldInput />\n * </FieldRoot>\n * ```\n */\nexport function FieldInput(props: FieldInputProps) {\n  const { size, startIcon, endIcon, ...fieldProps } = props\n  const styles = field({ size })\n  const hasStartIcon = Boolean(startIcon)\n\n  return (\n    <div className={styles.inputRoot}>\n      <FieldStartIndicator>{startIcon}</FieldStartIndicator>\n      <Field.Input\n        {...fieldProps}\n        {...(hasStartIcon && { 'data-has': 'start-indicator' })}\n        className={cx(styles.input, fieldProps.className)}\n      />\n      <FieldStatusIndicator fallback={endIcon} />\n    </div>\n  )\n}\n\n/**\n * The helper text for the Field component that is shown when the field is\n * valid.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldInput />\n *   <FieldHelperText>Helper text</FieldHelperText>\n * </FieldRoot>\n * ```\n */\nexport function FieldHelperText(props: FieldHelperTextProps) {\n  const styles = field()\n\n  if (!props.children) return null\n\n  return (\n    <Field.HelperText\n      {...props}\n      className={cx(styles.helperText, props.className)}\n    />\n  )\n}\n\n/**\n * The error text for the Field component that is shown when the field is\n * invalid.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldInput />\n *   <FieldErrorText>Error text</FieldErrorText>\n * </FieldRoot>\n * ```\n */\nexport function FieldErrorText(props: FieldHelperTextProps) {\n  const styles = field()\n\n  if (!props.children) return null\n\n  return (\n    <Field.ErrorText\n      {...props}\n      className={cx(styles.errorText, props.className)}\n    />\n  )\n}\n\n/**\n * The textarea for the Field component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldTextarea />\n * </FieldRoot>\n * ```\n */\nexport function FieldTextarea(props: FieldTextareaProps) {\n  const styles = field()\n  return (\n    <Field.Textarea\n      {...props}\n      className={cx(styles.textarea, props.className)}\n    />\n  )\n}\n\n/**\n * A named export for the FieldInput component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * import { Input } from '@cerberus/react'\n *\n * <Field\n *   ids={{\n *    control: 'email',\n *   }}\n *   label=\"Enter your email\"\n *   helperText=\"We'll never share your email with anyone else.\"\n *   errorText=\"Email is required.\"\n *   required\n * >\n *   <Input type=\"email\" />\n * </Field>\n * ```\n */\nexport const Input = FieldInput\nexport const Textarea = FieldTextarea\n"],"mappings":";;;;;;;;AAAA;AAAA,EACE;AAAA,OAMK;AAEP,SAAS,UAAU;AACnB,SAAS,aAAqC;AA0B1C,cAqBA,YArBA;AAJG,SAAS,UAAU,OAAuB;AAC/C,QAAM,EAAE,MAAM,GAAG,WAAW,IAAI;AAChC,QAAM,SAAS,MAAM,EAAE,KAAK,CAAC;AAC7B,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,MAAM,WAAW,SAAS;AAAA;AAAA,EACjD;AAEJ;AAYO,SAAS,WAAW,OAAwB;AACjD,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,QAAM,SAAS,MAAM;AACrB,SACE,qBAAC,MAAM,OAAN,EAAa,GAAG,aAAa,WAAW,GAAG,OAAO,OAAO,MAAM,SAAS,GACtE;AAAA;AAAA,IACD,oBAAC,MAAM,mBAAN,EAAwB,wBAAU;AAAA,KACrC;AAEJ;AAKO,SAAS,yBAAyB;AACvC,SAAO,oBAAC,MAAM,mBAAN,EAAwB,wBAAU;AAC5C;AAyBO,SAAS,WAAW,OAAwB;AACjD,QAAM,EAAE,MAAM,WAAW,SAAS,GAAG,WAAW,IAAI;AACpD,QAAM,SAAS,MAAM,EAAE,KAAK,CAAC;AAC7B,QAAM,eAAe,QAAQ,SAAS;AAEtC,SACE,qBAAC,SAAI,WAAW,OAAO,WACrB;AAAA,wBAAC,uBAAqB,qBAAU;AAAA,IAChC;AAAA,MAAC,MAAM;AAAA,MAAN;AAAA,QACE,GAAG;AAAA,QACH,GAAI,gBAAgB,EAAE,YAAY,kBAAkB;AAAA,QACrD,WAAW,GAAG,OAAO,OAAO,WAAW,SAAS;AAAA;AAAA,IAClD;AAAA,IACA,oBAAC,wBAAqB,UAAU,SAAS;AAAA,KAC3C;AAEJ;AAcO,SAAS,gBAAgB,OAA6B;AAC3D,QAAM,SAAS,MAAM;AAErB,MAAI,CAAC,MAAM,SAAU,QAAO;AAE5B,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,YAAY,MAAM,SAAS;AAAA;AAAA,EAClD;AAEJ;AAcO,SAAS,eAAe,OAA6B;AAC1D,QAAM,SAAS,MAAM;AAErB,MAAI,CAAC,MAAM,SAAU,QAAO;AAE5B,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,WAAW,MAAM,SAAS;AAAA;AAAA,EACjD;AAEJ;AAYO,SAAS,cAAc,OAA2B;AACvD,QAAM,SAAS,MAAM;AACrB,SACE;AAAA,IAAC,MAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,UAAU,MAAM,SAAS;AAAA;AAAA,EAChD;AAEJ;AAsBO,IAAM,QAAQ;AACd,IAAM,WAAW;","names":[]}