@commercetools/nimbus 0.0.0-canary-20251114201426 → 0.0.0-canary-20251118141326

package/dist/patterns/fields/index.d.ts

@@ -1,2 +1,3 @@
 export * from './date-range-picker-field';
+export * from './money-input-field';
 export * from './text-input-field';

package/dist/patterns/fields/money-input-field/index.d.ts

@@ -0,0 +1,2 @@
+export { MoneyInputField } from './money-input-field';
+export type { MoneyInputFieldProps } from './money-input-field.types';

package/dist/patterns/fields/money-input-field/money-input-field.d.ts

@@ -0,0 +1,32 @@
+import { MoneyInputFieldProps } from './money-input-field.types';
+/**
+ * # MoneyInputField
+ *
+ * A pre-composed form field component that combines MoneyInput with FormField features
+ * like labels, descriptions, error handling, and validation feedback.
+ *
+ * This component provides a simple, flat API for monetary input use cases, combining
+ * a currency selector and amount input into a single field.
+ *
+ * Contains two focusable inputs: currency selector and amount input.
+ *
+ * @supportsStyleProps
+ *
+ * @example
+ * ```tsx
+ * <MoneyInputField
+ *   label="Product Price"
+ *   description="Enter the product price with currency"
+ *   currencies={["USD", "EUR", "GBP", "JPY"]}
+ *   value={{ amount: "99.99", currencyCode: "USD" }}
+ *   onValueChange={setValue}
+ *   errors={{ missing: true }}
+ *   touched={touched}
+ *   isRequired
+ * />
+ * ```
+ */
+export declare const MoneyInputField: {
+    ({ id, label, description, info, errors, renderError, touched, isRequired, isDisabled, isReadOnly, isInvalid, size, ...moneyInputProps }: MoneyInputFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/patterns/fields/money-input-field/money-input-field.types.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+import { MoneyInputProps } from '../../../components/money-input/money-input.types';
+import { FieldErrorsData } from '../../../components';
+import { FormFieldProps } from '../../../components/form-field';
+/**
+ * Props for the MoneyInputField component.
+ *
+ * Combines MoneyInput functionality with form field features like labels,
+ * descriptions, error handling, and validation feedback.
+ *
+ * Contains two focusable inputs: currency selector and amount input.
+ * Style props (margin, padding, width, etc.) are applied to the root container.
+ * Functional props (aria-*, data-*, id, isRequired, etc.) are applied to the form field wrapper.
+ */
+export type MoneyInputFieldProps = Omit<MoneyInputProps, "isInvalid" | "id" | "onChange"> & Pick<FormFieldProps, "isRequired" | "isInvalid" | "isDisabled" | "isReadOnly" | "id"> & {
+    /**
+     * Used as HTML name of the input component.
+     * Creates ${name}.amount and ${name}.currencyCode for the two inputs.
+     */
+    name?: string;
+    /**
+     * Label text for the input field (required for accessibility)
+     */
+    label: string | ReactNode;
+    /**
+     * Description text that appears below the input
+     */
+    description?: string | ReactNode;
+    /**
+     * Info content that appears in a popover when the info button is clicked.
+     * Info button will only be visible when this prop is passed.
+     */
+    info?: ReactNode;
+    /**
+     * List of possible currencies (required for field pattern).
+     * Creates a currency dropdown for selection.
+     */
+    currencies: string[];
+    /**
+     * Error object - only truthy values will be rendered
+     */
+    errors?: FieldErrorsData;
+    /**
+     * Custom error renderer function
+     */
+    renderError?: (errorKey: string) => ReactNode;
+    /**
+     * Indicates whether the field was touched. Errors will only be shown when the field was touched.
+     */
+    touched?: boolean;
+    /**
+     * Size of the money input
+     * @default "md"
+     */
+    size?: "sm" | "md";
+};

package/dist/patterns/fields/text-input-field/text-input-field.d.ts

@@ -23,6 +23,6 @@ import { TextInputFieldProps } from './text-input-field.types';
  * ```
  */
 export declare const TextInputField: {
-    ({ id, label, description, info, errors, onChange, renderError, touched, isRequired, isDisabled, isReadOnly, isInvalid, value, placeholder, type, ...rest }: TextInputFieldProps): import("react/jsx-runtime").JSX.Element;
+    ({ id, label, description, info, errors, onChange, renderError, touched, isRequired, isDisabled, isReadOnly, isInvalid, size, value, placeholder, type, ...rest }: TextInputFieldProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/patterns/fields/text-input-field/text-input-field.types.d.ts

@@ -41,4 +41,9 @@ export type TextInputFieldProps = Omit<TextInputProps, "type"> & Pick<FormFieldP
      */
     errors?: FieldErrorsData;
     renderError?: (errorKey: string) => ReactNode;
+    /**
+     * Size of the text input
+     * @default "md"
+     */
+    size?: "sm" | "md";
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools/nimbus",
-  "version": "0.0.0-canary-20251114201426",
+  "version": "0.0.0-canary-20251118141326",
   "main": "./dist/index.cjs",
   "module": "./dist/index.es.js",
   "type": "module",
@@ -102,8 +102,8 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4",
-    "@commercetools/nimbus-icons": "^0.0.0-canary-20251114201426",
-    "@commercetools/nimbus-tokens": "^0.0.0-canary-20251114201426"
+    "@commercetools/nimbus-icons": "^0.0.0-canary-20251118141326",
+    "@commercetools/nimbus-tokens": "^0.0.0-canary-20251118141326"
   },
   "peerDependencies": {
     "@chakra-ui/react": "^3.27.1",
@@ -113,8 +113,8 @@
     "slate-history": "^0.113.1",
     "slate-hyperscript": "^0.77.0",
     "slate-react": "^0.75.0",
-    "@commercetools/nimbus-icons": "^0.0.0-canary-20251114201426",
-    "@commercetools/nimbus-tokens": "^0.0.0-canary-20251114201426"
+    "@commercetools/nimbus-icons": "^0.0.0-canary-20251118141326",
+    "@commercetools/nimbus-tokens": "^0.0.0-canary-20251118141326"
   },
   "scripts": {
     "build": "pnpm run build-theme-typings && pnpm run build:lib",

package/dist/chunks/text-input-field-BGnzwfip.cjs.js

@@ -1,2 +0,0 @@
-"use strict";const e=require("react/jsx-runtime"),q=require("./text-input-C8lFGlq1.cjs.js"),r=require("./form-field-DV0-9fu9.cjs.js"),E=require("./field-errors-D2re_C_c.cjs.js"),n=({id:o,label:d,description:l,info:i,errors:s,onChange:F,renderError:x,touched:c=!1,isRequired:u=!1,isDisabled:a=!1,isReadOnly:j=!1,isInvalid:m=!1,value:I,placeholder:f,type:h="text",...p})=>{const t=c&&s&&Object.values(s).some(Boolean);return e.jsxs(r.FormField.Root,{id:o,isRequired:u,isDisabled:a,isReadOnly:j,isInvalid:t||m,children:[e.jsx(r.FormField.Label,{children:d}),e.jsx(r.FormField.Input,{children:e.jsx(q.TextInput,{...p,type:h,placeholder:f,onChange:F,value:I})}),l&&e.jsx(r.FormField.Description,{children:l}),t&&e.jsx(r.FormField.Error,{children:e.jsx(E.FieldErrors,{errors:s,renderError:x})}),i&&e.jsx(r.FormField.InfoBox,{children:i})]})};n.displayName="TextInputField";exports.TextInputField=n;
-//# sourceMappingURL=text-input-field-BGnzwfip.cjs.js.map

package/dist/chunks/text-input-field-BGnzwfip.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"text-input-field-BGnzwfip.cjs.js","sources":["../../src/patterns/fields/text-input-field/text-input-field.tsx"],"sourcesContent":["import { TextInput } from \"@/components/text-input/text-input\";\nimport type { TextInputFieldProps } from \"./text-input-field.types\";\nimport { FormField, FieldErrors } from \"@/components\";\n\n/**\n * # TextInputField\n *\n * A pre-composed form field component that combines TextInput with FormField features\n * like labels, descriptions, error handling, and validation feedback.\n *\n * This component provides a simple, flat API for common text input use cases and serves\n * as a drop-in replacement for UI-Kit's TextField, maintaining compatibility with the\n * same error format and localized error messages.\n *\n * @example\n * ```tsx\n * <TextInputField\n *   label=\"Project name\"\n *   description=\"Enter a descriptive name for your project\"\n *   placeholder=\"My Awesome Project\"\n *   value={value}\n *   onChange={setValue}\n *   errors={{ missing: true }}\n *   isRequired\n * />\n * ```\n */\n\nexport const TextInputField = ({\n  id,\n  label,\n  description,\n  info,\n  errors,\n  onChange,\n  renderError,\n  touched = false,\n  isRequired = false,\n  isDisabled = false,\n  isReadOnly = false,\n  isInvalid = false,\n  value,\n  placeholder,\n  type = \"text\",\n  ...rest\n}: TextInputFieldProps) => {\n  // Determine if we should show errors\n  const hasErrors = touched && errors && Object.values(errors).some(Boolean);\n\n  return (\n    <FormField.Root\n      id={id}\n      isRequired={isRequired}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      isInvalid={hasErrors || isInvalid}\n    >\n      <FormField.Label>{label}</FormField.Label>\n      <FormField.Input>\n        <TextInput\n          {...rest}\n          type={type}\n          placeholder={placeholder}\n          onChange={onChange}\n          value={value}\n        />\n      </FormField.Input>\n      {description && (\n        <FormField.Description>{description}</FormField.Description>\n      )}\n      {hasErrors && (\n        <FormField.Error>\n          <FieldErrors errors={errors} renderError={renderError} />\n        </FormField.Error>\n      )}\n      {info && <FormField.InfoBox>{info}</FormField.InfoBox>}\n    </FormField.Root>\n  );\n};\n\nTextInputField.displayName = \"TextInputField\";\n"],"names":["TextInputField","id","label","description","info","errors","onChange","renderError","touched","isRequired","isDisabled","isReadOnly","isInvalid","value","placeholder","type","rest","hasErrors","jsxs","FormField","jsx","TextInput","FieldErrors"],"mappings":"kLA4BaA,EAAiB,CAAC,CAC7B,GAAAC,EACA,MAAAC,EACA,YAAAC,EACA,KAAAC,EACA,OAAAC,EACA,SAAAC,EACA,YAAAC,EACA,QAAAC,EAAU,GACV,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,UAAAC,EAAY,GACZ,MAAAC,EACA,YAAAC,EACA,KAAAC,EAAO,OACP,GAAGC,CACL,IAA2B,CAEzB,MAAMC,EAAYT,GAAWH,GAAU,OAAO,OAAOA,CAAM,EAAE,KAAK,OAAO,EAEzE,OACEa,EAAAA,KAACC,EAAAA,UAAU,KAAV,CACC,GAAAlB,EACA,WAAAQ,EACA,WAAAC,EACA,WAAAC,EACA,UAAWM,GAAaL,EAExB,SAAA,CAAAQ,EAAAA,IAACD,EAAAA,UAAU,MAAV,CAAiB,SAAAjB,CAAA,CAAM,EACxBkB,EAAAA,IAACD,EAAAA,UAAU,MAAV,CACC,SAAAC,EAAAA,IAACC,EAAAA,UAAA,CACE,GAAGL,EACJ,KAAAD,EACA,YAAAD,EACA,SAAAR,EACA,MAAAO,CAAA,CAAA,EAEJ,EACCV,GACCiB,EAAAA,IAACD,EAAAA,UAAU,YAAV,CAAuB,SAAAhB,EAAY,EAErCc,SACEE,YAAU,MAAV,CACC,SAAAC,MAACE,EAAAA,YAAA,CAAY,OAAAjB,EAAgB,YAAAE,CAAA,CAA0B,CAAA,CACzD,EAEDH,GAAQgB,EAAAA,IAACD,EAAAA,UAAU,QAAV,CAAmB,SAAAf,CAAA,CAAK,CAAA,CAAA,CAAA,CAGxC,EAEAJ,EAAe,YAAc"}

