@bitrise/bitkit-v2 0.3.277 → 0.3.278

package/AGENTS.md

@@ -113,6 +113,12 @@ Bitkit components use consistent prop names across the library:
   <BitkitActionMenu.Item href="https://example.com" isExternal value="docs">Open docs</BitkitActionMenu.Item>
   ```
 - **Form components are flat** — `BitkitTextInput`, `BitkitSelect`, `BitkitCombobox`, etc. expose `label`, `errorText`, `helperText`, etc. directly as props. No need to wrap in a separate field component.
+- **`BitkitTextInput` in-field slots** — all four slots take a `ReactNode`, not just icons/strings: `startElement` / `endElement` render inside the field (an icon, badge, text, or an interactive control like a reveal/clear button), and `startAddon` / `endAddon` render as a bordered, attached box outside the field (a text label like `$` / `USD`, or a component such as a `select` / button). These match the Figma slot names. The validation status icon (error/warning) is added automatically and sits left of `endElement`. For a component addon that brings its own styling, pass `startAddonProps={{ unstyled: true }}` (or `endAddonProps`) to drop the default grey box:
+  ```tsx
+  <BitkitTextInput startElement={<IconSearch />} endElement={<BitkitBadge>New</BitkitBadge>} />
+  <BitkitTextInput startAddon="$" endAddon="USD" />
+  <BitkitTextInput startAddon={<BitkitButton variant="secondary">USD</BitkitButton>} startAddonProps={{ unstyled: true }} />
+  ```
 - **Three dialog components, one shell** — pick by intent, never reach for low-level dialog primitives (there are none exported):
   - `BitkitDialog` — header (title + close) + body (`children`) + footer. The body is the dialog's `children`. The footer is two slot props: `footerButtons` (action buttons, auto-wrapped in the standard right-aligned row — no manual wrapper) and `footerContent` (arbitrary content rendered raw, e.g. an inline `BitkitAlert`). Both can be combined (content first, then buttons); omit both for a passive dialog with no footer.
   - `BitkitFormDialog` — same API as `BitkitDialog`, but the whole content is a `<form>`, so a `type="submit"` button in `footerButtons` submits natively. Accepts form props (`onSubmit`, `method`, …).

package/dist/components/BitkitTextInput/BitkitTextInput.d.ts

@@ -1,11 +1,19 @@
 import { InputProps } from '@chakra-ui/react/input';
+import { InputAddonProps } from '@chakra-ui/react/input-addon';
+import { ReactNode } from 'react';
 import { BitkitFieldProps } from '../BitkitField/BitkitField';
 export interface BitkitTextInputProps extends Omit<BitkitFieldProps, 'children' | 'state'> {
     counter?: boolean;
+    endAddon?: ReactNode;
+    endAddonProps?: InputAddonProps;
+    endElement?: ReactNode;
     inputProps?: InputProps;
     maxLength?: HTMLInputElement['maxLength'];
     placeholder?: string;
     size?: 'md' | 'lg';
+    startAddon?: ReactNode;
+    startAddonProps?: InputAddonProps;
+    startElement?: ReactNode;
     state?: 'disabled' | 'error' | 'readOnly' | 'warning';
 }
 declare const BitkitTextInput: import('react').ForwardRefExoticComponent<BitkitTextInputProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/BitkitTextInput/BitkitTextInput.js

@@ -1,37 +1,85 @@
 import IconErrorCircleFilled from "../../icons/IconErrorCircleFilled.js";
 import IconWarningYellow from "../../icons/IconWarningYellow.js";
-import { rem } from "../../theme/themeUtils.js";
 import BitkitField from "../BitkitField/BitkitField.js";
+import { Box } from "@chakra-ui/react/box";
+import { useSlotRecipe } from "@chakra-ui/react/styled-system";
 import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Input } from "@chakra-ui/react/input";
-import { InputGroup } from "@chakra-ui/react/input-group";
+import { Group } from "@chakra-ui/react/group";
+import { InputAddon } from "@chakra-ui/react/input-addon";
 //#region lib/components/BitkitTextInput/BitkitTextInput.tsx
 var BitkitTextInput = forwardRef((props, ref) => {
-	const { counter, inputProps, maxLength, placeholder, size, state, ...fieldProps } = props;
+	const { counter, endAddon, endAddonProps, endElement, inputProps, maxLength, placeholder, size = "lg", startAddon, startAddonProps, startElement, state, ...fieldProps } = props;
+	const styles = useSlotRecipe({ key: "textInput" })({ size });
+	const iconSize = size === "md" ? "16" : "24";
+	const addonSize = size === "md" ? "md" : "lg";
 	const hasWarning = state === "warning" || !!fieldProps.warningText;
 	const isInvalid = state === "error" || !!fieldProps.errorText;
-	let statusIcon = void 0;
+	let statusIcon = null;
 	if (isInvalid) statusIcon = /* @__PURE__ */ jsx(IconErrorCircleFilled, {
-		size: size === "lg" ? "24" : "16",
-		color: "icon/negative"
+		color: "icon/negative",
+		size: iconSize
 	});
-	else if (hasWarning) statusIcon = /* @__PURE__ */ jsx(IconWarningYellow, { size: size === "lg" ? "24" : "16" });
+	else if (hasWarning) statusIcon = /* @__PURE__ */ jsx(IconWarningYellow, { size: iconSize });
+	const counterText = counter && maxLength && inputProps?.value !== void 0 ? `${inputProps.value.toString().length}/${maxLength}` : void 0;
+	const stateAttrs = {
+		"data-disabled": state === "disabled" ? "" : void 0,
+		"data-invalid": isInvalid ? "" : void 0,
+		"data-readonly": state === "readOnly" ? "" : void 0
+	};
 	return /* @__PURE__ */ jsx(BitkitField, {
-		counterText: counter && maxLength && inputProps?.value !== void 0 ? `${inputProps.value.toString().length}/${maxLength}` : void 0,
+		counterText,
 		ref,
 		state,
 		...fieldProps,
-		children: /* @__PURE__ */ jsx(InputGroup, {
-			endElement: statusIcon,
-			endElementProps: { marginInlineEnd: size === "lg" ? rem(15) : rem(11) },
+		children: /* @__PURE__ */ jsxs(Group, {
+			attached: true,
 			width: "100%",
-			children: /* @__PURE__ */ jsx(Input, {
-				placeholder,
-				size,
-				maxLength,
-				...inputProps
-			})
+			children: [
+				startAddon != null && /* @__PURE__ */ jsx(InputAddon, {
+					position: "start",
+					size: addonSize,
+					...stateAttrs,
+					...startAddonProps,
+					children: startAddon
+				}),
+				/* @__PURE__ */ jsxs(Box, {
+					css: styles.field,
+					...stateAttrs,
+					children: [
+						startElement != null && /* @__PURE__ */ jsx(Box, {
+							css: styles.element,
+							...stateAttrs,
+							children: startElement
+						}),
+						/* @__PURE__ */ jsx(Input, {
+							css: styles.input,
+							maxLength,
+							placeholder,
+							...inputProps,
+							unstyled: true
+						}),
+						statusIcon != null && /* @__PURE__ */ jsx(Box, {
+							css: styles.element,
+							...stateAttrs,
+							children: statusIcon
+						}),
+						endElement != null && /* @__PURE__ */ jsx(Box, {
+							css: styles.element,
+							...stateAttrs,
+							children: endElement
+						})
+					]
+				}),
+				endAddon != null && /* @__PURE__ */ jsx(InputAddon, {
+					position: "end",
+					size: addonSize,
+					...stateAttrs,
+					...endAddonProps,
+					children: endAddon
+				})
+			]
 		})
 	});
 });

package/dist/components/BitkitTextInput/BitkitTextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitTextInput.js","names":[],"sources":["../../../lib/components/BitkitTextInput/BitkitTextInput.tsx"],"sourcesContent":["import { Input, type InputProps } from '@chakra-ui/react/input';\nimport { InputGroup } from '@chakra-ui/react/input-group';\nimport { forwardRef } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport { rem } from '../../theme/themeUtils';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\nexport interface BitkitTextInputProps extends Omit<BitkitFieldProps, 'children' | 'state'> {\n  counter?: boolean;\n  inputProps?: InputProps;\n  maxLength?: HTMLInputElement['maxLength'];\n  placeholder?: string;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n}\n\nconst BitkitTextInput = forwardRef<HTMLDivElement, BitkitTextInputProps>((props: BitkitTextInputProps, ref) => {\n  const { counter, inputProps, maxLength, placeholder, size, state, ...fieldProps } = props;\n\n  const hasWarning = state === 'warning' || !!fieldProps.warningText;\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n  let statusIcon = undefined;\n  if (isInvalid) {\n    statusIcon = <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} color=\"icon/negative\" />;\n  } else if (hasWarning) {\n    statusIcon = <IconWarningYellow size={size === 'lg' ? '24' : '16'} />;\n  }\n\n  const counterText =\n    counter && maxLength && inputProps?.value !== undefined\n      ? `${inputProps.value.toString().length}/${maxLength}`\n      : undefined;\n\n  return (\n    <BitkitField counterText={counterText} ref={ref} state={state} {...fieldProps}>\n      <InputGroup\n        endElement={statusIcon}\n        endElementProps={{\n          marginInlineEnd: size === 'lg' ? rem(15) : rem(11),\n        }}\n        width=\"100%\"\n      >\n        <Input placeholder={placeholder} size={size} maxLength={maxLength} {...inputProps} />\n      </InputGroup>\n    </BitkitField>\n  );\n});\n\nBitkitTextInput.displayName = 'BitkitTextInput';\n\nexport default BitkitTextInput;\n"],"mappings":";;;;;;;;;AAiBA,IAAM,kBAAkB,YAAkD,OAA6B,QAAQ;CAC7G,MAAM,EAAE,SAAS,YAAY,WAAW,aAAa,MAAM,OAAO,GAAG,eAAe;CAEpF,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,WAAW;CACvD,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CAEpD,IAAI,aAAa,KAAA;CACjB,IAAI,WACF,aAAa,oBAAC,uBAAD;EAAuB,MAAM,SAAS,OAAO,OAAO;EAAM,OAAM;CAAiB,CAAA;MACzF,IAAI,YACT,aAAa,oBAAC,mBAAD,EAAmB,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;CAQtE,OACE,oBAAC,aAAD;EAA0B,aAL1B,WAAW,aAAa,YAAY,UAAU,KAAA,IAC1C,GAAG,WAAW,MAAM,SAAS,EAAE,OAAO,GAAG,cACzC,KAAA;EAGwC;EAAY;EAAO,GAAI;YACjE,oBAAC,YAAD;GACE,YAAY;GACZ,iBAAiB,EACf,iBAAiB,SAAS,OAAO,IAAI,EAAE,IAAI,IAAI,EAAE,EACnD;GACA,OAAM;aAEN,oBAAC,OAAD;IAAoB;IAAmB;IAAiB;IAAW,GAAI;GAAa,CAAA;EAC1E,CAAA;CACD,CAAA;AAEjB,CAAC;AAED,gBAAgB,cAAc"}
+{"version":3,"file":"BitkitTextInput.js","names":[],"sources":["../../../lib/components/BitkitTextInput/BitkitTextInput.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Group } from '@chakra-ui/react/group';\nimport { Input, type InputProps } from '@chakra-ui/react/input';\nimport { InputAddon, type InputAddonProps } from '@chakra-ui/react/input-addon';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\nexport interface BitkitTextInputProps extends Omit<BitkitFieldProps, 'children' | 'state'> {\n  counter?: boolean;\n  endAddon?: ReactNode;\n  endAddonProps?: InputAddonProps;\n  endElement?: ReactNode;\n  inputProps?: InputProps;\n  maxLength?: HTMLInputElement['maxLength'];\n  placeholder?: string;\n  size?: 'md' | 'lg';\n  startAddon?: ReactNode;\n  startAddonProps?: InputAddonProps;\n  startElement?: ReactNode;\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n}\n\nconst BitkitTextInput = forwardRef<HTMLDivElement, BitkitTextInputProps>((props, ref) => {\n  const {\n    counter,\n    endAddon,\n    endAddonProps,\n    endElement,\n    inputProps,\n    maxLength,\n    placeholder,\n    size = 'lg',\n    startAddon,\n    startAddonProps,\n    startElement,\n    state,\n    ...fieldProps\n  } = props;\n\n  const recipe = useSlotRecipe({ key: 'textInput' });\n  const styles = recipe({ size });\n\n  const iconSize = size === 'md' ? '16' : '24';\n  const addonSize = size === 'md' ? 'md' : 'lg';\n\n  const hasWarning = state === 'warning' || !!fieldProps.warningText;\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n  let statusIcon: ReactNode = null;\n  if (isInvalid) {\n    statusIcon = <IconErrorCircleFilled color=\"icon/negative\" size={iconSize} />;\n  } else if (hasWarning) {\n    statusIcon = <IconWarningYellow size={iconSize} />;\n  }\n\n  const counterText =\n    counter && maxLength && inputProps?.value !== undefined\n      ? `${inputProps.value.toString().length}/${maxLength}`\n      : undefined;\n\n  const stateAttrs = {\n    'data-disabled': state === 'disabled' ? '' : undefined,\n    'data-invalid': isInvalid ? '' : undefined,\n    'data-readonly': state === 'readOnly' ? '' : undefined,\n  };\n\n  return (\n    <BitkitField counterText={counterText} ref={ref} state={state} {...fieldProps}>\n      <Group attached width=\"100%\">\n        {startAddon != null && (\n          <InputAddon position=\"start\" size={addonSize} {...stateAttrs} {...startAddonProps}>\n            {startAddon}\n          </InputAddon>\n        )}\n        <Box css={styles.field} {...stateAttrs}>\n          {startElement != null && (\n            <Box css={styles.element} {...stateAttrs}>\n              {startElement}\n            </Box>\n          )}\n          <Input css={styles.input} maxLength={maxLength} placeholder={placeholder} {...inputProps} unstyled />\n          {statusIcon != null && (\n            <Box css={styles.element} {...stateAttrs}>\n              {statusIcon}\n            </Box>\n          )}\n          {endElement != null && (\n            <Box css={styles.element} {...stateAttrs}>\n              {endElement}\n            </Box>\n          )}\n        </Box>\n        {endAddon != null && (\n          <InputAddon position=\"end\" size={addonSize} {...stateAttrs} {...endAddonProps}>\n            {endAddon}\n          </InputAddon>\n        )}\n      </Group>\n    </BitkitField>\n  );\n});\n\nBitkitTextInput.displayName = 'BitkitTextInput';\n\nexport default BitkitTextInput;\n"],"mappings":";;;;;;;;;;;AAyBA,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EACJ,SACA,UACA,eACA,YACA,YACA,WACA,aACA,OAAO,MACP,YACA,iBACA,cACA,OACA,GAAG,eACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,YAAY,CACjC,EAAO,EAAE,KAAK,CAAC;CAE9B,MAAM,WAAW,SAAS,OAAO,OAAO;CACxC,MAAM,YAAY,SAAS,OAAO,OAAO;CAEzC,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,WAAW;CACvD,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CAEpD,IAAI,aAAwB;CAC5B,IAAI,WACF,aAAa,oBAAC,uBAAD;EAAuB,OAAM;EAAgB,MAAM;CAAW,CAAA;MACtE,IAAI,YACT,aAAa,oBAAC,mBAAD,EAAmB,MAAM,SAAW,CAAA;CAGnD,MAAM,cACJ,WAAW,aAAa,YAAY,UAAU,KAAA,IAC1C,GAAG,WAAW,MAAM,SAAS,EAAE,OAAO,GAAG,cACzC,KAAA;CAEN,MAAM,aAAa;EACjB,iBAAiB,UAAU,aAAa,KAAK,KAAA;EAC7C,gBAAgB,YAAY,KAAK,KAAA;EACjC,iBAAiB,UAAU,aAAa,KAAK,KAAA;CAC/C;CAEA,OACE,oBAAC,aAAD;EAA0B;EAAkB;EAAY;EAAO,GAAI;YACjE,qBAAC,OAAD;GAAO,UAAA;GAAS,OAAM;aAAtB;IACG,cAAc,QACb,oBAAC,YAAD;KAAY,UAAS;KAAQ,MAAM;KAAW,GAAI;KAAY,GAAI;eAC/D;IACS,CAAA;IAEd,qBAAC,KAAD;KAAK,KAAK,OAAO;KAAO,GAAI;eAA5B;MACG,gBAAgB,QACf,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAS,GAAI;iBAC3B;MACE,CAAA;MAEP,oBAAC,OAAD;OAAO,KAAK,OAAO;OAAkB;OAAwB;OAAa,GAAI;OAAY,UAAA;MAAU,CAAA;MACnG,cAAc,QACb,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAS,GAAI;iBAC3B;MACE,CAAA;MAEN,cAAc,QACb,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAS,GAAI;iBAC3B;MACE,CAAA;KAEJ;;IACJ,YAAY,QACX,oBAAC,YAAD;KAAY,UAAS;KAAM,MAAM;KAAW,GAAI;KAAY,GAAI;eAC7D;IACS,CAAA;GAET;;CACI,CAAA;AAEjB,CAAC;AAED,gBAAgB,cAAc"}

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

@@ -1,17 +1,10 @@
-export declare const base: {
-    appearance: "none";
+export declare const frame: {
     background: "background/primary";
     borderColor: "border/regular";
     borderRadius: "4";
     borderWidth: "1";
-    color: "input/text/inputValue";
-    textStyle: "body/lg/regular";
-    width: "100%";
     boxShadow: "inset/field";
     transition: "border 200ms";
-    _placeholder: {
-        color: "input/text/placeholder";
-    };
     _hover: {
         borderColor: "border/hover";
     };
@@ -21,22 +14,75 @@ export declare const base: {
             borderColor: "border/error";
         };
     };
+    _readOnly: {
+        background: "background/disabled";
+        _hover: {
+            borderColor: "border/regular";
+        };
+    };
     _disabled: {
+        background: "background/disabled";
+        borderColor: "border/disabled";
+        cursor: "not-allowed";
         _hover: {
             borderColor: "border/disabled";
         };
+    };
+};
+export declare const text: {
+    appearance: "none";
+    color: "input/text/inputValue";
+    textStyle: "body/lg/regular";
+    _placeholder: {
+        color: "input/text/placeholder";
+    };
+    _disabled: {
+        color: "text/disabled";
         _placeholder: {
             color: "text/disabled";
         };
+    };
+};
+export declare const base: {
+    width: "100%";
+    _disabled: {
         color: "text/disabled";
+        _placeholder: {
+            color: "text/disabled";
+        };
         background: "background/disabled";
+        borderColor: "border/disabled";
         cursor: "not-allowed";
+        _hover: {
+            borderColor: "border/disabled";
+        };
+    };
+    appearance: "none";
+    color: "input/text/inputValue";
+    textStyle: "body/lg/regular";
+    _placeholder: {
+        color: "input/text/placeholder";
+    };
+    background: "background/primary";
+    borderColor: "border/regular";
+    borderRadius: "4";
+    borderWidth: "1";
+    boxShadow: "inset/field";
+    transition: "border 200ms";
+    _hover: {
+        borderColor: "border/hover";
+    };
+    _invalid: {
+        borderColor: "border/error";
+        _hover: {
+            borderColor: "border/error";
+        };
     };
     _readOnly: {
+        background: "background/disabled";
         _hover: {
             borderColor: "border/regular";
         };
-        background: "background/disabled";
     };
 };
 export declare const variants: {

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

@@ -1,32 +1,45 @@
 import { rem } from "../themeUtils.js";
 //#region lib/theme/common/InputAndTextarea.common.ts
-var base = {
-	appearance: "none",
+var frame = {
 	background: "background/primary",
 	borderColor: "border/regular",
 	borderRadius: "4",
 	borderWidth: "1",
-	color: "input/text/inputValue",
-	textStyle: "body/lg/regular",
-	width: "100%",
 	boxShadow: "inset/field",
 	transition: "border 200ms",
-	_placeholder: { color: "input/text/placeholder" },
 	_hover: { borderColor: "border/hover" },
 	_invalid: {
 		borderColor: "border/error",
 		_hover: { borderColor: "border/error" }
 	},
-	_disabled: {
-		_hover: { borderColor: "border/disabled" },
-		_placeholder: { color: "text/disabled" },
-		color: "text/disabled",
+	_readOnly: {
 		background: "background/disabled",
-		cursor: "not-allowed"
+		_hover: { borderColor: "border/regular" }
 	},
-	_readOnly: {
-		_hover: { borderColor: "border/regular" },
-		background: "background/disabled"
+	_disabled: {
+		background: "background/disabled",
+		borderColor: "border/disabled",
+		cursor: "not-allowed",
+		_hover: { borderColor: "border/disabled" }
+	}
+};
+var text = {
+	appearance: "none",
+	color: "input/text/inputValue",
+	textStyle: "body/lg/regular",
+	_placeholder: { color: "input/text/placeholder" },
+	_disabled: {
+		color: "text/disabled",
+		_placeholder: { color: "text/disabled" }
+	}
+};
+var base = {
+	...frame,
+	...text,
+	width: "100%",
+	_disabled: {
+		...frame._disabled,
+		...text._disabled
 	}
 };
 var variants = { size: {
@@ -52,6 +65,6 @@ var defaultVariants = { size: "lg" };
 */
 var singleLineInputOverrides = { lineHeight: "normal" };
 //#endregion
-export { base, defaultVariants, singleLineInputOverrides, variants };
+export { base, defaultVariants, frame, singleLineInputOverrides, 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 base = {\n  appearance: 'none',\n  background: 'background/primary',\n  borderColor: 'border/regular',\n  borderRadius: '4',\n  borderWidth: '1',\n  color: 'input/text/inputValue',\n  textStyle: 'body/lg/regular',\n  width: '100%',\n  boxShadow: 'inset/field',\n  transition: 'border 200ms',\n  _placeholder: {\n    color: 'input/text/placeholder',\n  },\n  _hover: {\n    borderColor: 'border/hover',\n  },\n  _invalid: {\n    borderColor: 'border/error',\n    _hover: {\n      borderColor: 'border/error',\n    },\n  },\n  _disabled: {\n    _hover: {\n      borderColor: 'border/disabled',\n    },\n    _placeholder: {\n      color: 'text/disabled',\n    },\n    color: 'text/disabled',\n    background: 'background/disabled',\n    cursor: 'not-allowed',\n  },\n  _readOnly: {\n    _hover: {\n      borderColor: 'border/regular',\n    },\n    background: 'background/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,OAAO;CAClB,YAAY;CACZ,YAAY;CACZ,aAAa;CACb,cAAc;CACd,aAAa;CACb,OAAO;CACP,WAAW;CACX,OAAO;CACP,WAAW;CACX,YAAY;CACZ,cAAc,EACZ,OAAO,yBACT;CACA,QAAQ,EACN,aAAa,eACf;CACA,UAAU;EACR,aAAa;EACb,QAAQ,EACN,aAAa,eACf;CACF;CACA,WAAW;EACT,QAAQ,EACN,aAAa,kBACf;EACA,cAAc,EACZ,OAAO,gBACT;EACA,OAAO;EACP,YAAY;EACZ,QAAQ;CACV;CACA,WAAW;EACT,QAAQ,EACN,aAAa,iBACf;EACA,YAAY;CACd;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\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"}

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

@@ -0,0 +1,25 @@
+declare const inputAddonRecipe: import('@chakra-ui/react').RecipeDefinition<{
+    position: {
+        start: {
+            borderInlineStartWidth: "1";
+            borderStartStartRadius: "4";
+            borderEndStartRadius: "4";
+        };
+        end: {
+            borderInlineWidth: "1";
+            borderStartEndRadius: "4";
+            borderEndEndRadius: "4";
+        };
+    };
+    size: {
+        md: {
+            paddingInline: string;
+            textStyle: "body/md/regular";
+        };
+        lg: {
+            paddingInline: string;
+            textStyle: "body/lg/regular";
+        };
+    };
+}>;
+export default inputAddonRecipe;

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

@@ -0,0 +1,54 @@
+import { rem } from "../themeUtils.js";
+import { defineRecipe } from "@chakra-ui/react/styled-system";
+//#region lib/theme/recipes/InputAddon.recipe.ts
+var inputAddonRecipe = defineRecipe({
+	className: "input-addon",
+	base: {
+		alignItems: "center",
+		alignSelf: "stretch",
+		background: "background/secondary",
+		borderBlockWidth: "1",
+		borderColor: "border/regular",
+		borderStyle: "solid",
+		color: "text/body",
+		display: "flex",
+		flexShrink: 0,
+		justifyContent: "center",
+		whiteSpace: "nowrap",
+		_readOnly: { background: "background/disabled" },
+		_disabled: {
+			background: "background/disabled",
+			borderColor: "border/disabled",
+			color: "text/disabled"
+		}
+	},
+	variants: {
+		position: {
+			start: {
+				borderInlineStartWidth: "1",
+				borderStartStartRadius: "4",
+				borderEndStartRadius: "4"
+			},
+			end: {
+				borderInlineWidth: "1",
+				borderStartEndRadius: "4",
+				borderEndEndRadius: "4"
+			}
+		},
+		size: {
+			md: {
+				paddingInline: rem(11),
+				textStyle: "body/md/regular"
+			},
+			lg: {
+				paddingInline: rem(15),
+				textStyle: "body/lg/regular"
+			}
+		}
+	},
+	defaultVariants: { size: "lg" }
+});
+//#endregion
+export { inputAddonRecipe as default };
+
+//# sourceMappingURL=InputAddon.recipe.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputAddon.recipe.js","names":[],"sources":["../../../lib/theme/recipes/InputAddon.recipe.ts"],"sourcesContent":["import { defineRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst inputAddonRecipe = defineRecipe({\n  className: 'input-addon',\n  base: {\n    alignItems: 'center',\n    alignSelf: 'stretch',\n    background: 'background/secondary',\n    borderBlockWidth: '1',\n    borderColor: 'border/regular',\n    borderStyle: 'solid',\n    color: 'text/body',\n    display: 'flex',\n    flexShrink: 0,\n    justifyContent: 'center',\n    whiteSpace: 'nowrap',\n    _readOnly: {\n      background: 'background/disabled',\n    },\n    _disabled: {\n      background: 'background/disabled',\n      borderColor: 'border/disabled',\n      color: 'text/disabled',\n    },\n  },\n  variants: {\n    position: {\n      start: {\n        borderInlineStartWidth: '1',\n        borderStartStartRadius: '4',\n        borderEndStartRadius: '4',\n      },\n      end: {\n        borderInlineWidth: '1',\n        borderStartEndRadius: '4',\n        borderEndEndRadius: '4',\n      },\n    },\n    size: {\n      md: { paddingInline: rem(11), textStyle: 'body/md/regular' },\n      lg: { paddingInline: rem(15), textStyle: 'body/lg/regular' },\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n\nexport default inputAddonRecipe;\n"],"mappings":";;;AAIA,IAAM,mBAAmB,aAAa;CACpC,WAAW;CACX,MAAM;EACJ,YAAY;EACZ,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,aAAa;EACb,aAAa;EACb,OAAO;EACP,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,YAAY;EACZ,WAAW,EACT,YAAY,sBACd;EACA,WAAW;GACT,YAAY;GACZ,aAAa;GACb,OAAO;EACT;CACF;CACA,UAAU;EACR,UAAU;GACR,OAAO;IACL,wBAAwB;IACxB,wBAAwB;IACxB,sBAAsB;GACxB;GACA,KAAK;IACH,mBAAmB;IACnB,sBAAsB;IACtB,oBAAoB;GACtB;EACF;EACA,MAAM;GACJ,IAAI;IAAE,eAAe,IAAI,EAAE;IAAG,WAAW;GAAkB;GAC3D,IAAI;IAAE,eAAe,IAAI,EAAE;IAAG,WAAW;GAAkB;EAC7D;CACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}

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

@@ -373,6 +373,30 @@ declare const recipes: {
             };
         };
     }>;
+    inputAddon: import('@chakra-ui/react').RecipeDefinition<{
+        position: {
+            start: {
+                borderInlineStartWidth: "1";
+                borderStartStartRadius: "4";
+                borderEndStartRadius: "4";
+            };
+            end: {
+                borderInlineWidth: "1";
+                borderStartEndRadius: "4";
+                borderEndEndRadius: "4";
+            };
+        };
+        size: {
+            md: {
+                paddingInline: string;
+                textStyle: "body/md/regular";
+            };
+            lg: {
+                paddingInline: string;
+                textStyle: "body/lg/regular";
+            };
+        };
+    }>;
     link: import('@chakra-ui/react').RecipeDefinition<{
         colorVariant: {
             purple: {

package/dist/theme/recipes/index.js

@@ -6,6 +6,7 @@ import closeButtonRecipe from "./CloseButton.recipe.js";
 import controlButtonRecipe from "./ControlButton.recipe.js";
 import definitionTooltipRecipe from "./DefinitionTooltip.recipe.js";
 import iconRecipe from "./Icon.recipe.js";
+import inputAddonRecipe from "./InputAddon.recipe.js";
 import linkRecipe from "./Link.recipe.js";
 import linkButtonRecipe from "./LinkButton.recipe.js";
 import selectableTagRecipe from "./SelectableTag.recipe.js";
@@ -24,6 +25,7 @@ var recipes = {
 	definitionTooltip: definitionTooltipRecipe,
 	icon: iconRecipe,
 	input: inputRecipe,
+	inputAddon: inputAddonRecipe,
 	link: linkRecipe,
 	linkButton: linkButtonRecipe,
 	selectableTag: selectableTagRecipe,

package/dist/theme/recipes/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/recipes/index.ts"],"sourcesContent":["import badgeRecipe from './Badge.recipe';\nimport buttonRecipe from './Button.recipe';\nimport closeButtonRecipe from './CloseButton.recipe';\nimport colorButtonRecipe from './ColorButton.recipe';\nimport controlButtonRecipe from './ControlButton.recipe';\nimport definitionTooltipRecipe from './DefinitionTooltip.recipe';\nimport iconRecipe from './Icon.recipe';\nimport inputRecipe from './Input.recipe';\nimport linkRecipe from './Link.recipe';\nimport linkButtonRecipe from './LinkButton.recipe';\nimport selectableTagRecipe from './SelectableTag.recipe';\nimport separatorRecipe from './Separator.recipe';\nimport skeletonRecipe from './Skeleton.recipe';\nimport spinnerRecipe from './Spinner.recipe';\nimport textareaRecipe from './Textarea.recipe';\nimport toggleButtonRecipe from './ToggleButton.recipe';\n\nconst recipes = {\n  badge: badgeRecipe,\n  button: buttonRecipe,\n  closeButton: closeButtonRecipe,\n  controlButton: controlButtonRecipe,\n  colorButton: colorButtonRecipe,\n  definitionTooltip: definitionTooltipRecipe,\n  icon: iconRecipe,\n  input: inputRecipe,\n  link: linkRecipe,\n  linkButton: linkButtonRecipe,\n  selectableTag: selectableTagRecipe,\n  separator: separatorRecipe,\n  skeleton: skeletonRecipe,\n  spinner: spinnerRecipe,\n  textarea: textareaRecipe,\n  toggleButton: toggleButtonRecipe,\n};\n\nexport default recipes;\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,IAAM,UAAU;CACd,OAAO;CACP,QAAQ;CACR,aAAa;CACb,eAAe;CACf,aAAa;CACb,mBAAmB;CACnB,MAAM;CACN,OAAO;CACP,MAAM;CACN,YAAY;CACZ,eAAe;CACf,WAAW;CACX,UAAU;CACV,SAAS;CACT,UAAU;CACV,cAAc;AAChB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/recipes/index.ts"],"sourcesContent":["import badgeRecipe from './Badge.recipe';\nimport buttonRecipe from './Button.recipe';\nimport closeButtonRecipe from './CloseButton.recipe';\nimport colorButtonRecipe from './ColorButton.recipe';\nimport controlButtonRecipe from './ControlButton.recipe';\nimport definitionTooltipRecipe from './DefinitionTooltip.recipe';\nimport iconRecipe from './Icon.recipe';\nimport inputRecipe from './Input.recipe';\nimport inputAddonRecipe from './InputAddon.recipe';\nimport linkRecipe from './Link.recipe';\nimport linkButtonRecipe from './LinkButton.recipe';\nimport selectableTagRecipe from './SelectableTag.recipe';\nimport separatorRecipe from './Separator.recipe';\nimport skeletonRecipe from './Skeleton.recipe';\nimport spinnerRecipe from './Spinner.recipe';\nimport textareaRecipe from './Textarea.recipe';\nimport toggleButtonRecipe from './ToggleButton.recipe';\n\nconst recipes = {\n  badge: badgeRecipe,\n  button: buttonRecipe,\n  closeButton: closeButtonRecipe,\n  controlButton: controlButtonRecipe,\n  colorButton: colorButtonRecipe,\n  definitionTooltip: definitionTooltipRecipe,\n  icon: iconRecipe,\n  input: inputRecipe,\n  inputAddon: inputAddonRecipe,\n  link: linkRecipe,\n  linkButton: linkButtonRecipe,\n  selectableTag: selectableTagRecipe,\n  separator: separatorRecipe,\n  skeleton: skeletonRecipe,\n  spinner: spinnerRecipe,\n  textarea: textareaRecipe,\n  toggleButton: toggleButtonRecipe,\n};\n\nexport default recipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,IAAM,UAAU;CACd,OAAO;CACP,QAAQ;CACR,aAAa;CACb,eAAe;CACf,aAAa;CACb,mBAAmB;CACnB,MAAM;CACN,OAAO;CACP,YAAY;CACZ,MAAM;CACN,YAAY;CACZ,eAAe;CACf,WAAW;CACX,UAAU;CACV,SAAS;CACT,UAAU;CACV,cAAc;AAChB"}

package/dist/theme/slot-recipes/TextInput.recipe.d.ts

@@ -0,0 +1,25 @@
+declare const textInputSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "field" | "element", {
+    size: {
+        md: {
+            field: {
+                gap: "8";
+                paddingInline: string;
+                '--input-height': string;
+            };
+            input: {
+                textStyle: "body/md/regular";
+            };
+        };
+        lg: {
+            field: {
+                gap: "8";
+                paddingInline: string;
+                '--input-height': string;
+            };
+            input: {
+                textStyle: "body/lg/regular";
+            };
+        };
+    };
+}>;
+export default textInputSlotRecipe;

package/dist/theme/slot-recipes/TextInput.recipe.js

@@ -0,0 +1,78 @@
+import { frame, text, variants } from "../common/InputAndTextarea.common.js";
+import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
+//#region lib/theme/slot-recipes/TextInput.recipe.ts
+var textInputSlotRecipe = defineSlotRecipe({
+	className: "bitkit-text-input",
+	slots: [
+		"field",
+		"input",
+		"element"
+	],
+	base: {
+		field: {
+			...frame,
+			alignItems: "center",
+			color: "input/text/inputValue",
+			display: "flex",
+			flex: "1",
+			height: "var(--input-height)",
+			minWidth: 0,
+			"&:has(input:focus-visible)": { boxShadow: "0 0 0 0.125rem var(--focus-ring-color) inset" },
+			_invalid: {
+				...frame._invalid,
+				zIndex: 1
+			},
+			_disabled: {
+				...frame._disabled,
+				boxShadow: "none"
+			}
+		},
+		input: {
+			...text,
+			background: "transparent",
+			borderWidth: 0,
+			flex: "1",
+			focusVisibleRing: "none",
+			height: "100%",
+			lineHeight: "normal",
+			minWidth: 0,
+			padding: 0,
+			width: "100%",
+			_invalid: { color: "input/text/error" },
+			_disabled: {
+				...text._disabled,
+				cursor: "not-allowed"
+			}
+		},
+		element: {
+			alignItems: "center",
+			color: "icon/tertiary",
+			display: "flex",
+			flexShrink: "0",
+			_disabled: { color: "icon/disabled" }
+		}
+	},
+	variants: { size: {
+		md: {
+			field: {
+				gap: "8",
+				paddingInline: variants.size.md.paddingInline,
+				"--input-height": variants.size.md["--input-height"]
+			},
+			input: { textStyle: variants.size.md.textStyle }
+		},
+		lg: {
+			field: {
+				gap: "8",
+				paddingInline: variants.size.lg.paddingInline,
+				"--input-height": variants.size.lg["--input-height"]
+			},
+			input: { textStyle: variants.size.lg.textStyle }
+		}
+	} },
+	defaultVariants: { size: "lg" }
+});
+//#endregion
+export { textInputSlotRecipe as default };
+
+//# sourceMappingURL=TextInput.recipe.js.map

package/dist/theme/slot-recipes/TextInput.recipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/TextInput.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { frame, text, variants as inputVariants } from '../common/InputAndTextarea.common';\n\nconst textInputSlotRecipe = defineSlotRecipe({\n  className: 'bitkit-text-input',\n  slots: ['field', 'input', 'element'],\n  base: {\n    field: {\n      ...frame,\n      alignItems: 'center',\n      color: 'input/text/inputValue',\n      display: 'flex',\n      flex: '1',\n      height: 'var(--input-height)',\n      minWidth: 0,\n      '&:has(input:focus-visible)': {\n        boxShadow: '0 0 0 0.125rem var(--focus-ring-color) inset',\n      },\n      _invalid: {\n        ...frame._invalid,\n        zIndex: 1,\n      },\n      _disabled: {\n        ...frame._disabled,\n        boxShadow: 'none',\n      },\n    },\n    input: {\n      ...text,\n      background: 'transparent',\n      borderWidth: 0,\n      flex: '1',\n      focusVisibleRing: 'none',\n      height: '100%',\n      lineHeight: 'normal',\n      minWidth: 0,\n      padding: 0,\n      width: '100%',\n      _invalid: {\n        color: 'input/text/error',\n      },\n      _disabled: {\n        ...text._disabled,\n        cursor: 'not-allowed',\n      },\n    },\n    element: {\n      alignItems: 'center',\n      color: 'icon/tertiary',\n      display: 'flex',\n      flexShrink: '0',\n      _disabled: {\n        color: 'icon/disabled',\n      },\n    },\n  },\n  variants: {\n    size: {\n      md: {\n        field: {\n          gap: '8',\n          paddingInline: inputVariants.size.md.paddingInline,\n          '--input-height': inputVariants.size.md['--input-height'],\n        },\n        input: {\n          textStyle: inputVariants.size.md.textStyle,\n        },\n      },\n      lg: {\n        field: {\n          gap: '8',\n          paddingInline: inputVariants.size.lg.paddingInline,\n          '--input-height': inputVariants.size.lg['--input-height'],\n        },\n        input: {\n          textStyle: inputVariants.size.lg.textStyle,\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n\nexport default textInputSlotRecipe;\n"],"mappings":";;;AAIA,IAAM,sBAAsB,iBAAiB;CAC3C,WAAW;CACX,OAAO;EAAC;EAAS;EAAS;CAAS;CACnC,MAAM;EACJ,OAAO;GACL,GAAG;GACH,YAAY;GACZ,OAAO;GACP,SAAS;GACT,MAAM;GACN,QAAQ;GACR,UAAU;GACV,8BAA8B,EAC5B,WAAW,+CACb;GACA,UAAU;IACR,GAAG,MAAM;IACT,QAAQ;GACV;GACA,WAAW;IACT,GAAG,MAAM;IACT,WAAW;GACb;EACF;EACA,OAAO;GACL,GAAG;GACH,YAAY;GACZ,aAAa;GACb,MAAM;GACN,kBAAkB;GAClB,QAAQ;GACR,YAAY;GACZ,UAAU;GACV,SAAS;GACT,OAAO;GACP,UAAU,EACR,OAAO,mBACT;GACA,WAAW;IACT,GAAG,KAAK;IACR,QAAQ;GACV;EACF;EACA,SAAS;GACP,YAAY;GACZ,OAAO;GACP,SAAS;GACT,YAAY;GACZ,WAAW,EACT,OAAO,gBACT;EACF;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,OAAO;IACL,KAAK;IACL,eAAe,SAAc,KAAK,GAAG;IACrC,kBAAkB,SAAc,KAAK,GAAG;GAC1C;GACA,OAAO,EACL,WAAW,SAAc,KAAK,GAAG,UACnC;EACF;EACA,IAAI;GACF,OAAO;IACL,KAAK;IACL,eAAe,SAAc,KAAK,GAAG;IACrC,kBAAkB,SAAc,KAAK,GAAG;GAC1C;GACA,OAAO,EACL,WAAW,SAAc,KAAK,GAAG,UACnC;EACF;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}

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

@@ -2394,6 +2394,30 @@ declare const slotRecipes: {
             };
         };
     }>;
+    textInput: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "field" | "element", {
+        size: {
+            md: {
+                field: {
+                    gap: "8";
+                    paddingInline: string;
+                    '--input-height': string;
+                };
+                input: {
+                    textStyle: "body/md/regular";
+                };
+            };
+            lg: {
+                field: {
+                    gap: "8";
+                    paddingInline: string;
+                    '--input-height': string;
+                };
+                input: {
+                    textStyle: "body/lg/regular";
+                };
+            };
+        };
+    }>;
     toast: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "icon" | "root" | "closeTrigger" | "indicator" | "description" | "timestamp" | "actionTrigger", {
         variant: {
             [k: string]: {

package/dist/theme/slot-recipes/index.js

@@ -52,6 +52,7 @@ import tableSlotRecipe from "./Table.recipe.js";
 import tabsSlotRecipe from "./Tabs.recipe.js";
 import tagSlotRecipe from "./Tag.recipe.js";
 import tagsInputSlotRecipe from "./TagsInput.recipe.js";
+import textInputSlotRecipe from "./TextInput.recipe.js";
 import toastSlotRecipe from "./Toast.recipe.js";
 import tooltipSlotRecipe from "./Tooltip.recipe.js";
 import treeViewSlotRecipe from "./TreeView.recipe.js";
@@ -111,6 +112,7 @@ var slotRecipes = {
 	tabs: tabsSlotRecipe,
 	tag: tagSlotRecipe,
 	tagsInput: tagsInputSlotRecipe,
+	textInput: textInputSlotRecipe,
 	toast: toastSlotRecipe,
 	tooltip: tooltipSlotRecipe,
 	treeView: treeViewSlotRecipe

package/dist/theme/slot-recipes/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport dataWidgetSlotRecipe from './DataWidget.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport drawerSlotRecipe from './Drawer.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport groupHeadingSlotRecipe from './GroupHeading.recipe.ts';\nimport imageCropperSlotRecipe from './ImageCropper.recipe.ts';\nimport inlineLoadingSlotRecipe from './InlineLoading.recipe.ts';\nimport labeledDataSlotRecipe from './LabeledData.recipe.ts';\nimport listSlotRecipe from './List.recipe.ts';\nimport markdownSlotRecipe from './Markdown.recipe.ts';\nimport markdownCardSlotRecipe from './MarkdownCard.recipe.ts';\nimport menuSlotRecipe from './Menu.recipe.ts';\nimport multiselectSlotRecipe from './Multiselect.recipe.ts';\nimport nativeSelectSlotRecipe from './NativeSelect.recipe.ts';\nimport noteCardSlotRecipe from './NoteCard.recipe.ts';\nimport numberInputSlotRecipe from './NumberInput.recipe';\nimport overflowContentSlotRecipe from './OverflowContent.recipe.ts';\nimport pageFooterSlotRecipe from './PageFooter.recipe.ts';\nimport paginationSlotRecipe from './Pagination.recipe.ts';\nimport paginationLoadMoreSlotRecipe from './PaginationLoadMore.recipe.ts';\nimport popoverSlotRecipe from './Popover.recipe.ts';\nimport radioGroupSlotRecipe from './RadioGroup.recipe.ts';\nimport ribbonSlotRecipe from './Ribbon.recipe.ts';\nimport sectionHeadingSlotRecipe from './SectionHeading.recipe.ts';\nimport segmentGroupSlotRecipe from './SegmentGroup.recipe.ts';\nimport { selectSlotRecipe } from './Select.recipe.ts';\nimport settingsCardSlotRecipe from './SettingsCard.recipe.ts';\nimport sidebarSlotRecipe from './Sidebar.recipe.ts';\nimport splitButtonSlotRecipe from './SplitButton.recipe.ts';\nimport statSlotRecipe from './Stat.recipe.ts';\nimport stepCardSlotRecipe from './StepCard.recipe.ts';\nimport stepsSlotRecipe from './Steps.recipe.ts';\nimport switchSlotRecipe from './Switch.recipe';\nimport tableSlotRecipe from './Table.recipe.ts';\nimport tabsSlotRecipe from './Tabs.recipe';\nimport tagSlotRecipe from './Tag.recipe.ts';\nimport tagsInputSlotRecipe from './TagsInput.recipe.ts';\nimport toastSlotRecipe from './Toast.recipe';\nimport tooltipSlotRecipe from './Tooltip.recipe';\nimport treeViewSlotRecipe from './TreeView.recipe.ts';\n\nconst slotRecipes = {\n  accordion: accordionSlotRecipe,\n  actionBar: actionBarSlotRecipe,\n  alert: alertSlotRecipe,\n  avatar: avatarSlotRecipe,\n  breadcrumb: breadcrumbSlotRecipe,\n  card: cardSlotRecipe,\n  checkbox: checkboxSlotRecipe,\n  codeSnippet: codeSnippetSlotRecipe,\n  collapsible: collapsibleSlotRecipe,\n  combobox: comboboxSlotRecipe,\n  dataWidget: dataWidgetSlotRecipe,\n  datePicker: datePickerSlotRecipe,\n  datePickerSelect: datePickerSelectSlotRecipe,\n  dialog: dialogSlotRecipe,\n  draggableCard: draggableCardSlotRecipe,\n  drawer: drawerSlotRecipe,\n  emptyState: emptyStateSlotRecipe,\n  expandableCard: expandableCardSlotRecipe,\n  field: fieldSlotRecipe,\n  groupHeading: groupHeadingSlotRecipe,\n  fieldset: fieldsetSlotRecipe,\n  fileUpload: fileUploadSlotRecipe,\n  imageCropper: imageCropperSlotRecipe,\n  inlineLoading: inlineLoadingSlotRecipe,\n  list: listSlotRecipe,\n  markdown: markdownSlotRecipe,\n  markdownCard: markdownCardSlotRecipe,\n  menu: menuSlotRecipe,\n  multiselect: multiselectSlotRecipe,\n  noteCard: noteCardSlotRecipe,\n  nativeSelect: nativeSelectSlotRecipe,\n  numberInput: numberInputSlotRecipe,\n  overflowContent: overflowContentSlotRecipe,\n  pageFooter: pageFooterSlotRecipe,\n  pagination: paginationSlotRecipe,\n  paginationLoadMore: paginationLoadMoreSlotRecipe,\n  popover: popoverSlotRecipe,\n  radioGroup: radioGroupSlotRecipe,\n  ribbon: ribbonSlotRecipe,\n  sectionHeading: sectionHeadingSlotRecipe,\n  labeledData: labeledDataSlotRecipe,\n  segmentGroup: segmentGroupSlotRecipe,\n  sidebar: sidebarSlotRecipe,\n  select: selectSlotRecipe,\n  settingsCard: settingsCardSlotRecipe,\n  splitButton: splitButtonSlotRecipe,\n  stat: statSlotRecipe,\n  stepsCard: stepCardSlotRecipe,\n  steps: stepsSlotRecipe,\n  switch: switchSlotRecipe,\n  table: tableSlotRecipe,\n  tabs: tabsSlotRecipe,\n  tag: tagSlotRecipe,\n  tagsInput: tagsInputSlotRecipe,\n  toast: toastSlotRecipe,\n  tooltip: tooltipSlotRecipe,\n  treeView: treeViewSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,MAAM;CACN,UAAU;CACV,aAAa;CACb,aAAa;CACb,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,kBAAkB;CAClB,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CACV,YAAY;CACZ,cAAc;CACd,eAAe;CACf,MAAM;CACN,UAAU;CACV,cAAc;CACd,MAAM;CACN,aAAa;CACb,UAAU;CACV,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,YAAY;CACZ,YAAY;CACZ,oBAAoB;CACpB,SAAS;CACT,YAAY;CACZ,QAAQ;CACR,gBAAgB;CAChB,aAAa;CACb,cAAc;CACd,SAAS;CACT,QAAQ;CACR,cAAc;CACd,aAAa;CACb,MAAM;CACN,WAAW;CACX,OAAO;CACP,QAAQ;CACR,OAAO;CACP,MAAM;CACN,KAAK;CACL,WAAW;CACX,OAAO;CACP,SAAS;CACT,UAAU;AACZ"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport dataWidgetSlotRecipe from './DataWidget.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport drawerSlotRecipe from './Drawer.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport groupHeadingSlotRecipe from './GroupHeading.recipe.ts';\nimport imageCropperSlotRecipe from './ImageCropper.recipe.ts';\nimport inlineLoadingSlotRecipe from './InlineLoading.recipe.ts';\nimport labeledDataSlotRecipe from './LabeledData.recipe.ts';\nimport listSlotRecipe from './List.recipe.ts';\nimport markdownSlotRecipe from './Markdown.recipe.ts';\nimport markdownCardSlotRecipe from './MarkdownCard.recipe.ts';\nimport menuSlotRecipe from './Menu.recipe.ts';\nimport multiselectSlotRecipe from './Multiselect.recipe.ts';\nimport nativeSelectSlotRecipe from './NativeSelect.recipe.ts';\nimport noteCardSlotRecipe from './NoteCard.recipe.ts';\nimport numberInputSlotRecipe from './NumberInput.recipe';\nimport overflowContentSlotRecipe from './OverflowContent.recipe.ts';\nimport pageFooterSlotRecipe from './PageFooter.recipe.ts';\nimport paginationSlotRecipe from './Pagination.recipe.ts';\nimport paginationLoadMoreSlotRecipe from './PaginationLoadMore.recipe.ts';\nimport popoverSlotRecipe from './Popover.recipe.ts';\nimport radioGroupSlotRecipe from './RadioGroup.recipe.ts';\nimport ribbonSlotRecipe from './Ribbon.recipe.ts';\nimport sectionHeadingSlotRecipe from './SectionHeading.recipe.ts';\nimport segmentGroupSlotRecipe from './SegmentGroup.recipe.ts';\nimport { selectSlotRecipe } from './Select.recipe.ts';\nimport settingsCardSlotRecipe from './SettingsCard.recipe.ts';\nimport sidebarSlotRecipe from './Sidebar.recipe.ts';\nimport splitButtonSlotRecipe from './SplitButton.recipe.ts';\nimport statSlotRecipe from './Stat.recipe.ts';\nimport stepCardSlotRecipe from './StepCard.recipe.ts';\nimport stepsSlotRecipe from './Steps.recipe.ts';\nimport switchSlotRecipe from './Switch.recipe';\nimport tableSlotRecipe from './Table.recipe.ts';\nimport tabsSlotRecipe from './Tabs.recipe';\nimport tagSlotRecipe from './Tag.recipe.ts';\nimport tagsInputSlotRecipe from './TagsInput.recipe.ts';\nimport textInputSlotRecipe from './TextInput.recipe.ts';\nimport toastSlotRecipe from './Toast.recipe';\nimport tooltipSlotRecipe from './Tooltip.recipe';\nimport treeViewSlotRecipe from './TreeView.recipe.ts';\n\nconst slotRecipes = {\n  accordion: accordionSlotRecipe,\n  actionBar: actionBarSlotRecipe,\n  alert: alertSlotRecipe,\n  avatar: avatarSlotRecipe,\n  breadcrumb: breadcrumbSlotRecipe,\n  card: cardSlotRecipe,\n  checkbox: checkboxSlotRecipe,\n  codeSnippet: codeSnippetSlotRecipe,\n  collapsible: collapsibleSlotRecipe,\n  combobox: comboboxSlotRecipe,\n  dataWidget: dataWidgetSlotRecipe,\n  datePicker: datePickerSlotRecipe,\n  datePickerSelect: datePickerSelectSlotRecipe,\n  dialog: dialogSlotRecipe,\n  draggableCard: draggableCardSlotRecipe,\n  drawer: drawerSlotRecipe,\n  emptyState: emptyStateSlotRecipe,\n  expandableCard: expandableCardSlotRecipe,\n  field: fieldSlotRecipe,\n  groupHeading: groupHeadingSlotRecipe,\n  fieldset: fieldsetSlotRecipe,\n  fileUpload: fileUploadSlotRecipe,\n  imageCropper: imageCropperSlotRecipe,\n  inlineLoading: inlineLoadingSlotRecipe,\n  list: listSlotRecipe,\n  markdown: markdownSlotRecipe,\n  markdownCard: markdownCardSlotRecipe,\n  menu: menuSlotRecipe,\n  multiselect: multiselectSlotRecipe,\n  noteCard: noteCardSlotRecipe,\n  nativeSelect: nativeSelectSlotRecipe,\n  numberInput: numberInputSlotRecipe,\n  overflowContent: overflowContentSlotRecipe,\n  pageFooter: pageFooterSlotRecipe,\n  pagination: paginationSlotRecipe,\n  paginationLoadMore: paginationLoadMoreSlotRecipe,\n  popover: popoverSlotRecipe,\n  radioGroup: radioGroupSlotRecipe,\n  ribbon: ribbonSlotRecipe,\n  sectionHeading: sectionHeadingSlotRecipe,\n  labeledData: labeledDataSlotRecipe,\n  segmentGroup: segmentGroupSlotRecipe,\n  sidebar: sidebarSlotRecipe,\n  select: selectSlotRecipe,\n  settingsCard: settingsCardSlotRecipe,\n  splitButton: splitButtonSlotRecipe,\n  stat: statSlotRecipe,\n  stepsCard: stepCardSlotRecipe,\n  steps: stepsSlotRecipe,\n  switch: switchSlotRecipe,\n  table: tableSlotRecipe,\n  tabs: tabsSlotRecipe,\n  tag: tagSlotRecipe,\n  tagsInput: tagsInputSlotRecipe,\n  textInput: textInputSlotRecipe,\n  toast: toastSlotRecipe,\n  tooltip: tooltipSlotRecipe,\n  treeView: treeViewSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,MAAM;CACN,UAAU;CACV,aAAa;CACb,aAAa;CACb,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,kBAAkB;CAClB,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CACV,YAAY;CACZ,cAAc;CACd,eAAe;CACf,MAAM;CACN,UAAU;CACV,cAAc;CACd,MAAM;CACN,aAAa;CACb,UAAU;CACV,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,YAAY;CACZ,YAAY;CACZ,oBAAoB;CACpB,SAAS;CACT,YAAY;CACZ,QAAQ;CACR,gBAAgB;CAChB,aAAa;CACb,cAAc;CACd,SAAS;CACT,QAAQ;CACR,cAAc;CACd,aAAa;CACb,MAAM;CACN,WAAW;CACX,OAAO;CACP,QAAQ;CACR,OAAO;CACP,MAAM;CACN,KAAK;CACL,WAAW;CACX,WAAW;CACX,OAAO;CACP,SAAS;CACT,UAAU;AACZ"}

package/package.json

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