@commercetools/nimbus 0.0.9-rc7 → 0.0.10

package/dist/chunks/multiline-text-input-AjqfDDxC.cjs.js

@@ -0,0 +1,12 @@
+"use strict";const l=require("react/jsx-runtime"),s=require("react"),o=require("@chakra-ui/react"),C=require("./TextArea-C0Ozz1GB.cjs.js"),P=require("./extractStyleProps-lyk7D-zN.cjs.js"),S=require("@commercetools/nimbus-tokens"),H=require("./useObjectRef-4v2MxSjQ.cjs.js"),I=require("./useTextField-BMUp5FfB.cjs.js"),u=o.defineRecipe({className:"nimbus-multiline-text-input",base:{display:"block",overflowY:"auto",borderRadius:"200",colorPalette:"neutral",focusVisibleRing:"outside",bg:"transparent",outline:"none",boxShadow:"inset 0 0 0 var(--border-width) var(--border-color)",resize:"vertical",fontFamily:"inherit",_placeholder:{opacity:.5,color:"currentColor"},_disabled:{layerStyle:"disabled"},"&[data-invalid='true']":{"--border-width":"sizes.50","--border-color":"colors.critical.7",color:"critical.11"},"&::-webkit-resizer":{backgroundImage:`url("data:image/svg+xml,${encodeURIComponent(`
+        <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <mask id="mask0_4610_25787" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="-1" width="9" height="9">
+            <rect width="1.03391" height="4.13563" transform="matrix(0.716449 0.69764 -0.716449 0.69764 6.92578 4.05362)" fill="currentColor"/>
+            <rect width="1.03391" height="8.27125" transform="matrix(0.716448 0.69764 -0.716448 0.69764 5.87891 -0.0262451)" fill="currentColor"/>
+          </mask>
+          <g mask="url(#mask0_4610_25787)">
+            <rect width="8" height="8" fill="${S.designTokens.color["semantic-palettes"].primary.light[9]}"/>
+          </g>
+        </svg>
+      `)}")`,backgroundRepeat:"no-repeat",backgroundPosition:"center",backgroundSize:"200 200",width:"400",height:"400"}},variants:{size:{sm:{minH:800,textStyle:"sm",px:300,py:100},md:{minH:1e3,textStyle:"md",px:400,py:200}},variant:{solid:{"--border-width":"sizes.25","--border-color":"colors.neutral.7",backgroundColor:"neutral.1",_hover:{backgroundColor:"primary.2"}},ghost:{_hover:{backgroundColor:"primary.2"}}}},defaultVariants:{size:"md",variant:"solid"}}),{withContext:T}=o.createRecipeContext({recipe:u}),q=T("textarea"),d=p=>{const{ref:h,rows:m=1,autoGrow:r=!1,...g}=p,x=o.useRecipe({recipe:u}),f=s.useRef(null),t=H.$df56164dff5785e2$export$4338b53315abf666(o.mergeRefs(f,h)),[b,w]=x.splitVariantProps(g),[y,k]=P.extractStyleProps(w),{inputProps:v}=I.$2d73ec29415bd339$export$712718f7aec83d5(k,t),i=s.useCallback(()=>{const e=t.current;if(!e||!r)return;e.style.height="auto";const a=e.scrollHeight,R=window.getComputedStyle(e),c=parseInt(R.maxHeight),$=c?Math.min(a,c):a;e.style.height=`${$}px`},[r,t]);return s.useEffect(()=>{const e=t.current;if(!e||!r)return;i();const n=()=>{i()};return e.addEventListener("input",n),()=>{e.removeEventListener("input",n)}},[i,r,t]),l.jsx(q,{...b,...y,asChild:!0,children:l.jsx(C.$216918bed6669f72$export$f5c9f3c2c4054eec,{ref:t,rows:m,...v})})};d.displayName="MultilineTextInput";exports.MultilineTextInput=d;
+//# sourceMappingURL=multiline-text-input-AjqfDDxC.cjs.js.map

