@cerberus-design/react 0.15.0 → 0.16.0-next-feeb186

package/src/components/toggle/parts.ts

@@ -0,0 +1,32 @@
+import type { ElementType } from 'react'
+import { ToggleRoot, ToggleIndicator } from './primitives'
+
+/**
+ * This module contains the parts of the Toggle parts.
+ * @module 'toggle/parts'
+ */
+
+interface TogglePartsValue {
+  /**
+   * The container of the toggle.
+   */
+  Root: ElementType
+  /**
+   * The indicator that appears when a toggle is pressed.
+   */
+  Indicator: ElementType
+}
+
+/**
+ * An Object containing the parts of the Radio component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the RadioParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const ToggleParts: TogglePartsValue = {
+  Root: ToggleRoot,
+  Indicator: ToggleIndicator,
+}

package/src/components/toggle/primitives.tsx

@@ -0,0 +1,17 @@
+import { Toggle } from '@ark-ui/react/toggle'
+
+/**
+ * This module provides the Toggle primitives.
+ * @module 'react/toggle'
+ */
+
+/**
+ * The ToggleRoot is used to manage the state of the Toggle component.
+ */
+export const ToggleRoot = Toggle.Root
+
+/**
+ * The ToggleIndicator is used to render the indicator of the Toggle component
+ * based on the pressed state.
+ */
+export const ToggleIndicator = Toggle.Indicator

package/src/config/types.ts

@@ -34,6 +34,7 @@ export interface DefinedIcons<T extends IconType = IconType> {
   invalidAlt: T
   redo: T
   selectArrow: T
+  selectChecked: T
   toggleChecked: T
 }
 

package/src/context/confirm-modal.tsx

@@ -11,7 +11,7 @@ import {
   type PropsWithChildren,
   type ReactNode,
 } from 'react'
-import { Button } from '../components/Button'
+import { Button } from '../components/button/button'
 import { css } from '@cerberus/styled-system/css'
 import { Show } from '../components/Show'
 import { Avatar } from '../components/Avatar'

package/src/context/field.tsx

@@ -1,11 +1,13 @@
 'use client'
 
+import type { FieldRootProps } from '@ark-ui/react'
 import {
   createContext,
   useContext,
   useMemo,
   type PropsWithChildren,
 } from 'react'
+import { FieldRoot } from '../components/field/primitives'
 
 /**
  * This module provides a context and hook for the field.
@@ -35,11 +37,10 @@ export interface FieldContextValue {
 const FieldContext = createContext<FieldContextValue | null>(null)
 
 /**
- * Provides the field state for a all related components used within a group.
- * @see https://cerberus.digitalu.design/react/input
+ * @deprecated use FieldRoot or FieldParts instead
  */
