@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.
- 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/components/BitkitSelectMenu/BitkitSelectMenuAction.d.ts +12 -0
- package/dist/components/BitkitSelectMenu/BitkitSelectMenuAction.js +33 -22
- package/dist/components/BitkitSelectMenu/BitkitSelectMenuAction.js.map +1 -1
- package/dist/components/BitkitSwitch/components/BitkitSwitchLabel.js +1 -1
- package/dist/main.js +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/Select.recipe.js +5 -0
- package/dist/theme/slot-recipes/Select.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"}
|
|
@@ -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(
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
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:
|
|
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 <
|
|
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.
|
|
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"}
|
|
@@ -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":";;;;;AAMA,IAAa,mBAAmB,iBAAiB;CAC/C,WAAW;CACX,OAAO;EACL,GAAG,cAAc,KAAK;EACtB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,SAAS;GACP,SAAS;GACT,YAAY;GACZ,aAAa;GACb,aAAa;GACb,YAAY;GACZ,OAAO;GACP,KAAK;GACL,gBAAgB;GAGhB,oBAAoB,IAAI,EAAE;GAC1B,kBAAkB;GAClB,cAAc,IAAI,EAAE;GACpB,cAAc;GACd,QAAQ;GACR,YAAY;GACZ,WAAW;GACX,kBAAkB;GAClB,OAAO;GACP,OAAO,EACL,aAAa,eACf;GACA,mBAAmB,EACjB,OAAO,iBACT;GACA,WAAW;IACT,OAAO;IACP,YAAY;IACZ,QAAQ;GACV;GACA,UAAU,EACR,aAAa,eACf;GACA,WAAW;IACT,YAAY;IACZ,QAAQ;GACV;EACF;EACA,gBAAgB;GACd,SAAS;GACT,YAAY;GACZ,KAAK;GACL,UAAU;GACV,UAAU;GACV,KAAK;GACL,QAAQ;GACR,oBAAoB;GACpB,kBAAkB,IAAI,EAAE;GACxB,eAAe;EACjB;EACA,WAAW;GACT,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,WAAW,EACT,OAAO,gBACT;GACA,WAAW,EACT,OAAO,mBACT;EACF;EACA,GAAG;EACH,SAAS;GACP,GAAG,KAAK;GACR,UAAU;GACV,SAAS;GACT,eAAe;GAGf,UAAU;GACV,UAAU,IAAI,GAAG;GACjB,kBAAkB;EACpB;EACA,MAAM;GACJ,GAAG,KAAK;GACR,SAAS,EACP,YAAY,oBACd;GACA,WAAW;IACT,YAAY;IACZ,cAAc,EACZ,YAAY,4BACd;GACF;GACA,WAAW;IACT,QAAQ;IACR,OAAO;IACP,cAAc,EACZ,YAAY,cACd;GACF;EACF;EACA,SAAS;GACP,UAAU;GACV,OAAO;EACT;EACA,WAAW;GACT,SAAS;GACT,YAAY;GACZ,KAAK;GACL,MAAM;GACN,UAAU;GACV,UAAU;EACZ;EACA,UAAU;GACR,MAAM;GACN,WAAW;GACX,WAAW;GACX,cAAc;EAChB;EACA,aAAa;GACX,SAAS;GACT,eAAe;GACf,MAAM;GACN,UAAU;EACZ;EACA,WAAW;GACT,SAAS;GACT,YAAY;EACd;EACA,aAAa,EACX,YAAY,EACd;EACA,kBAAkB;GAChB,OAAO;GACP,MAAM;GACN,UAAU;GACV,UAAU;GACV,cAAc;GACd,YAAY;EACd;EACA,YAAY;GACV,SAAS;GACT,eAAe;GACf,YAAY;GACZ,eAAe;EACjB;EACA,UAAU;GACR,OAAO;GACP,8BAA4B,EAC1B,OAAO,mBACT;EACF;EAGA,WAAW;GACT,OAAO;GACP,qBAAqB,EAAE,OAAO,gBAAgB;GAC9C,qBAAqB,EAAE,OAAO,mBAAmB;EACnD;EACA,QAAQ;GACN,YAAY;GACZ,qBAAqB,EAAE,SAAS,GAAI;EACtC;EACA,WAAW;GACT,OAAO;GACP,YAAY;GACZ,UAAU;GACV,cAAc;GACd,UAAU;GACV,UAAU;GACV,qBAAqB,EACnB,OAAO,gBACT;EACF;EACA,gBAAgB;GACd,OAAO;GACP,WAAW;GACX,YAAY;GACZ,UAAU;GACV,cAAc;GACd,UAAU;GACV,UAAU;GACV,qBAAqB,EACnB,OAAO,gBACT;EACF;EACA,UAAU;GACR,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,aAAa;GACb,aAAa;GACb,cAAc;GACd,YAAY;GACZ,WAAW;GACX,OAAO;GACP,0BAA0B;IACxB,YAAY;IACZ,aAAa;IACb,WAAW;GACb;GACA,qBAAqB;IACnB,YAAY;IACZ,aAAa;GACf;EACF;EACA,WAAW;GACT,SAAS;GACT,OAAO;GACP,0BAA0B,EACxB,SAAS,EACX;EACF;EACA,kBAAkB;GAChB,cAAc;GACd,aAAa;GACb,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,KAAK;GACL,oBAAoB;GACpB,kBAAkB;GAClB,UAAU;GACV,YAAY;GACZ,QAAQ,EACN,YAAY,uBACd;GACA,cAAc,EACZ,YAAY,qBACd;EACF;EACA,aAAa;GACX,MAAM;GACN,UAAU;GACV,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,OAAO;GACP,eAAe;GACf,cAAc;GACd,cAAc,EACZ,OAAO,yBACT;EACF;EACA,aAAa;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,cAAc;GACd,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,QAAQ,EACN,YAAY,mBACd;EACF;EACA,iBAAiB;GACf,WAAW;GACX,aAAa;GACb,cAAc;GACd,YAAY;EACd;EACA,QAAQ;GACN,SAAS;GACT,YAAY;GACZ,KAAK;GACL,kBAAkB;GAClB,oBAAoB;GACpB,OAAO;GACP,OAAO;GACP,QAAQ;GACR,WAAW;GACX,OAAO,EACL,OAAO,iBACT;GACA,QAAQ;IACN,YAAY;IACZ,SAAS,EACP,YAAY,6BACd;GACF;GACA,SAAS,EACP,YAAY,6BACd;GACA,WAAW;IACT,OAAO;IACP,QAAQ;IACR,OAAO,EACL,OAAO,gBACT;GACF;GACA,eAAe,EACb,eAAe,OACjB;EACF;CACF;CAEA,UAAU;EACR,eAAe;GACb,MAAM,EACJ,SAAS,EACP,kBAAkB,KACpB,EACF;GACA,OAAO,CAAC;EACV;EACA,MAAM;GACJ,IAAI;IACF,GAAG,SAAS,KAAK;IACjB,SAAS,EACP,iCAA+B;KAAE,cAAc,IAAI,CAAC;KAAG,oBAAoB,IAAI,EAAE;IAAE,EACrF;IACA,UAAU;KACR,OAAO;KACP,QAAQ;IACV;IACA,MAAM;KACJ,GAAG,SAAS,KAAK,GAAG;KACpB,iCAA+B;MAC7B,oBAAoB;MACpB,kBAAkB;MAClB,cAAc;MACd,KAAK;KACP;KACA,mCAAiC;MAC/B,WAAW;MACX,kBAAkB;MAClB,cAAc;MACd,KAAK;KACP;IACF;IACA,UAAU,EAER,WAAW,IAAI,GAAG,EACpB;IACA,WAAW;KACT,WAAW;KACX,YAAY;IACd;IACA,kBAAkB,EAChB,WAAW,kBACb;IACA,YAAY,EACV,cAAc,KAChB;IACA,QAAQ;KACN,WAAW;KACX,cAAc;KACd,WAAW;KACX,YAAY;IACd;IACA,kBAAkB;KAChB,QAAQ,IAAI,EAAE;KACd,cAAc;IAChB;IACA,aAAa,EACX,WAAW,kBACb;IACA,aAAa,EACX,SAAS,IACX;GACF;GACA,IAAI;IACF,GAAG,SAAS,KAAK;IACjB,UAAU;KACR,OAAO;KACP,QAAQ;IACV;IACA,MAAM;KACJ,GAAG,SAAS,KAAK,GAAG;KACpB,iCAA+B;MAC7B,oBAAoB;MACpB,kBAAkB;MAClB,cAAc;MACd,KAAK;KACP;KACA,mCAAiC;MAC/B,WAAW;MACX,kBAAkB;MAClB,cAAc;MACd,KAAK;KACP;IACF;IACA,UAAU,EAER,WAAW,IAAI,GAAG,EACpB;IACA,WAAW;KACT,WAAW;KACX,YAAY;IACd;IACA,kBAAkB,EAChB,WAAW,kBACb;IACA,YAAY,EACV,cAAc,IAChB;IACA,QAAQ;KACN,WAAW;KACX,cAAc;KACd,WAAW;KACX,YAAY;IACd;IACA,SAAS;KACP,WAAW;KACX,cAAc,IAAI,CAAC;KACnB,iCAA+B;MAAE,cAAc,IAAI,CAAC;MAAG,oBAAoB,IAAI,EAAE;KAAE;IACrF;IACA,kBAAkB;KAChB,QAAQ;KACR,cAAc;IAChB;IACA,aAAa,EACX,WAAW,kBACb;IACA,aAAa,EACX,SAAS,IACX;GACF;EACF;CACF;CACA,iBAAiB,EACf,MAAM,KACR;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: {
|