package/dist/chunks/text-input-field-dIMJFukb.es.js

@@ -1,55 +0,0 @@
-import { jsxs as T, jsx as e } from "react/jsx-runtime";
-import { T as j } from "./text-input-DvvPItr3.es.js";
-import { F as r } from "./form-field-D-on43gD.es.js";
-import { F as E } from "./field-errors-ClQprmQz.es.js";
-const b = ({
-  id: a,
-  label: i,
-  description: o,
-  info: s,
-  errors: l,
-  onChange: n,
-  renderError: d,
-  touched: m = !1,
-  isRequired: p = !1,
-  isDisabled: c = !1,
-  isReadOnly: f = !1,
-  isInvalid: x = !1,
-  value: h,
-  placeholder: F,
-  type: u = "text",
-  ...I
-}) => {
-  const t = m && l && Object.values(l).some(Boolean);
-  return /* @__PURE__ */ T(
-    r.Root,
-    {
-      id: a,
-      isRequired: p,
-      isDisabled: c,
-      isReadOnly: f,
-      isInvalid: t || x,
-      children: [
-        /* @__PURE__ */ e(r.Label, { children: i }),
-        /* @__PURE__ */ e(r.Input, { children: /* @__PURE__ */ e(
-          j,
-          {
-            ...I,
-            type: u,
-            placeholder: F,
-            onChange: n,
-            value: h
-          }
-        ) }),
-        o && /* @__PURE__ */ e(r.Description, { children: o }),
-        t && /* @__PURE__ */ e(r.Error, { children: /* @__PURE__ */ e(E, { errors: l, renderError: d }) }),
-        s && /* @__PURE__ */ e(r.InfoBox, { children: s })
-      ]
-    }
-  );
-};
-b.displayName = "TextInputField";
-export {
-  b as T
-};
-//# sourceMappingURL=text-input-field-dIMJFukb.es.js.map