-export function Field(
-  props: PropsWithChildren<FieldContextValue>,
+export function FieldProvider(
+  props: PropsWithChildren<FieldRootProps>,
 ): JSX.Element {
   const value = useMemo(
     () => ({
@@ -53,7 +54,7 @@ export function Field(
 
   return (
     <FieldContext.Provider value={value}>
-      {props.children}
+      <FieldRoot {...props} />
     </FieldContext.Provider>
   )
 }

package/src/context/notification-center.tsx

@@ -17,7 +17,7 @@ import { Notification } from '../components/Notification'
 import { animateIn, vstack } from '@cerberus/styled-system/patterns'
 import { Portal, type PortalProps } from '../components/Portal'
 import { notification } from '@cerberus/styled-system/recipes'
-import { Button } from '../components/Button'
+import { Button } from '../components/button/button'
 import { cx } from '@cerberus/styled-system/css'
 import {
   addNotification,

package/src/context/prompt-modal.tsx

@@ -11,12 +11,12 @@ import {
   type MouseEvent,
   type PropsWithChildren,
 } from 'react'
-import { Button } from '../components/Button'
+import { DialogCloseTrigger } from '@ark-ui/react'
+import { HStack, VStack } from '@cerberus/styled-system/jsx'
 import { css } from '@cerberus/styled-system/css'
 import { hstack } from '@cerberus/styled-system/patterns'
-import { Input } from '../components/Input'
-import { Field } from './field'
-import { Label } from '../components/Label'
+import { FieldLabel, FieldRoot, Input } from '../components/field/index'
+import { Button } from '../components/button/button'
 import { Show } from '../components/Show'
 import { Avatar } from '../components/Avatar'
 import { Text } from '../components/Text'
@@ -27,8 +27,6 @@ import {
   DialogHeading,
   DialogProvider,
 } from '../components/Dialog'
-import { HStack, VStack } from '@cerberus/styled-system/jsx'
-import { DialogCloseTrigger } from '@ark-ui/react'
 
 /**
  * This module provides a context and hook for the prompt modal.
@@ -216,28 +214,28 @@ export function PromptModal(
               marginBlockEnd="lg"
               w="full"
             >
-              <Field invalid={!isValid}>
-                <Label
+              <FieldRoot
+                ids={{
+                  control: 'confirm',
+                }}
+                invalid={!isValid}
+              >
+                <FieldLabel
                   className={hstack({
                     gap: 'xs',
                     justify: 'flex-start !important',
+                    marginBlockEnd: 'xs',
+                    textStyle: 'label-md',
                   })}
-                  htmlFor="confirm"
-                  size="md"
                 >
                   Type
                   <Text as="strong" textTransform="uppercase">
                     {content?.key}
                   </Text>
                   to confirm
-                </Label>
-                <Input
-                  id="confirm"
-                  name="confirm"
-                  onChange={handleChange}
-                  type="text"
-                />
-              </Field>
+                </FieldLabel>
+                <Input name="confirm" onChange={handleChange} type="text" />
+              </FieldRoot>
             </VStack>
 
             <HStack gap="md" justify="stretch" w="full">

package/src/hooks/useDate.ts

@@ -38,13 +38,7 @@ export interface UseDateReturn extends UseDateBase {
 }
 
 /**
- * A hook for formatting and validating date inputs. The date format defaults to US Military format.
- * @example
- * ```tsx
- * const MyComponent = () => {
- *  const date = useDate({ initialValue: '01 JAN 2024' })
- *  return <input onChange={date.onChange} type="text" value={date.value} />
- * }
+ * @deprecated use the DatePicker family instead
  */
 export function useDate(options?: UseDateOptions): UseDateReturn {
   const initialValue = options?.initialValue ?? ''

package/src/hooks/useRootColors.ts

@@ -38,7 +38,6 @@ export function useRootColors(colors: string[] = []): RootColorsResult {
   useEffect(() => {
     if (Object.keys(state).length === colors.length) return
     dispatch(formatColors(colors))
-    console.log('updating colors in root hook')
   }, [colors])
 
   // reducer is already memoized

package/src/hooks/useToggle.ts

@@ -29,9 +29,7 @@ export interface ToggleHookReturn {
 }
 
 /**
- * Provides a hook for using a toggle.
- * @see https://cerberus.digitalu.design/react/use-toggle
- * @memberof module:Toggle
+ * @deprecated Will be removed in v1. Use ToggleParts instead.
  */
 export function useToggle(options?: UseToggleOptions): ToggleHookReturn {
   const [checked, setChecked] = useState<string>(options?.checked ?? '')

package/src/index.ts

@@ -5,13 +5,19 @@
 
 // deprecated
 
-export * from './components/Modal'
-export * from './components/ModalHeader'
-export * from './components/ModalHeading'
-export * from './components/ModalDescription'
-export * from './components/NavMenuTrigger'
-export * from './components/NavMenuList'
-export * from './components/NavMenuLink'
+export * from './components/deprecated/FieldMessage'
+export * from './components/deprecated/FieldsetLabel'
+export * from './components/deprecated/Label'
+export * from './components/deprecated/Modal'
+export * from './components/deprecated/ModalHeader'
+export * from './components/deprecated/ModalHeading'
+export * from './components/deprecated/ModalDescription'
+export * from './components/deprecated/NavMenuTrigger'
+export * from './components/deprecated/NavMenuList'
+export * from './components/deprecated/NavMenuLink'
+export * from './hooks/useDate'
+export * from './hooks/useModal'
+export * from './hooks/useToggle'
 
 // components
 
@@ -20,23 +26,22 @@ export * from './components/Accordion.client'
 export * from './components/AccordionItemGroup'
 export * from './components/Admonition'
 export * from './components/Avatar'
-export * from './components/Button'
-export * from './components/Checkbox'
+export * from './components/button/index'
+export * from './components/checkbox/index'
 export * from './components/CircularProgress'
+export * from './components/cta-dialog/index'
 export * from './components/DatePicker.client'
 export * from './components/DatePicker.server'
 export * from './components/Dialog'
 export * from './components/Dialog.client'
 export * from './components/Droppable'
-export * from './components/FieldMessage'
 export * from './components/FeatureFlag'
-export * from './components/Fieldset'
-export * from './components/FieldsetLabel'
+export * from './components/field/index'
+export * from './components/fieldset/index'
 export * from './components/FileStatus'
 export * from './components/FileUploader'
+export * from './components/for'
 export * from './components/IconButton'
-export * from './components/Input'
-export * from './components/Label'
 export * from './components/Legend'
 export * from './components/Menu'
 export * from './components/Notification'
@@ -44,9 +49,11 @@ export * from './components/NotificationHeading'
 export * from './components/NotificationDescription'
 export * from './components/Portal'
 export * from './components/ProgressBar'
-export * from './components/Radio'
-export * from './components/Select'
+export * from './components/radio/index'
+export * from './components/select/index'
+export * from './components/Show'
 export * from './components/Spinner'
+export * from './components/switch/index'
 export * from './components/Tabs.client'
 export * from './components/Table'
 export * from './components/Thead'
@@ -55,18 +62,14 @@ export * from './components/Td'
 export * from './components/Tbody'
 export * from './components/Tag'
 export * from './components/Text'
-export * from './components/Textarea'
-export * from './components/Toggle'
+export * from './components/toggle/index'
 export * from './components/Tooltip'
-export * from './components/Show'
 
 // context
 
 export * from './context/cerberus'
 export * from './context/confirm-modal'
-export * from './context/cta-modal'
 export * from './context/feature-flags'
-export * from './context/field'
 export * from './context/navMenu'
 export * from './context/notification-center'
 export * from './context/prompt-modal'
@@ -75,10 +78,7 @@ export * from './context/theme'
 
 // hooks
 
-export * from './hooks/useDate'
-export * from './hooks/useModal'
 export * from './hooks/useTheme'
-export * from './hooks/useToggle'
 export * from './hooks/useRootColors'
 
 // aria-helpers

package/src/utils/index.ts

@@ -18,4 +18,34 @@ export function formatNotifyCount(count: number): string {
   return count.toString()
 }
 
+/**
+ * Splits the properties of an object into multiple groups based on lists of keys.
+ * @param props - The object to split.
+ * @param keyGroups - The lists of keys to include in each group.
+ * @returns An array of objects: each containing the properties specified in the corresponding key group, and the last object containing the remaining keys.
+ */
+export function splitProps<T extends object>(
+  props: T,
+  ...keyGroups: (keyof T)[][]
+): { [K in keyof T]?: T[K] }[] {
+  const result = keyGroups.map(() => ({}) as { [K in keyof T]?: T[K] })
+  const rest = {} as { [K in keyof T]?: T[K] }
+
+  for (const key in props) {
+    let assigned = false
+    for (let i = 0; i < keyGroups.length; i++) {
+      if (keyGroups[i].includes(key as keyof T)) {
+        result[i][key as keyof T] = props[key]
+        assigned = true
+        break
+      }
+    }
+    if (!assigned) {
+      rest[key as keyof T] = props[key]
+    }
+  }
+
+  return [...result, rest]
+}
+
 export * from './localStorage'

package/build/legacy/components/Button.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  button,\n  type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n  ButtonVariantProps\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps): JSX.Element {\n  const { palette, usage, shape, ...nativeProps } = props\n  return (\n    <button\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        button({\n          palette,\n          usage,\n          shape,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAmB;AACnB,qBAGO;AAiBH;AAHG,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,GAAG,YAAY,IAAI;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,uBAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/components/Checkbox.cjs

@@ -1,113 +0,0 @@
-"use strict";
-"use client";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/components/Checkbox.tsx
-var Checkbox_exports = {};
-__export(Checkbox_exports, {
-  Checkbox: () => Checkbox
-});
-module.exports = __toCommonJS(Checkbox_exports);
-var import_recipes = require("@cerberus/styled-system/recipes");
-var import_patterns = require("@cerberus/styled-system/patterns");
-var import_css = require("@cerberus/styled-system/css");
-
-// src/components/Show.tsx
-var import_react = require("react");
-function Show(props) {
-  const { when, children, fallback } = props;
-  const condition = (0, import_react.useMemo)(() => when ?? false, [when]);
-  return (0, import_react.useMemo)(() => {
-    if (condition) return children;
-    return fallback ?? null;
-  }, [condition, children, fallback]);
-}
-
-// src/context/field.tsx
-var import_react2 = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var FieldContext = (0, import_react2.createContext)(null);
-function useFieldContext() {
-  const context = (0, import_react2.useContext)(FieldContext);
-  if (!context) {
-    throw new Error("useFieldContext must be used within a Field Provider.");
-  }
-  return context;
-}
-
-// src/context/cerberus.tsx
-var import_react3 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var CerberusContext = (0, import_react3.createContext)(null);
-function useCerberusContext() {
-  const context = (0, import_react3.useContext)(CerberusContext);
-  if (!context) {
-    throw new Error("useCerberus must be used within a CerberusProvider");
-  }
-  return context;
-}
-
-// src/components/Checkbox.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function Checkbox(props) {
-  const { describedBy, size, checked, mixed, ...nativeProps } = props;
-  const { invalid, ...fieldStates } = useFieldContext();
-  const styles = (0, import_recipes.checkbox)({ size });
-  const { icons } = useCerberusContext();
-  const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } = icons;
-  if (!CheckIcon) {
-    throw new Error("The CerberusProvider is missing the checkbox icon.");
-  }
-  if (!IndeterminateIcon) {
-    throw new Error("The CerberusProvider is missing the indeterminate icon.");
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "div",
-    {
-      className: (0, import_css.cx)(
-        styles.root,
-        (0, import_patterns.vstack)({
-          gap: "0",
-          justify: "center"
-        })
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "input",
-          {
-            ...nativeProps,
-            ...fieldStates,
-            ...describedBy && { "aria-describedby": describedBy },
-            ...invalid && { "aria-invalid": true },
-            ...mixed && { "aria-checked": "mixed" },
-            className: (0, import_css.cx)("peer", nativeProps.className, styles.input),
-            type: "checkbox"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: checked && !mixed, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CheckIcon, {}) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: mixed, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IndeterminateIcon, {}) }) })
-      ]
-    }
-  );
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Checkbox
-});
-//# sourceMappingURL=Checkbox.cjs.map

package/build/legacy/components/Checkbox.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/Checkbox.tsx","../../../src/components/Show.tsx","../../../src/context/field.tsx","../../../src/context/cerberus.tsx"],"sourcesContent":["'use client'\n\nimport {\n  checkbox,\n  type CheckboxVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { cx } from '@cerberus/styled-system/css'\nimport type { InputHTMLAttributes } from 'react'\nimport { Show } from './Show'\nimport { useFieldContext } from '../context/field'\nimport { useCerberusContext } from '../context/cerberus'\n\n/**\n * This module contains the Checkbox component.\n * @module\n */\n\nexport type CheckboxProps = CheckboxVariantProps &\n  Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'id'> & {\n    /**\n     * The id of the FieldMessage element describing the Checkbox.\n     */\n    describedBy?: string\n    /**\n     * The unique identifier for the checkbox. Required for accessibility.\n     */\n    id: string\n    /**\n     * Used to display a mixed checked state.\n     * @description [ARIA Mixed State](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox-mixed/)\n     */\n    mixed?: boolean\n  }\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 { describedBy, size, checked, mixed, ...nativeProps } = props\n  const { invalid, ...fieldStates } = useFieldContext()\n  const styles = checkbox({ size })\n  const { icons } = useCerberusContext()\n  const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } = icons\n\n  if (!CheckIcon) {\n    throw new Error('The CerberusProvider is missing the checkbox icon.')\n  }\n  if (!IndeterminateIcon) {\n    throw new Error('The CerberusProvider is missing the indeterminate icon.')\n  }\n\n  return (\n    <div\n      className={cx(\n        styles.root,\n        vstack({\n          gap: '0',\n          justify: 'center',\n        }),\n      )}\n    >\n      <input\n        {...nativeProps}\n        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        {...(mixed && { 'aria-checked': 'mixed' })}\n        className={cx('peer', nativeProps.className, styles.input)}\n        type=\"checkbox\"\n      />\n      <Show when={checked && !mixed}>\n        <span className={styles.icon}>\n          <CheckIcon />\n        </span>\n      </Show>\n      <Show when={mixed}>\n        <span className={styles.icon}>\n          <IndeterminateIcon />\n        </span>\n      </Show>\n    </div>\n  )\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n","'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n  /**\n   * Whether the field is disabled.\n   * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n   */\n  disabled?: boolean\n  /**\n   * Whether the field is read-only.\n   */\n  readOnly?: boolean\n  /**\n   * Whether the field is required.\n   */\n  required?: boolean\n  /**\n   * Whether the field is invalid.\n   */\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      {props.children}\n    </FieldContext.Provider>\n  )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,qBAGO;AACP,sBAAuB;AACvB,iBAAmB;;;ACLnB,mBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,sBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ACpCA,IAAAA,gBAKO;AA+CH;AApBJ,IAAM,mBAAe,6BAAwC,IAAI;AA8B1D,SAAS,kBAAqC;AACnD,QAAM,cAAU,0BAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;;;ACpEA,IAAAC,gBAAkE;AAyB9D,IAAAC,sBAAA;AAfJ,IAAM,sBAAkB,6BAA2C,IAAI;AAyBhE,SAAS,qBAAqB;AACnC,QAAM,cAAU,0BAAW,eAAe;AAC1C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,SAAO;AACT;;;AHmBI,IAAAC,sBAAA;AAfG,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,aAAa,MAAM,SAAS,OAAO,GAAG,YAAY,IAAI;AAC9D,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,aAAS,yBAAS,EAAE,KAAK,CAAC;AAChC,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,UAAU,WAAW,eAAe,kBAAkB,IAAI;AAElE,MAAI,CAAC,WAAW;AACd,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,MAAI,CAAC,mBAAmB;AACtB,UAAM,IAAI,MAAM,yDAAyD;AAAA,EAC3E;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT,OAAO;AAAA,YACP,wBAAO;AAAA,UACL,KAAK;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAG;AAAA,YACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,YACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,YACtC,GAAI,SAAS,EAAE,gBAAgB,QAAQ;AAAA,YACxC,eAAW,eAAG,QAAQ,YAAY,WAAW,OAAO,KAAK;AAAA,YACzD,MAAK;AAAA;AAAA,QACP;AAAA,QACA,6CAAC,QAAK,MAAM,WAAW,CAAC,OACtB,uDAAC,UAAK,WAAW,OAAO,MACtB,uDAAC,aAAU,GACb,GACF;AAAA,QACA,6CAAC,QAAK,MAAM,OACV,uDAAC,UAAK,WAAW,OAAO,MACtB,uDAAC,qBAAkB,GACrB,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["import_react","import_react","import_jsx_runtime","import_jsx_runtime"]}

package/build/legacy/components/FieldMessage.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/FieldMessage.tsx","../../../src/context/field.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 '../context/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 * A component that provides feedback about the field.\n * @see https://cerberus.digitalu.design/react/field-message\n * @example\n * ```tsx\n * <Field>\n *  <Label htmlFor=\"first_name\">First Name</Label>\n *  <Input aria-describedBy=\"help:first_name\" id=\"first_name\" type=\"text\" />\n *  <FieldMessage id=\"help:first_name\">\n *   This will only be used in your account information.\n *  </FieldMessage>\n * </Field>\n * ```\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","'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n  /**\n   * Whether the field is disabled.\n   * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n   */\n  disabled?: boolean\n  /**\n   * Whether the field is read-only.\n   */\n  readOnly?: boolean\n  /**\n   * Whether the field is required.\n   */\n  required?: boolean\n  /**\n   * Whether the field is invalid.\n   */\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      {props.children}\n    </FieldContext.Provider>\n  )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,iBAAmB;AACnB,qBAGO;;;ACLP,mBAKO;AA+CH;AApBJ,IAAM,mBAAe,4BAAwC,IAAI;AA8B1D,SAAS,kBAAqC;AACnD,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;;;AD3BI,IAAAA,sBAAA;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,eAAW,eAAG,MAAM,eAAW,6BAAa,CAAC;AAAA;AAAA,EAC/C;AAEJ;","names":["import_jsx_runtime"]}

package/build/legacy/components/Fieldset.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/Fieldset.tsx","../../../src/context/field.tsx"],"sourcesContent":["'use client'\n\nimport { css, cx } from '@cerberus/styled-system/css'\nimport type { FieldsetHTMLAttributes } from 'react'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the Fieldset component.\n * @module Fieldset\n */\n\nexport type FieldsetProps = FieldsetHTMLAttributes<HTMLFieldSetElement>\n\n/**\n * A component to group related elements in a form for accessibility.\n * @memberof Field\n * @see https://cerberus.digitalu.com/react/fieldset\n * @description [A11y Form Checklist](https://www.a11yproject.com/checklist/#forms)\n * @description [MDN Web Docs: Fieldset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)\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 */\nexport function Fieldset(props: FieldsetProps) {\n  const { invalid, ...formState } = useFieldContext()\n\n  return (\n    <fieldset\n      {...props}\n      {...formState}\n      {...(invalid && { 'aria-invalid': true })}\n      className={cx(\n        props.className,\n        css({\n          border: 'none',\n          pt: 2,\n          margin: 0,\n        }),\n      )}\n    />\n  )\n}\n","'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n  /**\n   * Whether the field is disabled.\n   * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n   */\n  disabled?: boolean\n  /**\n   * Whether the field is read-only.\n   */\n  readOnly?: boolean\n  /**\n   * Whether the field is required.\n   */\n  required?: boolean\n  /**\n   * Whether the field is invalid.\n   */\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      {props.children}\n    </FieldContext.Provider>\n  )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAwB;;;ACAxB,mBAKO;AA+CH;AApBJ,IAAM,mBAAe,4BAAwC,IAAI;AA8B1D,SAAS,kBAAqC;AACnD,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;;;ADpBI,IAAAA,sBAAA;AAJG,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,SAAS,GAAG,UAAU,IAAI,gBAAgB;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,eAAW;AAAA,QACT,MAAM;AAAA,YACN,gBAAI;AAAA,UACF,QAAQ;AAAA,UACR,IAAI;AAAA,UACJ,QAAQ;AAAA,QACV,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":["import_jsx_runtime"]}

package/build/legacy/components/FieldsetLabel.cjs.map

@@ -1 +0,0 @@
-{"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 './Label'\n\n/**\n * This module contains the FieldsetLabel component.\n * @module FieldsetLabel\n */\n\nexport type FieldsetLabelProps = LabelProps & LabelVariantProps\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;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAA8C;AA8C1C;AAHG,SAAS,cAAc,OAA2B;AACvD,QAAM,EAAE,MAAM,OAAO,GAAG,YAAY,IAAI;AACxC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,sBAAM;AAAA,UACJ;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/components/Input.cjs

@@ -1,95 +0,0 @@
-"use strict";
-"use client";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/components/Input.tsx
-var Input_exports = {};
-__export(Input_exports, {
-  Input: () => Input
-});
-module.exports = __toCommonJS(Input_exports);
-var import_recipes = require("@cerberus/styled-system/recipes");
-var import_css = require("@cerberus/styled-system/css");
-
-// src/context/field.tsx
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var FieldContext = (0, import_react.createContext)(null);
-function useFieldContext() {
-  const context = (0, import_react.useContext)(FieldContext);
-  if (!context) {
-    throw new Error("useFieldContext must be used within a Field Provider.");
-  }
-  return context;
-}
-
-// src/context/cerberus.tsx
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var CerberusContext = (0, import_react2.createContext)(null);
-function useCerberusContext() {
-  const context = (0, import_react2.useContext)(CerberusContext);
-  if (!context) {
-    throw new Error("useCerberus must be used within a CerberusProvider");
-  }
-  return context;
-}
-
-// src/components/Show.tsx
-var import_react3 = require("react");
-function Show(props) {
-  const { when, children, fallback } = props;
-  const condition = (0, import_react3.useMemo)(() => when ?? false, [when]);
-  return (0, import_react3.useMemo)(() => {
-    if (condition) return children;
-    return fallback ?? null;
-  }, [condition, children, fallback]);
-}
-
-// src/components/Input.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function Input(props) {
-  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props;
-  const inputStyles = (0, import_recipes.input)({ size });
-  const { invalid, ...fieldStates } = useFieldContext();
-  const hasEndIcon = Boolean(endIcon);
-  const { icons } = useCerberusContext();
-  const { invalid: InvalidIcon } = icons;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: inputStyles.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: inputStyles.startIcon, children: startIcon }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "input",
-      {
-        ...nativeProps,
-        ...fieldStates,
-        ...describedBy && { "aria-describedby": describedBy },
-        ...invalid && { "aria-invalid": true },
-        "data-start-icon": Boolean(startIcon),
-        className: (0, import_css.cx)("peer", nativeProps.className, inputStyles.input)
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: invalid, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InvalidIcon, { className: inputStyles.icon }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: inputStyles.icon, children: endIcon }) })
-  ] });
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Input
-});
-//# sourceMappingURL=Input.cjs.map