@bitrise/bitkit-v2 0.3.318 → 0.3.319

package/dist/components/BitkitTextArea/BitkitTextArea.d.ts

@@ -3,7 +3,8 @@ import { BitkitFieldProps } from '../BitkitField/BitkitField';
 export interface BitkitTextAreaProps extends Omit<BitkitFieldProps, 'children' | 'state'> {
     autoresize?: boolean;
     placeholder?: string;
-    resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+    resize?: 'none' | 'vertical';
+    rows?: number;
     size?: 'md' | 'lg';
     state?: 'disabled' | 'error' | 'readOnly' | 'warning';
     textareaProps?: TextareaProps;

package/dist/components/BitkitTextArea/BitkitTextArea.js

@@ -1,20 +1,45 @@
+import IconErrorCircleFilled from "../../icons/IconErrorCircleFilled.js";
+import IconWarningYellow from "../../icons/IconWarningYellow.js";
 import BitkitField from "../BitkitField/BitkitField.js";
+import { textareaStatusIcon } from "../../theme/recipes/Textarea.recipe.js";
+import { Box } from "@chakra-ui/react/box";
 import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Textarea } from "@chakra-ui/react/textarea";
 //#region lib/components/BitkitTextArea/BitkitTextArea.tsx
 var BitkitTextArea = forwardRef((props, ref) => {
-	const { autoresize, placeholder, resize, size, state, textareaProps, ...fieldProps } = props;
+	const { autoresize, placeholder, resize, rows = 3, size = "lg", state, textareaProps, ...fieldProps } = props;
+	const isInvalid = state === "error" || !!fieldProps.errorText;
+	const hasWarning = state === "warning" || !!fieldProps.warningText;
+	const iconSize = size === "md" ? "16" : "24";
+	const { paddingInlineEnd, ...iconInset } = textareaStatusIcon[size];
+	const statusIcon = isInvalid ? /* @__PURE__ */ jsx(IconErrorCircleFilled, {
+		color: "icon/negative",
+		position: "absolute",
+		size: iconSize,
+		...iconInset
+	}) : hasWarning ? /* @__PURE__ */ jsx(IconWarningYellow, {
+		position: "absolute",
+		size: iconSize,
+		...iconInset
+	}) : null;
+	const { css: consumerCss, ...restTextareaProps } = textareaProps ?? {};
+	const textareaCss = statusIcon != null ? [{ paddingInlineEnd }, consumerCss] : consumerCss;
 	return /* @__PURE__ */ jsx(BitkitField, {
 		state,
 		...fieldProps,
-		children: /* @__PURE__ */ jsx(Textarea, {
-			ref,
-			autoresize,
-			placeholder,
-			resize,
-			size,
-			...textareaProps
+		children: /* @__PURE__ */ jsxs(Box, {
+			position: "relative",
+			children: [/* @__PURE__ */ jsx(Textarea, {
+				ref,
+				autoresize,
+				css: textareaCss,
+				placeholder,
+				resize,
+				rows,
+				size,
+				...restTextareaProps
+			}), statusIcon]
 		})
 	});
 });

package/dist/components/BitkitTextArea/BitkitTextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitTextArea.js","names":[],"sources":["../../../lib/components/BitkitTextArea/BitkitTextArea.tsx"],"sourcesContent":["import { Textarea, type TextareaProps } from '@chakra-ui/react/textarea';\nimport { forwardRef } from 'react';\n\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\nexport interface BitkitTextAreaProps extends Omit<BitkitFieldProps, 'children' | 'state'> {\n  autoresize?: boolean;\n  placeholder?: string;\n  resize?: 'none' | 'both' | 'horizontal' | 'vertical';\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  textareaProps?: TextareaProps;\n}\n\nconst BitkitTextArea = forwardRef<HTMLTextAreaElement, BitkitTextAreaProps>((props, ref) => {\n  const { autoresize, placeholder, resize, size, state, textareaProps, ...fieldProps } = props;\n\n  return (\n    <BitkitField state={state} {...fieldProps}>\n      <Textarea\n        ref={ref}\n        autoresize={autoresize}\n        placeholder={placeholder}\n        resize={resize}\n        size={size}\n        {...textareaProps}\n      />\n    </BitkitField>\n  );\n});\n\nBitkitTextArea.displayName = 'BitkitTextArea';\n\nexport default BitkitTextArea;\n"],"mappings":";;;;;AAcA,IAAM,iBAAiB,YAAsD,OAAO,QAAQ;CAC1F,MAAM,EAAE,YAAY,aAAa,QAAQ,MAAM,OAAO,eAAe,GAAG,eAAe;CAEvF,OACE,oBAAC,aAAD;EAAoB;EAAO,GAAI;YAC7B,oBAAC,UAAD;GACO;GACO;GACC;GACL;GACF;GACN,GAAI;EACL,CAAA;CACU,CAAA;AAEjB,CAAC;AAED,eAAe,cAAc"}
+{"version":3,"file":"BitkitTextArea.js","names":[],"sources":["../../../lib/components/BitkitTextArea/BitkitTextArea.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Textarea, type TextareaProps } from '@chakra-ui/react/textarea';\nimport { forwardRef } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport { textareaStatusIcon } from '../../theme/recipes/Textarea.recipe';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\nexport interface BitkitTextAreaProps extends Omit<BitkitFieldProps, 'children' | 'state'> {\n  autoresize?: boolean;\n  placeholder?: string;\n  resize?: 'none' | 'vertical';\n  rows?: number;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  textareaProps?: TextareaProps;\n}\n\nconst BitkitTextArea = forwardRef<HTMLTextAreaElement, BitkitTextAreaProps>((props, ref) => {\n  const { autoresize, placeholder, resize, rows = 3, size = 'lg', state, textareaProps, ...fieldProps } = props;\n\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n  const hasWarning = state === 'warning' || !!fieldProps.warningText;\n  const iconSize = size === 'md' ? '16' : '24';\n\n  const { paddingInlineEnd, ...iconInset } = textareaStatusIcon[size];\n  const statusIcon = isInvalid ? (\n    <IconErrorCircleFilled color=\"icon/negative\" position=\"absolute\" size={iconSize} {...iconInset} />\n  ) : hasWarning ? (\n    <IconWarningYellow position=\"absolute\" size={iconSize} {...iconInset} />\n  ) : null;\n\n  const { css: consumerCss, ...restTextareaProps } = textareaProps ?? {};\n  const textareaCss = statusIcon != null ? [{ paddingInlineEnd }, consumerCss] : consumerCss;\n\n  return (\n    <BitkitField state={state} {...fieldProps}>\n      <Box position=\"relative\">\n        <Textarea\n          ref={ref}\n          autoresize={autoresize}\n          css={textareaCss}\n          placeholder={placeholder}\n          resize={resize}\n          rows={rows}\n          size={size}\n          {...restTextareaProps}\n        />\n        {statusIcon}\n      </Box>\n    </BitkitField>\n  );\n});\n\nBitkitTextArea.displayName = 'BitkitTextArea';\n\nexport default BitkitTextArea;\n"],"mappings":";;;;;;;;;AAkBA,IAAM,iBAAiB,YAAsD,OAAO,QAAQ;CAC1F,MAAM,EAAE,YAAY,aAAa,QAAQ,OAAO,GAAG,OAAO,MAAM,OAAO,eAAe,GAAG,eAAe;CAExG,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CACpD,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,WAAW;CACvD,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,MAAM,EAAE,kBAAkB,GAAG,cAAc,mBAAmB;CAC9D,MAAM,aAAa,YACjB,oBAAC,uBAAD;EAAuB,OAAM;EAAgB,UAAS;EAAW,MAAM;EAAU,GAAI;CAAY,CAAA,IAC/F,aACF,oBAAC,mBAAD;EAAmB,UAAS;EAAW,MAAM;EAAU,GAAI;CAAY,CAAA,IACrE;CAEJ,MAAM,EAAE,KAAK,aAAa,GAAG,sBAAsB,iBAAiB,CAAC;CACrE,MAAM,cAAc,cAAc,OAAO,CAAC,EAAE,iBAAiB,GAAG,WAAW,IAAI;CAE/E,OACE,oBAAC,aAAD;EAAoB;EAAO,GAAI;YAC7B,qBAAC,KAAD;GAAK,UAAS;aAAd,CACE,oBAAC,UAAD;IACO;IACO;IACZ,KAAK;IACQ;IACL;IACF;IACA;IACN,GAAI;GACL,CAAA,GACA,UACE;;CACM,CAAA;AAEjB,CAAC;AAED,eAAe,cAAc"}

package/dist/theme/common/InputAndTextarea.common.d.ts

@@ -85,6 +85,16 @@ export declare const base: {
         };
     };
 };
