@bitrise/bitkit-v2 0.3.427 → 0.3.429

package/dist/components/BitkitRibbon/BitkitRibbon.js

@@ -7,11 +7,11 @@ import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region lib/components/BitkitRibbon/BitkitRibbon.tsx
 var BitkitRibbon = forwardRef((props, ref) => {
-	const { action, children, colorVariant = "blue", link, onDismiss, title, ...rest } = props;
+	const { action, children, colorVariant = "blue", css, link, onDismiss, title, ...rest } = props;
 	const styles = useSlotRecipe({ key: "ribbon" })({ colorVariant });
 	return /* @__PURE__ */ jsxs(Box, {
 		ref,
-		css: styles.root,
+		css: [styles.root, css],
 		...rest,
 		children: [/* @__PURE__ */ jsxs(chakra.div, {
 			css: styles.content,

package/dist/components/BitkitRibbon/BitkitRibbon.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitRibbon.js","names":[],"sources":["../../../lib/components/BitkitRibbon/BitkitRibbon.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport BitkitLink from '../BitkitLink/BitkitLink';\nimport { type NotificationAction } from '../common/notificationMaps';\n\nexport type RibbonActionProps = NotificationAction;\n\nexport type RibbonLinkProps = {\n  href?: string;\n  label: string;\n  target?: HTMLAnchorElement['target'];\n};\n\nexport interface BitkitRibbonProps extends Omit<BoxProps, 'colorPalette'> {\n  action?: RibbonActionProps;\n  colorVariant?: 'blue' | 'green' | 'purple' | 'red' | 'yellow';\n  link?: RibbonLinkProps;\n  onDismiss?: () => void;\n  title?: string;\n}\n\nconst BitkitRibbon = forwardRef<HTMLDivElement, BitkitRibbonProps>((props, ref) => {\n  const { action, children, colorVariant = 'blue', link, onDismiss, title, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'ribbon' });\n  const styles = recipe({ colorVariant });\n\n  return (\n    <Box ref={ref} css={styles.root} {...rest}>\n      <chakra.div css={styles.content}>\n        <chakra.div css={styles.textBlock}>\n          {title && <chakra.strong>{title}</chakra.strong>}\n          <chakra.span>{children}</chakra.span>\n          {link && (\n            <BitkitLink href={link.href} target={link.target} textDecoration=\"underline\">\n              {link.label}\n            </BitkitLink>\n          )}\n        </chakra.div>\n        {action &&\n          (action.href !== undefined ? (\n            <BitkitColorButton\n              colorVariant={colorVariant}\n              href={action.href}\n              isExternal={action.target === '_blank'}\n              onClick={action.onClick}\n              state={action.state}\n              target={action.target}\n            >\n              {action.label}\n            </BitkitColorButton>\n          ) : (\n            <BitkitColorButton colorVariant={colorVariant} onClick={action.onClick} state={action.state}>\n              {action.label}\n            </BitkitColorButton>\n          ))}\n      </chakra.div>\n      {onDismiss && (\n        <BitkitCloseButton colorVariant={colorVariant} css={styles.closeButton} size=\"sm\" onClick={onDismiss} />\n      )}\n    </Box>\n  );\n});\n\nBitkitRibbon.displayName = 'BitkitRibbon';\n\nexport default BitkitRibbon;\n"],"mappings":";;;;;;;;AAyBA,IAAM,eAAe,YAA+C,OAAO,QAAQ;CACjF,MAAM,EAAE,QAAQ,UAAU,eAAe,QAAQ,MAAM,WAAW,OAAO,GAAG,SAAS;CAGrF,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,CAAA,CAAO,EAAE,aAAa,CAAC;CAEtC,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;EAArC,UAAA,CACE,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;GAAxB,UAAA,CACE,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA;KACG,SAAS,oBAAC,OAAO,QAAR,EAAA,UAAgB,MAAqB,CAAA;KAC/C,oBAAC,OAAO,MAAR,EAAc,SAAsB,CAAA;KACnC,QACC,oBAAC,YAAD;MAAY,MAAM,KAAK;MAAM,QAAQ,KAAK;MAAQ,gBAAe;MAC9D,UAAA,KAAK;KACI,CAAA;IAEJ;GACX,CAAA,GAAA,WACE,OAAO,SAAS,KAAA,IACf,oBAAC,mBAAD;IACgB;IACd,MAAM,OAAO;IACb,YAAY,OAAO,WAAW;IAC9B,SAAS,OAAO;IAChB,OAAO,OAAO;IACd,QAAQ,OAAO;IAEd,UAAA,OAAO;GACS,CAAA,IAEnB,oBAAC,mBAAD;IAAiC;IAAc,SAAS,OAAO;IAAS,OAAO,OAAO;IACnF,UAAA,OAAO;GACS,CAAA,EAEb;EACX,CAAA,GAAA,aACC,oBAAC,mBAAD;GAAiC;GAAc,KAAK,OAAO;GAAa,MAAK;GAAK,SAAS;EAAY,CAAA,CAEtG;;AAET,CAAC;AAED,aAAa,cAAc"}
+{"version":3,"file":"BitkitRibbon.js","names":[],"sources":["../../../lib/components/BitkitRibbon/BitkitRibbon.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport BitkitLink from '../BitkitLink/BitkitLink';\nimport { type NotificationAction } from '../common/notificationMaps';\n\nexport type RibbonActionProps = NotificationAction;\n\nexport type RibbonLinkProps = {\n  href?: string;\n  label: string;\n  target?: HTMLAnchorElement['target'];\n};\n\nexport interface BitkitRibbonProps extends Omit<BoxProps, 'colorPalette'> {\n  action?: RibbonActionProps;\n  colorVariant?: 'blue' | 'green' | 'purple' | 'red' | 'yellow';\n  link?: RibbonLinkProps;\n  onDismiss?: () => void;\n  title?: string;\n}\n\nconst BitkitRibbon = forwardRef<HTMLDivElement, BitkitRibbonProps>((props, ref) => {\n  const { action, children, colorVariant = 'blue', css, link, onDismiss, title, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'ribbon' });\n  const styles = recipe({ colorVariant });\n\n  return (\n    <Box ref={ref} css={[styles.root, css]} {...rest}>\n      <chakra.div css={styles.content}>\n        <chakra.div css={styles.textBlock}>\n          {title && <chakra.strong>{title}</chakra.strong>}\n          <chakra.span>{children}</chakra.span>\n          {link && (\n            <BitkitLink href={link.href} target={link.target} textDecoration=\"underline\">\n              {link.label}\n            </BitkitLink>\n          )}\n        </chakra.div>\n        {action &&\n          (action.href !== undefined ? (\n            <BitkitColorButton\n              colorVariant={colorVariant}\n              href={action.href}\n              isExternal={action.target === '_blank'}\n              onClick={action.onClick}\n              state={action.state}\n              target={action.target}\n            >\n              {action.label}\n            </BitkitColorButton>\n          ) : (\n            <BitkitColorButton colorVariant={colorVariant} onClick={action.onClick} state={action.state}>\n              {action.label}\n            </BitkitColorButton>\n          ))}\n      </chakra.div>\n      {onDismiss && (\n        <BitkitCloseButton colorVariant={colorVariant} css={styles.closeButton} size=\"sm\" onClick={onDismiss} />\n      )}\n    </Box>\n  );\n});\n\nBitkitRibbon.displayName = 'BitkitRibbon';\n\nexport default BitkitRibbon;\n"],"mappings":";;;;;;;;AAyBA,IAAM,eAAe,YAA+C,OAAO,QAAQ;CACjF,MAAM,EAAE,QAAQ,UAAU,eAAe,QAAQ,KAAK,MAAM,WAAW,OAAO,GAAG,SAAS;CAG1F,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,CAAA,CAAO,EAAE,aAAa,CAAC;CAEtC,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,GAAI;EAA5C,UAAA,CACE,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;GAAxB,UAAA,CACE,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA;KACG,SAAS,oBAAC,OAAO,QAAR,EAAA,UAAgB,MAAqB,CAAA;KAC/C,oBAAC,OAAO,MAAR,EAAc,SAAsB,CAAA;KACnC,QACC,oBAAC,YAAD;MAAY,MAAM,KAAK;MAAM,QAAQ,KAAK;MAAQ,gBAAe;MAC9D,UAAA,KAAK;KACI,CAAA;IAEJ;GACX,CAAA,GAAA,WACE,OAAO,SAAS,KAAA,IACf,oBAAC,mBAAD;IACgB;IACd,MAAM,OAAO;IACb,YAAY,OAAO,WAAW;IAC9B,SAAS,OAAO;IAChB,OAAO,OAAO;IACd,QAAQ,OAAO;IAEd,UAAA,OAAO;GACS,CAAA,IAEnB,oBAAC,mBAAD;IAAiC;IAAc,SAAS,OAAO;IAAS,OAAO,OAAO;IACnF,UAAA,OAAO;GACS,CAAA,EAEb;EACX,CAAA,GAAA,aACC,oBAAC,mBAAD;GAAiC;GAAc,KAAK,OAAO;GAAa,MAAK;GAAK,SAAS;EAAY,CAAA,CAEtG;;AAET,CAAC;AAED,aAAa,cAAc"}

package/dist/components/BitkitSectionHeading/BitkitSectionHeading.js

@@ -7,12 +7,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region lib/components/BitkitSectionHeading/BitkitSectionHeading.tsx
 var HELPER_DOT = "•";
 var BitkitSectionHeading = forwardRef((props, ref) => {
-	const { children, helperText, helperTooltip, icon: Icon, label, ...rest } = props;
+	const { children, css, helperText, helperTooltip, icon: Icon, label, ...rest } = props;
 	const styles = useSlotRecipe({ key: "sectionHeading" })();
 	const helperItems = Array.isArray(helperText) ? helperText : helperText ? [helperText] : [];
 	const hasHelper = helperItems.length > 0 || Boolean(helperTooltip);
 	return /* @__PURE__ */ jsxs(Box, {
-		css: styles.root,
+		css: [styles.root, css],
 		ref,
 		...rest,
 		children: [/* @__PURE__ */ jsxs(chakra.div, {

package/dist/components/BitkitSectionHeading/BitkitSectionHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitSectionHeading.js","names":[],"sources":["../../../lib/components/BitkitSectionHeading/BitkitSectionHeading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, Fragment, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconInfoCircle from '../../icons/IconInfoCircle';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nexport interface BitkitSectionHeadingProps extends Omit<BoxProps, 'icon'> {\n  children?: ReactNode;\n  helperText?: ReactNode | ReactNode[];\n  helperTooltip?: string;\n  icon?: BitkitIconComponent;\n  label: string;\n}\n\nconst HELPER_DOT = '\\u2022';\n\nconst BitkitSectionHeading = forwardRef<HTMLDivElement, BitkitSectionHeadingProps>((props, ref) => {\n  const { children, helperText, helperTooltip, icon: Icon, label, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'sectionHeading' });\n  const styles = recipe();\n\n  const helperItems = Array.isArray(helperText) ? helperText : helperText ? [helperText] : [];\n  const hasHelper = helperItems.length > 0 || Boolean(helperTooltip);\n\n  return (\n    <Box css={styles.root} ref={ref} {...rest}>\n      <chakra.div css={styles.contentBlock}>\n        <chakra.div css={styles.titleBlock}>\n          {Icon && <Icon css={styles.icon} size=\"24\" />}\n          <chakra.h3 css={styles.label}>{label}</chakra.h3>\n        </chakra.div>\n        {hasHelper && (\n          <chakra.div css={styles.helperBlock}>\n            {helperItems.map((text, index) => (\n              <Fragment key={index}>\n                {index > 0 && (\n                  <chakra.span color=\"text/tertiary\" flexShrink={0} textStyle=\"body/md/regular\">\n                    {HELPER_DOT}\n                  </chakra.span>\n                )}\n                <chakra.span css={styles.helperText}>{text}</chakra.span>\n              </Fragment>\n            ))}\n            {helperTooltip && (\n              <BitkitTooltip text={helperTooltip}>\n                <IconInfoCircle color=\"icon/tertiary\" size=\"16\" />\n              </BitkitTooltip>\n            )}\n          </chakra.div>\n        )}\n      </chakra.div>\n      {children}\n    </Box>\n  );\n});\n\nBitkitSectionHeading.displayName = 'BitkitSectionHeading';\n\nexport default BitkitSectionHeading;\n"],"mappings":";;;;;;;AAgBA,IAAM,aAAa;AAEnB,IAAM,uBAAuB,YAAuD,OAAO,QAAQ;CACjG,MAAM,EAAE,UAAU,YAAY,eAAe,MAAM,MAAM,OAAO,GAAG,SAAS;CAG5E,MAAM,SADS,cAAc,EAAE,KAAK,iBAAiB,CACtC,CAAA,CAAO;CAEtB,MAAM,cAAc,MAAM,QAAQ,UAAU,IAAI,aAAa,aAAa,CAAC,UAAU,IAAI,CAAC;CAC1F,MAAM,YAAY,YAAY,SAAS,KAAK,QAAQ,aAAa;CAEjE,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAW;EAAK,GAAI;EAArC,UAAA,CACE,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;GAAxB,UAAA,CACE,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA,CACG,QAAQ,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAM,MAAK;IAAM,CAAA,GAC5C,oBAAC,OAAO,IAAR;KAAW,KAAK,OAAO;KAAQ,UAAA;IAAiB,CAAA,CACtC;GACX,CAAA,GAAA,aACC,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA,CACG,YAAY,KAAK,MAAM,UACtB,qBAAC,UAAD,EAAA,UAAA,CACG,QAAQ,KACP,oBAAC,OAAO,MAAR;KAAa,OAAM;KAAgB,YAAY;KAAG,WAAU;KACzD,UAAA;IACU,CAAA,GAEf,oBAAC,OAAO,MAAR;KAAa,KAAK,OAAO;KAAa,UAAA;IAAkB,CAAA,CAChD,EAAA,GAPK,KAOL,CACX,GACA,iBACC,oBAAC,eAAD;KAAe,MAAM;KACnB,UAAA,oBAAC,gBAAD;MAAgB,OAAM;MAAgB,MAAK;KAAM,CAAA;IACpC,CAAA,CAEP;GAEJ,CAAA,CAAA;EACX,CAAA,GAAA,QACE;;AAET,CAAC;AAED,qBAAqB,cAAc"}
+{"version":3,"file":"BitkitSectionHeading.js","names":[],"sources":["../../../lib/components/BitkitSectionHeading/BitkitSectionHeading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, Fragment, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconInfoCircle from '../../icons/IconInfoCircle';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nexport interface BitkitSectionHeadingProps extends Omit<BoxProps, 'icon'> {\n  children?: ReactNode;\n  helperText?: ReactNode | ReactNode[];\n  helperTooltip?: string;\n  icon?: BitkitIconComponent;\n  label: string;\n}\n\nconst HELPER_DOT = '\\u2022';\n\nconst BitkitSectionHeading = forwardRef<HTMLDivElement, BitkitSectionHeadingProps>((props, ref) => {\n  const { children, css, helperText, helperTooltip, icon: Icon, label, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'sectionHeading' });\n  const styles = recipe();\n\n  const helperItems = Array.isArray(helperText) ? helperText : helperText ? [helperText] : [];\n  const hasHelper = helperItems.length > 0 || Boolean(helperTooltip);\n\n  return (\n    <Box css={[styles.root, css]} ref={ref} {...rest}>\n      <chakra.div css={styles.contentBlock}>\n        <chakra.div css={styles.titleBlock}>\n          {Icon && <Icon css={styles.icon} size=\"24\" />}\n          <chakra.h3 css={styles.label}>{label}</chakra.h3>\n        </chakra.div>\n        {hasHelper && (\n          <chakra.div css={styles.helperBlock}>\n            {helperItems.map((text, index) => (\n              <Fragment key={index}>\n                {index > 0 && (\n                  <chakra.span color=\"text/tertiary\" flexShrink={0} textStyle=\"body/md/regular\">\n                    {HELPER_DOT}\n                  </chakra.span>\n                )}\n                <chakra.span css={styles.helperText}>{text}</chakra.span>\n              </Fragment>\n            ))}\n            {helperTooltip && (\n              <BitkitTooltip text={helperTooltip}>\n                <IconInfoCircle color=\"icon/tertiary\" size=\"16\" />\n              </BitkitTooltip>\n            )}\n          </chakra.div>\n        )}\n      </chakra.div>\n      {children}\n    </Box>\n  );\n});\n\nBitkitSectionHeading.displayName = 'BitkitSectionHeading';\n\nexport default BitkitSectionHeading;\n"],"mappings":";;;;;;;AAgBA,IAAM,aAAa;AAEnB,IAAM,uBAAuB,YAAuD,OAAO,QAAQ;CACjG,MAAM,EAAE,UAAU,KAAK,YAAY,eAAe,MAAM,MAAM,OAAO,GAAG,SAAS;CAGjF,MAAM,SADS,cAAc,EAAE,KAAK,iBAAiB,CACtC,CAAA,CAAO;CAEtB,MAAM,cAAc,MAAM,QAAQ,UAAU,IAAI,aAAa,aAAa,CAAC,UAAU,IAAI,CAAC;CAC1F,MAAM,YAAY,YAAY,SAAS,KAAK,QAAQ,aAAa;CAEjE,OACE,qBAAC,KAAD;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAQ;EAAK,GAAI;EAA5C,UAAA,CACE,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;GAAxB,UAAA,CACE,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA,CACG,QAAQ,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAM,MAAK;IAAM,CAAA,GAC5C,oBAAC,OAAO,IAAR;KAAW,KAAK,OAAO;KAAQ,UAAA;IAAiB,CAAA,CACtC;GACX,CAAA,GAAA,aACC,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA,CACG,YAAY,KAAK,MAAM,UACtB,qBAAC,UAAD,EAAA,UAAA,CACG,QAAQ,KACP,oBAAC,OAAO,MAAR;KAAa,OAAM;KAAgB,YAAY;KAAG,WAAU;KACzD,UAAA;IACU,CAAA,GAEf,oBAAC,OAAO,MAAR;KAAa,KAAK,OAAO;KAAa,UAAA;IAAkB,CAAA,CAChD,EAAA,GAPK,KAOL,CACX,GACA,iBACC,oBAAC,eAAD;KAAe,MAAM;KACnB,UAAA,oBAAC,gBAAD;MAAgB,OAAM;MAAgB,MAAK;KAAM,CAAA;IACpC,CAAA,CAEP;GAEJ,CAAA,CAAA;EACX,CAAA,GAAA,QACE;;AAET,CAAC;AAED,qBAAqB,cAAc"}

package/dist/components/BitkitSelectMenu/SelectMenuShell.js

@@ -22,6 +22,7 @@ var selectSizeMap = {
 	}
 };
 var SelectMenuShell = ({ NS, children, collection, contentProps, contentRef, emptyHelperText, emptyLabel = "No matching options", iconSize, isLoading = false, onScrolledToBottom, onSearchChange, renderItem, searchValue, spinnerSize, styles }) => {
+	const { css: contentCss, ...restContentProps } = contentProps ?? {};
 	const isEmpty = collection.size === 0;
 	const hasAction = isValidElement(children);
 	const wasAtBottom = useRef(false);
@@ -37,9 +38,9 @@ var SelectMenuShell = ({ NS, children, collection, contentProps, contentRef, emp
 			styles
 		},
 		children: /* @__PURE__ */ jsxs(NS.Content, {
-			css: styles.content,
+			css: [styles.content, contentCss],
 			ref: contentRef,
-			...contentProps,
+			...restContentProps,
 			children: [
 				!onSearchChange && hasAction && /* @__PURE__ */ jsx("span", {
 					"data-autofocus": "",

package/dist/components/BitkitSelectMenu/SelectMenuShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuShell.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/SelectMenuShell.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { type Combobox } from '@chakra-ui/react/combobox';\nimport { type Select, type SelectContentProps } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ChangeEvent, isValidElement, type ReactNode, type Ref, type UIEvent, useRef } from 'react';\n\nimport { IconCross, IconMagnifier } from '../../icons';\nimport BitkitGroupHeading from '../BitkitGroupHeading/BitkitGroupHeading';\nimport {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuScrollProps,\n  type BitkitSelectMenuSearchProps,\n} from './BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild, SelectMenuShellContextProvider } from './BitkitSelectMenuAction';\n\nexport const selectSizeMap = {\n  lg: { avatarSize: '32', iconSize: '24', spinnerSize: 'lg' },\n  md: { avatarSize: '24', iconSize: '16', spinnerSize: 'md' },\n} as const;\n\nexport type SelectSizes = (typeof selectSizeMap)[keyof typeof selectSizeMap];\n\n/**\n * Internal shared shell for BitkitSelectMenu and BitkitMultiselectMenu.\n * Handles Content wrapper, search, loading, empty state, groups, and the action slot —\n * the caller only provides per-item rendering via renderItem and any sub-components\n * (e.g. <BitkitSelectMenu.Action />) via children.\n */\nexport type SelectMenuShellProps<T extends { value: string; group?: string }> = {\n  NS: typeof Select | typeof Combobox;\n  children?: BitkitSelectMenuActionChild;\n  collection: ListCollection<T>;\n  contentProps?: SelectContentProps;\n  contentRef?: Ref<HTMLDivElement>;\n  iconSize: SelectSizes['iconSize'];\n  isLoading?: boolean;\n  renderItem: (item: T) => ReactNode;\n  spinnerSize: SelectSizes['spinnerSize'];\n  styles: Record<string, SystemStyleObject>;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuScrollProps &\n  BitkitSelectMenuEmptyStateProps;\n\nexport const SelectMenuShell = <T extends { value: string; group?: string }>({\n  NS,\n  children,\n  collection,\n  contentProps,\n  contentRef,\n  emptyHelperText,\n  emptyLabel = 'No matching options',\n  iconSize,\n  isLoading = false,\n  onScrolledToBottom,\n  onSearchChange,\n  renderItem,\n  searchValue,\n  spinnerSize,\n  styles,\n}: SelectMenuShellProps<T>) => {\n  const isEmpty = collection.size === 0;\n  const hasAction = isValidElement(children);\n\n  const wasAtBottom = useRef(false);\n  const handleItemListScroll = (event: UIEvent<HTMLDivElement>) => {\n    const list = event.currentTarget;\n    const atBottom = list.scrollTop >= list.scrollHeight - list.offsetHeight - 1;\n    // Only the transition into \"at the end\", so resting at the bottom doesn't keep asking.\n    if (atBottom && !wasAtBottom.current) onScrolledToBottom?.();\n    wasAtBottom.current = atBottom;\n  };\n\n  return (\n    <SelectMenuShellContextProvider value={{ iconSize, styles }}>\n      <NS.Content css={styles.content} ref={contentRef} {...contentProps}>\n        {/*\n          Without a search input, Zag's getInitialFocus (see @zag-js/dom-query) picks the first\n          tabbable descendant as the menu's initial focus target — which would be the action\n          slot, visually confusing. A hidden [data-autofocus] span wins over tabbables in\n          getInitialFocus's querySelector, so we focus an invisible element instead and Zag's\n          aria-activedescendant drives the highlight like a normal Select would.\n        */}\n        {!onSearchChange && hasAction && <span data-autofocus=\"\" tabIndex={-1} aria-hidden=\"true\" />}\n        {onSearchChange && (\n          <SelectMenuSearch\n            iconSize={iconSize}\n            styles={styles}\n            value={searchValue ?? ''}\n            onSearchChange={onSearchChange}\n          />\n        )}\n        <Box css={styles.itemList} onScroll={handleItemListScroll}>\n          {isLoading && (\n            <Box css={styles.item}>\n              <Spinner variant=\"purple\" size={spinnerSize} css={styles.itemLoading} />\n              <Text css={styles.itemLoadingLabel}>Loading...</Text>\n            </Box>\n          )}\n          {!isLoading && isEmpty && (\n            <Box css={styles.emptyState}>\n              <Text css={styles.itemLabel}>{emptyLabel}</Text>\n              {emptyHelperText && <Text css={styles.itemHelperText}>{emptyHelperText}</Text>}\n            </Box>\n          )}\n          {!isLoading &&\n            !isEmpty &&\n            collection.group().map(([type, group]) => (\n              <NS.ItemGroup key={type}>\n                {type && (\n                  <NS.ItemGroupLabel asChild>\n                    <BitkitGroupHeading label={type} paddingBlock=\"12\" paddingInline=\"16\" />\n                  </NS.ItemGroupLabel>\n                )}\n                {group.map(renderItem)}\n              </NS.ItemGroup>\n            ))}\n        </Box>\n        {children}\n      </NS.Content>\n    </SelectMenuShellContextProvider>\n  );\n};\n\ntype SelectMenuSearchProps = {\n  iconSize: '16' | '24';\n  onSearchChange: (searchText: string) => void;\n  styles: Record<string, SystemStyleObject>;\n  value: string;\n};\n\nconst SelectMenuSearch = ({ iconSize, onSearchChange, styles, value }: SelectMenuSearchProps) => (\n  <Box css={styles.searchInputGroup}>\n    <IconMagnifier size={iconSize} color=\"icon/tertiary\" />\n    <chakra.input\n      aria-label=\"Search\"\n      css={styles.searchInput}\n      placeholder=\"Search...\"\n      value={value}\n      onChange={(event: ChangeEvent<HTMLInputElement>) => onSearchChange(event.target.value)}\n      onKeyDown={(event) => {\n        // Zag's Select.Content keyDown listener fires ITEM.CLICK + preventDefault on Space\n        // regardless of which descendant is focused. That would eat the space before the\n        // input can type it. Enter is left alone so \"type-then-Enter-to-select\" still works.\n        if (event.key === ' ') event.stopPropagation();\n      }}\n    />\n    {value && (\n      <chakra.button\n        type=\"button\"\n        css={styles.searchClear}\n        aria-label=\"Clear search\"\n        onClick={() => onSearchChange('')}\n      >\n        <IconCross size={iconSize} />\n      </chakra.button>\n    )}\n  </Box>\n);\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,gBAAgB;CAC3B,IAAI;EAAE,YAAY;EAAM,UAAU;EAAM,aAAa;CAAK;CAC1D,IAAI;EAAE,YAAY;EAAM,UAAU;EAAM,aAAa;CAAK;AAC5D;AAyBA,IAAa,mBAAgE,EAC3E,IACA,UACA,YACA,cACA,YACA,iBACA,aAAa,uBACb,UACA,YAAY,OACZ,oBACA,gBACA,YACA,aACA,aACA,aAC6B;CAC7B,MAAM,UAAU,WAAW,SAAS;CACpC,MAAM,YAAY,eAAe,QAAQ;CAEzC,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,wBAAwB,UAAmC;EAC/D,MAAM,OAAO,MAAM;EACnB,MAAM,WAAW,KAAK,aAAa,KAAK,eAAe,KAAK,eAAe;EAE3E,IAAI,YAAY,CAAC,YAAY,SAAS,qBAAqB;EAC3D,YAAY,UAAU;CACxB;CAEA,OACE,oBAAC,gCAAD;EAAgC,OAAO;GAAE;GAAU;EAAO;EACxD,UAAA,qBAAC,GAAG,SAAJ;GAAY,KAAK,OAAO;GAAS,KAAK;GAAY,GAAI;GAAtD,UAAA;IAQG,CAAC,kBAAkB,aAAa,oBAAC,QAAD;KAAM,kBAAe;KAAG,UAAU;KAAI,eAAY;IAAQ,CAAA;IAC1F,kBACC,oBAAC,kBAAD;KACY;KACF;KACR,OAAO,eAAe;KACN;IACjB,CAAA;IAEH,qBAAC,KAAD;KAAK,KAAK,OAAO;KAAU,UAAU;KAArC,UAAA;MACG,aACC,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACE,oBAAC,SAAD;QAAS,SAAQ;QAAS,MAAM;QAAa,KAAK,OAAO;OAAc,CAAA,GACvE,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAkB,UAAA;OAAgB,CAAA,CACjD;;MAEN,CAAC,aAAa,WACb,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACE,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAY,UAAA;OAAiB,CAAA,GAC9C,mBAAmB,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAiB,UAAA;OAAsB,CAAA,CAC1E;;MAEN,CAAC,aACA,CAAC,WACD,WAAW,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,WAC7B,qBAAC,GAAG,WAAJ,EAAA,UAAA,CACG,QACC,oBAAC,GAAG,gBAAJ;OAAmB,SAAA;OACjB,UAAA,oBAAC,oBAAD;QAAoB,OAAO;QAAM,cAAa;QAAK,eAAc;OAAM,CAAA;MACtD,CAAA,GAEpB,MAAM,IAAI,UAAU,CACT,EAAA,GAPK,IAOL,CACf;KACA;;IACJ;GACS;;CACkB,CAAA;AAEpC;AASA,IAAM,oBAAoB,EAAE,UAAU,gBAAgB,QAAQ,YAC5D,qBAAC,KAAD;CAAK,KAAK,OAAO;CAAjB,UAAA;EACE,oBAAC,eAAD;GAAe,MAAM;GAAU,OAAM;EAAiB,CAAA;EACtD,oBAAC,OAAO,OAAR;GACE,cAAW;GACX,KAAK,OAAO;GACZ,aAAY;GACL;GACP,WAAW,UAAyC,eAAe,MAAM,OAAO,KAAK;GACrF,YAAY,UAAU;IAIpB,IAAI,MAAM,QAAQ,KAAK,MAAM,gBAAgB;GAC/C;EACD,CAAA;EACA,SACC,oBAAC,OAAO,QAAR;GACE,MAAK;GACL,KAAK,OAAO;GACZ,cAAW;GACX,eAAe,eAAe,EAAE;GAEhC,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAW,CAAA;EACf,CAAA;CAEd"}
+{"version":3,"file":"SelectMenuShell.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/SelectMenuShell.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { type Combobox } from '@chakra-ui/react/combobox';\nimport { type Select, type SelectContentProps } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ChangeEvent, isValidElement, type ReactNode, type Ref, type UIEvent, useRef } from 'react';\n\nimport { IconCross, IconMagnifier } from '../../icons';\nimport BitkitGroupHeading from '../BitkitGroupHeading/BitkitGroupHeading';\nimport {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuScrollProps,\n  type BitkitSelectMenuSearchProps,\n} from './BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild, SelectMenuShellContextProvider } from './BitkitSelectMenuAction';\n\nexport const selectSizeMap = {\n  lg: { avatarSize: '32', iconSize: '24', spinnerSize: 'lg' },\n  md: { avatarSize: '24', iconSize: '16', spinnerSize: 'md' },\n} as const;\n\nexport type SelectSizes = (typeof selectSizeMap)[keyof typeof selectSizeMap];\n\n/**\n * Internal shared shell for BitkitSelectMenu and BitkitMultiselectMenu.\n * Handles Content wrapper, search, loading, empty state, groups, and the action slot —\n * the caller only provides per-item rendering via renderItem and any sub-components\n * (e.g. <BitkitSelectMenu.Action />) via children.\n */\nexport type SelectMenuShellProps<T extends { value: string; group?: string }> = {\n  NS: typeof Select | typeof Combobox;\n  children?: BitkitSelectMenuActionChild;\n  collection: ListCollection<T>;\n  contentProps?: SelectContentProps;\n  contentRef?: Ref<HTMLDivElement>;\n  iconSize: SelectSizes['iconSize'];\n  isLoading?: boolean;\n  renderItem: (item: T) => ReactNode;\n  spinnerSize: SelectSizes['spinnerSize'];\n  styles: Record<string, SystemStyleObject>;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuScrollProps &\n  BitkitSelectMenuEmptyStateProps;\n\nexport const SelectMenuShell = <T extends { value: string; group?: string }>({\n  NS,\n  children,\n  collection,\n  contentProps,\n  contentRef,\n  emptyHelperText,\n  emptyLabel = 'No matching options',\n  iconSize,\n  isLoading = false,\n  onScrolledToBottom,\n  onSearchChange,\n  renderItem,\n  searchValue,\n  spinnerSize,\n  styles,\n}: SelectMenuShellProps<T>) => {\n  const { css: contentCss, ...restContentProps } = contentProps ?? {};\n  const isEmpty = collection.size === 0;\n  const hasAction = isValidElement(children);\n\n  const wasAtBottom = useRef(false);\n  const handleItemListScroll = (event: UIEvent<HTMLDivElement>) => {\n    const list = event.currentTarget;\n    const atBottom = list.scrollTop >= list.scrollHeight - list.offsetHeight - 1;\n    // Only the transition into \"at the end\", so resting at the bottom doesn't keep asking.\n    if (atBottom && !wasAtBottom.current) onScrolledToBottom?.();\n    wasAtBottom.current = atBottom;\n  };\n\n  return (\n    <SelectMenuShellContextProvider value={{ iconSize, styles }}>\n      <NS.Content css={[styles.content, contentCss]} ref={contentRef} {...restContentProps}>\n        {/*\n          Without a search input, Zag's getInitialFocus (see @zag-js/dom-query) picks the first\n          tabbable descendant as the menu's initial focus target — which would be the action\n          slot, visually confusing. A hidden [data-autofocus] span wins over tabbables in\n          getInitialFocus's querySelector, so we focus an invisible element instead and Zag's\n          aria-activedescendant drives the highlight like a normal Select would.\n        */}\n        {!onSearchChange && hasAction && <span data-autofocus=\"\" tabIndex={-1} aria-hidden=\"true\" />}\n        {onSearchChange && (\n          <SelectMenuSearch\n            iconSize={iconSize}\n            styles={styles}\n            value={searchValue ?? ''}\n            onSearchChange={onSearchChange}\n          />\n        )}\n        <Box css={styles.itemList} onScroll={handleItemListScroll}>\n          {isLoading && (\n            <Box css={styles.item}>\n              <Spinner variant=\"purple\" size={spinnerSize} css={styles.itemLoading} />\n              <Text css={styles.itemLoadingLabel}>Loading...</Text>\n            </Box>\n          )}\n          {!isLoading && isEmpty && (\n            <Box css={styles.emptyState}>\n              <Text css={styles.itemLabel}>{emptyLabel}</Text>\n              {emptyHelperText && <Text css={styles.itemHelperText}>{emptyHelperText}</Text>}\n            </Box>\n          )}\n          {!isLoading &&\n            !isEmpty &&\n            collection.group().map(([type, group]) => (\n              <NS.ItemGroup key={type}>\n                {type && (\n                  <NS.ItemGroupLabel asChild>\n                    <BitkitGroupHeading label={type} paddingBlock=\"12\" paddingInline=\"16\" />\n                  </NS.ItemGroupLabel>\n                )}\n                {group.map(renderItem)}\n              </NS.ItemGroup>\n            ))}\n        </Box>\n        {children}\n      </NS.Content>\n    </SelectMenuShellContextProvider>\n  );\n};\n\ntype SelectMenuSearchProps = {\n  iconSize: '16' | '24';\n  onSearchChange: (searchText: string) => void;\n  styles: Record<string, SystemStyleObject>;\n  value: string;\n};\n\nconst SelectMenuSearch = ({ iconSize, onSearchChange, styles, value }: SelectMenuSearchProps) => (\n  <Box css={styles.searchInputGroup}>\n    <IconMagnifier size={iconSize} color=\"icon/tertiary\" />\n    <chakra.input\n      aria-label=\"Search\"\n      css={styles.searchInput}\n      placeholder=\"Search...\"\n      value={value}\n      onChange={(event: ChangeEvent<HTMLInputElement>) => onSearchChange(event.target.value)}\n      onKeyDown={(event) => {\n        // Zag's Select.Content keyDown listener fires ITEM.CLICK + preventDefault on Space\n        // regardless of which descendant is focused. That would eat the space before the\n        // input can type it. Enter is left alone so \"type-then-Enter-to-select\" still works.\n        if (event.key === ' ') event.stopPropagation();\n      }}\n    />\n    {value && (\n      <chakra.button\n        type=\"button\"\n        css={styles.searchClear}\n        aria-label=\"Clear search\"\n        onClick={() => onSearchChange('')}\n      >\n        <IconCross size={iconSize} />\n      </chakra.button>\n    )}\n  </Box>\n);\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,gBAAgB;CAC3B,IAAI;EAAE,YAAY;EAAM,UAAU;EAAM,aAAa;CAAK;CAC1D,IAAI;EAAE,YAAY;EAAM,UAAU;EAAM,aAAa;CAAK;AAC5D;AAyBA,IAAa,mBAAgE,EAC3E,IACA,UACA,YACA,cACA,YACA,iBACA,aAAa,uBACb,UACA,YAAY,OACZ,oBACA,gBACA,YACA,aACA,aACA,aAC6B;CAC7B,MAAM,EAAE,KAAK,YAAY,GAAG,qBAAqB,gBAAgB,CAAC;CAClE,MAAM,UAAU,WAAW,SAAS;CACpC,MAAM,YAAY,eAAe,QAAQ;CAEzC,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,wBAAwB,UAAmC;EAC/D,MAAM,OAAO,MAAM;EACnB,MAAM,WAAW,KAAK,aAAa,KAAK,eAAe,KAAK,eAAe;EAE3E,IAAI,YAAY,CAAC,YAAY,SAAS,qBAAqB;EAC3D,YAAY,UAAU;CACxB;CAEA,OACE,oBAAC,gCAAD;EAAgC,OAAO;GAAE;GAAU;EAAO;EACxD,UAAA,qBAAC,GAAG,SAAJ;GAAY,KAAK,CAAC,OAAO,SAAS,UAAU;GAAG,KAAK;GAAY,GAAI;GAApE,UAAA;IAQG,CAAC,kBAAkB,aAAa,oBAAC,QAAD;KAAM,kBAAe;KAAG,UAAU;KAAI,eAAY;IAAQ,CAAA;IAC1F,kBACC,oBAAC,kBAAD;KACY;KACF;KACR,OAAO,eAAe;KACN;IACjB,CAAA;IAEH,qBAAC,KAAD;KAAK,KAAK,OAAO;KAAU,UAAU;KAArC,UAAA;MACG,aACC,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACE,oBAAC,SAAD;QAAS,SAAQ;QAAS,MAAM;QAAa,KAAK,OAAO;OAAc,CAAA,GACvE,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAkB,UAAA;OAAgB,CAAA,CACjD;;MAEN,CAAC,aAAa,WACb,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACE,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAY,UAAA;OAAiB,CAAA,GAC9C,mBAAmB,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAiB,UAAA;OAAsB,CAAA,CAC1E;;MAEN,CAAC,aACA,CAAC,WACD,WAAW,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,WAC7B,qBAAC,GAAG,WAAJ,EAAA,UAAA,CACG,QACC,oBAAC,GAAG,gBAAJ;OAAmB,SAAA;OACjB,UAAA,oBAAC,oBAAD;QAAoB,OAAO;QAAM,cAAa;QAAK,eAAc;OAAM,CAAA;MACtD,CAAA,GAEpB,MAAM,IAAI,UAAU,CACT,EAAA,GAPK,IAOL,CACf;KACA;;IACJ;GACS;;CACkB,CAAA;AAEpC;AASA,IAAM,oBAAoB,EAAE,UAAU,gBAAgB,QAAQ,YAC5D,qBAAC,KAAD;CAAK,KAAK,OAAO;CAAjB,UAAA;EACE,oBAAC,eAAD;GAAe,MAAM;GAAU,OAAM;EAAiB,CAAA;EACtD,oBAAC,OAAO,OAAR;GACE,cAAW;GACX,KAAK,OAAO;GACZ,aAAY;GACL;GACP,WAAW,UAAyC,eAAe,MAAM,OAAO,KAAK;GACrF,YAAY,UAAU;IAIpB,IAAI,MAAM,QAAQ,KAAK,MAAM,gBAAgB;GAC/C;EACD,CAAA;EACA,SACC,oBAAC,OAAO,QAAR;GACE,MAAK;GACL,KAAK,OAAO;GACZ,cAAW;GACX,eAAe,eAAe,EAAE;GAEhC,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAW,CAAA;EACf,CAAA;CAEd"}

package/dist/components/BitkitSettingsCard/BitkitSettingsCard.js

@@ -10,24 +10,24 @@ var useSettingsCardStyles = () => {
 	return useSlotRecipe({ key: "settingsCard" })();
 };
 var BitkitSettingsCard = forwardRef((props, ref) => {
-	const { children, ...rest } = props;
+	const { children, css, ...rest } = props;
 	const styles = useSettingsCardStyles();
 	return /* @__PURE__ */ jsx(Card.Root, {
 		ref,
 		elevation: false,
 		paddingSize: "md",
-		css: styles.root,
+		css: [styles.root, css],
 		...rest,
 		children
 	});
 });
 BitkitSettingsCard.displayName = "BitkitSettingsCard";
 var Content = forwardRef((props, ref) => {
-	const { actions, children, ...rest } = props;
+	const { actions, children, css, ...rest } = props;
 	const styles = useSettingsCardStyles();
 	return /* @__PURE__ */ jsxs(Card.Body, {
 		ref,
-		css: styles.content,
+		css: [styles.content, css],
 		...rest,
 		children: [/* @__PURE__ */ jsx(Box, {
 			css: styles.contentBody,
@@ -69,11 +69,12 @@ var Status = forwardRef((props, ref) => {
 });
 Status.displayName = "BitkitSettingsCard.Status";
 var Footer = forwardRef((props, ref) => {
+	const { css, ...rest } = props;
 	const styles = useSettingsCardStyles();
 	return /* @__PURE__ */ jsx(Card.Footer, {
 		ref,
-		css: styles.footer,
-		...props
+		css: [styles.footer, css],
+		...rest
 	});
 });
 Footer.displayName = "BitkitSettingsCard.Footer";

package/dist/components/BitkitSettingsCard/BitkitSettingsCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitSettingsCard.js","names":[],"sources":["../../../lib/components/BitkitSettingsCard/BitkitSettingsCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Card, type CardBodyProps, type CardFooterProps, type CardRootProps } from '@chakra-ui/react/card';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\nconst useSettingsCardStyles = () => {\n  const recipe = useSlotRecipe({ key: 'settingsCard' });\n  return recipe();\n};\n\n// --- Root ---\n\nexport interface BitkitSettingsCardProps extends Omit<CardRootProps, 'children'> {\n  children: ReactNode;\n}\n\nconst BitkitSettingsCard = forwardRef<HTMLDivElement, BitkitSettingsCardProps>((props, ref) => {\n  const { children, ...rest } = props;\n  const styles = useSettingsCardStyles();\n\n  return (\n    <Card.Root ref={ref} elevation={false} paddingSize=\"md\" css={styles.root} {...rest}>\n      {children}\n    </Card.Root>\n  );\n});\n\nBitkitSettingsCard.displayName = 'BitkitSettingsCard';\n\n// --- Content ---\n\nexport interface BitkitSettingsCardContentProps extends Omit<CardBodyProps, 'children'> {\n  actions?: ReactNode;\n  children: ReactNode;\n}\n\nconst Content = forwardRef<HTMLDivElement, BitkitSettingsCardContentProps>((props, ref) => {\n  const { actions, children, ...rest } = props;\n  const styles = useSettingsCardStyles();\n\n  return (\n    <Card.Body ref={ref} css={styles.content} {...rest}>\n      <Box css={styles.contentBody}>{children}</Box>\n      {actions && <Box css={styles.contentActions}>{actions}</Box>}\n    </Card.Body>\n  );\n});\n\nContent.displayName = 'BitkitSettingsCard.Content';\n\n// --- Status ---\n\nexport interface BitkitSettingsCardStatusProps extends Omit<BoxProps, 'children' | 'colorPalette'> {\n  description?: string;\n  helperText?: ReactNode;\n  icon: BitkitIconComponent;\n  iconColor?: string;\n  statusText: string;\n}\n\nconst Status = forwardRef<HTMLDivElement, BitkitSettingsCardStatusProps>((props, ref) => {\n  const { description, helperText, icon: Icon, iconColor, statusText, ...rest } = props;\n  const styles = useSettingsCardStyles();\n\n  return (\n    <Box ref={ref} role=\"status\" {...rest}>\n      <Box css={styles.statusRow}>\n        <Icon color={iconColor} css={styles.statusIcon} size=\"16\" />\n        <Box>\n          <Text as=\"strong\" css={styles.statusText}>\n            {statusText}\n          </Text>\n          {description && (\n            <Text as=\"p\" css={styles.statusDescription}>\n              {description}\n            </Text>\n          )}\n        </Box>\n      </Box>\n      {helperText && <Text css={styles.statusHelperText}>{helperText}</Text>}\n    </Box>\n  );\n});\n\nStatus.displayName = 'BitkitSettingsCard.Status';\n\n// --- Footer ---\n\nconst Footer = forwardRef<HTMLDivElement, CardFooterProps>((props, ref) => {\n  const styles = useSettingsCardStyles();\n  return <Card.Footer ref={ref} css={styles.footer} {...props} />;\n});\n\nFooter.displayName = 'BitkitSettingsCard.Footer';\n\n// --- Compound export ---\n\nexport default withSubComponents(BitkitSettingsCard, {\n  Content,\n  Footer,\n  Status,\n});\n"],"mappings":";;;;;;;;AASA,IAAM,8BAA8B;CAElC,OADe,cAAc,EAAE,KAAK,eAAe,CAC5C,CAAA,CAAO;AAChB;AAQA,IAAM,qBAAqB,YAAqD,OAAO,QAAQ;CAC7F,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,MAAM,SAAS,sBAAsB;CAErC,OACE,oBAAC,KAAK,MAAN;EAAgB;EAAK,WAAW;EAAO,aAAY;EAAK,KAAK,OAAO;EAAM,GAAI;EAC3E;CACQ,CAAA;AAEf,CAAC;AAED,mBAAmB,cAAc;AASjC,IAAM,UAAU,YAA4D,OAAO,QAAQ;CACzF,MAAM,EAAE,SAAS,UAAU,GAAG,SAAS;CACvC,MAAM,SAAS,sBAAsB;CAErC,OACE,qBAAC,KAAK,MAAN;EAAgB;EAAK,KAAK,OAAO;EAAS,GAAI;EAA9C,UAAA,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAc;EAAc,CAAA,GAC5C,WAAW,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAiB,UAAA;EAAa,CAAA,CAClD;;AAEf,CAAC;AAED,QAAQ,cAAc;AAYtB,IAAM,SAAS,YAA2D,OAAO,QAAQ;CACvF,MAAM,EAAE,aAAa,YAAY,MAAM,MAAM,WAAW,YAAY,GAAG,SAAS;CAChF,MAAM,SAAS,sBAAsB;CAErC,OACE,qBAAC,KAAD;EAAU;EAAK,MAAK;EAAS,GAAI;EAAjC,UAAA,CACE,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAjB,UAAA,CACE,oBAAC,MAAD;IAAM,OAAO;IAAW,KAAK,OAAO;IAAY,MAAK;GAAM,CAAA,GAC3D,qBAAC,KAAD,EAAA,UAAA,CACE,oBAAC,MAAD;IAAM,IAAG;IAAS,KAAK,OAAO;IAC3B,UAAA;GACG,CAAA,GACL,eACC,oBAAC,MAAD;IAAM,IAAG;IAAI,KAAK,OAAO;IACtB,UAAA;GACG,CAAA,CAEL,EAAA,CAAA,CACF;EACJ,CAAA,GAAA,cAAc,oBAAC,MAAD;GAAM,KAAK,OAAO;GAAmB,UAAA;EAAiB,CAAA,CAClE;;AAET,CAAC;AAED,OAAO,cAAc;AAIrB,IAAM,SAAS,YAA6C,OAAO,QAAQ;CACzE,MAAM,SAAS,sBAAsB;CACrC,OAAO,oBAAC,KAAK,QAAN;EAAkB;EAAK,KAAK,OAAO;EAAQ,GAAI;CAAQ,CAAA;AAChE,CAAC;AAED,OAAO,cAAc;AAIrB,IAAA,6BAAe,kBAAkB,oBAAoB;CACnD;CACA;CACA;AACF,CAAC"}
+{"version":3,"file":"BitkitSettingsCard.js","names":[],"sources":["../../../lib/components/BitkitSettingsCard/BitkitSettingsCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Card, type CardBodyProps, type CardFooterProps, type CardRootProps } from '@chakra-ui/react/card';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\nconst useSettingsCardStyles = () => {\n  const recipe = useSlotRecipe({ key: 'settingsCard' });\n  return recipe();\n};\n\n// --- Root ---\n\nexport interface BitkitSettingsCardProps extends Omit<CardRootProps, 'children'> {\n  children: ReactNode;\n}\n\nconst BitkitSettingsCard = forwardRef<HTMLDivElement, BitkitSettingsCardProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n  const styles = useSettingsCardStyles();\n\n  return (\n    <Card.Root ref={ref} elevation={false} paddingSize=\"md\" css={[styles.root, css]} {...rest}>\n      {children}\n    </Card.Root>\n  );\n});\n\nBitkitSettingsCard.displayName = 'BitkitSettingsCard';\n\n// --- Content ---\n\nexport interface BitkitSettingsCardContentProps extends Omit<CardBodyProps, 'children'> {\n  actions?: ReactNode;\n  children: ReactNode;\n}\n\nconst Content = forwardRef<HTMLDivElement, BitkitSettingsCardContentProps>((props, ref) => {\n  const { actions, children, css, ...rest } = props;\n  const styles = useSettingsCardStyles();\n\n  return (\n    <Card.Body ref={ref} css={[styles.content, css]} {...rest}>\n      <Box css={styles.contentBody}>{children}</Box>\n      {actions && <Box css={styles.contentActions}>{actions}</Box>}\n    </Card.Body>\n  );\n});\n\nContent.displayName = 'BitkitSettingsCard.Content';\n\n// --- Status ---\n\nexport interface BitkitSettingsCardStatusProps extends Omit<BoxProps, 'children' | 'colorPalette'> {\n  description?: string;\n  helperText?: ReactNode;\n  icon: BitkitIconComponent;\n  iconColor?: string;\n  statusText: string;\n}\n\nconst Status = forwardRef<HTMLDivElement, BitkitSettingsCardStatusProps>((props, ref) => {\n  const { description, helperText, icon: Icon, iconColor, statusText, ...rest } = props;\n  const styles = useSettingsCardStyles();\n\n  return (\n    <Box ref={ref} role=\"status\" {...rest}>\n      <Box css={styles.statusRow}>\n        <Icon color={iconColor} css={styles.statusIcon} size=\"16\" />\n        <Box>\n          <Text as=\"strong\" css={styles.statusText}>\n            {statusText}\n          </Text>\n          {description && (\n            <Text as=\"p\" css={styles.statusDescription}>\n              {description}\n            </Text>\n          )}\n        </Box>\n      </Box>\n      {helperText && <Text css={styles.statusHelperText}>{helperText}</Text>}\n    </Box>\n  );\n});\n\nStatus.displayName = 'BitkitSettingsCard.Status';\n\n// --- Footer ---\n\nconst Footer = forwardRef<HTMLDivElement, CardFooterProps>((props, ref) => {\n  const { css, ...rest } = props;\n  const styles = useSettingsCardStyles();\n  return <Card.Footer ref={ref} css={[styles.footer, css]} {...rest} />;\n});\n\nFooter.displayName = 'BitkitSettingsCard.Footer';\n\n// --- Compound export ---\n\nexport default withSubComponents(BitkitSettingsCard, {\n  Content,\n  Footer,\n  Status,\n});\n"],"mappings":";;;;;;;;AASA,IAAM,8BAA8B;CAElC,OADe,cAAc,EAAE,KAAK,eAAe,CAC5C,CAAA,CAAO;AAChB;AAQA,IAAM,qBAAqB,YAAqD,OAAO,QAAQ;CAC7F,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CACnC,MAAM,SAAS,sBAAsB;CAErC,OACE,oBAAC,KAAK,MAAN;EAAgB;EAAK,WAAW;EAAO,aAAY;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,GAAI;EAClF;CACQ,CAAA;AAEf,CAAC;AAED,mBAAmB,cAAc;AASjC,IAAM,UAAU,YAA4D,OAAO,QAAQ;CACzF,MAAM,EAAE,SAAS,UAAU,KAAK,GAAG,SAAS;CAC5C,MAAM,SAAS,sBAAsB;CAErC,OACE,qBAAC,KAAK,MAAN;EAAgB;EAAK,KAAK,CAAC,OAAO,SAAS,GAAG;EAAG,GAAI;EAArD,UAAA,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAc;EAAc,CAAA,GAC5C,WAAW,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAiB,UAAA;EAAa,CAAA,CAClD;;AAEf,CAAC;AAED,QAAQ,cAAc;AAYtB,IAAM,SAAS,YAA2D,OAAO,QAAQ;CACvF,MAAM,EAAE,aAAa,YAAY,MAAM,MAAM,WAAW,YAAY,GAAG,SAAS;CAChF,MAAM,SAAS,sBAAsB;CAErC,OACE,qBAAC,KAAD;EAAU;EAAK,MAAK;EAAS,GAAI;EAAjC,UAAA,CACE,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAjB,UAAA,CACE,oBAAC,MAAD;IAAM,OAAO;IAAW,KAAK,OAAO;IAAY,MAAK;GAAM,CAAA,GAC3D,qBAAC,KAAD,EAAA,UAAA,CACE,oBAAC,MAAD;IAAM,IAAG;IAAS,KAAK,OAAO;IAC3B,UAAA;GACG,CAAA,GACL,eACC,oBAAC,MAAD;IAAM,IAAG;IAAI,KAAK,OAAO;IACtB,UAAA;GACG,CAAA,CAEL,EAAA,CAAA,CACF;EACJ,CAAA,GAAA,cAAc,oBAAC,MAAD;GAAM,KAAK,OAAO;GAAmB,UAAA;EAAiB,CAAA,CAClE;;AAET,CAAC;AAED,OAAO,cAAc;AAIrB,IAAM,SAAS,YAA6C,OAAO,QAAQ;CACzE,MAAM,EAAE,KAAK,GAAG,SAAS;CACzB,MAAM,SAAS,sBAAsB;CACrC,OAAO,oBAAC,KAAK,QAAN;EAAkB;EAAK,KAAK,CAAC,OAAO,QAAQ,GAAG;EAAG,GAAI;CAAO,CAAA;AACtE,CAAC;AAED,OAAO,cAAc;AAIrB,IAAA,6BAAe,kBAAkB,oBAAoB;CACnD;CACA;CACA;AACF,CAAC"}

package/dist/components/BitkitStepsCard/BitkitStepsCard.js

@@ -10,13 +10,13 @@ var useStepsCardStyles = () => {
 	return useSlotRecipe({ key: "stepsCard" })();
 };
 var BitkitStepsCard = forwardRef((props, ref) => {
-	const { children, step, ...rest } = props;
+	const { children, css, step, ...rest } = props;
 	const styles = useStepsCardStyles();
 	return /* @__PURE__ */ jsx(StepCardProvider, {
 		value: { step },
 		children: /* @__PURE__ */ jsx(Card.Root, {
 			ref,
-			css: styles.root,
+			css: [styles.root, css],
 			unstyled: true,
 			...rest,
 			children
@@ -25,22 +25,22 @@ var BitkitStepsCard = forwardRef((props, ref) => {
 });
 BitkitStepsCard.displayName = "BitkitStepsCard";
 var BitkitStepsCardHeader = forwardRef((props, ref) => {
-	const { children, ...rest } = props;
+	const { children, css, ...rest } = props;
 	const styles = useStepsCardStyles();
 	return /* @__PURE__ */ jsx(Card.Header, {
 		ref,
-		css: styles.header,
+		css: [styles.header, css],
 		...rest,
 		children
 	});
 });
 BitkitStepsCardHeader.displayName = "BitkitStepsCardHeader";
 var BitkitStepsCardBody = forwardRef((props, ref) => {
-	const { children, ...rest } = props;
+	const { children, css, ...rest } = props;
 	const styles = useStepsCardStyles();
 	return /* @__PURE__ */ jsx(Card.Body, {
 		ref,
-		css: styles.body,
+		css: [styles.body, css],
 		...rest,
 		children: Children.map(children, (child, index) => {
 			if (isValidElement(child)) return cloneElement(child, { _index: index });
@@ -70,11 +70,11 @@ var BitkitStepsCardStep = (props) => {
 };
 BitkitStepsCardStep.displayName = "BitkitStepsCardStep";
 var BitkitStepsCardFooter = forwardRef((props, ref) => {
-	const { children, ...rest } = props;
+	const { children, css, ...rest } = props;
 	const styles = useStepsCardStyles();
 	return /* @__PURE__ */ jsx(Card.Footer, {
 		ref,
-		css: styles.footer,
+		css: [styles.footer, css],
 		...rest,
 		children
 	});

package/dist/components/BitkitStepsCard/BitkitStepsCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitStepsCard.js","names":[],"sources":["../../../lib/components/BitkitStepsCard/BitkitStepsCard.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport {\n  Card,\n  type CardBodyProps,\n  type CardFooterProps,\n  type CardHeaderProps,\n  type CardRootProps,\n} from '@chakra-ui/react/card';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Children, cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { StepCardProvider, useStepCardContext } from './StepCardContext';\n\nconst useStepsCardStyles = () => {\n  const recipe = useSlotRecipe({ key: 'stepsCard' });\n  return recipe();\n};\n\nexport interface BitkitStepsCardProps extends Omit<CardRootProps, 'children' | 'title'> {\n  children: ReactNode;\n  step: number;\n}\n\nconst BitkitStepsCard = forwardRef<HTMLDivElement, BitkitStepsCardProps>((props, ref) => {\n  const { children, step, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <StepCardProvider value={{ step }}>\n      <Card.Root ref={ref} css={styles.root} unstyled {...rest}>\n        {children}\n      </Card.Root>\n    </StepCardProvider>\n  );\n});\n\nBitkitStepsCard.displayName = 'BitkitStepsCard';\n\nexport interface BitkitStepsCardHeaderProps extends Omit<CardHeaderProps, 'children'> {\n  children: ReactNode;\n}\n\nconst BitkitStepsCardHeader = forwardRef<HTMLDivElement, BitkitStepsCardHeaderProps>((props, ref) => {\n  const { children, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <Card.Header ref={ref} css={styles.header} {...rest}>\n      {children}\n    </Card.Header>\n  );\n});\n\nBitkitStepsCardHeader.displayName = 'BitkitStepsCardHeader';\n\nexport interface BitkitStepsCardBodyProps extends Omit<CardBodyProps, 'children'> {\n  children: ReactNode;\n}\n\nconst BitkitStepsCardBody = forwardRef<HTMLDivElement, BitkitStepsCardBodyProps>((props, ref) => {\n  const { children, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <Card.Body ref={ref} css={styles.body} {...rest}>\n      {Children.map(children, (child, index) => {\n        if (isValidElement(child)) {\n          return cloneElement(child as ReactElement<{ _index?: number }>, { _index: index });\n        }\n        return child;\n      })}\n    </Card.Body>\n  );\n});\n\nBitkitStepsCardBody.displayName = 'BitkitStepsCardBody';\n\nconst hasContent = (node: ReactNode) => node !== null && node !== undefined && node !== '';\n\nexport interface BitkitStepsCardStepProps {\n  children?: ReactNode;\n  description?: ReactNode;\n  title?: ReactNode;\n}\n\ninterface BitkitStepsCardStepInternalProps extends BitkitStepsCardStepProps {\n  _index?: number;\n}\n\nconst BitkitStepsCardStep = (props: BitkitStepsCardStepProps) => {\n  const { _index = 0, children, description, title } = props as BitkitStepsCardStepInternalProps;\n  const { step } = useStepCardContext() ?? { step: 0 };\n  const styles = useStepsCardStyles();\n\n  if (_index !== step) return null;\n\n  const showTitle = hasContent(title);\n  const showDescription = hasContent(description);\n\n  return (\n    <>\n      {(showTitle || showDescription) && (\n        <Box css={styles.titleGroup}>\n          {showTitle && <Card.Title css={styles.title}>{title}</Card.Title>}\n          {showDescription && <Card.Description css={styles.description}>{description}</Card.Description>}\n        </Box>\n      )}\n      {children}\n    </>\n  );\n};\n\nBitkitStepsCardStep.displayName = 'BitkitStepsCardStep';\n\nexport interface BitkitStepsCardFooterProps extends Omit<CardFooterProps, 'children'> {\n  children: ReactNode;\n}\n\nconst BitkitStepsCardFooter = forwardRef<HTMLDivElement, BitkitStepsCardFooterProps>((props, ref) => {\n  const { children, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <Card.Footer ref={ref} css={styles.footer} {...rest}>\n      {children}\n    </Card.Footer>\n  );\n});\n\nBitkitStepsCardFooter.displayName = 'BitkitStepsCardFooter';\n\nexport default withSubComponents(BitkitStepsCard, {\n  Body: BitkitStepsCardBody,\n  Footer: BitkitStepsCardFooter,\n  Header: BitkitStepsCardHeader,\n  Step: BitkitStepsCardStep,\n});\n"],"mappings":";;;;;;;;AAcA,IAAM,2BAA2B;CAE/B,OADe,cAAc,EAAE,KAAK,YAAY,CACzC,CAAA,CAAO;AAChB;AAOA,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EAAE,UAAU,MAAM,GAAG,SAAS;CACpC,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,kBAAD;EAAkB,OAAO,EAAE,KAAK;EAC9B,UAAA,oBAAC,KAAK,MAAN;GAAgB;GAAK,KAAK,OAAO;GAAM,UAAA;GAAS,GAAI;GACjD;EACQ,CAAA;CACK,CAAA;AAEtB,CAAC;AAED,gBAAgB,cAAc;AAM9B,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,KAAK,QAAN;EAAkB;EAAK,KAAK,OAAO;EAAQ,GAAI;EAC5C;CACU,CAAA;AAEjB,CAAC;AAED,sBAAsB,cAAc;AAMpC,IAAM,sBAAsB,YAAsD,OAAO,QAAQ;CAC/F,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,KAAK,MAAN;EAAgB;EAAK,KAAK,OAAO;EAAM,GAAI;EACxC,UAAA,SAAS,IAAI,WAAW,OAAO,UAAU;GACxC,IAAI,eAAe,KAAK,GACtB,OAAO,aAAa,OAA4C,EAAE,QAAQ,MAAM,CAAC;GAEnF,OAAO;EACT,CAAC;CACQ,CAAA;AAEf,CAAC;AAED,oBAAoB,cAAc;AAElC,IAAM,cAAc,SAAoB,SAAS,QAAQ,SAAS,KAAA,KAAa,SAAS;AAYxF,IAAM,uBAAuB,UAAoC;CAC/D,MAAM,EAAE,SAAS,GAAG,UAAU,aAAa,UAAU;CACrD,MAAM,EAAE,SAAS,mBAAmB,KAAK,EAAE,MAAM,EAAE;CACnD,MAAM,SAAS,mBAAmB;CAElC,IAAI,WAAW,MAAM,OAAO;CAE5B,MAAM,YAAY,WAAW,KAAK;CAClC,MAAM,kBAAkB,WAAW,WAAW;CAE9C,OACE,qBAAA,YAAA,EAAA,UAAA,EACI,aAAa,oBACb,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACG,aAAa,oBAAC,KAAK,OAAN;GAAY,KAAK,OAAO;GAAQ,UAAA;EAAkB,CAAA,GAC/D,mBAAmB,oBAAC,KAAK,aAAN;GAAkB,KAAK,OAAO;GAAc,UAAA;EAA8B,CAAA,CAC3F;CAEN,CAAA,GAAA,QACD,EAAA,CAAA;AAEN;AAEA,oBAAoB,cAAc;AAMlC,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,KAAK,QAAN;EAAkB;EAAK,KAAK,OAAO;EAAQ,GAAI;EAC5C;CACU,CAAA;AAEjB,CAAC;AAED,sBAAsB,cAAc;AAEpC,IAAA,0BAAe,kBAAkB,iBAAiB;CAChD,MAAM;CACN,QAAQ;CACR,QAAQ;CACR,MAAM;AACR,CAAC"}
+{"version":3,"file":"BitkitStepsCard.js","names":[],"sources":["../../../lib/components/BitkitStepsCard/BitkitStepsCard.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport {\n  Card,\n  type CardBodyProps,\n  type CardFooterProps,\n  type CardHeaderProps,\n  type CardRootProps,\n} from '@chakra-ui/react/card';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Children, cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { StepCardProvider, useStepCardContext } from './StepCardContext';\n\nconst useStepsCardStyles = () => {\n  const recipe = useSlotRecipe({ key: 'stepsCard' });\n  return recipe();\n};\n\nexport interface BitkitStepsCardProps extends Omit<CardRootProps, 'children' | 'title'> {\n  children: ReactNode;\n  step: number;\n}\n\nconst BitkitStepsCard = forwardRef<HTMLDivElement, BitkitStepsCardProps>((props, ref) => {\n  const { children, css, step, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <StepCardProvider value={{ step }}>\n      <Card.Root ref={ref} css={[styles.root, css]} unstyled {...rest}>\n        {children}\n      </Card.Root>\n    </StepCardProvider>\n  );\n});\n\nBitkitStepsCard.displayName = 'BitkitStepsCard';\n\nexport interface BitkitStepsCardHeaderProps extends Omit<CardHeaderProps, 'children'> {\n  children: ReactNode;\n}\n\nconst BitkitStepsCardHeader = forwardRef<HTMLDivElement, BitkitStepsCardHeaderProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <Card.Header ref={ref} css={[styles.header, css]} {...rest}>\n      {children}\n    </Card.Header>\n  );\n});\n\nBitkitStepsCardHeader.displayName = 'BitkitStepsCardHeader';\n\nexport interface BitkitStepsCardBodyProps extends Omit<CardBodyProps, 'children'> {\n  children: ReactNode;\n}\n\nconst BitkitStepsCardBody = forwardRef<HTMLDivElement, BitkitStepsCardBodyProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <Card.Body ref={ref} css={[styles.body, css]} {...rest}>\n      {Children.map(children, (child, index) => {\n        if (isValidElement(child)) {\n          return cloneElement(child as ReactElement<{ _index?: number }>, { _index: index });\n        }\n        return child;\n      })}\n    </Card.Body>\n  );\n});\n\nBitkitStepsCardBody.displayName = 'BitkitStepsCardBody';\n\nconst hasContent = (node: ReactNode) => node !== null && node !== undefined && node !== '';\n\nexport interface BitkitStepsCardStepProps {\n  children?: ReactNode;\n  description?: ReactNode;\n  title?: ReactNode;\n}\n\ninterface BitkitStepsCardStepInternalProps extends BitkitStepsCardStepProps {\n  _index?: number;\n}\n\nconst BitkitStepsCardStep = (props: BitkitStepsCardStepProps) => {\n  const { _index = 0, children, description, title } = props as BitkitStepsCardStepInternalProps;\n  const { step } = useStepCardContext() ?? { step: 0 };\n  const styles = useStepsCardStyles();\n\n  if (_index !== step) return null;\n\n  const showTitle = hasContent(title);\n  const showDescription = hasContent(description);\n\n  return (\n    <>\n      {(showTitle || showDescription) && (\n        <Box css={styles.titleGroup}>\n          {showTitle && <Card.Title css={styles.title}>{title}</Card.Title>}\n          {showDescription && <Card.Description css={styles.description}>{description}</Card.Description>}\n        </Box>\n      )}\n      {children}\n    </>\n  );\n};\n\nBitkitStepsCardStep.displayName = 'BitkitStepsCardStep';\n\nexport interface BitkitStepsCardFooterProps extends Omit<CardFooterProps, 'children'> {\n  children: ReactNode;\n}\n\nconst BitkitStepsCardFooter = forwardRef<HTMLDivElement, BitkitStepsCardFooterProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <Card.Footer ref={ref} css={[styles.footer, css]} {...rest}>\n      {children}\n    </Card.Footer>\n  );\n});\n\nBitkitStepsCardFooter.displayName = 'BitkitStepsCardFooter';\n\nexport default withSubComponents(BitkitStepsCard, {\n  Body: BitkitStepsCardBody,\n  Footer: BitkitStepsCardFooter,\n  Header: BitkitStepsCardHeader,\n  Step: BitkitStepsCardStep,\n});\n"],"mappings":";;;;;;;;AAcA,IAAM,2BAA2B;CAE/B,OADe,cAAc,EAAE,KAAK,YAAY,CACzC,CAAA,CAAO;AAChB;AAOA,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EAAE,UAAU,KAAK,MAAM,GAAG,SAAS;CACzC,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,kBAAD;EAAkB,OAAO,EAAE,KAAK;EAC9B,UAAA,oBAAC,KAAK,MAAN;GAAgB;GAAK,KAAK,CAAC,OAAO,MAAM,GAAG;GAAG,UAAA;GAAS,GAAI;GACxD;EACQ,CAAA;CACK,CAAA;AAEtB,CAAC;AAED,gBAAgB,cAAc;AAM9B,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CACnC,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,KAAK,QAAN;EAAkB;EAAK,KAAK,CAAC,OAAO,QAAQ,GAAG;EAAG,GAAI;EACnD;CACU,CAAA;AAEjB,CAAC;AAED,sBAAsB,cAAc;AAMpC,IAAM,sBAAsB,YAAsD,OAAO,QAAQ;CAC/F,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CACnC,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,KAAK,MAAN;EAAgB;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,GAAI;EAC/C,UAAA,SAAS,IAAI,WAAW,OAAO,UAAU;GACxC,IAAI,eAAe,KAAK,GACtB,OAAO,aAAa,OAA4C,EAAE,QAAQ,MAAM,CAAC;GAEnF,OAAO;EACT,CAAC;CACQ,CAAA;AAEf,CAAC;AAED,oBAAoB,cAAc;AAElC,IAAM,cAAc,SAAoB,SAAS,QAAQ,SAAS,KAAA,KAAa,SAAS;AAYxF,IAAM,uBAAuB,UAAoC;CAC/D,MAAM,EAAE,SAAS,GAAG,UAAU,aAAa,UAAU;CACrD,MAAM,EAAE,SAAS,mBAAmB,KAAK,EAAE,MAAM,EAAE;CACnD,MAAM,SAAS,mBAAmB;CAElC,IAAI,WAAW,MAAM,OAAO;CAE5B,MAAM,YAAY,WAAW,KAAK;CAClC,MAAM,kBAAkB,WAAW,WAAW;CAE9C,OACE,qBAAA,YAAA,EAAA,UAAA,EACI,aAAa,oBACb,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACG,aAAa,oBAAC,KAAK,OAAN;GAAY,KAAK,OAAO;GAAQ,UAAA;EAAkB,CAAA,GAC/D,mBAAmB,oBAAC,KAAK,aAAN;GAAkB,KAAK,OAAO;GAAc,UAAA;EAA8B,CAAA,CAC3F;CAEN,CAAA,GAAA,QACD,EAAA,CAAA;AAEN;AAEA,oBAAoB,cAAc;AAMlC,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CACnC,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,KAAK,QAAN;EAAkB;EAAK,KAAK,CAAC,OAAO,QAAQ,GAAG;EAAG,GAAI;EACnD;CACU,CAAA;AAEjB,CAAC;AAED,sBAAsB,cAAc;AAEpC,IAAA,0BAAe,kBAAkB,iBAAiB;CAChD,MAAM;CACN,QAAQ;CACR,QAAQ;CACR,MAAM;AACR,CAAC"}

package/dist/components/BitkitSwitch/BitkitSwitch.js

@@ -12,7 +12,7 @@ import { Skeleton } from "@chakra-ui/react/skeleton";
 import { Switch } from "@chakra-ui/react/switch";
 //#region lib/components/BitkitSwitch/BitkitSwitch.tsx
 var BitkitSwitchDefault = forwardRef((props, ref) => {
-	const { label, size = "lg", state = "default", ...rest } = props;
+	const { hideLabel, label, size = "lg", state = "default", ...rest } = props;
 	return /* @__PURE__ */ jsxs(Switch.Root, {
 		size,
 		readOnly: state === "readOnly",
@@ -32,7 +32,10 @@ var BitkitSwitchDefault = forwardRef((props, ref) => {
 					})] })
 				})
 			}),
-			label && /* @__PURE__ */ jsx(Switch.Label, { children: label })
+			label && /* @__PURE__ */ jsx(Switch.Label, {
+				srOnly: hideLabel,
+				children: label
+			})
 		]
 	});
 });
@@ -131,7 +134,7 @@ var BitkitSwitchFixed = forwardRef((props, ref) => {
 });
 BitkitSwitchFixed.displayName = "BitkitSwitchFixed";
 var BitkitSwitch = forwardRef((props, ref) => {
-	const { variant, icon, tooltip, optional, valueText, helperText, ...rest } = props;
+	const { variant, hideLabel, icon, tooltip, optional, valueText, helperText, ...rest } = props;
 	if (variant === "dynamic-text") return /* @__PURE__ */ jsx(BitkitSwitchDynamicText, {
 		ref,
 		tooltip,
@@ -150,6 +153,7 @@ var BitkitSwitch = forwardRef((props, ref) => {
 	});
 	return /* @__PURE__ */ jsx(BitkitSwitchDefault, {
 		ref,
+		hideLabel,
 		...rest
 	});
 });

package/dist/components/BitkitSwitch/BitkitSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitSwitch.js","names":[],"sources":["../../../lib/components/BitkitSwitch/BitkitSwitch.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Switch } from '@chakra-ui/react/switch';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { IconCheck, IconCross } from '../../icons';\nimport type {\n  BitkitSwitchAnyVariantProps,\n  BitkitSwitchDefaultProps,\n  BitkitSwitchDynamicTextProps,\n  BitkitSwitchFixedProps,\n  BitkitSwitchProps,\n} from './BitkitSwitch.types';\nimport BitkitSwitchHelperText from './components/BitkitSwitchHelperText';\nimport BitkitSwitchLabel from './components/BitkitSwitchLabel';\nimport BitkitSwitchReadOnly from './components/BitkitSwitchReadOnly';\nimport BitkitSwitchValueText from './components/BitkitSwitchValueText';\n\nconst BitkitSwitchDefault = forwardRef<HTMLInputElement, Omit<BitkitSwitchDefaultProps, 'variant'>>((props, ref) => {\n  const { label, size = 'lg', state = 'default', ...rest } = props;\n\n  return (\n    <Switch.Root\n      size={size}\n      readOnly={state === 'readOnly'}\n      disabled={state === 'disabled' || state === 'skeleton'}\n      {...rest}\n    >\n      <Switch.HiddenInput ref={ref} />\n      <BitkitSwitchReadOnly state={state}>\n        <Skeleton loading={state === 'skeleton'} borderRadius=\"12\" height={size === 'md' ? '16' : '24'}>\n          <Switch.Control>\n            <Switch.Thumb />\n            <Switch.Indicator fallback={<IconCross size={size === 'md' ? '16' : '24'} />}>\n              <IconCheck size={size === 'md' ? '16' : '24'} />\n            </Switch.Indicator>\n          </Switch.Control>\n        </Skeleton>\n      </BitkitSwitchReadOnly>\n      {label && <Switch.Label>{label}</Switch.Label>}\n    </Switch.Root>\n  );\n});\n\nBitkitSwitchDefault.displayName = 'BitkitSwitchDefault';\n\nconst BitkitSwitchDynamicText = forwardRef<HTMLInputElement, Omit<BitkitSwitchDynamicTextProps, 'variant'>>(\n  (props, ref) => {\n    const { label, optional, tooltip, helperText, valueText, size = 'lg', state = 'default', ...rest } = props;\n\n    const recipe = useSlotRecipe({ key: 'switch' });\n    const styles = recipe({ size });\n\n    return (\n      <Switch.Root\n        gap=\"4\"\n        size={size}\n        required={!optional}\n        flexDirection=\"column\"\n        alignItems=\"flex-start\"\n        readOnly={state === 'readOnly'}\n        disabled={state === 'disabled' || state === 'disabledInput' || state === 'skeleton'}\n        {...rest}\n      >\n        <Switch.HiddenInput ref={ref} />\n        <BitkitSwitchLabel label={label} state={state} tooltip={tooltip} optional={optional} />\n        <Box css={styles.root}>\n          <BitkitSwitchReadOnly state={state}>\n            <Skeleton loading={state === 'skeleton'} borderRadius=\"12\" height={size === 'md' ? '16' : '24'}>\n              <Switch.Control>\n                <Switch.Thumb />\n                <Switch.Indicator fallback={<IconCross size={size === 'md' ? '16' : '24'} />}>\n                  <IconCheck size={size === 'md' ? '16' : '24'} />\n                </Switch.Indicator>\n              </Switch.Control>\n            </Skeleton>\n          </BitkitSwitchReadOnly>\n          <BitkitSwitchValueText size={size} state={state} valueText={valueText} />\n        </Box>\n        <BitkitSwitchHelperText state={state} helperText={helperText} />\n      </Switch.Root>\n    );\n  },\n);\n\nBitkitSwitchDynamicText.displayName = 'BitkitSwitchDynamicText';\n\nconst BitkitSwitchFixed = forwardRef<HTMLInputElement, Omit<BitkitSwitchFixedProps, 'variant'>>((props, ref) => {\n  const { icon, label, optional, tooltip, helperText, size = 'lg', state = 'default', ...rest } = props;\n\n  return (\n    <Switch.Root\n      gap=\"24\"\n      size={size}\n      width=\"100%\"\n      display=\"flex\"\n      required={!optional}\n      readOnly={state === 'readOnly'}\n      disabled={state === 'disabled' || state === 'disabledInput' || state === 'skeleton'}\n      {...rest}\n    >\n      <Switch.HiddenInput ref={ref} />\n      <Box display=\"flex\" flex=\"1\" flexDirection=\"column\" gap=\"4\" minWidth=\"0\">\n        <BitkitSwitchLabel icon={icon} label={label} state={state} tooltip={tooltip} optional={optional} />\n        <BitkitSwitchHelperText state={state} helperText={helperText} />\n      </Box>\n      <BitkitSwitchReadOnly state={state}>\n        <Skeleton loading={state === 'skeleton'} borderRadius=\"12\" height={size === 'md' ? '16' : '24'}>\n          <Switch.Control>\n            <Switch.Thumb />\n            <Switch.Indicator fallback={<IconCross size={size === 'md' ? '16' : '24'} />}>\n              <IconCheck size={size === 'md' ? '16' : '24'} />\n            </Switch.Indicator>\n          </Switch.Control>\n        </Skeleton>\n      </BitkitSwitchReadOnly>\n    </Switch.Root>\n  );\n});\n\nBitkitSwitchFixed.displayName = 'BitkitSwitchFixed';\n\nconst BitkitSwitch = forwardRef<HTMLInputElement, BitkitSwitchProps>((props, ref) => {\n  // At runtime (e.g. a shared Storybook meta) sibling-variant props may still flow in, so split them\n  // off here and forward only what the chosen variant consumes — otherwise they leak to the DOM.\n  const { variant, icon, tooltip, optional, valueText, helperText, ...rest } = props as BitkitSwitchAnyVariantProps;\n\n  if (variant === 'dynamic-text') {\n    return (\n      <BitkitSwitchDynamicText\n        ref={ref}\n        tooltip={tooltip}\n        optional={optional}\n        valueText={valueText}\n        helperText={helperText}\n        {...rest}\n      />\n    );\n  }\n\n  if (variant === 'fixed') {\n    return (\n      <BitkitSwitchFixed\n        ref={ref}\n        icon={icon}\n        tooltip={tooltip}\n        optional={optional}\n        helperText={helperText as ReactNode}\n        {...rest}\n      />\n    );\n  }\n\n  return <BitkitSwitchDefault ref={ref} {...(rest as Omit<BitkitSwitchDefaultProps, 'variant'>)} />;\n});\n\nBitkitSwitch.displayName = 'BitkitSwitch';\n\nexport default BitkitSwitch;\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAM,sBAAsB,YAAyE,OAAO,QAAQ;CAClH,MAAM,EAAE,OAAO,OAAO,MAAM,QAAQ,WAAW,GAAG,SAAS;CAE3D,OACE,qBAAC,OAAO,MAAR;EACQ;EACN,UAAU,UAAU;EACpB,UAAU,UAAU,cAAc,UAAU;EAC5C,GAAI;EAJN,UAAA;GAME,oBAAC,OAAO,aAAR,EAAyB,IAAM,CAAA;GAC/B,oBAAC,sBAAD;IAA6B;IAC3B,UAAA,oBAAC,UAAD;KAAU,SAAS,UAAU;KAAY,cAAa;KAAK,QAAQ,SAAS,OAAO,OAAO;KACxF,UAAA,qBAAC,OAAO,SAAR,EAAA,UAAA,CACE,oBAAC,OAAO,OAAR,CAAe,CAAA,GACf,oBAAC,OAAO,WAAR;MAAkB,UAAU,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;MACzE,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;KAC/B,CAAA,CACJ,EAAA,CAAA;IACR,CAAA;GACU,CAAA;GACrB,SAAS,oBAAC,OAAO,OAAR,EAAA,UAAe,MAAoB,CAAA;EAClC;;AAEjB,CAAC;AAED,oBAAoB,cAAc;AAElC,IAAM,0BAA0B,YAC7B,OAAO,QAAQ;CACd,MAAM,EAAE,OAAO,UAAU,SAAS,YAAY,WAAW,OAAO,MAAM,QAAQ,WAAW,GAAG,SAAS;CAGrG,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,CAAA,CAAO,EAAE,KAAK,CAAC;CAE9B,OACE,qBAAC,OAAO,MAAR;EACE,KAAI;EACE;EACN,UAAU,CAAC;EACX,eAAc;EACd,YAAW;EACX,UAAU,UAAU;EACpB,UAAU,UAAU,cAAc,UAAU,mBAAmB,UAAU;EACzE,GAAI;EARN,UAAA;GAUE,oBAAC,OAAO,aAAR,EAAyB,IAAM,CAAA;GAC/B,oBAAC,mBAAD;IAA0B;IAAc;IAAgB;IAAmB;GAAW,CAAA;GACtF,qBAAC,KAAD;IAAK,KAAK,OAAO;IAAjB,UAAA,CACE,oBAAC,sBAAD;KAA6B;KAC3B,UAAA,oBAAC,UAAD;MAAU,SAAS,UAAU;MAAY,cAAa;MAAK,QAAQ,SAAS,OAAO,OAAO;MACxF,UAAA,qBAAC,OAAO,SAAR,EAAA,UAAA,CACE,oBAAC,OAAO,OAAR,CAAe,CAAA,GACf,oBAAC,OAAO,WAAR;OAAkB,UAAU,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;OACzE,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;MAC/B,CAAA,CACJ,EAAA,CAAA;KACR,CAAA;IACU,CAAA,GACtB,oBAAC,uBAAD;KAA6B;KAAa;KAAkB;IAAY,CAAA,CACrE;;GACL,oBAAC,wBAAD;IAA+B;IAAmB;GAAa,CAAA;EACpD;;AAEjB,CACF;AAEA,wBAAwB,cAAc;AAEtC,IAAM,oBAAoB,YAAuE,OAAO,QAAQ;CAC9G,MAAM,EAAE,MAAM,OAAO,UAAU,SAAS,YAAY,OAAO,MAAM,QAAQ,WAAW,GAAG,SAAS;CAEhG,OACE,qBAAC,OAAO,MAAR;EACE,KAAI;EACE;EACN,OAAM;EACN,SAAQ;EACR,UAAU,CAAC;EACX,UAAU,UAAU;EACpB,UAAU,UAAU,cAAc,UAAU,mBAAmB,UAAU;EACzE,GAAI;EARN,UAAA;GAUE,oBAAC,OAAO,aAAR,EAAyB,IAAM,CAAA;GAC/B,qBAAC,KAAD;IAAK,SAAQ;IAAO,MAAK;IAAI,eAAc;IAAS,KAAI;IAAI,UAAS;IAArE,UAAA,CACE,oBAAC,mBAAD;KAAyB;KAAa;KAAc;KAAgB;KAAmB;IAAW,CAAA,GAClG,oBAAC,wBAAD;KAA+B;KAAmB;IAAa,CAAA,CAC5D;;GACL,oBAAC,sBAAD;IAA6B;IAC3B,UAAA,oBAAC,UAAD;KAAU,SAAS,UAAU;KAAY,cAAa;KAAK,QAAQ,SAAS,OAAO,OAAO;KACxF,UAAA,qBAAC,OAAO,SAAR,EAAA,UAAA,CACE,oBAAC,OAAO,OAAR,CAAe,CAAA,GACf,oBAAC,OAAO,WAAR;MAAkB,UAAU,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;MACzE,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;KAC/B,CAAA,CACJ,EAAA,CAAA;IACR,CAAA;GACU,CAAA;EACX;;AAEjB,CAAC;AAED,kBAAkB,cAAc;AAEhC,IAAM,eAAe,YAAiD,OAAO,QAAQ;CAGnF,MAAM,EAAE,SAAS,MAAM,SAAS,UAAU,WAAW,YAAY,GAAG,SAAS;CAE7E,IAAI,YAAY,gBACd,OACE,oBAAC,yBAAD;EACO;EACI;EACC;EACC;EACC;EACZ,GAAI;CACL,CAAA;CAIL,IAAI,YAAY,SACd,OACE,oBAAC,mBAAD;EACO;EACC;EACG;EACC;EACE;EACZ,GAAI;CACL,CAAA;CAIL,OAAO,oBAAC,qBAAD;EAA0B;EAAK,GAAK;CAAqD,CAAA;AAClG,CAAC;AAED,aAAa,cAAc"}
+{"version":3,"file":"BitkitSwitch.js","names":[],"sources":["../../../lib/components/BitkitSwitch/BitkitSwitch.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Switch } from '@chakra-ui/react/switch';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { IconCheck, IconCross } from '../../icons';\nimport type {\n  BitkitSwitchAnyVariantProps,\n  BitkitSwitchDefaultProps,\n  BitkitSwitchDynamicTextProps,\n  BitkitSwitchFixedProps,\n  BitkitSwitchProps,\n} from './BitkitSwitch.types';\nimport BitkitSwitchHelperText from './components/BitkitSwitchHelperText';\nimport BitkitSwitchLabel from './components/BitkitSwitchLabel';\nimport BitkitSwitchReadOnly from './components/BitkitSwitchReadOnly';\nimport BitkitSwitchValueText from './components/BitkitSwitchValueText';\n\nconst BitkitSwitchDefault = forwardRef<HTMLInputElement, Omit<BitkitSwitchDefaultProps, 'variant'>>((props, ref) => {\n  const { hideLabel, label, size = 'lg', state = 'default', ...rest } = props;\n\n  return (\n    <Switch.Root\n      size={size}\n      readOnly={state === 'readOnly'}\n      disabled={state === 'disabled' || state === 'skeleton'}\n      {...rest}\n    >\n      <Switch.HiddenInput ref={ref} />\n      <BitkitSwitchReadOnly state={state}>\n        <Skeleton loading={state === 'skeleton'} borderRadius=\"12\" height={size === 'md' ? '16' : '24'}>\n          <Switch.Control>\n            <Switch.Thumb />\n            <Switch.Indicator fallback={<IconCross size={size === 'md' ? '16' : '24'} />}>\n              <IconCheck size={size === 'md' ? '16' : '24'} />\n            </Switch.Indicator>\n          </Switch.Control>\n        </Skeleton>\n      </BitkitSwitchReadOnly>\n      {/* `srOnly` rather than a hidden label passed in by the consumer: it positions the element\n          absolutely, so it leaves the flex flow and the root's gap no longer reserves space for it. */}\n      {label && <Switch.Label srOnly={hideLabel}>{label}</Switch.Label>}\n    </Switch.Root>\n  );\n});\n\nBitkitSwitchDefault.displayName = 'BitkitSwitchDefault';\n\nconst BitkitSwitchDynamicText = forwardRef<HTMLInputElement, Omit<BitkitSwitchDynamicTextProps, 'variant'>>(\n  (props, ref) => {\n    const { label, optional, tooltip, helperText, valueText, size = 'lg', state = 'default', ...rest } = props;\n\n    const recipe = useSlotRecipe({ key: 'switch' });\n    const styles = recipe({ size });\n\n    return (\n      <Switch.Root\n        gap=\"4\"\n        size={size}\n        required={!optional}\n        flexDirection=\"column\"\n        alignItems=\"flex-start\"\n        readOnly={state === 'readOnly'}\n        disabled={state === 'disabled' || state === 'disabledInput' || state === 'skeleton'}\n        {...rest}\n      >\n        <Switch.HiddenInput ref={ref} />\n        <BitkitSwitchLabel label={label} state={state} tooltip={tooltip} optional={optional} />\n        <Box css={styles.root}>\n          <BitkitSwitchReadOnly state={state}>\n            <Skeleton loading={state === 'skeleton'} borderRadius=\"12\" height={size === 'md' ? '16' : '24'}>\n              <Switch.Control>\n                <Switch.Thumb />\n                <Switch.Indicator fallback={<IconCross size={size === 'md' ? '16' : '24'} />}>\n                  <IconCheck size={size === 'md' ? '16' : '24'} />\n                </Switch.Indicator>\n              </Switch.Control>\n            </Skeleton>\n          </BitkitSwitchReadOnly>\n          <BitkitSwitchValueText size={size} state={state} valueText={valueText} />\n        </Box>\n        <BitkitSwitchHelperText state={state} helperText={helperText} />\n      </Switch.Root>\n    );\n  },\n);\n\nBitkitSwitchDynamicText.displayName = 'BitkitSwitchDynamicText';\n\nconst BitkitSwitchFixed = forwardRef<HTMLInputElement, Omit<BitkitSwitchFixedProps, 'variant'>>((props, ref) => {\n  const { icon, label, optional, tooltip, helperText, size = 'lg', state = 'default', ...rest } = props;\n\n  return (\n    <Switch.Root\n      gap=\"24\"\n      size={size}\n      width=\"100%\"\n      display=\"flex\"\n      required={!optional}\n      readOnly={state === 'readOnly'}\n      disabled={state === 'disabled' || state === 'disabledInput' || state === 'skeleton'}\n      {...rest}\n    >\n      <Switch.HiddenInput ref={ref} />\n      <Box display=\"flex\" flex=\"1\" flexDirection=\"column\" gap=\"4\" minWidth=\"0\">\n        <BitkitSwitchLabel icon={icon} label={label} state={state} tooltip={tooltip} optional={optional} />\n        <BitkitSwitchHelperText state={state} helperText={helperText} />\n      </Box>\n      <BitkitSwitchReadOnly state={state}>\n        <Skeleton loading={state === 'skeleton'} borderRadius=\"12\" height={size === 'md' ? '16' : '24'}>\n          <Switch.Control>\n            <Switch.Thumb />\n            <Switch.Indicator fallback={<IconCross size={size === 'md' ? '16' : '24'} />}>\n              <IconCheck size={size === 'md' ? '16' : '24'} />\n            </Switch.Indicator>\n          </Switch.Control>\n        </Skeleton>\n      </BitkitSwitchReadOnly>\n    </Switch.Root>\n  );\n});\n\nBitkitSwitchFixed.displayName = 'BitkitSwitchFixed';\n\nconst BitkitSwitch = forwardRef<HTMLInputElement, BitkitSwitchProps>((props, ref) => {\n  // At runtime (e.g. a shared Storybook meta) sibling-variant props may still flow in, so split them\n  // off here and forward only what the chosen variant consumes — otherwise they leak to the DOM.\n  const { variant, hideLabel, icon, tooltip, optional, valueText, helperText, ...rest } =\n    props as BitkitSwitchAnyVariantProps;\n\n  if (variant === 'dynamic-text') {\n    return (\n      <BitkitSwitchDynamicText\n        ref={ref}\n        tooltip={tooltip}\n        optional={optional}\n        valueText={valueText}\n        helperText={helperText}\n        {...rest}\n      />\n    );\n  }\n\n  if (variant === 'fixed') {\n    return (\n      <BitkitSwitchFixed\n        ref={ref}\n        icon={icon}\n        tooltip={tooltip}\n        optional={optional}\n        helperText={helperText as ReactNode}\n        {...rest}\n      />\n    );\n  }\n\n  return (\n    <BitkitSwitchDefault ref={ref} hideLabel={hideLabel} {...(rest as Omit<BitkitSwitchDefaultProps, 'variant'>)} />\n  );\n});\n\nBitkitSwitch.displayName = 'BitkitSwitch';\n\nexport default BitkitSwitch;\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAM,sBAAsB,YAAyE,OAAO,QAAQ;CAClH,MAAM,EAAE,WAAW,OAAO,OAAO,MAAM,QAAQ,WAAW,GAAG,SAAS;CAEtE,OACE,qBAAC,OAAO,MAAR;EACQ;EACN,UAAU,UAAU;EACpB,UAAU,UAAU,cAAc,UAAU;EAC5C,GAAI;EAJN,UAAA;GAME,oBAAC,OAAO,aAAR,EAAyB,IAAM,CAAA;GAC/B,oBAAC,sBAAD;IAA6B;IAC3B,UAAA,oBAAC,UAAD;KAAU,SAAS,UAAU;KAAY,cAAa;KAAK,QAAQ,SAAS,OAAO,OAAO;KACxF,UAAA,qBAAC,OAAO,SAAR,EAAA,UAAA,CACE,oBAAC,OAAO,OAAR,CAAe,CAAA,GACf,oBAAC,OAAO,WAAR;MAAkB,UAAU,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;MACzE,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;KAC/B,CAAA,CACJ,EAAA,CAAA;IACR,CAAA;GACU,CAAA;GAGrB,SAAS,oBAAC,OAAO,OAAR;IAAc,QAAQ;IAAY,UAAA;GAAoB,CAAA;EACrD;;AAEjB,CAAC;AAED,oBAAoB,cAAc;AAElC,IAAM,0BAA0B,YAC7B,OAAO,QAAQ;CACd,MAAM,EAAE,OAAO,UAAU,SAAS,YAAY,WAAW,OAAO,MAAM,QAAQ,WAAW,GAAG,SAAS;CAGrG,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,CAAA,CAAO,EAAE,KAAK,CAAC;CAE9B,OACE,qBAAC,OAAO,MAAR;EACE,KAAI;EACE;EACN,UAAU,CAAC;EACX,eAAc;EACd,YAAW;EACX,UAAU,UAAU;EACpB,UAAU,UAAU,cAAc,UAAU,mBAAmB,UAAU;EACzE,GAAI;EARN,UAAA;GAUE,oBAAC,OAAO,aAAR,EAAyB,IAAM,CAAA;GAC/B,oBAAC,mBAAD;IAA0B;IAAc;IAAgB;IAAmB;GAAW,CAAA;GACtF,qBAAC,KAAD;IAAK,KAAK,OAAO;IAAjB,UAAA,CACE,oBAAC,sBAAD;KAA6B;KAC3B,UAAA,oBAAC,UAAD;MAAU,SAAS,UAAU;MAAY,cAAa;MAAK,QAAQ,SAAS,OAAO,OAAO;MACxF,UAAA,qBAAC,OAAO,SAAR,EAAA,UAAA,CACE,oBAAC,OAAO,OAAR,CAAe,CAAA,GACf,oBAAC,OAAO,WAAR;OAAkB,UAAU,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;OACzE,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;MAC/B,CAAA,CACJ,EAAA,CAAA;KACR,CAAA;IACU,CAAA,GACtB,oBAAC,uBAAD;KAA6B;KAAa;KAAkB;IAAY,CAAA,CACrE;;GACL,oBAAC,wBAAD;IAA+B;IAAmB;GAAa,CAAA;EACpD;;AAEjB,CACF;AAEA,wBAAwB,cAAc;AAEtC,IAAM,oBAAoB,YAAuE,OAAO,QAAQ;CAC9G,MAAM,EAAE,MAAM,OAAO,UAAU,SAAS,YAAY,OAAO,MAAM,QAAQ,WAAW,GAAG,SAAS;CAEhG,OACE,qBAAC,OAAO,MAAR;EACE,KAAI;EACE;EACN,OAAM;EACN,SAAQ;EACR,UAAU,CAAC;EACX,UAAU,UAAU;EACpB,UAAU,UAAU,cAAc,UAAU,mBAAmB,UAAU;EACzE,GAAI;EARN,UAAA;GAUE,oBAAC,OAAO,aAAR,EAAyB,IAAM,CAAA;GAC/B,qBAAC,KAAD;IAAK,SAAQ;IAAO,MAAK;IAAI,eAAc;IAAS,KAAI;IAAI,UAAS;IAArE,UAAA,CACE,oBAAC,mBAAD;KAAyB;KAAa;KAAc;KAAgB;KAAmB;IAAW,CAAA,GAClG,oBAAC,wBAAD;KAA+B;KAAmB;IAAa,CAAA,CAC5D;;GACL,oBAAC,sBAAD;IAA6B;IAC3B,UAAA,oBAAC,UAAD;KAAU,SAAS,UAAU;KAAY,cAAa;KAAK,QAAQ,SAAS,OAAO,OAAO;KACxF,UAAA,qBAAC,OAAO,SAAR,EAAA,UAAA,CACE,oBAAC,OAAO,OAAR,CAAe,CAAA,GACf,oBAAC,OAAO,WAAR;MAAkB,UAAU,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;MACzE,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;KAC/B,CAAA,CACJ,EAAA,CAAA;IACR,CAAA;GACU,CAAA;EACX;;AAEjB,CAAC;AAED,kBAAkB,cAAc;AAEhC,IAAM,eAAe,YAAiD,OAAO,QAAQ;CAGnF,MAAM,EAAE,SAAS,WAAW,MAAM,SAAS,UAAU,WAAW,YAAY,GAAG,SAC7E;CAEF,IAAI,YAAY,gBACd,OACE,oBAAC,yBAAD;EACO;EACI;EACC;EACC;EACC;EACZ,GAAI;CACL,CAAA;CAIL,IAAI,YAAY,SACd,OACE,oBAAC,mBAAD;EACO;EACC;EACG;EACC;EACE;EACZ,GAAI;CACL,CAAA;CAIL,OACE,oBAAC,qBAAD;EAA0B;EAAgB;EAAW,GAAK;CAAqD,CAAA;AAEnH,CAAC;AAED,aAAa,cAAc"}

package/dist/components/BitkitSwitch/BitkitSwitch.types.d.ts

@@ -7,6 +7,15 @@ export type OnOff = {
 };
 export interface BitkitSwitchDefaultProps extends Omit<SwitchRootProps, 'disabled' | 'label' | 'readOnly' | 'required'> {
     variant?: 'default';
+    /**
+     * Keeps the label as the switch's accessible name but takes it off the screen. The hidden input
+     * gets its name from a label element the switch owns, so neither `aria-label` nor `ids` can
+     * supply one from outside — this is how a switch with no visible text stays named.
+     *
+     * No effect without `label`, and that combination leaves the switch unnamed — the very thing
+     * this prop is here to avoid.
+     */
+    hideLabel?: boolean;
     label?: ReactNode;
     state?: 'default' | 'disabled' | 'readOnly' | 'skeleton';
 }
@@ -33,6 +42,7 @@ export interface BitkitSwitchFixedProps extends Omit<SwitchRootProps, 'disabled'
 export type BitkitSwitchProps = BitkitSwitchDefaultProps | BitkitSwitchDynamicTextProps | BitkitSwitchFixedProps;
 export type BitkitSwitchAnyVariantProps = Omit<SwitchRootProps, 'disabled' | 'label' | 'readOnly' | 'required'> & {
     variant?: BitkitSwitchProps['variant'];
+    hideLabel?: boolean;
     icon?: BitkitIconComponent;
     tooltip?: string;
     optional?: boolean;

package/dist/components/BitkitTable/BitkitLinkedRow.js

@@ -28,11 +28,11 @@ import { Table, useTableStyles } from "@chakra-ui/react/table";
 * ```
 */
 var BitkitLinkedRow = forwardRef((props, ref) => {
-	const { children, ...rest } = props;
+	const { children, css, ...rest } = props;
 	const styles = useTableStyles();
 	return /* @__PURE__ */ jsx(Table.Row, {
 		ref,
-		css: styles.linkedRow,
+		css: [styles.linkedRow, css],
 		...rest,
 		children
 	});
@@ -43,11 +43,11 @@ BitkitLinkedRow.displayName = "BitkitTable.LinkedRow";
 * stretches its link across the row, leaving the styling to the link itself.
 */
 var LinkCell = forwardRef((props, ref) => {
-	const { children, ...rest } = props;
+	const { children, css, ...rest } = props;
 	const styles = useTableStyles();
 	return /* @__PURE__ */ jsx(Table.Cell, {
 		ref,
-		css: styles.linkCell,
+		css: [styles.linkCell, css],
 		"data-link-cell": true,
 		...rest,
 		children

package/dist/components/BitkitTable/BitkitLinkedRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitLinkedRow.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitLinkedRow.tsx"],"sourcesContent":["import { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { forwardRef, type ReactElement } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { type BitkitLinkProps } from '../BitkitLink/BitkitLink';\n\nexport type BitkitLinkedRowProps = Omit<Table.RowProps, 'onClick'>;\n\n/**\n * A table row that navigates as a whole. Exactly one of its cells must be a\n * `BitkitTable.LinkedRow.LinkCell` holding the row's link — that link's text becomes the row's\n * accessible name, and its stretched pseudo-element makes the entire row the click and focus target.\n *\n * Interactive elements in the other cells (buttons, checkboxes, other links) stay clickable: they\n * are lifted above the stretched link, so a `BitkitTable.RowActionsCell` works inside a linked row.\n *\n * Neither requirement is enforced: a row without a `LinkCell`, or one whose link has no `href`,\n * still renders with the linked-row styling — hover affordance included — and navigates nowhere.\n *\n * @example\n * ```tsx\n * <BitkitTable.LinkedRow>\n *   <BitkitTable.LinkedRow.LinkCell>\n *     <BitkitLink colorVariant=\"purple\" href={`/workflows/${row.id}`}>\n *       {row.name}\n *     </BitkitLink>\n *   </BitkitTable.LinkedRow.LinkCell>\n *   <BitkitTable.Cell>{row.status}</BitkitTable.Cell>\n *   <BitkitTable.RowActionsCell actions={actions} />\n * </BitkitTable.LinkedRow>\n * ```\n */\nconst BitkitLinkedRow = forwardRef<HTMLTableRowElement, BitkitLinkedRowProps>((props, ref) => {\n  const { children, ...rest } = props;\n  const styles = useTableStyles();\n\n  return (\n    <Table.Row ref={ref} css={styles.linkedRow} {...rest}>\n      {children}\n    </Table.Row>\n  );\n});\n\nBitkitLinkedRow.displayName = 'BitkitTable.LinkedRow';\n\nexport interface BitkitLinkedRowLinkCellProps extends Omit<Table.CellProps, 'children'> {\n  /**\n   * The row's link: a single `BitkitLink` with its own `href`, `isExternal`, `colorVariant` and any\n   * other link prop. The type only rules out bare text and multiple children — a non-link element,\n   * or a `BitkitLink` without an `href`, type-checks as well and leaves the row looking linked\n   * while navigating nowhere. Anything else the cell should show (an icon, a `VisuallyHidden` name)\n   * goes inside the link.\n   */\n  children: ReactElement<BitkitLinkProps>;\n}\n\n/**\n * The cell that carries the row's link, so give it the cell that names the row. The cell only\n * stretches its link across the row, leaving the styling to the link itself.\n */\nconst LinkCell = forwardRef<HTMLTableCellElement, BitkitLinkedRowLinkCellProps>((props, ref) => {\n  const { children, ...rest } = props;\n  const styles = useTableStyles();\n\n  return (\n    <Table.Cell ref={ref} css={styles.linkCell} data-link-cell {...rest}>\n      {children}\n    </Table.Cell>\n  );\n});\n\nLinkCell.displayName = 'BitkitTable.LinkedRow.LinkCell';\n\nexport default withSubComponents(BitkitLinkedRow, { LinkCell });\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAM,kBAAkB,YAAuD,OAAO,QAAQ;CAC5F,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,MAAM,SAAS,eAAe;CAE9B,OACE,oBAAC,MAAM,KAAP;EAAgB;EAAK,KAAK,OAAO;EAAW,GAAI;EAC7C;CACQ,CAAA;AAEf,CAAC;AAED,gBAAgB,cAAc;;;;;AAiB9B,IAAM,WAAW,YAAgE,OAAO,QAAQ;CAC9F,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,MAAM,SAAS,eAAe;CAE9B,OACE,oBAAC,MAAM,MAAP;EAAiB;EAAK,KAAK,OAAO;EAAU,kBAAA;EAAe,GAAI;EAC5D;CACS,CAAA;AAEhB,CAAC;AAED,SAAS,cAAc;AAEvB,IAAA,0BAAe,kBAAkB,iBAAiB,EAAE,SAAS,CAAC"}
+{"version":3,"file":"BitkitLinkedRow.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitLinkedRow.tsx"],"sourcesContent":["import { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { forwardRef, type ReactElement } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { type BitkitLinkProps } from '../BitkitLink/BitkitLink';\n\nexport type BitkitLinkedRowProps = Omit<Table.RowProps, 'onClick'>;\n\n/**\n * A table row that navigates as a whole. Exactly one of its cells must be a\n * `BitkitTable.LinkedRow.LinkCell` holding the row's link — that link's text becomes the row's\n * accessible name, and its stretched pseudo-element makes the entire row the click and focus target.\n *\n * Interactive elements in the other cells (buttons, checkboxes, other links) stay clickable: they\n * are lifted above the stretched link, so a `BitkitTable.RowActionsCell` works inside a linked row.\n *\n * Neither requirement is enforced: a row without a `LinkCell`, or one whose link has no `href`,\n * still renders with the linked-row styling — hover affordance included — and navigates nowhere.\n *\n * @example\n * ```tsx\n * <BitkitTable.LinkedRow>\n *   <BitkitTable.LinkedRow.LinkCell>\n *     <BitkitLink colorVariant=\"purple\" href={`/workflows/${row.id}`}>\n *       {row.name}\n *     </BitkitLink>\n *   </BitkitTable.LinkedRow.LinkCell>\n *   <BitkitTable.Cell>{row.status}</BitkitTable.Cell>\n *   <BitkitTable.RowActionsCell actions={actions} />\n * </BitkitTable.LinkedRow>\n * ```\n */\nconst BitkitLinkedRow = forwardRef<HTMLTableRowElement, BitkitLinkedRowProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n  const styles = useTableStyles();\n\n  return (\n    <Table.Row ref={ref} css={[styles.linkedRow, css]} {...rest}>\n      {children}\n    </Table.Row>\n  );\n});\n\nBitkitLinkedRow.displayName = 'BitkitTable.LinkedRow';\n\nexport interface BitkitLinkedRowLinkCellProps extends Omit<Table.CellProps, 'children'> {\n  /**\n   * The row's link: a single `BitkitLink` with its own `href`, `isExternal`, `colorVariant` and any\n   * other link prop. The type only rules out bare text and multiple children — a non-link element,\n   * or a `BitkitLink` without an `href`, type-checks as well and leaves the row looking linked\n   * while navigating nowhere. Anything else the cell should show (an icon, a `VisuallyHidden` name)\n   * goes inside the link.\n   */\n  children: ReactElement<BitkitLinkProps>;\n}\n\n/**\n * The cell that carries the row's link, so give it the cell that names the row. The cell only\n * stretches its link across the row, leaving the styling to the link itself.\n */\nconst LinkCell = forwardRef<HTMLTableCellElement, BitkitLinkedRowLinkCellProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n  const styles = useTableStyles();\n\n  return (\n    <Table.Cell ref={ref} css={[styles.linkCell, css]} data-link-cell {...rest}>\n      {children}\n    </Table.Cell>\n  );\n});\n\nLinkCell.displayName = 'BitkitTable.LinkedRow.LinkCell';\n\nexport default withSubComponents(BitkitLinkedRow, { LinkCell });\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAM,kBAAkB,YAAuD,OAAO,QAAQ;CAC5F,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CACnC,MAAM,SAAS,eAAe;CAE9B,OACE,oBAAC,MAAM,KAAP;EAAgB;EAAK,KAAK,CAAC,OAAO,WAAW,GAAG;EAAG,GAAI;EACpD;CACQ,CAAA;AAEf,CAAC;AAED,gBAAgB,cAAc;;;;;AAiB9B,IAAM,WAAW,YAAgE,OAAO,QAAQ;CAC9F,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CACnC,MAAM,SAAS,eAAe;CAE9B,OACE,oBAAC,MAAM,MAAP;EAAiB;EAAK,KAAK,CAAC,OAAO,UAAU,GAAG;EAAG,kBAAA;EAAe,GAAI;EACnE;CACS,CAAA;AAEhB,CAAC;AAED,SAAS,cAAc;AAEvB,IAAA,0BAAe,kBAAkB,iBAAiB,EAAE,SAAS,CAAC"}

package/dist/components/BitkitTable/BitkitRowActionsCell.js

@@ -63,12 +63,12 @@ var MenuAction = ({ action }) => {
 * ```
 */
 var BitkitRowActionsCell = forwardRef((props, ref) => {
-	const { actions, menuLabel = "More actions", ...rest } = props;
+	const { actions, css, menuLabel = "More actions", ...rest } = props;
 	const styles = useTableStyles();
 	const isPending = actions.some((action) => action.state === "skeleton");
 	return /* @__PURE__ */ jsx(Table.Cell, {
 		ref,
-		css: styles.actionsCell,
+		css: [styles.actionsCell, css],
 		...rest,
 		children: /* @__PURE__ */ jsx(Box, {
 			css: styles.actionsGroup,

package/dist/components/BitkitTable/BitkitRowActionsCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitRowActionsCell.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitRowActionsCell.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { forwardRef, type MouseEvent } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconMoreVertical from '../../icons/IconMoreVertical';\nimport BitkitActionMenu from '../BitkitActionMenu/BitkitActionMenu';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton';\n\n/** One row action, rendered either as an inline control button or as an action menu item. */\nexport interface BitkitRowAction {\n  /** Renders the action in the danger color set. */\n  danger?: boolean;\n  /** Makes the action a link instead of a button. */\n  href?: string;\n  icon: BitkitIconComponent;\n  /** Only with `href`: opens the link in a new tab and adds the external-link affordance. */\n  isExternal?: boolean;\n  /** Accessible name of the inline button, and the visible text of the menu item. Must be unique\n   * within `actions`, since it keys the list. */\n  label: string;\n  onClick?: (event: MouseEvent<HTMLElement>) => void;\n  /**\n   * `disabled` makes this one action inert. `skeleton` marks it as in flight: an inline action\n   * shimmers in place, and in the collapsed menu the trigger shimmers instead — the state belongs\n   * to the row, and the items sit behind a closed menu. Menu items are inert under either state.\n   */\n  state?: 'disabled' | 'skeleton';\n}\n\nexport interface BitkitRowActionsCellProps extends Omit<Table.CellProps, 'children' | 'onClick'> {\n  /** Up to two actions render as inline icon buttons; three or more collapse into an action menu. */\n  actions: BitkitRowAction[];\n  /** Accessible name of the action menu trigger, used from the third action on. Default: `More actions` */\n  menuLabel?: string;\n}\n\nconst MAX_INLINE_ACTIONS = 2;\n\nconst InlineAction = ({ action }: { action: BitkitRowAction }) => {\n  if (action.href !== undefined) {\n    return (\n      <BitkitControlButton\n        href={action.href}\n        icon={action.icon}\n        isDanger={action.danger}\n        isExternal={action.isExternal}\n        label={action.label}\n        onClick={action.onClick}\n        state={action.state}\n      />\n    );\n  }\n\n  return (\n    <BitkitControlButton\n      icon={action.icon}\n      isDanger={action.danger}\n      label={action.label}\n      onClick={action.onClick}\n      state={action.state}\n    />\n  );\n};\n\nconst MenuAction = ({ action }: { action: BitkitRowAction }) => {\n  if (action.href !== undefined) {\n    return (\n      <BitkitActionMenu.Item\n        disabled={action.state !== undefined}\n        href={action.href}\n        icon={action.icon}\n        isDanger={action.danger}\n        isExternal={action.isExternal}\n        onClick={action.onClick}\n        value={action.label}\n      >\n        {action.label}\n      </BitkitActionMenu.Item>\n    );\n  }\n\n  return (\n    <BitkitActionMenu.Item\n      disabled={action.state !== undefined}\n      icon={action.icon}\n      isDanger={action.danger}\n      onClick={action.onClick}\n      value={action.label}\n    >\n      {action.label}\n    </BitkitActionMenu.Item>\n  );\n};\n\n/**\n * The trailing cell of a table row, holding its actions. The column shrinks to fit the buttons.\n *\n * Up to two actions render as inline icon buttons; from the third on they collapse into a single\n * action menu, so the column width stays predictable. Clicks are kept inside the cell, so the\n * actions work in a `BitkitTable.LinkedRow` without triggering the row link.\n *\n * @example\n * ```tsx\n * <BitkitTable.RowActionsCell\n *   actions={[\n *     { icon: IconPencil, label: 'Edit', onClick: onEdit },\n *     { danger: true, icon: IconMinusCircle, label: 'Remove', onClick: onRemove },\n *   ]}\n * />\n * ```\n */\nconst BitkitRowActionsCell = forwardRef<HTMLTableCellElement, BitkitRowActionsCellProps>((props, ref) => {\n  const { actions, menuLabel = 'More actions', ...rest } = props;\n  const styles = useTableStyles();\n  const isPending = actions.some((action) => action.state === 'skeleton');\n\n  return (\n    <Table.Cell ref={ref} css={styles.actionsCell} {...rest}>\n      <Box css={styles.actionsGroup} onClick={(event) => event.stopPropagation()}>\n        {actions.length <= MAX_INLINE_ACTIONS ? (\n          actions.map((action) => <InlineAction key={action.label} action={action} />)\n        ) : (\n          <BitkitActionMenu\n            size=\"md\"\n            trigger={\n              <BitkitControlButton\n                icon={IconMoreVertical}\n                label={menuLabel}\n                state={isPending ? 'skeleton' : undefined}\n              />\n            }\n          >\n            {actions.map((action) => (\n              <MenuAction key={action.label} action={action} />\n            ))}\n          </BitkitActionMenu>\n        )}\n      </Box>\n    </Table.Cell>\n  );\n});\n\nBitkitRowActionsCell.displayName = 'BitkitTable.RowActionsCell';\n\nexport default BitkitRowActionsCell;\n"],"mappings":";;;;;;;;AAqCA,IAAM,qBAAqB;AAE3B,IAAM,gBAAgB,EAAE,aAA0C;CAChE,IAAI,OAAO,SAAS,KAAA,GAClB,OACE,oBAAC,qBAAD;EACE,MAAM,OAAO;EACb,MAAM,OAAO;EACb,UAAU,OAAO;EACjB,YAAY,OAAO;EACnB,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,OAAO,OAAO;CACf,CAAA;CAIL,OACE,oBAAC,qBAAD;EACE,MAAM,OAAO;EACb,UAAU,OAAO;EACjB,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,OAAO,OAAO;CACf,CAAA;AAEL;AAEA,IAAM,cAAc,EAAE,aAA0C;CAC9D,IAAI,OAAO,SAAS,KAAA,GAClB,OACE,oBAAC,yBAAiB,MAAlB;EACE,UAAU,OAAO,UAAU,KAAA;EAC3B,MAAM,OAAO;EACb,MAAM,OAAO;EACb,UAAU,OAAO;EACjB,YAAY,OAAO;EACnB,SAAS,OAAO;EAChB,OAAO,OAAO;EAEb,UAAA,OAAO;CACa,CAAA;CAI3B,OACE,oBAAC,yBAAiB,MAAlB;EACE,UAAU,OAAO,UAAU,KAAA;EAC3B,MAAM,OAAO;EACb,UAAU,OAAO;EACjB,SAAS,OAAO;EAChB,OAAO,OAAO;EAEb,UAAA,OAAO;CACa,CAAA;AAE3B;;;;;;;;;;;;;;;;;;AAmBA,IAAM,uBAAuB,YAA6D,OAAO,QAAQ;CACvG,MAAM,EAAE,SAAS,YAAY,gBAAgB,GAAG,SAAS;CACzD,MAAM,SAAS,eAAe;CAC9B,MAAM,YAAY,QAAQ,MAAM,WAAW,OAAO,UAAU,UAAU;CAEtE,OACE,oBAAC,MAAM,MAAP;EAAiB;EAAK,KAAK,OAAO;EAAa,GAAI;EACjD,UAAA,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAc,UAAU,UAAU,MAAM,gBAAgB;GACtE,UAAA,QAAQ,UAAU,qBACjB,QAAQ,KAAK,WAAW,oBAAC,cAAD,EAAyC,OAAS,GAA/B,OAAO,KAAwB,CAAC,IAE3E,oBAAC,0BAAD;IACE,MAAK;IACL,SACE,oBAAC,qBAAD;KACE,MAAM;KACN,OAAO;KACP,OAAO,YAAY,aAAa,KAAA;IACjC,CAAA;IAGF,UAAA,QAAQ,KAAK,WACZ,oBAAC,YAAD,EAAuC,OAAS,GAA/B,OAAO,KAAwB,CACjD;GACe,CAAA;EAEjB,CAAA;CACK,CAAA;AAEhB,CAAC;AAED,qBAAqB,cAAc"}
+{"version":3,"file":"BitkitRowActionsCell.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitRowActionsCell.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { forwardRef, type MouseEvent } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconMoreVertical from '../../icons/IconMoreVertical';\nimport BitkitActionMenu from '../BitkitActionMenu/BitkitActionMenu';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton';\n\n/** One row action, rendered either as an inline control button or as an action menu item. */\nexport interface BitkitRowAction {\n  /** Renders the action in the danger color set. */\n  danger?: boolean;\n  /** Makes the action a link instead of a button. */\n  href?: string;\n  icon: BitkitIconComponent;\n  /** Only with `href`: opens the link in a new tab and adds the external-link affordance. */\n  isExternal?: boolean;\n  /** Accessible name of the inline button, and the visible text of the menu item. Must be unique\n   * within `actions`, since it keys the list. */\n  label: string;\n  onClick?: (event: MouseEvent<HTMLElement>) => void;\n  /**\n   * `disabled` makes this one action inert. `skeleton` marks it as in flight: an inline action\n   * shimmers in place, and in the collapsed menu the trigger shimmers instead — the state belongs\n   * to the row, and the items sit behind a closed menu. Menu items are inert under either state.\n   */\n  state?: 'disabled' | 'skeleton';\n}\n\nexport interface BitkitRowActionsCellProps extends Omit<Table.CellProps, 'children' | 'onClick'> {\n  /** Up to two actions render as inline icon buttons; three or more collapse into an action menu. */\n  actions: BitkitRowAction[];\n  /** Accessible name of the action menu trigger, used from the third action on. Default: `More actions` */\n  menuLabel?: string;\n}\n\nconst MAX_INLINE_ACTIONS = 2;\n\nconst InlineAction = ({ action }: { action: BitkitRowAction }) => {\n  if (action.href !== undefined) {\n    return (\n      <BitkitControlButton\n        href={action.href}\n        icon={action.icon}\n        isDanger={action.danger}\n        isExternal={action.isExternal}\n        label={action.label}\n        onClick={action.onClick}\n        state={action.state}\n      />\n    );\n  }\n\n  return (\n    <BitkitControlButton\n      icon={action.icon}\n      isDanger={action.danger}\n      label={action.label}\n      onClick={action.onClick}\n      state={action.state}\n    />\n  );\n};\n\nconst MenuAction = ({ action }: { action: BitkitRowAction }) => {\n  if (action.href !== undefined) {\n    return (\n      <BitkitActionMenu.Item\n        disabled={action.state !== undefined}\n        href={action.href}\n        icon={action.icon}\n        isDanger={action.danger}\n        isExternal={action.isExternal}\n        onClick={action.onClick}\n        value={action.label}\n      >\n        {action.label}\n      </BitkitActionMenu.Item>\n    );\n  }\n\n  return (\n    <BitkitActionMenu.Item\n      disabled={action.state !== undefined}\n      icon={action.icon}\n      isDanger={action.danger}\n      onClick={action.onClick}\n      value={action.label}\n    >\n      {action.label}\n    </BitkitActionMenu.Item>\n  );\n};\n\n/**\n * The trailing cell of a table row, holding its actions. The column shrinks to fit the buttons.\n *\n * Up to two actions render as inline icon buttons; from the third on they collapse into a single\n * action menu, so the column width stays predictable. Clicks are kept inside the cell, so the\n * actions work in a `BitkitTable.LinkedRow` without triggering the row link.\n *\n * @example\n * ```tsx\n * <BitkitTable.RowActionsCell\n *   actions={[\n *     { icon: IconPencil, label: 'Edit', onClick: onEdit },\n *     { danger: true, icon: IconMinusCircle, label: 'Remove', onClick: onRemove },\n *   ]}\n * />\n * ```\n */\nconst BitkitRowActionsCell = forwardRef<HTMLTableCellElement, BitkitRowActionsCellProps>((props, ref) => {\n  const { actions, css, menuLabel = 'More actions', ...rest } = props;\n  const styles = useTableStyles();\n  const isPending = actions.some((action) => action.state === 'skeleton');\n\n  return (\n    <Table.Cell ref={ref} css={[styles.actionsCell, css]} {...rest}>\n      <Box css={styles.actionsGroup} onClick={(event) => event.stopPropagation()}>\n        {actions.length <= MAX_INLINE_ACTIONS ? (\n          actions.map((action) => <InlineAction key={action.label} action={action} />)\n        ) : (\n          <BitkitActionMenu\n            size=\"md\"\n            trigger={\n              <BitkitControlButton\n                icon={IconMoreVertical}\n                label={menuLabel}\n                state={isPending ? 'skeleton' : undefined}\n              />\n            }\n          >\n            {actions.map((action) => (\n              <MenuAction key={action.label} action={action} />\n            ))}\n          </BitkitActionMenu>\n        )}\n      </Box>\n    </Table.Cell>\n  );\n});\n\nBitkitRowActionsCell.displayName = 'BitkitTable.RowActionsCell';\n\nexport default BitkitRowActionsCell;\n"],"mappings":";;;;;;;;AAqCA,IAAM,qBAAqB;AAE3B,IAAM,gBAAgB,EAAE,aAA0C;CAChE,IAAI,OAAO,SAAS,KAAA,GAClB,OACE,oBAAC,qBAAD;EACE,MAAM,OAAO;EACb,MAAM,OAAO;EACb,UAAU,OAAO;EACjB,YAAY,OAAO;EACnB,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,OAAO,OAAO;CACf,CAAA;CAIL,OACE,oBAAC,qBAAD;EACE,MAAM,OAAO;EACb,UAAU,OAAO;EACjB,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,OAAO,OAAO;CACf,CAAA;AAEL;AAEA,IAAM,cAAc,EAAE,aAA0C;CAC9D,IAAI,OAAO,SAAS,KAAA,GAClB,OACE,oBAAC,yBAAiB,MAAlB;EACE,UAAU,OAAO,UAAU,KAAA;EAC3B,MAAM,OAAO;EACb,MAAM,OAAO;EACb,UAAU,OAAO;EACjB,YAAY,OAAO;EACnB,SAAS,OAAO;EAChB,OAAO,OAAO;EAEb,UAAA,OAAO;CACa,CAAA;CAI3B,OACE,oBAAC,yBAAiB,MAAlB;EACE,UAAU,OAAO,UAAU,KAAA;EAC3B,MAAM,OAAO;EACb,UAAU,OAAO;EACjB,SAAS,OAAO;EAChB,OAAO,OAAO;EAEb,UAAA,OAAO;CACa,CAAA;AAE3B;;;;;;;;;;;;;;;;;;AAmBA,IAAM,uBAAuB,YAA6D,OAAO,QAAQ;CACvG,MAAM,EAAE,SAAS,KAAK,YAAY,gBAAgB,GAAG,SAAS;CAC9D,MAAM,SAAS,eAAe;CAC9B,MAAM,YAAY,QAAQ,MAAM,WAAW,OAAO,UAAU,UAAU;CAEtE,OACE,oBAAC,MAAM,MAAP;EAAiB;EAAK,KAAK,CAAC,OAAO,aAAa,GAAG;EAAG,GAAI;EACxD,UAAA,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAc,UAAU,UAAU,MAAM,gBAAgB;GACtE,UAAA,QAAQ,UAAU,qBACjB,QAAQ,KAAK,WAAW,oBAAC,cAAD,EAAyC,OAAS,GAA/B,OAAO,KAAwB,CAAC,IAE3E,oBAAC,0BAAD;IACE,MAAK;IACL,SACE,oBAAC,qBAAD;KACE,MAAM;KACN,OAAO;KACP,OAAO,YAAY,aAAa,KAAA;IACjC,CAAA;IAGF,UAAA,QAAQ,KAAK,WACZ,oBAAC,YAAD,EAAuC,OAAS,GAA/B,OAAO,KAAwB,CACjD;GACe,CAAA;EAEjB,CAAA;CACK,CAAA;AAEhB,CAAC;AAED,qBAAqB,cAAc"}

package/dist/components/BitkitTable/BitkitSortableColumnHeader.js

@@ -35,14 +35,14 @@ var SortIcon = forwardRef((props, ref) => {
 	});
 });
 SortIcon.displayName = "SortIcon";
-var BitkitSortableColumnHeader = forwardRef(({ children, direction, onSort, textAlign, ...rest }, ref) => {
+var BitkitSortableColumnHeader = forwardRef(({ children, css, direction, onSort, textAlign, ...rest }, ref) => {
 	const styles = useTableStyles();
 	const isEndAligned = textAlign === "end";
 	const sortIcon = /* @__PURE__ */ jsx(SortIcon, { direction });
 	return /* @__PURE__ */ jsx(Table.ColumnHeader, {
 		ref,
 		"aria-sort": direction === "none" ? void 0 : direction,
-		css: styles.sortColumnHeader,
+		css: [styles.sortColumnHeader, css],
 		...rest,
 		children: /* @__PURE__ */ jsx(chakra.button, {
 			css: styles.sortTrigger,

package/dist/components/BitkitTable/BitkitSortableColumnHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitSortableColumnHeader.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitSortableColumnHeader.tsx"],"sourcesContent":["import { Icon, type IconProps } from '@chakra-ui/react/icon';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { forwardRef, type Ref } from 'react';\n\ntype SortDirection = 'ascending' | 'descending' | 'none';\n\nexport interface BitkitSortableColumnHeaderProps extends Omit<Table.ColumnHeaderProps, 'aria-sort' | 'onClick'> {\n  direction: SortDirection;\n  onSort: () => void;\n}\n\nconst SortIcon = forwardRef((props: IconProps & { direction: SortDirection }, ref: Ref<SVGSVGElement>) => {\n  const { direction, ...rest } = props;\n  const upFill = direction === 'ascending' ? 'currentColor' : 'var(--sort-icon-inactive)';\n  const downFill = direction === 'descending' ? 'currentColor' : 'var(--sort-icon-inactive)';\n\n  return (\n    <Icon\n      ref={ref}\n      asChild\n      css={{\n        '--sort-icon-inactive': 'colors.icon/disabled',\n        color: 'icon/primary',\n        display: 'inline-block',\n        verticalAlign: 'middle',\n      }}\n      {...rest}\n    >\n      <svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M11.617 4.461 7.684 9.18c-.271.326-.04.82.384.82h7.865c.424 0 .655-.494.384-.82l-3.933-4.719a.5.5 0 0 0-.767 0Z\"\n          fill={upFill}\n        />\n        <path\n          d=\"M12.384 19.539l3.933-4.719c.27-.326.04-.82-.384-.82H8.068c-.424 0-.655.494-.384.82l3.933 4.719a.5.5 0 0 0 .767 0Z\"\n          fill={downFill}\n        />\n      </svg>\n    </Icon>\n  );\n});\n\nSortIcon.displayName = 'SortIcon';\n\nconst BitkitSortableColumnHeader = forwardRef<HTMLTableCellElement, BitkitSortableColumnHeaderProps>(\n  ({ children, direction, onSort, textAlign, ...rest }, ref) => {\n    const styles = useTableStyles();\n    const isEndAligned = textAlign === 'end';\n    const sortIcon = <SortIcon direction={direction} />;\n\n    return (\n      <Table.ColumnHeader\n        ref={ref}\n        aria-sort={direction === 'none' ? undefined : direction}\n        css={styles.sortColumnHeader}\n        {...rest}\n      >\n        {/* chakra.button: no named primitive attaches a recipe slot to a bare trigger button */}\n        <chakra.button\n          css={styles.sortTrigger}\n          justifyContent={isEndAligned ? 'flex-end' : undefined}\n          onClick={onSort}\n          type=\"button\"\n        >\n          {isEndAligned ? (\n            <>\n              {sortIcon} {children}\n            </>\n          ) : (\n            <>\n              {children} {sortIcon}\n            </>\n          )}\n        </chakra.button>\n      </Table.ColumnHeader>\n    );\n  },\n);\n\nBitkitSortableColumnHeader.displayName = 'BitkitTable.SortableColumnHeader';\n\nexport default BitkitSortableColumnHeader;\n"],"mappings":";;;;;;AAYA,IAAM,WAAW,YAAY,OAAiD,QAA4B;CACxG,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,cAAc,cAAc,iBAAiB;CAC5D,MAAM,WAAW,cAAc,eAAe,iBAAiB;CAE/D,OACE,oBAAC,MAAD;EACO;EACL,SAAA;EACA,KAAK;GACH,wBAAwB;GACxB,OAAO;GACP,SAAS;GACT,eAAe;EACjB;EACA,GAAI;EAEJ,UAAA,qBAAC,OAAD;GAAK,MAAK;GAAO,QAAO;GAAK,SAAQ;GAAY,OAAM;GAAK,OAAM;GAAlE,UAAA,CACE,oBAAC,QAAD;IACE,GAAE;IACF,MAAM;GACP,CAAA,GACD,oBAAC,QAAD;IACE,GAAE;IACF,MAAM;GACP,CAAA,CACE;;CACD,CAAA;AAEV,CAAC;AAED,SAAS,cAAc;AAEvB,IAAM,6BAA6B,YAChC,EAAE,UAAU,WAAW,QAAQ,WAAW,GAAG,QAAQ,QAAQ;CAC5D,MAAM,SAAS,eAAe;CAC9B,MAAM,eAAe,cAAc;CACnC,MAAM,WAAW,oBAAC,UAAD,EAAqB,UAAY,CAAA;CAElD,OACE,oBAAC,MAAM,cAAP;EACO;EACL,aAAW,cAAc,SAAS,KAAA,IAAY;EAC9C,KAAK,OAAO;EACZ,GAAI;EAGJ,UAAA,oBAAC,OAAO,QAAR;GACE,KAAK,OAAO;GACZ,gBAAgB,eAAe,aAAa,KAAA;GAC5C,SAAS;GACT,MAAK;GAEJ,UAAA,eACC,qBAAA,YAAA,EAAA,UAAA;IACG;IAAS;IAAE;GACZ,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA;IACG;IAAS;IAAE;GACZ,EAAA,CAAA;EAES,CAAA;CACG,CAAA;AAExB,CACF;AAEA,2BAA2B,cAAc"}
+{"version":3,"file":"BitkitSortableColumnHeader.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitSortableColumnHeader.tsx"],"sourcesContent":["import { Icon, type IconProps } from '@chakra-ui/react/icon';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { forwardRef, type Ref } from 'react';\n\ntype SortDirection = 'ascending' | 'descending' | 'none';\n\nexport interface BitkitSortableColumnHeaderProps extends Omit<Table.ColumnHeaderProps, 'aria-sort' | 'onClick'> {\n  direction: SortDirection;\n  onSort: () => void;\n}\n\nconst SortIcon = forwardRef((props: IconProps & { direction: SortDirection }, ref: Ref<SVGSVGElement>) => {\n  const { direction, ...rest } = props;\n  const upFill = direction === 'ascending' ? 'currentColor' : 'var(--sort-icon-inactive)';\n  const downFill = direction === 'descending' ? 'currentColor' : 'var(--sort-icon-inactive)';\n\n  return (\n    <Icon\n      ref={ref}\n      asChild\n      css={{\n        '--sort-icon-inactive': 'colors.icon/disabled',\n        color: 'icon/primary',\n        display: 'inline-block',\n        verticalAlign: 'middle',\n      }}\n      {...rest}\n    >\n      <svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M11.617 4.461 7.684 9.18c-.271.326-.04.82.384.82h7.865c.424 0 .655-.494.384-.82l-3.933-4.719a.5.5 0 0 0-.767 0Z\"\n          fill={upFill}\n        />\n        <path\n          d=\"M12.384 19.539l3.933-4.719c.27-.326.04-.82-.384-.82H8.068c-.424 0-.655.494-.384.82l3.933 4.719a.5.5 0 0 0 .767 0Z\"\n          fill={downFill}\n        />\n      </svg>\n    </Icon>\n  );\n});\n\nSortIcon.displayName = 'SortIcon';\n\nconst BitkitSortableColumnHeader = forwardRef<HTMLTableCellElement, BitkitSortableColumnHeaderProps>(\n  ({ children, css, direction, onSort, textAlign, ...rest }, ref) => {\n    const styles = useTableStyles();\n    const isEndAligned = textAlign === 'end';\n    const sortIcon = <SortIcon direction={direction} />;\n\n    return (\n      <Table.ColumnHeader\n        ref={ref}\n        aria-sort={direction === 'none' ? undefined : direction}\n        css={[styles.sortColumnHeader, css]}\n        {...rest}\n      >\n        {/* chakra.button: no named primitive attaches a recipe slot to a bare trigger button */}\n        <chakra.button\n          css={styles.sortTrigger}\n          justifyContent={isEndAligned ? 'flex-end' : undefined}\n          onClick={onSort}\n          type=\"button\"\n        >\n          {isEndAligned ? (\n            <>\n              {sortIcon} {children}\n            </>\n          ) : (\n            <>\n              {children} {sortIcon}\n            </>\n          )}\n        </chakra.button>\n      </Table.ColumnHeader>\n    );\n  },\n);\n\nBitkitSortableColumnHeader.displayName = 'BitkitTable.SortableColumnHeader';\n\nexport default BitkitSortableColumnHeader;\n"],"mappings":";;;;;;AAYA,IAAM,WAAW,YAAY,OAAiD,QAA4B;CACxG,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,cAAc,cAAc,iBAAiB;CAC5D,MAAM,WAAW,cAAc,eAAe,iBAAiB;CAE/D,OACE,oBAAC,MAAD;EACO;EACL,SAAA;EACA,KAAK;GACH,wBAAwB;GACxB,OAAO;GACP,SAAS;GACT,eAAe;EACjB;EACA,GAAI;EAEJ,UAAA,qBAAC,OAAD;GAAK,MAAK;GAAO,QAAO;GAAK,SAAQ;GAAY,OAAM;GAAK,OAAM;GAAlE,UAAA,CACE,oBAAC,QAAD;IACE,GAAE;IACF,MAAM;GACP,CAAA,GACD,oBAAC,QAAD;IACE,GAAE;IACF,MAAM;GACP,CAAA,CACE;;CACD,CAAA;AAEV,CAAC;AAED,SAAS,cAAc;AAEvB,IAAM,6BAA6B,YAChC,EAAE,UAAU,KAAK,WAAW,QAAQ,WAAW,GAAG,QAAQ,QAAQ;CACjE,MAAM,SAAS,eAAe;CAC9B,MAAM,eAAe,cAAc;CACnC,MAAM,WAAW,oBAAC,UAAD,EAAqB,UAAY,CAAA;CAElD,OACE,oBAAC,MAAM,cAAP;EACO;EACL,aAAW,cAAc,SAAS,KAAA,IAAY;EAC9C,KAAK,CAAC,OAAO,kBAAkB,GAAG;EAClC,GAAI;EAGJ,UAAA,oBAAC,OAAO,QAAR;GACE,KAAK,OAAO;GACZ,gBAAgB,eAAe,aAAa,KAAA;GAC5C,SAAS;GACT,MAAK;GAEJ,UAAA,eACC,qBAAA,YAAA,EAAA,UAAA;IACG;IAAS;IAAE;GACZ,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA;IACG;IAAS;IAAE;GACZ,EAAA,CAAA;EAES,CAAA;CACG,CAAA;AAExB,CACF;AAEA,2BAA2B,cAAc"}

package/dist/components/BitkitTableCard/BitkitTableCard.js

@@ -5,11 +5,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Card } from "@chakra-ui/react/card";
 //#region lib/components/BitkitTableCard/BitkitTableCard.tsx
 var BitkitTableCard = forwardRef((props, ref) => {
-	const { action, children, secondaryText, titleText, ...rest } = props;
+	const { action, children, css, secondaryText, titleText, ...rest } = props;
 	const styles = useSlotRecipe({ key: "tableCard" })();
 	return /* @__PURE__ */ jsxs(Card.Root, {
 		ref,
-		css: styles.root,
+		css: [styles.root, css],
 		elevation: false,
 		...rest,
 		children: [/* @__PURE__ */ jsx(Card.Header, {

package/dist/components/BitkitTableCard/BitkitTableCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitTableCard.js","names":[],"sources":["../../../lib/components/BitkitTableCard/BitkitTableCard.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Card, type CardRootProps } from '@chakra-ui/react/card';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode } from 'react';\n\nexport interface BitkitTableCardProps extends Omit<CardRootProps, 'children'> {\n  /** Trailing action in the header, e.g. a `BitkitButton`. Omit it and the header is title-only. */\n  action?: ReactNode;\n  /** The table filling the card. Use `<BitkitTable.Root variant=\"card\">` so it matches the card's frame. */\n  children: ReactNode;\n  /** Quieter second line under the title. */\n  secondaryText?: ReactNode;\n  /** The card's heading. Named like `BitkitAlert`'s so the native `title` attribute stays free. */\n  titleText: ReactNode;\n}\n\nconst BitkitTableCard = forwardRef<HTMLDivElement, BitkitTableCardProps>((props, ref) => {\n  const { action, children, secondaryText, titleText, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'tableCard' });\n  const styles = recipe();\n\n  return (\n    <Card.Root ref={ref} css={styles.root} elevation={false} {...rest}>\n      <Card.Header css={styles.header}>\n        <Box css={styles.contentBlock}>\n          <Box css={styles.titleBlock}>\n            <Card.Title css={styles.title}>{titleText}</Card.Title>\n            {secondaryText && <Card.Description css={styles.description}>{secondaryText}</Card.Description>}\n          </Box>\n          {action}\n        </Box>\n      </Card.Header>\n      <Card.Body css={styles.body}>{children}</Card.Body>\n    </Card.Root>\n  );\n});\n\nBitkitTableCard.displayName = 'BitkitTableCard';\n\nexport default BitkitTableCard;\n"],"mappings":";;;;;;AAgBA,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EAAE,QAAQ,UAAU,eAAe,WAAW,GAAG,SAAS;CAGhE,MAAM,SADS,cAAc,EAAE,KAAK,YAAY,CACjC,CAAA,CAAO;CAEtB,OACE,qBAAC,KAAK,MAAN;EAAgB;EAAK,KAAK,OAAO;EAAM,WAAW;EAAO,GAAI;EAA7D,UAAA,CACE,oBAAC,KAAK,QAAN;GAAa,KAAK,OAAO;GACvB,UAAA,qBAAC,KAAD;IAAK,KAAK,OAAO;IAAjB,UAAA,CACE,qBAAC,KAAD;KAAK,KAAK,OAAO;KAAjB,UAAA,CACE,oBAAC,KAAK,OAAN;MAAY,KAAK,OAAO;MAAQ,UAAA;KAAsB,CAAA,GACrD,iBAAiB,oBAAC,KAAK,aAAN;MAAkB,KAAK,OAAO;MAAc,UAAA;KAAgC,CAAA,CAC3F;IACJ,CAAA,GAAA,MACE;;EACM,CAAA,GACb,oBAAC,KAAK,MAAN;GAAW,KAAK,OAAO;GAAO;EAAoB,CAAA,CACzC;;AAEf,CAAC;AAED,gBAAgB,cAAc"}
+{"version":3,"file":"BitkitTableCard.js","names":[],"sources":["../../../lib/components/BitkitTableCard/BitkitTableCard.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Card, type CardRootProps } from '@chakra-ui/react/card';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode } from 'react';\n\nexport interface BitkitTableCardProps extends Omit<CardRootProps, 'children'> {\n  /** Trailing action in the header, e.g. a `BitkitButton`. Omit it and the header is title-only. */\n  action?: ReactNode;\n  /** The table filling the card. Use `<BitkitTable.Root variant=\"card\">` so it matches the card's frame. */\n  children: ReactNode;\n  /** Quieter second line under the title. */\n  secondaryText?: ReactNode;\n  /** The card's heading. Named like `BitkitAlert`'s so the native `title` attribute stays free. */\n  titleText: ReactNode;\n}\n\nconst BitkitTableCard = forwardRef<HTMLDivElement, BitkitTableCardProps>((props, ref) => {\n  const { action, children, css, secondaryText, titleText, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'tableCard' });\n  const styles = recipe();\n\n  return (\n    <Card.Root ref={ref} css={[styles.root, css]} elevation={false} {...rest}>\n      <Card.Header css={styles.header}>\n        <Box css={styles.contentBlock}>\n          <Box css={styles.titleBlock}>\n            <Card.Title css={styles.title}>{titleText}</Card.Title>\n            {secondaryText && <Card.Description css={styles.description}>{secondaryText}</Card.Description>}\n          </Box>\n          {action}\n        </Box>\n      </Card.Header>\n      <Card.Body css={styles.body}>{children}</Card.Body>\n    </Card.Root>\n  );\n});\n\nBitkitTableCard.displayName = 'BitkitTableCard';\n\nexport default BitkitTableCard;\n"],"mappings":";;;;;;AAgBA,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EAAE,QAAQ,UAAU,KAAK,eAAe,WAAW,GAAG,SAAS;CAGrE,MAAM,SADS,cAAc,EAAE,KAAK,YAAY,CACjC,CAAA,CAAO;CAEtB,OACE,qBAAC,KAAK,MAAN;EAAgB;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,WAAW;EAAO,GAAI;EAApE,UAAA,CACE,oBAAC,KAAK,QAAN;GAAa,KAAK,OAAO;GACvB,UAAA,qBAAC,KAAD;IAAK,KAAK,OAAO;IAAjB,UAAA,CACE,qBAAC,KAAD;KAAK,KAAK,OAAO;KAAjB,UAAA,CACE,oBAAC,KAAK,OAAN;MAAY,KAAK,OAAO;MAAQ,UAAA;KAAsB,CAAA,GACrD,iBAAiB,oBAAC,KAAK,aAAN;MAAkB,KAAK,OAAO;MAAc,UAAA;KAAgC,CAAA,CAC3F;IACJ,CAAA,GAAA,MACE;;EACM,CAAA,GACb,oBAAC,KAAK,MAAN;GAAW,KAAK,OAAO;GAAO;EAAoB,CAAA,CACzC;;AAEf,CAAC;AAED,gBAAgB,cAAc"}