@bitrise/bitkit-v2 0.3.440 → 0.3.441-beta.2783
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +1 -0
- package/dist/components/BitkitSettingsCard/BitkitSettingsCard.d.ts +21 -7
- package/dist/components/BitkitSettingsCard/BitkitSettingsCard.js +72 -27
- package/dist/components/BitkitSettingsCard/BitkitSettingsCard.js.map +1 -1
- package/dist/components/BitkitSwitch/BitkitSwitch.d.ts +1 -1
- package/dist/components/BitkitSwitch/BitkitSwitch.js +13 -9
- package/dist/components/BitkitSwitch/BitkitSwitch.js.map +1 -1
- package/dist/components/BitkitSwitch/BitkitSwitch.types.d.ts +21 -5
- package/dist/components/index.d.ts +1 -1
- package/dist/theme/slot-recipes/SettingsCard.recipe.d.ts +37 -1
- package/dist/theme/slot-recipes/SettingsCard.recipe.js +36 -16
- package/dist/theme/slot-recipes/SettingsCard.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +37 -1
- package/package.json +1 -1
package/AGENTS.md
CHANGED
|
@@ -71,6 +71,7 @@ Bitkit components use consistent prop names across the library:
|
|
|
71
71
|
| Concept | Use | Don't use |
|
|
72
72
|
|---------|-----|-----------|
|
|
73
73
|
| Primary label | `label` | `labelText`, `text` |
|
|
74
|
+
| Primary label, on a part whose other text slots are `*Text` | `labelText` | `label` |
|
|
74
75
|
| Descriptive subtitle (non-field) | `secondaryText` | `secdText` |
|
|
75
76
|
| Field validation/help text | `helperText`, `errorText`, `warningText` | — |
|
|
76
77
|
| Trailing icon | `suffixIcon` | `rightIcon` |
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { BoxProps } from '@chakra-ui/react/box';
|
|
2
|
-
import {
|
|
2
|
+
import { CardBodyProps, CardFooterProps, CardRootProps } from '@chakra-ui/react/card';
|
|
3
3
|
import { ReactNode } from 'react';
|
|
4
4
|
import { BitkitIconComponent } from '../../icons';
|
|
5
|
-
export
|
|
5
|
+
export type BitkitSettingsCardStatus = 'error' | 'failed' | 'in-progress' | 'neutral' | 'success' | 'warning';
|
|
6
|
+
export interface BitkitSettingsCardProps extends Omit<CardRootProps, 'children' | 'elevation'> {
|
|
6
7
|
children: ReactNode;
|
|
7
8
|
}
|
|
8
9
|
export interface BitkitSettingsCardContentProps extends Omit<CardBodyProps, 'children'> {
|
|
@@ -10,15 +11,28 @@ export interface BitkitSettingsCardContentProps extends Omit<CardBodyProps, 'chi
|
|
|
10
11
|
children: ReactNode;
|
|
11
12
|
}
|
|
12
13
|
export interface BitkitSettingsCardStatusProps extends Omit<BoxProps, 'children' | 'colorPalette'> {
|
|
13
|
-
|
|
14
|
+
/** Replaces the icon the `status` renders by default. */
|
|
15
|
+
icon?: BitkitIconComponent;
|
|
16
|
+
labelText: ReactNode;
|
|
17
|
+
status?: BitkitSettingsCardStatus;
|
|
18
|
+
}
|
|
19
|
+
export interface BitkitSettingsCardStatusMessageProps extends Omit<BoxProps, 'children' | 'colorPalette'> {
|
|
14
20
|
helperText?: ReactNode;
|
|
15
|
-
icon
|
|
16
|
-
|
|
17
|
-
|
|
21
|
+
/** Replaces the icon the `status` renders by default. */
|
|
22
|
+
icon?: BitkitIconComponent;
|
|
23
|
+
labelText: ReactNode;
|
|
24
|
+
/** The detail line under the status. This is what sets a status message apart from a plain status. */
|
|
25
|
+
messageText: ReactNode;
|
|
26
|
+
status?: BitkitSettingsCardStatus;
|
|
27
|
+
}
|
|
28
|
+
export interface BitkitSettingsCardFooterProps extends CardFooterProps {
|
|
29
|
+
/** Error of a control that lives in the footer (e.g. a switch that failed to toggle). */
|
|
30
|
+
errorText?: ReactNode;
|
|
18
31
|
}
|
|
19
32
|
declare const _default: import('react').ForwardRefExoticComponent<BitkitSettingsCardProps & import('react').RefAttributes<HTMLDivElement>> & {
|
|
20
33
|
Content: import('react').ForwardRefExoticComponent<BitkitSettingsCardContentProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
21
|
-
Footer: import('react').ForwardRefExoticComponent<
|
|
34
|
+
Footer: import('react').ForwardRefExoticComponent<BitkitSettingsCardFooterProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
22
35
|
Status: import('react').ForwardRefExoticComponent<BitkitSettingsCardStatusProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
36
|
+
StatusMessage: import('react').ForwardRefExoticComponent<BitkitSettingsCardStatusMessageProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
23
37
|
};
|
|
24
38
|
export default _default;
|
|
@@ -1,4 +1,10 @@
|
|
|
1
1
|
import { withSubComponents } from "../../utilities/withSubComponents.js";
|
|
2
|
+
import IconCheckCircleFilled from "../../icons/IconCheckCircleFilled.js";
|
|
3
|
+
import IconCircleDashed from "../../icons/IconCircleDashed.js";
|
|
4
|
+
import IconClock from "../../icons/IconClock.js";
|
|
5
|
+
import IconCrossCircleFilled from "../../icons/IconCrossCircleFilled.js";
|
|
6
|
+
import IconErrorCircleFilled from "../../icons/IconErrorCircleFilled.js";
|
|
7
|
+
import IconWarningYellow from "../../icons/IconWarningYellow.js";
|
|
2
8
|
import { Box } from "@chakra-ui/react/box";
|
|
3
9
|
import { useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
4
10
|
import { forwardRef } from "react";
|
|
@@ -6,8 +12,16 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
6
12
|
import { Text } from "@chakra-ui/react/text";
|
|
7
13
|
import { Card } from "@chakra-ui/react/card";
|
|
8
14
|
//#region lib/components/BitkitSettingsCard/BitkitSettingsCard.tsx
|
|
9
|
-
var
|
|
10
|
-
|
|
15
|
+
var statusIcons = {
|
|
16
|
+
error: IconErrorCircleFilled,
|
|
17
|
+
failed: IconCrossCircleFilled,
|
|
18
|
+
"in-progress": IconClock,
|
|
19
|
+
neutral: IconCircleDashed,
|
|
20
|
+
success: IconCheckCircleFilled,
|
|
21
|
+
warning: IconWarningYellow
|
|
22
|
+
};
|
|
23
|
+
var useSettingsCardStyles = (props) => {
|
|
24
|
+
return useSlotRecipe({ key: "settingsCard" })(props);
|
|
11
25
|
};
|
|
12
26
|
var BitkitSettingsCard = forwardRef((props, ref) => {
|
|
13
27
|
const { children, css, ...rest } = props;
|
|
@@ -40,48 +54,79 @@ var Content = forwardRef((props, ref) => {
|
|
|
40
54
|
});
|
|
41
55
|
Content.displayName = "BitkitSettingsCard.Content";
|
|
42
56
|
var Status = forwardRef((props, ref) => {
|
|
43
|
-
const {
|
|
44
|
-
const styles = useSettingsCardStyles();
|
|
57
|
+
const { css, icon, labelText, status = "neutral", ...rest } = props;
|
|
58
|
+
const styles = useSettingsCardStyles({ status });
|
|
59
|
+
const Icon = icon ?? statusIcons[status];
|
|
45
60
|
return /* @__PURE__ */ jsxs(Box, {
|
|
46
61
|
ref,
|
|
47
|
-
role: "status",
|
|
62
|
+
role: status === "error" ? "alert" : "status",
|
|
63
|
+
css: [styles.status, css],
|
|
48
64
|
...rest,
|
|
49
|
-
children: [/* @__PURE__ */
|
|
50
|
-
css: styles.
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
as: "strong",
|
|
57
|
-
css: styles.statusText,
|
|
58
|
-
children: statusText
|
|
59
|
-
}), description && /* @__PURE__ */ jsx(Text, {
|
|
60
|
-
as: "p",
|
|
61
|
-
css: styles.statusDescription,
|
|
62
|
-
children: description
|
|
63
|
-
})] })]
|
|
64
|
-
}), helperText && /* @__PURE__ */ jsx(Text, {
|
|
65
|
-
css: styles.statusHelperText,
|
|
66
|
-
children: helperText
|
|
65
|
+
children: [/* @__PURE__ */ jsx(Icon, {
|
|
66
|
+
css: styles.statusIcon,
|
|
67
|
+
size: "16"
|
|
68
|
+
}), /* @__PURE__ */ jsx(Text, {
|
|
69
|
+
as: "span",
|
|
70
|
+
css: styles.statusLabel,
|
|
71
|
+
children: labelText
|
|
67
72
|
})]
|
|
68
73
|
});
|
|
69
74
|
});
|
|
70
75
|
Status.displayName = "BitkitSettingsCard.Status";
|
|
76
|
+
var StatusMessage = forwardRef((props, ref) => {
|
|
77
|
+
const { css, helperText, icon, labelText, messageText, status = "neutral", ...rest } = props;
|
|
78
|
+
const styles = useSettingsCardStyles({ status });
|
|
79
|
+
const Icon = icon ?? statusIcons[status];
|
|
80
|
+
return /* @__PURE__ */ jsxs(Box, {
|
|
81
|
+
ref,
|
|
82
|
+
css: [styles.statusMessage, css],
|
|
83
|
+
"data-slot": "status-message",
|
|
84
|
+
role: status === "error" ? "alert" : "status",
|
|
85
|
+
...rest,
|
|
86
|
+
children: [
|
|
87
|
+
/* @__PURE__ */ jsxs(Box, {
|
|
88
|
+
css: styles.status,
|
|
89
|
+
children: [/* @__PURE__ */ jsx(Icon, {
|
|
90
|
+
css: styles.statusIcon,
|
|
91
|
+
size: "16"
|
|
92
|
+
}), /* @__PURE__ */ jsx(Text, {
|
|
93
|
+
as: "span",
|
|
94
|
+
css: styles.statusLabel,
|
|
95
|
+
children: labelText
|
|
96
|
+
})]
|
|
97
|
+
}),
|
|
98
|
+
messageText && /* @__PURE__ */ jsx(Text, {
|
|
99
|
+
css: styles.statusMessageText,
|
|
100
|
+
children: messageText
|
|
101
|
+
}),
|
|
102
|
+
helperText && /* @__PURE__ */ jsx(Text, {
|
|
103
|
+
css: styles.statusHelperText,
|
|
104
|
+
children: helperText
|
|
105
|
+
})
|
|
106
|
+
]
|
|
107
|
+
});
|
|
108
|
+
});
|
|
109
|
+
StatusMessage.displayName = "BitkitSettingsCard.StatusMessage";
|
|
71
110
|
var Footer = forwardRef((props, ref) => {
|
|
72
|
-
const { css, ...rest } = props;
|
|
111
|
+
const { children, css, errorText, ...rest } = props;
|
|
73
112
|
const styles = useSettingsCardStyles();
|
|
74
|
-
return /* @__PURE__ */
|
|
113
|
+
return /* @__PURE__ */ jsxs(Card.Footer, {
|
|
75
114
|
ref,
|
|
76
115
|
css: [styles.footer, css],
|
|
77
|
-
...rest
|
|
116
|
+
...rest,
|
|
117
|
+
children: [children, errorText && /* @__PURE__ */ jsx(Status, {
|
|
118
|
+
labelText: errorText,
|
|
119
|
+
marginInlineStart: "auto",
|
|
120
|
+
status: "error"
|
|
121
|
+
})]
|
|
78
122
|
});
|
|
79
123
|
});
|
|
80
124
|
Footer.displayName = "BitkitSettingsCard.Footer";
|
|
81
125
|
var BitkitSettingsCard_default = withSubComponents(BitkitSettingsCard, {
|
|
82
126
|
Content,
|
|
83
127
|
Footer,
|
|
84
|
-
Status
|
|
128
|
+
Status,
|
|
129
|
+
StatusMessage
|
|
85
130
|
});
|
|
86
131
|
//#endregion
|
|
87
132
|
export { BitkitSettingsCard_default as default };
|
|
@@ -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 {
|
|
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 <Text as=\"span\" css={styles.statusLabel}>\n {labelText}\n </Text>\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 const Icon = icon ?? statusIcons[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 <Box css={styles.status}>\n <Icon css={styles.statusIcon} size=\"16\" />\n <Text as=\"span\" css={styles.statusLabel}>\n {labelText}\n </Text>\n </Box>\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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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { BitkitSwitchProps } from './BitkitSwitch.types';
|
|
2
|
-
declare const BitkitSwitch: import('react').ForwardRefExoticComponent<BitkitSwitchProps & import('react').RefAttributes<
|
|
2
|
+
declare const BitkitSwitch: import('react').ForwardRefExoticComponent<BitkitSwitchProps & import('react').RefAttributes<HTMLLabelElement>>;
|
|
3
3
|
export default BitkitSwitch;
|
|
@@ -12,14 +12,15 @@ import { Skeleton } from "@chakra-ui/react/skeleton";
|
|
|
12
12
|
import { Switch } from "@chakra-ui/react/switch";
|
|
13
13
|
//#region lib/components/BitkitSwitch/BitkitSwitch.tsx
|
|
14
14
|
var BitkitSwitchDefault = forwardRef((props, ref) => {
|
|
15
|
-
const { hideLabel, label, size = "lg", state = "default", ...rest } = props;
|
|
15
|
+
const { hideLabel, inputRef, label, size = "lg", state = "default", ...rest } = props;
|
|
16
16
|
return /* @__PURE__ */ jsxs(Switch.Root, {
|
|
17
|
+
ref,
|
|
17
18
|
size,
|
|
18
19
|
readOnly: state === "readOnly",
|
|
19
20
|
disabled: state === "disabled" || state === "skeleton",
|
|
20
21
|
...rest,
|
|
21
22
|
children: [
|
|
22
|
-
/* @__PURE__ */ jsx(Switch.HiddenInput, { ref }),
|
|
23
|
+
/* @__PURE__ */ jsx(Switch.HiddenInput, { ref: inputRef }),
|
|
23
24
|
/* @__PURE__ */ jsx(BitkitSwitchReadOnly, {
|
|
24
25
|
state,
|
|
25
26
|
children: /* @__PURE__ */ jsx(Skeleton, {
|
|
@@ -41,19 +42,19 @@ var BitkitSwitchDefault = forwardRef((props, ref) => {
|
|
|
41
42
|
});
|
|
42
43
|
BitkitSwitchDefault.displayName = "BitkitSwitchDefault";
|
|
43
44
|
var BitkitSwitchDynamicText = forwardRef((props, ref) => {
|
|
44
|
-
const { label, optional, tooltip, helperText, valueText, size = "lg", state = "default", ...rest } = props;
|
|
45
|
+
const { inputRef, label, optional, tooltip, helperText, valueText, size = "lg", state = "default", ...rest } = props;
|
|
45
46
|
const styles = useSlotRecipe({ key: "switch" })({ size });
|
|
46
47
|
return /* @__PURE__ */ jsxs(Switch.Root, {
|
|
48
|
+
ref,
|
|
47
49
|
gap: "4",
|
|
48
50
|
size,
|
|
49
|
-
required: !optional,
|
|
50
51
|
flexDirection: "column",
|
|
51
52
|
alignItems: "flex-start",
|
|
52
53
|
readOnly: state === "readOnly",
|
|
53
54
|
disabled: state === "disabled" || state === "disabledInput" || state === "skeleton",
|
|
54
55
|
...rest,
|
|
55
56
|
children: [
|
|
56
|
-
/* @__PURE__ */ jsx(Switch.HiddenInput, { ref }),
|
|
57
|
+
/* @__PURE__ */ jsx(Switch.HiddenInput, { ref: inputRef }),
|
|
57
58
|
/* @__PURE__ */ jsx(BitkitSwitchLabel, {
|
|
58
59
|
label,
|
|
59
60
|
state,
|
|
@@ -88,18 +89,18 @@ var BitkitSwitchDynamicText = forwardRef((props, ref) => {
|
|
|
88
89
|
});
|
|
89
90
|
BitkitSwitchDynamicText.displayName = "BitkitSwitchDynamicText";
|
|
90
91
|
var BitkitSwitchFixed = forwardRef((props, ref) => {
|
|
91
|
-
const { icon, label, optional, tooltip, helperText, size = "lg", state = "default", ...rest } = props;
|
|
92
|
+
const { icon, inputRef, label, optional, tooltip, helperText, size = "lg", state = "default", ...rest } = props;
|
|
92
93
|
return /* @__PURE__ */ jsxs(Switch.Root, {
|
|
94
|
+
ref,
|
|
93
95
|
gap: "24",
|
|
94
96
|
size,
|
|
95
97
|
width: "100%",
|
|
96
98
|
display: "flex",
|
|
97
|
-
required: !optional,
|
|
98
99
|
readOnly: state === "readOnly",
|
|
99
100
|
disabled: state === "disabled" || state === "disabledInput" || state === "skeleton",
|
|
100
101
|
...rest,
|
|
101
102
|
children: [
|
|
102
|
-
/* @__PURE__ */ jsx(Switch.HiddenInput, { ref }),
|
|
103
|
+
/* @__PURE__ */ jsx(Switch.HiddenInput, { ref: inputRef }),
|
|
103
104
|
/* @__PURE__ */ jsxs(Box, {
|
|
104
105
|
display: "flex",
|
|
105
106
|
flex: "1",
|
|
@@ -134,9 +135,10 @@ var BitkitSwitchFixed = forwardRef((props, ref) => {
|
|
|
134
135
|
});
|
|
135
136
|
BitkitSwitchFixed.displayName = "BitkitSwitchFixed";
|
|
136
137
|
var BitkitSwitch = forwardRef((props, ref) => {
|
|
137
|
-
const { variant, hideLabel, icon, tooltip, optional, valueText, helperText, ...rest } = props;
|
|
138
|
+
const { variant, hideLabel, icon, inputRef, tooltip, optional, valueText, helperText, ...rest } = props;
|
|
138
139
|
if (variant === "dynamic-text") return /* @__PURE__ */ jsx(BitkitSwitchDynamicText, {
|
|
139
140
|
ref,
|
|
141
|
+
inputRef,
|
|
140
142
|
tooltip,
|
|
141
143
|
optional,
|
|
142
144
|
valueText,
|
|
@@ -146,6 +148,7 @@ var BitkitSwitch = forwardRef((props, ref) => {
|
|
|
146
148
|
if (variant === "fixed") return /* @__PURE__ */ jsx(BitkitSwitchFixed, {
|
|
147
149
|
ref,
|
|
148
150
|
icon,
|
|
151
|
+
inputRef,
|
|
149
152
|
tooltip,
|
|
150
153
|
optional,
|
|
151
154
|
helperText,
|
|
@@ -154,6 +157,7 @@ var BitkitSwitch = forwardRef((props, ref) => {
|
|
|
154
157
|
return /* @__PURE__ */ jsx(BitkitSwitchDefault, {
|
|
155
158
|
ref,
|
|
156
159
|
hideLabel,
|
|
160
|
+
inputRef,
|
|
157
161
|
...rest
|
|
158
162
|
});
|
|
159
163
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitSwitch.js","names":[],"sources":["../../../lib/components/BitkitSwitch/BitkitSwitch.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Switch } from '@chakra-ui/react/switch';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { IconCheck, IconCross } from '../../icons';\nimport type {\n BitkitSwitchAnyVariantProps,\n BitkitSwitchDefaultProps,\n BitkitSwitchDynamicTextProps,\n BitkitSwitchFixedProps,\n BitkitSwitchProps,\n} from './BitkitSwitch.types';\nimport BitkitSwitchHelperText from './components/BitkitSwitchHelperText';\nimport BitkitSwitchLabel from './components/BitkitSwitchLabel';\nimport BitkitSwitchReadOnly from './components/BitkitSwitchReadOnly';\nimport BitkitSwitchValueText from './components/BitkitSwitchValueText';\n\nconst BitkitSwitchDefault = forwardRef<
|
|
1
|
+
{"version":3,"file":"BitkitSwitch.js","names":[],"sources":["../../../lib/components/BitkitSwitch/BitkitSwitch.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Switch } from '@chakra-ui/react/switch';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { IconCheck, IconCross } from '../../icons';\nimport type {\n BitkitSwitchAnyVariantProps,\n BitkitSwitchDefaultProps,\n BitkitSwitchDynamicTextProps,\n BitkitSwitchFixedProps,\n BitkitSwitchProps,\n} from './BitkitSwitch.types';\nimport BitkitSwitchHelperText from './components/BitkitSwitchHelperText';\nimport BitkitSwitchLabel from './components/BitkitSwitchLabel';\nimport BitkitSwitchReadOnly from './components/BitkitSwitchReadOnly';\nimport BitkitSwitchValueText from './components/BitkitSwitchValueText';\n\nconst BitkitSwitchDefault = forwardRef<HTMLLabelElement, Omit<BitkitSwitchDefaultProps, 'variant'>>((props, ref) => {\n const { hideLabel, inputRef, label, size = 'lg', state = 'default', ...rest } = props;\n\n return (\n <Switch.Root\n ref={ref}\n size={size}\n readOnly={state === 'readOnly'}\n disabled={state === 'disabled' || state === 'skeleton'}\n {...rest}\n >\n <Switch.HiddenInput ref={inputRef} />\n <BitkitSwitchReadOnly state={state}>\n <Skeleton loading={state === 'skeleton'} borderRadius=\"12\" height={size === 'md' ? '16' : '24'}>\n <Switch.Control>\n <Switch.Thumb />\n <Switch.Indicator fallback={<IconCross size={size === 'md' ? '16' : '24'} />}>\n <IconCheck size={size === 'md' ? '16' : '24'} />\n </Switch.Indicator>\n </Switch.Control>\n </Skeleton>\n </BitkitSwitchReadOnly>\n {/* `srOnly` rather than a hidden label passed in by the consumer: it positions the element\n absolutely, so it leaves the flex flow and the root's gap no longer reserves space for it. */}\n {label && <Switch.Label srOnly={hideLabel}>{label}</Switch.Label>}\n </Switch.Root>\n );\n});\n\nBitkitSwitchDefault.displayName = 'BitkitSwitchDefault';\n\nconst BitkitSwitchDynamicText = forwardRef<HTMLLabelElement, Omit<BitkitSwitchDynamicTextProps, 'variant'>>(\n (props, ref) => {\n const {\n inputRef,\n label,\n optional,\n tooltip,\n helperText,\n valueText,\n size = 'lg',\n state = 'default',\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'switch' });\n const styles = recipe({ size });\n\n return (\n <Switch.Root\n ref={ref}\n gap=\"4\"\n size={size}\n flexDirection=\"column\"\n alignItems=\"flex-start\"\n readOnly={state === 'readOnly'}\n disabled={state === 'disabled' || state === 'disabledInput' || state === 'skeleton'}\n {...rest}\n >\n <Switch.HiddenInput ref={inputRef} />\n <BitkitSwitchLabel label={label} state={state} tooltip={tooltip} optional={optional} />\n <Box css={styles.root}>\n <BitkitSwitchReadOnly state={state}>\n <Skeleton loading={state === 'skeleton'} borderRadius=\"12\" height={size === 'md' ? '16' : '24'}>\n <Switch.Control>\n <Switch.Thumb />\n <Switch.Indicator fallback={<IconCross size={size === 'md' ? '16' : '24'} />}>\n <IconCheck size={size === 'md' ? '16' : '24'} />\n </Switch.Indicator>\n </Switch.Control>\n </Skeleton>\n </BitkitSwitchReadOnly>\n <BitkitSwitchValueText size={size} state={state} valueText={valueText} />\n </Box>\n <BitkitSwitchHelperText state={state} helperText={helperText} />\n </Switch.Root>\n );\n },\n);\n\nBitkitSwitchDynamicText.displayName = 'BitkitSwitchDynamicText';\n\nconst BitkitSwitchFixed = forwardRef<HTMLLabelElement, Omit<BitkitSwitchFixedProps, 'variant'>>((props, ref) => {\n const { icon, inputRef, label, optional, tooltip, helperText, size = 'lg', state = 'default', ...rest } = props;\n\n return (\n <Switch.Root\n ref={ref}\n gap=\"24\"\n size={size}\n width=\"100%\"\n display=\"flex\"\n readOnly={state === 'readOnly'}\n disabled={state === 'disabled' || state === 'disabledInput' || state === 'skeleton'}\n {...rest}\n >\n <Switch.HiddenInput ref={inputRef} />\n <Box display=\"flex\" flex=\"1\" flexDirection=\"column\" gap=\"4\" minWidth=\"0\">\n <BitkitSwitchLabel icon={icon} label={label} state={state} tooltip={tooltip} optional={optional} />\n <BitkitSwitchHelperText state={state} helperText={helperText} />\n </Box>\n <BitkitSwitchReadOnly state={state}>\n <Skeleton loading={state === 'skeleton'} borderRadius=\"12\" height={size === 'md' ? '16' : '24'}>\n <Switch.Control>\n <Switch.Thumb />\n <Switch.Indicator fallback={<IconCross size={size === 'md' ? '16' : '24'} />}>\n <IconCheck size={size === 'md' ? '16' : '24'} />\n </Switch.Indicator>\n </Switch.Control>\n </Skeleton>\n </BitkitSwitchReadOnly>\n </Switch.Root>\n );\n});\n\nBitkitSwitchFixed.displayName = 'BitkitSwitchFixed';\n\nconst BitkitSwitch = forwardRef<HTMLLabelElement, BitkitSwitchProps>((props, ref) => {\n // At runtime (e.g. a shared Storybook meta) sibling-variant props may still flow in, so split them\n // off here and forward only what the chosen variant consumes — otherwise they leak to the DOM.\n const { variant, hideLabel, icon, inputRef, tooltip, optional, valueText, helperText, ...rest } =\n props as BitkitSwitchAnyVariantProps;\n\n if (variant === 'dynamic-text') {\n return (\n <BitkitSwitchDynamicText\n ref={ref}\n inputRef={inputRef}\n tooltip={tooltip}\n optional={optional}\n valueText={valueText}\n helperText={helperText}\n {...rest}\n />\n );\n }\n\n if (variant === 'fixed') {\n return (\n <BitkitSwitchFixed\n ref={ref}\n icon={icon}\n inputRef={inputRef}\n tooltip={tooltip}\n optional={optional}\n helperText={helperText as ReactNode}\n {...rest}\n />\n );\n }\n\n return (\n <BitkitSwitchDefault\n ref={ref}\n hideLabel={hideLabel}\n inputRef={inputRef}\n {...(rest as Omit<BitkitSwitchDefaultProps, 'variant'>)}\n />\n );\n});\n\nBitkitSwitch.displayName = 'BitkitSwitch';\n\nexport default BitkitSwitch;\n"],"mappings":"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"}
|
|
@@ -1,12 +1,17 @@
|
|
|
1
1
|
import { SwitchRootProps } from '@chakra-ui/react/switch';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
2
|
+
import { ReactNode, Ref } from 'react';
|
|
3
3
|
import { BitkitIconComponent } from '../../icons';
|
|
4
4
|
export type OnOff = {
|
|
5
5
|
on: ReactNode;
|
|
6
6
|
off: ReactNode;
|
|
7
7
|
};
|
|
8
|
-
export interface BitkitSwitchDefaultProps extends Omit<SwitchRootProps, 'disabled' | 'label' | 'readOnly'
|
|
8
|
+
export interface BitkitSwitchDefaultProps extends Omit<SwitchRootProps, 'disabled' | 'label' | 'readOnly'> {
|
|
9
9
|
variant?: 'default';
|
|
10
|
+
/**
|
|
11
|
+
* Ref to the visually hidden `input`. `ref` points at the switch root — the visible element — so
|
|
12
|
+
* it can anchor a tooltip or popover; use this one for form libraries that register the input.
|
|
13
|
+
*/
|
|
14
|
+
inputRef?: Ref<HTMLInputElement>;
|
|
10
15
|
/**
|
|
11
16
|
* Keeps the label as the switch's accessible name but takes it off the screen. The hidden input
|
|
12
17
|
* gets its name from a label element the switch owns, so neither `aria-label` nor `ids` can
|
|
@@ -19,8 +24,13 @@ export interface BitkitSwitchDefaultProps extends Omit<SwitchRootProps, 'disable
|
|
|
19
24
|
label?: ReactNode;
|
|
20
25
|
state?: 'default' | 'disabled' | 'readOnly' | 'skeleton';
|
|
21
26
|
}
|
|
22
|
-
export interface BitkitSwitchDynamicTextProps extends Omit<SwitchRootProps, 'disabled' | 'label' | 'readOnly'
|
|
27
|
+
export interface BitkitSwitchDynamicTextProps extends Omit<SwitchRootProps, 'disabled' | 'label' | 'readOnly'> {
|
|
23
28
|
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>;
|
|
24
34
|
tooltip?: string;
|
|
25
35
|
optional?: boolean;
|
|
26
36
|
label?: ReactNode;
|
|
@@ -28,8 +38,13 @@ export interface BitkitSwitchDynamicTextProps extends Omit<SwitchRootProps, 'dis
|
|
|
28
38
|
helperText?: ReactNode | OnOff;
|
|
29
39
|
state?: 'default' | 'disabled' | 'disabledInput' | 'readOnly' | 'skeleton';
|
|
30
40
|
}
|
|
31
|
-
export interface BitkitSwitchFixedProps extends Omit<SwitchRootProps, 'disabled' | 'label' | 'readOnly'
|
|
41
|
+
export interface BitkitSwitchFixedProps extends Omit<SwitchRootProps, 'disabled' | 'label' | 'readOnly'> {
|
|
32
42
|
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>;
|
|
33
48
|
/** Icon before the label. */
|
|
34
49
|
icon?: BitkitIconComponent;
|
|
35
50
|
tooltip?: string;
|
|
@@ -40,9 +55,10 @@ export interface BitkitSwitchFixedProps extends Omit<SwitchRootProps, 'disabled'
|
|
|
40
55
|
state?: 'default' | 'disabled' | 'disabledInput' | 'readOnly' | 'skeleton';
|
|
41
56
|
}
|
|
42
57
|
export type BitkitSwitchProps = BitkitSwitchDefaultProps | BitkitSwitchDynamicTextProps | BitkitSwitchFixedProps;
|
|
43
|
-
export type BitkitSwitchAnyVariantProps = Omit<SwitchRootProps, 'disabled' | 'label' | 'readOnly'
|
|
58
|
+
export type BitkitSwitchAnyVariantProps = Omit<SwitchRootProps, 'disabled' | 'label' | 'readOnly'> & {
|
|
44
59
|
variant?: BitkitSwitchProps['variant'];
|
|
45
60
|
hideLabel?: boolean;
|
|
61
|
+
inputRef?: Ref<HTMLInputElement>;
|
|
46
62
|
icon?: BitkitIconComponent;
|
|
47
63
|
tooltip?: string;
|
|
48
64
|
optional?: boolean;
|
|
@@ -66,7 +66,7 @@ export { default as BitkitSelect, type BitkitSelectProps } from './BitkitSelect/
|
|
|
66
66
|
export { default as BitkitSelectableTag, type BitkitSelectableTagItemProps, type BitkitSelectableTagProps, } from './BitkitSelectableTag/BitkitSelectableTag';
|
|
67
67
|
export { default as BitkitSelectMenu, type BitkitSelectMenuProps } from './BitkitSelectMenu/BitkitSelectMenu';
|
|
68
68
|
export { default as BitkitSelectMenuAction, type BitkitSelectMenuActionProps, } from './BitkitSelectMenu/BitkitSelectMenuAction';
|
|
69
|
-
export { default as BitkitSettingsCard, type BitkitSettingsCardContentProps, type BitkitSettingsCardProps, type BitkitSettingsCardStatusProps, } from './BitkitSettingsCard/BitkitSettingsCard';
|
|
69
|
+
export { default as BitkitSettingsCard, type BitkitSettingsCardContentProps, type BitkitSettingsCardFooterProps, type BitkitSettingsCardProps, type BitkitSettingsCardStatus, type BitkitSettingsCardStatusMessageProps, type BitkitSettingsCardStatusProps, } from './BitkitSettingsCard/BitkitSettingsCard';
|
|
70
70
|
export { default as BitkitSkeletonGroup, type BitkitSkeletonGroupProps, } from './BitkitSkeletonGroup/BitkitSkeletonGroup';
|
|
71
71
|
export { default as BitkitSpinner, type BitkitSpinnerProps } from './BitkitSpinner/BitkitSpinner';
|
|
72
72
|
export { default as BitkitSplitButton, type BitkitSplitButtonProps } from './BitkitSplitButton/BitkitSplitButton';
|
|
@@ -1,2 +1,38 @@
|
|
|
1
|
-
declare const settingsCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "footer" | "
|
|
1
|
+
declare const settingsCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "footer" | "status" | "root" | "statusIcon" | "statusLabel" | "contentBody" | "contentActions" | "statusMessage" | "statusMessageText" | "statusHelperText", {
|
|
2
|
+
status: {
|
|
3
|
+
error: {
|
|
4
|
+
statusIcon: {
|
|
5
|
+
color: "icon/negative";
|
|
6
|
+
};
|
|
7
|
+
statusLabel: {
|
|
8
|
+
color: "text/negative";
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
failed: {
|
|
12
|
+
statusIcon: {
|
|
13
|
+
color: "icon/negative";
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
'in-progress': {
|
|
17
|
+
statusIcon: {
|
|
18
|
+
color: "icon/warning";
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
neutral: {
|
|
22
|
+
statusIcon: {
|
|
23
|
+
color: "icon/secondary";
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
success: {
|
|
27
|
+
statusIcon: {
|
|
28
|
+
color: "icon/positive";
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
warning: {
|
|
32
|
+
statusIcon: {
|
|
33
|
+
color: "icon/warning";
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
}>;
|
|
2
38
|
export default settingsCardSlotRecipe;
|
|
@@ -9,10 +9,11 @@ var settingsCardSlotRecipe = defineSlotRecipe({
|
|
|
9
9
|
"contentBody",
|
|
10
10
|
"contentActions",
|
|
11
11
|
"footer",
|
|
12
|
-
"
|
|
12
|
+
"status",
|
|
13
13
|
"statusIcon",
|
|
14
|
-
"
|
|
15
|
-
"
|
|
14
|
+
"statusLabel",
|
|
15
|
+
"statusMessage",
|
|
16
|
+
"statusMessageText",
|
|
16
17
|
"statusHelperText"
|
|
17
18
|
],
|
|
18
19
|
base: {
|
|
@@ -35,34 +36,53 @@ var settingsCardSlotRecipe = defineSlotRecipe({
|
|
|
35
36
|
footer: {
|
|
36
37
|
alignItems: "center",
|
|
37
38
|
display: "flex",
|
|
38
|
-
gap: "
|
|
39
|
-
justifyContent: "space-between"
|
|
39
|
+
gap: "16",
|
|
40
|
+
justifyContent: "space-between",
|
|
41
|
+
"&:has([data-slot=\"status-message\"])": { paddingBlockEnd: "12" }
|
|
40
42
|
},
|
|
41
|
-
|
|
43
|
+
status: {
|
|
42
44
|
alignItems: "flex-start",
|
|
43
45
|
display: "flex",
|
|
44
|
-
gap: "4"
|
|
46
|
+
gap: "4",
|
|
47
|
+
minWidth: 0,
|
|
48
|
+
paddingBlock: "2"
|
|
45
49
|
},
|
|
46
50
|
statusIcon: {
|
|
47
51
|
flexShrink: 0,
|
|
48
|
-
|
|
49
|
-
top: "4",
|
|
50
|
-
color: "icon/secondary"
|
|
52
|
+
marginBlockStart: "2"
|
|
51
53
|
},
|
|
52
|
-
|
|
54
|
+
statusLabel: {
|
|
53
55
|
color: "text/body",
|
|
54
|
-
textStyle: "body/md/regular"
|
|
56
|
+
textStyle: "body/md/regular",
|
|
57
|
+
wordBreak: "break-word"
|
|
55
58
|
},
|
|
56
|
-
|
|
59
|
+
statusMessage: { minWidth: 0 },
|
|
60
|
+
statusMessageText: {
|
|
57
61
|
color: "text/body",
|
|
58
|
-
|
|
62
|
+
paddingInlineStart: "20",
|
|
63
|
+
textStyle: "body/sm/regular",
|
|
64
|
+
wordBreak: "break-word"
|
|
59
65
|
},
|
|
60
66
|
statusHelperText: {
|
|
61
67
|
color: "text/secondary",
|
|
68
|
+
marginBlockStart: "8",
|
|
62
69
|
paddingInlineStart: "20",
|
|
63
|
-
textStyle: "body/sm/regular"
|
|
70
|
+
textStyle: "body/sm/regular",
|
|
71
|
+
wordBreak: "break-word"
|
|
64
72
|
}
|
|
65
|
-
}
|
|
73
|
+
},
|
|
74
|
+
variants: { status: {
|
|
75
|
+
error: {
|
|
76
|
+
statusIcon: { color: "icon/negative" },
|
|
77
|
+
statusLabel: { color: "text/negative" }
|
|
78
|
+
},
|
|
79
|
+
failed: { statusIcon: { color: "icon/negative" } },
|
|
80
|
+
"in-progress": { statusIcon: { color: "icon/warning" } },
|
|
81
|
+
neutral: { statusIcon: { color: "icon/secondary" } },
|
|
82
|
+
success: { statusIcon: { color: "icon/positive" } },
|
|
83
|
+
warning: { statusIcon: { color: "icon/warning" } }
|
|
84
|
+
} },
|
|
85
|
+
defaultVariants: { status: "neutral" }
|
|
66
86
|
});
|
|
67
87
|
//#endregion
|
|
68
88
|
export { settingsCardSlotRecipe as default };
|
|
@@ -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 '
|
|
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: '16',\n justifyContent: 'space-between',\n // A status message wraps to more than one line, and the design gives that footer a deeper\n // bottom padding than the single-line one the Card recipe sets.\n '&:has([data-slot=\"status-message\"])': {\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/secondary',\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: 'icon/warning' },\n },\n neutral: {\n statusIcon: { color: 'icon/secondary' },\n },\n success: {\n statusIcon: { color: 'icon/positive' },\n },\n // No-op for the default IconWarningYellow, which keeps its own fixed colors — this is here\n // so a themeable icon passed via `icon` is coloured like every other status.\n warning: {\n statusIcon: { color: 'icon/warning' },\n },\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;GAGhB,yCAAuC,EACrC,iBAAiB,KACnB;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,eAAe,EACtC;EACA,SAAS,EACP,YAAY,EAAE,OAAO,iBAAiB,EACxC;EACA,SAAS,EACP,YAAY,EAAE,OAAO,gBAAgB,EACvC;EAGA,SAAS,EACP,YAAY,EAAE,OAAO,eAAe,EACtC;CACF,EACF;CACA,iBAAiB,EACf,QAAQ,UACV;AACF,CAAC"}
|
|
@@ -2275,7 +2275,43 @@ declare const slotRecipes: {
|
|
|
2275
2275
|
};
|
|
2276
2276
|
};
|
|
2277
2277
|
}>;
|
|
2278
|
-
settingsCard: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "footer" | "
|
|
2278
|
+
settingsCard: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "footer" | "status" | "root" | "statusIcon" | "statusLabel" | "contentBody" | "contentActions" | "statusMessage" | "statusMessageText" | "statusHelperText", {
|
|
2279
|
+
status: {
|
|
2280
|
+
error: {
|
|
2281
|
+
statusIcon: {
|
|
2282
|
+
color: "icon/negative";
|
|
2283
|
+
};
|
|
2284
|
+
statusLabel: {
|
|
2285
|
+
color: "text/negative";
|
|
2286
|
+
};
|
|
2287
|
+
};
|
|
2288
|
+
failed: {
|
|
2289
|
+
statusIcon: {
|
|
2290
|
+
color: "icon/negative";
|
|
2291
|
+
};
|
|
2292
|
+
};
|
|
2293
|
+
'in-progress': {
|
|
2294
|
+
statusIcon: {
|
|
2295
|
+
color: "icon/warning";
|
|
2296
|
+
};
|
|
2297
|
+
};
|
|
2298
|
+
neutral: {
|
|
2299
|
+
statusIcon: {
|
|
2300
|
+
color: "icon/secondary";
|
|
2301
|
+
};
|
|
2302
|
+
};
|
|
2303
|
+
success: {
|
|
2304
|
+
statusIcon: {
|
|
2305
|
+
color: "icon/positive";
|
|
2306
|
+
};
|
|
2307
|
+
};
|
|
2308
|
+
warning: {
|
|
2309
|
+
statusIcon: {
|
|
2310
|
+
color: "icon/warning";
|
|
2311
|
+
};
|
|
2312
|
+
};
|
|
2313
|
+
};
|
|
2314
|
+
}>;
|
|
2279
2315
|
splitButton: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "trigger" | "action", {
|
|
2280
2316
|
variant: {
|
|
2281
2317
|
primary: {
|