@bitrise/bitkit-v2 0.3.432 → 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.
- package/dist/components/BitkitExpandableCard/BitkitExpandableCard.d.ts +1 -0
- package/dist/components/BitkitExpandableCard/BitkitExpandableCard.js +13 -6
- package/dist/components/BitkitExpandableCard/BitkitExpandableCard.js.map +1 -1
- package/dist/theme/slot-recipes/ExpandableCard.recipe.d.ts +9 -1
- package/dist/theme/slot-recipes/ExpandableCard.recipe.js +34 -18
- package/dist/theme/slot-recipes/ExpandableCard.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +9 -1
- package/package.json +1 -1
|
@@ -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" })({
|
|
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
|
-
|
|
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, {
|
|
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
|
|
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"}
|
|
@@ -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.
|
|
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: "
|
|
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: "
|
|
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: {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
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
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
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
|
-
|
|
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: {
|
|
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.
|
|
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"}
|
|
@@ -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: {
|