@bitrise/bitkit-v2 0.3.441-beta.2785 → 0.3.441-beta.2791
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/BitkitSettingsCard/BitkitSettingsCard.d.ts +1 -0
- package/dist/components/BitkitSettingsCard/BitkitSettingsCard.js +14 -16
- package/dist/components/BitkitSettingsCard/BitkitSettingsCard.js.map +1 -1
- package/dist/components/BitkitSwitch/BitkitSwitch.types.d.ts +13 -20
- package/dist/theme/slot-recipes/SettingsCard.recipe.d.ts +2 -6
- package/dist/theme/slot-recipes/SettingsCard.recipe.js +9 -5
- package/dist/theme/slot-recipes/SettingsCard.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +2 -6
- package/package.json +1 -1
|
@@ -14,6 +14,7 @@ export interface BitkitSettingsCardStatusProps extends Omit<BoxProps, 'children'
|
|
|
14
14
|
/** Replaces the icon the `status` renders by default. */
|
|
15
15
|
icon?: BitkitIconComponent;
|
|
16
16
|
labelText: ReactNode;
|
|
17
|
+
state?: 'skeleton';
|
|
17
18
|
status?: BitkitSettingsCardStatus;
|
|
18
19
|
}
|
|
19
20
|
export interface BitkitSettingsCardStatusMessageProps extends Omit<BoxProps, 'children' | 'colorPalette'> {
|
|
@@ -8,8 +8,9 @@ import IconWarningYellow from "../../icons/IconWarningYellow.js";
|
|
|
8
8
|
import { Box } from "@chakra-ui/react/box";
|
|
9
9
|
import { useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
10
10
|
import { forwardRef } from "react";
|
|
11
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
+
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
12
12
|
import { Text } from "@chakra-ui/react/text";
|
|
13
|
+
import { Skeleton } from "@chakra-ui/react/skeleton";
|
|
13
14
|
import { Card } from "@chakra-ui/react/card";
|
|
14
15
|
//#region lib/components/BitkitSettingsCard/BitkitSettingsCard.tsx
|
|
15
16
|
var statusIcons = {
|
|
@@ -54,29 +55,31 @@ var Content = forwardRef((props, ref) => {
|
|
|
54
55
|
});
|
|
55
56
|
Content.displayName = "BitkitSettingsCard.Content";
|
|
56
57
|
var Status = forwardRef((props, ref) => {
|
|
57
|
-
const { css, icon, labelText, status = "neutral", ...rest } = props;
|
|
58
|
+
const { css, icon, labelText, state, status = "neutral", ...rest } = props;
|
|
58
59
|
const styles = useSettingsCardStyles({ status });
|
|
59
60
|
const Icon = icon ?? statusIcons[status];
|
|
60
|
-
return /* @__PURE__ */
|
|
61
|
+
return /* @__PURE__ */ jsx(Box, {
|
|
61
62
|
ref,
|
|
62
63
|
role: status === "error" ? "alert" : "status",
|
|
63
64
|
css: [styles.status, css],
|
|
64
65
|
...rest,
|
|
65
|
-
children:
|
|
66
|
+
children: state === "skeleton" ? /* @__PURE__ */ jsx(Skeleton, {
|
|
67
|
+
height: "20",
|
|
68
|
+
width: "96"
|
|
69
|
+
}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Icon, {
|
|
66
70
|
css: styles.statusIcon,
|
|
67
71
|
size: "16"
|
|
68
72
|
}), /* @__PURE__ */ jsx(Text, {
|
|
69
73
|
as: "span",
|
|
70
74
|
css: styles.statusLabel,
|
|
71
75
|
children: labelText
|
|
72
|
-
})]
|
|
76
|
+
})] })
|
|
73
77
|
});
|
|
74
78
|
});
|
|
75
79
|
Status.displayName = "BitkitSettingsCard.Status";
|
|
76
80
|
var StatusMessage = forwardRef((props, ref) => {
|
|
77
81
|
const { css, helperText, icon, labelText, messageText, status = "neutral", ...rest } = props;
|
|
78
82
|
const styles = useSettingsCardStyles({ status });
|
|
79
|
-
const Icon = icon ?? statusIcons[status];
|
|
80
83
|
return /* @__PURE__ */ jsxs(Box, {
|
|
81
84
|
ref,
|
|
82
85
|
css: [styles.statusMessage, css],
|
|
@@ -84,16 +87,11 @@ var StatusMessage = forwardRef((props, ref) => {
|
|
|
84
87
|
role: status === "error" ? "alert" : "status",
|
|
85
88
|
...rest,
|
|
86
89
|
children: [
|
|
87
|
-
/* @__PURE__ */
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}), /* @__PURE__ */ jsx(Text, {
|
|
93
|
-
as: "span",
|
|
94
|
-
css: styles.statusLabel,
|
|
95
|
-
children: labelText
|
|
96
|
-
})]
|
|
90
|
+
/* @__PURE__ */ jsx(Status, {
|
|
91
|
+
icon,
|
|
92
|
+
labelText,
|
|
93
|
+
role: void 0,
|
|
94
|
+
status
|
|
97
95
|
}),
|
|
98
96
|
messageText && /* @__PURE__ */ jsx(Text, {
|
|
99
97
|
css: styles.statusMessageText,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitSettingsCard.js","names":[],"sources":["../../../lib/components/BitkitSettingsCard/BitkitSettingsCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Card, type CardBodyProps, type CardFooterProps, type CardRootProps } from '@chakra-ui/react/card';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport {\n type BitkitIconComponent,\n IconCheckCircleFilled,\n IconCircleDashed,\n IconClock,\n IconCrossCircleFilled,\n IconErrorCircleFilled,\n IconWarningYellow,\n} from '../../icons';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\nexport type BitkitSettingsCardStatus = 'error' | 'failed' | 'in-progress' | 'neutral' | 'success' | 'warning';\n\nconst statusIcons: Record<BitkitSettingsCardStatus, BitkitIconComponent> = {\n error: IconErrorCircleFilled,\n failed: IconCrossCircleFilled,\n 'in-progress': IconClock,\n neutral: IconCircleDashed,\n success: IconCheckCircleFilled,\n warning: IconWarningYellow,\n};\n\nconst useSettingsCardStyles = (props?: { status?: BitkitSettingsCardStatus }) => {\n const recipe = useSlotRecipe({ key: 'settingsCard' });\n return recipe(props);\n};\n\n// --- Root ---\n\nexport interface BitkitSettingsCardProps extends Omit<CardRootProps, 'children' | 'elevation'> {\n children: ReactNode;\n}\n\nconst BitkitSettingsCard = forwardRef<HTMLDivElement, BitkitSettingsCardProps>((props, ref) => {\n const { children, css, ...rest } = props;\n const styles = useSettingsCardStyles();\n\n return (\n <Card.Root ref={ref} elevation={false} paddingSize=\"md\" css={[styles.root, css]} {...rest}>\n {children}\n </Card.Root>\n );\n});\n\nBitkitSettingsCard.displayName = 'BitkitSettingsCard';\n\n// --- Content ---\n\nexport interface BitkitSettingsCardContentProps extends Omit<CardBodyProps, 'children'> {\n actions?: ReactNode;\n children: ReactNode;\n}\n\nconst Content = forwardRef<HTMLDivElement, BitkitSettingsCardContentProps>((props, ref) => {\n const { actions, children, css, ...rest } = props;\n const styles = useSettingsCardStyles();\n\n return (\n <Card.Body ref={ref} css={[styles.content, css]} {...rest}>\n <Box css={styles.contentBody}>{children}</Box>\n {actions && <Box css={styles.contentActions}>{actions}</Box>}\n </Card.Body>\n );\n});\n\nContent.displayName = 'BitkitSettingsCard.Content';\n\n// --- Status ---\n\nexport interface BitkitSettingsCardStatusProps extends Omit<BoxProps, 'children' | 'colorPalette'> {\n /** Replaces the icon the `status` renders by default. */\n icon?: BitkitIconComponent;\n labelText: ReactNode;\n status?: BitkitSettingsCardStatus;\n}\n\nconst Status = forwardRef<HTMLDivElement, BitkitSettingsCardStatusProps>((props, ref) => {\n const { css, icon, labelText, status = 'neutral', ...rest } = props;\n const styles = useSettingsCardStyles({ status });\n const Icon = icon ?? statusIcons[status];\n\n return (\n <Box ref={ref} role={status === 'error' ? 'alert' : 'status'} css={[styles.status, css]} {...rest}>\n <Icon css={styles.statusIcon} size=\"16\" />\n
|
|
1
|
+
{"version":3,"file":"BitkitSettingsCard.js","names":[],"sources":["../../../lib/components/BitkitSettingsCard/BitkitSettingsCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Card, type CardBodyProps, type CardFooterProps, type CardRootProps } from '@chakra-ui/react/card';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport {\n type BitkitIconComponent,\n IconCheckCircleFilled,\n IconCircleDashed,\n IconClock,\n IconCrossCircleFilled,\n IconErrorCircleFilled,\n IconWarningYellow,\n} from '../../icons';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\nexport type BitkitSettingsCardStatus = 'error' | 'failed' | 'in-progress' | 'neutral' | 'success' | 'warning';\n\nconst statusIcons: Record<BitkitSettingsCardStatus, BitkitIconComponent> = {\n error: IconErrorCircleFilled,\n failed: IconCrossCircleFilled,\n 'in-progress': IconClock,\n neutral: IconCircleDashed,\n success: IconCheckCircleFilled,\n warning: IconWarningYellow,\n};\n\nconst useSettingsCardStyles = (props?: { status?: BitkitSettingsCardStatus }) => {\n const recipe = useSlotRecipe({ key: 'settingsCard' });\n return recipe(props);\n};\n\n// --- Root ---\n\nexport interface BitkitSettingsCardProps extends Omit<CardRootProps, 'children' | 'elevation'> {\n children: ReactNode;\n}\n\nconst BitkitSettingsCard = forwardRef<HTMLDivElement, BitkitSettingsCardProps>((props, ref) => {\n const { children, css, ...rest } = props;\n const styles = useSettingsCardStyles();\n\n return (\n <Card.Root ref={ref} elevation={false} paddingSize=\"md\" css={[styles.root, css]} {...rest}>\n {children}\n </Card.Root>\n );\n});\n\nBitkitSettingsCard.displayName = 'BitkitSettingsCard';\n\n// --- Content ---\n\nexport interface BitkitSettingsCardContentProps extends Omit<CardBodyProps, 'children'> {\n actions?: ReactNode;\n children: ReactNode;\n}\n\nconst Content = forwardRef<HTMLDivElement, BitkitSettingsCardContentProps>((props, ref) => {\n const { actions, children, css, ...rest } = props;\n const styles = useSettingsCardStyles();\n\n return (\n <Card.Body ref={ref} css={[styles.content, css]} {...rest}>\n <Box css={styles.contentBody}>{children}</Box>\n {actions && <Box css={styles.contentActions}>{actions}</Box>}\n </Card.Body>\n );\n});\n\nContent.displayName = 'BitkitSettingsCard.Content';\n\n// --- Status ---\n\nexport interface BitkitSettingsCardStatusProps extends Omit<BoxProps, 'children' | 'colorPalette'> {\n /** Replaces the icon the `status` renders by default. */\n icon?: BitkitIconComponent;\n labelText: ReactNode;\n state?: 'skeleton';\n status?: BitkitSettingsCardStatus;\n}\n\nconst Status = forwardRef<HTMLDivElement, BitkitSettingsCardStatusProps>((props, ref) => {\n const { css, icon, labelText, state, status = 'neutral', ...rest } = props;\n const styles = useSettingsCardStyles({ status });\n const Icon = icon ?? statusIcons[status];\n\n return (\n <Box ref={ref} role={status === 'error' ? 'alert' : 'status'} css={[styles.status, css]} {...rest}>\n {state === 'skeleton' ? (\n <Skeleton height=\"20\" width=\"96\" />\n ) : (\n <>\n <Icon css={styles.statusIcon} size=\"16\" />\n <Text as=\"span\" css={styles.statusLabel}>\n {labelText}\n </Text>\n </>\n )}\n </Box>\n );\n});\n\nStatus.displayName = 'BitkitSettingsCard.Status';\n\n// --- StatusMessage ---\n\nexport interface BitkitSettingsCardStatusMessageProps extends Omit<BoxProps, 'children' | 'colorPalette'> {\n helperText?: ReactNode;\n /** Replaces the icon the `status` renders by default. */\n icon?: BitkitIconComponent;\n labelText: ReactNode;\n /** The detail line under the status. This is what sets a status message apart from a plain status. */\n messageText: ReactNode;\n status?: BitkitSettingsCardStatus;\n}\n\nconst StatusMessage = forwardRef<HTMLDivElement, BitkitSettingsCardStatusMessageProps>((props, ref) => {\n const { css, helperText, icon, labelText, messageText, status = 'neutral', ...rest } = props;\n const styles = useSettingsCardStyles({ status });\n\n return (\n <Box\n ref={ref}\n css={[styles.statusMessage, css]}\n data-slot=\"status-message\"\n role={status === 'error' ? 'alert' : 'status'}\n {...rest}\n >\n <Status icon={icon} labelText={labelText} role={undefined} status={status} />\n {messageText && <Text css={styles.statusMessageText}>{messageText}</Text>}\n {helperText && <Text css={styles.statusHelperText}>{helperText}</Text>}\n </Box>\n );\n});\n\nStatusMessage.displayName = 'BitkitSettingsCard.StatusMessage';\n\n// --- Footer ---\n\nexport interface BitkitSettingsCardFooterProps extends CardFooterProps {\n /** Error of a control that lives in the footer (e.g. a switch that failed to toggle). */\n errorText?: ReactNode;\n}\n\nconst Footer = forwardRef<HTMLDivElement, BitkitSettingsCardFooterProps>((props, ref) => {\n const { children, css, errorText, ...rest } = props;\n const styles = useSettingsCardStyles();\n\n return (\n <Card.Footer ref={ref} css={[styles.footer, css]} {...rest}>\n {children}\n {errorText && <Status labelText={errorText} marginInlineStart=\"auto\" status=\"error\" />}\n </Card.Footer>\n );\n});\n\nFooter.displayName = 'BitkitSettingsCard.Footer';\n\n// --- Compound export ---\n\nexport default withSubComponents(BitkitSettingsCard, {\n Content,\n Footer,\n Status,\n StatusMessage,\n});\n"],"mappings":"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"}
|
|
@@ -5,13 +5,16 @@ export type OnOff = {
|
|
|
5
5
|
on: ReactNode;
|
|
6
6
|
off: ReactNode;
|
|
7
7
|
};
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
8
|
+
/**
|
|
9
|
+
* Props every switch variant shares. `ref` goes to the switch root — the visible element — so the
|
|
10
|
+
* switch can anchor a tooltip or popover without a wrapper around it.
|
|
11
|
+
*/
|
|
12
|
+
interface BitkitSwitchSharedProps extends Omit<SwitchRootProps, 'disabled' | 'label' | 'readOnly'> {
|
|
13
|
+
/** Ref to the hidden `input`, for form libraries that register it. */
|
|
14
14
|
inputRef?: Ref<HTMLInputElement>;
|
|
15
|
+
}
|
|
16
|
+
export interface BitkitSwitchDefaultProps extends BitkitSwitchSharedProps {
|
|
17
|
+
variant?: 'default';
|
|
15
18
|
/**
|
|
16
19
|
* Keeps the label as the switch's accessible name but takes it off the screen. The hidden input
|
|
17
20
|
* gets its name from a label element the switch owns, so neither `aria-label` nor `ids` can
|
|
@@ -24,13 +27,8 @@ export interface BitkitSwitchDefaultProps extends Omit<SwitchRootProps, 'disable
|
|
|
24
27
|
label?: ReactNode;
|
|
25
28
|
state?: 'default' | 'disabled' | 'readOnly' | 'skeleton';
|
|
26
29
|
}
|
|
27
|
-
export interface BitkitSwitchDynamicTextProps extends
|
|
30
|
+
export interface BitkitSwitchDynamicTextProps extends BitkitSwitchSharedProps {
|
|
28
31
|
variant: 'dynamic-text';
|
|
29
|
-
/**
|
|
30
|
-
* Ref to the visually hidden `input`. `ref` points at the switch root — the visible element — so
|
|
31
|
-
* it can anchor a tooltip or popover; use this one for form libraries that register the input.
|
|
32
|
-
*/
|
|
33
|
-
inputRef?: Ref<HTMLInputElement>;
|
|
34
32
|
tooltip?: string;
|
|
35
33
|
optional?: boolean;
|
|
36
34
|
label?: ReactNode;
|
|
@@ -38,13 +36,8 @@ export interface BitkitSwitchDynamicTextProps extends Omit<SwitchRootProps, 'dis
|
|
|
38
36
|
helperText?: ReactNode | OnOff;
|
|
39
37
|
state?: 'default' | 'disabled' | 'disabledInput' | 'readOnly' | 'skeleton';
|
|
40
38
|
}
|
|
41
|
-
export interface BitkitSwitchFixedProps extends
|
|
39
|
+
export interface BitkitSwitchFixedProps extends BitkitSwitchSharedProps {
|
|
42
40
|
variant: 'fixed';
|
|
43
|
-
/**
|
|
44
|
-
* Ref to the visually hidden `input`. `ref` points at the switch root — the visible element — so
|
|
45
|
-
* it can anchor a tooltip or popover; use this one for form libraries that register the input.
|
|
46
|
-
*/
|
|
47
|
-
inputRef?: Ref<HTMLInputElement>;
|
|
48
41
|
/** Icon before the label. */
|
|
49
42
|
icon?: BitkitIconComponent;
|
|
50
43
|
tooltip?: string;
|
|
@@ -55,10 +48,9 @@ export interface BitkitSwitchFixedProps extends Omit<SwitchRootProps, 'disabled'
|
|
|
55
48
|
state?: 'default' | 'disabled' | 'disabledInput' | 'readOnly' | 'skeleton';
|
|
56
49
|
}
|
|
57
50
|
export type BitkitSwitchProps = BitkitSwitchDefaultProps | BitkitSwitchDynamicTextProps | BitkitSwitchFixedProps;
|
|
58
|
-
export type BitkitSwitchAnyVariantProps =
|
|
51
|
+
export type BitkitSwitchAnyVariantProps = BitkitSwitchSharedProps & {
|
|
59
52
|
variant?: BitkitSwitchProps['variant'];
|
|
60
53
|
hideLabel?: boolean;
|
|
61
|
-
inputRef?: Ref<HTMLInputElement>;
|
|
62
54
|
icon?: BitkitIconComponent;
|
|
63
55
|
tooltip?: string;
|
|
64
56
|
optional?: boolean;
|
|
@@ -67,3 +59,4 @@ export type BitkitSwitchAnyVariantProps = Omit<SwitchRootProps, 'disabled' | 'la
|
|
|
67
59
|
helperText?: ReactNode | OnOff;
|
|
68
60
|
state?: BitkitSwitchDynamicTextProps['state'];
|
|
69
61
|
};
|
|
62
|
+
export {};
|
|
@@ -15,7 +15,7 @@ declare const settingsCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefin
|
|
|
15
15
|
};
|
|
16
16
|
'in-progress': {
|
|
17
17
|
statusIcon: {
|
|
18
|
-
color: "
|
|
18
|
+
color: "color/yellow/bold";
|
|
19
19
|
};
|
|
20
20
|
};
|
|
21
21
|
neutral: {
|
|
@@ -28,11 +28,7 @@ declare const settingsCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefin
|
|
|
28
28
|
color: "icon/positive";
|
|
29
29
|
};
|
|
30
30
|
};
|
|
31
|
-
warning: {
|
|
32
|
-
statusIcon: {
|
|
33
|
-
color: "icon/warning";
|
|
34
|
-
};
|
|
35
|
-
};
|
|
31
|
+
warning: {};
|
|
36
32
|
};
|
|
37
33
|
}>;
|
|
38
34
|
export default settingsCardSlotRecipe;
|
|
@@ -36,9 +36,13 @@ var settingsCardSlotRecipe = defineSlotRecipe({
|
|
|
36
36
|
footer: {
|
|
37
37
|
alignItems: "center",
|
|
38
38
|
display: "flex",
|
|
39
|
-
gap: "
|
|
39
|
+
gap: "12",
|
|
40
40
|
justifyContent: "space-between",
|
|
41
|
-
"&:has([data-
|
|
41
|
+
"&:has([data-scope=\"switch\"][data-part=\"root\"])": { gap: "16" },
|
|
42
|
+
"&:has([data-slot=\"status-message\"])": {
|
|
43
|
+
alignItems: "flex-start",
|
|
44
|
+
paddingBlockEnd: "12"
|
|
45
|
+
}
|
|
42
46
|
},
|
|
43
47
|
status: {
|
|
44
48
|
alignItems: "flex-start",
|
|
@@ -64,7 +68,7 @@ var settingsCardSlotRecipe = defineSlotRecipe({
|
|
|
64
68
|
wordBreak: "break-word"
|
|
65
69
|
},
|
|
66
70
|
statusHelperText: {
|
|
67
|
-
color: "text/
|
|
71
|
+
color: "text/helper",
|
|
68
72
|
marginBlockStart: "8",
|
|
69
73
|
paddingInlineStart: "20",
|
|
70
74
|
textStyle: "body/sm/regular",
|
|
@@ -77,10 +81,10 @@ var settingsCardSlotRecipe = defineSlotRecipe({
|
|
|
77
81
|
statusLabel: { color: "text/negative" }
|
|
78
82
|
},
|
|
79
83
|
failed: { statusIcon: { color: "icon/negative" } },
|
|
80
|
-
"in-progress": { statusIcon: { color: "
|
|
84
|
+
"in-progress": { statusIcon: { color: "color/yellow/bold" } },
|
|
81
85
|
neutral: { statusIcon: { color: "icon/secondary" } },
|
|
82
86
|
success: { statusIcon: { color: "icon/positive" } },
|
|
83
|
-
warning: {
|
|
87
|
+
warning: {}
|
|
84
88
|
} },
|
|
85
89
|
defaultVariants: { status: "neutral" }
|
|
86
90
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SettingsCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/SettingsCard.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst settingsCardSlotRecipe = defineSlotRecipe({\n className: 'settings-card',\n slots: [\n 'root',\n 'content',\n 'contentBody',\n 'contentActions',\n 'footer',\n 'status',\n 'statusIcon',\n 'statusLabel',\n 'statusMessage',\n 'statusMessageText',\n 'statusHelperText',\n ],\n base: {\n root: {\n maxWidth: rem(800),\n },\n content: {\n alignItems: 'center',\n display: 'flex',\n gap: '12',\n },\n contentBody: {\n flex: 1,\n minWidth: 0,\n },\n contentActions: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n gap: '8',\n },\n footer: {\n alignItems: 'center',\n display: 'flex',\n gap: '
|
|
1
|
+
{"version":3,"file":"SettingsCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/SettingsCard.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst settingsCardSlotRecipe = defineSlotRecipe({\n className: 'settings-card',\n slots: [\n 'root',\n 'content',\n 'contentBody',\n 'contentActions',\n 'footer',\n 'status',\n 'statusIcon',\n 'statusLabel',\n 'statusMessage',\n 'statusMessageText',\n 'statusHelperText',\n ],\n base: {\n root: {\n maxWidth: rem(800),\n },\n content: {\n alignItems: 'center',\n display: 'flex',\n gap: '12',\n },\n contentBody: {\n flex: 1,\n minWidth: 0,\n },\n contentActions: {\n alignItems: 'center',\n display: 'flex',\n flexShrink: 0,\n gap: '8',\n },\n footer: {\n alignItems: 'center',\n display: 'flex',\n gap: '12',\n justifyContent: 'space-between',\n // The switch footer is drawn on a wider gap than the status one.\n '&:has([data-scope=\"switch\"][data-part=\"root\"])': {\n gap: '16',\n },\n // A status message wraps to more than one line: the design gives that footer a deeper bottom\n // padding than the single-line one the Card recipe sets, and keeps the trailing action level\n // with the status row rather than centred against the whole block.\n '&:has([data-slot=\"status-message\"])': {\n alignItems: 'flex-start',\n paddingBlockEnd: '12',\n },\n },\n status: {\n // Not `center`: the icon lines up with the first line of the label, which is where it still\n // belongs once the label wraps.\n alignItems: 'flex-start',\n display: 'flex',\n gap: '4',\n minWidth: 0,\n paddingBlock: '2',\n },\n statusIcon: {\n flexShrink: 0,\n marginBlockStart: '2',\n },\n statusLabel: {\n color: 'text/body',\n textStyle: 'body/md/regular',\n wordBreak: 'break-word',\n },\n statusMessage: {\n minWidth: 0,\n },\n statusMessageText: {\n color: 'text/body',\n paddingInlineStart: '20',\n textStyle: 'body/sm/regular',\n wordBreak: 'break-word',\n },\n statusHelperText: {\n color: 'text/helper',\n marginBlockStart: '8',\n paddingInlineStart: '20',\n textStyle: 'body/sm/regular',\n wordBreak: 'break-word',\n },\n },\n variants: {\n status: {\n error: {\n statusIcon: { color: 'icon/negative' },\n statusLabel: { color: 'text/negative' },\n },\n failed: {\n statusIcon: { color: 'icon/negative' },\n },\n 'in-progress': {\n statusIcon: { color: 'color/yellow/bold' },\n },\n neutral: {\n statusIcon: { color: 'icon/secondary' },\n },\n success: {\n statusIcon: { color: 'icon/positive' },\n },\n // No colour on purpose: IconWarningYellow carries its own fixed colours, and CLAUDE.md says a\n // fixed-colour icon is never recoloured. Setting one here would only reach an icon swapped in\n // via `icon`, and would put a second yellow on the same status.\n warning: {},\n },\n },\n defaultVariants: {\n status: 'neutral',\n },\n});\n\nexport default settingsCardSlotRecipe;\n"],"mappings":";;;AAIA,IAAM,yBAAyB,iBAAiB;CAC9C,WAAW;CACX,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,MAAM,EACJ,UAAU,IAAI,GAAG,EACnB;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,KAAK;EACP;EACA,aAAa;GACX,MAAM;GACN,UAAU;EACZ;EACA,gBAAgB;GACd,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,KAAK;EACP;EACA,QAAQ;GACN,YAAY;GACZ,SAAS;GACT,KAAK;GACL,gBAAgB;GAEhB,sDAAkD,EAChD,KAAK,KACP;GAIA,yCAAuC;IACrC,YAAY;IACZ,iBAAiB;GACnB;EACF;EACA,QAAQ;GAGN,YAAY;GACZ,SAAS;GACT,KAAK;GACL,UAAU;GACV,cAAc;EAChB;EACA,YAAY;GACV,YAAY;GACZ,kBAAkB;EACpB;EACA,aAAa;GACX,OAAO;GACP,WAAW;GACX,WAAW;EACb;EACA,eAAe,EACb,UAAU,EACZ;EACA,mBAAmB;GACjB,OAAO;GACP,oBAAoB;GACpB,WAAW;GACX,WAAW;EACb;EACA,kBAAkB;GAChB,OAAO;GACP,kBAAkB;GAClB,oBAAoB;GACpB,WAAW;GACX,WAAW;EACb;CACF;CACA,UAAU,EACR,QAAQ;EACN,OAAO;GACL,YAAY,EAAE,OAAO,gBAAgB;GACrC,aAAa,EAAE,OAAO,gBAAgB;EACxC;EACA,QAAQ,EACN,YAAY,EAAE,OAAO,gBAAgB,EACvC;EACA,eAAe,EACb,YAAY,EAAE,OAAO,oBAAoB,EAC3C;EACA,SAAS,EACP,YAAY,EAAE,OAAO,iBAAiB,EACxC;EACA,SAAS,EACP,YAAY,EAAE,OAAO,gBAAgB,EACvC;EAIA,SAAS,CAAC;CACZ,EACF;CACA,iBAAiB,EACf,QAAQ,UACV;AACF,CAAC"}
|
|
@@ -2292,7 +2292,7 @@ declare const slotRecipes: {
|
|
|
2292
2292
|
};
|
|
2293
2293
|
'in-progress': {
|
|
2294
2294
|
statusIcon: {
|
|
2295
|
-
color: "
|
|
2295
|
+
color: "color/yellow/bold";
|
|
2296
2296
|
};
|
|
2297
2297
|
};
|
|
2298
2298
|
neutral: {
|
|
@@ -2305,11 +2305,7 @@ declare const slotRecipes: {
|
|
|
2305
2305
|
color: "icon/positive";
|
|
2306
2306
|
};
|
|
2307
2307
|
};
|
|
2308
|
-
warning: {
|
|
2309
|
-
statusIcon: {
|
|
2310
|
-
color: "icon/warning";
|
|
2311
|
-
};
|
|
2312
|
-
};
|
|
2308
|
+
warning: {};
|
|
2313
2309
|
};
|
|
2314
2310
|
}>;
|
|
2315
2311
|
splitButton: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "trigger" | "action", {
|