@cerberus-design/react 0.1.3 → 0.2.0-next-df7f869

package/build/legacy/_tsup-dts-rollup.d.ts

@@ -2,6 +2,8 @@ import type { AnchorHTMLAttributes } from 'react';
 import { ButtonHTMLAttributes } from 'react';
 import { ElementType } from 'react';
 import { HTMLAttributes } from 'react';
+import type { InputHTMLAttributes } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import { RefObject } from 'react';
@@ -48,13 +50,41 @@ export { Field as Field_alias_1 }
 
 declare interface FieldContextValue {
     disabled?: boolean;
-    readonly?: boolean;
+    readOnly?: boolean;
     required?: boolean;
     invalid?: boolean;
 }
 export { FieldContextValue }
 export { FieldContextValue as FieldContextValue_alias_1 }
 
+/**
+ * A component that provides feedback about the field.
+ * @description [FieldMessage Docs](https://cerberus.digitalu.design/react/field-message)
+ * @example
+ * ```tsx
+ * <Field>
+ *  <Label htmlFor="first_name">First Name</Label>
+ *  <Input aria-describedBy="help:first_name" id="first_name" type="text" />
+ *  <FieldMessage id="help:first_name">
+ *   This will only be used in your account information.
+ *  </FieldMessage>
+ * </Field>
+ * ```
+ */
+declare function FieldMessage(props: FieldMessageProps): JSX_2.Element;
+export { FieldMessage }
+export { FieldMessage as FieldMessage_alias_1 }
+
+/**
+ * This module contains the FieldMessage component.
+ * @module
+ */
+declare interface FieldMessageProps extends HTMLAttributes<HTMLParagraphElement> {
+    id: string;
+}
+export { FieldMessageProps }
+export { FieldMessageProps as FieldMessageProps_alias_1 }
+
 declare function getPosition(position: Positions): GetPositionResult;
 export { getPosition }
 export { getPosition as getPosition_alias_1 }
@@ -91,6 +121,44 @@ declare type IconButtonUsage = Exclude<ButtonProps['usage'], 'outline'>;
 export { IconButtonUsage }
 export { IconButtonUsage as IconButtonUsage_alias_1 }
 
+declare function Input(props: InputProps): JSX_2.Element;
+export { Input }
+export { Input as Input_alias_1 }
+
+declare interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {
+    describedBy?: string;
+    id: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+export { InputProps }
+export { InputProps as InputProps_alias_1 }
+
+/**
+ * A screen ready friendly label component.
+ * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
+ * @definition [Label docs](https://cerberus.digitalu.design/react/label)
+ * @example
+ * ```tsx
+ * <Field required>
+ *   <Label htmlFor="test">Test Label</Label>
+ * </Field>
+ * ```
+ */
+declare function Label(props: PropsWithChildren<LabelProps>): JSX_2.Element;
+export { Label }
+export { Label as Label_alias_1 }
+
+/**
+ * This module contains the Label component.
+ * @module
+ */
+declare interface LabelProps extends HTMLAttributes<HTMLLabelElement> {
+    htmlFor: string;
+    hidden?: boolean;
+}
+export { LabelProps }
+export { LabelProps as LabelProps_alias_1 }
+
 declare const MODE_KEY = "cerberus-mode";
 export { MODE_KEY }
 export { MODE_KEY as MODE_KEY_alias_1 }

package/build/legacy/chunk-LD5ZV46F.js

@@ -0,0 +1,35 @@
+import {
+  Show
+} from "./chunk-R4H3352X.js";
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
+
+// src/components/Input.tsx
+import { WarningFilled } from "@cerberus/icons";
+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, ...nativeProps } = props;
+  const inputStyles = input({ size });
+  const { invalid, ...fieldStates } = useFieldContext();
+  return /* @__PURE__ */ jsxs("div", { className: inputStyles.root, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...nativeProps,
+        ...fieldStates,
+        ...describedBy && { "aria-describedby": describedBy },
+        ...invalid && { "aria-invalid": true },
+        className: cx("peer", nativeProps.className, inputStyles.input)
+      }
+    ),
+    /* @__PURE__ */ jsx(Show, { when: invalid, children: /* @__PURE__ */ jsx(WarningFilled, { className: inputStyles.icon }) })
+  ] });
+}
+
+export {
+  Input
+};
+//# sourceMappingURL=chunk-LD5ZV46F.js.map

