@cerberus-design/react 0.1.3-next-9be4883 → 0.1.3-next-59f45d9

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

@@ -2,6 +2,7 @@ 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';
@@ -49,7 +50,7 @@ export { Field as Field_alias_1 }
 
 declare interface FieldContextValue {
     disabled?: boolean;
-    readonly?: boolean;
+    readOnly?: boolean;
     required?: boolean;
     invalid?: boolean;
 }
@@ -120,6 +121,18 @@ 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)

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-46TCLT7U.js → chunk-OXVNTE4A.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-R4H3352X.js";
 import {
   useFieldContext
-} from "./chunk-KETL4ZJK.js";
+} from "./chunk-ZAU4JVLL.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-46TCLT7U.js.map
+//# sourceMappingURL=chunk-OXVNTE4A.js.map

package/build/{modern/chunk-46TCLT7U.js.map → legacy/chunk-OXVNTE4A.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/chunk-6VY34K3P.js → legacy/chunk-YVUZSAJG.js}

@@ -1,6 +1,6 @@
 import {
   useFieldContext
-} from "./chunk-KETL4ZJK.js";
+} from "./chunk-ZAU4JVLL.js";
 
 // src/components/FieldMessage.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -21,4 +21,4 @@ function FieldMessage(props) {
 export {
   FieldMessage
 };
-//# sourceMappingURL=chunk-6VY34K3P.js.map
+//# sourceMappingURL=chunk-YVUZSAJG.js.map

package/build/legacy/{chunk-KETL4ZJK.js → 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 → 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.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   FieldMessage
-} from "../chunk-6VY34K3P.js";
-import "../chunk-KETL4ZJK.js";
+} from "../chunk-YVUZSAJG.js";
+import "../chunk-ZAU4JVLL.js";
 export {
   FieldMessage
 };

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.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   Label
-} from "../chunk-46TCLT7U.js";
+} from "../chunk-OXVNTE4A.js";
 import "../chunk-R4H3352X.js";
-import "../chunk-KETL4ZJK.js";
+import "../chunk-ZAU4JVLL.js";
 export {
   Label
 };

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

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

package/build/legacy/index.js

@@ -1,3 +1,6 @@
+import {
+  Label
+} from "./chunk-OXVNTE4A.js";
 import {
   NavMenuLink
 } from "./chunk-JA4IX7GN.js";
@@ -28,25 +31,26 @@ import {
 } from "./chunk-XFWARXLU.js";
 import {
   FieldMessage
-} from "./chunk-6VY34K3P.js";
+} from "./chunk-YVUZSAJG.js";
 import {
   IconButton
 } from "./chunk-BPIYUAYS.js";
 import {
-  Label
-} from "./chunk-46TCLT7U.js";
+  Input
+} from "./chunk-LD5ZV46F.js";
 import {
   Show
 } from "./chunk-R4H3352X.js";
 import {
   Field,
   useFieldContext
-} from "./chunk-KETL4ZJK.js";
+} from "./chunk-ZAU4JVLL.js";
 export {
   Button,
   Field,
   FieldMessage,
   IconButton,
+  Input,
   Label,
   MODE_KEY,
   NavMenu,

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

@@ -2,6 +2,7 @@ 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';
@@ -49,7 +50,7 @@ export { Field as Field_alias_1 }
 
 declare interface FieldContextValue {
     disabled?: boolean;
-    readonly?: boolean;
+    readOnly?: boolean;
     required?: boolean;
     invalid?: boolean;
 }
@@ -120,6 +121,18 @@ 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)

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-46TCLT7U.js → chunk-OXVNTE4A.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-R4H3352X.js";
 import {
   useFieldContext
-} from "./chunk-KETL4ZJK.js";
+} from "./chunk-ZAU4JVLL.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-46TCLT7U.js.map
+//# sourceMappingURL=chunk-OXVNTE4A.js.map

package/build/{legacy/chunk-46TCLT7U.js.map → modern/chunk-OXVNTE4A.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/chunk-6VY34K3P.js → modern/chunk-YVUZSAJG.js}

@@ -1,6 +1,6 @@
 import {
   useFieldContext
-} from "./chunk-KETL4ZJK.js";
+} from "./chunk-ZAU4JVLL.js";
 
 // src/components/FieldMessage.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -21,4 +21,4 @@ function FieldMessage(props) {
 export {
   FieldMessage
 };
-//# sourceMappingURL=chunk-6VY34K3P.js.map
+//# sourceMappingURL=chunk-YVUZSAJG.js.map

package/build/modern/{chunk-KETL4ZJK.js → 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 → 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.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   FieldMessage
-} from "../chunk-6VY34K3P.js";
-import "../chunk-KETL4ZJK.js";
+} from "../chunk-YVUZSAJG.js";
+import "../chunk-ZAU4JVLL.js";
 export {
   FieldMessage
 };

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.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   Label
-} from "../chunk-46TCLT7U.js";
+} from "../chunk-OXVNTE4A.js";
 import "../chunk-R4H3352X.js";
-import "../chunk-KETL4ZJK.js";
+import "../chunk-ZAU4JVLL.js";
 export {
   Label
 };

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

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

package/build/modern/index.js

@@ -1,3 +1,6 @@
+import {
+  Label
+} from "./chunk-OXVNTE4A.js";
 import {
   NavMenuLink
 } from "./chunk-JA4IX7GN.js";
@@ -28,25 +31,26 @@ import {
 } from "./chunk-XFWARXLU.js";
 import {
   FieldMessage
-} from "./chunk-6VY34K3P.js";
+} from "./chunk-YVUZSAJG.js";
 import {
   IconButton
 } from "./chunk-BPIYUAYS.js";
 import {
-  Label
-} from "./chunk-46TCLT7U.js";
+  Input
+} from "./chunk-LD5ZV46F.js";
 import {
   Show
 } from "./chunk-R4H3352X.js";
 import {
   Field,
   useFieldContext
-} from "./chunk-KETL4ZJK.js";
+} from "./chunk-ZAU4JVLL.js";
 export {
   Button,
   Field,
   FieldMessage,
   IconButton,
+  Input,
   Label,
   MODE_KEY,
   NavMenu,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.1.3-next-9be4883",
+  "version": "0.1.3-next-59f45d9",
   "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/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

@@ -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/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

@@ -8,6 +8,7 @@
 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'