@bitrise/bitkit-v2 0.3.276 → 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/BitkitSkeletonGroup/BitkitSkeletonGroup.d.ts

@@ -0,0 +1,15 @@
+import { BoxProps } from '@chakra-ui/react/box';
+export interface BitkitSkeletonGroupProps extends BoxProps {
+    loading?: boolean;
+}
+/**
+ * Skeletons a group of shapes under a single, unified shimmer sweep. Each direct child becomes a
+ * grey block (its size and the gaps between children preserved) and one `::after` highlight travels
+ * across the whole group. Use it as the layout container for the shapes, e.g.
+ * `<BitkitSkeletonGroup display="flex" flexDirection="column" gap="8"><Box h="24" />…</BitkitSkeletonGroup>`.
+ *
+ * Prefer this over several standalone `<Skeleton>`s when the shapes should read as one loading block:
+ * separate skeletons each animate within their own bounds, so the sweep isn't continuous across them.
+ */
+declare const BitkitSkeletonGroup: import('react').ForwardRefExoticComponent<BitkitSkeletonGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export default BitkitSkeletonGroup;

package/dist/components/BitkitSkeletonGroup/BitkitSkeletonGroup.js

@@ -0,0 +1,46 @@
+import { skeletonShimmerAfter } from "../../theme/common/skeletonShimmer.js";
+import { Box } from "@chakra-ui/react/box";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region lib/components/BitkitSkeletonGroup/BitkitSkeletonGroup.tsx
+/**
+* Skeletons a group of shapes under a single, unified shimmer sweep. Each direct child becomes a
+* grey block (its size and the gaps between children preserved) and one `::after` highlight travels
+* across the whole group. Use it as the layout container for the shapes, e.g.
+* `<BitkitSkeletonGroup display="flex" flexDirection="column" gap="8"><Box h="24" />…</BitkitSkeletonGroup>`.
+*
+* Prefer this over several standalone `<Skeleton>`s when the shapes should read as one loading block:
+* separate skeletons each animate within their own bounds, so the sweep isn't continuous across them.
+*/
+var BitkitSkeletonGroup = forwardRef(({ children, loading = true, ...rest }, ref) => {
+	if (!loading) return /* @__PURE__ */ jsx(Box, {
+		ref,
+		...rest,
+		children
+	});
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		overflow: "hidden",
+		position: "relative",
+		css: {
+			"& > *": {
+				backgroundClip: "padding-box",
+				backgroundColor: "utilities/skeleton",
+				borderColor: "transparent",
+				color: "transparent",
+				cursor: "default",
+				pointerEvents: "none",
+				userSelect: "none"
+			},
+			"& > * *": { visibility: "hidden" },
+			"&::after": skeletonShimmerAfter
+		},
+		...rest,
+		children
+	});
+});
+BitkitSkeletonGroup.displayName = "BitkitSkeletonGroup";
+//#endregion
+export { BitkitSkeletonGroup as default };
+
+//# sourceMappingURL=BitkitSkeletonGroup.js.map

