@cerberus-design/react 0.15.0-next-e0ce56e → 0.15.0-next-739c492

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

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

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

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

package/build/modern/{chunk-Q4IV5NUT.js → chunk-GNPGG4ND.js}

@@ -1,21 +1,17 @@
 import {
   Text
 } from "./chunk-RU5LOXWI.js";
-import {
-  Label
-} from "./chunk-NMF2HYWO.js";
-import {
-  Input
-} from "./chunk-VYCU7I4J.js";
-import {
-  Field
-} from "./chunk-UZDVOIW5.js";
 import {
   Dialog,
   DialogDescription,
   DialogHeading,
   DialogProvider
 } from "./chunk-TFL56AYR.js";
+import {
+  FieldLabel,
+  FieldRoot,
+  Input
+} from "./chunk-C5NL3X7W.js";
 import {
   Avatar
 } from "./chunk-SXLPDPOZ.js";
@@ -24,7 +20,7 @@ import {
 } from "./chunk-GITT5645.js";
 import {
   Button
-} from "./chunk-MER66QUY.js";
+} from "./chunk-6KZVE4HC.js";
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
@@ -38,10 +34,10 @@ import {
   useRef,
   useState
 } from "react";
+import { DialogCloseTrigger } from "@ark-ui/react";
+import { HStack, VStack } from "@cerberus/styled-system/jsx";
 import { css } from "@cerberus/styled-system/css";
 import { hstack } from "@cerberus/styled-system/patterns";
