@cerberus-design/react 0.18.3 → 0.18.4

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/dialog/dialog.tsx","../../../../src/components/Portal.tsx","../../../../src/components/dialog/primitives.tsx"],"sourcesContent":["import type { DialogContentProps } from '@ark-ui/react/dialog'\nimport type { DialogVariantProps } from 'styled-system/recipes'\nimport { Portal } from '../Portal'\nimport { DialogBackdrop, DialogContent, DialogPositioner } from './primitives'\n\n/**\n * This module contains and abstraction of the Dialog primitives.\n * @module 'dialog'\n */\n\nexport interface DialogProps\n  extends Omit<DialogContentProps, 'size'>,\n    DialogVariantProps {}\n\n/**\n * An abstraction of the Dialog primitives that controls the content of the\n * dialog. Must be used within the `DialogProvider` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @definition [Ark Dialog docs](https://ark-ui.com/react/docs/components/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <Text>Dialog Content</Text>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function Dialog(props: DialogProps) {\n  return (\n    <Portal>\n      <DialogBackdrop />\n      <DialogPositioner>\n        <DialogContent {...props} />\n      </DialogPositioner>\n    </Portal>\n  )\n}\n","import { Portal as ArkPortal, type PortalProps } from '@ark-ui/react'\nimport type { PropsWithChildren } from 'react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type { PortalProps }\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n  return <ArkPortal {...props} />\n}\n","import {\n  Dialog,\n  type DialogBackdropProps,\n  type DialogContentProps,\n  type DialogDescriptionProps,\n  type DialogPositionerProps,\n  type DialogRootProps,\n  type DialogTitleProps,\n  type DialogTriggerProps,\n} from '@ark-ui/react/dialog'\nimport { cx } from 'styled-system/css'\nimport { dialog, type DialogVariantProps } from 'styled-system/recipes'\n\n/**\n * This module contains the primitives of the Dialog component.\n * @module 'dialog/primitives'\n */\n\n/**\n * The provider that controls the dialog components.\n */\nexport function DialogRoot(props: DialogRootProps) {\n  return <Dialog.Root {...props} />\n}\n\n/**\n * The trigger that opens the dialog.\n */\nexport function DialogTrigger(props: DialogTriggerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Trigger\n      {...props}\n      className={cx(styles.trigger, props.className)}\n    />\n  )\n}\n\n/**\n * The overlay of the dialog.\n */\nexport function DialogBackdrop(props: DialogBackdropProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Backdrop\n      {...props}\n      className={cx(styles.backdrop, props.className)}\n    />\n  )\n}\n\n/**\n * The container that positions the dialog.\n */\nexport function DialogPositioner(props: DialogPositionerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Positioner\n      {...props}\n      className={cx(styles.positioner, props.className)}\n    />\n  )\n}\n\n/**\n * The visible content of the dialog.\n */\nexport function DialogContent(props: DialogContentProps & DialogVariantProps) {\n  const { size, ...contentProps } = props\n  const styles = dialog({ size })\n  return (\n    <Dialog.Content\n      {...contentProps}\n      className={cx(styles.content, contentProps.className)}\n    />\n  )\n}\n\n/**\n * The heading of the dialog.\n */\nexport function DialogHeading(props: DialogTitleProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Title {...props} className={cx(styles.title, props.className)} />\n  )\n}\n\n/**\n * The description of the dialog.\n */\nexport function DialogDescription(props: DialogDescriptionProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Description\n      {...props}\n      className={cx(styles.description, props.className)}\n    />\n  )\n}\n\n/**\n * The trigger that closes the dialog.\n */\nexport function DialogCloseTrigger(props: DialogTriggerProps) {\n  return <Dialog.CloseTrigger {...props} />\n}\n\n/**\n * The provider that controls the dialog components. This is a named export of\n * the DialogRoot primitive.\n */\nexport const DialogProvider = DialogRoot\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,gBAAAA;AAAA;AAAA;;;ACAA,mBAAsD;AA6B7C;AADF,SAAS,OAAO,OAAuC;AAC5D,SAAO,4CAAC,aAAAC,QAAA,EAAW,GAAG,OAAO;AAC/B;;;AC9BA,oBASO;AACP,iBAAmB;AACnB,qBAAgD;AAWvC,IAAAC,sBAAA;AAmBF,SAAS,eAAe,OAA4B;AACzD,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,UAAU,MAAM,SAAS;AAAA;AAAA,EAChD;AAEJ;AAKO,SAAS,iBAAiB,OAA8B;AAC7D,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,YAAY,MAAM,SAAS;AAAA;AAAA,EAClD;AAEJ;AAKO,SAAS,cAAc,OAAgD;AAC5E,QAAM,EAAE,MAAM,GAAG,aAAa,IAAI;AAClC,QAAM,aAAS,uBAAO,EAAE,KAAK,CAAC;AAC9B,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,SAAS,aAAa,SAAS;AAAA;AAAA,EACtD;AAEJ;;;AF3CI,IAAAC,sBAAA;AAFG,SAASC,QAAO,OAAoB;AACzC,SACE,8CAAC,UACC;AAAA,iDAAC,kBAAe;AAAA,IAChB,6CAAC,oBACC,uDAAC,iBAAe,GAAG,OAAO,GAC5B;AAAA,KACF;AAEJ;","names":["Dialog","ArkPortal","import_jsx_runtime","import_jsx_runtime","Dialog"]}
+{"version":3,"sources":["../../../../src/components/dialog/dialog.tsx","../../../../src/components/Portal.tsx","../../../../src/components/dialog/primitives.tsx"],"sourcesContent":["import type { DialogContentProps } from '@ark-ui/react/dialog'\nimport type { DialogVariantProps } from 'styled-system/recipes'\nimport type { WithCss } from '../../types'\nimport { Portal } from '../Portal'\nimport { DialogBackdrop, DialogContent, DialogPositioner } from './primitives'\n\n/**\n * This module contains and abstraction of the Dialog primitives.\n * @module 'dialog'\n */\n\nexport interface DialogProps\n  extends Omit<DialogContentProps, 'size' | 'style'>,\n    DialogVariantProps,\n    WithCss {}\n\n/**\n * An abstraction of the Dialog primitives that controls the content of the\n * dialog. Must be used within the `DialogProvider` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @definition [Ark Dialog docs](https://ark-ui.com/react/docs/components/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <Text>Dialog Content</Text>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function Dialog(props: DialogProps) {\n  return (\n    <Portal>\n      <DialogBackdrop />\n      <DialogPositioner>\n        <DialogContent {...props} />\n      </DialogPositioner>\n    </Portal>\n  )\n}\n","import { Portal as ArkPortal, type PortalProps } from '@ark-ui/react'\nimport type { PropsWithChildren } from 'react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type { PortalProps }\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n  return <ArkPortal {...props} />\n}\n","import {\n  Dialog,\n  type DialogBackdropProps,\n  type DialogContentProps,\n  type DialogDescriptionProps,\n  type DialogPositionerProps,\n  type DialogRootProps,\n  type DialogTitleProps,\n  type DialogTriggerProps,\n} from '@ark-ui/react/dialog'\nimport { css, cx } from 'styled-system/css'\nimport { dialog, type DialogVariantProps } from 'styled-system/recipes'\nimport type { WithCss } from '../../types'\n\n/**\n * This module contains the primitives of the Dialog component.\n * @module 'dialog/primitives'\n */\n\n/**\n * The provider that controls the dialog components.\n */\nexport function DialogRoot(props: DialogRootProps) {\n  return <Dialog.Root {...props} />\n}\n\n/**\n * The trigger that opens the dialog.\n */\nexport function DialogTrigger(props: DialogTriggerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Trigger\n      {...props}\n      className={cx(styles.trigger, props.className)}\n    />\n  )\n}\n\n/**\n * The overlay of the dialog.\n */\nexport function DialogBackdrop(props: DialogBackdropProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Backdrop\n      {...props}\n      className={cx(styles.backdrop, props.className)}\n    />\n  )\n}\n\n/**\n * The container that positions the dialog.\n */\nexport function DialogPositioner(props: DialogPositionerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Positioner\n      {...props}\n      className={cx(styles.positioner, props.className)}\n    />\n  )\n}\n\n/**\n * The visible content of the dialog.\n */\nexport function DialogContent(\n  props: DialogContentProps & DialogVariantProps & WithCss,\n) {\n  const { size, css: customStyles, ...contentProps } = props\n  const styles = dialog({ size })\n  return (\n    <Dialog.Content\n      {...contentProps}\n      className={cx(styles.content, css(customStyles), contentProps.className)}\n    />\n  )\n}\n\n/**\n * The heading of the dialog.\n */\nexport function DialogHeading(props: DialogTitleProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Title {...props} className={cx(styles.title, props.className)} />\n  )\n}\n\n/**\n * The description of the dialog.\n */\nexport function DialogDescription(props: DialogDescriptionProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Description\n      {...props}\n      className={cx(styles.description, props.className)}\n    />\n  )\n}\n\n/**\n * The trigger that closes the dialog.\n */\nexport function DialogCloseTrigger(props: DialogTriggerProps) {\n  return <Dialog.CloseTrigger {...props} />\n}\n\n/**\n * The provider that controls the dialog components. This is a named export of\n * the DialogRoot primitive.\n */\nexport const DialogProvider = DialogRoot\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,gBAAAA;AAAA;AAAA;;;ACAA,mBAAsD;AA6B7C;AADF,SAAS,OAAO,OAAuC;AAC5D,SAAO,4CAAC,aAAAC,QAAA,EAAW,GAAG,OAAO;AAC/B;;;AC9BA,oBASO;AACP,iBAAwB;AACxB,qBAAgD;AAYvC,IAAAC,sBAAA;AAmBF,SAAS,eAAe,OAA4B;AACzD,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,UAAU,MAAM,SAAS;AAAA;AAAA,EAChD;AAEJ;AAKO,SAAS,iBAAiB,OAA8B;AAC7D,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,YAAY,MAAM,SAAS;AAAA;AAAA,EAClD;AAEJ;AAKO,SAAS,cACd,OACA;AACA,QAAM,EAAE,MAAM,KAAK,cAAc,GAAG,aAAa,IAAI;AACrD,QAAM,aAAS,uBAAO,EAAE,KAAK,CAAC;AAC9B,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,aAAS,gBAAI,YAAY,GAAG,aAAa,SAAS;AAAA;AAAA,EACzE;AAEJ;;;AF5CI,IAAAC,sBAAA;AAFG,SAASC,QAAO,OAAoB;AACzC,SACE,8CAAC,UACC;AAAA,iDAAC,kBAAe;AAAA,IAChB,6CAAC,oBACC,uDAAC,iBAAe,GAAG,OAAO,GAC5B;AAAA,KACF;AAEJ;","names":["Dialog","ArkPortal","import_jsx_runtime","import_jsx_runtime","Dialog"]}

package/build/legacy/components/dialog/index.cjs

@@ -74,13 +74,13 @@ function DialogPositioner(props) {
   );
 }
 function DialogContent(props) {
-  const { size, ...contentProps } = props;
+  const { size, css: customStyles, ...contentProps } = props;
   const styles = (0, import_recipes.dialog)({ size });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_dialog.Dialog.Content,
     {
       ...contentProps,
-      className: (0, import_css.cx)(styles.content, contentProps.className)
+      className: (0, import_css.cx)(styles.content, (0, import_css.css)(customStyles), contentProps.className)
     }
   );
 }

