@cerberus-design/react 0.1.3-next-86c9e1e → 0.1.3-next-cb1c11b

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

@@ -56,6 +56,34 @@ declare interface FieldContextValue {
 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 }

package/build/legacy/chunk-6VY34K3P.js

@@ -0,0 +1,24 @@
+import {
+  useFieldContext
+} from "./chunk-KETL4ZJK.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-6VY34K3P.js.map

package/build/legacy/chunk-6VY34K3P.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-JCAWOVKD.js → chunk-EYZ3S36P.js}

@@ -1,9 +1,9 @@
-import {
-  useFieldContext
-} from "./chunk-KETL4ZJK.js";
 import {
   Show
 } from "./chunk-R4H3352X.js";
+import {
+  useFieldContext
+} from "./chunk-KETL4ZJK.js";
 
 // src/components/Label.tsx
 import { label } from "@cerberus/styled-system/recipes";
@@ -27,14 +27,14 @@ function Label(props) {
       ),
       children: [
         props.children,
-        /* @__PURE__ */ jsx(Show, { when: !required, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Show, { when: required, children: /* @__PURE__ */ jsx(
           "span",
           {
             className: css({
               color: "neutral.text.100",
               fontSize: "inherit"
             }),
-            children: "(optional)"
+            children: "(required)"
           }
         ) })
       ]
@@ -45,4 +45,4 @@ function Label(props) {
 export {
   Label
 };
-//# sourceMappingURL=chunk-JCAWOVKD.js.map
+//# sourceMappingURL=chunk-EYZ3S36P.js.map

package/build/legacy/{chunk-JCAWOVKD.js.map → chunk-EYZ3S36P.js.map}

@@ -1 +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          (optional)\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,CAAC,UACX;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":[]}
+{"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/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-6VY34K3P.js";
+import "../chunk-KETL4ZJK.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/Label.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   Label
-} from "../chunk-JCAWOVKD.js";
-import "../chunk-KETL4ZJK.js";
+} from "../chunk-EYZ3S36P.js";
 import "../chunk-R4H3352X.js";
+import "../chunk-KETL4ZJK.js";
 export {
   Label
 };

package/build/legacy/index.d.ts

@@ -1,5 +1,7 @@
 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';

package/build/legacy/index.js

@@ -1,3 +1,6 @@
+import {
+  NavMenuLink
+} from "./chunk-JA4IX7GN.js";
 import {
   NavMenuList,
   getPosition
@@ -23,25 +26,26 @@ import {
 import {
   Button
 } from "./chunk-XFWARXLU.js";
+import {
+  FieldMessage
+} from "./chunk-6VY34K3P.js";
 import {
   IconButton
 } from "./chunk-BPIYUAYS.js";
 import {
   Label
-} from "./chunk-JCAWOVKD.js";
+} from "./chunk-EYZ3S36P.js";
+import {
+  Show
+} from "./chunk-R4H3352X.js";
 import {
   Field,
   useFieldContext
 } from "./chunk-KETL4ZJK.js";
-import {
-  NavMenuLink
-} from "./chunk-JA4IX7GN.js";
-import {
-  Show
-} from "./chunk-R4H3352X.js";
 export {
   Button,
   Field,
+  FieldMessage,
   IconButton,
   Label,
   MODE_KEY,

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

@@ -56,6 +56,34 @@ declare interface FieldContextValue {
 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 }

package/build/modern/chunk-6VY34K3P.js

@@ -0,0 +1,24 @@
+import {
+  useFieldContext
+} from "./chunk-KETL4ZJK.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-6VY34K3P.js.map

package/build/modern/chunk-6VY34K3P.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-JCAWOVKD.js → chunk-EYZ3S36P.js}

@@ -1,9 +1,9 @@
-import {
-  useFieldContext
-} from "./chunk-KETL4ZJK.js";
 import {
   Show
 } from "./chunk-R4H3352X.js";
+import {
+  useFieldContext
+} from "./chunk-KETL4ZJK.js";
 
 // src/components/Label.tsx
 import { label } from "@cerberus/styled-system/recipes";
@@ -27,14 +27,14 @@ function Label(props) {
       ),
       children: [
         props.children,
-        /* @__PURE__ */ jsx(Show, { when: !required, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Show, { when: required, children: /* @__PURE__ */ jsx(
           "span",
           {
             className: css({
               color: "neutral.text.100",
               fontSize: "inherit"
             }),
-            children: "(optional)"
+            children: "(required)"
           }
         ) })
       ]
@@ -45,4 +45,4 @@ function Label(props) {
 export {
   Label
 };
-//# sourceMappingURL=chunk-JCAWOVKD.js.map
+//# sourceMappingURL=chunk-EYZ3S36P.js.map

package/build/modern/{chunk-JCAWOVKD.js.map → chunk-EYZ3S36P.js.map}

@@ -1 +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          (optional)\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,CAAC,UACX;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":[]}
+{"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/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-6VY34K3P.js";
+import "../chunk-KETL4ZJK.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/Label.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   Label
-} from "../chunk-JCAWOVKD.js";
-import "../chunk-KETL4ZJK.js";
+} from "../chunk-EYZ3S36P.js";
 import "../chunk-R4H3352X.js";
+import "../chunk-KETL4ZJK.js";
 export {
   Label
 };

package/build/modern/index.d.ts

@@ -1,5 +1,7 @@
 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';

package/build/modern/index.js

@@ -1,3 +1,6 @@
+import {
+  NavMenuLink
+} from "./chunk-JA4IX7GN.js";
 import {
   NavMenuList,
   getPosition
@@ -23,25 +26,26 @@ import {
 import {
   Button
 } from "./chunk-XFWARXLU.js";
+import {
+  FieldMessage
+} from "./chunk-6VY34K3P.js";
 import {
   IconButton
 } from "./chunk-BPIYUAYS.js";
 import {
   Label
-} from "./chunk-JCAWOVKD.js";
+} from "./chunk-EYZ3S36P.js";
+import {
+  Show
+} from "./chunk-R4H3352X.js";
 import {
   Field,
   useFieldContext
 } from "./chunk-KETL4ZJK.js";
-import {
-  NavMenuLink
-} from "./chunk-JA4IX7GN.js";
-import {
-  Show
-} from "./chunk-R4H3352X.js";
 export {
   Button,
   Field,
+  FieldMessage,
   IconButton,
   Label,
   MODE_KEY,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.1.3-next-86c9e1e",
+  "version": "0.1.3-next-cb1c11b",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,

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/Label.tsx

@@ -45,14 +45,14 @@ export function Label(props: PropsWithChildren<LabelProps>) {
       )}
     >
       {props.children}
-      <Show when={!required}>
+      <Show when={required}>
         <span
           className={css({
             color: 'neutral.text.100',
             fontSize: 'inherit',
           })}
         >
-          (optional)
+          (required)
         </span>
       </Show>
     </label>

package/src/index.ts

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