@bitrise/bitkit-v2 0.3.431 → 0.3.433

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -25,6 +25,7 @@ export type BitkitExpandableCardProps = Omit<BoxProps, 'asChild' | 'children' |
25
25
  footer?: ReactNode;
26
26
  icon?: BitkitIconComponent | ReactElement<BitkitAvatarProps>;
27
27
  iconColor?: string;
28
+ noPadding?: boolean;
28
29
  size?: 'md' | 'lg';
29
30
  subtitle?: ReactNode;
30
31
  suffix?: ReactNode;
@@ -9,8 +9,11 @@ import { Collapsible } from "@chakra-ui/react/collapsible";
9
9
  import { Card } from "@chakra-ui/react/card";
10
10
  //#region lib/components/BitkitExpandableCard/BitkitExpandableCard.tsx
11
11
  var BitkitExpandableCard = forwardRef((props, ref) => {
12
- const { children, collapsedHeight, collapsedWidth, css, defaultExpanded, disabled, elevation = true, expanded, footer, hideMode, icon, iconColor, ids, lazyMount, onChange, onExitComplete, size = "lg", subtitle, suffix, title, unmountOnExit, ...rest } = props;
13
- const styles = useSlotRecipe({ key: "expandableCard" })({ size });
12
+ const { children, collapsedHeight, collapsedWidth, css, defaultExpanded, disabled, elevation = true, expanded, footer, hideMode, icon, iconColor, ids, lazyMount, noPadding = false, onChange, onExitComplete, size = "lg", subtitle, suffix, title, unmountOnExit, ...rest } = props;
13
+ const styles = useSlotRecipe({ key: "expandableCard" })({
14
+ noPadding,
15
+ size
16
+ });
14
17
  const handleOpenChange = onChange ? (details) => onChange(details.open) : void 0;
15
18
  const iconSize = size === "md" ? "16" : "24";
16
19
  let renderedSuffix = suffix;
@@ -44,14 +47,14 @@ var BitkitExpandableCard = forwardRef((props, ref) => {
44
47
  children: [/* @__PURE__ */ jsxs(Box, {
45
48
  display: "flex",
46
49
  alignItems: "center",
50
+ flex: "1",
47
51
  gap: "8",
52
+ minWidth: "0",
48
53
  children: [!!renderedIcon && /* @__PURE__ */ jsx(Box, {
49
54
  css: styles.icon,
50
55
  children: renderedIcon
51
56
  }), /* @__PURE__ */ jsxs(Box, {
52
- display: "flex",
53
- alignItems: "flex-start",
54
- flexDirection: "column",
57
+ css: styles.title,
55
58
  children: [title, !!subtitle && /* @__PURE__ */ jsx(Text, {
56
59
  as: "span",
57
60
  css: styles.subtitle,
@@ -61,6 +64,7 @@ var BitkitExpandableCard = forwardRef((props, ref) => {
61
64
  }), /* @__PURE__ */ jsxs(Box, {
62
65
  display: "flex",
63
66
  alignItems: "center",
67
+ flexShrink: "0",
64
68
  children: [!!renderedSuffix && /* @__PURE__ */ jsx(Text, {
65
69
  as: "span",
66
70
  css: styles.suffix,
@@ -72,7 +76,10 @@ var BitkitExpandableCard = forwardRef((props, ref) => {
72
76
  })]
73
77
  }), /* @__PURE__ */ jsxs(Collapsible.Content, {
74
78
  css: styles.collapsible,
75
- children: [/* @__PURE__ */ jsx(Card.Body, { children }), !!footer && /* @__PURE__ */ jsx(Card.Footer, {
79
+ children: [/* @__PURE__ */ jsx(Card.Body, {
80
+ css: styles.body,
81
+ children
82
+ }), !!footer && /* @__PURE__ */ jsx(Card.Footer, {
76
83
  css: styles.footer,
77
84
  children: footer
78
85
  })]
@@ -1 +1 @@
1
- {"version":3,"file":"BitkitExpandableCard.js","names":[],"sources":["../../../lib/components/BitkitExpandableCard/BitkitExpandableCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Card } from '@chakra-ui/react/card';\nimport { Collapsible, type CollapsibleRootProps } from '@chakra-ui/react/collapsible';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport { type BitkitAvatarProps } from '../BitkitAvatar/BitkitAvatar';\nimport BitkitBadge, { type BitkitBadgeProps } from '../BitkitBadge/BitkitBadge';\n\ntype UncontrolledProps = {\n defaultExpanded?: boolean;\n expanded?: never;\n onChange?: never;\n};\n\ntype ControlledProps = {\n defaultExpanded?: never;\n expanded: boolean;\n onChange: (expanded: boolean) => void;\n};\n\n/**\n * Zag/Ark machine props. They drive the inner `Collapsible.Root` and mean nothing on the card\n * element, so they're forwarded by name rather than left in `...rest` — which belongs to the\n * rendered root (`Card.Root`) so consumer style props reach the card itself.\n */\ntype CollapsibleMachineProps = Pick<\n CollapsibleRootProps,\n | 'collapsedHeight'\n | 'collapsedWidth'\n | 'disabled'\n | 'hideMode'\n | 'ids'\n | 'lazyMount'\n | 'onExitComplete'\n | 'unmountOnExit'\n>;\n\nexport type BitkitExpandableCardProps = Omit<BoxProps, 'asChild' | 'children' | 'onChange' | 'title'> &\n CollapsibleMachineProps & {\n children: ReactNode;\n elevation?: boolean;\n footer?: ReactNode;\n icon?: BitkitIconComponent | ReactElement<BitkitAvatarProps>;\n iconColor?: string;\n size?: 'md' | 'lg';\n subtitle?: ReactNode;\n suffix?: ReactNode;\n title: ReactNode;\n } & (UncontrolledProps | ControlledProps);\n\nconst BitkitExpandableCard = forwardRef<HTMLDivElement, BitkitExpandableCardProps>((props, ref) => {\n const {\n children,\n collapsedHeight,\n collapsedWidth,\n css,\n defaultExpanded,\n disabled,\n elevation = true,\n expanded,\n footer,\n hideMode,\n icon,\n iconColor,\n ids,\n lazyMount,\n onChange,\n onExitComplete,\n size = 'lg',\n subtitle,\n suffix,\n title,\n unmountOnExit,\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'expandableCard' });\n const styles = recipe({ size });\n\n const handleOpenChange = onChange ? (details: { open: boolean }) => onChange(details.open) : undefined;\n\n // `md` is the tested branch so the default size ('lg') stays on the fallback.\n const iconSize = size === 'md' ? '16' : '24';\n\n // Figma sizes the header badge with the card: xs on md, sm (the badge default) on lg.\n let renderedSuffix: ReactNode = suffix;\n if (isValidElement<BitkitBadgeProps>(suffix) && suffix.type === BitkitBadge) {\n renderedSuffix = cloneElement(suffix, { size: size === 'md' ? 'xs' : 'sm' });\n }\n\n let renderedIcon: ReactNode = null;\n if (isValidElement<BitkitAvatarProps>(icon)) {\n // BitkitAvatar has no '16' size, so avatars stay at '24' even on the md card.\n renderedIcon = cloneElement(icon, { size: '24' });\n } else if (icon) {\n const Icon = icon;\n renderedIcon = <Icon color={iconColor} size={iconSize} />;\n }\n\n return (\n <Card.Root ref={ref} elevation={elevation} paddingSize=\"sm\" css={[styles.root, css]} {...rest}>\n <Collapsible.Root\n collapsedHeight={collapsedHeight}\n collapsedWidth={collapsedWidth}\n defaultOpen={defaultExpanded}\n disabled={disabled}\n hideMode={hideMode}\n ids={ids}\n lazyMount={lazyMount}\n onExitComplete={onExitComplete}\n onOpenChange={handleOpenChange}\n open={expanded}\n unmountOnExit={unmountOnExit}\n >\n <Collapsible.Trigger css={styles.header}>\n <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n {!!renderedIcon && <Box css={styles.icon}>{renderedIcon}</Box>}\n <Box display=\"flex\" alignItems=\"flex-start\" flexDirection=\"column\">\n {title}\n {!!subtitle && (\n <Text as=\"span\" css={styles.subtitle}>\n {subtitle}\n </Text>\n )}\n </Box>\n </Box>\n <Box display=\"flex\" alignItems=\"center\">\n {!!renderedSuffix && (\n <Text as=\"span\" css={styles.suffix}>\n {renderedSuffix}\n </Text>\n )}\n <Collapsible.Indicator asChild>\n <AssetSelectChevron />\n </Collapsible.Indicator>\n </Box>\n </Collapsible.Trigger>\n <Collapsible.Content css={styles.collapsible}>\n <Card.Body>{children}</Card.Body>\n {!!footer && <Card.Footer css={styles.footer}>{footer}</Card.Footer>}\n </Collapsible.Content>\n </Collapsible.Root>\n </Card.Root>\n );\n});\n\nBitkitExpandableCard.displayName = 'BitkitExpandableCard';\n\nexport default BitkitExpandableCard;\n"],"mappings":";;;;;;;;;;AAsDA,IAAM,uBAAuB,YAAuD,OAAO,QAAQ;CACjG,MAAM,EACJ,UACA,iBACA,gBACA,KACA,iBACA,UACA,YAAY,MACZ,UACA,QACA,UACA,MACA,WACA,KACA,WACA,UACA,gBACA,OAAO,MACP,UACA,QACA,OACA,eACA,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,iBAAiB,CACtC,CAAA,CAAO,EAAE,KAAK,CAAC;CAE9B,MAAM,mBAAmB,YAAY,YAA+B,SAAS,QAAQ,IAAI,IAAI,KAAA;CAG7F,MAAM,WAAW,SAAS,OAAO,OAAO;CAGxC,IAAI,iBAA4B;CAChC,IAAI,eAAiC,MAAM,KAAK,OAAO,SAAS,aAC9D,iBAAiB,aAAa,QAAQ,EAAE,MAAM,SAAS,OAAO,OAAO,KAAK,CAAC;CAG7E,IAAI,eAA0B;CAC9B,IAAI,eAAkC,IAAI,GAExC,eAAe,aAAa,MAAM,EAAE,MAAM,KAAK,CAAC;MAC3C,IAAI,MAET,eAAe,oBAAC,MAAD;EAAM,OAAO;EAAW,MAAM;CAAW,CAAA;CAG1D,OACE,oBAAC,KAAK,MAAN;EAAgB;EAAgB;EAAW,aAAY;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,GAAI;EACvF,UAAA,qBAAC,YAAY,MAAb;GACmB;GACD;GAChB,aAAa;GACH;GACA;GACL;GACM;GACK;GAChB,cAAc;GACd,MAAM;GACS;GAXjB,UAAA,CAaE,qBAAC,YAAY,SAAb;IAAqB,KAAK,OAAO;IAAjC,UAAA,CACE,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAAS,KAAI;KAA5C,UAAA,CACG,CAAC,CAAC,gBAAgB,oBAAC,KAAD;MAAK,KAAK,OAAO;MAAO,UAAA;KAAkB,CAAA,GAC7D,qBAAC,KAAD;MAAK,SAAQ;MAAO,YAAW;MAAa,eAAc;MAA1D,UAAA,CACG,OACA,CAAC,CAAC,YACD,oBAAC,MAAD;OAAM,IAAG;OAAO,KAAK,OAAO;OACzB,UAAA;MACG,CAAA,CAEL;KACF,CAAA,CAAA;IACL,CAAA,GAAA,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAA/B,UAAA,CACG,CAAC,CAAC,kBACD,oBAAC,MAAD;MAAM,IAAG;MAAO,KAAK,OAAO;MACzB,UAAA;KACG,CAAA,GAER,oBAAC,YAAY,WAAb;MAAuB,SAAA;MACrB,UAAA,oBAAC,oBAAD,CAAqB,CAAA;KACA,CAAA,CACpB;IACc,CAAA,CAAA;GACrB,CAAA,GAAA,qBAAC,YAAY,SAAb;IAAqB,KAAK,OAAO;IAAjC,UAAA,CACE,oBAAC,KAAK,MAAN,EAAY,SAAoB,CAAA,GAC/B,CAAC,CAAC,UAAU,oBAAC,KAAK,QAAN;KAAa,KAAK,OAAO;KAAS,UAAA;IAAoB,CAAA,CAChD;GACL,CAAA,CAAA;;CACT,CAAA;AAEf,CAAC;AAED,qBAAqB,cAAc"}
1
+ {"version":3,"file":"BitkitExpandableCard.js","names":[],"sources":["../../../lib/components/BitkitExpandableCard/BitkitExpandableCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Card } from '@chakra-ui/react/card';\nimport { Collapsible, type CollapsibleRootProps } from '@chakra-ui/react/collapsible';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport { type BitkitAvatarProps } from '../BitkitAvatar/BitkitAvatar';\nimport BitkitBadge, { type BitkitBadgeProps } from '../BitkitBadge/BitkitBadge';\n\ntype UncontrolledProps = {\n defaultExpanded?: boolean;\n expanded?: never;\n onChange?: never;\n};\n\ntype ControlledProps = {\n defaultExpanded?: never;\n expanded: boolean;\n onChange: (expanded: boolean) => void;\n};\n\n/**\n * Zag/Ark machine props. They drive the inner `Collapsible.Root` and mean nothing on the card\n * element, so they're forwarded by name rather than left in `...rest` — which belongs to the\n * rendered root (`Card.Root`) so consumer style props reach the card itself.\n */\ntype CollapsibleMachineProps = Pick<\n CollapsibleRootProps,\n | 'collapsedHeight'\n | 'collapsedWidth'\n | 'disabled'\n | 'hideMode'\n | 'ids'\n | 'lazyMount'\n | 'onExitComplete'\n | 'unmountOnExit'\n>;\n\nexport type BitkitExpandableCardProps = Omit<BoxProps, 'asChild' | 'children' | 'onChange' | 'title'> &\n CollapsibleMachineProps & {\n children: ReactNode;\n elevation?: boolean;\n footer?: ReactNode;\n icon?: BitkitIconComponent | ReactElement<BitkitAvatarProps>;\n iconColor?: string;\n noPadding?: boolean;\n size?: 'md' | 'lg';\n subtitle?: ReactNode;\n suffix?: ReactNode;\n title: ReactNode;\n } & (UncontrolledProps | ControlledProps);\n\nconst BitkitExpandableCard = forwardRef<HTMLDivElement, BitkitExpandableCardProps>((props, ref) => {\n const {\n children,\n collapsedHeight,\n collapsedWidth,\n css,\n defaultExpanded,\n disabled,\n elevation = true,\n expanded,\n footer,\n hideMode,\n icon,\n iconColor,\n ids,\n lazyMount,\n noPadding = false,\n onChange,\n onExitComplete,\n size = 'lg',\n subtitle,\n suffix,\n title,\n unmountOnExit,\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'expandableCard' });\n const styles = recipe({ noPadding, size });\n\n const handleOpenChange = onChange ? (details: { open: boolean }) => onChange(details.open) : undefined;\n\n // `md` is the tested branch so the default size ('lg') stays on the fallback.\n const iconSize = size === 'md' ? '16' : '24';\n\n // Figma sizes the header badge with the card: xs on md, sm (the badge default) on lg.\n let renderedSuffix: ReactNode = suffix;\n if (isValidElement<BitkitBadgeProps>(suffix) && suffix.type === BitkitBadge) {\n renderedSuffix = cloneElement(suffix, { size: size === 'md' ? 'xs' : 'sm' });\n }\n\n let renderedIcon: ReactNode = null;\n if (isValidElement<BitkitAvatarProps>(icon)) {\n // BitkitAvatar has no '16' size, so avatars stay at '24' even on the md card.\n renderedIcon = cloneElement(icon, { size: '24' });\n } else if (icon) {\n const Icon = icon;\n renderedIcon = <Icon color={iconColor} size={iconSize} />;\n }\n\n return (\n <Card.Root ref={ref} elevation={elevation} paddingSize=\"sm\" css={[styles.root, css]} {...rest}>\n <Collapsible.Root\n collapsedHeight={collapsedHeight}\n collapsedWidth={collapsedWidth}\n defaultOpen={defaultExpanded}\n disabled={disabled}\n hideMode={hideMode}\n ids={ids}\n lazyMount={lazyMount}\n onExitComplete={onExitComplete}\n onOpenChange={handleOpenChange}\n open={expanded}\n unmountOnExit={unmountOnExit}\n >\n <Collapsible.Trigger css={styles.header}>\n <Box display=\"flex\" alignItems=\"center\" flex=\"1\" gap=\"8\" minWidth=\"0\">\n {!!renderedIcon && <Box css={styles.icon}>{renderedIcon}</Box>}\n <Box css={styles.title}>\n {title}\n {!!subtitle && (\n <Text as=\"span\" css={styles.subtitle}>\n {subtitle}\n </Text>\n )}\n </Box>\n </Box>\n <Box display=\"flex\" alignItems=\"center\" flexShrink=\"0\">\n {!!renderedSuffix && (\n <Text as=\"span\" css={styles.suffix}>\n {renderedSuffix}\n </Text>\n )}\n <Collapsible.Indicator asChild>\n <AssetSelectChevron />\n </Collapsible.Indicator>\n </Box>\n </Collapsible.Trigger>\n <Collapsible.Content css={styles.collapsible}>\n <Card.Body css={styles.body}>{children}</Card.Body>\n {!!footer && <Card.Footer css={styles.footer}>{footer}</Card.Footer>}\n </Collapsible.Content>\n </Collapsible.Root>\n </Card.Root>\n );\n});\n\nBitkitExpandableCard.displayName = 'BitkitExpandableCard';\n\nexport default BitkitExpandableCard;\n"],"mappings":";;;;;;;;;;AAuDA,IAAM,uBAAuB,YAAuD,OAAO,QAAQ;CACjG,MAAM,EACJ,UACA,iBACA,gBACA,KACA,iBACA,UACA,YAAY,MACZ,UACA,QACA,UACA,MACA,WACA,KACA,WACA,YAAY,OACZ,UACA,gBACA,OAAO,MACP,UACA,QACA,OACA,eACA,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,iBAAiB,CACtC,CAAA,CAAO;EAAE;EAAW;CAAK,CAAC;CAEzC,MAAM,mBAAmB,YAAY,YAA+B,SAAS,QAAQ,IAAI,IAAI,KAAA;CAG7F,MAAM,WAAW,SAAS,OAAO,OAAO;CAGxC,IAAI,iBAA4B;CAChC,IAAI,eAAiC,MAAM,KAAK,OAAO,SAAS,aAC9D,iBAAiB,aAAa,QAAQ,EAAE,MAAM,SAAS,OAAO,OAAO,KAAK,CAAC;CAG7E,IAAI,eAA0B;CAC9B,IAAI,eAAkC,IAAI,GAExC,eAAe,aAAa,MAAM,EAAE,MAAM,KAAK,CAAC;MAC3C,IAAI,MAET,eAAe,oBAAC,MAAD;EAAM,OAAO;EAAW,MAAM;CAAW,CAAA;CAG1D,OACE,oBAAC,KAAK,MAAN;EAAgB;EAAgB;EAAW,aAAY;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,GAAI;EACvF,UAAA,qBAAC,YAAY,MAAb;GACmB;GACD;GAChB,aAAa;GACH;GACA;GACL;GACM;GACK;GAChB,cAAc;GACd,MAAM;GACS;GAXjB,UAAA,CAaE,qBAAC,YAAY,SAAb;IAAqB,KAAK,OAAO;IAAjC,UAAA,CACE,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAAS,MAAK;KAAI,KAAI;KAAI,UAAS;KAAlE,UAAA,CACG,CAAC,CAAC,gBAAgB,oBAAC,KAAD;MAAK,KAAK,OAAO;MAAO,UAAA;KAAkB,CAAA,GAC7D,qBAAC,KAAD;MAAK,KAAK,OAAO;MAAjB,UAAA,CACG,OACA,CAAC,CAAC,YACD,oBAAC,MAAD;OAAM,IAAG;OAAO,KAAK,OAAO;OACzB,UAAA;MACG,CAAA,CAEL;KACF,CAAA,CAAA;IACL,CAAA,GAAA,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAAS,YAAW;KAAnD,UAAA,CACG,CAAC,CAAC,kBACD,oBAAC,MAAD;MAAM,IAAG;MAAO,KAAK,OAAO;MACzB,UAAA;KACG,CAAA,GAER,oBAAC,YAAY,WAAb;MAAuB,SAAA;MACrB,UAAA,oBAAC,oBAAD,CAAqB,CAAA;KACA,CAAA,CACpB;IACc,CAAA,CAAA;GACrB,CAAA,GAAA,qBAAC,YAAY,SAAb;IAAqB,KAAK,OAAO;IAAjC,UAAA,CACE,oBAAC,KAAK,MAAN;KAAW,KAAK,OAAO;KAAO;IAAoB,CAAA,GACjD,CAAC,CAAC,UAAU,oBAAC,KAAK,QAAN;KAAa,KAAK,OAAO;KAAS,UAAA;IAAoB,CAAA,CAChD;GACL,CAAA,CAAA;;CACT,CAAA;AAEf,CAAC;AAED,qBAAqB,cAAc"}
@@ -4,6 +4,18 @@ import { BitkitIconComponent } from '../../icons';
4
4
  type BitkitSelectMenuActionCommonProps = {
5
5
  icon: BitkitIconComponent;
6
6
  label: string;
7
+ /**
8
+ * A disabled action stays focusable and keeps taking pointer events (`aria-disabled`, not the
9
+ * native attribute), so the `tooltip` saying why it is unavailable is still reachable. Natively
10
+ * disabled it would be neither hoverable nor tabbable, hiding the explanation in the one state
11
+ * that needs it.
12
+ *
13
+ * This is the only disabled affordance in the menus: an option a user cannot pick is left out
14
+ * of the collection instead, never dimmed.
15
+ */
16
+ state?: 'disabled';
17
+ /** Hover and focus tooltip on the row. On a disabled action, say why it is unavailable. */
18
+ tooltip?: string;
7
19
  };
8
20
  export type BitkitSelectMenuActionAsButtonProps = BitkitSelectMenuActionCommonProps & {
9
21
  href?: undefined;
@@ -1,6 +1,7 @@
1
+ import BitkitTooltip from "../BitkitTooltip/BitkitTooltip.js";
1
2
  import { Box } from "@chakra-ui/react/box";
2
3
  import { chakra } from "@chakra-ui/react/styled-system";
3
- import { jsx, jsxs } from "react/jsx-runtime";
4
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
4
5
  import { createContext } from "@chakra-ui/react";
5
6
  //#region lib/components/BitkitSelectMenu/BitkitSelectMenuAction.tsx
6
7
  var [SelectMenuShellContextProvider, useSelectMenuShellContext] = createContext({
@@ -12,35 +13,45 @@ var stopMenuSelectionKeys = (event) => {
12
13
  if (event.key === "Enter" || event.key === " ") event.stopPropagation();
13
14
  };
14
15
  var BitkitSelectMenuAction = (props) => {
15
- const { href, icon: Icon, label, onClick } = props;
16
+ const { href, icon: Icon, label, onClick, state, tooltip } = props;
16
17
  const { iconSize, styles } = useSelectMenuShellContext();
18
+ const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, { size: iconSize }), label] });
19
+ const asRow = (row) => /* @__PURE__ */ jsx(Box, {
20
+ css: styles.actionContainer,
21
+ children: tooltip ? /* @__PURE__ */ jsx(BitkitTooltip, {
22
+ text: tooltip,
23
+ children: row
24
+ }) : row
25
+ });
26
+ if (state === "disabled") return asRow(/* @__PURE__ */ jsx(chakra.button, {
27
+ type: "button",
28
+ "aria-disabled": "true",
29
+ css: styles.action,
30
+ "data-disabled": "",
31
+ onKeyDown: stopMenuSelectionKeys,
32
+ children: content
33
+ }));
17
34
  if (href !== void 0) {
18
35
  const { isExternal, rel, target } = props;
19
36
  const effectiveTarget = isExternal ? "_blank" : target;
20
37
  const effectiveRel = isExternal ? rel ? `${rel} noreferrer noopener` : "noreferrer noopener" : rel;
21
- return /* @__PURE__ */ jsx(Box, {
22
- css: styles.actionContainer,
23
- children: /* @__PURE__ */ jsxs(chakra.a, {
24
- href,
25
- target: effectiveTarget,
26
- rel: effectiveRel,
27
- css: styles.action,
28
- onClick,
29
- onKeyDown: stopMenuSelectionKeys,
30
- children: [/* @__PURE__ */ jsx(Icon, { size: iconSize }), label]
31
- })
32
- });
33
- }
34
- return /* @__PURE__ */ jsx(Box, {
35
- css: styles.actionContainer,
36
- children: /* @__PURE__ */ jsxs(chakra.button, {
37
- type: "button",
38
+ return asRow(/* @__PURE__ */ jsx(chakra.a, {
39
+ href,
40
+ target: effectiveTarget,
41
+ rel: effectiveRel,
38
42
  css: styles.action,
39
43
  onClick,
40
44
  onKeyDown: stopMenuSelectionKeys,
41
- children: [/* @__PURE__ */ jsx(Icon, { size: iconSize }), label]
42
- })
43
- });
45
+ children: content
46
+ }));
47
+ }
48
+ return asRow(/* @__PURE__ */ jsx(chakra.button, {
49
+ type: "button",
50
+ css: styles.action,
51
+ onClick,
52
+ onKeyDown: stopMenuSelectionKeys,
53
+ children: content
54
+ }));
44
55
  };
45
56
  BitkitSelectMenuAction.displayName = "BitkitSelectMenu.Action";
46
57
  //#endregion
@@ -1 +1 @@
1
- {"version":3,"file":"BitkitSelectMenuAction.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/BitkitSelectMenuAction.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { type KeyboardEvent as ReactKeyboardEvent, type ReactElement } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\n\ntype BitkitSelectMenuActionCommonProps = {\n icon: BitkitIconComponent;\n label: string;\n};\n\nexport type BitkitSelectMenuActionAsButtonProps = BitkitSelectMenuActionCommonProps & {\n href?: undefined;\n isExternal?: undefined;\n onClick: () => void;\n};\n\nexport type BitkitSelectMenuActionAsAnchorProps = BitkitSelectMenuActionCommonProps & {\n href: string;\n isExternal?: boolean;\n onClick?: () => void;\n rel?: string;\n target?: string;\n};\n\nexport type BitkitSelectMenuActionProps = BitkitSelectMenuActionAsButtonProps | BitkitSelectMenuActionAsAnchorProps;\n\nexport type BitkitSelectMenuActionChild = ReactElement<BitkitSelectMenuActionProps> | false | null;\n\ntype SelectMenuShellContext = {\n iconSize: '16' | '24';\n styles: Record<string, SystemStyleObject>;\n};\n\nconst [SelectMenuShellContextProvider, useSelectMenuShellContext] = createContext<SelectMenuShellContext>({\n name: 'SelectMenuShellContext',\n hookName: 'useSelectMenuShellContext',\n providerName:\n '<BitkitSelectMenu />, <BitkitMultiselectMenu />, <BitkitSelect />, <BitkitMultiselect />, or <BitkitCombobox />',\n});\n\nexport { SelectMenuShellContextProvider };\n\nconst stopMenuSelectionKeys = (event: ReactKeyboardEvent) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.stopPropagation();\n }\n};\n\nconst BitkitSelectMenuAction = (props: BitkitSelectMenuActionProps) => {\n const { href, icon: Icon, label, onClick } = props;\n const { iconSize, styles } = useSelectMenuShellContext();\n\n if (href !== undefined) {\n const { isExternal, rel, target } = props;\n const effectiveTarget = isExternal ? '_blank' : target;\n const effectiveRel = isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel;\n\n return (\n <Box css={styles.actionContainer}>\n <chakra.a\n href={href}\n target={effectiveTarget}\n rel={effectiveRel}\n css={styles.action}\n onClick={onClick}\n onKeyDown={stopMenuSelectionKeys}\n >\n <Icon size={iconSize} />\n {label}\n </chakra.a>\n </Box>\n );\n }\n\n return (\n <Box css={styles.actionContainer}>\n <chakra.button type=\"button\" css={styles.action} onClick={onClick} onKeyDown={stopMenuSelectionKeys}>\n <Icon size={iconSize} />\n {label}\n </chakra.button>\n </Box>\n );\n};\n\nBitkitSelectMenuAction.displayName = 'BitkitSelectMenu.Action';\n\nexport default BitkitSelectMenuAction;\n"],"mappings":";;;;;AAoCA,IAAM,CAAC,gCAAgC,6BAA6B,cAAsC;CACxG,MAAM;CACN,UAAU;CACV,cACE;AACJ,CAAC;AAID,IAAM,yBAAyB,UAA8B;CAC3D,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KACzC,MAAM,gBAAgB;AAE1B;AAEA,IAAM,0BAA0B,UAAuC;CACrE,MAAM,EAAE,MAAM,MAAM,MAAM,OAAO,YAAY;CAC7C,MAAM,EAAE,UAAU,WAAW,0BAA0B;CAEvD,IAAI,SAAS,KAAA,GAAW;EACtB,MAAM,EAAE,YAAY,KAAK,WAAW;EACpC,MAAM,kBAAkB,aAAa,WAAW;EAChD,MAAM,eAAe,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;EAEjG,OACE,oBAAC,KAAD;GAAK,KAAK,OAAO;GACf,UAAA,qBAAC,OAAO,GAAR;IACQ;IACN,QAAQ;IACR,KAAK;IACL,KAAK,OAAO;IACH;IACT,WAAW;IANb,UAAA,CAQE,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA,GACtB,KACO;;EACP,CAAA;CAET;CAEA,OACE,oBAAC,KAAD;EAAK,KAAK,OAAO;EACf,UAAA,qBAAC,OAAO,QAAR;GAAe,MAAK;GAAS,KAAK,OAAO;GAAiB;GAAS,WAAW;GAA9E,UAAA,CACE,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA,GACtB,KACY;;CACZ,CAAA;AAET;AAEA,uBAAuB,cAAc"}
1
+ {"version":3,"file":"BitkitSelectMenuAction.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/BitkitSelectMenuAction.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { type KeyboardEvent as ReactKeyboardEvent, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\ntype BitkitSelectMenuActionCommonProps = {\n icon: BitkitIconComponent;\n label: string;\n /**\n * A disabled action stays focusable and keeps taking pointer events (`aria-disabled`, not the\n * native attribute), so the `tooltip` saying why it is unavailable is still reachable. Natively\n * disabled it would be neither hoverable nor tabbable, hiding the explanation in the one state\n * that needs it.\n *\n * This is the only disabled affordance in the menus: an option a user cannot pick is left out\n * of the collection instead, never dimmed.\n */\n state?: 'disabled';\n /** Hover and focus tooltip on the row. On a disabled action, say why it is unavailable. */\n tooltip?: string;\n};\n\nexport type BitkitSelectMenuActionAsButtonProps = BitkitSelectMenuActionCommonProps & {\n href?: undefined;\n isExternal?: undefined;\n onClick: () => void;\n};\n\nexport type BitkitSelectMenuActionAsAnchorProps = BitkitSelectMenuActionCommonProps & {\n href: string;\n isExternal?: boolean;\n onClick?: () => void;\n rel?: string;\n target?: string;\n};\n\nexport type BitkitSelectMenuActionProps = BitkitSelectMenuActionAsButtonProps | BitkitSelectMenuActionAsAnchorProps;\n\nexport type BitkitSelectMenuActionChild = ReactElement<BitkitSelectMenuActionProps> | false | null;\n\ntype SelectMenuShellContext = {\n iconSize: '16' | '24';\n styles: Record<string, SystemStyleObject>;\n};\n\nconst [SelectMenuShellContextProvider, useSelectMenuShellContext] = createContext<SelectMenuShellContext>({\n name: 'SelectMenuShellContext',\n hookName: 'useSelectMenuShellContext',\n providerName:\n '<BitkitSelectMenu />, <BitkitMultiselectMenu />, <BitkitSelect />, <BitkitMultiselect />, or <BitkitCombobox />',\n});\n\nexport { SelectMenuShellContextProvider };\n\nconst stopMenuSelectionKeys = (event: ReactKeyboardEvent) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.stopPropagation();\n }\n};\n\nconst BitkitSelectMenuAction = (props: BitkitSelectMenuActionProps) => {\n const { href, icon: Icon, label, onClick, state, tooltip } = props;\n const { iconSize, styles } = useSelectMenuShellContext();\n\n const content = (\n <>\n <Icon size={iconSize} />\n {label}\n </>\n );\n\n const asRow = (row: ReactNode) => (\n <Box css={styles.actionContainer}>{tooltip ? <BitkitTooltip text={tooltip}>{row}</BitkitTooltip> : row}</Box>\n );\n\n if (state === 'disabled') {\n return asRow(\n // A button even for an `href` action: dropping the attribute is the only thing that stops a\n // middle click or \"open link in new tab\" from navigating anyway, and an anchor without one\n // leaves the tab order, taking the tooltip with it.\n <chakra.button\n type=\"button\"\n aria-disabled=\"true\"\n css={styles.action}\n // `_disabled` matches `[aria-disabled=true]` by itself, but `_hover`/`_active` only\n // exclude `:disabled` and `[data-disabled]`, so without this the row still lights up.\n data-disabled=\"\"\n onKeyDown={stopMenuSelectionKeys}\n >\n {content}\n </chakra.button>,\n );\n }\n\n if (href !== undefined) {\n const { isExternal, rel, target } = props;\n const effectiveTarget = isExternal ? '_blank' : target;\n const effectiveRel = isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel;\n\n return asRow(\n <chakra.a\n href={href}\n target={effectiveTarget}\n rel={effectiveRel}\n css={styles.action}\n onClick={onClick}\n onKeyDown={stopMenuSelectionKeys}\n >\n {content}\n </chakra.a>,\n );\n }\n\n return asRow(\n <chakra.button type=\"button\" css={styles.action} onClick={onClick} onKeyDown={stopMenuSelectionKeys}>\n {content}\n </chakra.button>,\n );\n};\n\nBitkitSelectMenuAction.displayName = 'BitkitSelectMenu.Action';\n\nexport default BitkitSelectMenuAction;\n"],"mappings":";;;;;;AAiDA,IAAM,CAAC,gCAAgC,6BAA6B,cAAsC;CACxG,MAAM;CACN,UAAU;CACV,cACE;AACJ,CAAC;AAID,IAAM,yBAAyB,UAA8B;CAC3D,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KACzC,MAAM,gBAAgB;AAE1B;AAEA,IAAM,0BAA0B,UAAuC;CACrE,MAAM,EAAE,MAAM,MAAM,MAAM,OAAO,SAAS,OAAO,YAAY;CAC7D,MAAM,EAAE,UAAU,WAAW,0BAA0B;CAEvD,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA,GACtB,KACD,EAAA,CAAA;CAGJ,MAAM,SAAS,QACb,oBAAC,KAAD;EAAK,KAAK,OAAO;EAAkB,UAAA,UAAU,oBAAC,eAAD;GAAe,MAAM;GAAU,UAAA;EAAmB,CAAA,IAAI;CAAS,CAAA;CAG9G,IAAI,UAAU,YACZ,OAAO,MAIL,oBAAC,OAAO,QAAR;EACE,MAAK;EACL,iBAAc;EACd,KAAK,OAAO;EAGZ,iBAAc;EACd,WAAW;EAEV,UAAA;CACY,CAAA,CACjB;CAGF,IAAI,SAAS,KAAA,GAAW;EACtB,MAAM,EAAE,YAAY,KAAK,WAAW;EACpC,MAAM,kBAAkB,aAAa,WAAW;EAChD,MAAM,eAAe,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;EAEjG,OAAO,MACL,oBAAC,OAAO,GAAR;GACQ;GACN,QAAQ;GACR,KAAK;GACL,KAAK,OAAO;GACH;GACT,WAAW;GAEV,UAAA;EACO,CAAA,CACZ;CACF;CAEA,OAAO,MACL,oBAAC,OAAO,QAAR;EAAe,MAAK;EAAS,KAAK,OAAO;EAAiB;EAAS,WAAW;EAC3E,UAAA;CACY,CAAA,CACjB;AACF;AAEA,uBAAuB,cAAc"}
@@ -1,6 +1,6 @@
1
1
  import IconInfoCircle from "../../../icons/IconInfoCircle.js";
2
- import { isEmptyNode } from "../../../utilities/isEmptyNode.js";
3
2
  import BitkitTooltip from "../../BitkitTooltip/BitkitTooltip.js";
3
+ import { isEmptyNode } from "../../../utilities/isEmptyNode.js";
4
4
  import { jsx, jsxs } from "react/jsx-runtime";
5
5
  import { Text } from "@chakra-ui/react/text";
6
6
  import { Flex } from "@chakra-ui/react/flex";
package/dist/main.js CHANGED
@@ -304,12 +304,12 @@ import BitkitControlButton from "./components/BitkitControlButton/BitkitControlB
304
304
  import BitkitBreadcrumb from "./components/BitkitBreadcrumb/BitkitBreadcrumb.js";
305
305
  import BitkitButton from "./components/BitkitButton/BitkitButton.js";
306
306
  import BitkitGroupHeading from "./components/BitkitGroupHeading/BitkitGroupHeading.js";
307
+ import BitkitTooltip from "./components/BitkitTooltip/BitkitTooltip.js";
307
308
  import BitkitSelectMenuAction from "./components/BitkitSelectMenu/BitkitSelectMenuAction.js";
308
309
  import BitkitSelectMenu from "./components/BitkitSelectMenu/BitkitSelectMenu.js";
309
310
  import BitkitCalendar from "./components/BitkitCalendar/BitkitCalendar.js";
310
311
  import BitkitCheckbox from "./components/BitkitCheckbox/BitkitCheckbox.js";
311
312
  import BitkitCheckboxGroup from "./components/BitkitCheckboxGroup/BitkitCheckboxGroup.js";
312
- import BitkitTooltip from "./components/BitkitTooltip/BitkitTooltip.js";
313
313
  import BitkitCodeSnippet from "./components/BitkitCodeSnippet/BitkitCodeSnippet.js";
314
314
  import BitkitLabel from "./components/BitkitLabel/BitkitLabel.js";
315
315
  import BitkitCollapsible from "./components/BitkitCollapsible/BitkitCollapsible.js";
@@ -1,4 +1,12 @@
1
- declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "header" | "title" | "icon" | "collapsible" | "root" | "suffix" | "description" | "subtitle", {
1
+ declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "collapsible" | "root" | "suffix" | "description" | "subtitle", {
2
+ noPadding: {
3
+ false: {};
4
+ true: {
5
+ body: {
6
+ padding: number;
7
+ };
8
+ };
9
+ };
2
10
  size: {
3
11
  md: {
4
12
  header: {
@@ -4,7 +4,7 @@ import { cardAnatomy } from "@chakra-ui/react/anatomy";
4
4
  var expandableCardSlotRecipe = defineSlotRecipe({
5
5
  className: "expandable-card",
6
6
  slots: [
7
- ...cardAnatomy.omit("body").keys(),
7
+ ...cardAnatomy.keys(),
8
8
  "collapsible",
9
9
  "icon",
10
10
  "subtitle",
@@ -13,7 +13,7 @@ var expandableCardSlotRecipe = defineSlotRecipe({
13
13
  base: {
14
14
  root: {
15
15
  backgroundColor: "background/primary",
16
- overflow: "hidden"
16
+ overflow: "clip"
17
17
  },
18
18
  header: {
19
19
  display: "flex",
@@ -32,7 +32,7 @@ var expandableCardSlotRecipe = defineSlotRecipe({
32
32
  }
33
33
  },
34
34
  collapsible: {
35
- overflow: "hidden",
35
+ overflow: "clip",
36
36
  _open: {
37
37
  animationName: "expand-height, fade-in",
38
38
  animationDuration: "moderate"
@@ -57,26 +57,42 @@ var expandableCardSlotRecipe = defineSlotRecipe({
57
57
  color: "text/secondary",
58
58
  mx: "16",
59
59
  textStyle: "body/md/regular"
60
+ },
61
+ title: {
62
+ alignItems: "flex-start",
63
+ display: "flex",
64
+ flexDirection: "column",
65
+ minWidth: 0,
66
+ "& > *": { maxWidth: "100%" }
60
67
  }
61
68
  },
62
- variants: { size: {
63
- md: {
64
- header: {
65
- textStyle: "body/md/regular",
66
- paddingX: "16",
67
- paddingY: "12"
68
- },
69
- subtitle: { textStyle: "body/sm/regular" }
69
+ variants: {
70
+ noPadding: {
71
+ false: {},
72
+ true: { body: { padding: 0 } }
70
73
  },
71
- lg: {
72
- header: {
73
- textStyle: "body/lg/regular",
74
- padding: "16"
74
+ size: {
75
+ md: {
76
+ header: {
77
+ textStyle: "body/md/regular",
78
+ paddingX: "16",
79
+ paddingY: "12"
80
+ },
81
+ subtitle: { textStyle: "body/sm/regular" }
75
82
  },
76
- subtitle: { textStyle: "body/md/regular" }
83
+ lg: {
84
+ header: {
85
+ textStyle: "body/lg/regular",
86
+ padding: "16"
87
+ },
88
+ subtitle: { textStyle: "body/md/regular" }
89
+ }
77
90
  }
78
- } },
79
- defaultVariants: { size: "lg" }
91
+ },
92
+ defaultVariants: {
93
+ noPadding: false,
94
+ size: "lg"
95
+ }
80
96
  });
81
97
  //#endregion
82
98
  export { expandableCardSlotRecipe as default };
@@ -1 +1 @@
1
- {"version":3,"file":"ExpandableCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/ExpandableCard.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst expandableCardSlotRecipe = defineSlotRecipe({\n className: 'expandable-card',\n slots: [...cardAnatomy.omit('body').keys(), 'collapsible', 'icon', 'subtitle', 'suffix'],\n base: {\n root: {\n backgroundColor: 'background/primary',\n overflow: 'hidden',\n },\n header: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n cursor: 'pointer',\n width: '100%',\n color: 'text/primary',\n '&:active': {\n backgroundColor: 'background/active',\n },\n '&:hover:not(:active)': {\n backgroundColor: 'background/hover',\n },\n _hover: {\n color: 'text/primary',\n },\n _open: {\n backgroundColor: 'background/secondary',\n // Figma draws this stroke inside the 48px header, so as a real border the open header\n // is 49px. Swap for `boxShadow: 'inset 0 -1px 0 {colors.border/minimal}'` if exact\n // 48px parity is ever needed.\n borderBottom: '1px solid',\n borderBottomColor: 'border/minimal',\n },\n },\n collapsible: {\n overflow: 'hidden',\n _open: {\n animationName: 'expand-height, fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationName: 'collapse-height, fade-out',\n animationDuration: 'moderate',\n },\n },\n // Figma's footer content slot is 24px tall in both sizes; with Card's `sm` block\n // padding (8/8) that makes the 40px footer shown in the design.\n footer: {\n alignItems: 'center',\n display: 'flex',\n minHeight: '40',\n },\n // Flex, not the default block: an inline-block svg in a block box picks up the line box's\n // extra leading, which made an lg header with an icon 57.5px instead of Figma's 56px.\n icon: {\n alignItems: 'center',\n color: 'icon/secondary',\n display: 'flex',\n },\n subtitle: {\n color: 'text/secondary',\n },\n suffix: {\n color: 'text/secondary',\n mx: '16',\n textStyle: 'body/md/regular',\n },\n },\n variants: {\n size: {\n md: {\n header: { textStyle: 'body/md/regular', paddingX: '16', paddingY: '12' },\n subtitle: { textStyle: 'body/sm/regular' },\n },\n lg: {\n header: { textStyle: 'body/lg/regular', padding: '16' },\n subtitle: { textStyle: 'body/md/regular' },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n\nexport default expandableCardSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,2BAA2B,iBAAiB;CAChD,WAAW;CACX,OAAO;EAAC,GAAG,YAAY,KAAK,MAAM,CAAC,CAAC,KAAK;EAAG;EAAe;EAAQ;EAAY;CAAQ;CACvF,MAAM;EACJ,MAAM;GACJ,iBAAiB;GACjB,UAAU;EACZ;EACA,QAAQ;GACN,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,QAAQ;GACR,OAAO;GACP,OAAO;GACP,YAAY,EACV,iBAAiB,oBACnB;GACA,wBAAwB,EACtB,iBAAiB,mBACnB;GACA,QAAQ,EACN,OAAO,eACT;GACA,OAAO;IACL,iBAAiB;IAIjB,cAAc;IACd,mBAAmB;GACrB;EACF;EACA,aAAa;GACX,UAAU;GACV,OAAO;IACL,eAAe;IACf,mBAAmB;GACrB;GACA,SAAS;IACP,eAAe;IACf,mBAAmB;GACrB;EACF;EAGA,QAAQ;GACN,YAAY;GACZ,SAAS;GACT,WAAW;EACb;EAGA,MAAM;GACJ,YAAY;GACZ,OAAO;GACP,SAAS;EACX;EACA,UAAU,EACR,OAAO,iBACT;EACA,QAAQ;GACN,OAAO;GACP,IAAI;GACJ,WAAW;EACb;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,QAAQ;IAAE,WAAW;IAAmB,UAAU;IAAM,UAAU;GAAK;GACvE,UAAU,EAAE,WAAW,kBAAkB;EAC3C;EACA,IAAI;GACF,QAAQ;IAAE,WAAW;IAAmB,SAAS;GAAK;GACtD,UAAU,EAAE,WAAW,kBAAkB;EAC3C;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
1
+ {"version":3,"file":"ExpandableCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/ExpandableCard.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst expandableCardSlotRecipe = defineSlotRecipe({\n className: 'expandable-card',\n slots: [...cardAnatomy.keys(), 'collapsible', 'icon', 'subtitle', 'suffix'],\n base: {\n root: {\n backgroundColor: 'background/primary',\n // `clip` rather than `hidden`: a hidden box is a scroll container, which would make a\n // `position: sticky` element in the body stick to the card instead of the page.\n overflow: 'clip',\n },\n header: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n cursor: 'pointer',\n width: '100%',\n color: 'text/primary',\n '&:active': {\n backgroundColor: 'background/active',\n },\n '&:hover:not(:active)': {\n backgroundColor: 'background/hover',\n },\n _hover: {\n color: 'text/primary',\n },\n _open: {\n backgroundColor: 'background/secondary',\n // Figma draws this stroke inside the 48px header, so as a real border the open header\n // is 49px. Swap for `boxShadow: 'inset 0 -1px 0 {colors.border/minimal}'` if exact\n // 48px parity is ever needed.\n borderBottom: '1px solid',\n borderBottomColor: 'border/minimal',\n },\n },\n collapsible: {\n overflow: 'clip',\n _open: {\n animationName: 'expand-height, fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationName: 'collapse-height, fade-out',\n animationDuration: 'moderate',\n },\n },\n // Figma's footer content slot is 24px tall in both sizes; with Card's `sm` block\n // padding (8/8) that makes the 40px footer shown in the design.\n footer: {\n alignItems: 'center',\n display: 'flex',\n minHeight: '40',\n },\n // Flex, not the default block: an inline-block svg in a block box picks up the line box's\n // extra leading, which made an lg header with an icon 57.5px instead of Figma's 56px.\n icon: {\n alignItems: 'center',\n color: 'icon/secondary',\n display: 'flex',\n },\n subtitle: {\n color: 'text/secondary',\n },\n suffix: {\n color: 'text/secondary',\n mx: '16',\n textStyle: 'body/md/regular',\n },\n title: {\n alignItems: 'flex-start',\n display: 'flex',\n flexDirection: 'column',\n minWidth: 0,\n // Under `flex-start` a nowrap child keeps its full width, so cap it or `truncate` never engages.\n '& > *': {\n maxWidth: '100%',\n },\n },\n },\n variants: {\n noPadding: {\n false: {},\n true: {\n body: { padding: 0 },\n },\n },\n size: {\n md: {\n header: { textStyle: 'body/md/regular', paddingX: '16', paddingY: '12' },\n subtitle: { textStyle: 'body/sm/regular' },\n },\n lg: {\n header: { textStyle: 'body/lg/regular', padding: '16' },\n subtitle: { textStyle: 'body/md/regular' },\n },\n },\n },\n defaultVariants: {\n noPadding: false,\n size: 'lg',\n },\n});\n\nexport default expandableCardSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,2BAA2B,iBAAiB;CAChD,WAAW;CACX,OAAO;EAAC,GAAG,YAAY,KAAK;EAAG;EAAe;EAAQ;EAAY;CAAQ;CAC1E,MAAM;EACJ,MAAM;GACJ,iBAAiB;GAGjB,UAAU;EACZ;EACA,QAAQ;GACN,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,QAAQ;GACR,OAAO;GACP,OAAO;GACP,YAAY,EACV,iBAAiB,oBACnB;GACA,wBAAwB,EACtB,iBAAiB,mBACnB;GACA,QAAQ,EACN,OAAO,eACT;GACA,OAAO;IACL,iBAAiB;IAIjB,cAAc;IACd,mBAAmB;GACrB;EACF;EACA,aAAa;GACX,UAAU;GACV,OAAO;IACL,eAAe;IACf,mBAAmB;GACrB;GACA,SAAS;IACP,eAAe;IACf,mBAAmB;GACrB;EACF;EAGA,QAAQ;GACN,YAAY;GACZ,SAAS;GACT,WAAW;EACb;EAGA,MAAM;GACJ,YAAY;GACZ,OAAO;GACP,SAAS;EACX;EACA,UAAU,EACR,OAAO,iBACT;EACA,QAAQ;GACN,OAAO;GACP,IAAI;GACJ,WAAW;EACb;EACA,OAAO;GACL,YAAY;GACZ,SAAS;GACT,eAAe;GACf,UAAU;GAEV,SAAS,EACP,UAAU,OACZ;EACF;CACF;CACA,UAAU;EACR,WAAW;GACT,OAAO,CAAC;GACR,MAAM,EACJ,MAAM,EAAE,SAAS,EAAE,EACrB;EACF;EACA,MAAM;GACJ,IAAI;IACF,QAAQ;KAAE,WAAW;KAAmB,UAAU;KAAM,UAAU;IAAK;IACvE,UAAU,EAAE,WAAW,kBAAkB;GAC3C;GACA,IAAI;IACF,QAAQ;KAAE,WAAW;KAAmB,SAAS;IAAK;IACtD,UAAU,EAAE,WAAW,kBAAkB;GAC3C;EACF;CACF;CACA,iBAAiB;EACf,WAAW;EACX,MAAM;CACR;AACF,CAAC"}
@@ -260,6 +260,11 @@ var selectSlotRecipe = defineSlotRecipe({
260
260
  _active: { background: "button/secondary/bg-active" }
261
261
  },
262
262
  _active: { background: "button/secondary/bg-active" },
263
+ _disabled: {
264
+ color: "text/disabled",
265
+ cursor: "not-allowed",
266
+ _icon: { color: "icon/disabled" }
267
+ },
263
268
  _focusVisible: { outlineOffset: "-3px" }
264
269
  }
265
270
  },
@@ -1 +1 @@
1
- {"version":3,"file":"Select.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Select.recipe.ts"],"sourcesContent":["import { selectAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { base, variants } from '../common/ComboboxAndSelect.common';\nimport { rem } from '../themeUtils';\n\nexport const selectSlotRecipe = defineSlotRecipe({\n className: 'select',\n slots: [\n ...selectAnatomy.keys(),\n 'searchInputGroup',\n 'searchInput',\n 'searchClear',\n 'actionContainer',\n 'action',\n 'checkbox',\n 'checkmark',\n 'itemList',\n 'itemContent',\n 'itemBadge',\n 'itemIcon',\n 'valueIcon',\n 'avatar',\n 'itemLabel',\n 'itemHelperText',\n 'itemLoading',\n 'itemLoadingLabel',\n 'emptyState',\n ],\n base: {\n trigger: {\n display: 'flex',\n alignItems: 'center',\n borderWidth: '1',\n borderColor: 'border/strong',\n background: 'bg.muted',\n color: 'input/text/inputValue',\n gap: '8',\n justifyContent: 'space-between',\n // 15px + the 1px border = the spec's 16px, measured from the trigger's outer edge.\n // The indicator group below is offset the same way on the end side.\n paddingInlineStart: rem(15),\n paddingInlineEnd: '48',\n paddingBlock: rem(11),\n borderRadius: '4',\n cursor: 'pointer',\n userSelect: 'none',\n textAlign: 'start',\n focusVisibleRing: 'inside',\n width: '100%',\n _open: {\n borderColor: 'border/focus',\n },\n _placeholderShown: {\n color: 'text/secondary',\n },\n _disabled: {\n color: 'text/disabled',\n background: 'background/disabled',\n cursor: 'not-allowed',\n },\n _invalid: {\n borderColor: 'border/error',\n },\n _readOnly: {\n background: 'background/disabled',\n cursor: 'default',\n },\n },\n indicatorGroup: {\n display: 'flex',\n alignItems: 'center',\n gap: '8',\n position: 'absolute',\n insetEnd: 0,\n top: 0,\n bottom: 0,\n paddingInlineStart: '16',\n paddingInlineEnd: rem(15),\n pointerEvents: 'none',\n },\n indicator: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'icon/secondary',\n _disabled: {\n color: 'icon/disabled',\n },\n _readOnly: {\n color: 'icon/on-disabled',\n },\n },\n ...base,\n content: {\n ...base.content,\n overflow: 'hidden',\n display: 'flex',\n flexDirection: 'column',\n // Zag's popper sets `--reference-width` (the trigger width) on the positioner, so the\n // menu is never narrower than the Select input — but can grow wider for long items.\n minWidth: 'var(--reference-width)',\n maxWidth: rem(800),\n focusVisibleRing: 'none',\n },\n item: {\n ...base.item,\n _active: {\n background: 'background/active',\n },\n _selected: {\n background: 'background/selected',\n _highlighted: {\n background: 'background/selected-hover',\n },\n },\n _disabled: {\n cursor: 'not-allowed',\n color: 'text/disabled',\n _highlighted: {\n background: 'transparent',\n },\n },\n },\n control: {\n position: 'relative',\n width: '100%',\n },\n valueText: {\n display: 'flex',\n alignItems: 'center',\n gap: '8',\n flex: '1 1 0',\n minWidth: 0,\n overflow: 'hidden',\n },\n itemList: {\n flex: '1 1 auto',\n minHeight: 0,\n overflowY: 'auto',\n paddingBlock: '8',\n },\n itemContent: {\n display: 'flex',\n flexDirection: 'column',\n flex: '1 0 0',\n minWidth: 0,\n },\n itemBadge: {\n display: 'inline-flex',\n flexShrink: 0,\n },\n itemLoading: {\n flexShrink: 0,\n },\n itemLoadingLabel: {\n color: 'text/secondary',\n flex: '1 0 0',\n minWidth: 0,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n },\n emptyState: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n paddingInline: '16',\n },\n itemIcon: {\n color: 'icon/secondary',\n '[data-state=\"checked\"] &': {\n color: 'icon/interactive',\n },\n },\n // The selected value's icon in the trigger. Mirrors the `indicator` (chevron) state colors —\n // the trigger exposes `data-disabled` / `data-readonly`, so the icon reacts via ancestors.\n valueIcon: {\n color: 'icon/secondary',\n '[data-disabled] &': { color: 'icon/disabled' },\n '[data-readonly] &': { color: 'icon/on-disabled' },\n },\n avatar: {\n flexShrink: 0,\n '[data-disabled] &': { opacity: 0.5 },\n },\n itemLabel: {\n color: 'text/body',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n maxWidth: '100%',\n minWidth: 0,\n '[data-disabled] &': {\n color: 'text/disabled',\n },\n },\n itemHelperText: {\n color: 'text/helper',\n textStyle: 'body/sm/regular',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n maxWidth: '100%',\n minWidth: 0,\n '[data-disabled] &': {\n color: 'text/disabled',\n },\n },\n checkbox: {\n position: 'relative',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n borderWidth: '1',\n borderColor: 'border/regular',\n borderRadius: '4',\n background: 'background/primary',\n boxShadow: 'inset/field',\n color: 'icon/on-color',\n '[data-state=checked] &': {\n background: 'input/checkbox/selection',\n borderColor: 'input/checkbox/selection',\n boxShadow: 'none',\n },\n '[data-disabled] &': {\n background: 'background/disabled',\n borderColor: 'border/disabled',\n },\n },\n checkmark: {\n opacity: 0,\n color: 'icon/on-color',\n '[data-state=checked] &': {\n opacity: 1,\n },\n },\n searchInputGroup: {\n borderBottom: '1px solid',\n borderColor: 'border/minimal',\n background: 'background/primary',\n display: 'flex',\n alignItems: 'center',\n gap: '12',\n paddingInlineStart: '16',\n paddingInlineEnd: '12',\n overflow: 'hidden',\n flexShrink: 0,\n _hover: {\n background: 'background/secondary',\n },\n _focusWithin: {\n background: 'background/primary',\n },\n },\n searchInput: {\n flex: '1 0 0',\n minWidth: 0,\n border: 'none',\n outline: 'none',\n background: 'transparent',\n color: 'input/text/inputValue',\n paddingInline: 0,\n paddingBlock: 0,\n _placeholder: {\n color: 'input/text/placeholder',\n },\n },\n searchClear: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: '4',\n color: 'icon/primary',\n cursor: 'pointer',\n flexShrink: 0,\n _hover: {\n background: 'background/hover',\n },\n },\n actionContainer: {\n borderTop: '1px solid',\n borderColor: 'border/minimal',\n paddingBlock: '8',\n flexShrink: 0,\n },\n action: {\n display: 'flex',\n alignItems: 'center',\n gap: '12',\n paddingInlineEnd: '24',\n paddingInlineStart: '16',\n color: 'text/primary',\n width: '100%',\n cursor: 'pointer',\n textAlign: 'start',\n _icon: {\n color: 'icon/secondary',\n },\n _hover: {\n background: 'button/secondary/bg-hover',\n _active: {\n background: 'button/secondary/bg-active',\n },\n },\n _active: {\n background: 'button/secondary/bg-active',\n },\n _focusVisible: {\n outlineOffset: '-3px',\n },\n },\n },\n\n variants: {\n hasStatusIcon: {\n true: {\n trigger: {\n paddingInlineEnd: '96',\n },\n },\n false: {},\n },\n size: {\n lg: {\n ...variants.size.lg,\n trigger: {\n '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n },\n checkbox: {\n width: '24',\n height: '24',\n },\n item: {\n ...variants.size.lg.item,\n '&:has([data-slot=\"avatar\"])': {\n paddingInlineStart: '12',\n paddingInlineEnd: '24',\n paddingBlock: '8',\n gap: '8',\n },\n '&:has([data-slot=\"checkbox\"])': {\n minHeight: '48',\n paddingInlineEnd: '24',\n paddingBlock: '12',\n gap: '12',\n },\n },\n itemList: {\n // 5.5 × 48px item + 16px paddingBlock\n maxHeight: rem(280),\n },\n itemLabel: {\n textStyle: 'body/lg/regular',\n lineHeight: 'normal',\n },\n itemLoadingLabel: {\n textStyle: 'body/lg/regular',\n },\n emptyState: {\n paddingBlock: '12',\n },\n action: {\n minHeight: '48',\n paddingBlock: '12',\n textStyle: 'body/lg/regular',\n lineHeight: 'normal',\n },\n searchInputGroup: {\n height: rem(56),\n paddingBlock: '16',\n },\n searchInput: {\n textStyle: 'body/lg/regular',\n },\n searchClear: {\n padding: '8',\n },\n },\n md: {\n ...variants.size.md,\n checkbox: {\n width: '20',\n height: '20',\n },\n item: {\n ...variants.size.md.item,\n '&:has([data-slot=\"avatar\"])': {\n paddingInlineStart: '12',\n paddingInlineEnd: '24',\n paddingBlock: '4',\n gap: '8',\n },\n '&:has([data-slot=\"checkbox\"])': {\n minHeight: '40',\n paddingInlineEnd: '24',\n paddingBlock: '8',\n gap: '12',\n },\n },\n itemList: {\n // 5.5 × 40px item (checkbox/avatar row) + 16px paddingBlock\n maxHeight: rem(236),\n },\n itemLabel: {\n textStyle: 'body/md/regular',\n lineHeight: 'normal',\n },\n itemLoadingLabel: {\n textStyle: 'body/md/regular',\n },\n emptyState: {\n paddingBlock: '8',\n },\n action: {\n minHeight: '40',\n paddingBlock: '8',\n textStyle: 'body/md/regular',\n lineHeight: 'normal',\n },\n trigger: {\n textStyle: 'body/md/regular',\n paddingBlock: rem(9),\n '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n },\n searchInputGroup: {\n height: '48',\n paddingBlock: '12',\n },\n searchInput: {\n textStyle: 'body/md/regular',\n },\n searchClear: {\n padding: '4',\n },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n"],"mappings":"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"}
1
+ {"version":3,"file":"Select.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Select.recipe.ts"],"sourcesContent":["import { selectAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { base, variants } from '../common/ComboboxAndSelect.common';\nimport { rem } from '../themeUtils';\n\nexport const selectSlotRecipe = defineSlotRecipe({\n className: 'select',\n slots: [\n ...selectAnatomy.keys(),\n 'searchInputGroup',\n 'searchInput',\n 'searchClear',\n 'actionContainer',\n 'action',\n 'checkbox',\n 'checkmark',\n 'itemList',\n 'itemContent',\n 'itemBadge',\n 'itemIcon',\n 'valueIcon',\n 'avatar',\n 'itemLabel',\n 'itemHelperText',\n 'itemLoading',\n 'itemLoadingLabel',\n 'emptyState',\n ],\n base: {\n trigger: {\n display: 'flex',\n alignItems: 'center',\n borderWidth: '1',\n borderColor: 'border/strong',\n background: 'bg.muted',\n color: 'input/text/inputValue',\n gap: '8',\n justifyContent: 'space-between',\n // 15px + the 1px border = the spec's 16px, measured from the trigger's outer edge.\n // The indicator group below is offset the same way on the end side.\n paddingInlineStart: rem(15),\n paddingInlineEnd: '48',\n paddingBlock: rem(11),\n borderRadius: '4',\n cursor: 'pointer',\n userSelect: 'none',\n textAlign: 'start',\n focusVisibleRing: 'inside',\n width: '100%',\n _open: {\n borderColor: 'border/focus',\n },\n _placeholderShown: {\n color: 'text/secondary',\n },\n _disabled: {\n color: 'text/disabled',\n background: 'background/disabled',\n cursor: 'not-allowed',\n },\n _invalid: {\n borderColor: 'border/error',\n },\n _readOnly: {\n background: 'background/disabled',\n cursor: 'default',\n },\n },\n indicatorGroup: {\n display: 'flex',\n alignItems: 'center',\n gap: '8',\n position: 'absolute',\n insetEnd: 0,\n top: 0,\n bottom: 0,\n paddingInlineStart: '16',\n paddingInlineEnd: rem(15),\n pointerEvents: 'none',\n },\n indicator: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: 'icon/secondary',\n _disabled: {\n color: 'icon/disabled',\n },\n _readOnly: {\n color: 'icon/on-disabled',\n },\n },\n ...base,\n content: {\n ...base.content,\n overflow: 'hidden',\n display: 'flex',\n flexDirection: 'column',\n // Zag's popper sets `--reference-width` (the trigger width) on the positioner, so the\n // menu is never narrower than the Select input — but can grow wider for long items.\n minWidth: 'var(--reference-width)',\n maxWidth: rem(800),\n focusVisibleRing: 'none',\n },\n item: {\n ...base.item,\n _active: {\n background: 'background/active',\n },\n _selected: {\n background: 'background/selected',\n _highlighted: {\n background: 'background/selected-hover',\n },\n },\n _disabled: {\n cursor: 'not-allowed',\n color: 'text/disabled',\n _highlighted: {\n background: 'transparent',\n },\n },\n },\n control: {\n position: 'relative',\n width: '100%',\n },\n valueText: {\n display: 'flex',\n alignItems: 'center',\n gap: '8',\n flex: '1 1 0',\n minWidth: 0,\n overflow: 'hidden',\n },\n itemList: {\n flex: '1 1 auto',\n minHeight: 0,\n overflowY: 'auto',\n paddingBlock: '8',\n },\n itemContent: {\n display: 'flex',\n flexDirection: 'column',\n flex: '1 0 0',\n minWidth: 0,\n },\n itemBadge: {\n display: 'inline-flex',\n flexShrink: 0,\n },\n itemLoading: {\n flexShrink: 0,\n },\n itemLoadingLabel: {\n color: 'text/secondary',\n flex: '1 0 0',\n minWidth: 0,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n },\n emptyState: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n paddingInline: '16',\n },\n itemIcon: {\n color: 'icon/secondary',\n '[data-state=\"checked\"] &': {\n color: 'icon/interactive',\n },\n },\n // The selected value's icon in the trigger. Mirrors the `indicator` (chevron) state colors —\n // the trigger exposes `data-disabled` / `data-readonly`, so the icon reacts via ancestors.\n valueIcon: {\n color: 'icon/secondary',\n '[data-disabled] &': { color: 'icon/disabled' },\n '[data-readonly] &': { color: 'icon/on-disabled' },\n },\n avatar: {\n flexShrink: 0,\n '[data-disabled] &': { opacity: 0.5 },\n },\n itemLabel: {\n color: 'text/body',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n maxWidth: '100%',\n minWidth: 0,\n '[data-disabled] &': {\n color: 'text/disabled',\n },\n },\n itemHelperText: {\n color: 'text/helper',\n textStyle: 'body/sm/regular',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n maxWidth: '100%',\n minWidth: 0,\n '[data-disabled] &': {\n color: 'text/disabled',\n },\n },\n checkbox: {\n position: 'relative',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n borderWidth: '1',\n borderColor: 'border/regular',\n borderRadius: '4',\n background: 'background/primary',\n boxShadow: 'inset/field',\n color: 'icon/on-color',\n '[data-state=checked] &': {\n background: 'input/checkbox/selection',\n borderColor: 'input/checkbox/selection',\n boxShadow: 'none',\n },\n '[data-disabled] &': {\n background: 'background/disabled',\n borderColor: 'border/disabled',\n },\n },\n checkmark: {\n opacity: 0,\n color: 'icon/on-color',\n '[data-state=checked] &': {\n opacity: 1,\n },\n },\n searchInputGroup: {\n borderBottom: '1px solid',\n borderColor: 'border/minimal',\n background: 'background/primary',\n display: 'flex',\n alignItems: 'center',\n gap: '12',\n paddingInlineStart: '16',\n paddingInlineEnd: '12',\n overflow: 'hidden',\n flexShrink: 0,\n _hover: {\n background: 'background/secondary',\n },\n _focusWithin: {\n background: 'background/primary',\n },\n },\n searchInput: {\n flex: '1 0 0',\n minWidth: 0,\n border: 'none',\n outline: 'none',\n background: 'transparent',\n color: 'input/text/inputValue',\n paddingInline: 0,\n paddingBlock: 0,\n _placeholder: {\n color: 'input/text/placeholder',\n },\n },\n searchClear: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: '4',\n color: 'icon/primary',\n cursor: 'pointer',\n flexShrink: 0,\n _hover: {\n background: 'background/hover',\n },\n },\n actionContainer: {\n borderTop: '1px solid',\n borderColor: 'border/minimal',\n paddingBlock: '8',\n flexShrink: 0,\n },\n action: {\n display: 'flex',\n alignItems: 'center',\n gap: '12',\n paddingInlineEnd: '24',\n paddingInlineStart: '16',\n color: 'text/primary',\n width: '100%',\n cursor: 'pointer',\n textAlign: 'start',\n _icon: {\n color: 'icon/secondary',\n },\n _hover: {\n background: 'button/secondary/bg-hover',\n _active: {\n background: 'button/secondary/bg-active',\n },\n },\n _active: {\n background: 'button/secondary/bg-active',\n },\n _disabled: {\n color: 'text/disabled',\n cursor: 'not-allowed',\n _icon: {\n color: 'icon/disabled',\n },\n },\n _focusVisible: {\n outlineOffset: '-3px',\n },\n },\n },\n\n variants: {\n hasStatusIcon: {\n true: {\n trigger: {\n paddingInlineEnd: '96',\n },\n },\n false: {},\n },\n size: {\n lg: {\n ...variants.size.lg,\n trigger: {\n '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n },\n checkbox: {\n width: '24',\n height: '24',\n },\n item: {\n ...variants.size.lg.item,\n '&:has([data-slot=\"avatar\"])': {\n paddingInlineStart: '12',\n paddingInlineEnd: '24',\n paddingBlock: '8',\n gap: '8',\n },\n '&:has([data-slot=\"checkbox\"])': {\n minHeight: '48',\n paddingInlineEnd: '24',\n paddingBlock: '12',\n gap: '12',\n },\n },\n itemList: {\n // 5.5 × 48px item + 16px paddingBlock\n maxHeight: rem(280),\n },\n itemLabel: {\n textStyle: 'body/lg/regular',\n lineHeight: 'normal',\n },\n itemLoadingLabel: {\n textStyle: 'body/lg/regular',\n },\n emptyState: {\n paddingBlock: '12',\n },\n action: {\n minHeight: '48',\n paddingBlock: '12',\n textStyle: 'body/lg/regular',\n lineHeight: 'normal',\n },\n searchInputGroup: {\n height: rem(56),\n paddingBlock: '16',\n },\n searchInput: {\n textStyle: 'body/lg/regular',\n },\n searchClear: {\n padding: '8',\n },\n },\n md: {\n ...variants.size.md,\n checkbox: {\n width: '20',\n height: '20',\n },\n item: {\n ...variants.size.md.item,\n '&:has([data-slot=\"avatar\"])': {\n paddingInlineStart: '12',\n paddingInlineEnd: '24',\n paddingBlock: '4',\n gap: '8',\n },\n '&:has([data-slot=\"checkbox\"])': {\n minHeight: '40',\n paddingInlineEnd: '24',\n paddingBlock: '8',\n gap: '12',\n },\n },\n itemList: {\n // 5.5 × 40px item (checkbox/avatar row) + 16px paddingBlock\n maxHeight: rem(236),\n },\n itemLabel: {\n textStyle: 'body/md/regular',\n lineHeight: 'normal',\n },\n itemLoadingLabel: {\n textStyle: 'body/md/regular',\n },\n emptyState: {\n paddingBlock: '8',\n },\n action: {\n minHeight: '40',\n paddingBlock: '8',\n textStyle: 'body/md/regular',\n lineHeight: 'normal',\n },\n trigger: {\n textStyle: 'body/md/regular',\n paddingBlock: rem(9),\n '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n },\n searchInputGroup: {\n height: '48',\n paddingBlock: '12',\n },\n searchInput: {\n textStyle: 'body/md/regular',\n },\n searchClear: {\n padding: '4',\n },\n },\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n});\n"],"mappings":"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"}
@@ -941,7 +941,15 @@ declare const slotRecipes: {
941
941
  };
942
942
  };
943
943
  }>;
944
- expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "header" | "title" | "icon" | "collapsible" | "root" | "suffix" | "description" | "subtitle", {
944
+ expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "collapsible" | "root" | "suffix" | "description" | "subtitle", {
945
+ noPadding: {
946
+ false: {};
947
+ true: {
948
+ body: {
949
+ padding: number;
950
+ };
951
+ };
952
+ };
945
953
  size: {
946
954
  md: {
947
955
  header: {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit-v2",
3
3
  "private": false,
4
- "version": "0.3.431",
4
+ "version": "0.3.433",
5
5
  "description": "Bitrise Design System Components built with Chakra UI V3",
6
6
  "keywords": [
7
7
  "react",