package/build/legacy/components/dialog/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/dialog/index.ts","../../../../src/components/dialog/primitives.tsx","../../../../src/components/dialog/parts.ts","../../../../src/context/cerberus.tsx","../../../../src/components/IconButton.tsx","../../../../src/components/dialog/close-icon-trigger.tsx","../../../../src/components/Portal.tsx","../../../../src/components/dialog/dialog.tsx"],"sourcesContent":["export * from './parts'\nexport * from './primitives'\nexport * from './close-icon-trigger'\nexport * from './dialog'\n","import {\n  Dialog,\n  type DialogBackdropProps,\n  type DialogContentProps,\n  type DialogDescriptionProps,\n  type DialogPositionerProps,\n  type DialogRootProps,\n  type DialogTitleProps,\n  type DialogTriggerProps,\n} from '@ark-ui/react/dialog'\nimport { cx } from 'styled-system/css'\nimport { dialog, type DialogVariantProps } from 'styled-system/recipes'\n\n/**\n * This module contains the primitives of the Dialog component.\n * @module 'dialog/primitives'\n */\n\n/**\n * The provider that controls the dialog components.\n */\nexport function DialogRoot(props: DialogRootProps) {\n  return <Dialog.Root {...props} />\n}\n\n/**\n * The trigger that opens the dialog.\n */\nexport function DialogTrigger(props: DialogTriggerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Trigger\n      {...props}\n      className={cx(styles.trigger, props.className)}\n    />\n  )\n}\n\n/**\n * The overlay of the dialog.\n */\nexport function DialogBackdrop(props: DialogBackdropProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Backdrop\n      {...props}\n      className={cx(styles.backdrop, props.className)}\n    />\n  )\n}\n\n/**\n * The container that positions the dialog.\n */\nexport function DialogPositioner(props: DialogPositionerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Positioner\n      {...props}\n      className={cx(styles.positioner, props.className)}\n    />\n  )\n}\n\n/**\n * The visible content of the dialog.\n */\nexport function DialogContent(props: DialogContentProps & DialogVariantProps) {\n  const { size, ...contentProps } = props\n  const styles = dialog({ size })\n  return (\n    <Dialog.Content\n      {...contentProps}\n      className={cx(styles.content, contentProps.className)}\n    />\n  )\n}\n\n/**\n * The heading of the dialog.\n */\nexport function DialogHeading(props: DialogTitleProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Title {...props} className={cx(styles.title, props.className)} />\n  )\n}\n\n/**\n * The description of the dialog.\n */\nexport function DialogDescription(props: DialogDescriptionProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Description\n      {...props}\n      className={cx(styles.description, props.className)}\n    />\n  )\n}\n\n/**\n * The trigger that closes the dialog.\n */\nexport function DialogCloseTrigger(props: DialogTriggerProps) {\n  return <Dialog.CloseTrigger {...props} />\n}\n\n/**\n * The provider that controls the dialog components. This is a named export of\n * the DialogRoot primitive.\n */\nexport const DialogProvider = DialogRoot\n","import type { ElementType } from 'react'\nimport {\n  DialogBackdrop,\n  DialogCloseTrigger,\n  DialogContent,\n  DialogDescription,\n  DialogHeading,\n  DialogPositioner,\n  DialogRoot,\n  DialogTrigger,\n} from './primitives'\n\n/**\n * This module contains the parts of the Dialog component.\n * @module 'dialog/parts'\n */\n\ninterface DialogPartsValue {\n  /**\n   * The context provider of the dialog.\n   */\n  Root: ElementType\n  /**\n   * The trigger that opens the dialog.\n   */\n  Trigger: ElementType\n  /**\n   * The overlay of the dialog.\n   */\n  Backdrop: ElementType\n  /**\n   * The container that positions the dialog.\n   */\n  Positioner: ElementType\n  /**\n   * The visible content of the dialog.\n   */\n  Content: ElementType\n  /**\n   * The heading of the dialog.\n   */\n  Heading: ElementType\n  /**\n   * The description of the dialog.\n   */\n  Description: ElementType\n  /**\n   * The trigger that closes the dialog.\n   */\n  CloseTrigger: ElementType\n}\n\n/**\n * An Object containing the parts of the dialog component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the DialogParts object and\n * the entire family of components vs. only what you use.\n */\nexport const DialogParts: DialogPartsValue = {\n  Root: DialogRoot,\n  Trigger: DialogTrigger,\n  Backdrop: DialogBackdrop,\n  Positioner: DialogPositioner,\n  Content: DialogContent,\n  Heading: DialogHeading,\n  Description: DialogDescription,\n  CloseTrigger: DialogCloseTrigger,\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n","import { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport { cx } from 'styled-system/css'\nimport { iconButton, type IconButtonVariantProps } from 'styled-system/recipes'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport interface IconButtonRawProps extends HTMLArkProps<'button'> {\n  /**\n   * The aria-label attribute for the icon button.\n   */\n  ariaLabel: string\n}\nexport type IconButtonProps = IconButtonRawProps & IconButtonVariantProps\n\n/**\n * A component that allows the user to perform actions using an icon\n * @see https://cerberus.digitalu.design/react/icon-button\n */\nexport function IconButton(props: IconButtonProps) {\n  const { ariaLabel, palette, usage, size, ...nativeProps } = props\n  return (\n    <ark.button\n      {...nativeProps}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n          size,\n        }),\n      )}\n    />\n  )\n}\n","'use client'\n\nimport { type DialogCloseTriggerProps } from '@ark-ui/react/dialog'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { IconButton } from '../IconButton'\nimport { DialogCloseTrigger } from './primitives'\nimport { dialog } from 'styled-system/recipes'\nimport { cx } from 'styled-system/css'\n\n/**\n * This module contains the close trigger for the dialog.\n * @module react/dialog\n */\n\nexport function DialogCloseIconTrigger(props: DialogCloseTriggerProps) {\n  const styles = dialog()\n\n  const { icons } = useCerberusContext()\n  const { close: CloseIcon } = icons\n\n  return (\n    <DialogCloseTrigger\n      {...props}\n      className={cx(styles.closeTrigger, props.className)}\n      asChild\n    >\n      <IconButton\n        ariaLabel=\"Close dialog\"\n        palette=\"action\"\n        size=\"lg\"\n        usage=\"ghost\"\n      >\n        <CloseIcon />\n      </IconButton>\n    </DialogCloseTrigger>\n  )\n}\n","import { Portal as ArkPortal, type PortalProps } from '@ark-ui/react'\nimport type { PropsWithChildren } from 'react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type { PortalProps }\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n  return <ArkPortal {...props} />\n}\n","import type { DialogContentProps } from '@ark-ui/react/dialog'\nimport type { DialogVariantProps } from 'styled-system/recipes'\nimport { Portal } from '../Portal'\nimport { DialogBackdrop, DialogContent, DialogPositioner } from './primitives'\n\n/**\n * This module contains and abstraction of the Dialog primitives.\n * @module 'dialog'\n */\n\nexport interface DialogProps\n  extends Omit<DialogContentProps, 'size'>,\n    DialogVariantProps {}\n\n/**\n * An abstraction of the Dialog primitives that controls the content of the\n * dialog. Must be used within the `DialogProvider` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @definition [Ark Dialog docs](https://ark-ui.com/react/docs/components/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <Text>Dialog Content</Text>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function Dialog(props: DialogProps) {\n  return (\n    <Portal>\n      <DialogBackdrop />\n      <DialogPositioner>\n        <DialogContent {...props} />\n      </DialogPositioner>\n    </Portal>\n  )\n}\n"],"mappings":"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","names":["Dialog","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_recipes","import_css","import_jsx_runtime","import_react","import_jsx_runtime","ArkPortal","import_jsx_runtime","Dialog"]}
+{"version":3,"sources":["../../../../src/components/dialog/index.ts","../../../../src/components/dialog/primitives.tsx","../../../../src/components/dialog/parts.ts","../../../../src/context/cerberus.tsx","../../../../src/components/IconButton.tsx","../../../../src/components/dialog/close-icon-trigger.tsx","../../../../src/components/Portal.tsx","../../../../src/components/dialog/dialog.tsx"],"sourcesContent":["export * from './parts'\nexport * from './primitives'\nexport * from './close-icon-trigger'\nexport * from './dialog'\n\nexport interface OpenChangeDetails {\n  open: boolean\n}\n","import {\n  Dialog,\n  type DialogBackdropProps,\n  type DialogContentProps,\n  type DialogDescriptionProps,\n  type DialogPositionerProps,\n  type DialogRootProps,\n  type DialogTitleProps,\n  type DialogTriggerProps,\n} from '@ark-ui/react/dialog'\nimport { css, cx } from 'styled-system/css'\nimport { dialog, type DialogVariantProps } from 'styled-system/recipes'\nimport type { WithCss } from '../../types'\n\n/**\n * This module contains the primitives of the Dialog component.\n * @module 'dialog/primitives'\n */\n\n/**\n * The provider that controls the dialog components.\n */\nexport function DialogRoot(props: DialogRootProps) {\n  return <Dialog.Root {...props} />\n}\n\n/**\n * The trigger that opens the dialog.\n */\nexport function DialogTrigger(props: DialogTriggerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Trigger\n      {...props}\n      className={cx(styles.trigger, props.className)}\n    />\n  )\n}\n\n/**\n * The overlay of the dialog.\n */\nexport function DialogBackdrop(props: DialogBackdropProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Backdrop\n      {...props}\n      className={cx(styles.backdrop, props.className)}\n    />\n  )\n}\n\n/**\n * The container that positions the dialog.\n */\nexport function DialogPositioner(props: DialogPositionerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Positioner\n      {...props}\n      className={cx(styles.positioner, props.className)}\n    />\n  )\n}\n\n/**\n * The visible content of the dialog.\n */\nexport function DialogContent(\n  props: DialogContentProps & DialogVariantProps & WithCss,\n) {\n  const { size, css: customStyles, ...contentProps } = props\n  const styles = dialog({ size })\n  return (\n    <Dialog.Content\n      {...contentProps}\n      className={cx(styles.content, css(customStyles), contentProps.className)}\n    />\n  )\n}\n\n/**\n * The heading of the dialog.\n */\nexport function DialogHeading(props: DialogTitleProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Title {...props} className={cx(styles.title, props.className)} />\n  )\n}\n\n/**\n * The description of the dialog.\n */\nexport function DialogDescription(props: DialogDescriptionProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Description\n      {...props}\n      className={cx(styles.description, props.className)}\n    />\n  )\n}\n\n/**\n * The trigger that closes the dialog.\n */\nexport function DialogCloseTrigger(props: DialogTriggerProps) {\n  return <Dialog.CloseTrigger {...props} />\n}\n\n/**\n * The provider that controls the dialog components. This is a named export of\n * the DialogRoot primitive.\n */\nexport const DialogProvider = DialogRoot\n","import type { ElementType } from 'react'\nimport {\n  DialogBackdrop,\n  DialogCloseTrigger,\n  DialogContent,\n  DialogDescription,\n  DialogHeading,\n  DialogPositioner,\n  DialogRoot,\n  DialogTrigger,\n} from './primitives'\n\n/**\n * This module contains the parts of the Dialog component.\n * @module 'dialog/parts'\n */\n\ninterface DialogPartsValue {\n  /**\n   * The context provider of the dialog.\n   */\n  Root: ElementType\n  /**\n   * The trigger that opens the dialog.\n   */\n  Trigger: ElementType\n  /**\n   * The overlay of the dialog.\n   */\n  Backdrop: ElementType\n  /**\n   * The container that positions the dialog.\n   */\n  Positioner: ElementType\n  /**\n   * The visible content of the dialog.\n   */\n  Content: ElementType\n  /**\n   * The heading of the dialog.\n   */\n  Heading: ElementType\n  /**\n   * The description of the dialog.\n   */\n  Description: ElementType\n  /**\n   * The trigger that closes the dialog.\n   */\n  CloseTrigger: ElementType\n}\n\n/**\n * An Object containing the parts of the dialog component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the DialogParts object and\n * the entire family of components vs. only what you use.\n */\nexport const DialogParts: DialogPartsValue = {\n  Root: DialogRoot,\n  Trigger: DialogTrigger,\n  Backdrop: DialogBackdrop,\n  Positioner: DialogPositioner,\n  Content: DialogContent,\n  Heading: DialogHeading,\n  Description: DialogDescription,\n  CloseTrigger: DialogCloseTrigger,\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n","import { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport { cx } from 'styled-system/css'\nimport { iconButton, type IconButtonVariantProps } from 'styled-system/recipes'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport interface IconButtonRawProps extends HTMLArkProps<'button'> {\n  /**\n   * The aria-label attribute for the icon button.\n   */\n  ariaLabel: string\n}\nexport type IconButtonProps = IconButtonRawProps & IconButtonVariantProps\n\n/**\n * A component that allows the user to perform actions using an icon\n * @see https://cerberus.digitalu.design/react/icon-button\n */\nexport function IconButton(props: IconButtonProps) {\n  const { ariaLabel, palette, usage, size, ...nativeProps } = props\n  return (\n    <ark.button\n      {...nativeProps}\n      aria-label={ariaLabel ?? 'Icon Button'}\n      className={cx(\n        nativeProps.className,\n        iconButton({\n          palette,\n          usage,\n          size,\n        }),\n      )}\n    />\n  )\n}\n","'use client'\n\nimport { type DialogCloseTriggerProps } from '@ark-ui/react/dialog'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { IconButton } from '../IconButton'\nimport { DialogCloseTrigger } from './primitives'\nimport { dialog } from 'styled-system/recipes'\nimport { cx } from 'styled-system/css'\n\n/**\n * This module contains the close trigger for the dialog.\n * @module react/dialog\n */\n\nexport function DialogCloseIconTrigger(props: DialogCloseTriggerProps) {\n  const styles = dialog()\n\n  const { icons } = useCerberusContext()\n  const { close: CloseIcon } = icons\n\n  return (\n    <DialogCloseTrigger\n      {...props}\n      className={cx(styles.closeTrigger, props.className)}\n      asChild\n    >\n      <IconButton\n        ariaLabel=\"Close dialog\"\n        palette=\"action\"\n        size=\"lg\"\n        usage=\"ghost\"\n      >\n        <CloseIcon />\n      </IconButton>\n    </DialogCloseTrigger>\n  )\n}\n","import { Portal as ArkPortal, type PortalProps } from '@ark-ui/react'\nimport type { PropsWithChildren } from 'react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type { PortalProps }\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n  return <ArkPortal {...props} />\n}\n","import type { DialogContentProps } from '@ark-ui/react/dialog'\nimport type { DialogVariantProps } from 'styled-system/recipes'\nimport type { WithCss } from '../../types'\nimport { Portal } from '../Portal'\nimport { DialogBackdrop, DialogContent, DialogPositioner } from './primitives'\n\n/**\n * This module contains and abstraction of the Dialog primitives.\n * @module 'dialog'\n */\n\nexport interface DialogProps\n  extends Omit<DialogContentProps, 'size' | 'style'>,\n    DialogVariantProps,\n    WithCss {}\n\n/**\n * An abstraction of the Dialog primitives that controls the content of the\n * dialog. Must be used within the `DialogProvider` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @definition [Ark Dialog docs](https://ark-ui.com/react/docs/components/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n *   <DialogTrigger asChild>\n *    <Button>Open Dialog</Button>\n *  </DialogTrigger>\n *  <Dialog>\n *    <Text>Dialog Content</Text>\n *  </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function Dialog(props: DialogProps) {\n  return (\n    <Portal>\n      <DialogBackdrop />\n      <DialogPositioner>\n        <DialogContent {...props} />\n      </DialogPositioner>\n    </Portal>\n  )\n}\n"],"mappings":"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","names":["Dialog","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_recipes","import_css","import_jsx_runtime","import_react","import_jsx_runtime","ArkPortal","import_jsx_runtime","Dialog"]}