package/dist/chunks/multiline-text-input-AjqfDDxC.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiline-text-input-AjqfDDxC.cjs.js","sources":["../../src/components/multiline-text-input/multiline-text-input.recipe.tsx","../../src/components/multiline-text-input/multiline-text-input.slots.tsx","../../src/components/multiline-text-input/multiline-text-input.tsx"],"sourcesContent":["import { defineRecipe } from \"@chakra-ui/react\";\nimport { designTokens } from \"@commercetools/nimbus-tokens\";\n\n/**\n * Recipe configuration for the MultilineTextInput component.\n * Defines the styling variants and base styles using Chakra UI's recipe system.\n */\nexport const multilineTextInputRecipe = defineRecipe({\n  // Unique class name prefix for the component\n  className: \"nimbus-multiline-text-input\",\n\n  // Base styles applied to all instances of the component\n  base: {\n    display: \"block\",\n    overflowY: \"auto\",\n    borderRadius: \"200\",\n    colorPalette: \"neutral\",\n    focusVisibleRing: \"outside\",\n    bg: \"transparent\",\n    outline: \"none\",\n    boxShadow: \"inset 0 0 0 var(--border-width) var(--border-color)\",\n    resize: \"vertical\",\n    fontFamily: \"inherit\",\n    _placeholder: {\n      opacity: 0.5,\n      color: \"currentColor\",\n    },\n    _disabled: {\n      layerStyle: \"disabled\",\n    },\n    \"&[data-invalid='true']\": {\n      \"--border-width\": \"sizes.50\",\n      \"--border-color\": \"colors.critical.7\",\n      color: \"critical.11\",\n    },\n    \"&::-webkit-resizer\": {\n      backgroundImage: `url(\"data:image/svg+xml,${encodeURIComponent(`\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n          <mask id=\"mask0_4610_25787\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"-1\" y=\"-1\" width=\"9\" height=\"9\">\n            <rect width=\"1.03391\" height=\"4.13563\" transform=\"matrix(0.716449 0.69764 -0.716449 0.69764 6.92578 4.05362)\" fill=\"currentColor\"/>\n            <rect width=\"1.03391\" height=\"8.27125\" transform=\"matrix(0.716448 0.69764 -0.716448 0.69764 5.87891 -0.0262451)\" fill=\"currentColor\"/>\n          </mask>\n          <g mask=\"url(#mask0_4610_25787)\">\n            <rect width=\"8\" height=\"8\" fill=\"${designTokens.color[\"semantic-palettes\"].primary.light[9]}\"/>\n          </g>\n        </svg>\n      `)}\")`,\n      backgroundRepeat: \"no-repeat\",\n      backgroundPosition: \"center\",\n      backgroundSize: \"200 200\",\n      width: \"400\",\n      height: \"400\",\n    },\n  },\n\n  variants: {\n    size: {\n      sm: {\n        minH: 800,\n        textStyle: \"sm\",\n        px: 300,\n        py: 100,\n      },\n      md: {\n        minH: 1000,\n        textStyle: \"md\",\n        px: 400,\n        py: 200,\n      },\n    },\n\n    variant: {\n      solid: {\n        \"--border-width\": \"sizes.25\",\n        \"--border-color\": \"colors.neutral.7\",\n        backgroundColor: \"neutral.1\",\n        _hover: {\n          backgroundColor: \"primary.2\",\n        },\n      },\n      ghost: {\n        _hover: {\n          backgroundColor: \"primary.2\",\n        },\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: \"md\",\n    variant: \"solid\",\n  },\n});\n","import {\n  type HTMLChakraProps,\n  type RecipeVariantProps,\n  type UnstyledProp,\n  createRecipeContext,\n} from \"@chakra-ui/react\";\n\nimport { multilineTextInputRecipe } from \"./multiline-text-input.recipe\";\n\nexport interface MultilineTextInputRecipeProps\n  extends RecipeVariantProps<typeof multilineTextInputRecipe>,\n    UnstyledProp {}\n\nexport type MultilineTextInputRootSlotProps = HTMLChakraProps<\n  \"textarea\",\n  MultilineTextInputRecipeProps\n>;\n\nconst { withContext } = createRecipeContext({\n  recipe: multilineTextInputRecipe,\n});\n\n/**\n * Root component that provides the styling context for the MultilineTextInput component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const MultilineTextInputRootSlot = withContext<\n  HTMLTextAreaElement,\n  MultilineTextInputRootSlotProps\n>(\"textarea\");\n","import { useRef, useEffect, useCallback } from \"react\";\nimport { mergeRefs, useRecipe } from \"@chakra-ui/react\";\nimport { useObjectRef, useTextField } from \"react-aria\";\nimport { TextArea } from \"react-aria-components\";\nimport { extractStyleProps } from \"@/utils/extractStyleProps\";\n\nimport { MultilineTextInputRootSlot } from \"./multiline-text-input.slots\";\nimport type { MultilineTextInputProps } from \"./multiline-text-input.types\";\nimport { multilineTextInputRecipe } from \"./multiline-text-input.recipe\";\n\n/**\n * MultilineTextInput\n * ============================================================\n * A textarea component that takes in multiline text as input\n *\n * Features:\n *\n * - allows forwarding refs to the underlying DOM element\n * - accepts all native html 'HTMLTextAreaElement' attributes (including aria- & data-attributes)\n * - supports 'variants', 'sizes', etc. configured in the recipe\n * - allows overriding styles by using style-props\n * - supports auto-growing height based on content when `autoGrow` is enabled\n */\nexport const MultilineTextInput = (props: MultilineTextInputProps) => {\n  const { ref: forwardedRef, rows = 1, autoGrow = false, ...restProps } = props; // The default `rows` attribute for a textarea is 2, so we need to override it\n  const recipe = useRecipe({ recipe: multilineTextInputRecipe });\n\n  const localRef = useRef<HTMLTextAreaElement>(null);\n  const ref = useObjectRef(mergeRefs(localRef, forwardedRef));\n\n  const [recipeProps, remainingProps] = recipe.splitVariantProps(restProps);\n  const [styleProps, otherProps] = extractStyleProps(remainingProps);\n  const { inputProps } = useTextField<\"textarea\">(otherProps, ref);\n\n  // Auto-grow functionality\n  const adjustHeight = useCallback(() => {\n    const textarea = ref.current;\n    if (!textarea || !autoGrow) return;\n\n    // Reset height to auto to get the correct scrollHeight\n    textarea.style.height = \"auto\";\n\n    // Calculate the new height based on content\n    const contentHeight = textarea.scrollHeight;\n\n    // Always resize to fit content (both growing and shrinking)\n    // This ensures the textarea always fits the content exactly\n    const newHeight = contentHeight;\n\n    // Apply maxHeight constraint if specified\n    const computedStyle = window.getComputedStyle(textarea);\n    const maxHeightPxValue = parseInt(computedStyle.maxHeight);\n    const finalHeight = maxHeightPxValue\n      ? Math.min(newHeight, maxHeightPxValue)\n      : newHeight;\n\n    // Set the new height\n    textarea.style.height = `${finalHeight}px`;\n  }, [autoGrow, ref]);\n\n  // Set up auto-grow behavior with event listeners\n  useEffect(() => {\n    const textarea = ref.current;\n    if (!textarea || !autoGrow) return;\n\n    // Initial adjustment\n    adjustHeight();\n\n    // Add input event listener for real-time adjustments\n    const handleInput = () => {\n      adjustHeight();\n    };\n\n    textarea.addEventListener(\"input\", handleInput);\n\n    // Cleanup\n    return () => {\n      textarea.removeEventListener(\"input\", handleInput);\n    };\n  }, [adjustHeight, autoGrow, ref]);\n\n  return (\n    <MultilineTextInputRootSlot {...recipeProps} {...styleProps} asChild>\n      <TextArea ref={ref} rows={rows} {...inputProps} />\n    </MultilineTextInputRootSlot>\n  );\n};\n\nMultilineTextInput.displayName = \"MultilineTextInput\";\n"],"names":["multilineTextInputRecipe","defineRecipe","designTokens","withContext","createRecipeContext","MultilineTextInputRootSlot","MultilineTextInput","props","forwardedRef","rows","autoGrow","restProps","recipe","useRecipe","localRef","useRef","ref","useObjectRef","mergeRefs","recipeProps","remainingProps","styleProps","otherProps","extractStyleProps","inputProps","useTextField","adjustHeight","useCallback","textarea","newHeight","computedStyle","maxHeightPxValue","finalHeight","useEffect","handleInput","jsx","TextArea"],"mappings":"8TAOaA,EAA2BC,EAAAA,aAAa,CAEnD,UAAW,8BAGX,KAAM,CACJ,QAAS,QACT,UAAW,OACX,aAAc,MACd,aAAc,UACd,iBAAkB,UAClB,GAAI,cACJ,QAAS,OACT,UAAW,sDACX,OAAQ,WACR,WAAY,UACZ,aAAc,CACZ,QAAS,GACT,MAAO,cAAA,EAET,UAAW,CACT,WAAY,UAAA,EAEd,yBAA0B,CACxB,iBAAkB,WAClB,iBAAkB,oBAClB,MAAO,aAAA,EAET,qBAAsB,CACpB,gBAAiB,2BAA2B,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+CAOtBC,EAAAA,aAAa,MAAM,mBAAmB,EAAE,QAAQ,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA,OAGhG,CAAC,KACF,iBAAkB,YAClB,mBAAoB,SACpB,eAAgB,UAChB,MAAO,MACP,OAAQ,KAAA,CACV,EAGF,SAAU,CACR,KAAM,CACJ,GAAI,CACF,KAAM,IACN,UAAW,KACX,GAAI,IACJ,GAAI,GAAA,EAEN,GAAI,CACF,KAAM,IACN,UAAW,KACX,GAAI,IACJ,GAAI,GAAA,CACN,EAGF,QAAS,CACP,MAAO,CACL,iBAAkB,WAClB,iBAAkB,mBAClB,gBAAiB,YACjB,OAAQ,CACN,gBAAiB,WAAA,CACnB,EAEF,MAAO,CACL,OAAQ,CACN,gBAAiB,WAAA,CACnB,CACF,CACF,EAGF,gBAAiB,CACf,KAAM,KACN,QAAS,OAAA,CAEb,CAAC,EC1EK,CAAE,YAAAC,CAAA,EAAgBC,sBAAoB,CAC1C,OAAQJ,CACV,CAAC,EAMYK,EAA6BF,EAGxC,UAAU,ECNCG,EAAsBC,GAAmC,CACpE,KAAM,CAAE,IAAKC,EAAc,KAAAC,EAAO,EAAG,SAAAC,EAAW,GAAO,GAAGC,CAAA,EAAcJ,EAClEK,EAASC,EAAAA,UAAU,CAAE,OAAQb,EAA0B,EAEvDc,EAAWC,EAAAA,OAA4B,IAAI,EAC3CC,EAAMC,EAAAA,0CAAaC,EAAAA,UAAUJ,EAAUN,CAAY,CAAC,EAEpD,CAACW,EAAaC,CAAc,EAAIR,EAAO,kBAAkBD,CAAS,EAClE,CAACU,EAAYC,CAAU,EAAIC,EAAAA,kBAAkBH,CAAc,EAC3D,CAAE,WAAAI,CAAA,EAAeC,2CAAyBH,EAAYN,CAAG,EAGzDU,EAAeC,EAAAA,YAAY,IAAM,CACrC,MAAMC,EAAWZ,EAAI,QACrB,GAAI,CAACY,GAAY,CAAClB,EAAU,OAG5BkB,EAAS,MAAM,OAAS,OAOxB,MAAMC,EAJgBD,EAAS,aAOzBE,EAAgB,OAAO,iBAAiBF,CAAQ,EAChDG,EAAmB,SAASD,EAAc,SAAS,EACnDE,EAAcD,EAChB,KAAK,IAAIF,EAAWE,CAAgB,EACpCF,EAGJD,EAAS,MAAM,OAAS,GAAGI,CAAW,IAAA,EACrC,CAACtB,EAAUM,CAAG,CAAC,EAGlBiB,OAAAA,EAAAA,UAAU,IAAM,CACd,MAAML,EAAWZ,EAAI,QACrB,GAAI,CAACY,GAAY,CAAClB,EAAU,OAG5BgB,EAAA,EAGA,MAAMQ,EAAc,IAAM,CACxBR,EAAA,CAAa,EAGf,OAAAE,EAAS,iBAAiB,QAASM,CAAW,EAGvC,IAAM,CACXN,EAAS,oBAAoB,QAASM,CAAW,CAAA,CACnD,EACC,CAACR,EAAchB,EAAUM,CAAG,CAAC,EAG9BmB,EAAAA,IAAC9B,EAAA,CAA4B,GAAGc,EAAc,GAAGE,EAAY,QAAO,GAClE,SAAAc,EAAAA,IAACC,EAAAA,0CAAA,CAAS,IAAApB,EAAU,KAAAP,EAAa,GAAGe,EAAY,EAClD,CAEJ,EAEAlB,EAAmB,YAAc"}