package/build/legacy/chunk-LD5ZV46F.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Input.tsx"],"sourcesContent":["'use client'\n\nimport type { InputHTMLAttributes } from 'react'\nimport { WarningFilled } from '@cerberus/icons'\nimport { input } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\nexport interface InputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n  describedBy?: string\n  id: string\n  size?: 'sm' | 'md' | 'lg'\n}\n\nexport function Input(props: InputProps) {\n  const { describedBy, size, ...nativeProps } = props\n  const inputStyles = input({ size })\n  const { invalid, ...fieldStates } = useFieldContext()\n\n  return (\n    <div className={inputStyles.root}>\n      <input\n        {...nativeProps}\n        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        className={cx('peer', nativeProps.className, inputStyles.input)}\n      />\n      <Show when={invalid}>\n        <WarningFilled className={inputStyles.icon} />\n      </Show>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AACtB,SAAS,UAAU;AAiBf,SACE,KADF;AANG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,aAAa,MAAM,GAAG,YAAY,IAAI;AAC9C,QAAM,cAAc,MAAM,EAAE,KAAK,CAAC;AAClC,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AAEpD,SACE,qBAAC,SAAI,WAAW,YAAY,MAC1B;AAAA;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,WAAW,GAAG,QAAQ,YAAY,WAAW,YAAY,KAAK;AAAA;AAAA,IAChE;AAAA,IACA,oBAAC,QAAK,MAAM,SACV,8BAAC,iBAAc,WAAW,YAAY,MAAM,GAC9C;AAAA,KACF;AAEJ;","names":[]}

package/build/legacy/chunk-OXVNTE4A.js

@@ -0,0 +1,48 @@
+import {
+  Show
+} from "./chunk-R4H3352X.js";
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.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, ...nativeProps } = props;
+  const { required } = useFieldContext();
+  const usage = hidden ? "hidden" : "visible";
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ...nativeProps,
+      className: cx(
+        nativeProps.className,
+        label({ usage }),
+        hstack({
+          justify: "space-between"
+        })
+      ),
+      children: [
+        props.children,
+        /* @__PURE__ */ jsx(Show, { when: required, children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: css({
+              color: "neutral.text.100",
+              fontSize: "inherit"
+            }),
+            children: "(required)"
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+export {
+  Label
+};
+//# sourceMappingURL=chunk-OXVNTE4A.js.map

package/build/legacy/chunk-OXVNTE4A.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Label.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\nimport { hstack } from '@cerberus/styled-system/patterns'\n\n/**\n * This module contains the Label component.\n * @module\n */\n\nexport interface LabelProps extends HTMLAttributes<HTMLLabelElement> {\n  htmlFor: string\n  hidden?: boolean\n}\n\n/**\n * A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n *   <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n  const { hidden, ...nativeProps } = props\n  const { required } = useFieldContext()\n  const usage = hidden ? 'hidden' : 'visible'\n\n  return (\n    <label\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        label({ usage }),\n        hstack({\n          justify: 'space-between',\n        }),\n      )}\n    >\n      {props.children}\n      <Show when={required}>\n        <span\n          className={css({\n            color: 'neutral.text.100',\n            fontSize: 'inherit',\n          })}\n        >\n          (required)\n        </span>\n      </Show>\n    </label>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,KAAK,UAAU;AAGxB,SAAS,cAAc;AA6BnB,SAYI,KAZJ;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,GAAG,YAAY,IAAI;AACnC,QAAM,EAAE,SAAS,IAAI,gBAAgB;AACrC,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM,EAAE,MAAM,CAAC;AAAA,QACf,OAAO;AAAA,UACL,SAAS;AAAA,QACX,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/legacy/{chunk-6YEAMVRY.js → chunk-X6PHIZRM.js}

@@ -1,9 +1,9 @@
-import {
-  createNavTriggerProps
-} from "./chunk-JF76VIL3.js";
 import {
   useNavMenuContext
 } from "./chunk-KJUCHZHV.js";
+import {
+  createNavTriggerProps
+} from "./chunk-JF76VIL3.js";
 import {
   Show
 } from "./chunk-R4H3352X.js";
@@ -79,4 +79,4 @@ function NavMenuTrigger(props) {
 export {
   NavMenuTrigger
 };
-//# sourceMappingURL=chunk-6YEAMVRY.js.map
+//# sourceMappingURL=chunk-X6PHIZRM.js.map

package/build/legacy/chunk-YVUZSAJG.js

@@ -0,0 +1,24 @@
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
+
+// src/components/FieldMessage.tsx
+import { cx } from "@cerberus/styled-system/css";
+import { fieldMessage } from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function FieldMessage(props) {
+  const { invalid } = useFieldContext();
+  return /* @__PURE__ */ jsx(
+    "small",
+    {
+      ...props,
+      ...invalid && { "aria-invalid": true },
+      className: cx(props.className, fieldMessage())
+    }
+  );
+}
+
+export {
+  FieldMessage
+};
+//# sourceMappingURL=chunk-YVUZSAJG.js.map

package/build/legacy/chunk-YVUZSAJG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/FieldMessage.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { fieldMessage } from '@cerberus/styled-system/recipes'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the FieldMessage component.\n * @module\n */\n\nexport interface FieldMessageProps\n  extends HTMLAttributes<HTMLParagraphElement> {\n  id: string\n}\n\n/**\n * A component that provides feedback about the field.\n * @description [FieldMessage Docs](https://cerberus.digitalu.design/react/field-message)\n * @example\n * ```tsx\n * <Field>\n *  <Label htmlFor=\"first_name\">First Name</Label>\n *  <Input aria-describedBy=\"help:first_name\" id=\"first_name\" type=\"text\" />\n *  <FieldMessage id=\"help:first_name\">\n *   This will only be used in your account information.\n *  </FieldMessage>\n * </Field>\n * ```\n */\nexport function FieldMessage(props: FieldMessageProps) {\n  const { invalid } = useFieldContext()\n  return (\n    <small\n      {...props}\n      {...(invalid && { 'aria-invalid': true })}\n      className={cx(props.className, fieldMessage())}\n    />\n  )\n}\n"],"mappings":";;;;;AAGA,SAAS,UAAU;AACnB,SAAS,oBAAoB;AA8BzB;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-KETL4ZJK.js → legacy/chunk-ZAU4JVLL.js}

@@ -10,11 +10,11 @@ function Field(props) {
   const value = useMemo(
     () => ({
       disabled: props.disabled,
-      readonly: props.readonly,
+      readOnly: props.readOnly,
       required: props.required,
       invalid: props.invalid
     }),
-    [props.disabled, props.readonly, props.required, props.invalid]
+    [props.disabled, props.readOnly, props.required, props.invalid]
   );
   return /* @__PURE__ */ jsx(FieldContext.Provider, { value, children: props.children });
 }
@@ -30,4 +30,4 @@ export {
   Field,
   useFieldContext
 };
-//# sourceMappingURL=chunk-KETL4ZJK.js.map
+//# sourceMappingURL=chunk-ZAU4JVLL.js.map

package/build/{modern/chunk-KETL4ZJK.js.map → legacy/chunk-ZAU4JVLL.js.map}

@@ -1 +1 @@
-{"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\nexport interface FieldContextValue {\n  disabled?: boolean\n  readonly?: boolean\n  required?: boolean\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\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\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;AAyBH;AAhBJ,IAAM,eAAe,cAAwC,IAAI;AAE1D,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;AAEO,SAAS,kBAAqC;AACnD,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;","names":[]}
+{"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\nexport interface FieldContextValue {\n  disabled?: boolean\n  readOnly?: boolean\n  required?: boolean\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\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\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;AAyBH;AAhBJ,IAAM,eAAe,cAAwC,IAAI;AAE1D,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;AAEO,SAAS,kBAAqC;AACnD,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;","names":[]}

package/build/legacy/components/FieldMessage.d.ts

@@ -0,0 +1,2 @@
+export { FieldMessage_alias_1 as FieldMessage } from '../_tsup-dts-rollup';
+export { FieldMessageProps_alias_1 as FieldMessageProps } from '../_tsup-dts-rollup';

package/build/legacy/components/FieldMessage.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/components/Input.d.ts

@@ -0,0 +1,2 @@
+export { Input_alias_1 as Input } from '../_tsup-dts-rollup';
+export { InputProps_alias_1 as InputProps } from '../_tsup-dts-rollup';

package/build/legacy/components/Input.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  Input
+} from "../chunk-LD5ZV46F.js";
+import "../chunk-R4H3352X.js";
+import "../chunk-ZAU4JVLL.js";
+export {
+  Input
+};
+//# sourceMappingURL=Input.js.map

package/build/legacy/components/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/components/Label.d.ts

@@ -0,0 +1,2 @@
+export { Label_alias_1 as Label } from '../_tsup-dts-rollup';
+export { LabelProps_alias_1 as LabelProps } from '../_tsup-dts-rollup';

package/build/legacy/components/Label.js

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

package/build/legacy/components/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/legacy/components/NavMenuTrigger.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   NavMenuTrigger
-} from "../chunk-6YEAMVRY.js";
-import "../chunk-JF76VIL3.js";
+} from "../chunk-X6PHIZRM.js";
 import "../chunk-KJUCHZHV.js";