package/build/legacy/components/dialog/index.d.cts

@@ -1,3 +1,4 @@
+export { OpenChangeDetails_alias_1 as OpenChangeDetails } from '../../_tsup-dts-rollup.cjs';
 export { DialogParts_alias_1 as DialogParts } from '../../_tsup-dts-rollup.cjs';
 export { DialogRoot_alias_1 as DialogRoot } from '../../_tsup-dts-rollup.cjs';
 export { DialogTrigger_alias_1 as DialogTrigger } from '../../_tsup-dts-rollup.cjs';

package/build/legacy/components/dialog/parts.cjs

@@ -63,13 +63,13 @@ function DialogPositioner(props) {
   );
 }
 function DialogContent(props) {
-  const { size, ...contentProps } = props;
+  const { size, css: customStyles, ...contentProps } = props;
   const styles = (0, import_recipes.dialog)({ size });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_dialog.Dialog.Content,
     {
       ...contentProps,
-      className: (0, import_css.cx)(styles.content, contentProps.className)
+      className: (0, import_css.cx)(styles.content, (0, import_css.css)(customStyles), contentProps.className)
     }
   );
 }

package/build/legacy/components/dialog/parts.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/dialog/parts.ts","../../../../src/components/dialog/primitives.tsx"],"sourcesContent":["import type { ElementType } from 'react'\nimport {\n  DialogBackdrop,\n  DialogCloseTrigger,\n  DialogContent,\n  DialogDescription,\n  DialogHeading,\n  DialogPositioner,\n  DialogRoot,\n  DialogTrigger,\n} from './primitives'\n\n/**\n * This module contains the parts of the Dialog component.\n * @module 'dialog/parts'\n */\n\ninterface DialogPartsValue {\n  /**\n   * The context provider of the dialog.\n   */\n  Root: ElementType\n  /**\n   * The trigger that opens the dialog.\n   */\n  Trigger: ElementType\n  /**\n   * The overlay of the dialog.\n   */\n  Backdrop: ElementType\n  /**\n   * The container that positions the dialog.\n   */\n  Positioner: ElementType\n  /**\n   * The visible content of the dialog.\n   */\n  Content: ElementType\n  /**\n   * The heading of the dialog.\n   */\n  Heading: ElementType\n  /**\n   * The description of the dialog.\n   */\n  Description: ElementType\n  /**\n   * The trigger that closes the dialog.\n   */\n  CloseTrigger: ElementType\n}\n\n/**\n * An Object containing the parts of the dialog component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the DialogParts object and\n * the entire family of components vs. only what you use.\n */\nexport const DialogParts: DialogPartsValue = {\n  Root: DialogRoot,\n  Trigger: DialogTrigger,\n  Backdrop: DialogBackdrop,\n  Positioner: DialogPositioner,\n  Content: DialogContent,\n  Heading: DialogHeading,\n  Description: DialogDescription,\n  CloseTrigger: DialogCloseTrigger,\n}\n","import {\n  Dialog,\n  type DialogBackdropProps,\n  type DialogContentProps,\n  type DialogDescriptionProps,\n  type DialogPositionerProps,\n  type DialogRootProps,\n  type DialogTitleProps,\n  type DialogTriggerProps,\n} from '@ark-ui/react/dialog'\nimport { cx } from 'styled-system/css'\nimport { dialog, type DialogVariantProps } from 'styled-system/recipes'\n\n/**\n * This module contains the primitives of the Dialog component.\n * @module 'dialog/primitives'\n */\n\n/**\n * The provider that controls the dialog components.\n */\nexport function DialogRoot(props: DialogRootProps) {\n  return <Dialog.Root {...props} />\n}\n\n/**\n * The trigger that opens the dialog.\n */\nexport function DialogTrigger(props: DialogTriggerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Trigger\n      {...props}\n      className={cx(styles.trigger, props.className)}\n    />\n  )\n}\n\n/**\n * The overlay of the dialog.\n */\nexport function DialogBackdrop(props: DialogBackdropProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Backdrop\n      {...props}\n      className={cx(styles.backdrop, props.className)}\n    />\n  )\n}\n\n/**\n * The container that positions the dialog.\n */\nexport function DialogPositioner(props: DialogPositionerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Positioner\n      {...props}\n      className={cx(styles.positioner, props.className)}\n    />\n  )\n}\n\n/**\n * The visible content of the dialog.\n */\nexport function DialogContent(props: DialogContentProps & DialogVariantProps) {\n  const { size, ...contentProps } = props\n  const styles = dialog({ size })\n  return (\n    <Dialog.Content\n      {...contentProps}\n      className={cx(styles.content, contentProps.className)}\n    />\n  )\n}\n\n/**\n * The heading of the dialog.\n */\nexport function DialogHeading(props: DialogTitleProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Title {...props} className={cx(styles.title, props.className)} />\n  )\n}\n\n/**\n * The description of the dialog.\n */\nexport function DialogDescription(props: DialogDescriptionProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Description\n      {...props}\n      className={cx(styles.description, props.className)}\n    />\n  )\n}\n\n/**\n * The trigger that closes the dialog.\n */\nexport function DialogCloseTrigger(props: DialogTriggerProps) {\n  return <Dialog.CloseTrigger {...props} />\n}\n\n/**\n * The provider that controls the dialog components. This is a named export of\n * the DialogRoot primitive.\n */\nexport const DialogProvider = DialogRoot\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,oBASO;AACP,iBAAmB;AACnB,qBAAgD;AAWvC;AADF,SAAS,WAAW,OAAwB;AACjD,SAAO,4CAAC,qBAAO,MAAP,EAAa,GAAG,OAAO;AACjC;AAKO,SAAS,cAAc,OAA2B;AACvD,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,SAAS,MAAM,SAAS;AAAA;AAAA,EAC/C;AAEJ;AAKO,SAAS,eAAe,OAA4B;AACzD,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,UAAU,MAAM,SAAS;AAAA;AAAA,EAChD;AAEJ;AAKO,SAAS,iBAAiB,OAA8B;AAC7D,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,YAAY,MAAM,SAAS;AAAA;AAAA,EAClD;AAEJ;AAKO,SAAS,cAAc,OAAgD;AAC5E,QAAM,EAAE,MAAM,GAAG,aAAa,IAAI;AAClC,QAAM,aAAS,uBAAO,EAAE,KAAK,CAAC;AAC9B,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,SAAS,aAAa,SAAS;AAAA;AAAA,EACtD;AAEJ;AAKO,SAAS,cAAc,OAAyB;AACrD,QAAM,aAAS,uBAAO;AACtB,SACE,4CAAC,qBAAO,OAAP,EAAc,GAAG,OAAO,eAAW,eAAG,OAAO,OAAO,MAAM,SAAS,GAAG;AAE3E;AAKO,SAAS,kBAAkB,OAA+B;AAC/D,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,aAAa,MAAM,SAAS;AAAA;AAAA,EACnD;AAEJ;AAKO,SAAS,mBAAmB,OAA2B;AAC5D,SAAO,4CAAC,qBAAO,cAAP,EAAqB,GAAG,OAAO;AACzC;;;AD7CO,IAAM,cAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,SAAS;AAAA,EACT,aAAa;AAAA,EACb,cAAc;AAChB;","names":[]}
+{"version":3,"sources":["../../../../src/components/dialog/parts.ts","../../../../src/components/dialog/primitives.tsx"],"sourcesContent":["import type { ElementType } from 'react'\nimport {\n  DialogBackdrop,\n  DialogCloseTrigger,\n  DialogContent,\n  DialogDescription,\n  DialogHeading,\n  DialogPositioner,\n  DialogRoot,\n  DialogTrigger,\n} from './primitives'\n\n/**\n * This module contains the parts of the Dialog component.\n * @module 'dialog/parts'\n */\n\ninterface DialogPartsValue {\n  /**\n   * The context provider of the dialog.\n   */\n  Root: ElementType\n  /**\n   * The trigger that opens the dialog.\n   */\n  Trigger: ElementType\n  /**\n   * The overlay of the dialog.\n   */\n  Backdrop: ElementType\n  /**\n   * The container that positions the dialog.\n   */\n  Positioner: ElementType\n  /**\n   * The visible content of the dialog.\n   */\n  Content: ElementType\n  /**\n   * The heading of the dialog.\n   */\n  Heading: ElementType\n  /**\n   * The description of the dialog.\n   */\n  Description: ElementType\n  /**\n   * The trigger that closes the dialog.\n   */\n  CloseTrigger: ElementType\n}\n\n/**\n * An Object containing the parts of the dialog component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the DialogParts object and\n * the entire family of components vs. only what you use.\n */\nexport const DialogParts: DialogPartsValue = {\n  Root: DialogRoot,\n  Trigger: DialogTrigger,\n  Backdrop: DialogBackdrop,\n  Positioner: DialogPositioner,\n  Content: DialogContent,\n  Heading: DialogHeading,\n  Description: DialogDescription,\n  CloseTrigger: DialogCloseTrigger,\n}\n","import {\n  Dialog,\n  type DialogBackdropProps,\n  type DialogContentProps,\n  type DialogDescriptionProps,\n  type DialogPositionerProps,\n  type DialogRootProps,\n  type DialogTitleProps,\n  type DialogTriggerProps,\n} from '@ark-ui/react/dialog'\nimport { css, cx } from 'styled-system/css'\nimport { dialog, type DialogVariantProps } from 'styled-system/recipes'\nimport type { WithCss } from '../../types'\n\n/**\n * This module contains the primitives of the Dialog component.\n * @module 'dialog/primitives'\n */\n\n/**\n * The provider that controls the dialog components.\n */\nexport function DialogRoot(props: DialogRootProps) {\n  return <Dialog.Root {...props} />\n}\n\n/**\n * The trigger that opens the dialog.\n */\nexport function DialogTrigger(props: DialogTriggerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Trigger\n      {...props}\n      className={cx(styles.trigger, props.className)}\n    />\n  )\n}\n\n/**\n * The overlay of the dialog.\n */\nexport function DialogBackdrop(props: DialogBackdropProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Backdrop\n      {...props}\n      className={cx(styles.backdrop, props.className)}\n    />\n  )\n}\n\n/**\n * The container that positions the dialog.\n */\nexport function DialogPositioner(props: DialogPositionerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Positioner\n      {...props}\n      className={cx(styles.positioner, props.className)}\n    />\n  )\n}\n\n/**\n * The visible content of the dialog.\n */\nexport function DialogContent(\n  props: DialogContentProps & DialogVariantProps & WithCss,\n) {\n  const { size, css: customStyles, ...contentProps } = props\n  const styles = dialog({ size })\n  return (\n    <Dialog.Content\n      {...contentProps}\n      className={cx(styles.content, css(customStyles), contentProps.className)}\n    />\n  )\n}\n\n/**\n * The heading of the dialog.\n */\nexport function DialogHeading(props: DialogTitleProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Title {...props} className={cx(styles.title, props.className)} />\n  )\n}\n\n/**\n * The description of the dialog.\n */\nexport function DialogDescription(props: DialogDescriptionProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Description\n      {...props}\n      className={cx(styles.description, props.className)}\n    />\n  )\n}\n\n/**\n * The trigger that closes the dialog.\n */\nexport function DialogCloseTrigger(props: DialogTriggerProps) {\n  return <Dialog.CloseTrigger {...props} />\n}\n\n/**\n * The provider that controls the dialog components. This is a named export of\n * the DialogRoot primitive.\n */\nexport const DialogProvider = DialogRoot\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,oBASO;AACP,iBAAwB;AACxB,qBAAgD;AAYvC;AADF,SAAS,WAAW,OAAwB;AACjD,SAAO,4CAAC,qBAAO,MAAP,EAAa,GAAG,OAAO;AACjC;AAKO,SAAS,cAAc,OAA2B;AACvD,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,SAAS,MAAM,SAAS;AAAA;AAAA,EAC/C;AAEJ;AAKO,SAAS,eAAe,OAA4B;AACzD,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,UAAU,MAAM,SAAS;AAAA;AAAA,EAChD;AAEJ;AAKO,SAAS,iBAAiB,OAA8B;AAC7D,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,YAAY,MAAM,SAAS;AAAA;AAAA,EAClD;AAEJ;AAKO,SAAS,cACd,OACA;AACA,QAAM,EAAE,MAAM,KAAK,cAAc,GAAG,aAAa,IAAI;AACrD,QAAM,aAAS,uBAAO,EAAE,KAAK,CAAC;AAC9B,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,aAAS,gBAAI,YAAY,GAAG,aAAa,SAAS;AAAA;AAAA,EACzE;AAEJ;AAKO,SAAS,cAAc,OAAyB;AACrD,QAAM,aAAS,uBAAO;AACtB,SACE,4CAAC,qBAAO,OAAP,EAAc,GAAG,OAAO,eAAW,eAAG,OAAO,OAAO,MAAM,SAAS,GAAG;AAE3E;AAKO,SAAS,kBAAkB,OAA+B;AAC/D,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,aAAa,MAAM,SAAS;AAAA;AAAA,EACnD;AAEJ;AAKO,SAAS,mBAAmB,OAA2B;AAC5D,SAAO,4CAAC,qBAAO,cAAP,EAAqB,GAAG,OAAO;AACzC;;;ADhDO,IAAM,cAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,SAAS;AAAA,EACT,aAAa;AAAA,EACb,cAAc;AAChB;","names":[]}

package/build/legacy/components/dialog/primitives.cjs

@@ -69,13 +69,13 @@ function DialogPositioner(props) {
   );
 }
 function DialogContent(props) {
-  const { size, ...contentProps } = props;
+  const { size, css: customStyles, ...contentProps } = props;
   const styles = (0, import_recipes.dialog)({ size });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_dialog.Dialog.Content,
     {
       ...contentProps,
-      className: (0, import_css.cx)(styles.content, contentProps.className)
+      className: (0, import_css.cx)(styles.content, (0, import_css.css)(customStyles), contentProps.className)
     }
   );
 }

