@bitrise/bitkit-v2 0.3.233 → 0.3.234
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/BitkitCard/BitkitCard.d.ts +6 -2
- package/dist/components/BitkitCard/BitkitCard.js +4 -5
- package/dist/components/BitkitCard/BitkitCard.js.map +1 -1
- package/dist/components/BitkitExpandableCard/BitkitExpandableCard.d.ts +1 -0
- package/dist/components/BitkitExpandableCard/BitkitExpandableCard.js +7 -4
- package/dist/components/BitkitExpandableCard/BitkitExpandableCard.js.map +1 -1
- package/dist/theme/slot-recipes/Card.recipe.d.ts +12 -0
- package/dist/theme/slot-recipes/Card.recipe.js +25 -9
- package/dist/theme/slot-recipes/Card.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/ExpandableCard.recipe.js +7 -0
- package/dist/theme/slot-recipes/ExpandableCard.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +12 -0
- package/package.json +1 -1
|
@@ -1,3 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { CardRootProps } from '@chakra-ui/react/card';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
export interface BitkitCardProps extends CardRootProps {
|
|
4
|
+
footer?: ReactNode;
|
|
5
|
+
}
|
|
6
|
+
declare const BitkitCard: import('react').ForwardRefExoticComponent<BitkitCardProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
3
7
|
export default BitkitCard;
|
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import { forwardRef } from "react";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Card } from "@chakra-ui/react/card";
|
|
4
4
|
//#region lib/components/BitkitCard/BitkitCard.tsx
|
|
5
5
|
var BitkitCard = forwardRef((props, ref) => {
|
|
6
|
-
const { children, ...rest } = props;
|
|
7
|
-
return /* @__PURE__ */
|
|
8
|
-
asChild: true,
|
|
6
|
+
const { children, footer, ...rest } = props;
|
|
7
|
+
return /* @__PURE__ */ jsxs(Card.Root, {
|
|
9
8
|
ref,
|
|
10
9
|
...rest,
|
|
11
|
-
children: /* @__PURE__ */ jsx(Card.Body, { children })
|
|
10
|
+
children: [/* @__PURE__ */ jsx(Card.Body, { children }), !!footer && /* @__PURE__ */ jsx(Card.Footer, { children: footer })]
|
|
12
11
|
});
|
|
13
12
|
});
|
|
14
13
|
BitkitCard.displayName = "BitkitCard";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitCard.js","names":[],"sources":["../../../lib/components/BitkitCard/BitkitCard.tsx"],"sourcesContent":["import { Card, type CardRootProps } from '@chakra-ui/react/card';\nimport { forwardRef } from 'react';\n\nconst BitkitCard = forwardRef<HTMLDivElement,
|
|
1
|
+
{"version":3,"file":"BitkitCard.js","names":[],"sources":["../../../lib/components/BitkitCard/BitkitCard.tsx"],"sourcesContent":["import { Card, type CardRootProps } from '@chakra-ui/react/card';\nimport { forwardRef, type ReactNode } from 'react';\n\nexport interface BitkitCardProps extends CardRootProps {\n footer?: ReactNode;\n}\n\nconst BitkitCard = forwardRef<HTMLDivElement, BitkitCardProps>((props, ref) => {\n const { children, footer, ...rest } = props;\n\n return (\n <Card.Root ref={ref} {...rest}>\n <Card.Body>{children}</Card.Body>\n {!!footer && <Card.Footer>{footer}</Card.Footer>}\n </Card.Root>\n );\n});\n\nBitkitCard.displayName = 'BitkitCard';\n\nexport default BitkitCard;\n"],"mappings":";;;;AAOA,IAAM,aAAa,YAA6C,OAAO,QAAQ;CAC7E,MAAM,EAAE,UAAU,QAAQ,GAAG,SAAS;CAEtC,OACE,qBAAC,KAAK,MAAN;EAAgB;EAAK,GAAI;YAAzB,CACE,oBAAC,KAAK,MAAN,EAAY,SAAoB,CAAA,GAC/B,CAAC,CAAC,UAAU,oBAAC,KAAK,QAAN,EAAA,UAAc,OAAoB,CAAA,CACtC;;AAEf,CAAC;AAED,WAAW,cAAc"}
|
|
@@ -14,6 +14,7 @@ type ControlledProps = {
|
|
|
14
14
|
};
|
|
15
15
|
export type BitkitExpandableCardProps = Omit<CollapsibleRootProps, 'defaultOpen' | 'onOpenChange' | 'open'> & {
|
|
16
16
|
children: ReactNode;
|
|
17
|
+
footer?: ReactNode;
|
|
17
18
|
icon?: BitkitIconComponent | ReactElement<BitkitAvatarProps>;
|
|
18
19
|
secdText?: ReactNode;
|
|
19
20
|
size: 'md' | 'lg';
|
|
@@ -8,7 +8,7 @@ import { Card } from "@chakra-ui/react/card";
|
|
|
8
8
|
import { Collapsible } from "@chakra-ui/react/collapsible";
|
|
9
9
|
//#region lib/components/BitkitExpandableCard/BitkitExpandableCard.tsx
|
|
10
10
|
var BitkitExpandableCard = (props) => {
|
|
11
|
-
const { children, defaultExpanded, expanded, icon, onChange, secdText, size = "lg", suffix, title, ...rest } = props;
|
|
11
|
+
const { children, defaultExpanded, expanded, footer, icon, onChange, secdText, size = "lg", suffix, title, ...rest } = props;
|
|
12
12
|
const styles = useSlotRecipe({ key: "expandableCard" })({ size });
|
|
13
13
|
const handleOpenChange = onChange ? (details) => onChange(details.open) : void 0;
|
|
14
14
|
let renderedIcon = null;
|
|
@@ -50,12 +50,15 @@ var BitkitExpandableCard = (props) => {
|
|
|
50
50
|
children: /* @__PURE__ */ jsx(AssetSelectChevron, {})
|
|
51
51
|
})]
|
|
52
52
|
})]
|
|
53
|
-
}), /* @__PURE__ */
|
|
53
|
+
}), /* @__PURE__ */ jsxs(Collapsible.Content, {
|
|
54
54
|
css: styles.collapsible,
|
|
55
|
-
children: /* @__PURE__ */ jsx(Box, {
|
|
55
|
+
children: [/* @__PURE__ */ jsx(Box, {
|
|
56
56
|
css: styles.body,
|
|
57
57
|
children
|
|
58
|
-
})
|
|
58
|
+
}), !!footer && /* @__PURE__ */ jsx(Box, {
|
|
59
|
+
css: styles.footer,
|
|
60
|
+
children: footer
|
|
61
|
+
})]
|
|
59
62
|
})]
|
|
60
63
|
})
|
|
61
64
|
});
|
|
@@ -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\nexport type BitkitExpandableCardProps = Omit<CollapsibleRootProps, 'defaultOpen' | 'onOpenChange' | 'open'> & {\n children: ReactNode;\n icon?: BitkitIconComponent | ReactElement<BitkitAvatarProps>;\n secdText?: ReactNode;\n size: 'md' | 'lg';\n suffix?: ReactNode;\n title: ReactNode;\n} & (UncontrolledProps | ControlledProps);\n\nconst BitkitExpandableCard = (props: BitkitExpandableCardProps) => {\n const {
|
|
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\nexport type BitkitExpandableCardProps = Omit<CollapsibleRootProps, 'defaultOpen' | 'onOpenChange' | 'open'> & {\n children: ReactNode;\n footer?: ReactNode;\n icon?: BitkitIconComponent | ReactElement<BitkitAvatarProps>;\n secdText?: ReactNode;\n size: 'md' | 'lg';\n suffix?: ReactNode;\n title: ReactNode;\n} & (UncontrolledProps | ControlledProps);\n\nconst BitkitExpandableCard = (props: BitkitExpandableCardProps) => {\n const {\n children,\n defaultExpanded,\n expanded,\n footer,\n icon,\n onChange,\n secdText,\n size = 'lg',\n suffix,\n title,\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 let renderedIcon: ReactNode = null;\n if (isValidElement<BitkitAvatarProps>(icon)) {\n renderedIcon = cloneElement(icon, { size: '24' });\n } else if (icon) {\n const Icon = icon;\n renderedIcon = <Icon size=\"24\" />;\n }\n\n return (\n <Card.Root css={styles.root}>\n <Collapsible.Root defaultOpen={defaultExpanded} open={expanded} onOpenChange={handleOpenChange} {...rest}>\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 {!!secdText && <Text css={styles.secdText}>{secdText}</Text>}\n </Box>\n </Box>\n <Box display=\"flex\" alignItems=\"center\">\n {!!suffix && <Text css={styles.suffix}>{suffix}</Text>}\n <Collapsible.Indicator asChild>\n <AssetSelectChevron />\n </Collapsible.Indicator>\n </Box>\n </Collapsible.Trigger>\n <Collapsible.Content css={styles.collapsible}>\n <Box css={styles.body}>{children}</Box>\n {!!footer && <Box css={styles.footer}>{footer}</Box>}\n </Collapsible.Content>\n </Collapsible.Root>\n </Card.Root>\n );\n};\n\nBitkitExpandableCard.displayName = 'BitkitExpandableCard';\n\nexport default BitkitExpandableCard;\n"],"mappings":";;;;;;;;;AAiCA,IAAM,wBAAwB,UAAqC;CACjE,MAAM,EACJ,UACA,iBACA,UACA,QACA,MACA,UACA,UACA,OAAO,MACP,QACA,OACA,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,iBAAiB,CACtC,EAAO,EAAE,KAAK,CAAC;CAE9B,MAAM,mBAAmB,YAAY,YAA+B,SAAS,QAAQ,IAAI,IAAI,KAAA;CAE7F,IAAI,eAA0B;CAC9B,IAAI,eAAkC,IAAI,GACxC,eAAe,aAAa,MAAM,EAAE,MAAM,KAAK,CAAC;MAC3C,IAAI,MAET,eAAe,oBAAC,MAAD,EAAM,MAAK,KAAM,CAAA;CAGlC,OACE,oBAAC,KAAK,MAAN;EAAW,KAAK,OAAO;YACrB,qBAAC,YAAY,MAAb;GAAkB,aAAa;GAAiB,MAAM;GAAU,cAAc;GAAkB,GAAI;aAApG,CACE,qBAAC,YAAY,SAAb;IAAqB,KAAK,OAAO;cAAjC,CACE,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAAS,KAAI;eAA5C,CACG,CAAC,CAAC,gBAAgB,oBAAC,KAAD;MAAK,KAAK,OAAO;gBAAO;KAAkB,CAAA,GAC7D,qBAAC,KAAD;MAAK,SAAQ;MAAO,YAAW;MAAa,eAAc;gBAA1D,CACG,OACA,CAAC,CAAC,YAAY,oBAAC,MAAD;OAAM,KAAK,OAAO;iBAAW;MAAe,CAAA,CACxD;OACF;QACL,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;eAA/B,CACG,CAAC,CAAC,UAAU,oBAAC,MAAD;MAAM,KAAK,OAAO;gBAAS;KAAa,CAAA,GACrD,oBAAC,YAAY,WAAb;MAAuB,SAAA;gBACrB,oBAAC,oBAAD,CAAqB,CAAA;KACA,CAAA,CACpB;MACc;OACrB,qBAAC,YAAY,SAAb;IAAqB,KAAK,OAAO;cAAjC,CACE,oBAAC,KAAD;KAAK,KAAK,OAAO;KAAO;IAAc,CAAA,GACrC,CAAC,CAAC,UAAU,oBAAC,KAAD;KAAK,KAAK,OAAO;eAAS;IAAY,CAAA,CAChC;KACL;;CACT,CAAA;AAEf;AAEA,qBAAqB,cAAc"}
|
|
@@ -17,17 +17,29 @@ declare const cardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"b
|
|
|
17
17
|
body: {
|
|
18
18
|
padding: "16";
|
|
19
19
|
};
|
|
20
|
+
footer: {
|
|
21
|
+
paddingBlock: "8";
|
|
22
|
+
paddingInline: "16";
|
|
23
|
+
};
|
|
20
24
|
};
|
|
21
25
|
md: {
|
|
22
26
|
body: {
|
|
23
27
|
paddingInline: "24";
|
|
24
28
|
paddingBlock: "16";
|
|
25
29
|
};
|
|
30
|
+
footer: {
|
|
31
|
+
paddingBlock: "8";
|
|
32
|
+
paddingInline: "24";
|
|
33
|
+
};
|
|
26
34
|
};
|
|
27
35
|
lg: {
|
|
28
36
|
body: {
|
|
29
37
|
padding: "24";
|
|
30
38
|
};
|
|
39
|
+
footer: {
|
|
40
|
+
paddingBlock: "12";
|
|
41
|
+
paddingInline: "24";
|
|
42
|
+
};
|
|
31
43
|
};
|
|
32
44
|
};
|
|
33
45
|
}>;
|
|
@@ -12,9 +12,7 @@ var cardSlotRecipe = defineSlotRecipe({
|
|
|
12
12
|
},
|
|
13
13
|
footer: {
|
|
14
14
|
borderBlockStart: "1px solid",
|
|
15
|
-
borderColor: "border/minimal"
|
|
16
|
-
paddingBlock: "8",
|
|
17
|
-
paddingInline: "24"
|
|
15
|
+
borderColor: "border/minimal"
|
|
18
16
|
}
|
|
19
17
|
},
|
|
20
18
|
variants: {
|
|
@@ -26,12 +24,30 @@ var cardSlotRecipe = defineSlotRecipe({
|
|
|
26
24
|
false: { root: { borderColor: "border/regular" } }
|
|
27
25
|
},
|
|
28
26
|
paddingSize: {
|
|
29
|
-
sm: {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
27
|
+
sm: {
|
|
28
|
+
body: { padding: "16" },
|
|
29
|
+
footer: {
|
|
30
|
+
paddingBlock: "8",
|
|
31
|
+
paddingInline: "16"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
md: {
|
|
35
|
+
body: {
|
|
36
|
+
paddingInline: "24",
|
|
37
|
+
paddingBlock: "16"
|
|
38
|
+
},
|
|
39
|
+
footer: {
|
|
40
|
+
paddingBlock: "8",
|
|
41
|
+
paddingInline: "24"
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
lg: {
|
|
45
|
+
body: { padding: "24" },
|
|
46
|
+
footer: {
|
|
47
|
+
paddingBlock: "12",
|
|
48
|
+
paddingInline: "24"
|
|
49
|
+
}
|
|
50
|
+
}
|
|
35
51
|
}
|
|
36
52
|
},
|
|
37
53
|
defaultVariants: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Card.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst cardSlotRecipe = defineSlotRecipe({\n className: 'card',\n slots: cardAnatomy.keys(),\n base: {\n root: {\n backgroundColor: 'background/primary',\n border: '1px solid',\n borderRadius: '8',\n },\n footer: {\n borderBlockStart: '1px solid',\n borderColor: 'border/minimal',\n
|
|
1
|
+
{"version":3,"file":"Card.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Card.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst cardSlotRecipe = defineSlotRecipe({\n className: 'card',\n slots: cardAnatomy.keys(),\n base: {\n root: {\n backgroundColor: 'background/primary',\n border: '1px solid',\n borderRadius: '8',\n },\n footer: {\n borderBlockStart: '1px solid',\n borderColor: 'border/minimal',\n },\n },\n variants: {\n elevation: {\n true: {\n root: {\n borderColor: 'border/minimal',\n boxShadow: 'elevation/sm',\n },\n },\n false: {\n root: {\n borderColor: 'border/regular',\n },\n },\n },\n paddingSize: {\n sm: {\n body: {\n padding: '16',\n },\n footer: {\n paddingBlock: '8',\n paddingInline: '16',\n },\n },\n md: {\n body: {\n paddingInline: '24',\n paddingBlock: '16',\n },\n footer: {\n paddingBlock: '8',\n paddingInline: '24',\n },\n },\n lg: {\n body: {\n padding: '24',\n },\n footer: {\n paddingBlock: '12',\n paddingInline: '24',\n },\n },\n },\n },\n defaultVariants: {\n elevation: true,\n paddingSize: 'lg',\n },\n});\n\nexport default cardSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,iBAAiB,iBAAiB;CACtC,WAAW;CACX,OAAO,YAAY,KAAK;CACxB,MAAM;EACJ,MAAM;GACJ,iBAAiB;GACjB,QAAQ;GACR,cAAc;EAChB;EACA,QAAQ;GACN,kBAAkB;GAClB,aAAa;EACf;CACF;CACA,UAAU;EACR,WAAW;GACT,MAAM,EACJ,MAAM;IACJ,aAAa;IACb,WAAW;GACb,EACF;GACA,OAAO,EACL,MAAM,EACJ,aAAa,iBACf,EACF;EACF;EACA,aAAa;GACX,IAAI;IACF,MAAM,EACJ,SAAS,KACX;IACA,QAAQ;KACN,cAAc;KACd,eAAe;IACjB;GACF;GACA,IAAI;IACF,MAAM;KACJ,eAAe;KACf,cAAc;IAChB;IACA,QAAQ;KACN,cAAc;KACd,eAAe;IACjB;GACF;GACA,IAAI;IACF,MAAM,EACJ,SAAS,KACX;IACA,QAAQ;KACN,cAAc;KACd,eAAe;IACjB;GACF;EACF;CACF;CACA,iBAAiB;EACf,WAAW;EACX,aAAa;CACf;AACF,CAAC"}
|
|
@@ -6,6 +6,7 @@ var expandableCardSlotRecipe = defineSlotRecipe({
|
|
|
6
6
|
slots: [
|
|
7
7
|
...cardAnatomy.keys(),
|
|
8
8
|
"collapsible",
|
|
9
|
+
"footer",
|
|
9
10
|
"icon",
|
|
10
11
|
"secdText",
|
|
11
12
|
"suffix"
|
|
@@ -43,6 +44,12 @@ var expandableCardSlotRecipe = defineSlotRecipe({
|
|
|
43
44
|
borderColor: "border/minimal",
|
|
44
45
|
padding: "16"
|
|
45
46
|
},
|
|
47
|
+
footer: {
|
|
48
|
+
borderTop: "1px solid",
|
|
49
|
+
borderColor: "border/minimal",
|
|
50
|
+
paddingY: "8",
|
|
51
|
+
paddingX: "16"
|
|
52
|
+
},
|
|
46
53
|
icon: { color: "icon/secondary" },
|
|
47
54
|
secdText: { color: "text/secondary" },
|
|
48
55
|
suffix: {
|
|
@@ -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.keys(), 'collapsible', 'icon', 'secdText', '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 },\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 body: {\n borderTop: '1px solid',\n borderColor: 'border/minimal',\n padding: '16',\n },\n icon: {\n color: 'icon/secondary',\n },\n secdText: {\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 secdText: { textStyle: 'body/sm/regular' },\n },\n lg: {\n header: { textStyle: 'body/lg/regular', padding: '16' },\n secdText: { 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;EAAG;EAAe;EAAQ;EAAY;CAAQ;
|
|
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', 'footer', 'icon', 'secdText', '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 },\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 body: {\n borderTop: '1px solid',\n borderColor: 'border/minimal',\n padding: '16',\n },\n footer: {\n borderTop: '1px solid',\n borderColor: 'border/minimal',\n paddingY: '8',\n paddingX: '16',\n },\n icon: {\n color: 'icon/secondary',\n },\n secdText: {\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 secdText: { textStyle: 'body/sm/regular' },\n },\n lg: {\n header: { textStyle: 'body/lg/regular', padding: '16' },\n secdText: { 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;EAAG;EAAe;EAAU;EAAQ;EAAY;CAAQ;CACpF,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,EACL,iBAAiB,uBACnB;EACF;EACA,aAAa;GACX,UAAU;GACV,OAAO;IACL,eAAe;IACf,mBAAmB;GACrB;GACA,SAAS;IACP,eAAe;IACf,mBAAmB;GACrB;EACF;EACA,MAAM;GACJ,WAAW;GACX,aAAa;GACb,SAAS;EACX;EACA,QAAQ;GACN,WAAW;GACX,aAAa;GACb,UAAU;GACV,UAAU;EACZ;EACA,MAAM,EACJ,OAAO,iBACT;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"}
|
|
@@ -239,17 +239,29 @@ declare const slotRecipes: {
|
|
|
239
239
|
body: {
|
|
240
240
|
padding: "16";
|
|
241
241
|
};
|
|
242
|
+
footer: {
|
|
243
|
+
paddingBlock: "8";
|
|
244
|
+
paddingInline: "16";
|
|
245
|
+
};
|
|
242
246
|
};
|
|
243
247
|
md: {
|
|
244
248
|
body: {
|
|
245
249
|
paddingInline: "24";
|
|
246
250
|
paddingBlock: "16";
|
|
247
251
|
};
|
|
252
|
+
footer: {
|
|
253
|
+
paddingBlock: "8";
|
|
254
|
+
paddingInline: "24";
|
|
255
|
+
};
|
|
248
256
|
};
|
|
249
257
|
lg: {
|
|
250
258
|
body: {
|
|
251
259
|
padding: "24";
|
|
252
260
|
};
|
|
261
|
+
footer: {
|
|
262
|
+
paddingBlock: "12";
|
|
263
|
+
paddingInline: "24";
|
|
264
|
+
};
|
|
253
265
|
};
|
|
254
266
|
};
|
|
255
267
|
}>;
|