@bitrise/bitkit-v2 0.3.441-beta.2785 → 0.3.441-beta.2787
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.d.ts +1 -1
- package/dist/components/BitkitSwitch/BitkitSwitch.js +13 -13
- package/dist/components/BitkitSwitch/BitkitSwitch.js.map +1 -1
- package/dist/components/BitkitSwitch/BitkitSwitch.types.d.ts +13 -20
- package/dist/theme/slot-recipes/SettingsCard.recipe.js +7 -3
- package/dist/theme/slot-recipes/SettingsCard.recipe.js.map +1 -1
- 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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"}
|
|
@@ -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<HTMLInputElement>>;
|
|
3
3
|
export default BitkitSwitch;
|
|
@@ -12,15 +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,
|
|
15
|
+
const { hideLabel, rootRef, label, size = "lg", state = "default", ...rest } = props;
|
|
16
16
|
return /* @__PURE__ */ jsxs(Switch.Root, {
|
|
17
|
-
ref,
|
|
17
|
+
ref: rootRef,
|
|
18
18
|
size,
|
|
19
19
|
readOnly: state === "readOnly",
|
|
20
20
|
disabled: state === "disabled" || state === "skeleton",
|
|
21
21
|
...rest,
|
|
22
22
|
children: [
|
|
23
|
-
/* @__PURE__ */ jsx(Switch.HiddenInput, { ref
|
|
23
|
+
/* @__PURE__ */ jsx(Switch.HiddenInput, { ref }),
|
|
24
24
|
/* @__PURE__ */ jsx(BitkitSwitchReadOnly, {
|
|
25
25
|
state,
|
|
26
26
|
children: /* @__PURE__ */ jsx(Skeleton, {
|
|
@@ -42,10 +42,10 @@ var BitkitSwitchDefault = forwardRef((props, ref) => {
|
|
|
42
42
|
});
|
|
43
43
|
BitkitSwitchDefault.displayName = "BitkitSwitchDefault";
|
|
44
44
|
var BitkitSwitchDynamicText = forwardRef((props, ref) => {
|
|
45
|
-
const {
|
|
45
|
+
const { rootRef, label, optional, tooltip, helperText, valueText, size = "lg", state = "default", ...rest } = props;
|
|
46
46
|
const styles = useSlotRecipe({ key: "switch" })({ size });
|
|
47
47
|
return /* @__PURE__ */ jsxs(Switch.Root, {
|
|
48
|
-
ref,
|
|
48
|
+
ref: rootRef,
|
|
49
49
|
gap: "4",
|
|
50
50
|
size,
|
|
51
51
|
flexDirection: "column",
|
|
@@ -54,7 +54,7 @@ var BitkitSwitchDynamicText = forwardRef((props, ref) => {
|
|
|
54
54
|
disabled: state === "disabled" || state === "disabledInput" || state === "skeleton",
|
|
55
55
|
...rest,
|
|
56
56
|
children: [
|
|
57
|
-
/* @__PURE__ */ jsx(Switch.HiddenInput, { ref
|
|
57
|
+
/* @__PURE__ */ jsx(Switch.HiddenInput, { ref }),
|
|
58
58
|
/* @__PURE__ */ jsx(BitkitSwitchLabel, {
|
|
59
59
|
label,
|
|
60
60
|
state,
|
|
@@ -89,9 +89,9 @@ var BitkitSwitchDynamicText = forwardRef((props, ref) => {
|
|
|
89
89
|
});
|
|
90
90
|
BitkitSwitchDynamicText.displayName = "BitkitSwitchDynamicText";
|
|
91
91
|
var BitkitSwitchFixed = forwardRef((props, ref) => {
|
|
92
|
-
const { icon,
|
|
92
|
+
const { icon, rootRef, label, optional, tooltip, helperText, size = "lg", state = "default", ...rest } = props;
|
|
93
93
|
return /* @__PURE__ */ jsxs(Switch.Root, {
|
|
94
|
-
ref,
|
|
94
|
+
ref: rootRef,
|
|
95
95
|
gap: "24",
|
|
96
96
|
size,
|
|
97
97
|
width: "100%",
|
|
@@ -100,7 +100,7 @@ var BitkitSwitchFixed = forwardRef((props, ref) => {
|
|
|
100
100
|
disabled: state === "disabled" || state === "disabledInput" || state === "skeleton",
|
|
101
101
|
...rest,
|
|
102
102
|
children: [
|
|
103
|
-
/* @__PURE__ */ jsx(Switch.HiddenInput, { ref
|
|
103
|
+
/* @__PURE__ */ jsx(Switch.HiddenInput, { ref }),
|
|
104
104
|
/* @__PURE__ */ jsxs(Box, {
|
|
105
105
|
display: "flex",
|
|
106
106
|
flex: "1",
|
|
@@ -135,10 +135,10 @@ var BitkitSwitchFixed = forwardRef((props, ref) => {
|
|
|
135
135
|
});
|
|
136
136
|
BitkitSwitchFixed.displayName = "BitkitSwitchFixed";
|
|
137
137
|
var BitkitSwitch = forwardRef((props, ref) => {
|
|
138
|
-
const { variant, hideLabel, icon,
|
|
138
|
+
const { variant, hideLabel, icon, rootRef, tooltip, optional, valueText, helperText, ...rest } = props;
|
|
139
139
|
if (variant === "dynamic-text") return /* @__PURE__ */ jsx(BitkitSwitchDynamicText, {
|
|
140
140
|
ref,
|
|
141
|
-
|
|
141
|
+
rootRef,
|
|
142
142
|
tooltip,
|
|
143
143
|
optional,
|
|
144
144
|
valueText,
|
|
@@ -148,7 +148,7 @@ var BitkitSwitch = forwardRef((props, ref) => {
|
|
|
148
148
|
if (variant === "fixed") return /* @__PURE__ */ jsx(BitkitSwitchFixed, {
|
|
149
149
|
ref,
|
|
150
150
|
icon,
|
|
151
|
-
|
|
151
|
+
rootRef,
|
|
152
152
|
tooltip,
|
|
153
153
|
optional,
|
|
154
154
|
helperText,
|
|
@@ -157,7 +157,7 @@ var BitkitSwitch = forwardRef((props, ref) => {
|
|
|
157
157
|
return /* @__PURE__ */ jsx(BitkitSwitchDefault, {
|
|
158
158
|
ref,
|
|
159
159
|
hideLabel,
|
|
160
|
-
|
|
160
|
+
rootRef,
|
|
161
161
|
...rest
|
|
162
162
|
});
|
|
163
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<HTMLInputElement, Omit<BitkitSwitchDefaultProps, 'variant'>>((props, ref) => {\n const { hideLabel, rootRef, label, size = 'lg', state = 'default', ...rest } = props;\n\n return (\n <Switch.Root\n ref={rootRef}\n size={size}\n readOnly={state === 'readOnly'}\n disabled={state === 'disabled' || state === 'skeleton'}\n {...rest}\n >\n <Switch.HiddenInput ref={ref} />\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<HTMLInputElement, Omit<BitkitSwitchDynamicTextProps, 'variant'>>(\n (props, ref) => {\n const { rootRef, label, optional, tooltip, helperText, valueText, size = 'lg', state = 'default', ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'switch' });\n const styles = recipe({ size });\n\n return (\n <Switch.Root\n ref={rootRef}\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={ref} />\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<HTMLInputElement, Omit<BitkitSwitchFixedProps, 'variant'>>((props, ref) => {\n const { icon, rootRef, label, optional, tooltip, helperText, size = 'lg', state = 'default', ...rest } = props;\n\n return (\n <Switch.Root\n ref={rootRef}\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={ref} />\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<HTMLInputElement, 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, rootRef, tooltip, optional, valueText, helperText, ...rest } =\n props as BitkitSwitchAnyVariantProps;\n\n if (variant === 'dynamic-text') {\n return (\n <BitkitSwitchDynamicText\n ref={ref}\n rootRef={rootRef}\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 rootRef={rootRef}\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 rootRef={rootRef}\n {...(rest as Omit<BitkitSwitchDefaultProps, 'variant'>)}\n />\n );\n});\n\nBitkitSwitch.displayName = 'BitkitSwitch';\n\nexport default BitkitSwitch;\n"],"mappings":"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"}
|
|
@@ -5,13 +5,16 @@ export type OnOff = {
|
|
|
5
5
|
on: ReactNode;
|
|
6
6
|
off: ReactNode;
|
|
7
7
|
};
|
|
8
|
-
|
|
8
|
+
/**
|
|
9
|
+
* Props every switch variant shares. `ref` goes to the hidden `input`, the same as BitkitCheckbox
|
|
10
|
+
* and BitkitRadio, so form libraries can register it.
|
|
11
|
+
*/
|
|
12
|
+
interface BitkitSwitchSharedProps extends Omit<SwitchRootProps, 'disabled' | 'label' | 'readOnly'> {
|
|
13
|
+
/** Ref to the switch root — the visible element. Use it to anchor a tooltip or popover. */
|
|
14
|
+
rootRef?: Ref<HTMLLabelElement>;
|
|
15
|
+
}
|
|
16
|
+
export interface BitkitSwitchDefaultProps extends BitkitSwitchSharedProps {
|
|
9
17
|
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>;
|
|
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 {};
|
|
@@ -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",
|
|
@@ -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: '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;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,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"}
|