package/build/legacy/components/dialog/primitives.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/dialog/primitives.tsx"],"sourcesContent":["import {\n  Dialog,\n  type DialogBackdropProps,\n  type DialogContentProps,\n  type DialogDescriptionProps,\n  type DialogPositionerProps,\n  type DialogRootProps,\n  type DialogTitleProps,\n  type DialogTriggerProps,\n} from '@ark-ui/react/dialog'\nimport { cx } from 'styled-system/css'\nimport { dialog, type DialogVariantProps } from 'styled-system/recipes'\n\n/**\n * This module contains the primitives of the Dialog component.\n * @module 'dialog/primitives'\n */\n\n/**\n * The provider that controls the dialog components.\n */\nexport function DialogRoot(props: DialogRootProps) {\n  return <Dialog.Root {...props} />\n}\n\n/**\n * The trigger that opens the dialog.\n */\nexport function DialogTrigger(props: DialogTriggerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Trigger\n      {...props}\n      className={cx(styles.trigger, props.className)}\n    />\n  )\n}\n\n/**\n * The overlay of the dialog.\n */\nexport function DialogBackdrop(props: DialogBackdropProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Backdrop\n      {...props}\n      className={cx(styles.backdrop, props.className)}\n    />\n  )\n}\n\n/**\n * The container that positions the dialog.\n */\nexport function DialogPositioner(props: DialogPositionerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Positioner\n      {...props}\n      className={cx(styles.positioner, props.className)}\n    />\n  )\n}\n\n/**\n * The visible content of the dialog.\n */\nexport function DialogContent(props: DialogContentProps & DialogVariantProps) {\n  const { size, ...contentProps } = props\n  const styles = dialog({ size })\n  return (\n    <Dialog.Content\n      {...contentProps}\n      className={cx(styles.content, contentProps.className)}\n    />\n  )\n}\n\n/**\n * The heading of the dialog.\n */\nexport function DialogHeading(props: DialogTitleProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Title {...props} className={cx(styles.title, props.className)} />\n  )\n}\n\n/**\n * The description of the dialog.\n */\nexport function DialogDescription(props: DialogDescriptionProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Description\n      {...props}\n      className={cx(styles.description, props.className)}\n    />\n  )\n}\n\n/**\n * The trigger that closes the dialog.\n */\nexport function DialogCloseTrigger(props: DialogTriggerProps) {\n  return <Dialog.CloseTrigger {...props} />\n}\n\n/**\n * The provider that controls the dialog components. This is a named export of\n * the DialogRoot primitive.\n */\nexport const DialogProvider = DialogRoot\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBASO;AACP,iBAAmB;AACnB,qBAAgD;AAWvC;AADF,SAAS,WAAW,OAAwB;AACjD,SAAO,4CAAC,qBAAO,MAAP,EAAa,GAAG,OAAO;AACjC;AAKO,SAAS,cAAc,OAA2B;AACvD,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,SAAS,MAAM,SAAS;AAAA;AAAA,EAC/C;AAEJ;AAKO,SAAS,eAAe,OAA4B;AACzD,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,UAAU,MAAM,SAAS;AAAA;AAAA,EAChD;AAEJ;AAKO,SAAS,iBAAiB,OAA8B;AAC7D,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,YAAY,MAAM,SAAS;AAAA;AAAA,EAClD;AAEJ;AAKO,SAAS,cAAc,OAAgD;AAC5E,QAAM,EAAE,MAAM,GAAG,aAAa,IAAI;AAClC,QAAM,aAAS,uBAAO,EAAE,KAAK,CAAC;AAC9B,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,SAAS,aAAa,SAAS;AAAA;AAAA,EACtD;AAEJ;AAKO,SAAS,cAAc,OAAyB;AACrD,QAAM,aAAS,uBAAO;AACtB,SACE,4CAAC,qBAAO,OAAP,EAAc,GAAG,OAAO,eAAW,eAAG,OAAO,OAAO,MAAM,SAAS,GAAG;AAE3E;AAKO,SAAS,kBAAkB,OAA+B;AAC/D,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,aAAa,MAAM,SAAS;AAAA;AAAA,EACnD;AAEJ;AAKO,SAAS,mBAAmB,OAA2B;AAC5D,SAAO,4CAAC,qBAAO,cAAP,EAAqB,GAAG,OAAO;AACzC;AAMO,IAAM,iBAAiB;","names":[]}
+{"version":3,"sources":["../../../../src/components/dialog/primitives.tsx"],"sourcesContent":["import {\n  Dialog,\n  type DialogBackdropProps,\n  type DialogContentProps,\n  type DialogDescriptionProps,\n  type DialogPositionerProps,\n  type DialogRootProps,\n  type DialogTitleProps,\n  type DialogTriggerProps,\n} from '@ark-ui/react/dialog'\nimport { css, cx } from 'styled-system/css'\nimport { dialog, type DialogVariantProps } from 'styled-system/recipes'\nimport type { WithCss } from '../../types'\n\n/**\n * This module contains the primitives of the Dialog component.\n * @module 'dialog/primitives'\n */\n\n/**\n * The provider that controls the dialog components.\n */\nexport function DialogRoot(props: DialogRootProps) {\n  return <Dialog.Root {...props} />\n}\n\n/**\n * The trigger that opens the dialog.\n */\nexport function DialogTrigger(props: DialogTriggerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Trigger\n      {...props}\n      className={cx(styles.trigger, props.className)}\n    />\n  )\n}\n\n/**\n * The overlay of the dialog.\n */\nexport function DialogBackdrop(props: DialogBackdropProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Backdrop\n      {...props}\n      className={cx(styles.backdrop, props.className)}\n    />\n  )\n}\n\n/**\n * The container that positions the dialog.\n */\nexport function DialogPositioner(props: DialogPositionerProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Positioner\n      {...props}\n      className={cx(styles.positioner, props.className)}\n    />\n  )\n}\n\n/**\n * The visible content of the dialog.\n */\nexport function DialogContent(\n  props: DialogContentProps & DialogVariantProps & WithCss,\n) {\n  const { size, css: customStyles, ...contentProps } = props\n  const styles = dialog({ size })\n  return (\n    <Dialog.Content\n      {...contentProps}\n      className={cx(styles.content, css(customStyles), contentProps.className)}\n    />\n  )\n}\n\n/**\n * The heading of the dialog.\n */\nexport function DialogHeading(props: DialogTitleProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Title {...props} className={cx(styles.title, props.className)} />\n  )\n}\n\n/**\n * The description of the dialog.\n */\nexport function DialogDescription(props: DialogDescriptionProps) {\n  const styles = dialog()\n  return (\n    <Dialog.Description\n      {...props}\n      className={cx(styles.description, props.className)}\n    />\n  )\n}\n\n/**\n * The trigger that closes the dialog.\n */\nexport function DialogCloseTrigger(props: DialogTriggerProps) {\n  return <Dialog.CloseTrigger {...props} />\n}\n\n/**\n * The provider that controls the dialog components. This is a named export of\n * the DialogRoot primitive.\n */\nexport const DialogProvider = DialogRoot\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBASO;AACP,iBAAwB;AACxB,qBAAgD;AAYvC;AADF,SAAS,WAAW,OAAwB;AACjD,SAAO,4CAAC,qBAAO,MAAP,EAAa,GAAG,OAAO;AACjC;AAKO,SAAS,cAAc,OAA2B;AACvD,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,SAAS,MAAM,SAAS;AAAA;AAAA,EAC/C;AAEJ;AAKO,SAAS,eAAe,OAA4B;AACzD,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,UAAU,MAAM,SAAS;AAAA;AAAA,EAChD;AAEJ;AAKO,SAAS,iBAAiB,OAA8B;AAC7D,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,YAAY,MAAM,SAAS;AAAA;AAAA,EAClD;AAEJ;AAKO,SAAS,cACd,OACA;AACA,QAAM,EAAE,MAAM,KAAK,cAAc,GAAG,aAAa,IAAI;AACrD,QAAM,aAAS,uBAAO,EAAE,KAAK,CAAC;AAC9B,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,aAAS,gBAAI,YAAY,GAAG,aAAa,SAAS;AAAA;AAAA,EACzE;AAEJ;AAKO,SAAS,cAAc,OAAyB;AACrD,QAAM,aAAS,uBAAO;AACtB,SACE,4CAAC,qBAAO,OAAP,EAAc,GAAG,OAAO,eAAW,eAAG,OAAO,OAAO,MAAM,SAAS,GAAG;AAE3E;AAKO,SAAS,kBAAkB,OAA+B;AAC/D,QAAM,aAAS,uBAAO;AACtB,SACE;AAAA,IAAC,qBAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,aAAa,MAAM,SAAS;AAAA;AAAA,EACnD;AAEJ;AAKO,SAAS,mBAAmB,OAA2B;AAC5D,SAAO,4CAAC,qBAAO,cAAP,EAAqB,GAAG,OAAO;AACzC;AAMO,IAAM,iBAAiB;","names":[]}

package/build/legacy/components/field/field.cjs

@@ -70,7 +70,6 @@ function FieldLabel(props) {
 }
 function FieldHelperText(props) {
   const styles = (0, import_recipes.field)();
-  if (!props.children) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_field.Field.HelperText,
     {
@@ -107,22 +106,29 @@ function Show(props) {
   return null;
 }
 
-// src/components/field/field.tsx
+// src/components/field/helper-text.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+function HelperText(props) {
+  if (props.invalid) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldHelperText, { "data-has-content": Boolean(props.children), children: props.children });
+}
+
+// src/components/field/field.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function Field2(props) {
   const [statusProps, fieldProps, rootProps] = splitProps(
     props,
     ["disabled", "required", "readOnly", "invalid"],
     ["label", "helperText", "secondaryHelperText", "errorText", "children"]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(FieldRoot, { ...statusProps, ...rootProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: fieldProps.label, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldLabel, { children: fieldProps.label }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(FieldRoot, { ...statusProps, ...rootProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: fieldProps.label, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldLabel, { children: fieldProps.label }) }),
     fieldProps.children,
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: fieldProps.helperText && !statusProps.invalid, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx.HStack, { justifyContent: "space-between", w: "full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldHelperText, { children: fieldProps.helperText }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: fieldProps.secondaryHelperText, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldHelperText, { children: fieldProps.secondaryHelperText }) })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldErrorText, { children: fieldProps.errorText })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx.HStack, { justifyContent: "space-between", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HelperText, { invalid: statusProps.invalid, children: fieldProps.helperText }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldErrorText, { children: fieldProps.errorText }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: fieldProps.secondaryHelperText, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldHelperText, { children: fieldProps.secondaryHelperText }) })
+    ] })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/field/field.tsx","../../../../src/utils/index.ts","../../../../src/components/field/primitives.tsx","../../../../src/components/Show.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 '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={fieldProps.label}>\n        <FieldLabel>{fieldProps.label}</FieldLabel>\n      </Show>\n\n      {fieldProps.children}\n\n      <Show when={fieldProps.helperText && !statusProps.invalid}>\n        <HStack justifyContent=\"space-between\" w=\"full\">\n          <FieldHelperText>{fieldProps.helperText}</FieldHelperText>\n          <Show when={fieldProps.secondaryHelperText}>\n            <FieldHelperText>{fieldProps.secondaryHelperText}</FieldHelperText>\n          </Show>\n        </HStack>\n      </Show>\n\n      <FieldErrorText>{fieldProps.errorText}</FieldErrorText>\n    </FieldRoot>\n  )\n}\n","/**\n * This module contains utility functions that are used across your app.\n * @module Utils\n */\n\n/**\n * Formats the count of notifications to be displayed in the notification badge.\n * @param count - The number of notifications.\n * @returns The formatted count of notifications.\n * @example\n * ```tsx\n * const count = formatNotifyCount(100)\n * console.log(count) // '99+'\n * ```\n */\nexport function formatNotifyCount(count: number): string {\n  if (count > 99) return '99+'\n  return count.toString()\n}\n\n/**\n * Splits the properties of an object into multiple groups based on lists of keys.\n * @param props - The object to split.\n * @param keyGroups - The lists of keys to include in each group.\n * @returns An array of objects: each containing the properties specified in the corresponding key group, and the last object containing the remaining keys.\n */\nexport function splitProps<T extends object>(\n  props: T,\n  ...keyGroups: (keyof T)[][]\n): { [K in keyof T]?: T[K] }[] {\n  const result = keyGroups.map(() => ({}) as { [K in keyof T]?: T[K] })\n  const rest = {} as { [K in keyof T]?: T[K] }\n\n  for (const key in props) {\n    let assigned = false\n    for (let i = 0; i < keyGroups.length; i++) {\n      if (keyGroups[i].includes(key as keyof T)) {\n        result[i][key as keyof T] = props[key]\n        assigned = true\n        break\n      }\n    }\n    if (!assigned) {\n      rest[key as keyof T] = props[key]\n    }\n  }\n\n  return [...result, rest]\n}\n\nexport * from './localStorage'\n","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 'styled-system/css'\nimport { field, type FieldVariantProps } from '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","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: T | 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<T>(props: PropsWithChildren<ShowProps<T>>) {\n  const { when, children, fallback } = props\n\n  if (when) {\n    return <>{children}</>\n  }\n\n  if (fallback) {\n    return <>{fallback}</>\n  }\n\n  return null\n}\n"],"mappings":"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","names":["Field","import_jsx_runtime","import_jsx_runtime","Field"]}
+{"version":3,"sources":["../../../../src/components/field/field.tsx","../../../../src/utils/index.ts","../../../../src/components/field/primitives.tsx","../../../../src/components/Show.tsx","../../../../src/components/field/helper-text.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 'styled-system/jsx'\nimport { Show } from '../Show'\nimport { HelperText } from './helper-text'\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={fieldProps.label}>\n        <FieldLabel>{fieldProps.label}</FieldLabel>\n      </Show>\n\n      {fieldProps.children}\n\n      <HStack justifyContent=\"space-between\" w=\"full\">\n        <HelperText invalid={statusProps.invalid}>\n          {fieldProps.helperText}\n        </HelperText>\n\n        <FieldErrorText>{fieldProps.errorText}</FieldErrorText>\n\n        <Show when={fieldProps.secondaryHelperText}>\n          <FieldHelperText>{fieldProps.secondaryHelperText}</FieldHelperText>\n        </Show>\n      </HStack>\n    </FieldRoot>\n  )\n}\n","/**\n * This module contains utility functions that are used across your app.\n * @module Utils\n */\n\n/**\n * Formats the count of notifications to be displayed in the notification badge.\n * @param count - The number of notifications.\n * @returns The formatted count of notifications.\n * @example\n * ```tsx\n * const count = formatNotifyCount(100)\n * console.log(count) // '99+'\n * ```\n */\nexport function formatNotifyCount(count: number): string {\n  if (count > 99) return '99+'\n  return count.toString()\n}\n\n/**\n * Splits the properties of an object into multiple groups based on lists of keys.\n * @param props - The object to split.\n * @param keyGroups - The lists of keys to include in each group.\n * @returns An array of objects: each containing the properties specified in the corresponding key group, and the last object containing the remaining keys.\n */\nexport function splitProps<T extends object>(\n  props: T,\n  ...keyGroups: (keyof T)[][]\n): { [K in keyof T]?: T[K] }[] {\n  const result = keyGroups.map(() => ({}) as { [K in keyof T]?: T[K] })\n  const rest = {} as { [K in keyof T]?: T[K] }\n\n  for (const key in props) {\n    let assigned = false\n    for (let i = 0; i < keyGroups.length; i++) {\n      if (keyGroups[i].includes(key as keyof T)) {\n        result[i][key as keyof T] = props[key]\n        assigned = true\n        break\n      }\n    }\n    if (!assigned) {\n      rest[key as keyof T] = props[key]\n    }\n  }\n\n  return [...result, rest]\n}\n\nexport * from './localStorage'\n","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 'styled-system/css'\nimport { field, type FieldVariantProps } from '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  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","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: T | 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<T>(props: PropsWithChildren<ShowProps<T>>) {\n  const { when, children, fallback } = props\n\n  if (when) {\n    return <>{children}</>\n  }\n\n  if (fallback) {\n    return <>{fallback}</>\n  }\n\n  return null\n}\n","import type { PropsWithChildren } from 'react'\nimport { FieldHelperText } from './primitives'\n\ninterface HelperTextProps {\n  invalid?: boolean\n}\n\n/**\n * The HelperText component is an abstraction for hiding the helper text\n * when the field is invalid. Ark UI assumes people want the helper text\n * to always be visible, so this is a workaround for that.\n */\nexport function HelperText(props: PropsWithChildren<HelperTextProps>) {\n  if (props.invalid) return null\n  return (\n    <FieldHelperText data-has-content={Boolean(props.children)}>\n      {props.children}\n    </FieldHelperText>\n  )\n}\n"],"mappings":"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","names":["Field","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","Field"]}

package/build/legacy/components/field/helper-text.cjs

@@ -0,0 +1,53 @@
+"use strict";
+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/field/helper-text.tsx
+var helper_text_exports = {};
+__export(helper_text_exports, {
+  HelperText: () => HelperText
+});
+module.exports = __toCommonJS(helper_text_exports);
+
+// src/components/field/primitives.tsx
+var import_field = require("@ark-ui/react/field");
+var import_css = require("styled-system/css");
+var import_recipes = require("styled-system/recipes");
+var import_jsx_runtime = require("react/jsx-runtime");
+function FieldHelperText(props) {
+  const styles = (0, import_recipes.field)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_field.Field.HelperText,
+    {
+      ...props,
+      className: (0, import_css.cx)(styles.helperText, props.className)
+    }
+  );
+}
+
+// src/components/field/helper-text.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function HelperText(props) {
+  if (props.invalid) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FieldHelperText, { "data-has-content": Boolean(props.children), children: props.children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HelperText
+});
+//# sourceMappingURL=helper-text.cjs.map