package/dist/components/BitkitSkeletonGroup/BitkitSkeletonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitSkeletonGroup.js","names":[],"sources":["../../../lib/components/BitkitSkeletonGroup/BitkitSkeletonGroup.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { forwardRef } from 'react';\n\nimport { skeletonShimmerAfter } from '../../theme/common/skeletonShimmer';\n\nexport interface BitkitSkeletonGroupProps extends BoxProps {\n  loading?: boolean;\n}\n\n/**\n * Skeletons a group of shapes under a single, unified shimmer sweep. Each direct child becomes a\n * grey block (its size and the gaps between children preserved) and one `::after` highlight travels\n * across the whole group. Use it as the layout container for the shapes, e.g.\n * `<BitkitSkeletonGroup display=\"flex\" flexDirection=\"column\" gap=\"8\"><Box h=\"24\" />…</BitkitSkeletonGroup>`.\n *\n * Prefer this over several standalone `<Skeleton>`s when the shapes should read as one loading block:\n * separate skeletons each animate within their own bounds, so the sweep isn't continuous across them.\n */\nconst BitkitSkeletonGroup = forwardRef<HTMLDivElement, BitkitSkeletonGroupProps>(\n  ({ children, loading = true, ...rest }, ref) => {\n    if (!loading) {\n      return (\n        <Box ref={ref} {...rest}>\n          {children}\n        </Box>\n      );\n    }\n\n    return (\n      <Box\n        ref={ref}\n        overflow=\"hidden\"\n        position=\"relative\"\n        css={{\n          // Direct children are the grey shapes; their own content is hidden. Mirrors the single-shape\n          // Skeleton recipe (bg + transparent border + padding-box clip) so an outlined child doesn't\n          // keep its border through the skeleton.\n          '& > *': {\n            backgroundClip: 'padding-box',\n            backgroundColor: 'utilities/skeleton',\n            borderColor: 'transparent',\n            color: 'transparent',\n            cursor: 'default',\n            pointerEvents: 'none',\n            userSelect: 'none',\n          },\n          '& > * *': {\n            visibility: 'hidden',\n          },\n          '&::after': skeletonShimmerAfter,\n        }}\n        {...rest}\n      >\n        {children}\n      </Box>\n    );\n  },\n);\n\nBitkitSkeletonGroup.displayName = 'BitkitSkeletonGroup';\n\nexport default BitkitSkeletonGroup;\n"],"mappings":";;;;;;;;;;;;;;AAkBA,IAAM,sBAAsB,YACzB,EAAE,UAAU,UAAU,MAAM,GAAG,QAAQ,QAAQ;CAC9C,IAAI,CAAC,SACH,OACE,oBAAC,KAAD;EAAU;EAAK,GAAI;EAChB;CACE,CAAA;CAIT,OACE,oBAAC,KAAD;EACO;EACL,UAAS;EACT,UAAS;EACT,KAAK;GAIH,SAAS;IACP,gBAAgB;IAChB,iBAAiB;IACjB,aAAa;IACb,OAAO;IACP,QAAQ;IACR,eAAe;IACf,YAAY;GACd;GACA,WAAW,EACT,YAAY,SACd;GACA,YAAY;EACd;EACA,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,oBAAoB,cAAc"}

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/components/index.d.ts

@@ -61,6 +61,7 @@ export { default as BitkitSelectMenu, type BitkitSelectMenuProps } from './Bitki
 export { default as BitkitSelectMenuAction, type BitkitSelectMenuActionProps, } from './BitkitSelectMenu/BitkitSelectMenuAction';
 export { default as BitkitSettingsCard, type BitkitSettingsCardContentProps, type BitkitSettingsCardProps, type BitkitSettingsCardStatusProps, } from './BitkitSettingsCard/BitkitSettingsCard';
 export { default as BitkitSidebar, type BitkitSidebarFooterProps, type BitkitSidebarGroupHeadingProps, type BitkitSidebarItemProps, type BitkitSidebarProjectProps, type BitkitSidebarProps, type BitkitSidebarTitleProps, } from './BitkitSidebar/BitkitSidebar';
+export { default as BitkitSkeletonGroup, type BitkitSkeletonGroupProps, } from './BitkitSkeletonGroup/BitkitSkeletonGroup';
 export { default as BitkitSpinner, type BitkitSpinnerProps } from './BitkitSpinner/BitkitSpinner';
 export { default as BitkitSplitButton, type BitkitSplitButtonProps } from './BitkitSplitButton/BitkitSplitButton';
 export { default as BitkitStat, type BitkitStatProps, type TrendColor, type TrendDirection, type TrendTextPlacement, } from './BitkitStat/BitkitStat';

package/dist/main.js

@@ -349,6 +349,7 @@ import BitkitSelect_default from "./components/BitkitSelect/BitkitSelect.js";
 import BitkitSelectableTag_default from "./components/BitkitSelectableTag/BitkitSelectableTag.js";
 import BitkitSettingsCard_default from "./components/BitkitSettingsCard/BitkitSettingsCard.js";
 import BitkitSidebar_default from "./components/BitkitSidebar/BitkitSidebar.js";
+import BitkitSkeletonGroup from "./components/BitkitSkeletonGroup/BitkitSkeletonGroup.js";
 import BitkitSpinner from "./components/BitkitSpinner/BitkitSpinner.js";
 import BitkitSplitButton_default from "./components/BitkitSplitButton/BitkitSplitButton.js";
 import BitkitStat from "./components/BitkitStat/BitkitStat.js";
@@ -366,4 +367,4 @@ import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeVie
 import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
 import bitkitTheme from "./theme/index.js";
 import Provider from "./providers/BitkitProvider.js";
-export { BitkitAccordion, BitkitActionBar, BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitStepperDialog_default as BitkitStepperDialog, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, rem, useResponsive, useStepperDialog };
+export { BitkitAccordion, BitkitActionBar, BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSkeletonGroup, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitStepperDialog_default as BitkitStepperDialog, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, rem, useResponsive, useStepperDialog };

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/common/skeletonShimmer.d.ts

@@ -0,0 +1 @@
+export declare const skeletonShimmerAfter: import('@chakra-ui/react').SystemStyleObject;

package/dist/theme/common/skeletonShimmer.js

@@ -0,0 +1,17 @@
+import { defineStyle } from "@chakra-ui/react/styled-system";
+//#region lib/theme/common/skeletonShimmer.ts
+var shimmerMask = "linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.63) 35%, rgb(0, 0, 0) 48%, rgba(0, 0, 0, 0.57) 55%, rgba(0, 0, 0, 0) 100%)";
+var skeletonShimmerAfter = defineStyle({
+	content: "\"\"",
+	position: "absolute",
+	inset: 0,
+	backgroundColor: "utilities/skeleton-highlight",
+	maskImage: shimmerMask,
+	WebkitMaskImage: shimmerMask,
+	animation: "skeleton-shimmer var(--duration, 1.5s) linear infinite",
+	pointerEvents: "none"
+});
+//#endregion
+export { skeletonShimmerAfter };
+
+//# sourceMappingURL=skeletonShimmer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeletonShimmer.js","names":[],"sources":["../../../lib/theme/common/skeletonShimmer.ts"],"sourcesContent":["import { defineStyle } from '@chakra-ui/react/styled-system';\n\nconst shimmerMask =\n  'linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.63) 35%, rgb(0, 0, 0) 48%, rgba(0, 0, 0, 0.57) 55%, rgba(0, 0, 0, 0) 100%)';\n\n// A soft-masked highlight band sweeping left→right, painted as an `::after` overlay. Shared by the\n// single-shape Skeleton recipe and BitkitSkeletonGroup so one sweep can span a whole group of shapes.\nexport const skeletonShimmerAfter = defineStyle({\n  content: '\"\"',\n  position: 'absolute',\n  inset: 0,\n  backgroundColor: 'utilities/skeleton-highlight',\n  maskImage: shimmerMask,\n  WebkitMaskImage: shimmerMask,\n  animation: 'skeleton-shimmer var(--duration, 1.5s) linear infinite',\n  pointerEvents: 'none',\n});\n"],"mappings":";;AAEA,IAAM,cACJ;AAIF,IAAa,uBAAuB,YAAY;CAC9C,SAAS;CACT,UAAU;CACV,OAAO;CACP,iBAAiB;CACjB,WAAW;CACX,iBAAiB;CACjB,WAAW;CACX,eAAe;AACjB,CAAC"}

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/Skeleton.recipe.d.ts

@@ -1,10 +1,9 @@
 declare const skeletonRecipe: import('@chakra-ui/react').RecipeDefinition<{
     loading: {
         true: {
-            backgroundImage: "linear-gradient(270deg,var(--start-color),var(--end-color),var(--end-color),var(--start-color))";
-            backgroundSize: "200% 100%";
-            animation: "bg-position var(--duration, 1.5s) linear infinite";
-            borderRadius: "4";
+            position: "relative";
+            overflow: "hidden";
+            backgroundColor: "utilities/skeleton";
             borderColor: "transparent";
             backgroundClip: "padding-box";
             cursor: "default";
@@ -12,9 +11,10 @@ declare const skeletonRecipe: import('@chakra-ui/react').RecipeDefinition<{
             pointerEvents: "none";
             userSelect: "none";
             flexShrink: "0";
-            '&::before, &::after, *': {
+            '&::before, *': {
                 visibility: "hidden";
             };
+            '&::after': import('@chakra-ui/react').SystemStyleObject;
         };
         false: {
             animation: "fade-in var(--fade-duration, 0.1s) ease-out !important";