+import "../chunk-JF76VIL3.js";
 import "../chunk-R4H3352X.js";
 export {
   NavMenuTrigger

package/build/legacy/context/field.js

@@ -2,7 +2,7 @@
 import {
   Field,
   useFieldContext
-} from "../chunk-KETL4ZJK.js";
+} from "../chunk-ZAU4JVLL.js";
 export {
   Field,
   useFieldContext

package/build/legacy/index.d.ts

@@ -1,8 +1,14 @@
 export { Button } from './_tsup-dts-rollup';
 export { ButtonProps } from './_tsup-dts-rollup';
+export { FieldMessage } from './_tsup-dts-rollup';
+export { FieldMessageProps } from './_tsup-dts-rollup';
 export { IconButton } from './_tsup-dts-rollup';
 export { IconButtonUsage } from './_tsup-dts-rollup';
 export { IconButtonProps } from './_tsup-dts-rollup';
+export { Input } from './_tsup-dts-rollup';
+export { InputProps } from './_tsup-dts-rollup';
+export { Label } from './_tsup-dts-rollup';
+export { LabelProps } from './_tsup-dts-rollup';
 export { NavMenuTrigger } from './_tsup-dts-rollup';
 export { NavMenuTriggerProps } from './_tsup-dts-rollup';
 export { getPosition } from './_tsup-dts-rollup';

package/build/legacy/index.js

@@ -1,10 +1,20 @@
+import {
+  Label
+} from "./chunk-OXVNTE4A.js";
+import {
+  NavMenuLink
+} from "./chunk-JA4IX7GN.js";
+import {
+  NavMenuList,
+  getPosition
+} from "./chunk-WSQTX34C.js";
 import {
   NavMenuTrigger
-} from "./chunk-6YEAMVRY.js";
+} from "./chunk-X6PHIZRM.js";
 import {
-  Field,
-  useFieldContext
-} from "./chunk-KETL4ZJK.js";
+  NavMenu,
+  useNavMenuContext
+} from "./chunk-KJUCHZHV.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
@@ -19,27 +29,29 @@ import {
 import {
   Button
 } from "./chunk-XFWARXLU.js";
+import {
+  FieldMessage
+} from "./chunk-YVUZSAJG.js";
 import {
   IconButton
 } from "./chunk-BPIYUAYS.js";
 import {
-  NavMenuLink
-} from "./chunk-JA4IX7GN.js";
-import {
-  NavMenuList,
-  getPosition
-} from "./chunk-WSQTX34C.js";
-import {
-  NavMenu,
-  useNavMenuContext
-} from "./chunk-KJUCHZHV.js";
+  Input
+} from "./chunk-LD5ZV46F.js";
 import {
   Show
 } from "./chunk-R4H3352X.js";