package/build/legacy/components/field/helper-text.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/field/helper-text.tsx","../../../../src/components/field/primitives.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { FieldHelperText } from './primitives'\n\ninterface HelperTextProps {\n  invalid?: boolean\n}\n\n/**\n * The HelperText component is an abstraction for hiding the helper text\n * when the field is invalid. Ark UI assumes people want the helper text\n * to always be visible, so this is a workaround for that.\n */\nexport function HelperText(props: PropsWithChildren<HelperTextProps>) {\n  if (props.invalid) return null\n  return (\n    <FieldHelperText data-has-content={Boolean(props.children)}>\n      {props.children}\n    </FieldHelperText>\n  )\n}\n","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 'styled-system/css'\nimport { field, type FieldVariantProps } from '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  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;AAAA;AAAA;AAAA;;;ACAA,mBAOO;AAEP,iBAAmB;AACnB,qBAA8C;AA0B1C;AAwFG,SAAS,gBAAgB,OAA6B;AAC3D,QAAM,aAAS,sBAAM;AACrB,SACE;AAAA,IAAC,mBAAM;AAAA,IAAN;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,YAAY,MAAM,SAAS;AAAA;AAAA,EAClD;AAEJ;;;ADrHI,IAAAA,sBAAA;AAHG,SAAS,WAAW,OAA2C;AACpE,MAAI,MAAM,QAAS,QAAO;AAC1B,SACE,6CAAC,mBAAgB,oBAAkB,QAAQ,MAAM,QAAQ,GACtD,gBAAM,UACT;AAEJ;","names":["import_jsx_runtime"]}