-import { HStack, VStack } from "@cerberus/styled-system/jsx";
-import { DialogCloseTrigger } from "@ark-ui/react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var PromptModalContext = createContext(null);
 function PromptModal(props) {
@@ -138,33 +134,34 @@ function PromptModal(props) {
           marginBlockStart: "md",
           marginBlockEnd: "lg",
           w: "full",
-          children: /* @__PURE__ */ jsxs(Field, { invalid: !isValid, children: [
-            /* @__PURE__ */ jsxs(
-              Label,
-              {
-                className: hstack({
-                  gap: "xs",
-                  justify: "flex-start !important"
-                }),
-                htmlFor: "confirm",
-                size: "md",
-                children: [
-                  "Type",
-                  /* @__PURE__ */ jsx(Text, { as: "strong", textTransform: "uppercase", children: content?.key }),
-                  "to confirm"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "confirm",
-                name: "confirm",
-                onChange: handleChange,
-                type: "text"
-              }
-            )
-          ] })
+          children: /* @__PURE__ */ jsxs(
+            FieldRoot,
+            {
+              ids: {
+                control: "confirm"
+              },
+              invalid: !isValid,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  FieldLabel,
+                  {
+                    className: hstack({
+                      gap: "xs",
+                      justify: "flex-start !important",
+                      marginBlockEnd: "xs",
+                      textStyle: "label-md"
+                    }),
+                    children: [
+                      "Type",
+                      /* @__PURE__ */ jsx(Text, { as: "strong", textTransform: "uppercase", children: content?.key }),
+                      "to confirm"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(Input, { name: "confirm", onChange: handleChange, type: "text" })
+              ]
+            }
+          )
         }
       ),
       /* @__PURE__ */ jsxs(HStack, { gap: "md", justify: "stretch", w: "full", children: [
@@ -212,4 +209,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-Q4IV5NUT.js.map
+//# sourceMappingURL=chunk-GNPGG4ND.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/prompt-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type MouseEvent,\n  type PropsWithChildren,\n} from 'react'\nimport { DialogCloseTrigger } from '@ark-ui/react'\nimport { HStack, VStack } from '@cerberus/styled-system/jsx'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { FieldLabel, FieldRoot, Input } from '../components/field/index'\nimport { Button } from '../components/button/button'\nimport { Show } from '../components/Show'\nimport { Avatar } from '../components/Avatar'\nimport { Text } from '../components/Text'\nimport { useCerberusContext } from './cerberus'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogHeading,\n  DialogProvider,\n} from '../components/Dialog'\n\n/**\n * This module provides a context and hook for the prompt modal.\n * @module PromptModal\n */\n\nexport interface ShowPromptModalOptions {\n  /**\n   * The kind of prompt modal to show.\n   * @default 'non-destructive'\n   */\n  kind?: 'destructive' | 'non-destructive'\n  /**\n   * The heading of the prompt modal.\n   */\n  heading: string\n  /**\n   * The description of the prompt modal.\n   */\n  description?: string\n  /**\n   * The key to confirm the action.\n   */\n  key: string\n  /**\n   * The text for the action button.\n   */\n  actionText: string\n  /**\n   * The text for the cancel button.\n   */\n  cancelText: string\n}\nexport type PromptShowResult =\n  | ((value: string | PromiseLike<string>) => void)\n  | null\n\nexport interface PromptModalValue {\n  /**\n   * The method to trigger the prompt modal.\n   * @returns the value of the key if the action is confirmed.\n   * @example\n   * ```tsx\n   * const accepted = await prompt.show({\n   *  kind: 'destructive',\n   *  heading: 'Delete channel?',\n   *  description:\n   *   'This will permanently delete a channel on your account. There is no going back.',\n   *  key: CHANNEL_NAME,\n   *  actionText: 'Yes, delete channel',\n   *  cancelText: 'No, cancel',\n   * })\n   */\n  show: (options: ShowPromptModalOptions) => Promise<string>\n}\n\nconst PromptModalContext = createContext<PromptModalValue | null>(null)\n\nexport type PromptModalProviderProps = PropsWithChildren<unknown>\n\n/**\n * Provides a prompt modal to the app.\n * @see https://cerberus.digitalu.design/react/prompt-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <PromptModal>\n *   <SomeFeatureSection />\n * </PromptModal>\n *\n * // Use the hook to show the prompt modal.\n * const prompt = usePromptModal()\n *\n * const handleClick = useCallback(async () => {\n *  const accepted = await prompt.show({\n *   kind: 'destructive',\n *   heading: 'Delete channel?',\n *  description:\n *   'This will permanently delete a channel on your account. There is no going back.',\n * key: CHANNEL_NAME,\n * actionText: 'Yes, delete channel',\n * cancelText: 'No, cancel',\n * })\n * // do something with accepted\n * }, [prompt])\n * ```\n */\nexport function PromptModal(\n  props: PropsWithChildren<PromptModalProviderProps>,\n) {\n  const resolveRef = useRef<PromptShowResult>(null)\n  const [open, setOpen] = useState<boolean>(false)\n  const [content, setContent] = useState<ShowPromptModalOptions | null>(null)\n  const [inputValue, setInputValue] = useState<string>('')\n\n  const { icons } = useCerberusContext()\n  const { promptModal: PromptIcon } = icons\n\n  const isValid = useMemo(\n    () => inputValue === content?.key,\n    [inputValue, content],\n  )\n\n  const palette = useMemo(\n    () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n    [content],\n  )\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      setInputValue(e.currentTarget.value)\n    },\n    [content],\n  )\n\n  const handleChoice = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      const target = e.currentTarget as HTMLButtonElement\n      if (target.value === 'true') {\n        resolveRef.current?.(inputValue)\n      }\n      setOpen(false)\n    },\n    [inputValue, setOpen],\n  )\n\n  const handleShow = useCallback(\n    (options: ShowPromptModalOptions) => {\n      return new Promise<string>((resolve) => {\n        setContent({ ...options, kind: options.kind || 'non-destructive' })\n        setOpen(true)\n        resolveRef.current = resolve\n      })\n    },\n    [setOpen],\n  )\n\n  const value = useMemo(\n    () => ({\n      show: handleShow,\n    }),\n    [handleShow],\n  )\n\n  return (\n    <PromptModalContext.Provider value={value}>\n      {props.children}\n\n      <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>\n        <Dialog size=\"sm\">\n          <VStack gap=\"xl\" w=\"full\">\n            <VStack alignItems=\"flex-start\" gap=\"md\" w=\"full\">\n              <HStack\n                alignSelf=\"center\"\n                justify=\"center\"\n                paddingBlockEnd=\"md\"\n                w=\"full\"\n              >\n                <Show\n                  when={palette === 'danger'}\n                  fallback={\n                    <Avatar\n                      ariaLabel=\"\"\n                      gradient=\"charon-light\"\n                      icon={<PromptIcon size={24} />}\n                      src=\"\"\n                    />\n                  }\n                >\n                  <Avatar\n                    ariaLabel=\"\"\n                    gradient=\"hades-dark\"\n                    icon={<PromptIcon size={24} />}\n                    src=\"\"\n                  />\n                </Show>\n              </HStack>\n              <DialogHeading>{content?.heading}</DialogHeading>\n              <DialogDescription>{content?.description}</DialogDescription>\n            </VStack>\n\n            <VStack\n              alignItems=\"flex-start\"\n              marginBlockStart=\"md\"\n              marginBlockEnd=\"lg\"\n              w=\"full\"\n            >\n              <FieldRoot\n                ids={{\n                  control: 'confirm',\n                }}\n                invalid={!isValid}\n              >\n                <FieldLabel\n                  className={hstack({\n                    gap: 'xs',\n                    justify: 'flex-start !important',\n                    marginBlockEnd: 'xs',\n                    textStyle: 'label-md',\n                  })}\n                >\n                  Type\n                  <Text as=\"strong\" textTransform=\"uppercase\">\n                    {content?.key}\n                  </Text>\n                  to confirm\n                </FieldLabel>\n                <Input name=\"confirm\" onChange={handleChange} type=\"text\" />\n              </FieldRoot>\n            </VStack>\n\n            <HStack gap=\"md\" justify=\"stretch\" w=\"full\">\n              <Button\n                autoFocus\n                className={css({\n                  w: '1/2',\n                })}\n                disabled={!isValid}\n                name=\"confirm\"\n                onClick={handleChoice}\n                palette={palette}\n                value=\"true\"\n              >\n                {content?.actionText}\n              </Button>\n\n              <DialogCloseTrigger asChild>\n                <Button\n                  className={css({\n                    w: '1/2',\n                  })}\n                  name=\"cancel\"\n                  onClick={handleChoice}\n                  usage=\"outlined\"\n                  value=\"false\"\n                >\n                  {content?.cancelText}\n                </Button>\n              </DialogCloseTrigger>\n            </HStack>\n          </VStack>\n        </Dialog>\n      </DialogProvider>\n    </PromptModalContext.Provider>\n  )\n}\n\n/**\n * Used to retrieve the context of the PromptModal provider.\n */\nexport function usePromptModal(): PromptModalValue {\n  const context = useContext(PromptModalContext)\n  if (context === null) {\n    throw new Error('usePromptModal must be used within a PromptModal Provider')\n  }\n  return context\n}\n"],"mappings":"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","names":[]}

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

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

package/build/modern/chunk-IGSC4IEA.js

@@ -0,0 +1,37 @@
+import {
+  FieldErrorText,
+  FieldHelperText,
+  FieldLabel,
+  FieldRoot
+} from "./chunk-C5NL3X7W.js";
+import {
+  splitProps
+} from "./chunk-BL7G3577.js";
+import {
+  Show
+} from "./chunk-BUVVRQLZ.js";
+
+// src/components/field/field.tsx
+import { HStack } from "@cerberus/styled-system/jsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Field(props) {
+  const [statusProps, fieldProps, rootProps] = splitProps(
+    props,
+    ["disabled", "required", "readOnly", "invalid"],
+    ["label", "helperText", "secondaryHelperText", "errorText", "children"]
+  );
+  return /* @__PURE__ */ jsxs(FieldRoot, { ...statusProps, ...rootProps, children: [
+    /* @__PURE__ */ jsx(Show, { when: Boolean(fieldProps.label), children: /* @__PURE__ */ jsx(FieldLabel, { children: fieldProps.label }) }),
+    fieldProps.children,
+    /* @__PURE__ */ jsx(Show, { when: Boolean(fieldProps.helperText && !statusProps.invalid), children: /* @__PURE__ */ jsxs(HStack, { justifyContent: "space-between", w: "full", children: [
+      /* @__PURE__ */ jsx(FieldHelperText, { children: fieldProps.helperText }),
+      /* @__PURE__ */ jsx(Show, { when: Boolean(fieldProps.secondaryHelperText), children: /* @__PURE__ */ jsx(FieldHelperText, { children: fieldProps.secondaryHelperText }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(FieldErrorText, { children: fieldProps.errorText })
+  ] });
+}
+
+export {
+  Field
+};
+//# sourceMappingURL=chunk-IGSC4IEA.js.map

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

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

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

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

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

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

package/build/modern/{chunk-3RGRHMJQ.js → chunk-LCN7LYTU.js}

@@ -1,12 +1,12 @@
-import {
-  DialogCloseIconTrigger
-} from "./chunk-6BN3XKQF.js";
 import {
   Dialog,
   DialogDescription,
   DialogHeading,
   DialogProvider
 } from "./chunk-TFL56AYR.js";
+import {
+  DialogCloseIconTrigger
+} from "./chunk-6BN3XKQF.js";
 import {
   Avatar
 } from "./chunk-SXLPDPOZ.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk-GITT5645.js";
 import {
   Button
-} from "./chunk-MER66QUY.js";
+} from "./chunk-6KZVE4HC.js";
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
@@ -123,4 +123,4 @@ export {
   CTAModal,
   useCTAModal
 };
-//# sourceMappingURL=chunk-3RGRHMJQ.js.map
+//# sourceMappingURL=chunk-LCN7LYTU.js.map

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/build/modern/chunk-TYPULJMJ.js

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

package/build/modern/chunk-Z52R6ABJ.js

@@ -0,0 +1,21 @@
+// src/components/field/start-indicator.tsx
+import { cx } from "@cerberus/styled-system/css";
+import { field } from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function FieldStartIndicator(props) {
+  const styles = field();
+  if (!props.children) return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...props,
+      "data-part": "start-indicator",
+      className: cx(props.className, styles.startIndicator)
+    }
+  );
+}
+
+export {
+  FieldStartIndicator
+};
+//# sourceMappingURL=chunk-Z52R6ABJ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/field/start-indicator.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { field } from '@cerberus/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"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAelB;AANG,SAAS,oBAAoB,OAA4B;AAC9D,QAAM,SAAS,MAAM;AAErB,MAAI,CAAC,MAAM,SAAU,QAAO;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,aAAU;AAAA,MACV,WAAW,GAAG,MAAM,WAAW,OAAO,cAAc;AAAA;AAAA,EACtD;AAEJ;","names":[]}

package/build/modern/components/Checkbox.js

@@ -1,8 +1,7 @@
 "use client";
 import {
   Checkbox
-} from "../chunk-NGOLRISW.js";
-import "../chunk-UZDVOIW5.js";
+} from "../chunk-FVE4GBB7.js";
 import "../chunk-GITT5645.js";
 import "../chunk-BUVVRQLZ.js";
 export {

package/build/modern/components/DatePicker.client.js

@@ -10,13 +10,12 @@ import {
   DatePickerViewControlGroup,
   DatePickerYearView,
   RangePickerInput
-} from "../chunk-KU2AWAK3.js";
-import "../chunk-UZDVOIW5.js";
+} from "../chunk-B2A6QFKT.js";
+import "../chunk-IQJDVFPP.js";
 import "../chunk-5EWCH7AI.js";
 import "../chunk-APD6IX5R.js";
-import "../chunk-IQJDVFPP.js";
 import "../chunk-GITT5645.js";
-import "../chunk-MER66QUY.js";
+import "../chunk-6KZVE4HC.js";
 import "../chunk-7SYJFI5E.js";
 import "../chunk-BUVVRQLZ.js";
 export {

package/build/modern/components/Fieldset.js

@@ -1,8 +1,7 @@
 "use client";
 import {
   Fieldset
-} from "../chunk-3ZDFQO25.js";
-import "../chunk-UZDVOIW5.js";
+} from "../chunk-6EUC3SUI.js";
 export {
   Fieldset
 };

package/build/modern/components/FieldsetLabel.js

@@ -1,6 +1,6 @@
 import {
   FieldsetLabel
-} from "../chunk-PZAZKQMO.js";
+} from "../chunk-OYT7RGC7.js";
 export {
   FieldsetLabel
 };

package/build/modern/components/FileStatus.js

@@ -2,13 +2,19 @@
 import {
   FileStatus,
   processStatus
-} from "../chunk-7P7OWBGV.js";
+} from "../chunk-G2VFEBY4.js";
 import "../chunk-WZJ5UQNM.js";
-import "../chunk-JWIJHSI6.js";
-import "../chunk-UZDVOIW5.js";
 import "../chunk-APD6IX5R.js";
+import "../chunk-TYPULJMJ.js";
+import "../chunk-IGSC4IEA.js";
+import "../chunk-7VA5SXTY.js";
+import "../chunk-C5NL3X7W.js";
+import "../chunk-Z52R6ABJ.js";
+import "../chunk-CNA2VKAH.js";
 import "../chunk-SXLPDPOZ.js";
 import "../chunk-GITT5645.js";
+import "../chunk-BL7G3577.js";
+import "../chunk-FQLMPEYX.js";
 import "../chunk-BUVVRQLZ.js";
 export {
   FileStatus,

package/build/modern/components/Legend.js

@@ -1,8 +1,7 @@
 "use client";
 import {
   Legend
-} from "../chunk-ILQW5VZT.js";
-import "../chunk-UZDVOIW5.js";
+} from "../chunk-RBNOEAWJ.js";
 import "../chunk-BUVVRQLZ.js";
 export {
   Legend

package/build/modern/components/Radio.js

@@ -1,8 +1,6 @@
-"use client";
 import {
   Radio
-} from "../chunk-FTPZHG6J.js";
-import "../chunk-UZDVOIW5.js";
+} from "../chunk-6WOJAMZV.js";
 export {
   Radio
 };

package/build/modern/components/Select.js

@@ -5,8 +5,7 @@ import {
   OptionGroupLabel,
   Select,
   createSelectCollection
-} from "../chunk-5QONP7GT.js";
-import "../chunk-RU5LOXWI.js";
+} from "../chunk-S2X5OEPK.js";
 import "../chunk-YWMPB2JR.js";
 import "../chunk-IQJDVFPP.js";
 import "../chunk-GITT5645.js";

package/build/modern/components/Toggle.js

@@ -1,8 +1,7 @@
 "use client";
 import {
   Toggle
-} from "../chunk-XQICKZH4.js";
-import "../chunk-UZDVOIW5.js";
+} from "../chunk-GENS32QO.js";
 import "../chunk-GITT5645.js";
 export {
   Toggle

package/build/modern/components/button/button.js

@@ -2,7 +2,7 @@
 import {
   Button,
   ButtonIcon
-} from "../../chunk-MER66QUY.js";
+} from "../../chunk-6KZVE4HC.js";
 import "../../chunk-7SYJFI5E.js";
 import "../../chunk-BUVVRQLZ.js";
 export {