@commercetools/nimbus 0.0.0-canary-20250929125459 → 0.0.0-canary-20250930095152

package/dist/chunks/form-field-C6lWjdck.cjs.js

@@ -0,0 +1,11 @@
+"use strict";const o=require("react/jsx-runtime"),t=require("react"),H=require("@chakra-ui/react"),F=require("@chakra-ui/react/styled-system"),m=require("./Dialog-32GmWneq.cjs.js"),f=require("./box-CWni3A32.cjs.js"),q=require("./icon-button-0GLW7WtL.cjs.js"),b=require("@commercetools/nimbus-icons"),I=require("./useObjectRef-dXOJdONs.cjs.js"),L=require("./useField-DmqO9k7a.cjs.js"),s=t.createContext({context:{label:null,description:null,error:null,info:null,input:null},setContext:()=>{}}),M=`
+"label"
+"input"
+"description"
+"error"
+`,T=`
+"label input"
+"label description"
+"label error"
+`,W=F.defineSlotRecipe({slots:["root","label","input","description","error","popover"],className:"nimbus-ui-form-field",base:{root:{"--grid-gap":"spacing.100",display:"grid",width:"auto"},label:{gridArea:"label",fontWeight:"500",color:"neutral.11",fontSize:"var(--form-field-font-size)",lineHeight:"var(--form-field-line-height)"},input:{gridArea:"input"},description:{gridArea:"description",color:"neutral.11",fontSize:"var(--form-field-font-size)",lineHeight:"var(--form-field-line-height)"},error:{gridArea:"error",color:"critical.11",fontSize:"var(--form-field-font-size)",lineHeight:"var(--form-field-line-height)",display:"flex",gap:"100"},popover:{"--scrollbar-color":"colors.neutral.8","--scrollbar-bg":"colors.neutral.3",bg:"neutral.1",maxWidth:"xl",borderRadius:"200",boxShadow:"6",border:"solid-25",borderColor:"neutral.8",maxHeight:"40svh",overflow:"auto",scrollbarWidth:"thin",scrollbarColor:"var(--scrollbar-color) var(--scrollbar-bg)",focusRing:"outside"}},variants:{size:{md:{root:{"--form-field-font-size":"fontSizes.350","--form-field-line-height":"lineHeights.500"}},sm:{root:{"--form-field-font-size":"fontSizes.300","--form-field-line-height":"lineHeights.450"}}},direction:{column:{root:{gridTemplateAreas:M},input:{mt:"var(--grid-gap)"},description:{mt:"var(--grid-gap)"},error:{mt:"var(--grid-gap)"}},row:{root:{gridTemplateAreas:T,gridTemplateColumns:"auto 1fr",gridColumnGap:"200"},description:{mt:"var(--grid-gap)"},error:{mt:"var(--grid-gap)"}}}},defaultVariants:{direction:"column",size:"md"}}),{withProvider:k,withContext:c}=F.createSlotRecipeContext({recipe:W}),D=k("div","root"),N=c("div","label"),O=c("div","input"),V=c("div","description"),_=c("div","error"),G=c("div","popover"),g=function({ref:n,isInvalid:e,isRequired:l,isDisabled:d,isReadOnly:u,children:$,...z}){const E=t.useRef(null),P=I.$df56164dff5785e2$export$4338b53315abf666(H.mergeRefs(E,n)),[r,x]=t.useState({label:null,description:null,error:null,info:null,input:null,isInvalid:e,isRequired:l,isDisabled:d,isReadOnly:u}),p={description:r.description,errorMessage:r.error};r.label?p.label=r.label:(p["aria-label"]="empty-label",p["aria-labelledby"]="empty-label");const{labelProps:R,fieldProps:y,descriptionProps:B,errorMessageProps:w}=L.$2baaea4c71418dea$export$294aa081a6c6f55d(p);t.useEffect(()=>{x(a=>({...a,isInvalid:e,isRequired:l,isDisabled:d,isReadOnly:u}))},[e,l,d,u]);const A={...y,isInvalid:e,isRequired:l,isDisabled:d,isReadOnly:u};return o.jsx(s.Provider,{value:{context:r,setContext:x},children:o.jsxs(D,{ref:P,...z,children:[r.label&&o.jsxs(N,{...r.labelSlotProps,children:[o.jsxs("label",{...R,children:[r.label,l&&o.jsx("sup",{"aria-hidden":"true",children:"*"})]}),r.info&&o.jsxs(m.$de32f1b87079253c$export$2e1e1122cf0cba88,{children:[o.jsx(f.Box,{as:"span",display:"inline-block",position:"relative",width:"1ch",height:"1ch",ml:"200",children:o.jsx(f.Box,{as:"span",display:"inline-flex",position:"absolute",top:"50%",right:"50%",transform:"translate(50%, -50%)",children:o.jsx(q.IconButton,{"aria-label":"__MORE INFO",size:"2xs",tone:"info",variant:"link",children:o.jsx(b.HelpOutline,{})})})}),o.jsx(m.$07b14b47974efb58$export$5b6b19405a83ff9d,{children:o.jsx(G,{asChild:!0,children:o.jsx(m.$de32f1b87079253c$export$3ddf2d174ce01153,{children:o.jsx(f.Box,{p:"300",children:r.info})})})})]})]}),r.input&&o.jsx(O,{...r.inputSlotProps,children:t.Children.map(r.input,a=>t.isValidElement(a)?t.cloneElement(a,A):a)}),r.description&&o.jsx(V,{...B,...r.descriptionSlotProps,children:r.description}),e&&r.error&&o.jsxs(_,{...w,...r.errorSlotProps,children:[o.jsx(f.Box,{as:b.ErrorOutline,display:"inline-flex",boxSize:"400",verticalAlign:"text-bottom",mr:"100"}),r.error]}),$]})})},h=({children:i,...n})=>{const{setContext:e}=t.useContext(s);return t.useEffect(()=>{e(l=>({...l,label:i,labelSlotProps:n}))},[i,e]),null},v=({children:i,...n})=>{const{setContext:e}=t.useContext(s);return t.useEffect(()=>{e(l=>({...l,input:i,inputSlotProps:n}))},[i,e]),null},C=({children:i,...n})=>{const{setContext:e}=t.useContext(s);return t.useEffect(()=>{e(l=>({...l,description:i,descriptionSlotProps:n}))},[i,e]),null},S=({children:i,...n})=>{const{setContext:e}=t.useContext(s);return t.useEffect(()=>{e(l=>({...l,error:i,errorSlotProps:n}))},[i,e]),null},j=({children:i})=>{const{setContext:n}=t.useContext(s);return t.useEffect(()=>{n(e=>({...e,info:i}))},[i,n]),null},J={Root:g,Label:h,Input:v,Description:C,Error:S,InfoBox:j};exports.FormField=J;exports.FormFieldDescription=C;exports.FormFieldError=S;exports.FormFieldInfoBox=j;exports.FormFieldInput=v;exports.FormFieldLabel=h;exports.FormFieldRoot=g;
+//# sourceMappingURL=form-field-C6lWjdck.cjs.js.map