package/build/legacy/components/field/helper-text.d.cts

@@ -0,0 +1 @@
+export { HelperText } from '../../_tsup-dts-rollup.cjs';

package/build/legacy/components/field/index.cjs

@@ -170,7 +170,6 @@ function FieldInput(props) {
 }
 function FieldHelperText(props) {
   const styles = (0, import_recipes3.field)();
-  if (!props.children) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_field.Field.HelperText,
     {
@@ -219,22 +218,29 @@ function Show(props) {
   return null;
 }
 
-// src/components/field/field.tsx
+// src/components/field/helper-text.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
+function HelperText(props) {
+  if (props.invalid) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FieldHelperText, { "data-has-content": Boolean(props.children), children: props.children });
+}
+
+// src/components/field/field.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function Field2(props) {
   const [statusProps, fieldProps, rootProps] = splitProps(
     props,
     ["disabled", "required", "readOnly", "invalid"],
     ["label", "helperText", "secondaryHelperText", "errorText", "children"]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(FieldRoot, { ...statusProps, ...rootProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Show, { when: fieldProps.label, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FieldLabel, { children: fieldProps.label }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FieldRoot, { ...statusProps, ...rootProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Show, { when: fieldProps.label, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FieldLabel, { children: fieldProps.label }) }),
     fieldProps.children,
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Show, { when: fieldProps.helperText && !statusProps.invalid, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx.HStack, { justifyContent: "space-between", w: "full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FieldHelperText, { children: fieldProps.helperText }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Show, { when: fieldProps.secondaryHelperText, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FieldHelperText, { children: fieldProps.secondaryHelperText }) })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(FieldErrorText, { children: fieldProps.errorText })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx.HStack, { justifyContent: "space-between", w: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HelperText, { invalid: statusProps.invalid, children: fieldProps.helperText }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FieldErrorText, { children: fieldProps.errorText }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Show, { when: fieldProps.secondaryHelperText, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FieldHelperText, { children: fieldProps.secondaryHelperText }) })
+    ] })
   ] });
 }
 

