@bitrise/bitkit-v2 0.3.374 → 0.3.376
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.
- package/AGENTS.md +3 -3
- package/dist/components/BitkitExpandableCard/BitkitExpandableCard.d.ts +10 -6
- package/dist/components/BitkitExpandableCard/BitkitExpandableCard.js +29 -11
- package/dist/components/BitkitExpandableCard/BitkitExpandableCard.js.map +1 -1
- package/dist/theme/slot-recipes/ExpandableCard.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/ExpandableCard.recipe.js +16 -3
- package/dist/theme/slot-recipes/ExpandableCard.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +1 -1
- package/package.json +2 -3
package/AGENTS.md
CHANGED
|
@@ -57,9 +57,9 @@ import { BitkitProvider, BitkitButton } from '@bitrise/bitkit-v2';
|
|
|
57
57
|
}
|
|
58
58
|
```
|
|
59
59
|
Once configured, agents can call:
|
|
60
|
-
- `list
|
|
61
|
-
- `
|
|
62
|
-
- `
|
|
60
|
+
- `docs-list` — list all components
|
|
61
|
+
- `docs-show` — props and examples for a specific component
|
|
62
|
+
- `docs-show-story` — extra detail for a story variant
|
|
63
63
|
- **Hosted Storybook (browser)**: <https://storybook.services.bitrise.dev/projects/bitkit-v2/production/> — every component, props table, examples, and theme reference (colors, shadows, text styles, spacing, radii, icons). Google auth required.
|
|
64
64
|
- **Never hallucinate component properties.** Verify every prop against the docs before using it. A prop that "sounds right" (e.g. `shadow`, `rightIcon`) often does not exist.
|
|
65
65
|
- For tokens (colors, shadows, text styles, etc.), query the Storybook docs pages: `Docs/Colors - Components`, `Docs/Colors - System`, `Docs/Colors - Base`, `Docs/Shadows (Box Shadows)`, `Docs/Spacing & Sizes`, `Docs/Radii (Border Radius)`, `Docs/Text Styles`, `Docs/Typography`, `Docs/Icons`.
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { BoxProps } from '@chakra-ui/react/box';
|
|
1
2
|
import { CollapsibleRootProps } from '@chakra-ui/react/collapsible';
|
|
2
3
|
import { ReactElement, ReactNode } from 'react';
|
|
3
4
|
import { BitkitIconComponent } from '../../icons';
|
|
@@ -12,19 +13,22 @@ type ControlledProps = {
|
|
|
12
13
|
expanded: boolean;
|
|
13
14
|
onChange: (expanded: boolean) => void;
|
|
14
15
|
};
|
|
15
|
-
|
|
16
|
+
/**
|
|
17
|
+
* Zag/Ark machine props. They drive the inner `Collapsible.Root` and mean nothing on the card
|
|
18
|
+
* element, so they're forwarded by name rather than left in `...rest` — which belongs to the
|
|
19
|
+
* rendered root (`Card.Root`) so consumer style props reach the card itself.
|
|
20
|
+
*/
|
|
21
|
+
type CollapsibleMachineProps = Pick<CollapsibleRootProps, 'collapsedHeight' | 'collapsedWidth' | 'disabled' | 'hideMode' | 'ids' | 'lazyMount' | 'onExitComplete' | 'unmountOnExit'>;
|
|
22
|
+
export type BitkitExpandableCardProps = Omit<BoxProps, 'asChild' | 'children' | 'onChange' | 'title'> & CollapsibleMachineProps & {
|
|
16
23
|
children: ReactNode;
|
|
17
24
|
elevation?: boolean;
|
|
18
25
|
footer?: ReactNode;
|
|
19
26
|
icon?: BitkitIconComponent | ReactElement<BitkitAvatarProps>;
|
|
20
27
|
iconColor?: string;
|
|
21
|
-
size
|
|
28
|
+
size?: 'md' | 'lg';
|
|
22
29
|
subtitle?: ReactNode;
|
|
23
30
|
suffix?: ReactNode;
|
|
24
31
|
title: ReactNode;
|
|
25
32
|
} & (UncontrolledProps | ControlledProps);
|
|
26
|
-
declare const BitkitExpandableCard:
|
|
27
|
-
(props: BitkitExpandableCardProps): import("react").JSX.Element;
|
|
28
|
-
displayName: string;
|
|
29
|
-
};
|
|
33
|
+
declare const BitkitExpandableCard: import('react').ForwardRefExoticComponent<BitkitExpandableCardProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
30
34
|
export default BitkitExpandableCard;
|
|
@@ -1,31 +1,44 @@
|
|
|
1
1
|
import AssetSelectChevron from "../../utilities/AssetSelectChevron.js";
|
|
2
|
+
import BitkitBadge from "../BitkitBadge/BitkitBadge.js";
|
|
2
3
|
import { Box } from "@chakra-ui/react/box";
|
|
3
4
|
import { useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
4
|
-
import { cloneElement, isValidElement } from "react";
|
|
5
|
+
import { cloneElement, forwardRef, isValidElement } from "react";
|
|
5
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
7
|
import { Text } from "@chakra-ui/react/text";
|
|
7
8
|
import { Collapsible } from "@chakra-ui/react/collapsible";
|
|
8
9
|
import { Card } from "@chakra-ui/react/card";
|
|
9
10
|
//#region lib/components/BitkitExpandableCard/BitkitExpandableCard.tsx
|
|
10
|
-
var BitkitExpandableCard = (props) => {
|
|
11
|
-
const { children, defaultExpanded, elevation = true, expanded, footer, icon, iconColor, onChange, size = "lg", subtitle, suffix, title, ...rest } = props;
|
|
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;
|
|
12
13
|
const styles = useSlotRecipe({ key: "expandableCard" })({ size });
|
|
13
14
|
const handleOpenChange = onChange ? (details) => onChange(details.open) : void 0;
|
|
15
|
+
const iconSize = size === "md" ? "16" : "24";
|
|
16
|
+
let renderedSuffix = suffix;
|
|
17
|
+
if (isValidElement(suffix) && suffix.type === BitkitBadge) renderedSuffix = cloneElement(suffix, { size: size === "md" ? "xs" : "sm" });
|
|
14
18
|
let renderedIcon = null;
|
|
15
19
|
if (isValidElement(icon)) renderedIcon = cloneElement(icon, { size: "24" });
|
|
16
20
|
else if (icon) renderedIcon = /* @__PURE__ */ jsx(icon, {
|
|
17
21
|
color: iconColor,
|
|
18
|
-
size:
|
|
22
|
+
size: iconSize
|
|
19
23
|
});
|
|
20
24
|
return /* @__PURE__ */ jsx(Card.Root, {
|
|
25
|
+
ref,
|
|
21
26
|
elevation,
|
|
22
27
|
paddingSize: "sm",
|
|
23
|
-
css: styles.root,
|
|
28
|
+
css: [styles.root, css],
|
|
29
|
+
...rest,
|
|
24
30
|
children: /* @__PURE__ */ jsxs(Collapsible.Root, {
|
|
31
|
+
collapsedHeight,
|
|
32
|
+
collapsedWidth,
|
|
25
33
|
defaultOpen: defaultExpanded,
|
|
26
|
-
|
|
34
|
+
disabled,
|
|
35
|
+
hideMode,
|
|
36
|
+
ids,
|
|
37
|
+
lazyMount,
|
|
38
|
+
onExitComplete,
|
|
27
39
|
onOpenChange: handleOpenChange,
|
|
28
|
-
|
|
40
|
+
open: expanded,
|
|
41
|
+
unmountOnExit,
|
|
29
42
|
children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
|
|
30
43
|
css: styles.header,
|
|
31
44
|
children: [/* @__PURE__ */ jsxs(Box, {
|
|
@@ -40,6 +53,7 @@ var BitkitExpandableCard = (props) => {
|
|
|
40
53
|
alignItems: "flex-start",
|
|
41
54
|
flexDirection: "column",
|
|
42
55
|
children: [title, !!subtitle && /* @__PURE__ */ jsx(Text, {
|
|
56
|
+
as: "span",
|
|
43
57
|
css: styles.subtitle,
|
|
44
58
|
children: subtitle
|
|
45
59
|
})]
|
|
@@ -47,9 +61,10 @@ var BitkitExpandableCard = (props) => {
|
|
|
47
61
|
}), /* @__PURE__ */ jsxs(Box, {
|
|
48
62
|
display: "flex",
|
|
49
63
|
alignItems: "center",
|
|
50
|
-
children: [!!
|
|
64
|
+
children: [!!renderedSuffix && /* @__PURE__ */ jsx(Text, {
|
|
65
|
+
as: "span",
|
|
51
66
|
css: styles.suffix,
|
|
52
|
-
children:
|
|
67
|
+
children: renderedSuffix
|
|
53
68
|
}), /* @__PURE__ */ jsx(Collapsible.Indicator, {
|
|
54
69
|
asChild: true,
|
|
55
70
|
children: /* @__PURE__ */ jsx(AssetSelectChevron, {})
|
|
@@ -57,11 +72,14 @@ var BitkitExpandableCard = (props) => {
|
|
|
57
72
|
})]
|
|
58
73
|
}), /* @__PURE__ */ jsxs(Collapsible.Content, {
|
|
59
74
|
css: styles.collapsible,
|
|
60
|
-
children: [/* @__PURE__ */ jsx(Card.Body, { children }), !!footer && /* @__PURE__ */ jsx(Card.Footer, {
|
|
75
|
+
children: [/* @__PURE__ */ jsx(Card.Body, { children }), !!footer && /* @__PURE__ */ jsx(Card.Footer, {
|
|
76
|
+
css: styles.footer,
|
|
77
|
+
children: footer
|
|
78
|
+
})]
|
|
61
79
|
})]
|
|
62
80
|
})
|
|
63
81
|
});
|
|
64
|
-
};
|
|
82
|
+
});
|
|
65
83
|
BitkitExpandableCard.displayName = "BitkitExpandableCard";
|
|
66
84
|
//#endregion
|
|
67
85
|
export { BitkitExpandableCard as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitExpandableCard.js","names":[],"sources":["../../../lib/components/BitkitExpandableCard/BitkitExpandableCard.tsx"],"sourcesContent":["import { Box } 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, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport { type BitkitAvatarProps } from '../BitkitAvatar/BitkitAvatar';\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\
|
|
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,4 +1,4 @@
|
|
|
1
|
-
declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"header" | "title" | "icon" | "suffix" | "collapsible" | "root" | "description" | "subtitle", {
|
|
1
|
+
declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "header" | "title" | "icon" | "suffix" | "collapsible" | "root" | "description" | "subtitle", {
|
|
2
2
|
size: {
|
|
3
3
|
md: {
|
|
4
4
|
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"
|
|
7
|
+
...cardAnatomy.omit("body").keys(),
|
|
8
8
|
"collapsible",
|
|
9
9
|
"icon",
|
|
10
10
|
"subtitle",
|
|
@@ -25,7 +25,11 @@ var expandableCardSlotRecipe = defineSlotRecipe({
|
|
|
25
25
|
"&:active": { backgroundColor: "background/active" },
|
|
26
26
|
"&:hover:not(:active)": { backgroundColor: "background/hover" },
|
|
27
27
|
_hover: { color: "text/primary" },
|
|
28
|
-
_open: {
|
|
28
|
+
_open: {
|
|
29
|
+
backgroundColor: "background/secondary",
|
|
30
|
+
borderBottom: "1px solid",
|
|
31
|
+
borderBottomColor: "border/minimal"
|
|
32
|
+
}
|
|
29
33
|
},
|
|
30
34
|
collapsible: {
|
|
31
35
|
overflow: "hidden",
|
|
@@ -38,7 +42,16 @@ var expandableCardSlotRecipe = defineSlotRecipe({
|
|
|
38
42
|
animationDuration: "moderate"
|
|
39
43
|
}
|
|
40
44
|
},
|
|
41
|
-
|
|
45
|
+
footer: {
|
|
46
|
+
alignItems: "center",
|
|
47
|
+
display: "flex",
|
|
48
|
+
minHeight: "40"
|
|
49
|
+
},
|
|
50
|
+
icon: {
|
|
51
|
+
alignItems: "center",
|
|
52
|
+
color: "icon/secondary",
|
|
53
|
+
display: "flex"
|
|
54
|
+
},
|
|
42
55
|
subtitle: { color: "text/secondary" },
|
|
43
56
|
suffix: {
|
|
44
57
|
color: "text/secondary",
|
|
@@ -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'
|
|
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"}
|
|
@@ -941,7 +941,7 @@ declare const slotRecipes: {
|
|
|
941
941
|
};
|
|
942
942
|
};
|
|
943
943
|
}>;
|
|
944
|
-
expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"header" | "title" | "icon" | "suffix" | "collapsible" | "root" | "description" | "subtitle", {
|
|
944
|
+
expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "header" | "title" | "icon" | "suffix" | "collapsible" | "root" | "description" | "subtitle", {
|
|
945
945
|
size: {
|
|
946
946
|
md: {
|
|
947
947
|
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.
|
|
4
|
+
"version": "0.3.376",
|
|
5
5
|
"description": "Bitrise Design System Components built with Chakra UI V3",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"react",
|
|
@@ -77,8 +77,7 @@
|
|
|
77
77
|
"@figma-export/transform-svg-with-svgo": "^6.4.1",
|
|
78
78
|
"@google-cloud/storage": "^8.0.1",
|
|
79
79
|
"@storybook/addon-docs": "10.6.0",
|
|
80
|
-
"@storybook/addon-mcp": "
|
|
81
|
-
"@storybook/mcp": "^0.8.0",
|
|
80
|
+
"@storybook/addon-mcp": "10.6.0",
|
|
82
81
|
"@storybook/react-vite": "10.6.0",
|
|
83
82
|
"@svgr/plugin-jsx": "^8.1.0",
|
|
84
83
|
"@types/node": "^26.5.0",
|