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

package/build/modern/chunk-NMF2HYWO.js

@@ -1,50 +0,0 @@
-import {
-  useFieldContext
-} from "./chunk-UZDVOIW5.js";
-import {
-  Show
-} from "./chunk-BUVVRQLZ.js";
-
-// src/components/Label.tsx
-import { label } from "@cerberus/styled-system/recipes";
-import { css, cx } from "@cerberus/styled-system/css";
-import { hstack } from "@cerberus/styled-system/patterns";
-import { jsx, jsxs } from "react/jsx-runtime";
-function Label(props) {
-  const { hidden, size, ...nativeProps } = props;
-  const { required, disabled } = useFieldContext();
-  const usage = hidden ? "hidden" : "visible";
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      ...nativeProps,
-      ...disabled && { "data-disabled": true },
-      className: cx(
-        nativeProps.className,
-        label({ size, usage }),
-        hstack({
-          justify: "space-between",
-          w: "full"
-        })
-      ),
-      children: [
-        props.children,
-        /* @__PURE__ */ jsx(Show, { when: required, children: /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: css({
-              color: "page.text.100",
-              fontSize: "inherit"
-            }),
-            children: "(required)"
-          }
-        ) })
-      ]
-    }
-  );
-}
-
-export {
-  Label
-};
-//# sourceMappingURL=chunk-NMF2HYWO.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Label.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the Label component.\n * @module\n */\nexport interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {\n  /**\n   * The unique identifier for the input element. Required for accessibility.\n   */\n  htmlFor: string\n  /**\n   * Used to hide the label from the UI while keeping it accessible to screen readers. Typically used for global search inputs that have no visible label.\n   */\n  hidden?: boolean\n}\nexport type LabelProps = LabelBaseProps & LabelVariantProps\n\n/**\n * A a11y compliant label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @see https://cerberus.digitalu.design/react/label\n * @example\n * ```tsx\n * <Field required>\n *   <Label htmlFor=\"search\" hidden>Search everything</Label>\n *   <Input id=\"search\" startIcon={Search} type=\"text\" />\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n  const { hidden, size, ...nativeProps } = props\n  const { required, disabled } = useFieldContext()\n  const usage = hidden ? 'hidden' : 'visible'\n\n  return (\n    <label\n      {...nativeProps}\n      {...(disabled && { 'data-disabled': true })}\n      className={cx(\n        nativeProps.className,\n        label({ size, usage }),\n        hstack({\n          justify: 'space-between',\n          w: 'full',\n        }),\n      )}\n    >\n      {props.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    </label>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAqC;AAC9C,SAAS,KAAK,UAAU;AACxB,SAAS,cAAc;AAsCnB,SAcI,KAdJ;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,MAAM,GAAG,YAAY,IAAI;AACzC,QAAM,EAAE,UAAU,SAAS,IAAI,gBAAgB;AAC/C,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,YAAY,EAAE,iBAAiB,KAAK;AAAA,MACzC,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,QACrB,OAAO;AAAA,UACL,SAAS;AAAA,UACT,GAAG;AAAA,QACL,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,cAAM;AAAA,QACP,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-PZAZKQMO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/FieldsetLabel.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'\nimport type { LabelProps } from './Label'\n\n/**\n * This module contains the FieldsetLabel component.\n * @module FieldsetLabel\n */\n\nexport type FieldsetLabelProps = LabelProps & LabelVariantProps\n\n/**\n * Used for labeling inputs that are children of a Fieldset group.\n * @memberof Fieldset\n * @see https://cerberus.digitalu.design/react/fieldset\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @example\n * ```tsx\n * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'\n * import { Hstack } from '@cerberus/styled-system/jsx'\n *\n * function SomeForm() {\n *   return (\n *    <form>\n *     <Fieldset>\n *      <Legend>Do you like cats?</Legend>\n *      <Hstack>\n *        <Field>\n *          <Radio id=\"yes\" name=\"cats\" value=\"yes\" />\n *          <FieldsetLabel htmlFor=\"yes\">Yes</FieldsetLabel>\n *        </Field>\n *      </Hstack>\n *      <Hstack>\n *        <Field>\n *         <Radio id=\"no\" name=\"cats\" value=\"no\" />\n *         <FieldsetLabel htmlFor=\"no\">No</FieldsetLabel>\n *        </Field>\n *      </Hstack>\n *     </Fieldset>\n *    </form>\n *   )\n * }\n * ```\n */\nexport function FieldsetLabel(props: FieldsetLabelProps) {\n  const { size, usage, ...nativeProps } = props\n  return (\n    <label\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        label({\n          size,\n          usage,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAqC;AA8C1C;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-Q4IV5NUT.js.map