package/dist/chunks/form-field-C6lWjdck.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-C6lWjdck.cjs.js","sources":["../../src/components/form-field/components/form-field.context.tsx","../../src/components/form-field/form-field.recipe.tsx","../../src/components/form-field/form-field.slots.tsx","../../src/components/form-field/components/form-field.root.tsx","../../src/components/form-field/components/form-field.label.tsx","../../src/components/form-field/components/form-field.input.tsx","../../src/components/form-field/components/form-field.description.tsx","../../src/components/form-field/components/form-field.error.tsx","../../src/components/form-field/components/form-field.info-box.tsx","../../src/components/form-field/form-field.tsx"],"sourcesContent":["import { createContext, type ReactNode } from \"react\";\nimport type {\n  FormFieldDescriptionSlotProps,\n  FormFieldErrorSlotProps,\n  FormFieldInputSlotProps,\n  FormFieldLabelSlotProps,\n} from \"../form-field.slots\";\n\nexport type FormFieldContextPayloadType = {\n  label: ReactNode;\n  labelSlotProps?: FormFieldLabelSlotProps;\n  input: ReactNode;\n  inputSlotProps?: FormFieldInputSlotProps;\n  description: ReactNode;\n  descriptionSlotProps?: FormFieldDescriptionSlotProps;\n  error: ReactNode;\n  errorSlotProps?: FormFieldErrorSlotProps;\n  info: ReactNode;\n  isInvalid?: boolean;\n  isRequired?: boolean;\n  isDisabled?: boolean;\n  isReadOnly?: boolean;\n};\n\nexport type FormFieldContextType = {\n  context: FormFieldContextPayloadType;\n  setContext: React.Dispatch<React.SetStateAction<FormFieldContextPayloadType>>;\n};\n\nexport const FormFieldContext = createContext<FormFieldContextType>({\n  context: {\n    label: null,\n    description: null,\n    error: null,\n    info: null,\n    input: null,\n  },\n  setContext: () => {},\n});\n","import { defineSlotRecipe } from \"@chakra-ui/react/styled-system\";\n\nconst columnLayout = `\n\"label\"\n\"input\"\n\"description\"\n\"error\"\n`;\nconst rowLayout = `\n\"label input\"\n\"label description\"\n\"label error\"\n`;\n\n/**\n * Recipe configuration for the FormField component.\n * Defines the styling variants and base styles using Chakra UI's recipe system.\n */\nexport const formFieldRecipe = defineSlotRecipe({\n  slots: [\"root\", \"label\", \"input\", \"description\", \"error\", \"popover\"],\n  // Unique class name prefix for the component\n  className: \"nimbus-ui-form-field\",\n\n  base: {\n    root: {\n      \"--grid-gap\": \"spacing.100\",\n\n      display: \"grid\",\n      width: \"auto\",\n    },\n    label: {\n      gridArea: \"label\",\n      fontWeight: \"500\",\n      color: \"neutral.11\",\n      fontSize: \"var(--form-field-font-size)\",\n      lineHeight: \"var(--form-field-line-height)\",\n    },\n    input: {\n      gridArea: \"input\",\n    },\n    description: {\n      gridArea: \"description\",\n      color: \"neutral.11\",\n      fontSize: \"var(--form-field-font-size)\",\n      lineHeight: \"var(--form-field-line-height)\",\n    },\n    error: {\n      gridArea: \"error\",\n      color: \"critical.11\",\n      fontSize: \"var(--form-field-font-size)\",\n      lineHeight: \"var(--form-field-line-height)\",\n      display: \"flex\",\n      gap: \"100\",\n    },\n    popover: {\n      \"--scrollbar-color\": \"colors.neutral.8\",\n      \"--scrollbar-bg\": \"colors.neutral.3\",\n      bg: \"neutral.1\",\n      maxWidth: \"xl\",\n      borderRadius: \"200\",\n      boxShadow: \"6\",\n      border: \"solid-25\",\n      borderColor: \"neutral.8\",\n      maxHeight: \"40svh\",\n      overflow: \"auto\",\n      scrollbarWidth: \"thin\",\n      scrollbarColor: \"var(--scrollbar-color) var(--scrollbar-bg)\",\n      focusRing: \"outside\",\n    },\n  },\n\n  variants: {\n    size: {\n      md: {\n        root: {\n          \"--form-field-font-size\": \"fontSizes.350\",\n          \"--form-field-line-height\": \"lineHeights.500\",\n        },\n      },\n      sm: {\n        root: {\n          \"--form-field-font-size\": \"fontSizes.300\",\n          \"--form-field-line-height\": \"lineHeights.450\",\n        },\n      },\n    },\n    direction: {\n      column: {\n        root: {\n          gridTemplateAreas: columnLayout,\n        },\n        input: {\n          mt: \"var(--grid-gap)\",\n        },\n        description: {\n          mt: \"var(--grid-gap)\",\n        },\n        error: {\n          mt: \"var(--grid-gap)\",\n        },\n      },\n      row: {\n        root: {\n          gridTemplateAreas: rowLayout,\n          gridTemplateColumns: \"auto 1fr\",\n          gridColumnGap: \"200\",\n        },\n        description: {\n          mt: \"var(--grid-gap)\",\n        },\n        error: {\n          mt: \"var(--grid-gap)\",\n        },\n      },\n    },\n  },\n\n  // Default variant values when not explicitly specified\n  defaultVariants: {\n    direction: \"column\",\n    size: \"md\",\n  },\n});\n","/* eslint-disable @typescript-eslint/no-empty-object-type */\nimport {\n  type HTMLChakraProps,\n  type RecipeVariantProps,\n  type UnstyledProp,\n  createSlotRecipeContext,\n} from \"@chakra-ui/react/styled-system\";\n\nimport { formFieldRecipe } from \"./form-field.recipe\";\n\nconst { withProvider, withContext } = createSlotRecipeContext({\n  recipe: formFieldRecipe,\n});\n\n// Root slot\nexport interface FormFieldRootSlotProps\n  extends HTMLChakraProps<\n    \"div\",\n    RecipeVariantProps<typeof formFieldRecipe> & UnstyledProp\n  > {}\n\nexport const FormFieldRootSlot = withProvider<\n  HTMLDivElement,\n  FormFieldRootSlotProps\n>(\"div\", \"root\");\n\n// Label Slot\nexport interface FormFieldLabelSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldLabelSlot = withContext<\n  HTMLDivElement,\n  FormFieldLabelSlotProps\n>(\"div\", \"label\");\n\n// Input Slot\nexport interface FormFieldInputSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldInputSlot = withContext<\n  HTMLDivElement,\n  FormFieldInputSlotProps\n>(\"div\", \"input\");\n\n// Description Slot\nexport interface FormFieldDescriptionSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldDescriptionSlot = withContext<\n  HTMLDivElement,\n  FormFieldDescriptionSlotProps\n>(\"div\", \"description\");\n\n// Error Slot\nexport interface FormFieldErrorSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldErrorSlot = withContext<\n  HTMLDivElement,\n  FormFieldErrorSlotProps\n>(\"div\", \"error\");\n\n// Error Slot\nexport interface FormFieldPopoverSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldPopoverSlot = withContext<\n  HTMLDivElement,\n  FormFieldPopoverSlotProps\n>(\"div\", \"popover\");\n","import {\n  Children,\n  cloneElement,\n  isValidElement,\n  useEffect,\n  useState,\n  useRef,\n} from \"react\";\nimport type { FormFieldProps } from \"../form-field.types\";\nimport { useField, useObjectRef } from \"react-aria\";\nimport { mergeRefs } from \"@chakra-ui/react\";\nimport {\n  FormFieldContext,\n  type FormFieldContextPayloadType,\n} from \"./form-field.context\";\nimport {\n  FormFieldDescriptionSlot,\n  FormFieldErrorSlot,\n  FormFieldInputSlot,\n  FormFieldLabelSlot,\n  FormFieldPopoverSlot,\n  FormFieldRootSlot,\n} from \"../form-field.slots\";\nimport { Dialog, DialogTrigger, Popover } from \"react-aria-components\";\nimport { Box, IconButton } from \"@/components\";\nimport { ErrorOutline, HelpOutline } from \"@commercetools/nimbus-icons\";\n\n/**\n * # FormField\n *\n * displays miscellaneous inputs in a FormField context\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/formfield}\n */\nexport const FormFieldRoot = function FormFieldRoot({\n  ref: forwardedRef,\n  isInvalid,\n  isRequired,\n  isDisabled,\n  isReadOnly,\n  children,\n  ...props\n}: FormFieldProps) {\n  const localRef = useRef<HTMLDivElement>(null);\n  const ref = useObjectRef(mergeRefs(localRef, forwardedRef));\n  const [context, setContext] = useState<FormFieldContextPayloadType>({\n    label: null,\n    description: null,\n    error: null,\n    info: null,\n    input: null,\n    isInvalid,\n    isRequired,\n    isDisabled,\n    isReadOnly,\n  });\n\n  const useFieldArgs: Parameters<typeof useField>[0] = {\n    description: context.description,\n    errorMessage: context.error,\n  };\n\n  if (context.label) {\n    useFieldArgs.label = context.label;\n  } else {\n    // Context will always start out null, so we need to stub out some aria attributes\n    // FIXME: This is a hack to get the form field to work, but it's not the best solution\n    // FIXME: We should find a better way to handle this by redesigning the FormField component's structure\n    useFieldArgs[\"aria-label\"] = \"empty-label\";\n    useFieldArgs[\"aria-labelledby\"] = \"empty-label\";\n  }\n\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n    useField(useFieldArgs);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      isInvalid,\n      isRequired,\n      isDisabled,\n      isReadOnly,\n    }));\n  }, [isInvalid, isRequired, isDisabled, isReadOnly]);\n\n  const inputProps = {\n    ...fieldProps,\n    isInvalid,\n    isRequired,\n    isDisabled,\n    isReadOnly,\n  };\n\n  return (\n    <FormFieldContext.Provider value={{ context, setContext }}>\n      <FormFieldRootSlot ref={ref} {...props}>\n        {context.label && (\n          <FormFieldLabelSlot {...context.labelSlotProps}>\n            <label {...labelProps}>\n              {context.label}\n              {isRequired && <sup aria-hidden=\"true\">*</sup>}\n            </label>\n            {context.info && (\n              <DialogTrigger>\n                <Box\n                  as=\"span\"\n                  display=\"inline-block\"\n                  position=\"relative\"\n                  width=\"1ch\"\n                  height=\"1ch\"\n                  ml=\"200\"\n                >\n                  <Box\n                    as=\"span\"\n                    display=\"inline-flex\"\n                    position=\"absolute\"\n                    top=\"50%\"\n                    right=\"50%\"\n                    transform=\"translate(50%, -50%)\"\n                  >\n                    <IconButton\n                      aria-label=\"__MORE INFO\"\n                      size=\"2xs\"\n                      tone=\"info\"\n                      variant=\"link\"\n                    >\n                      <HelpOutline />\n                    </IconButton>\n                  </Box>\n                </Box>\n                <Popover>\n                  <FormFieldPopoverSlot asChild>\n                    <Dialog>\n                      <Box p=\"300\">{context.info}</Box>\n                    </Dialog>\n                  </FormFieldPopoverSlot>\n                </Popover>\n              </DialogTrigger>\n            )}\n          </FormFieldLabelSlot>\n        )}\n        {context.input && (\n          <FormFieldInputSlot {...context.inputSlotProps}>\n            {Children.map(context.input, (child) => {\n              // Important: Check if the child is a valid React element before cloning.\n              if (isValidElement(child)) {\n                return cloneElement(child, inputProps);\n              }\n              // If it's not a valid element (e.g., text node, null, undefined), return it as is.\n              return child;\n            })}\n          </FormFieldInputSlot>\n        )}\n        {context.description && (\n          <FormFieldDescriptionSlot\n            {...descriptionProps}\n            {...context.descriptionSlotProps}\n          >\n            {context.description}\n          </FormFieldDescriptionSlot>\n        )}\n        {isInvalid && context.error && (\n          <FormFieldErrorSlot\n            {...errorMessageProps}\n            {...context.errorSlotProps}\n          >\n            <Box\n              as={ErrorOutline}\n              display=\"inline-flex\"\n              boxSize=\"400\"\n              verticalAlign=\"text-bottom\"\n              mr=\"100\"\n            />\n            {context.error}\n          </FormFieldErrorSlot>\n        )}\n        {children}\n      </FormFieldRootSlot>\n    </FormFieldContext.Provider>\n  );\n};\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldLabelSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldLabel = ({\n  children,\n  ...labelSlotProps\n}: FormFieldLabelSlotProps) => {\n  const { setContext } = useContext(FormFieldContext);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      label: children,\n      labelSlotProps,\n    }));\n  }, [children, setContext]);\n\n  return null;\n};\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldInputSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldInput = ({\n  children,\n  ...inputSlotProps\n}: FormFieldInputSlotProps) => {\n  const { setContext } = useContext(FormFieldContext);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      input: children,\n      inputSlotProps,\n    }));\n  }, [children, setContext]);\n\n  return null;\n};\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldDescriptionSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldDescription = ({\n  children,\n  ...descriptionSlotProps\n}: FormFieldDescriptionSlotProps) => {\n  const { setContext } = useContext(FormFieldContext);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      description: children,\n      descriptionSlotProps,\n    }));\n  }, [children, setContext]);\n\n  return null;\n};\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldErrorSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldError = ({\n  children,\n  ...errorSlotProps\n}: FormFieldErrorSlotProps) => {\n  const { setContext } = useContext(FormFieldContext);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      error: children,\n      errorSlotProps,\n    }));\n  }, [children, setContext]);\n\n  return null;\n};\n","import { useContext, useEffect, type ReactNode } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\n\ntype FormFieldInfoBoxProps = {\n  /**\n   * The content to display in the InfoBox\n   */\n  children: ReactNode;\n};\n\nexport const FormFieldInfoBox = ({ children }: FormFieldInfoBoxProps) => {\n  const { setContext } = useContext(FormFieldContext);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      info: children,\n    }));\n  }, [children, setContext]);\n\n  return null;\n};\n","import { FormFieldRoot } from \"./components/form-field.root\";\nimport { FormFieldLabel } from \"./components/form-field.label\";\nimport { FormFieldInput } from \"./components/form-field.input\";\nimport { FormFieldDescription } from \"./components/form-field.description\";\nimport { FormFieldError } from \"./components/form-field.error\";\nimport { FormFieldInfoBox } from \"./components/form-field.info-box\";\n\nexport const FormField = {\n  Root: FormFieldRoot,\n  Label: FormFieldLabel,\n  Input: FormFieldInput,\n  Description: FormFieldDescription,\n  Error: FormFieldError,\n  InfoBox: FormFieldInfoBox,\n};\n\nexport {\n  FormFieldRoot as _FormFieldRoot,\n  FormFieldLabel as _FormFieldLabel,\n  FormFieldInput as _FormFieldInput,\n  FormFieldDescription as _FormFieldDescription,\n  FormFieldError as _FormFieldError,\n  FormFieldInfoBox as _FormFieldInfoBox,\n};\n"],"names":["FormFieldContext","createContext","columnLayout","rowLayout","formFieldRecipe","defineSlotRecipe","withProvider","withContext","createSlotRecipeContext","FormFieldRootSlot","FormFieldLabelSlot","FormFieldInputSlot","FormFieldDescriptionSlot","FormFieldErrorSlot","FormFieldPopoverSlot","FormFieldRoot","forwardedRef","isInvalid","isRequired","isDisabled","isReadOnly","children","props","localRef","useRef","ref","useObjectRef","mergeRefs","context","setContext","useState","useFieldArgs","labelProps","fieldProps","descriptionProps","errorMessageProps","useField","useEffect","prevContext","inputProps","jsx","jsxs","DialogTrigger","Box","IconButton","HelpOutline","Popover","Dialog","Children","child","isValidElement","cloneElement","ErrorOutline","FormFieldLabel","labelSlotProps","useContext","FormFieldInput","inputSlotProps","FormFieldDescription","descriptionSlotProps","FormFieldError","errorSlotProps","FormFieldInfoBox","FormField"],"mappings":"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"}