package/build/legacy/components/field/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/field/index.ts","../../../../src/utils/index.ts","../../../../src/components/field/primitives.tsx","../../../../src/components/field/status-indicator.tsx","../../../../src/context/cerberus.tsx","../../../../src/components/field/start-indicator.tsx","../../../../src/components/field/field.tsx","../../../../src/components/Show.tsx","../../../../src/components/field/parts.ts"],"sourcesContent":["export * from './field'\nexport * from './primitives'\nexport * from './start-indicator'\nexport * from './status-indicator'\nexport * from './parts'\n","/**\n * This module contains utility functions that are used across your app.\n * @module Utils\n */\n\n/**\n * Formats the count of notifications to be displayed in the notification badge.\n * @param count - The number of notifications.\n * @returns The formatted count of notifications.\n * @example\n * ```tsx\n * const count = formatNotifyCount(100)\n * console.log(count) // '99+'\n * ```\n */\nexport function formatNotifyCount(count: number): string {\n  if (count > 99) return '99+'\n  return count.toString()\n}\n\n/**\n * Splits the properties of an object into multiple groups based on lists of keys.\n * @param props - The object to split.\n * @param keyGroups - The lists of keys to include in each group.\n * @returns An array of objects: each containing the properties specified in the corresponding key group, and the last object containing the remaining keys.\n */\nexport function splitProps<T extends object>(\n  props: T,\n  ...keyGroups: (keyof T)[][]\n): { [K in keyof T]?: T[K] }[] {\n  const result = keyGroups.map(() => ({}) as { [K in keyof T]?: T[K] })\n  const rest = {} as { [K in keyof T]?: T[K] }\n\n  for (const key in props) {\n    let assigned = false\n    for (let i = 0; i < keyGroups.length; i++) {\n      if (keyGroups[i].includes(key as keyof T)) {\n        result[i][key as keyof T] = props[key]\n        assigned = true\n        break\n      }\n    }\n    if (!assigned) {\n      rest[key as keyof T] = props[key]\n    }\n  }\n\n  return [...result, rest]\n}\n\nexport * from './localStorage'\n","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 'styled-system/css'\nimport { field, type FieldVariantProps } from '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","'use client'\n\nimport { useFieldContext } from '@ark-ui/react'\nimport { cx } from 'styled-system/css'\nimport { field } from 'styled-system/recipes'\nimport { useCerberusContext } from '../../context/cerberus'\nimport type { HTMLAttributes, ReactNode } from 'react'\n\nexport interface FieldStatusIndicatorProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The fallback content to display when the field is valid.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * The invalid status indicator for the Field component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldStatusIndicator />\n * </FieldRoot>\n * ```\n */\nexport function FieldStatusIndicator(props: FieldStatusIndicatorProps) {\n  const { fallback, ...nativeProps } = props\n  const styles = field()\n  const fieldContext = useFieldContext()\n\n  const { icons } = useCerberusContext()\n  const { invalid: InvalidIcon } = icons\n\n  if (fieldContext.invalid) {\n    return (\n      <span\n        {...nativeProps}\n        aria-hidden=\"true\"\n        data-invalid\n        className={cx(nativeProps.className, styles.statusIndicator)}\n      >\n        <InvalidIcon />\n      </span>\n    )\n  }\n\n  return (\n    <span\n      {...nativeProps}\n      aria-hidden=\"true\"\n      data-part=\"end-indicator\"\n      className={cx(nativeProps.className, styles.endIndicator)}\n    >\n      {fallback}\n    </span>\n  )\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n","import { cx } from 'styled-system/css'\nimport { field } from 'styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\nexport type FieldIndicatorProps = HTMLAttributes<HTMLSpanElement>\n\n/**\n * The start indicator displays an indicator at the start of the Input.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n */\nexport function FieldStartIndicator(props: FieldIndicatorProps) {\n  const styles = field()\n\n  if (!props.children) return null\n\n  return (\n    <span\n      {...props}\n      data-part=\"start-indicator\"\n      className={cx(props.className, styles.startIndicator)}\n    />\n  )\n}\n","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 '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={fieldProps.label}>\n        <FieldLabel>{fieldProps.label}</FieldLabel>\n      </Show>\n\n      {fieldProps.children}\n\n      <Show when={fieldProps.helperText && !statusProps.invalid}>\n        <HStack justifyContent=\"space-between\" w=\"full\">\n          <FieldHelperText>{fieldProps.helperText}</FieldHelperText>\n          <Show when={fieldProps.secondaryHelperText}>\n            <FieldHelperText>{fieldProps.secondaryHelperText}</FieldHelperText>\n          </Show>\n        </HStack>\n      </Show>\n\n      <FieldErrorText>{fieldProps.errorText}</FieldErrorText>\n    </FieldRoot>\n  )\n}\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: T | 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<T>(props: PropsWithChildren<ShowProps<T>>) {\n  const { when, children, fallback } = props\n\n  if (when) {\n    return <>{children}</>\n  }\n\n  if (fallback) {\n    return <>{fallback}</>\n  }\n\n  return null\n}\n","import type { ElementType } from 'react'\nimport {\n  FieldErrorText,\n  FieldHelperText,\n  FieldInput,\n  FieldLabel,\n  FieldRequiredIndicator,\n  FieldRoot,\n  FieldTextarea,\n} from './primitives'\nimport { FieldStatusIndicator } from './status-indicator'\nimport { FieldStartIndicator } from './start-indicator'\n\n/**\n * This module contains the parts of the Field component.\n * @module 'field/parts'\n */\n\ninterface FieldPartsValue {\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 input of the field.\n   */\n  Input: ElementType\n  /**\n   * The textarea of the field.\n   */\n  Textarea: ElementType\n  /**\n   * The text that displays when the field is valid.\n   */\n  HelperText: ElementType\n  /**\n   * The text that displays when the field is invalid.\n   */\n  ErrorText: ElementType\n  /**\n   * The indicator that appears at the start of the field.\n   */\n  StartIndicator: ElementType\n  /**\n   * The status indicator of the field.\n   */\n  StatusIndicator: ElementType\n  /**\n   * The indicator that appears at the end of the field.\n   */\n  RequiredIndicator: ElementType\n}\n\n/**\n * An Object containing the parts of the Field component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the FieldParts object and\n * the entire family of components vs. only what you use.\n */\nexport const FieldParts: FieldPartsValue = {\n  Root: FieldRoot,\n  Label: FieldLabel,\n  Input: FieldInput,\n  Textarea: FieldTextarea,\n  HelperText: FieldHelperText,\n  ErrorText: FieldErrorText,\n  StartIndicator: FieldStartIndicator,\n  StatusIndicator: FieldStatusIndicator,\n  RequiredIndicator: FieldRequiredIndicator,\n}\n"],"mappings":"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","names":["Field","import_css","import_recipes","import_react","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","Field"]}
+{"version":3,"sources":["../../../../src/components/field/index.ts","../../../../src/utils/index.ts","../../../../src/components/field/primitives.tsx","../../../../src/components/field/status-indicator.tsx","../../../../src/context/cerberus.tsx","../../../../src/components/field/start-indicator.tsx","../../../../src/components/field/field.tsx","../../../../src/components/Show.tsx","../../../../src/components/field/helper-text.tsx","../../../../src/components/field/parts.ts"],"sourcesContent":["export * from './field'\nexport * from './primitives'\nexport * from './start-indicator'\nexport * from './status-indicator'\nexport * from './parts'\n","/**\n * This module contains utility functions that are used across your app.\n * @module Utils\n */\n\n/**\n * Formats the count of notifications to be displayed in the notification badge.\n * @param count - The number of notifications.\n * @returns The formatted count of notifications.\n * @example\n * ```tsx\n * const count = formatNotifyCount(100)\n * console.log(count) // '99+'\n * ```\n */\nexport function formatNotifyCount(count: number): string {\n  if (count > 99) return '99+'\n  return count.toString()\n}\n\n/**\n * Splits the properties of an object into multiple groups based on lists of keys.\n * @param props - The object to split.\n * @param keyGroups - The lists of keys to include in each group.\n * @returns An array of objects: each containing the properties specified in the corresponding key group, and the last object containing the remaining keys.\n */\nexport function splitProps<T extends object>(\n  props: T,\n  ...keyGroups: (keyof T)[][]\n): { [K in keyof T]?: T[K] }[] {\n  const result = keyGroups.map(() => ({}) as { [K in keyof T]?: T[K] })\n  const rest = {} as { [K in keyof T]?: T[K] }\n\n  for (const key in props) {\n    let assigned = false\n    for (let i = 0; i < keyGroups.length; i++) {\n      if (keyGroups[i].includes(key as keyof T)) {\n        result[i][key as keyof T] = props[key]\n        assigned = true\n        break\n      }\n    }\n    if (!assigned) {\n      rest[key as keyof T] = props[key]\n    }\n  }\n\n  return [...result, rest]\n}\n\nexport * from './localStorage'\n","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 'styled-system/css'\nimport { field, type FieldVariantProps } from '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  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","'use client'\n\nimport { useFieldContext } from '@ark-ui/react'\nimport { cx } from 'styled-system/css'\nimport { field } from 'styled-system/recipes'\nimport { useCerberusContext } from '../../context/cerberus'\nimport type { HTMLAttributes, ReactNode } from 'react'\n\nexport interface FieldStatusIndicatorProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The fallback content to display when the field is valid.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * The invalid status indicator for the Field component.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n * @example\n * ```tsx\n * <FieldRoot>\n *   <FieldStatusIndicator />\n * </FieldRoot>\n * ```\n */\nexport function FieldStatusIndicator(props: FieldStatusIndicatorProps) {\n  const { fallback, ...nativeProps } = props\n  const styles = field()\n  const fieldContext = useFieldContext()\n\n  const { icons } = useCerberusContext()\n  const { invalid: InvalidIcon } = icons\n\n  if (fieldContext.invalid) {\n    return (\n      <span\n        {...nativeProps}\n        aria-hidden=\"true\"\n        data-invalid\n        className={cx(nativeProps.className, styles.statusIndicator)}\n      >\n        <InvalidIcon />\n      </span>\n    )\n  }\n\n  return (\n    <span\n      {...nativeProps}\n      aria-hidden=\"true\"\n      data-part=\"end-indicator\"\n      className={cx(nativeProps.className, styles.endIndicator)}\n    >\n      {fallback}\n    </span>\n  )\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n","import { cx } from 'styled-system/css'\nimport { field } from 'styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\nexport type FieldIndicatorProps = HTMLAttributes<HTMLSpanElement>\n\n/**\n * The start indicator displays an indicator at the start of the Input.\n * @description [Field Docs](https://cerberus.digitalu.design/react/field)\n */\nexport function FieldStartIndicator(props: FieldIndicatorProps) {\n  const styles = field()\n\n  if (!props.children) return null\n\n  return (\n    <span\n      {...props}\n      data-part=\"start-indicator\"\n      className={cx(props.className, styles.startIndicator)}\n    />\n  )\n}\n","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 'styled-system/jsx'\nimport { Show } from '../Show'\nimport { HelperText } from './helper-text'\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={fieldProps.label}>\n        <FieldLabel>{fieldProps.label}</FieldLabel>\n      </Show>\n\n      {fieldProps.children}\n\n      <HStack justifyContent=\"space-between\" w=\"full\">\n        <HelperText invalid={statusProps.invalid}>\n          {fieldProps.helperText}\n        </HelperText>\n\n        <FieldErrorText>{fieldProps.errorText}</FieldErrorText>\n\n        <Show when={fieldProps.secondaryHelperText}>\n          <FieldHelperText>{fieldProps.secondaryHelperText}</FieldHelperText>\n        </Show>\n      </HStack>\n    </FieldRoot>\n  )\n}\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: T | 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<T>(props: PropsWithChildren<ShowProps<T>>) {\n  const { when, children, fallback } = props\n\n  if (when) {\n    return <>{children}</>\n  }\n\n  if (fallback) {\n    return <>{fallback}</>\n  }\n\n  return null\n}\n","import type { PropsWithChildren } from 'react'\nimport { FieldHelperText } from './primitives'\n\ninterface HelperTextProps {\n  invalid?: boolean\n}\n\n/**\n * The HelperText component is an abstraction for hiding the helper text\n * when the field is invalid. Ark UI assumes people want the helper text\n * to always be visible, so this is a workaround for that.\n */\nexport function HelperText(props: PropsWithChildren<HelperTextProps>) {\n  if (props.invalid) return null\n  return (\n    <FieldHelperText data-has-content={Boolean(props.children)}>\n      {props.children}\n    </FieldHelperText>\n  )\n}\n","import type { ElementType } from 'react'\nimport {\n  FieldErrorText,\n  FieldHelperText,\n  FieldInput,\n  FieldLabel,\n  FieldRequiredIndicator,\n  FieldRoot,\n  FieldTextarea,\n} from './primitives'\nimport { FieldStatusIndicator } from './status-indicator'\nimport { FieldStartIndicator } from './start-indicator'\n\n/**\n * This module contains the parts of the Field component.\n * @module 'field/parts'\n */\n\ninterface FieldPartsValue {\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 input of the field.\n   */\n  Input: ElementType\n  /**\n   * The textarea of the field.\n   */\n  Textarea: ElementType\n  /**\n   * The text that displays when the field is valid.\n   */\n  HelperText: ElementType\n  /**\n   * The text that displays when the field is invalid.\n   */\n  ErrorText: ElementType\n  /**\n   * The indicator that appears at the start of the field.\n   */\n  StartIndicator: ElementType\n  /**\n   * The status indicator of the field.\n   */\n  StatusIndicator: ElementType\n  /**\n   * The indicator that appears at the end of the field.\n   */\n  RequiredIndicator: ElementType\n}\n\n/**\n * An Object containing the parts of the Field component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the FieldParts object and\n * the entire family of components vs. only what you use.\n */\nexport const FieldParts: FieldPartsValue = {\n  Root: FieldRoot,\n  Label: FieldLabel,\n  Input: FieldInput,\n  Textarea: FieldTextarea,\n  HelperText: FieldHelperText,\n  ErrorText: FieldErrorText,\n  StartIndicator: FieldStartIndicator,\n  StatusIndicator: FieldStatusIndicator,\n  RequiredIndicator: FieldRequiredIndicator,\n}\n"],"mappings":"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","names":["Field","import_css","import_recipes","import_react","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","Field"]}

package/build/legacy/components/field/parts.cjs

@@ -138,7 +138,6 @@ function FieldInput(props) {
 }
 function FieldHelperText(props) {
   const styles = (0, import_recipes3.field)();
-  if (!props.children) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_field.Field.HelperText,
     {