@@ -1 +0,0 @@
-{"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 { Button } from '../components/button/button'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { Input } from '../components/Input'\nimport { Field } from './field'\nimport { Label } from '../components/Label'\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'\nimport { HStack, VStack } from '@cerberus/styled-system/jsx'\nimport { DialogCloseTrigger } from '@ark-ui/react'\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              <Field invalid={!isValid}>\n                <Label\n                  className={hstack({\n                    gap: 'xs',\n                    justify: 'flex-start !important',\n                  })}\n                  htmlFor=\"confirm\"\n                  size=\"md\"\n                >\n                  Type\n                  <Text as=\"strong\" textTransform=\"uppercase\">\n                    {content?.key}\n                  </Text>\n                  to confirm\n                </Label>\n                <Input\n                  id=\"confirm\"\n                  name=\"confirm\"\n                  onChange={handleChange}\n                  type=\"text\"\n                />\n              </Field>\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAEP,SAAS,WAAW;AACpB,SAAS,cAAc;AAcvB,SAAS,QAAQ,cAAc;AAC/B,SAAS,0BAA0B;AAwJvB,SAagB,KAbhB;AA/FZ,IAAM,qBAAqB,cAAuC,IAAI;AA+B/D,SAAS,YACd,OACA;AACA,QAAM,aAAa,OAAyB,IAAI;AAChD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,KAAK;AAC/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAwC,IAAI;AAC1E,QAAM,CAAC,YAAY,aAAa,IAAI,SAAiB,EAAE;AAEvD,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,aAAa,WAAW,IAAI;AAEpC,QAAM,UAAU;AAAA,IACd,MAAM,eAAe,SAAS;AAAA,IAC9B,CAAC,YAAY,OAAO;AAAA,EACtB;AAEA,QAAM,UAAU;AAAA,IACd,MAAO,SAAS,SAAS,gBAAgB,WAAW;AAAA,IACpD,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,MAAqC;AACpC,oBAAc,EAAE,cAAc,KAAK;AAAA,IACrC;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,MAAqC;AACpC,YAAM,SAAS,EAAE;AACjB,UAAI,OAAO,UAAU,QAAQ;AAC3B,mBAAW,UAAU,UAAU;AAAA,MACjC;AACA,cAAQ,KAAK;AAAA,IACf;AAAA,IACA,CAAC,YAAY,OAAO;AAAA,EACtB;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,YAAoC;AACnC,aAAO,IAAI,QAAgB,CAAC,YAAY;AACtC,mBAAW,EAAE,GAAG,SAAS,MAAM,QAAQ,QAAQ,kBAAkB,CAAC;AAClE,gBAAQ,IAAI;AACZ,mBAAW,UAAU;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,SACE,qBAAC,mBAAmB,UAAnB,EAA4B,OAC1B;AAAA,UAAM;AAAA,IAEP,oBAAC,kBAAe,MAAY,cAAc,CAAC,MAAM,QAAQ,EAAE,IAAI,GAC7D,8BAAC,UAAO,MAAK,MACX,+BAAC,UAAO,KAAI,MAAK,GAAE,QACjB;AAAA,2BAAC,UAAO,YAAW,cAAa,KAAI,MAAK,GAAE,QACzC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,iBAAgB;AAAA,YAChB,GAAE;AAAA,YAEF;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM,YAAY;AAAA,gBAClB,UACE;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,UAAS;AAAA,oBACT,MAAM,oBAAC,cAAW,MAAM,IAAI;AAAA,oBAC5B,KAAI;AAAA;AAAA,gBACN;AAAA,gBAGF;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,UAAS;AAAA,oBACT,MAAM,oBAAC,cAAW,MAAM,IAAI;AAAA,oBAC5B,KAAI;AAAA;AAAA,gBACN;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,iBAAe,mBAAS,SAAQ;AAAA,QACjC,oBAAC,qBAAmB,mBAAS,aAAY;AAAA,SAC3C;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,YAAW;AAAA,UACX,kBAAiB;AAAA,UACjB,gBAAe;AAAA,UACf,GAAE;AAAA,UAEF,+BAAC,SAAM,SAAS,CAAC,SACf;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,OAAO;AAAA,kBAChB,KAAK;AAAA,kBACL,SAAS;AAAA,gBACX,CAAC;AAAA,gBACD,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACN;AAAA;AAAA,kBAEC,oBAAC,QAAK,IAAG,UAAS,eAAc,aAC7B,mBAAS,KACZ;AAAA,kBAAO;AAAA;AAAA;AAAA,YAET;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,MAAK;AAAA,gBACL,UAAU;AAAA,gBACV,MAAK;AAAA;AAAA,YACP;AAAA,aACF;AAAA;AAAA,MACF;AAAA,MAEA,qBAAC,UAAO,KAAI,MAAK,SAAQ,WAAU,GAAE,QACnC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAS;AAAA,YACT,WAAW,IAAI;AAAA,cACb,GAAG;AAAA,YACL,CAAC;AAAA,YACD,UAAU,CAAC;AAAA,YACX,MAAK;AAAA,YACL,SAAS;AAAA,YACT;AAAA,YACA,OAAM;AAAA,YAEL,mBAAS;AAAA;AAAA,QACZ;AAAA,QAEA,oBAAC,sBAAmB,SAAO,MACzB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,GAAG;AAAA,YACL,CAAC;AAAA,YACD,MAAK;AAAA,YACL,SAAS;AAAA,YACT,OAAM;AAAA,YACN,OAAM;AAAA,YAEL,mBAAS;AAAA;AAAA,QACZ,GACF;AAAA,SACF;AAAA,OACF,GACF,GACF;AAAA,KACF;AAEJ;AAKO,SAAS,iBAAmC;AACjD,QAAM,UAAU,WAAW,kBAAkB;AAC7C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI,MAAM,2DAA2D;AAAA,EAC7E;AACA,SAAO;AACT;","names":[]}