package/dist/chunks/multiline-text-input-CIHvD3Oz.es.js

@@ -0,0 +1,116 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as v, useCallback as $, useEffect as C } from "react";
+import { defineRecipe as R, createRecipeContext as P, useRecipe as H, mergeRefs as S } from "@chakra-ui/react";
+import { $ as I } from "./TextArea-BeSyeRBk.es.js";
+import { e as _ } from "./extractStyleProps-CxgBrz3O.es.js";
+import { designTokens as z } from "@commercetools/nimbus-tokens";
+import { $ as M } from "./useObjectRef-CaJ5pgjX.es.js";
+import { $ as T } from "./useTextField-CtQSL6tL.es.js";
+const l = /* @__PURE__ */ R({
+  // Unique class name prefix for the component
+  className: "nimbus-multiline-text-input",
+  // Base styles applied to all instances of the component
+  base: {
+    display: "block",
+    overflowY: "auto",
+    borderRadius: "200",
+    colorPalette: "neutral",
+    focusVisibleRing: "outside",
+    bg: "transparent",
+    outline: "none",
+    boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
+    resize: "vertical",
+    fontFamily: "inherit",
+    _placeholder: {
+      opacity: 0.5,
+      color: "currentColor"
+    },
+    _disabled: {
+      layerStyle: "disabled"
+    },
+    "&[data-invalid='true']": {
+      "--border-width": "sizes.50",
+      "--border-color": "colors.critical.7",
+      color: "critical.11"
+    },
+    "&::-webkit-resizer": {
+      backgroundImage: `url("data:image/svg+xml,${/* @__PURE__ */ encodeURIComponent(`
+        <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+          <mask id="mask0_4610_25787" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="-1" width="9" height="9">
+            <rect width="1.03391" height="4.13563" transform="matrix(0.716449 0.69764 -0.716449 0.69764 6.92578 4.05362)" fill="currentColor"/>
+            <rect width="1.03391" height="8.27125" transform="matrix(0.716448 0.69764 -0.716448 0.69764 5.87891 -0.0262451)" fill="currentColor"/>
+          </mask>
+          <g mask="url(#mask0_4610_25787)">
+            <rect width="8" height="8" fill="${z.color["semantic-palettes"].primary.light[9]}"/>
+          </g>
+        </svg>
+      `)}")`,
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "center",
+      backgroundSize: "200 200",
+      width: "400",
+      height: "400"
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        minH: 800,
+        textStyle: "sm",
+        px: 300,
+        py: 100
+      },
+      md: {
+        minH: 1e3,
+        textStyle: "md",
+        px: 400,
+        py: 200
+      }
+    },
+    variant: {
+      solid: {
+        "--border-width": "sizes.25",
+        "--border-color": "colors.neutral.7",
+        backgroundColor: "neutral.1",
+        _hover: {
+          backgroundColor: "primary.2"
+        }
+      },
+      ghost: {
+        _hover: {
+          backgroundColor: "primary.2"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "solid"
+  }
+}), { withContext: V } = /* @__PURE__ */ P({
+  recipe: l
+}), E = /* @__PURE__ */ V("textarea"), U = (c) => {
+  const { ref: d, rows: p = 1, autoGrow: r = !1, ...m } = c, u = H({ recipe: l }), h = v(null), t = M(S(h, d)), [f, g] = u.splitVariantProps(m), [x, b] = _(g), { inputProps: w } = T(b, t), o = $(() => {
+    const e = t.current;
+    if (!e || !r) return;
+    e.style.height = "auto";
+    const n = e.scrollHeight, y = window.getComputedStyle(e), s = parseInt(y.maxHeight), k = s ? Math.min(n, s) : n;
+    e.style.height = `${k}px`;
+  }, [r, t]);
+  return C(() => {
+    const e = t.current;
+    if (!e || !r) return;
+    o();
+    const i = () => {
+      o();
+    };
+    return e.addEventListener("input", i), () => {
+      e.removeEventListener("input", i);
+    };
+  }, [o, r, t]), /* @__PURE__ */ a(E, { ...f, ...x, asChild: !0, children: /* @__PURE__ */ a(I, { ref: t, rows: p, ...w }) });
+};
+U.displayName = "MultilineTextInput";
+export {
+  U as M
+};
+//# sourceMappingURL=multiline-text-input-CIHvD3Oz.es.js.map

package/dist/chunks/multiline-text-input-CIHvD3Oz.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiline-text-input-CIHvD3Oz.es.js","sources":["../../src/components/multiline-text-input/multiline-text-input.recipe.tsx","../../src/components/multiline-text-input/multiline-text-input.slots.tsx","../../src/components/multiline-text-input/multiline-text-input.tsx"],"sourcesContent":["import { defineRecipe } from \"@chakra-ui/react\";\nimport { designTokens } from \"@commercetools/nimbus-tokens\";\n\n/**\n * Recipe configuration for the MultilineTextInput component.\n * Defines the styling variants and base styles using Chakra UI's recipe system.\n */\nexport const multilineTextInputRecipe = defineRecipe({\n  // Unique class name prefix for the component\n  className: \"nimbus-multiline-text-input\",\n\n  // Base styles applied to all instances of the component\n  base: {\n    display: \"block\",\n    overflowY: \"auto\",\n    borderRadius: \"200\",\n    colorPalette: \"neutral\",\n    focusVisibleRing: \"outside\",\n    bg: \"transparent\",\n    outline: \"none\",\n    boxShadow: \"inset 0 0 0 var(--border-width) var(--border-color)\",\n    resize: \"vertical\",\n    fontFamily: \"inherit\",\n    _placeholder: {\n      opacity: 0.5,\n      color: \"currentColor\",\n    },\n    _disabled: {\n      layerStyle: \"disabled\",\n    },\n    \"&[data-invalid='true']\": {\n      \"--border-width\": \"sizes.50\",\n      \"--border-color\": \"colors.critical.7\",\n      color: \"critical.11\",\n    },\n    \"&::-webkit-resizer\": {\n      backgroundImage: `url(\"data:image/svg+xml,${encodeURIComponent(`\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n          <mask id=\"mask0_4610_25787\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"-1\" y=\"-1\" width=\"9\" height=\"9\">\n            <rect width=\"1.03391\" height=\"4.13563\" transform=\"matrix(0.716449 0.69764 -0.716449 0.69764 6.92578 4.05362)\" fill=\"currentColor\"/>\n            <rect width=\"1.03391\" height=\"8.27125\" transform=\"matrix(0.716448 0.69764 -0.716448 0.69764 5.87891 -0.0262451)\" fill=\"currentColor\"/>\n          </mask>\n          <g mask=\"url(#mask0_4610_25787)\">\n            <rect width=\"8\" height=\"8\" fill=\"${designTokens.color[\"semantic-palettes\"].primary.light[9]}\"/>\n          </g>\n        </svg>\n      `)}\")`,\n      backgroundRepeat: \"no-repeat\",\n      backgroundPosition: \"center\",\n      backgroundSize: \"200 200\",\n      width: \"400\",\n      height: \"400\",\n    },\n  },\n\n  variants: {\n    size: {\n      sm: {\n        minH: 800,\n        textStyle: \"sm\",\n        px: 300,\n        py: 100,\n      },\n      md: {\n        minH: 1000,\n        textStyle: \"md\",\n        px: 400,\n        py: 200,\n      },\n    },\n\n    variant: {\n      solid: {\n        \"--border-width\": \"sizes.25\",\n        \"--border-color\": \"colors.neutral.7\",\n        backgroundColor: \"neutral.1\",\n        _hover: {\n          backgroundColor: \"primary.2\",\n        },\n      },\n      ghost: {\n        _hover: {\n          backgroundColor: \"primary.2\",\n        },\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: \"md\",\n    variant: \"solid\",\n  },\n});\n","import {\n  type HTMLChakraProps,\n  type RecipeVariantProps,\n  type UnstyledProp,\n  createRecipeContext,\n} from \"@chakra-ui/react\";\n\nimport { multilineTextInputRecipe } from \"./multiline-text-input.recipe\";\n\nexport interface MultilineTextInputRecipeProps\n  extends RecipeVariantProps<typeof multilineTextInputRecipe>,\n    UnstyledProp {}\n\nexport type MultilineTextInputRootSlotProps = HTMLChakraProps<\n  \"textarea\",\n  MultilineTextInputRecipeProps\n>;\n\nconst { withContext } = createRecipeContext({\n  recipe: multilineTextInputRecipe,\n});\n\n/**\n * Root component that provides the styling context for the MultilineTextInput component.\n * Uses Chakra UI's recipe context system for consistent styling across instances.\n */\nexport const MultilineTextInputRootSlot = withContext<\n  HTMLTextAreaElement,\n  MultilineTextInputRootSlotProps\n>(\"textarea\");\n","import { useRef, useEffect, useCallback } from \"react\";\nimport { mergeRefs, useRecipe } from \"@chakra-ui/react\";\nimport { useObjectRef, useTextField } from \"react-aria\";\nimport { TextArea } from \"react-aria-components\";\nimport { extractStyleProps } from \"@/utils/extractStyleProps\";\n\nimport { MultilineTextInputRootSlot } from \"./multiline-text-input.slots\";\nimport type { MultilineTextInputProps } from \"./multiline-text-input.types\";\nimport { multilineTextInputRecipe } from \"./multiline-text-input.recipe\";\n\n/**\n * MultilineTextInput\n * ============================================================\n * A textarea component that takes in multiline text as input\n *\n * Features:\n *\n * - allows forwarding refs to the underlying DOM element\n * - accepts all native html 'HTMLTextAreaElement' attributes (including aria- & data-attributes)\n * - supports 'variants', 'sizes', etc. configured in the recipe\n * - allows overriding styles by using style-props\n * - supports auto-growing height based on content when `autoGrow` is enabled\n */\nexport const MultilineTextInput = (props: MultilineTextInputProps) => {\n  const { ref: forwardedRef, rows = 1, autoGrow = false, ...restProps } = props; // The default `rows` attribute for a textarea is 2, so we need to override it\n  const recipe = useRecipe({ recipe: multilineTextInputRecipe });\n\n  const localRef = useRef<HTMLTextAreaElement>(null);\n  const ref = useObjectRef(mergeRefs(localRef, forwardedRef));\n\n  const [recipeProps, remainingProps] = recipe.splitVariantProps(restProps);\n  const [styleProps, otherProps] = extractStyleProps(remainingProps);\n  const { inputProps } = useTextField<\"textarea\">(otherProps, ref);\n\n  // Auto-grow functionality\n  const adjustHeight = useCallback(() => {\n    const textarea = ref.current;\n    if (!textarea || !autoGrow) return;\n\n    // Reset height to auto to get the correct scrollHeight\n    textarea.style.height = \"auto\";\n\n    // Calculate the new height based on content\n    const contentHeight = textarea.scrollHeight;\n\n    // Always resize to fit content (both growing and shrinking)\n    // This ensures the textarea always fits the content exactly\n    const newHeight = contentHeight;\n\n    // Apply maxHeight constraint if specified\n    const computedStyle = window.getComputedStyle(textarea);\n    const maxHeightPxValue = parseInt(computedStyle.maxHeight);\n    const finalHeight = maxHeightPxValue\n      ? Math.min(newHeight, maxHeightPxValue)\n      : newHeight;\n\n    // Set the new height\n    textarea.style.height = `${finalHeight}px`;\n  }, [autoGrow, ref]);\n\n  // Set up auto-grow behavior with event listeners\n  useEffect(() => {\n    const textarea = ref.current;\n    if (!textarea || !autoGrow) return;\n\n    // Initial adjustment\n    adjustHeight();\n\n    // Add input event listener for real-time adjustments\n    const handleInput = () => {\n      adjustHeight();\n    };\n\n    textarea.addEventListener(\"input\", handleInput);\n\n    // Cleanup\n    return () => {\n      textarea.removeEventListener(\"input\", handleInput);\n    };\n  }, [adjustHeight, autoGrow, ref]);\n\n  return (\n    <MultilineTextInputRootSlot {...recipeProps} {...styleProps} asChild>\n      <TextArea ref={ref} rows={rows} {...inputProps} />\n    </MultilineTextInputRootSlot>\n  );\n};\n\nMultilineTextInput.displayName = \"MultilineTextInput\";\n"],"names":["multilineTextInputRecipe","defineRecipe","designTokens","withContext","createRecipeContext","MultilineTextInputRootSlot","MultilineTextInput","props","forwardedRef","rows","autoGrow","restProps","recipe","useRecipe","localRef","useRef","ref","useObjectRef","mergeRefs","recipeProps","remainingProps","styleProps","otherProps","extractStyleProps","inputProps","useTextField","adjustHeight","useCallback","textarea","newHeight","computedStyle","maxHeightPxValue","finalHeight","useEffect","handleInput","jsx","TextArea"],"mappings":"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"}