@cerberus-design/react 0.1.3-next-86c9e1e → 0.1.3-next-9be4883

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-JCAWOVKD.js → chunk-46TCLT7U.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";
@@ -45,4 +45,4 @@ function Label(props) {
 export {
   Label
 };
-//# sourceMappingURL=chunk-JCAWOVKD.js.map
+//# sourceMappingURL=chunk-46TCLT7U.js.map

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/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-46TCLT7U.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-46TCLT7U.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-JCAWOVKD.js → chunk-46TCLT7U.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";
@@ -45,4 +45,4 @@ function Label(props) {
 export {
   Label
 };
-//# sourceMappingURL=chunk-JCAWOVKD.js.map
+//# sourceMappingURL=chunk-46TCLT7U.js.map

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/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-46TCLT7U.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-46TCLT7U.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-9be4883",
   "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/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'