package/build/modern/chunk-UZDVOIW5.js

@@ -1,33 +0,0 @@
-// src/context/field.tsx
-import {
-  createContext,
-  useContext,
-  useMemo
-} from "react";
-import { jsx } from "react/jsx-runtime";
-var FieldContext = createContext(null);
-function Field(props) {
-  const value = useMemo(
-    () => ({
-      disabled: props.disabled,
-      readOnly: props.readOnly,
-      required: props.required,
-      invalid: props.invalid
-    }),
-    [props.disabled, props.readOnly, props.required, props.invalid]
-  );
-  return /* @__PURE__ */ jsx(FieldContext.Provider, { value, children: props.children });
-}
-function useFieldContext() {
-  const context = useContext(FieldContext);
-  if (!context) {
-    throw new Error("useFieldContext must be used within a Field Provider.");
-  }
-  return context;
-}
-
-export {
-  Field,
-  useFieldContext
-};
-//# sourceMappingURL=chunk-UZDVOIW5.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/context/field.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n  /**\n   * Whether the field is disabled.\n   * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n   */\n  disabled?: boolean\n  /**\n   * Whether the field is read-only.\n   */\n  readOnly?: boolean\n  /**\n   * Whether the field is required.\n   */\n  required?: boolean\n  /**\n   * Whether the field is invalid.\n   */\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n  props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n  const value = useMemo(\n    () => ({\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      required: props.required,\n      invalid: props.invalid,\n    }),\n    [props.disabled, props.readOnly, props.required, props.invalid],\n  )\n\n  return (\n    <FieldContext.Provider value={value}>\n      {props.children}\n    </FieldContext.Provider>\n  )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n  const context = useContext(FieldContext)\n  if (!context) {\n    throw new Error('useFieldContext must be used within a Field Provider.')\n  }\n  return context\n}\n"],"mappings":";AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA+CH;AApBJ,IAAM,eAAe,cAAwC,IAAI;AAM1D,SAAS,MACd,OACa;AACb,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,UAAU,MAAM;AAAA,MAChB,UAAU,MAAM;AAAA,MAChB,UAAU,MAAM;AAAA,MAChB,SAAS,MAAM;AAAA,IACjB;AAAA,IACA,CAAC,MAAM,UAAU,MAAM,UAAU,MAAM,UAAU,MAAM,OAAO;AAAA,EAChE;AAEA,SACE,oBAAC,aAAa,UAAb,EAAsB,OACpB,gBAAM,UACT;AAEJ;AAMO,SAAS,kBAAqC;AACnD,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;","names":[]}