package/dist/chunks/form-field-bP4SYMaC.es.js

@@ -0,0 +1,319 @@
+import { jsx as l, jsxs as c } from "react/jsx-runtime";
+import { createContext as w, useRef as A, useState as E, useEffect as n, Children as y, isValidElement as H, cloneElement as R, useContext as d } from "react";
+import { mergeRefs as B } from "@chakra-ui/react";
+import { defineSlotRecipe as L, createSlotRecipeContext as I } from "@chakra-ui/react/styled-system";
+import { e as M, $ as T, a as W } from "./Dialog-CpUyTYgL.es.js";
+import { B as b } from "./box-DuBoAZvq.es.js";
+import { I as j } from "./icon-button-C_i4ydsN.es.js";
+import { HelpOutline as k, ErrorOutline as N } from "@commercetools/nimbus-icons";
+import { $ as V } from "./useObjectRef-CaJ5pgjX.es.js";
+import { $ as _ } from "./useField-Ce9zQxmx.es.js";
+const a = /* @__PURE__ */ w({
+  context: {
+    label: null,
+    description: null,
+    error: null,
+    info: null,
+    input: null
+  },
+  setContext: () => {
+  }
+}), G = `
+"label"
+"input"
+"description"
+"error"
+`, O = `
+"label input"
+"label description"
+"label error"
+`, D = /* @__PURE__ */ L({
+  slots: ["root", "label", "input", "description", "error", "popover"],
+  // Unique class name prefix for the component
+  className: "nimbus-ui-form-field",
+  base: {
+    root: {
+      "--grid-gap": "spacing.100",
+      display: "grid",
+      width: "auto"
+    },
+    label: {
+      gridArea: "label",
+      fontWeight: "500",
+      color: "neutral.11",
+      fontSize: "var(--form-field-font-size)",
+      lineHeight: "var(--form-field-line-height)"
+    },
+    input: {
+      gridArea: "input"
+    },
+    description: {
+      gridArea: "description",
+      color: "neutral.11",
+      fontSize: "var(--form-field-font-size)",
+      lineHeight: "var(--form-field-line-height)"
+    },
+    error: {
+      gridArea: "error",
+      color: "critical.11",
+      fontSize: "var(--form-field-font-size)",
+      lineHeight: "var(--form-field-line-height)",
+      display: "flex",
+      gap: "100"
+    },
+    popover: {
+      "--scrollbar-color": "colors.neutral.8",
+      "--scrollbar-bg": "colors.neutral.3",
+      bg: "neutral.1",
+      maxWidth: "xl",
+      borderRadius: "200",
+      boxShadow: "6",
+      border: "solid-25",
+      borderColor: "neutral.8",
+      maxHeight: "40svh",
+      overflow: "auto",
+      scrollbarWidth: "thin",
+      scrollbarColor: "var(--scrollbar-color) var(--scrollbar-bg)",
+      focusRing: "outside"
+    }
+  },
+  variants: {
+    size: {
+      md: {
+        root: {
+          "--form-field-font-size": "fontSizes.350",
+          "--form-field-line-height": "lineHeights.500"
+        }
+      },
+      sm: {
+        root: {
+          "--form-field-font-size": "fontSizes.300",
+          "--form-field-line-height": "lineHeights.450"
+        }
+      }
+    },
+    direction: {
+      column: {
+        root: {
+          gridTemplateAreas: G
+        },
+        input: {
+          mt: "var(--grid-gap)"
+        },
+        description: {
+          mt: "var(--grid-gap)"
+        },
+        error: {
+          mt: "var(--grid-gap)"
+        }
+      },
+      row: {
+        root: {
+          gridTemplateAreas: O,
+          gridTemplateColumns: "auto 1fr",
+          gridColumnGap: "200"
+        },
+        description: {
+          mt: "var(--grid-gap)"
+        },
+        error: {
+          mt: "var(--grid-gap)"
+        }
+      }
+    }
+  },
+  // Default variant values when not explicitly specified
+  defaultVariants: {
+    direction: "column",
+    size: "md"
+  }
+}), { withProvider: J, withContext: p } = /* @__PURE__ */ I({
+  recipe: D
+}), K = /* @__PURE__ */ J("div", "root"), Q = /* @__PURE__ */ p("div", "label"), U = /* @__PURE__ */ p("div", "input"), X = /* @__PURE__ */ p("div", "description"), Y = /* @__PURE__ */ p("div", "error"), Z = /* @__PURE__ */ p("div", "popover"), q = function({
+  ref: i,
+  isInvalid: r,
+  isRequired: t,
+  isDisabled: f,
+  isReadOnly: m,
+  children: h,
+  ...x
+}) {
+  const F = A(null), v = V(B(F, i)), [o, g] = E({
+    label: null,
+    description: null,
+    error: null,
+    info: null,
+    input: null,
+    isInvalid: r,
+    isRequired: t,
+    isDisabled: f,
+    isReadOnly: m
+  }), u = {
+    description: o.description,
+    errorMessage: o.error
+  };
+  o.label ? u.label = o.label : (u["aria-label"] = "empty-label", u["aria-labelledby"] = "empty-label");
+  const { labelProps: S, fieldProps: C, descriptionProps: $, errorMessageProps: z } = _(u);
+  n(() => {
+    g((s) => ({
+      ...s,
+      isInvalid: r,
+      isRequired: t,
+      isDisabled: f,
+      isReadOnly: m
+    }));
+  }, [r, t, f, m]);
+  const P = {
+    ...C,
+    isInvalid: r,
+    isRequired: t,
+    isDisabled: f,
+    isReadOnly: m
+  };
+  return /* @__PURE__ */ l(a.Provider, { value: { context: o, setContext: g }, children: /* @__PURE__ */ c(K, { ref: v, ...x, children: [
+    o.label && /* @__PURE__ */ c(Q, { ...o.labelSlotProps, children: [
+      /* @__PURE__ */ c("label", { ...S, children: [
+        o.label,
+        t && /* @__PURE__ */ l("sup", { "aria-hidden": "true", children: "*" })
+      ] }),
+      o.info && /* @__PURE__ */ c(M, { children: [
+        /* @__PURE__ */ l(
+          b,
+          {
+            as: "span",
+            display: "inline-block",
+            position: "relative",
+            width: "1ch",
+            height: "1ch",
+            ml: "200",
+            children: /* @__PURE__ */ l(
+              b,
+              {
+                as: "span",
+                display: "inline-flex",
+                position: "absolute",
+                top: "50%",
+                right: "50%",
+                transform: "translate(50%, -50%)",
+                children: /* @__PURE__ */ l(
+                  j,
+                  {
+                    "aria-label": "__MORE INFO",
+                    size: "2xs",
+                    tone: "info",
+                    variant: "link",
+                    children: /* @__PURE__ */ l(k, {})
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ l(T, { children: /* @__PURE__ */ l(Z, { asChild: !0, children: /* @__PURE__ */ l(W, { children: /* @__PURE__ */ l(b, { p: "300", children: o.info }) }) }) })
+      ] })
+    ] }),
+    o.input && /* @__PURE__ */ l(U, { ...o.inputSlotProps, children: y.map(o.input, (s) => H(s) ? R(s, P) : s) }),
+    o.description && /* @__PURE__ */ l(
+      X,
+      {
+        ...$,
+        ...o.descriptionSlotProps,
+        children: o.description
+      }
+    ),
+    r && o.error && /* @__PURE__ */ c(
+      Y,
+      {
+        ...z,
+        ...o.errorSlotProps,
+        children: [
+          /* @__PURE__ */ l(
+            b,
+            {
+              as: N,
+              display: "inline-flex",
+              boxSize: "400",
+              verticalAlign: "text-bottom",
+              mr: "100"
+            }
+          ),
+          o.error
+        ]
+      }
+    ),
+    h
+  ] }) });
+}, rr = ({
+  children: e,
+  ...i
+}) => {
+  const { setContext: r } = d(a);
+  return n(() => {
+    r((t) => ({
+      ...t,
+      label: e,
+      labelSlotProps: i
+    }));
+  }, [e, r]), null;
+}, or = ({
+  children: e,
+  ...i
+}) => {
+  const { setContext: r } = d(a);
+  return n(() => {
+    r((t) => ({
+      ...t,
+      input: e,
+      inputSlotProps: i
+    }));
+  }, [e, r]), null;
+}, er = ({
+  children: e,
+  ...i
+}) => {
+  const { setContext: r } = d(a);
+  return n(() => {
+    r((t) => ({
+      ...t,
+      description: e,
+      descriptionSlotProps: i
+    }));
+  }, [e, r]), null;
+}, tr = ({
+  children: e,
+  ...i
+}) => {
+  const { setContext: r } = d(a);
+  return n(() => {
+    r((t) => ({
+      ...t,
+      error: e,
+      errorSlotProps: i
+    }));
+  }, [e, r]), null;
+}, lr = ({ children: e }) => {
+  const { setContext: i } = d(a);
+  return n(() => {
+    i((r) => ({
+      ...r,
+      info: e
+    }));
+  }, [e, i]), null;
+}, br = {
+  Root: q,
+  Label: rr,
+  Input: or,
+  Description: er,
+  Error: tr,
+  InfoBox: lr
+};
+export {
+  br as F,
+  q as a,
+  rr as b,
+  or as c,
+  er as d,
+  tr as e,
+  lr as f
+};
+//# sourceMappingURL=form-field-bP4SYMaC.es.js.map

package/dist/chunks/form-field-bP4SYMaC.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-bP4SYMaC.es.js","sources":["../../src/components/form-field/components/form-field.context.tsx","../../src/components/form-field/form-field.recipe.tsx","../../src/components/form-field/form-field.slots.tsx","../../src/components/form-field/components/form-field.root.tsx","../../src/components/form-field/components/form-field.label.tsx","../../src/components/form-field/components/form-field.input.tsx","../../src/components/form-field/components/form-field.description.tsx","../../src/components/form-field/components/form-field.error.tsx","../../src/components/form-field/components/form-field.info-box.tsx","../../src/components/form-field/form-field.tsx"],"sourcesContent":["import { createContext, type ReactNode } from \"react\";\nimport type {\n  FormFieldDescriptionSlotProps,\n  FormFieldErrorSlotProps,\n  FormFieldInputSlotProps,\n  FormFieldLabelSlotProps,\n} from \"../form-field.slots\";\n\nexport type FormFieldContextPayloadType = {\n  label: ReactNode;\n  labelSlotProps?: FormFieldLabelSlotProps;\n  input: ReactNode;\n  inputSlotProps?: FormFieldInputSlotProps;\n  description: ReactNode;\n  descriptionSlotProps?: FormFieldDescriptionSlotProps;\n  error: ReactNode;\n  errorSlotProps?: FormFieldErrorSlotProps;\n  info: ReactNode;\n  isInvalid?: boolean;\n  isRequired?: boolean;\n  isDisabled?: boolean;\n  isReadOnly?: boolean;\n};\n\nexport type FormFieldContextType = {\n  context: FormFieldContextPayloadType;\n  setContext: React.Dispatch<React.SetStateAction<FormFieldContextPayloadType>>;\n};\n\nexport const FormFieldContext = createContext<FormFieldContextType>({\n  context: {\n    label: null,\n    description: null,\n    error: null,\n    info: null,\n    input: null,\n  },\n  setContext: () => {},\n});\n","import { defineSlotRecipe } from \"@chakra-ui/react/styled-system\";\n\nconst columnLayout = `\n\"label\"\n\"input\"\n\"description\"\n\"error\"\n`;\nconst rowLayout = `\n\"label input\"\n\"label description\"\n\"label error\"\n`;\n\n/**\n * Recipe configuration for the FormField component.\n * Defines the styling variants and base styles using Chakra UI's recipe system.\n */\nexport const formFieldRecipe = defineSlotRecipe({\n  slots: [\"root\", \"label\", \"input\", \"description\", \"error\", \"popover\"],\n  // Unique class name prefix for the component\n  className: \"nimbus-ui-form-field\",\n\n  base: {\n    root: {\n      \"--grid-gap\": \"spacing.100\",\n\n      display: \"grid\",\n      width: \"auto\",\n    },\n    label: {\n      gridArea: \"label\",\n      fontWeight: \"500\",\n      color: \"neutral.11\",\n      fontSize: \"var(--form-field-font-size)\",\n      lineHeight: \"var(--form-field-line-height)\",\n    },\n    input: {\n      gridArea: \"input\",\n    },\n    description: {\n      gridArea: \"description\",\n      color: \"neutral.11\",\n      fontSize: \"var(--form-field-font-size)\",\n      lineHeight: \"var(--form-field-line-height)\",\n    },\n    error: {\n      gridArea: \"error\",\n      color: \"critical.11\",\n      fontSize: \"var(--form-field-font-size)\",\n      lineHeight: \"var(--form-field-line-height)\",\n      display: \"flex\",\n      gap: \"100\",\n    },\n    popover: {\n      \"--scrollbar-color\": \"colors.neutral.8\",\n      \"--scrollbar-bg\": \"colors.neutral.3\",\n      bg: \"neutral.1\",\n      maxWidth: \"xl\",\n      borderRadius: \"200\",\n      boxShadow: \"6\",\n      border: \"solid-25\",\n      borderColor: \"neutral.8\",\n      maxHeight: \"40svh\",\n      overflow: \"auto\",\n      scrollbarWidth: \"thin\",\n      scrollbarColor: \"var(--scrollbar-color) var(--scrollbar-bg)\",\n      focusRing: \"outside\",\n    },\n  },\n\n  variants: {\n    size: {\n      md: {\n        root: {\n          \"--form-field-font-size\": \"fontSizes.350\",\n          \"--form-field-line-height\": \"lineHeights.500\",\n        },\n      },\n      sm: {\n        root: {\n          \"--form-field-font-size\": \"fontSizes.300\",\n          \"--form-field-line-height\": \"lineHeights.450\",\n        },\n      },\n    },\n    direction: {\n      column: {\n        root: {\n          gridTemplateAreas: columnLayout,\n        },\n        input: {\n          mt: \"var(--grid-gap)\",\n        },\n        description: {\n          mt: \"var(--grid-gap)\",\n        },\n        error: {\n          mt: \"var(--grid-gap)\",\n        },\n      },\n      row: {\n        root: {\n          gridTemplateAreas: rowLayout,\n          gridTemplateColumns: \"auto 1fr\",\n          gridColumnGap: \"200\",\n        },\n        description: {\n          mt: \"var(--grid-gap)\",\n        },\n        error: {\n          mt: \"var(--grid-gap)\",\n        },\n      },\n    },\n  },\n\n  // Default variant values when not explicitly specified\n  defaultVariants: {\n    direction: \"column\",\n    size: \"md\",\n  },\n});\n","/* eslint-disable @typescript-eslint/no-empty-object-type */\nimport {\n  type HTMLChakraProps,\n  type RecipeVariantProps,\n  type UnstyledProp,\n  createSlotRecipeContext,\n} from \"@chakra-ui/react/styled-system\";\n\nimport { formFieldRecipe } from \"./form-field.recipe\";\n\nconst { withProvider, withContext } = createSlotRecipeContext({\n  recipe: formFieldRecipe,\n});\n\n// Root slot\nexport interface FormFieldRootSlotProps\n  extends HTMLChakraProps<\n    \"div\",\n    RecipeVariantProps<typeof formFieldRecipe> & UnstyledProp\n  > {}\n\nexport const FormFieldRootSlot = withProvider<\n  HTMLDivElement,\n  FormFieldRootSlotProps\n>(\"div\", \"root\");\n\n// Label Slot\nexport interface FormFieldLabelSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldLabelSlot = withContext<\n  HTMLDivElement,\n  FormFieldLabelSlotProps\n>(\"div\", \"label\");\n\n// Input Slot\nexport interface FormFieldInputSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldInputSlot = withContext<\n  HTMLDivElement,\n  FormFieldInputSlotProps\n>(\"div\", \"input\");\n\n// Description Slot\nexport interface FormFieldDescriptionSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldDescriptionSlot = withContext<\n  HTMLDivElement,\n  FormFieldDescriptionSlotProps\n>(\"div\", \"description\");\n\n// Error Slot\nexport interface FormFieldErrorSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldErrorSlot = withContext<\n  HTMLDivElement,\n  FormFieldErrorSlotProps\n>(\"div\", \"error\");\n\n// Error Slot\nexport interface FormFieldPopoverSlotProps extends HTMLChakraProps<\"div\"> {}\nexport const FormFieldPopoverSlot = withContext<\n  HTMLDivElement,\n  FormFieldPopoverSlotProps\n>(\"div\", \"popover\");\n","import {\n  Children,\n  cloneElement,\n  isValidElement,\n  useEffect,\n  useState,\n  useRef,\n} from \"react\";\nimport type { FormFieldProps } from \"../form-field.types\";\nimport { useField, useObjectRef } from \"react-aria\";\nimport { mergeRefs } from \"@chakra-ui/react\";\nimport {\n  FormFieldContext,\n  type FormFieldContextPayloadType,\n} from \"./form-field.context\";\nimport {\n  FormFieldDescriptionSlot,\n  FormFieldErrorSlot,\n  FormFieldInputSlot,\n  FormFieldLabelSlot,\n  FormFieldPopoverSlot,\n  FormFieldRootSlot,\n} from \"../form-field.slots\";\nimport { Dialog, DialogTrigger, Popover } from \"react-aria-components\";\nimport { Box, IconButton } from \"@/components\";\nimport { ErrorOutline, HelpOutline } from \"@commercetools/nimbus-icons\";\n\n/**\n * # FormField\n *\n * displays miscellaneous inputs in a FormField context\n *\n * @see {@link https://nimbus-documentation.vercel.app/components/inputs/formfield}\n */\nexport const FormFieldRoot = function FormFieldRoot({\n  ref: forwardedRef,\n  isInvalid,\n  isRequired,\n  isDisabled,\n  isReadOnly,\n  children,\n  ...props\n}: FormFieldProps) {\n  const localRef = useRef<HTMLDivElement>(null);\n  const ref = useObjectRef(mergeRefs(localRef, forwardedRef));\n  const [context, setContext] = useState<FormFieldContextPayloadType>({\n    label: null,\n    description: null,\n    error: null,\n    info: null,\n    input: null,\n    isInvalid,\n    isRequired,\n    isDisabled,\n    isReadOnly,\n  });\n\n  const useFieldArgs: Parameters<typeof useField>[0] = {\n    description: context.description,\n    errorMessage: context.error,\n  };\n\n  if (context.label) {\n    useFieldArgs.label = context.label;\n  } else {\n    // Context will always start out null, so we need to stub out some aria attributes\n    // FIXME: This is a hack to get the form field to work, but it's not the best solution\n    // FIXME: We should find a better way to handle this by redesigning the FormField component's structure\n    useFieldArgs[\"aria-label\"] = \"empty-label\";\n    useFieldArgs[\"aria-labelledby\"] = \"empty-label\";\n  }\n\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } =\n    useField(useFieldArgs);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      isInvalid,\n      isRequired,\n      isDisabled,\n      isReadOnly,\n    }));\n  }, [isInvalid, isRequired, isDisabled, isReadOnly]);\n\n  const inputProps = {\n    ...fieldProps,\n    isInvalid,\n    isRequired,\n    isDisabled,\n    isReadOnly,\n  };\n\n  return (\n    <FormFieldContext.Provider value={{ context, setContext }}>\n      <FormFieldRootSlot ref={ref} {...props}>\n        {context.label && (\n          <FormFieldLabelSlot {...context.labelSlotProps}>\n            <label {...labelProps}>\n              {context.label}\n              {isRequired && <sup aria-hidden=\"true\">*</sup>}\n            </label>\n            {context.info && (\n              <DialogTrigger>\n                <Box\n                  as=\"span\"\n                  display=\"inline-block\"\n                  position=\"relative\"\n                  width=\"1ch\"\n                  height=\"1ch\"\n                  ml=\"200\"\n                >\n                  <Box\n                    as=\"span\"\n                    display=\"inline-flex\"\n                    position=\"absolute\"\n                    top=\"50%\"\n                    right=\"50%\"\n                    transform=\"translate(50%, -50%)\"\n                  >\n                    <IconButton\n                      aria-label=\"__MORE INFO\"\n                      size=\"2xs\"\n                      tone=\"info\"\n                      variant=\"link\"\n                    >\n                      <HelpOutline />\n                    </IconButton>\n                  </Box>\n                </Box>\n                <Popover>\n                  <FormFieldPopoverSlot asChild>\n                    <Dialog>\n                      <Box p=\"300\">{context.info}</Box>\n                    </Dialog>\n                  </FormFieldPopoverSlot>\n                </Popover>\n              </DialogTrigger>\n            )}\n          </FormFieldLabelSlot>\n        )}\n        {context.input && (\n          <FormFieldInputSlot {...context.inputSlotProps}>\n            {Children.map(context.input, (child) => {\n              // Important: Check if the child is a valid React element before cloning.\n              if (isValidElement(child)) {\n                return cloneElement(child, inputProps);\n              }\n              // If it's not a valid element (e.g., text node, null, undefined), return it as is.\n              return child;\n            })}\n          </FormFieldInputSlot>\n        )}\n        {context.description && (\n          <FormFieldDescriptionSlot\n            {...descriptionProps}\n            {...context.descriptionSlotProps}\n          >\n            {context.description}\n          </FormFieldDescriptionSlot>\n        )}\n        {isInvalid && context.error && (\n          <FormFieldErrorSlot\n            {...errorMessageProps}\n            {...context.errorSlotProps}\n          >\n            <Box\n              as={ErrorOutline}\n              display=\"inline-flex\"\n              boxSize=\"400\"\n              verticalAlign=\"text-bottom\"\n              mr=\"100\"\n            />\n            {context.error}\n          </FormFieldErrorSlot>\n        )}\n        {children}\n      </FormFieldRootSlot>\n    </FormFieldContext.Provider>\n  );\n};\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldLabelSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldLabel = ({\n  children,\n  ...labelSlotProps\n}: FormFieldLabelSlotProps) => {\n  const { setContext } = useContext(FormFieldContext);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      label: children,\n      labelSlotProps,\n    }));\n  }, [children, setContext]);\n\n  return null;\n};\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldInputSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldInput = ({\n  children,\n  ...inputSlotProps\n}: FormFieldInputSlotProps) => {\n  const { setContext } = useContext(FormFieldContext);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      input: children,\n      inputSlotProps,\n    }));\n  }, [children, setContext]);\n\n  return null;\n};\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldDescriptionSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldDescription = ({\n  children,\n  ...descriptionSlotProps\n}: FormFieldDescriptionSlotProps) => {\n  const { setContext } = useContext(FormFieldContext);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      description: children,\n      descriptionSlotProps,\n    }));\n  }, [children, setContext]);\n\n  return null;\n};\n","import { useContext, useEffect } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\nimport type { FormFieldErrorSlotProps } from \"../form-field.slots\";\n\nexport const FormFieldError = ({\n  children,\n  ...errorSlotProps\n}: FormFieldErrorSlotProps) => {\n  const { setContext } = useContext(FormFieldContext);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      error: children,\n      errorSlotProps,\n    }));\n  }, [children, setContext]);\n\n  return null;\n};\n","import { useContext, useEffect, type ReactNode } from \"react\";\nimport { FormFieldContext } from \"./form-field.context\";\n\ntype FormFieldInfoBoxProps = {\n  /**\n   * The content to display in the InfoBox\n   */\n  children: ReactNode;\n};\n\nexport const FormFieldInfoBox = ({ children }: FormFieldInfoBoxProps) => {\n  const { setContext } = useContext(FormFieldContext);\n\n  useEffect(() => {\n    setContext((prevContext) => ({\n      ...prevContext,\n      info: children,\n    }));\n  }, [children, setContext]);\n\n  return null;\n};\n","import { FormFieldRoot } from \"./components/form-field.root\";\nimport { FormFieldLabel } from \"./components/form-field.label\";\nimport { FormFieldInput } from \"./components/form-field.input\";\nimport { FormFieldDescription } from \"./components/form-field.description\";\nimport { FormFieldError } from \"./components/form-field.error\";\nimport { FormFieldInfoBox } from \"./components/form-field.info-box\";\n\nexport const FormField = {\n  Root: FormFieldRoot,\n  Label: FormFieldLabel,\n  Input: FormFieldInput,\n  Description: FormFieldDescription,\n  Error: FormFieldError,\n  InfoBox: FormFieldInfoBox,\n};\n\nexport {\n  FormFieldRoot as _FormFieldRoot,\n  FormFieldLabel as _FormFieldLabel,\n  FormFieldInput as _FormFieldInput,\n  FormFieldDescription as _FormFieldDescription,\n  FormFieldError as _FormFieldError,\n  FormFieldInfoBox as _FormFieldInfoBox,\n};\n"],"names":["FormFieldContext","createContext","columnLayout","rowLayout","formFieldRecipe","defineSlotRecipe","withProvider","withContext","createSlotRecipeContext","FormFieldRootSlot","FormFieldLabelSlot","FormFieldInputSlot","FormFieldDescriptionSlot","FormFieldErrorSlot","FormFieldPopoverSlot","FormFieldRoot","forwardedRef","isInvalid","isRequired","isDisabled","isReadOnly","children","props","localRef","useRef","ref","useObjectRef","mergeRefs","context","setContext","useState","useFieldArgs","labelProps","fieldProps","descriptionProps","errorMessageProps","useField","useEffect","prevContext","inputProps","jsx","jsxs","DialogTrigger","Box","IconButton","HelpOutline","Popover","Dialog","Children","child","isValidElement","cloneElement","ErrorOutline","FormFieldLabel","labelSlotProps","useContext","FormFieldInput","inputSlotProps","FormFieldDescription","descriptionSlotProps","FormFieldError","errorSlotProps","FormFieldInfoBox","FormField"],"mappings":"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"}

package/dist/chunks/make-element-focusable-BDByS8Na.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const s=require("react"),f=require("@chakra-ui/react"),l=require("./useObjectRef-dXOJdONs.cjs.js"),a=require("./mergeProps-BA5Cwf5w.cjs.js"),b=require("./useFocusable-DCgmQxS1.cjs.js"),c=function({ref:o,children:e,...r}){const n=s.useRef(null),t=l.$df56164dff5785e2$export$4338b53315abf666(f.mergeRefs(n,o)),{focusableProps:u}=b.$f645667febf57a63$export$4c014de7c8940b4c(r,t);return s.isValidElement(e)?s.cloneElement(e,a.$3ef42575df84b30b$export$9d1611c77c2fe928(u,e.props,{ref:t})):null};c.displayName="MakeElementFocusable";exports.MakeElementFocusable=c;
+//# sourceMappingURL=make-element-focusable-BDByS8Na.cjs.js.map

package/dist/chunks/make-element-focusable-BDByS8Na.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"make-element-focusable-BDByS8Na.cjs.js","sources":["../../src/components/tooltip/make-element-focusable.tsx"],"sourcesContent":["import {\n  cloneElement,\n  useRef,\n  type PropsWithChildren,\n  isValidElement,\n} from \"react\";\nimport {\n  mergeProps,\n  useObjectRef,\n  useFocusable,\n  type FocusableOptions,\n} from \"react-aria\";\n\nimport { mergeRefs } from \"@chakra-ui/react\";\n\nexport interface MakeElementFocusableProps\n  extends PropsWithChildren<FocusableOptions<HTMLElement>> {\n  /**\n   * React ref to be forwarded to the underlying element\n   */\n  ref?: React.Ref<HTMLElement>;\n}\n\n/**\n * MakeElementFocusable\n * ============================================================\n * A helper component that adds props from `react-aria`s `useFocusable` hook\n * to its child so that it can be used as a trigger element for a `Tooltip`\n *\n * Caveats:\n * - Using non-interactive elements as tooltip triggers is against ARIA best-practices,\n *   it is your responsibility to ensure that the underlying trigger element handles\n *   focus and hover interactions correctly for keyboard-only users\n *\n * Features:\n * - allows forwarding refs to the underlying DOM element\n * - accepts all native html 'HTMLElement' attributes (including aria- & data-attributes)\n *\n * Further Context:\n * - [React Aria Components Tooltip Documentation](https://react-spectrum.adobe.com/react-aria/Tooltip.html)\n * - [React Aria Components Issue re:Tooltip with custom trigger](https://github.com/adobe/react-spectrum/issues/5733#issuecomment-1918691983)\n * - [ARIA Tooltip Pattern](https://www.w3.org/TR/wai-aria-1.2/#tooltip)\n */\nexport const MakeElementFocusable = function MakeElementFocusable({\n  ref: forwardedRef,\n  children,\n  ...props\n}: MakeElementFocusableProps) {\n  const localRef = useRef<HTMLElement>(null);\n  const ref = useObjectRef(mergeRefs(localRef, forwardedRef));\n  const { focusableProps } = useFocusable(props, ref);\n\n  if (isValidElement(children)) {\n    return cloneElement(\n      children,\n      mergeProps(\n        focusableProps,\n        children.props as PropsWithChildren<FocusableOptions<HTMLElement>>,\n        { ref: ref }\n      )\n    );\n  }\n\n  return null;\n};\nMakeElementFocusable.displayName = \"MakeElementFocusable\";\n"],"names":["MakeElementFocusable","forwardedRef","children","props","localRef","useRef","ref","useObjectRef","mergeRefs","focusableProps","useFocusable","isValidElement","cloneElement","mergeProps"],"mappings":"sMA2CaA,EAAuB,SAA8B,CAChE,IAAKC,EACL,SAAAC,EACA,GAAGC,CACL,EAA8B,CAC5B,MAAMC,EAAWC,EAAAA,OAAoB,IAAI,EACnCC,EAAMC,EAAAA,0CAAaC,EAAAA,UAAUJ,EAAUH,CAAY,CAAC,EACpD,CAAE,eAAAQ,CAAA,EAAmBC,4CAAaP,EAAOG,CAAG,EAElD,OAAIK,EAAAA,eAAeT,CAAQ,EAClBU,EAAAA,aACLV,EACAW,EAAAA,0CACEJ,EACAP,EAAS,MACT,CAAE,IAAAI,CAAA,CAAS,CACb,EAIG,IACT,EACAN,EAAqB,YAAc"}

package/dist/chunks/make-element-focusable-BamCHW5U.es.js

@@ -0,0 +1,25 @@
+import { useRef as a, isValidElement as m, cloneElement as l } from "react";
+import { mergeRefs as c } from "@chakra-ui/react";
+import { $ as n } from "./useObjectRef-CaJ5pgjX.es.js";
+import { $ as p } from "./mergeProps-B_9syxhT.es.js";
+import { $ } from "./useFocusable-CrsD8ZcF.es.js";
+const b = function({
+  ref: f,
+  children: e,
+  ...r
+}) {
+  const t = a(null), o = n(c(t, f)), { focusableProps: s } = $(r, o);
+  return m(e) ? l(
+    e,
+    p(
+      s,
+      e.props,
+      { ref: o }
+    )
+  ) : null;
+};
+b.displayName = "MakeElementFocusable";
+export {
+  b as M
+};
+//# sourceMappingURL=make-element-focusable-BamCHW5U.es.js.map

package/dist/chunks/make-element-focusable-BamCHW5U.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"make-element-focusable-BamCHW5U.es.js","sources":["../../src/components/tooltip/make-element-focusable.tsx"],"sourcesContent":["import {\n  cloneElement,\n  useRef,\n  type PropsWithChildren,\n  isValidElement,\n} from \"react\";\nimport {\n  mergeProps,\n  useObjectRef,\n  useFocusable,\n  type FocusableOptions,\n} from \"react-aria\";\n\nimport { mergeRefs } from \"@chakra-ui/react\";\n\nexport interface MakeElementFocusableProps\n  extends PropsWithChildren<FocusableOptions<HTMLElement>> {\n  /**\n   * React ref to be forwarded to the underlying element\n   */\n  ref?: React.Ref<HTMLElement>;\n}\n\n/**\n * MakeElementFocusable\n * ============================================================\n * A helper component that adds props from `react-aria`s `useFocusable` hook\n * to its child so that it can be used as a trigger element for a `Tooltip`\n *\n * Caveats:\n * - Using non-interactive elements as tooltip triggers is against ARIA best-practices,\n *   it is your responsibility to ensure that the underlying trigger element handles\n *   focus and hover interactions correctly for keyboard-only users\n *\n * Features:\n * - allows forwarding refs to the underlying DOM element\n * - accepts all native html 'HTMLElement' attributes (including aria- & data-attributes)\n *\n * Further Context:\n * - [React Aria Components Tooltip Documentation](https://react-spectrum.adobe.com/react-aria/Tooltip.html)\n * - [React Aria Components Issue re:Tooltip with custom trigger](https://github.com/adobe/react-spectrum/issues/5733#issuecomment-1918691983)\n * - [ARIA Tooltip Pattern](https://www.w3.org/TR/wai-aria-1.2/#tooltip)\n */\nexport const MakeElementFocusable = function MakeElementFocusable({\n  ref: forwardedRef,\n  children,\n  ...props\n}: MakeElementFocusableProps) {\n  const localRef = useRef<HTMLElement>(null);\n  const ref = useObjectRef(mergeRefs(localRef, forwardedRef));\n  const { focusableProps } = useFocusable(props, ref);\n\n  if (isValidElement(children)) {\n    return cloneElement(\n      children,\n      mergeProps(\n        focusableProps,\n        children.props as PropsWithChildren<FocusableOptions<HTMLElement>>,\n        { ref: ref }\n      )\n    );\n  }\n\n  return null;\n};\nMakeElementFocusable.displayName = \"MakeElementFocusable\";\n"],"names":["MakeElementFocusable","forwardedRef","children","props","localRef","useRef","ref","useObjectRef","mergeRefs","focusableProps","useFocusable","isValidElement","cloneElement","mergeProps"],"mappings":";;;;;AA2CO,MAAMA,IAAuB,SAA8B;AAAA,EAChE,KAAKC;AAAA,EACL,UAAAC;AAAA,EACA,GAAGC;AACL,GAA8B;AAC5B,QAAMC,IAAWC,EAAoB,IAAI,GACnCC,IAAMC,EAAaC,EAAUJ,GAAUH,CAAY,CAAC,GACpD,EAAE,gBAAAQ,EAAA,IAAmBC,EAAaP,GAAOG,CAAG;AAElD,SAAIK,EAAeT,CAAQ,IAClBU;AAAA,IACLV;AAAA,IACAW;AAAAA,MACEJ;AAAA,MACAP,EAAS;AAAA,MACT,EAAE,KAAAI,EAAA;AAAA,IAAS;AAAA,EACb,IAIG;AACT;AACAN,EAAqB,cAAc;"}

package/dist/chunks/{money-input-B2X3PtKX.es.js → money-input-BN_yFB_R.es.js}

@@ -4,9 +4,9 @@ import { createSlotRecipeContext as di, useSlotRecipe as mi } from "@chakra-ui/r
 import { defineMessages as yi, useIntl as hi, FormattedMessage as Mi } from "react-intl";
 import { B as Si } from "./box-DuBoAZvq.es.js";
 import { b as w } from "./tooltip-B1YdruCE.es.js";
-import { M as bi } from "./make-element-focusable-C4ZHUSEU.es.js";
+import { M as bi } from "./make-element-focusable-BamCHW5U.es.js";
 import { N as Ci } from "./number-input-COfobs8H.es.js";
-import { S as B } from "./select-DpHmAHrs.es.js";
+import { S as B } from "./select-CwavXa9Y.es.js";
 import { HighPrecision as Ii } from "@commercetools/nimbus-icons";
 import { e as Pi } from "./extractStyleProps-DkXeCUuq.es.js";
 import { G as Ri } from "./group-CqfSQXe7.es.js";
@@ -614,4 +614,4 @@ u.isHighPrecision = Y;
 export {
   u as M
 };
-//# sourceMappingURL=money-input-B2X3PtKX.es.js.map
+//# sourceMappingURL=money-input-BN_yFB_R.es.js.map