+import {
+  Field,
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
 export {
   Button,
   Field,
+  FieldMessage,
   IconButton,
+  Input,
+  Label,
   MODE_KEY,
   NavMenu,
   NavMenuLink,

package/build/modern/_tsup-dts-rollup.d.ts

@@ -2,6 +2,8 @@ import type { AnchorHTMLAttributes } from 'react';
 import { ButtonHTMLAttributes } from 'react';
 import { ElementType } from 'react';
 import { HTMLAttributes } from 'react';
+import type { InputHTMLAttributes } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import { RefObject } from 'react';
@@ -48,13 +50,41 @@ export { Field as Field_alias_1 }
 
 declare interface FieldContextValue {
     disabled?: boolean;
-    readonly?: boolean;
+    readOnly?: boolean;
     required?: boolean;
     invalid?: boolean;
 }
 export { FieldContextValue }
 export { FieldContextValue as FieldContextValue_alias_1 }
 
+/**
+ * A component that provides feedback about the field.
+ * @description [FieldMessage Docs](https://cerberus.digitalu.design/react/field-message)
+ * @example
+ * ```tsx
+ * <Field>
+ *  <Label htmlFor="first_name">First Name</Label>
+ *  <Input aria-describedBy="help:first_name" id="first_name" type="text" />
+ *  <FieldMessage id="help:first_name">
+ *   This will only be used in your account information.
+ *  </FieldMessage>
+ * </Field>
+ * ```
+ */
+declare function FieldMessage(props: FieldMessageProps): JSX_2.Element;
+export { FieldMessage }
+export { FieldMessage as FieldMessage_alias_1 }
+
+/**
+ * This module contains the FieldMessage component.
+ * @module
+ */
+declare interface FieldMessageProps extends HTMLAttributes<HTMLParagraphElement> {
+    id: string;
+}
+export { FieldMessageProps }
+export { FieldMessageProps as FieldMessageProps_alias_1 }
+
 declare function getPosition(position: Positions): GetPositionResult;
 export { getPosition }
 export { getPosition as getPosition_alias_1 }
@@ -91,6 +121,44 @@ declare type IconButtonUsage = Exclude<ButtonProps['usage'], 'outline'>;
 export { IconButtonUsage }
 export { IconButtonUsage as IconButtonUsage_alias_1 }
 
+declare function Input(props: InputProps): JSX_2.Element;
+export { Input }
+export { Input as Input_alias_1 }
+
+declare interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {
+    describedBy?: string;
+    id: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+export { InputProps }
+export { InputProps as InputProps_alias_1 }
+
+/**
+ * A screen ready friendly label component.
+ * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
+ * @definition [Label docs](https://cerberus.digitalu.design/react/label)
+ * @example
+ * ```tsx
+ * <Field required>
+ *   <Label htmlFor="test">Test Label</Label>
+ * </Field>
+ * ```
+ */
+declare function Label(props: PropsWithChildren<LabelProps>): JSX_2.Element;
+export { Label }
+export { Label as Label_alias_1 }
+
+/**
+ * This module contains the Label component.
+ * @module
+ */
+declare interface LabelProps extends HTMLAttributes<HTMLLabelElement> {
+    htmlFor: string;
+    hidden?: boolean;
+}
+export { LabelProps }
+export { LabelProps as LabelProps_alias_1 }
+
 declare const MODE_KEY = "cerberus-mode";
 export { MODE_KEY }
 export { MODE_KEY as MODE_KEY_alias_1 }

package/build/modern/chunk-LD5ZV46F.js

@@ -0,0 +1,35 @@
+import {
+  Show
+} from "./chunk-R4H3352X.js";
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
+
+// src/components/Input.tsx
+import { WarningFilled } from "@cerberus/icons";
+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, ...nativeProps } = props;
+  const inputStyles = input({ size });
+  const { invalid, ...fieldStates } = useFieldContext();
+  return /* @__PURE__ */ jsxs("div", { className: inputStyles.root, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...nativeProps,
+        ...fieldStates,
+        ...describedBy && { "aria-describedby": describedBy },
+        ...invalid && { "aria-invalid": true },
+        className: cx("peer", nativeProps.className, inputStyles.input)
+      }
+    ),
+    /* @__PURE__ */ jsx(Show, { when: invalid, children: /* @__PURE__ */ jsx(WarningFilled, { className: inputStyles.icon }) })
+  ] });
+}
+
+export {
+  Input
+};
+//# sourceMappingURL=chunk-LD5ZV46F.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Input.tsx"],"sourcesContent":["'use client'\n\nimport type { InputHTMLAttributes } from 'react'\nimport { WarningFilled } from '@cerberus/icons'\nimport { input } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\nexport interface InputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n  describedBy?: string\n  id: string\n  size?: 'sm' | 'md' | 'lg'\n}\n\nexport function Input(props: InputProps) {\n  const { describedBy, size, ...nativeProps } = props\n  const inputStyles = input({ size })\n  const { invalid, ...fieldStates } = useFieldContext()\n\n  return (\n    <div className={inputStyles.root}>\n      <input\n        {...nativeProps}\n        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        className={cx('peer', nativeProps.className, inputStyles.input)}\n      />\n      <Show when={invalid}>\n        <WarningFilled className={inputStyles.icon} />\n      </Show>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AACtB,SAAS,UAAU;AAiBf,SACE,KADF;AANG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,aAAa,MAAM,GAAG,YAAY,IAAI;AAC9C,QAAM,cAAc,MAAM,EAAE,KAAK,CAAC;AAClC,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AAEpD,SACE,qBAAC,SAAI,WAAW,YAAY,MAC1B;AAAA;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,WAAW,GAAG,QAAQ,YAAY,WAAW,YAAY,KAAK;AAAA;AAAA,IAChE;AAAA,IACA,oBAAC,QAAK,MAAM,SACV,8BAAC,iBAAc,WAAW,YAAY,MAAM,GAC9C;AAAA,KACF;AAEJ;","names":[]}