package/build/modern/chunk-VYCU7I4J.js

@@ -1,43 +0,0 @@
-import {
-  useFieldContext
-} from "./chunk-UZDVOIW5.js";
-import {
-  useCerberusContext
-} from "./chunk-GITT5645.js";
-import {
-  Show
-} from "./chunk-BUVVRQLZ.js";
-
-// src/components/Input.tsx
-import { input } from "@cerberus/styled-system/recipes";
-import { cx } from "@cerberus/styled-system/css";
-import { jsx, jsxs } from "react/jsx-runtime";
-function Input(props) {
-  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props;
-  const inputStyles = input({ size });
-  const { invalid, ...fieldStates } = useFieldContext();
-  const hasEndIcon = Boolean(endIcon);
-  const { icons } = useCerberusContext();
-  const { invalid: InvalidIcon } = icons;
-  return /* @__PURE__ */ jsxs("div", { className: inputStyles.root, children: [
-    /* @__PURE__ */ jsx(Show, { when: Boolean(startIcon), children: /* @__PURE__ */ jsx("span", { className: inputStyles.startIcon, children: startIcon }) }),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ...nativeProps,
-        ...fieldStates,
-        ...describedBy && { "aria-describedby": describedBy },
-        ...invalid && { "aria-invalid": true },
-        "data-start-icon": Boolean(startIcon),
-        className: cx("peer", nativeProps.className, inputStyles.input)
-      }
-    ),
-    /* @__PURE__ */ jsx(Show, { when: invalid, children: /* @__PURE__ */ jsx(InvalidIcon, { className: inputStyles.icon }) }),
-    /* @__PURE__ */ jsx(Show, { when: hasEndIcon && !invalid, children: /* @__PURE__ */ jsx("span", { className: inputStyles.icon, children: endIcon }) })
-  ] });
-}
-
-export {
-  Input
-};
-//# sourceMappingURL=chunk-VYCU7I4J.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Input.tsx"],"sourcesContent":["'use client'\n\nimport type { InputHTMLAttributes, ReactNode } from 'react'\nimport { input, type InputVariantProps } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { useCerberusContext } from '../context/cerberus'\nimport { Show } from './Show'\n\nexport interface InputBaseProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n  /**\n   * The id of the FieldMessage component used to describe the input. Required for accessibility.\n   */\n  describedBy?: string\n  /**\n   * The unique identifier for the input element. Required for accessibility.\n   */\n  id: string\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}\nexport type InputProps = InputBaseProps & InputVariantProps\n\n/**\n * A component that allows the user to input text. Must be wrapped in a Field\n * component to keep track of the state for entire group of elements related to\n * the field.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Input(props: InputProps) {\n  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props\n  const inputStyles = input({ size })\n  const { invalid, ...fieldStates } = useFieldContext()\n  const hasEndIcon = Boolean(endIcon)\n\n  const { icons } = useCerberusContext()\n  const { invalid: InvalidIcon } = icons\n\n  return (\n    <div className={inputStyles.root}>\n      <Show when={Boolean(startIcon)}>\n        <span className={inputStyles.startIcon}>{startIcon}</span>\n      </Show>\n\n      <input\n        {...nativeProps}\n        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        data-start-icon={Boolean(startIcon)}\n        className={cx('peer', nativeProps.className, inputStyles.input)}\n      />\n\n      <Show when={invalid}>\n        <InvalidIcon className={inputStyles.icon} />\n      </Show>\n      <Show when={hasEndIcon && !invalid}>\n        <span className={inputStyles.icon}>{endIcon}</span>\n      </Show>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAGA,SAAS,aAAqC;AAC9C,SAAS,UAAU;AA0Cf,SAEI,KAFJ;AAVG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,aAAa,MAAM,WAAW,SAAS,GAAG,YAAY,IAAI;AAClE,QAAM,cAAc,MAAM,EAAE,KAAK,CAAC;AAClC,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,aAAa,QAAQ,OAAO;AAElC,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,SAAS,YAAY,IAAI;AAEjC,SACE,qBAAC,SAAI,WAAW,YAAY,MAC1B;AAAA,wBAAC,QAAK,MAAM,QAAQ,SAAS,GAC3B,8BAAC,UAAK,WAAW,YAAY,WAAY,qBAAU,GACrD;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,QACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,mBAAiB,QAAQ,SAAS;AAAA,QAClC,WAAW,GAAG,QAAQ,YAAY,WAAW,YAAY,KAAK;AAAA;AAAA,IAChE;AAAA,IAEA,oBAAC,QAAK,MAAM,SACV,8BAAC,eAAY,WAAW,YAAY,MAAM,GAC5C;AAAA,IACA,oBAAC,QAAK,MAAM,cAAc,CAAC,SACzB,8BAAC,UAAK,WAAW,YAAY,MAAO,mBAAQ,GAC9C;AAAA,KACF;AAEJ;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Toggle.tsx"],"sourcesContent":["'use client'\n\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 type { InputHTMLAttributes } from 'react'\nimport { useFieldContext } from '../context/field'\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   * The FieldMessage providing context for the Toggle.\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, describedBy, ...nativeProps } = props\n  const styles = toggle({ size })\n  const { invalid, ...state } = useFieldContext()\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        {...state}\n        {...(describedBy && { 'aria-describedby': describedBy })}\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,UAAU;AACnB,SAAS,QAAQ,cAAc;AAC/B;AAAA,EACE;AAAA,OAEK;AA0DH,SAIE,KAJF;AARG,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,MAAM,aAAa,GAAG,YAAY,IAAI;AAC9C,QAAM,SAAS,OAAO,EAAE,KAAK,CAAC;AAC9B,QAAM,EAAE,SAAS,GAAG,MAAM,IAAI,gBAAgB;AAC9C,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,GAAG;AAAA,YACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,YACrD,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/components/Checkbox.js