package/dist/chunks/text-input-field-dIMJFukb.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"text-input-field-dIMJFukb.es.js","sources":["../../src/patterns/fields/text-input-field/text-input-field.tsx"],"sourcesContent":["import { TextInput } from \"@/components/text-input/text-input\";\nimport type { TextInputFieldProps } from \"./text-input-field.types\";\nimport { FormField, FieldErrors } from \"@/components\";\n\n/**\n * # TextInputField\n *\n * A pre-composed form field component that combines TextInput with FormField features\n * like labels, descriptions, error handling, and validation feedback.\n *\n * This component provides a simple, flat API for common text input use cases and serves\n * as a drop-in replacement for UI-Kit's TextField, maintaining compatibility with the\n * same error format and localized error messages.\n *\n * @example\n * ```tsx\n * <TextInputField\n *   label=\"Project name\"\n *   description=\"Enter a descriptive name for your project\"\n *   placeholder=\"My Awesome Project\"\n *   value={value}\n *   onChange={setValue}\n *   errors={{ missing: true }}\n *   isRequired\n * />\n * ```\n */\n\nexport const TextInputField = ({\n  id,\n  label,\n  description,\n  info,\n  errors,\n  onChange,\n  renderError,\n  touched = false,\n  isRequired = false,\n  isDisabled = false,\n  isReadOnly = false,\n  isInvalid = false,\n  value,\n  placeholder,\n  type = \"text\",\n  ...rest\n}: TextInputFieldProps) => {\n  // Determine if we should show errors\n  const hasErrors = touched && errors && Object.values(errors).some(Boolean);\n\n  return (\n    <FormField.Root\n      id={id}\n      isRequired={isRequired}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      isInvalid={hasErrors || isInvalid}\n    >\n      <FormField.Label>{label}</FormField.Label>\n      <FormField.Input>\n        <TextInput\n          {...rest}\n          type={type}\n          placeholder={placeholder}\n          onChange={onChange}\n          value={value}\n        />\n      </FormField.Input>\n      {description && (\n        <FormField.Description>{description}</FormField.Description>\n      )}\n      {hasErrors && (\n        <FormField.Error>\n          <FieldErrors errors={errors} renderError={renderError} />\n        </FormField.Error>\n      )}\n      {info && <FormField.InfoBox>{info}</FormField.InfoBox>}\n    </FormField.Root>\n  );\n};\n\nTextInputField.displayName = \"TextInputField\";\n"],"names":["TextInputField","id","label","description","info","errors","onChange","renderError","touched","isRequired","isDisabled","isReadOnly","isInvalid","value","placeholder","type","rest","hasErrors","jsxs","FormField","jsx","TextInput","FieldErrors"],"mappings":";;;;AA4BO,MAAMA,IAAiB,CAAC;AAAA,EAC7B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,YAAAC,IAAa;AAAA,EACb,YAAAC,IAAa;AAAA,EACb,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,MAA2B;AAEzB,QAAMC,IAAYT,KAAWH,KAAU,OAAO,OAAOA,CAAM,EAAE,KAAK,OAAO;AAEzE,SACE,gBAAAa;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACC,IAAAlB;AAAA,MACA,YAAAQ;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,WAAWM,KAAaL;AAAA,MAExB,UAAA;AAAA,QAAA,gBAAAQ,EAACD,EAAU,OAAV,EAAiB,UAAAjB,EAAA,CAAM;AAAA,QACxB,gBAAAkB,EAACD,EAAU,OAAV,EACC,UAAA,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACE,GAAGL;AAAA,YACJ,MAAAD;AAAA,YACA,aAAAD;AAAA,YACA,UAAAR;AAAA,YACA,OAAAO;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,QACCV,KACC,gBAAAiB,EAACD,EAAU,aAAV,EAAuB,UAAAhB,GAAY;AAAA,QAErCc,uBACEE,EAAU,OAAV,EACC,UAAA,gBAAAC,EAACE,GAAA,EAAY,QAAAjB,GAAgB,aAAAE,EAAA,CAA0B,EAAA,CACzD;AAAA,QAEDH,KAAQ,gBAAAgB,EAACD,EAAU,SAAV,EAAmB,UAAAf,EAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxC;AAEAJ,EAAe,cAAc;"}