package/build/modern/chunk-OXVNTE4A.js

@@ -0,0 +1,48 @@
+import {
+  Show
+} from "./chunk-R4H3352X.js";
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.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, ...nativeProps } = props;
+  const { required } = useFieldContext();
+  const usage = hidden ? "hidden" : "visible";
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ...nativeProps,
+      className: cx(
+        nativeProps.className,
+        label({ usage }),
+        hstack({
+          justify: "space-between"
+        })
+      ),
+      children: [
+        props.children,
+        /* @__PURE__ */ jsx(Show, { when: required, children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: css({
+              color: "neutral.text.100",
+              fontSize: "inherit"
+            }),
+            children: "(required)"
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+export {
+  Label
+};
+//# sourceMappingURL=chunk-OXVNTE4A.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Label.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\nimport { hstack } from '@cerberus/styled-system/patterns'\n\n/**\n * This module contains the Label component.\n * @module\n */\n\nexport interface LabelProps extends HTMLAttributes<HTMLLabelElement> {\n  htmlFor: string\n  hidden?: boolean\n}\n\n/**\n * A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n *   <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n  const { hidden, ...nativeProps } = props\n  const { required } = useFieldContext()\n  const usage = hidden ? 'hidden' : 'visible'\n\n  return (\n    <label\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        label({ usage }),\n        hstack({\n          justify: 'space-between',\n        }),\n      )}\n    >\n      {props.children}\n      <Show when={required}>\n        <span\n          className={css({\n            color: 'neutral.text.100',\n            fontSize: 'inherit',\n          })}\n        >\n          (required)\n        </span>\n      </Show>\n    </label>\n  )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,KAAK,UAAU;AAGxB,SAAS,cAAc;AA6BnB,SAYI,KAZJ;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,GAAG,YAAY,IAAI;AACnC,QAAM,EAAE,SAAS,IAAI,gBAAgB;AACrC,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM,EAAE,MAAM,CAAC;AAAA,QACf,OAAO;AAAA,UACL,SAAS;AAAA,QACX,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-6YEAMVRY.js → chunk-X6PHIZRM.js}

@@ -1,9 +1,9 @@
-import {
-  createNavTriggerProps
-} from "./chunk-JF76VIL3.js";
 import {
   useNavMenuContext
 } from "./chunk-KJUCHZHV.js";
+import {
+  createNavTriggerProps
+} from "./chunk-JF76VIL3.js";
 import {
   Show
 } from "./chunk-R4H3352X.js";
@@ -79,4 +79,4 @@ function NavMenuTrigger(props) {
 export {
   NavMenuTrigger
 };
-//# sourceMappingURL=chunk-6YEAMVRY.js.map
+//# sourceMappingURL=chunk-X6PHIZRM.js.map

package/build/modern/chunk-YVUZSAJG.js

@@ -0,0 +1,24 @@
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
+
+// src/components/FieldMessage.tsx
+import { cx } from "@cerberus/styled-system/css";
+import { fieldMessage } from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function FieldMessage(props) {
+  const { invalid } = useFieldContext();
+  return /* @__PURE__ */ jsx(
+    "small",
+    {
+      ...props,
+      ...invalid && { "aria-invalid": true },
+      className: cx(props.className, fieldMessage())
+    }
+  );
+}
+
+export {
+  FieldMessage
+};
+//# sourceMappingURL=chunk-YVUZSAJG.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/FieldMessage.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { fieldMessage } from '@cerberus/styled-system/recipes'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the FieldMessage component.\n * @module\n */\n\nexport interface FieldMessageProps\n  extends HTMLAttributes<HTMLParagraphElement> {\n  id: string\n}\n\n/**\n * A component that provides feedback about the field.\n * @description [FieldMessage Docs](https://cerberus.digitalu.design/react/field-message)\n * @example\n * ```tsx\n * <Field>\n *  <Label htmlFor=\"first_name\">First Name</Label>\n *  <Input aria-describedBy=\"help:first_name\" id=\"first_name\" type=\"text\" />\n *  <FieldMessage id=\"help:first_name\">\n *   This will only be used in your account information.\n *  </FieldMessage>\n * </Field>\n * ```\n */\nexport function FieldMessage(props: FieldMessageProps) {\n  const { invalid } = useFieldContext()\n  return (\n    <small\n      {...props}\n      {...(invalid && { 'aria-invalid': true })}\n      className={cx(props.className, fieldMessage())}\n    />\n  )\n}\n"],"mappings":";;;;;AAGA,SAAS,UAAU;AACnB,SAAS,oBAAoB;AA8BzB;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/{legacy/chunk-KETL4ZJK.js → modern/chunk-ZAU4JVLL.js}

@@ -10,11 +10,11 @@ function Field(props) {
   const value = useMemo(
     () => ({
       disabled: props.disabled,
-      readonly: props.readonly,
+      readOnly: props.readOnly,
       required: props.required,
       invalid: props.invalid
     }),
-    [props.disabled, props.readonly, props.required, props.invalid]
+    [props.disabled, props.readOnly, props.required, props.invalid]
   );
   return /* @__PURE__ */ jsx(FieldContext.Provider, { value, children: props.children });
 }
@@ -30,4 +30,4 @@ export {
   Field,
   useFieldContext
 };
-//# sourceMappingURL=chunk-KETL4ZJK.js.map
+//# sourceMappingURL=chunk-ZAU4JVLL.js.map

package/build/{legacy/chunk-KETL4ZJK.js.map → modern/chunk-ZAU4JVLL.js.map}

@@ -1 +1 @@
-{"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\nexport interface FieldContextValue {\n  disabled?: boolean\n  readonly?: boolean\n  required?: boolean\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\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\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;AAyBH;AAhBJ,IAAM,eAAe,cAAwC,IAAI;AAE1D,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;AAEO,SAAS,kBAAqC;AACnD,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;","names":[]}
+{"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\nexport interface FieldContextValue {\n  disabled?: boolean\n  readOnly?: boolean\n  required?: boolean\n  invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\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\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;AAyBH;AAhBJ,IAAM,eAAe,cAAwC,IAAI;AAE1D,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;AAEO,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/components/FieldMessage.d.ts

@@ -0,0 +1,2 @@
+export { FieldMessage_alias_1 as FieldMessage } from '../_tsup-dts-rollup';
+export { FieldMessageProps_alias_1 as FieldMessageProps } from '../_tsup-dts-rollup';

package/build/modern/components/FieldMessage.js

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

package/build/modern/components/FieldMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/Input.d.ts

@@ -0,0 +1,2 @@
+export { Input_alias_1 as Input } from '../_tsup-dts-rollup';
+export { InputProps_alias_1 as InputProps } from '../_tsup-dts-rollup';

package/build/modern/components/Input.js

@@ -0,0 +1,10 @@
+"use client";
+import {
+  Input
+} from "../chunk-LD5ZV46F.js";
+import "../chunk-R4H3352X.js";
+import "../chunk-ZAU4JVLL.js";
+export {
+  Input
+};
+//# sourceMappingURL=Input.js.map

package/build/modern/components/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/Label.d.ts

@@ -0,0 +1,2 @@
+export { Label_alias_1 as Label } from '../_tsup-dts-rollup';
+export { LabelProps_alias_1 as LabelProps } from '../_tsup-dts-rollup';

package/build/modern/components/Label.js

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

package/build/modern/components/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/components/NavMenuTrigger.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   NavMenuTrigger
-} from "../chunk-6YEAMVRY.js";
-import "../chunk-JF76VIL3.js";
+} from "../chunk-X6PHIZRM.js";
 import "../chunk-KJUCHZHV.js";
+import "../chunk-JF76VIL3.js";
 import "../chunk-R4H3352X.js";
 export {
   NavMenuTrigger

package/build/modern/context/field.js

@@ -2,7 +2,7 @@
 import {
   Field,
   useFieldContext
-} from "../chunk-KETL4ZJK.js";
+} from "../chunk-ZAU4JVLL.js";
 export {
   Field,
   useFieldContext

package/build/modern/index.d.ts

@@ -1,8 +1,14 @@
 export { Button } from './_tsup-dts-rollup';
 export { ButtonProps } from './_tsup-dts-rollup';
+export { FieldMessage } from './_tsup-dts-rollup';
+export { FieldMessageProps } from './_tsup-dts-rollup';
 export { IconButton } from './_tsup-dts-rollup';
 export { IconButtonUsage } from './_tsup-dts-rollup';
 export { IconButtonProps } from './_tsup-dts-rollup';
+export { Input } from './_tsup-dts-rollup';
+export { InputProps } from './_tsup-dts-rollup';
+export { Label } from './_tsup-dts-rollup';
+export { LabelProps } from './_tsup-dts-rollup';
 export { NavMenuTrigger } from './_tsup-dts-rollup';
 export { NavMenuTriggerProps } from './_tsup-dts-rollup';
 export { getPosition } from './_tsup-dts-rollup';

package/build/modern/index.js

@@ -1,10 +1,20 @@
+import {
+  Label
+} from "./chunk-OXVNTE4A.js";
+import {
+  NavMenuLink
+} from "./chunk-JA4IX7GN.js";
+import {
+  NavMenuList,
+  getPosition
+} from "./chunk-WSQTX34C.js";
 import {
   NavMenuTrigger
-} from "./chunk-6YEAMVRY.js";
+} from "./chunk-X6PHIZRM.js";
 import {
-  Field,
-  useFieldContext
-} from "./chunk-KETL4ZJK.js";
+  NavMenu,
+  useNavMenuContext
+} from "./chunk-KJUCHZHV.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
@@ -19,27 +29,29 @@ import {
 import {
   Button
 } from "./chunk-XFWARXLU.js";
+import {
+  FieldMessage
+} from "./chunk-YVUZSAJG.js";
 import {
   IconButton
 } from "./chunk-BPIYUAYS.js";
 import {
-  NavMenuLink
-} from "./chunk-JA4IX7GN.js";
-import {
-  NavMenuList,
-  getPosition
-} from "./chunk-WSQTX34C.js";
-import {
-  NavMenu,
-  useNavMenuContext
-} from "./chunk-KJUCHZHV.js";
+  Input
+} from "./chunk-LD5ZV46F.js";
 import {
   Show
 } from "./chunk-R4H3352X.js";
+import {
+  Field,
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
 export {
   Button,
   Field,
+  FieldMessage,
   IconButton,
+  Input,
+  Label,
   MODE_KEY,
   NavMenu,
   NavMenuLink,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.1.3",
+  "version": "0.2.0-next-df7f869",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -10,6 +10,7 @@
   "peerDependencies": {
     "@cerberus/panda-preset": "npm:@jsr/cerberus__panda-preset",
     "@cerberus/styled-system": "npm:@cerberus-design/styled-system@next",
+    "@cerberus/icons": "npm:@jsr/cerberus__icons",
     "@pandacss/dev": "*",
     "react": "*",
     "react-dom": "*"

package/src/components/FieldMessage.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import type { HTMLAttributes } from 'react'
+import { cx } from '@cerberus/styled-system/css'
+import { fieldMessage } from '@cerberus/styled-system/recipes'
+import { useFieldContext } from '../context/field'
+
+/**
+ * This module contains the FieldMessage component.
+ * @module
+ */
+
+export interface FieldMessageProps
+  extends HTMLAttributes<HTMLParagraphElement> {
+  id: string
+}
+
+/**
+ * A component that provides feedback about the field.
+ * @description [FieldMessage Docs](https://cerberus.digitalu.design/react/field-message)
+ * @example
+ * ```tsx
+ * <Field>
+ *  <Label htmlFor="first_name">First Name</Label>
+ *  <Input aria-describedBy="help:first_name" id="first_name" type="text" />
+ *  <FieldMessage id="help:first_name">
+ *   This will only be used in your account information.
+ *  </FieldMessage>
+ * </Field>
+ * ```
+ */
+export function FieldMessage(props: FieldMessageProps) {
+  const { invalid } = useFieldContext()
+  return (
+    <small
+      {...props}
+      {...(invalid && { 'aria-invalid': true })}
+      className={cx(props.className, fieldMessage())}
+    />
+  )
+}

package/src/components/Input.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import type { InputHTMLAttributes } from 'react'
+import { WarningFilled } from '@cerberus/icons'
+import { input } from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus/styled-system/css'
+import { useFieldContext } from '../context/field'
+import { Show } from './Show'
+
+export interface InputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {
+  describedBy?: string
+  id: string
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export function Input(props: InputProps) {
+  const { describedBy, size, ...nativeProps } = props
+  const inputStyles = input({ size })
+  const { invalid, ...fieldStates } = useFieldContext()
+
+  return (
+    <div className={inputStyles.root}>
+      <input
+        {...nativeProps}
+        {...fieldStates}
+        {...(describedBy && { 'aria-describedby': describedBy })}
+        {...(invalid && { 'aria-invalid': true })}
+        className={cx('peer', nativeProps.className, inputStyles.input)}
+      />
+      <Show when={invalid}>
+        <WarningFilled className={inputStyles.icon} />
+      </Show>
+    </div>
+  )
+}

package/src/components/Label.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import type { HTMLAttributes, PropsWithChildren } from 'react'
+import { label } from '@cerberus/styled-system/recipes'
+import { css, cx } from '@cerberus/styled-system/css'
+import { useFieldContext } from '../context/field'
+import { Show } from './Show'
+import { hstack } from '@cerberus/styled-system/patterns'
+
+/**
+ * This module contains the Label component.
+ * @module
+ */
+
+export interface LabelProps extends HTMLAttributes<HTMLLabelElement> {
+  htmlFor: string
+  hidden?: boolean
+}
+
+/**
+ * A screen ready friendly label component.
+ * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
+ * @definition [Label docs](https://cerberus.digitalu.design/react/label)
+ * @example
+ * ```tsx
+ * <Field required>
+ *   <Label htmlFor="test">Test Label</Label>
+ * </Field>
+ * ```
+ */
+export function Label(props: PropsWithChildren<LabelProps>) {
+  const { hidden, ...nativeProps } = props
+  const { required } = useFieldContext()
+  const usage = hidden ? 'hidden' : 'visible'
+
+  return (
+    <label
+      {...nativeProps}
+      className={cx(
+        nativeProps.className,
+        label({ usage }),
+        hstack({
+          justify: 'space-between',
+        }),
+      )}
+    >
+      {props.children}
+      <Show when={required}>
+        <span
+          className={css({
+            color: 'neutral.text.100',
+            fontSize: 'inherit',
+          })}
+        >
+          (required)
+        </span>
+      </Show>
+    </label>
+  )
+}

package/src/context/field.tsx

@@ -9,7 +9,7 @@ import {
 
 export interface FieldContextValue {
   disabled?: boolean
-  readonly?: boolean
+  readOnly?: boolean
   required?: boolean
   invalid?: boolean
 }
@@ -22,11 +22,11 @@ export function Field(
   const value = useMemo(
     () => ({
       disabled: props.disabled,
-      readonly: props.readonly,
+      readOnly: props.readOnly,
       required: props.required,
       invalid: props.invalid,
     }),
-    [props.disabled, props.readonly, props.required, props.invalid],
+    [props.disabled, props.readOnly, props.required, props.invalid],
   )
 
   return (

package/src/index.ts

@@ -6,7 +6,10 @@
 // components
 
 export * from './components/Button'
+export * from './components/FieldMessage'
 export * from './components/IconButton'
+export * from './components/Input'
+export * from './components/Label'
 export * from './components/NavMenuTrigger'
 export * from './components/NavMenuList'
 export * from './components/NavMenuLink'