@@ -1,11 +0,0 @@
-"use client";
-import {
-  Checkbox
-} from "../chunk-NGOLRISW.js";
-import "../chunk-UZDVOIW5.js";
-import "../chunk-GITT5645.js";
-import "../chunk-BUVVRQLZ.js";
-export {
-  Checkbox
-};
-//# sourceMappingURL=Checkbox.js.map

package/build/modern/components/FieldMessage.js

@@ -1,9 +0,0 @@
-"use client";
-import {
-  FieldMessage
-} from "../chunk-JWIJHSI6.js";
-import "../chunk-UZDVOIW5.js";
-export {
-  FieldMessage
-};
-//# sourceMappingURL=FieldMessage.js.map

package/build/modern/components/Input.js

@@ -1,11 +0,0 @@
-"use client";
-import {
-  Input
-} from "../chunk-VYCU7I4J.js";
-import "../chunk-UZDVOIW5.js";
-import "../chunk-GITT5645.js";
-import "../chunk-BUVVRQLZ.js";
-export {
-  Input
-};
-//# sourceMappingURL=Input.js.map

package/build/modern/components/Label.js

@@ -1,10 +0,0 @@
-"use client";
-import {
-  Label
-} from "../chunk-NMF2HYWO.js";
-import "../chunk-UZDVOIW5.js";
-import "../chunk-BUVVRQLZ.js";
-export {
-  Label
-};
-//# sourceMappingURL=Label.js.map

package/build/modern/components/Textarea.js

@@ -1,9 +0,0 @@
-"use client";
-import {
-  Textarea
-} from "../chunk-JIJM6JFJ.js";
-import "../chunk-UZDVOIW5.js";
-export {
-  Textarea
-};
-//# sourceMappingURL=Textarea.js.map

package/src/components/Checkbox.tsx