+export declare const sizePadding: {
+    readonly md: {
+        readonly inline: 11;
+        readonly block: 7;
+    };
+    readonly lg: {
+        readonly inline: 15;
+        readonly block: 11;
+    };
+};
 export declare const variants: {
     size: {
         md: {

package/dist/theme/common/InputAndTextarea.common.js

@@ -42,16 +42,26 @@ var base = {
 		...text._disabled
 	}
 };
+var sizePadding = {
+	md: {
+		inline: 11,
+		block: 7
+	},
+	lg: {
+		inline: 15,
+		block: 11
+	}
+};
 var variants = { size: {
 	md: {
-		paddingInline: rem(11),
-		paddingBlock: rem(9),
+		paddingInline: rem(sizePadding.md.inline),
+		paddingBlock: rem(sizePadding.md.block),
 		textStyle: "body/md/regular",
 		"--input-height": rem(40)
 	},
 	lg: {
-		paddingInline: rem(15),
-		paddingBlock: rem(11),
+		paddingInline: rem(sizePadding.lg.inline),
+		paddingBlock: rem(sizePadding.lg.block),
 		textStyle: "body/lg/regular",
 		"--input-height": rem(48)
 	}
@@ -65,6 +75,6 @@ var defaultVariants = { size: "lg" };
 */
 var singleLineInputOverrides = { lineHeight: "normal" };
 //#endregion
-export { base, defaultVariants, frame, singleLineInputOverrides, text, variants };
+export { base, defaultVariants, frame, singleLineInputOverrides, sizePadding, text, variants };
 
 //# sourceMappingURL=InputAndTextarea.common.js.map

package/dist/theme/common/InputAndTextarea.common.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputAndTextarea.common.js","names":[],"sources":["../../../lib/theme/common/InputAndTextarea.common.ts"],"sourcesContent":["import { type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nexport const frame = {\n  background: 'background/primary',\n  borderColor: 'border/regular',\n  borderRadius: '4',\n  borderWidth: '1',\n  boxShadow: 'inset/field',\n  transition: 'border 200ms',\n  _hover: {\n    borderColor: 'border/hover',\n  },\n  _invalid: {\n    borderColor: 'border/error',\n    _hover: {\n      borderColor: 'border/error',\n    },\n  },\n  _readOnly: {\n    background: 'background/disabled',\n    _hover: {\n      borderColor: 'border/regular',\n    },\n  },\n  _disabled: {\n    background: 'background/disabled',\n    borderColor: 'border/disabled',\n    cursor: 'not-allowed',\n    _hover: {\n      borderColor: 'border/disabled',\n    },\n  },\n} satisfies SystemStyleObject;\n\nexport const text = {\n  appearance: 'none',\n  color: 'input/text/inputValue',\n  textStyle: 'body/lg/regular',\n  _placeholder: {\n    color: 'input/text/placeholder',\n  },\n  _disabled: {\n    color: 'text/disabled',\n    _placeholder: {\n      color: 'text/disabled',\n    },\n  },\n} satisfies SystemStyleObject;\n\nexport const base = {\n  ...frame,\n  ...text,\n  width: '100%',\n  _disabled: {\n    ...frame._disabled,\n    ...text._disabled,\n  },\n} satisfies SystemStyleObject;\n\nexport const variants = {\n  size: {\n    md: {\n      paddingInline: rem(11),\n      paddingBlock: rem(9),\n      textStyle: 'body/md/regular',\n      '--input-height': rem(40),\n    },\n    lg: {\n      paddingInline: rem(15),\n      paddingBlock: rem(11),\n      textStyle: 'body/lg/regular',\n      '--input-height': rem(48),\n    },\n  },\n} satisfies Record<'size', Record<'md' | 'lg', SystemStyleObject>>;\n\nexport const defaultVariants: Record<'size', 'md' | 'lg'> = {\n  size: 'lg',\n};\n\n/**\n * Additional styles for single-line `<input>` elements to opt out of the textStyle's explicit\n * line-height. With this override the caret follows the font's natural metrics (~font-size ×\n * 1.15) instead of the 20/24px line-height, so it no longer visually extends past sibling icons\n * in input groups. Textarea should NOT use this — multi-line text needs the textStyle line-height.\n */\nexport const singleLineInputOverrides = {\n  lineHeight: 'normal',\n} satisfies SystemStyleObject;\n"],"mappings":";;AAIA,IAAa,QAAQ;CACnB,YAAY;CACZ,aAAa;CACb,cAAc;CACd,aAAa;CACb,WAAW;CACX,YAAY;CACZ,QAAQ,EACN,aAAa,eACf;CACA,UAAU;EACR,aAAa;EACb,QAAQ,EACN,aAAa,eACf;CACF;CACA,WAAW;EACT,YAAY;EACZ,QAAQ,EACN,aAAa,iBACf;CACF;CACA,WAAW;EACT,YAAY;EACZ,aAAa;EACb,QAAQ;EACR,QAAQ,EACN,aAAa,kBACf;CACF;AACF;AAEA,IAAa,OAAO;CAClB,YAAY;CACZ,OAAO;CACP,WAAW;CACX,cAAc,EACZ,OAAO,yBACT;CACA,WAAW;EACT,OAAO;EACP,cAAc,EACZ,OAAO,gBACT;CACF;AACF;AAEA,IAAa,OAAO;CAClB,GAAG;CACH,GAAG;CACH,OAAO;CACP,WAAW;EACT,GAAG,MAAM;EACT,GAAG,KAAK;CACV;AACF;AAEA,IAAa,WAAW,EACtB,MAAM;CACJ,IAAI;EACF,eAAe,IAAI,EAAE;EACrB,cAAc,IAAI,CAAC;EACnB,WAAW;EACX,kBAAkB,IAAI,EAAE;CAC1B;CACA,IAAI;EACF,eAAe,IAAI,EAAE;EACrB,cAAc,IAAI,EAAE;EACpB,WAAW;EACX,kBAAkB,IAAI,EAAE;CAC1B;AACF,EACF;AAEA,IAAa,kBAA+C,EAC1D,MAAM,KACR;;;;;;;AAQA,IAAa,2BAA2B,EACtC,YAAY,SACd"}
+{"version":3,"file":"InputAndTextarea.common.js","names":[],"sources":["../../../lib/theme/common/InputAndTextarea.common.ts"],"sourcesContent":["import { type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nexport const frame = {\n  background: 'background/primary',\n  borderColor: 'border/regular',\n  borderRadius: '4',\n  borderWidth: '1',\n  boxShadow: 'inset/field',\n  transition: 'border 200ms',\n  _hover: {\n    borderColor: 'border/hover',\n  },\n  _invalid: {\n    borderColor: 'border/error',\n    _hover: {\n      borderColor: 'border/error',\n    },\n  },\n  _readOnly: {\n    background: 'background/disabled',\n    _hover: {\n      borderColor: 'border/regular',\n    },\n  },\n  _disabled: {\n    background: 'background/disabled',\n    borderColor: 'border/disabled',\n    cursor: 'not-allowed',\n    _hover: {\n      borderColor: 'border/disabled',\n    },\n  },\n} satisfies SystemStyleObject;\n\nexport const text = {\n  appearance: 'none',\n  color: 'input/text/inputValue',\n  textStyle: 'body/lg/regular',\n  _placeholder: {\n    color: 'input/text/placeholder',\n  },\n  _disabled: {\n    color: 'text/disabled',\n    _placeholder: {\n      color: 'text/disabled',\n    },\n  },\n} satisfies SystemStyleObject;\n\nexport const base = {\n  ...frame,\n  ...text,\n  width: '100%',\n  _disabled: {\n    ...frame._disabled,\n    ...text._disabled,\n  },\n} satisfies SystemStyleObject;\n\n// Text padding per size, in px. Single source of truth: the `variants` below derive their\n// paddingInline/paddingBlock from these, and the textarea recipe reuses them to align the\n// status icon with the text (see Textarea.recipe.ts).\nexport const sizePadding = {\n  md: { inline: 11, block: 7 },\n  lg: { inline: 15, block: 11 },\n} as const;\n\nexport const variants = {\n  size: {\n    md: {\n      paddingInline: rem(sizePadding.md.inline),\n      paddingBlock: rem(sizePadding.md.block),\n      textStyle: 'body/md/regular',\n      '--input-height': rem(40),\n    },\n    lg: {\n      paddingInline: rem(sizePadding.lg.inline),\n      paddingBlock: rem(sizePadding.lg.block),\n      textStyle: 'body/lg/regular',\n      '--input-height': rem(48),\n    },\n  },\n} satisfies Record<'size', Record<'md' | 'lg', SystemStyleObject>>;\n\nexport const defaultVariants: Record<'size', 'md' | 'lg'> = {\n  size: 'lg',\n};\n\n/**\n * Additional styles for single-line `<input>` elements to opt out of the textStyle's explicit\n * line-height. With this override the caret follows the font's natural metrics (~font-size ×\n * 1.15) instead of the 20/24px line-height, so it no longer visually extends past sibling icons\n * in input groups. Textarea should NOT use this — multi-line text needs the textStyle line-height.\n */\nexport const singleLineInputOverrides = {\n  lineHeight: 'normal',\n} satisfies SystemStyleObject;\n"],"mappings":";;AAIA,IAAa,QAAQ;CACnB,YAAY;CACZ,aAAa;CACb,cAAc;CACd,aAAa;CACb,WAAW;CACX,YAAY;CACZ,QAAQ,EACN,aAAa,eACf;CACA,UAAU;EACR,aAAa;EACb,QAAQ,EACN,aAAa,eACf;CACF;CACA,WAAW;EACT,YAAY;EACZ,QAAQ,EACN,aAAa,iBACf;CACF;CACA,WAAW;EACT,YAAY;EACZ,aAAa;EACb,QAAQ;EACR,QAAQ,EACN,aAAa,kBACf;CACF;AACF;AAEA,IAAa,OAAO;CAClB,YAAY;CACZ,OAAO;CACP,WAAW;CACX,cAAc,EACZ,OAAO,yBACT;CACA,WAAW;EACT,OAAO;EACP,cAAc,EACZ,OAAO,gBACT;CACF;AACF;AAEA,IAAa,OAAO;CAClB,GAAG;CACH,GAAG;CACH,OAAO;CACP,WAAW;EACT,GAAG,MAAM;EACT,GAAG,KAAK;CACV;AACF;AAKA,IAAa,cAAc;CACzB,IAAI;EAAE,QAAQ;EAAI,OAAO;CAAE;CAC3B,IAAI;EAAE,QAAQ;EAAI,OAAO;CAAG;AAC9B;AAEA,IAAa,WAAW,EACtB,MAAM;CACJ,IAAI;EACF,eAAe,IAAI,YAAY,GAAG,MAAM;EACxC,cAAc,IAAI,YAAY,GAAG,KAAK;EACtC,WAAW;EACX,kBAAkB,IAAI,EAAE;CAC1B;CACA,IAAI;EACF,eAAe,IAAI,YAAY,GAAG,MAAM;EACxC,cAAc,IAAI,YAAY,GAAG,KAAK;EACtC,WAAW;EACX,kBAAkB,IAAI,EAAE;CAC1B;AACF,EACF;AAEA,IAAa,kBAA+C,EAC1D,MAAM,KACR;;;;;;;AAQA,IAAa,2BAA2B,EACtC,YAAY,SACd"}

package/dist/theme/recipes/Textarea.recipe.d.ts

@@ -1,6 +1,9 @@
 declare const textareaRecipe: import('@chakra-ui/react').RecipeDefinition<{
     size: {
         md: {
+            '&[rows="1"]': {
+                paddingBlock: string;
+            };
             paddingInline: string;
             paddingBlock: string;
             textStyle: "body/md/regular";
@@ -14,4 +17,16 @@ declare const textareaRecipe: import('@chakra-ui/react').RecipeDefinition<{
         };
     };
 }>;
+export declare const textareaStatusIcon: {
+    md: {
+        insetBlockStart: string;
+        insetInlineEnd: string;
+        paddingInlineEnd: string;
+    };
+    lg: {
+        insetBlockStart: string;
+        insetInlineEnd: string;
+        paddingInlineEnd: string;
+    };
+};
 export default textareaRecipe;

package/dist/theme/recipes/Textarea.recipe.js

@@ -1,13 +1,41 @@
-import { base, defaultVariants, variants } from "../common/InputAndTextarea.common.js";
+import { rem } from "../themeUtils.js";
+import { base, defaultVariants, sizePadding, variants } from "../common/InputAndTextarea.common.js";
 import { defineRecipe } from "@chakra-ui/react/styled-system";
 //#region lib/theme/recipes/Textarea.recipe.ts
 var textareaRecipe = defineRecipe({
 	className: "textarea",
-	base,
-	variants,
+	base: {
+		...base,
+		display: "block",
+		minBlockSize: "var(--input-height)"
+	},
+	variants: { size: {
+		md: {
+			...variants.size.md,
+			"&[rows=\"1\"]": { paddingBlock: rem(9) }
+		},
+		lg: variants.size.lg
+	} },
 	defaultVariants
 });
+var ICON_GAP = 8;
+var iconSize = {
+	md: 16,
+	lg: 24
+};
+var textareaStatusIcon = {
+	md: {
+		insetBlockStart: rem(sizePadding.md.block),
+		insetInlineEnd: rem(sizePadding.md.inline),
+		paddingInlineEnd: rem(sizePadding.md.inline + iconSize.md + ICON_GAP)
+	},
+	lg: {
+		insetBlockStart: rem(sizePadding.lg.block),
+		insetInlineEnd: rem(sizePadding.lg.inline),
+		paddingInlineEnd: rem(sizePadding.lg.inline + iconSize.lg + ICON_GAP)
+	}
+};
 //#endregion
-export { textareaRecipe as default };
+export { textareaRecipe as default, textareaStatusIcon };
 
 //# sourceMappingURL=Textarea.recipe.js.map

package/dist/theme/recipes/Textarea.recipe.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.recipe.js","names":[],"sources":["../../../lib/theme/recipes/Textarea.recipe.ts"],"sourcesContent":["import { defineRecipe } from '@chakra-ui/react/styled-system';\n\nimport { base, defaultVariants, variants } from '../common/InputAndTextarea.common';\n\nconst textareaRecipe = defineRecipe({\n  className: 'textarea',\n  base,\n  variants,\n  defaultVariants,\n});\n\nexport default textareaRecipe;\n"],"mappings":";;;AAIA,IAAM,iBAAiB,aAAa;CAClC,WAAW;CACX;CACA;CACA;AACF,CAAC"}
+{"version":3,"file":"Textarea.recipe.js","names":[],"sources":["../../../lib/theme/recipes/Textarea.recipe.ts"],"sourcesContent":["import { defineRecipe } from '@chakra-ui/react/styled-system';\n\nimport { base, defaultVariants, sizePadding, variants } from '../common/InputAndTextarea.common';\nimport { rem } from '../themeUtils';\n\n// Single recipe shared by the raw <Textarea> atom and BitkitTextArea (both get it via Chakra's\n// `<Textarea>`, which applies the `textarea` recipe by key).\nconst textareaRecipe = defineRecipe({\n  className: 'textarea',\n  base: {\n    ...base,\n    // A raw <textarea> is inline-block with baseline alignment, which reserves\n    // descender space below it and inflates the gap to the helper text. Block\n    // layout removes that phantom space.\n    display: 'block',\n    minBlockSize: 'var(--input-height)',\n  },\n  variants: {\n    size: {\n      md: {\n        ...variants.size.md,\n        '&[rows=\"1\"]': { paddingBlock: rem(9) },\n      },\n      lg: variants.size.lg,\n    },\n  },\n  defaultVariants,\n});\n\n// Placement for the status icon (error/warning) that BitkitTextArea overlays on the textarea.\n// Derived from the text padding (`sizePadding`) so the icon aligns with the first line of text,\n// and paddingInlineEnd reserves room for it: text padding + icon size + gap.\nconst ICON_GAP = 8;\nconst iconSize = { md: 16, lg: 24 } as const;\n\nexport const textareaStatusIcon = {\n  md: {\n    insetBlockStart: rem(sizePadding.md.block),\n    insetInlineEnd: rem(sizePadding.md.inline),\n    paddingInlineEnd: rem(sizePadding.md.inline + iconSize.md + ICON_GAP),\n  },\n  lg: {\n    insetBlockStart: rem(sizePadding.lg.block),\n    insetInlineEnd: rem(sizePadding.lg.inline),\n    paddingInlineEnd: rem(sizePadding.lg.inline + iconSize.lg + ICON_GAP),\n  },\n};\n\nexport default textareaRecipe;\n"],"mappings":";;;;AAOA,IAAM,iBAAiB,aAAa;CAClC,WAAW;CACX,MAAM;EACJ,GAAG;EAIH,SAAS;EACT,cAAc;CAChB;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,GAAG,SAAS,KAAK;GACjB,iBAAe,EAAE,cAAc,IAAI,CAAC,EAAE;EACxC;EACA,IAAI,SAAS,KAAK;CACpB,EACF;CACA;AACF,CAAC;AAKD,IAAM,WAAW;AACjB,IAAM,WAAW;CAAE,IAAI;CAAI,IAAI;AAAG;AAElC,IAAa,qBAAqB;CAChC,IAAI;EACF,iBAAiB,IAAI,YAAY,GAAG,KAAK;EACzC,gBAAgB,IAAI,YAAY,GAAG,MAAM;EACzC,kBAAkB,IAAI,YAAY,GAAG,SAAS,SAAS,KAAK,QAAQ;CACtE;CACA,IAAI;EACF,iBAAiB,IAAI,YAAY,GAAG,KAAK;EACzC,gBAAgB,IAAI,YAAY,GAAG,MAAM;EACzC,kBAAkB,IAAI,YAAY,GAAG,SAAS,SAAS,KAAK,QAAQ;CACtE;AACF"}

package/dist/theme/recipes/index.d.ts

@@ -492,6 +492,9 @@ declare const recipes: {
     textarea: import('@chakra-ui/react').RecipeDefinition<{
         size: {
             md: {
+                '&[rows="1"]': {
+                    paddingBlock: string;
+                };
                 paddingInline: string;
                 paddingBlock: string;
                 textStyle: "body/md/regular";

package/dist/theme/recipes/index.js

@@ -1,5 +1,6 @@
 import colorButtonRecipe from "./ColorButton.recipe.js";
 import inputRecipe from "./Input.recipe.js";
+import textareaRecipe from "./Textarea.recipe.js";
 import badgeRecipe from "./Badge.recipe.js";
 import buttonRecipe from "./Button.recipe.js";
 import closeButtonRecipe from "./CloseButton.recipe.js";
@@ -13,7 +14,6 @@ import selectableTagRecipe from "./SelectableTag.recipe.js";
 import separatorRecipe from "./Separator.recipe.js";
 import skeletonRecipe from "./Skeleton.recipe.js";
 import spinnerRecipe from "./Spinner.recipe.js";
-import textareaRecipe from "./Textarea.recipe.js";
 import toggleButtonRecipe from "./ToggleButton.recipe.js";
 //#region lib/theme/recipes/index.ts
 var recipes = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.318",
+  "version": "0.3.319",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",