@@ -1,93 +0,0 @@
-'use client'
-
-import {
-  checkbox,
-  type CheckboxVariantProps,
-} from '@cerberus/styled-system/recipes'
-import { vstack } from '@cerberus/styled-system/patterns'
-import { cx } from '@cerberus/styled-system/css'
-import type { InputHTMLAttributes } from 'react'
-import { Show } from './Show'
-import { useFieldContext } from '../context/field'
-import { useCerberusContext } from '../context/cerberus'
-
-/**
- * This module contains the Checkbox component.
- * @module
- */
-
-export type CheckboxProps = CheckboxVariantProps &
-  Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'id'> & {
-    /**
-     * The id of the FieldMessage element describing the Checkbox.
-     */
-    describedBy?: string
-    /**
-     * The unique identifier for the checkbox. Required for accessibility.
-     */
-    id: string
-    /**
-     * Used to display a mixed checked state.
-     * @description [ARIA Mixed State](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox-mixed/)
-     */
-    mixed?: boolean
-  }
-
-/**
- * Checkbox component
- * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)
- * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
- * @see https://cerberus.digitalu.design/react/checkbox
- * @example
- * ```tsx
- * <Field>
- *   <Checkbox id="legal" checked={checked.legal} onChange={handleChange} />
- * </Field>
- * ```
- */
-export function Checkbox(props: CheckboxProps) {
-  const { describedBy, size, checked, mixed, ...nativeProps } = props
-  const { invalid, ...fieldStates } = useFieldContext()
-  const styles = checkbox({ size })
-  const { icons } = useCerberusContext()
-  const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } = icons
-
-  if (!CheckIcon) {
-    throw new Error('The CerberusProvider is missing the checkbox icon.')
-  }
-  if (!IndeterminateIcon) {
-    throw new Error('The CerberusProvider is missing the indeterminate icon.')
-  }
-
-  return (
-    <div
-      className={cx(
-        styles.root,
-        vstack({
-          gap: '0',
-          justify: 'center',
-        }),
-      )}
-    >
-      <input
-        {...nativeProps}
-        {...fieldStates}
-        {...(describedBy && { 'aria-describedby': describedBy })}
-        {...(invalid && { 'aria-invalid': true })}
-        {...(mixed && { 'aria-checked': 'mixed' })}
-        className={cx('peer', nativeProps.className, styles.input)}
-        type="checkbox"
-      />
-      <Show when={checked && !mixed}>
-        <span className={styles.icon}>
-          <CheckIcon />
-        </span>
-      </Show>
-      <Show when={mixed}>
-        <span className={styles.icon}>
-          <IndeterminateIcon />
-        </span>
-      </Show>
-    </div>
-  )
-}

package/src/components/Input.tsx

@@ -1,69 +0,0 @@
-'use client'
-
-import type { InputHTMLAttributes, ReactNode } from 'react'
-import { input, type InputVariantProps } from '@cerberus/styled-system/recipes'
-import { cx } from '@cerberus/styled-system/css'
-import { useFieldContext } from '../context/field'
-import { useCerberusContext } from '../context/cerberus'
-import { Show } from './Show'
-
-export interface InputBaseProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {
-  /**
-   * The id of the FieldMessage component used to describe the input. Required for accessibility.
-   */
-  describedBy?: string
-  /**
-   * The unique identifier for the input element. Required for accessibility.
-   */
-  id: string
-  /**
-   * An optional icon to display at the start of the input.
-   */
-  startIcon?: ReactNode
-  /**
-   * An optional icon to display at the end of the input.
-   */
-  endIcon?: ReactNode
-}
-export type InputProps = InputBaseProps & InputVariantProps
-
-/**
- * A component that allows the user to input text. Must be wrapped in a Field
- * component to keep track of the state for entire group of elements related to
- * the field.
- * @see https://cerberus.digitalu.design/react/input
- */
-export function Input(props: InputProps) {
-  const { describedBy, size, startIcon, endIcon, ...nativeProps } = props
-  const inputStyles = input({ size })
-  const { invalid, ...fieldStates } = useFieldContext()
-  const hasEndIcon = Boolean(endIcon)
-
-  const { icons } = useCerberusContext()
-  const { invalid: InvalidIcon } = icons
-
-  return (
-    <div className={inputStyles.root}>
-      <Show when={Boolean(startIcon)}>
-        <span className={inputStyles.startIcon}>{startIcon}</span>
-      </Show>
-
-      <input
-        {...nativeProps}
-        {...fieldStates}
-        {...(describedBy && { 'aria-describedby': describedBy })}
-        {...(invalid && { 'aria-invalid': true })}
-        data-start-icon={Boolean(startIcon)}
-        className={cx('peer', nativeProps.className, inputStyles.input)}
-      />
-
-      <Show when={invalid}>
-        <InvalidIcon className={inputStyles.icon} />
-      </Show>
-      <Show when={hasEndIcon && !invalid}>
-        <span className={inputStyles.icon}>{endIcon}</span>
-      </Show>
-    </div>
-  )
-}

package/src/components/Label.tsx

@@ -1,69 +0,0 @@
-'use client'
-
-import type { HTMLAttributes, PropsWithChildren } from 'react'
-import { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'
-import { css, cx } from '@cerberus/styled-system/css'
-import { hstack } from '@cerberus/styled-system/patterns'
-import { useFieldContext } from '../context/field'
-import { Show } from './Show'
-
-/**
- * This module contains the Label component.
- * @module
- */
-export interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {
-  /**
-   * The unique identifier for the input element. Required for accessibility.
-   */
-  htmlFor: string
-  /**
-   * Used to hide the label from the UI while keeping it accessible to screen readers. Typically used for global search inputs that have no visible label.
-   */
-  hidden?: boolean
-}
-export type LabelProps = LabelBaseProps & LabelVariantProps
-
-/**
- * A a11y compliant label component.
- * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
- * @see https://cerberus.digitalu.design/react/label
- * @example
- * ```tsx
- * <Field required>
- *   <Label htmlFor="search" hidden>Search everything</Label>
- *   <Input id="search" startIcon={Search} type="text" />
- * </Field>
- * ```
- */
-export function Label(props: PropsWithChildren<LabelProps>) {
-  const { hidden, size, ...nativeProps } = props
-  const { required, disabled } = useFieldContext()
-  const usage = hidden ? 'hidden' : 'visible'
-
-  return (
-    <label
-      {...nativeProps}
-      {...(disabled && { 'data-disabled': true })}
-      className={cx(
-        nativeProps.className,
-        label({ size, usage }),
-        hstack({
-          justify: 'space-between',
-          w: 'full',
-        }),
-      )}
-    >
-      {props.children}
-      <Show when={required}>
-        <span
-          className={css({
-            color: 'page.text.100',
-            fontSize: 'inherit',
-          })}
-        >
-          (required)
-        </span>
-      </Show>
-    </label>
-  )
-}

package/src/components/Textarea.tsx

@@ -1,52 +0,0 @@
-'use client'
-
-import type { TextareaHTMLAttributes } from 'react'
-import { css, cx } from '@cerberus/styled-system/css'
-import { input, type InputVariantProps } from '@cerberus/styled-system/recipes'
-import { useFieldContext } from '../context/field'
-
-/**
- * This module contains the Textarea component.
- * @module
- */
-
-export interface TextareaBaseProps
-  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id'> {
-  /**
-   * The ID of the FieldMessage that describes the textarea.
-   */
-  describedBy?: string
-  /**
-   * The unique id of the textarea.
-   */
-  id: string
-}
-export type TextareaProps = InputVariantProps & TextareaBaseProps
-
-/**
- * A component that allows the user to input large blocks of text.
- * @see https://cerberus.digitalu.design/react/textarea
- */
-export function Textarea(props: TextareaProps): JSX.Element {
-  const { describedBy, ...nativeProps } = props
-  const { invalid, ...fieldState } = useFieldContext()
-
-  return (
-    <textarea
-      {...nativeProps}
-      {...fieldState}
-      {...(describedBy && { 'aria-describedby': describedBy })}
-      {...(invalid && { 'aria-invalid': true })}
-      className={cx(
-        props.className,
-        input().input,
-        css({
-          pxi: '2',
-          py: '2',
-          resize: 'vertical',
-        }),
-      )}
-      rows={4}
-    />
-  )
-}