@tidbcloud/uikit 2.0.0-beta.91 → 2.0.0-beta.93

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.
Files changed (10) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/biz/PageShell/index.cjs +27 -8
  3. package/dist/biz/PageShell/index.d.cts +0 -1
  4. package/dist/biz/PageShell/index.d.ts +0 -1
  5. package/dist/biz/PageShell/index.js +27 -8
  6. package/dist/biz/index.cjs +0 -1
  7. package/dist/biz/index.js +1 -2
  8. package/dist/theme/theme.cjs +69 -45
  9. package/dist/theme/theme.js +69 -45
  10. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.0.0-beta.93
4
+
5
+ ### Patch Changes
6
+
7
+ - feat(theme): enhance disabled state handling for buttons ( ([#350](https://github.com/tidbcloud/tidbcloud-uikit/pull/350)))
8
+ - feat(changelog): enhance changelog generation with pull request links ( ([#349](https://github.com/tidbcloud/tidbcloud-uikit/pull/349)))
9
+ - chore: update package configuration and add custom changelog generation scripts ( ([#348](https://github.com/tidbcloud/tidbcloud-uikit/pull/348)))
10
+ - refactor(PageShell): enhance Box component usage with clsx and mergeS… ( ([#347](https://github.com/tidbcloud/tidbcloud-uikit/pull/347)))
11
+
12
+ ## 2.0.0-beta.92
13
+
14
+ ### Patch Changes
15
+
16
+ - fix unstyled input and clean sizes check
17
+
3
18
  ## 2.0.0-beta.91
4
19
 
5
20
  ### Patch Changes
package/dist/biz/PageShell/index.cjs CHANGED
@@ -9,23 +9,27 @@ const index$1 = require("../../icons/index.cjs");
9
9
  ;/* empty css */
10
10
  ;/* empty css */
11
11
  const index = require("../../primitive/Typography/index.cjs");
12
- require("clsx");
12
+ const clsx = require("clsx");
13
13
  const styles = require("../../utils/styles.cjs");
14
- const Group = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Group/Group.cjs");
15
14
  const Box = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/Box/Box.cjs");
15
+ const Group = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Group/Group.cjs");
16
16
  const ActionIcon = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/ActionIcon/ActionIcon.cjs");
17
17
  const PageHeader = ({ sticky, leftSection, rightSection, children, ...restProps }) => {
18
18
  const rightExisted = !!rightSection;
19
19
  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
20
20
  Group.Group,
21
21
  {
22
+ ...restProps,
23
+ className: clsx.clsx(restProps == null ? void 0 : restProps.className, "pageshell-header"),
22
24
  wrap: "nowrap",
23
25
  justify: "space-between",
24
26
  gap: "xl",
25
- h: 56,
26
- px: 24,
27
- ...restProps,
28
27
  sx: styles.mergeSxList([
28
+ {
29
+ paddingLeft: 24,
30
+ paddingRight: 24,
31
+ marginBottom: 12
32
+ },
29
33
  sticky ? (theme) => ({
30
34
  position: "sticky",
31
35
  zIndex: 1,
@@ -89,12 +93,27 @@ const PageShell = ({
89
93
  children: title
90
94
  }
91
95
  ),
92
- /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { className: bodyClassName, px: 24, pb: 16, pt: headerVisible ? 0 : 16, ...bodyProps, children })
96
+ /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
97
+ Box.Box,
98
+ {
99
+ ...bodyProps,
100
+ className: clsx.clsx(bodyClassName, bodyProps == null ? void 0 : bodyProps.className, "pageshell-body"),
101
+ sx: styles.mergeSxList([
102
+ {
103
+ paddingLeft: 24,
104
+ paddingRight: 24,
105
+ paddingBottom: 16,
106
+ paddingTop: headerVisible ? 0 : 16
107
+ },
108
+ bodyProps == null ? void 0 : bodyProps.sx
109
+ ]),
110
+ children
111
+ }
112
+ )
93
113
  ] });
94
114
  if (wrapped) {
95
- return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { className, ...wrapperProps, children: page });
115
+ return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { ...wrapperProps, className: clsx.clsx(className, wrapperProps == null ? void 0 : wrapperProps.className, "pageshell-wrapper"), children: page });
96
116
  }
97
117
  return page;
98
118
  };
99
- exports.PageHeader = PageHeader;
100
119
  exports.PageShell = PageShell;
package/dist/biz/PageShell/index.d.cts CHANGED
@@ -9,7 +9,6 @@ export interface PageHeaderProps extends GroupProps {
9
9
  leftSection?: React.ReactNode;
10
10
  rightSection?: React.ReactNode;
11
11
  }
12
- export declare const PageHeader: ({ sticky, leftSection, rightSection, children, ...restProps }: PageHeaderProps) => import("react/jsx-runtime.js").JSX.Element;
13
12
  /**
14
13
  * From https://github.com/tidbcloud/dbaas-ui/blob/427559c99458ccd2e8b0d6c77ed44baa603d5ef7/src/dbaas/layouts/v4/page/PageShell.tsx#L7
15
14
  */
package/dist/biz/PageShell/index.d.ts CHANGED
@@ -9,7 +9,6 @@ export interface PageHeaderProps extends GroupProps {
9
9
  leftSection?: React.ReactNode;
10
10
  rightSection?: React.ReactNode;
11
11
  }
12
- export declare const PageHeader: ({ sticky, leftSection, rightSection, children, ...restProps }: PageHeaderProps) => import("react/jsx-runtime.js").JSX.Element;
13
12
  /**
14
13
  * From https://github.com/tidbcloud/dbaas-ui/blob/427559c99458ccd2e8b0d6c77ed44baa603d5ef7/src/dbaas/layouts/v4/page/PageShell.tsx#L7
15
14
  */
package/dist/biz/PageShell/index.js CHANGED
@@ -7,23 +7,27 @@ import { IconChevronLeft } from "../../icons/index.js";
7
7
  /* empty css */
8
8
  /* empty css */
9
9
  import { Typography } from "../../primitive/Typography/index.js";
10
- import "clsx";
10
+ import { clsx } from "clsx";
11
11
  import { mergeSxList } from "../../utils/styles.js";
12
- import { Group } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Group/Group.js";
13
12
  import { Box } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/Box/Box.js";
13
+ import { Group } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Group/Group.js";
14
14
  import { ActionIcon } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/ActionIcon/ActionIcon.js";
15
15
  const PageHeader = ({ sticky, leftSection, rightSection, children, ...restProps }) => {
16
16
  const rightExisted = !!rightSection;
17
17
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
18
18
  Group,
19
19
  {
20
+ ...restProps,
21
+ className: clsx(restProps == null ? void 0 : restProps.className, "pageshell-header"),
20
22
  wrap: "nowrap",
21
23
  justify: "space-between",
22
24
  gap: "xl",
23
- h: 56,
24
- px: 24,
25
- ...restProps,
26
25
  sx: mergeSxList([
26
+ {
27
+ paddingLeft: 24,
28
+ paddingRight: 24,
29
+ marginBottom: 12
30
+ },
27
31
  sticky ? (theme) => ({
28
32
  position: "sticky",
29
33
  zIndex: 1,
@@ -87,14 +91,29 @@ const PageShell = ({
87
91
  children: title
88
92
  }
89
93
  ),
90
- /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { className: bodyClassName, px: 24, pb: 16, pt: headerVisible ? 0 : 16, ...bodyProps, children })
94
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
95
+ Box,
96
+ {
97
+ ...bodyProps,
98
+ className: clsx(bodyClassName, bodyProps == null ? void 0 : bodyProps.className, "pageshell-body"),
99
+ sx: mergeSxList([
100
+ {
101
+ paddingLeft: 24,
102
+ paddingRight: 24,
103
+ paddingBottom: 16,
104
+ paddingTop: headerVisible ? 0 : 16
105
+ },
106
+ bodyProps == null ? void 0 : bodyProps.sx
107
+ ]),
108
+ children
109
+ }
110
+ )
91
111
  ] });
92
112
  if (wrapped) {
93
- return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { className, ...wrapperProps, children: page });
113
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { ...wrapperProps, className: clsx(className, wrapperProps == null ? void 0 : wrapperProps.className, "pageshell-wrapper"), children: page });
94
114
  }
95
115
  return page;
96
116
  };
97
117
  export {
98
- PageHeader,
99
118
  PageShell
100
119
  };
package/dist/biz/index.cjs CHANGED
@@ -46,7 +46,6 @@ exports.LabelTooltip = index$5.LabelTooltip;
46
46
  exports.Tree = index$7.Tree;
47
47
  exports.TransferTree = index$8.TransferTree;
48
48
  exports.PropertyCard = index$9.PropertyCard;
49
- exports.PageHeader = index$a.PageHeader;
50
49
  exports.PageShell = index$a.PageShell;
51
50
  exports.TimeRangePicker = index$b.TimeRangePicker;
52
51
  exports.DateTimePicker = index$c.DateTimePicker;
package/dist/biz/index.js CHANGED
@@ -7,7 +7,7 @@ import { LabelTooltip } from "./LabelTooltip/index.js";
7
7
  import { Tree } from "./Tree/index.js";
8
8
  import { TransferTree } from "./TransferTree/index.js";
9
9
  import { PropertyCard } from "./PropertyCard/index.js";
10
- import { PageHeader, PageShell } from "./PageShell/index.js";
10
+ import { PageShell } from "./PageShell/index.js";
11
11
  import { TimeRangePicker } from "./TimeRangePicker/index.js";
12
12
  import { DateTimePicker } from "./DateTimePicker/index.js";
13
13
  import { validPhoneNumber } from "./PhoneInput/helper.js";
@@ -129,7 +129,6 @@ export {
129
129
  Memo_MRT_TableBody,
130
130
  Memo_MRT_TableBodyCell,
131
131
  Memo_MRT_TableBodyRow,
132
- PageHeader,
133
132
  PageShell,
134
133
  PhoneInput,
135
134
  ProTable,
package/dist/theme/theme.cjs CHANGED
@@ -15,35 +15,67 @@ const Colors = Object.keys(colors);
15
15
  function themeColor(theme2, color, shade) {
16
16
  return getThemeColor.getThemeColor([color, shade].join("."), theme2);
17
17
  }
18
+ const InputSizes = {
19
+ xl: 48,
20
+ lg: 44,
21
+ md: 40,
22
+ sm: 32,
23
+ xs: 28
24
+ };
25
+ const InputFontSizes = {
26
+ xl: 16,
27
+ lg: 14,
28
+ md: 14,
29
+ sm: 13,
30
+ xs: 12
31
+ };
18
32
  function getInputStyles(theme2, props) {
19
- const sizes = {
20
- xl: 48,
21
- lg: 44,
22
- md: 40,
23
- sm: 32,
24
- xs: 28
25
- };
26
- const fontSizes = {
27
- xl: 16,
28
- lg: 14,
29
- md: 14,
30
- sm: 13,
31
- xs: 12
32
- };
33
- const size = sizes[props.size ?? "md"];
34
- const inputFontSize = fontSizes[props.size ?? "md"];
35
- const inputSize = {
36
- height: size,
37
- minHeight: size,
38
- lineHeight: `${size - 2}px`,
39
- fontSize: inputFontSize
40
- };
41
- const passwordInnerInputSize = {
33
+ const size = InputSizes[props.size ?? "md"];
34
+ const inputFontSize = InputFontSizes[props.size ?? "md"];
35
+ const inputSize = size ? {
36
+ "--input-size": `${size}px`,
37
+ "--input-height": `${size}px`,
38
+ "--input-line-height": `${size - 2}px`,
39
+ "--input-fz": `${inputFontSize}px`
40
+ } : {};
41
+ const passwordInnerInputSize = size ? {
42
42
  height: size - 2,
43
43
  minHeight: size - 2,
44
44
  lineHeight: `${size - 2}px`,
45
45
  fontSize: inputFontSize
46
- };
46
+ } : {};
47
+ if (props.variant === "unstyled") {
48
+ return {
49
+ input: {
50
+ "&:not(.mantine-Textarea-input)": {
51
+ ...inputSize
52
+ },
53
+ "& .mantine-PasswordInput-innerInput": {
54
+ ...passwordInnerInputSize
55
+ },
56
+ "&::placeholder": {
57
+ color: themeColor(theme2, "carbon", 6)
58
+ }
59
+ }
60
+ };
61
+ }
62
+ if (props.variant === "filled") {
63
+ return {
64
+ input: {
65
+ "--input-bg": themeColor(theme2, "carbon", 3),
66
+ "--input-bd-focus": themeColor(theme2, "carbon", 9),
67
+ "&:not(.mantine-Textarea-input)": {
68
+ ...inputSize
69
+ },
70
+ "& .mantine-PasswordInput-innerInput": {
71
+ ...passwordInnerInputSize
72
+ },
73
+ "&::placeholder": {
74
+ color: themeColor(theme2, "carbon", 6)
75
+ }
76
+ }
77
+ };
78
+ }
47
79
  return {
48
80
  label: {
49
81
  color: themeColor(theme2, "carbon", 8),
@@ -56,10 +88,12 @@ function getInputStyles(theme2, props) {
56
88
  fontSize: 12
57
89
  },
58
90
  input: {
59
- ...inputSize,
60
91
  color: theme2.colors.carbon[8],
61
92
  border: `1px solid ${themeColor(theme2, "carbon", 4)}`,
62
93
  backgroundColor: themeColor(theme2, "carbon", 0),
94
+ "&:not(.mantine-Textarea-input)": {
95
+ ...inputSize
96
+ },
63
97
  "&:hover": {
64
98
  borderColor: themeColor(theme2, "carbon", 5)
65
99
  },
@@ -100,13 +134,16 @@ function getInputStyles(theme2, props) {
100
134
  borderColor: themeColor(theme2, "red", 4)
101
135
  },
102
136
  "&::placeholder": {
103
- color: themeColor(theme2, "carbon", 6)
137
+ color: themeColor(theme2, "carbon", 2)
104
138
  }
105
139
  }
106
140
  }
107
141
  },
108
142
  section: {
109
- overflow: "hidden"
143
+ overflow: "hidden",
144
+ "& .mantine-PasswordInput-visibilityToggle svg": {
145
+ color: themeColor(theme2, "carbon", 6)
146
+ }
110
147
  }
111
148
  };
112
149
  }
@@ -163,7 +200,7 @@ const theme = createTheme.createTheme({
163
200
  "&:hover": {
164
201
  backgroundColor: bgHoverColor
165
202
  },
166
- "&:disabled": {
203
+ "&:disabled, &[data-disabled]": {
167
204
  color: theme2.white,
168
205
  backgroundColor: themeColor(theme2, color, 5)
169
206
  }
@@ -185,7 +222,7 @@ const theme = createTheme.createTheme({
185
222
  borderColor: themeColor(theme2, color, borderColorShade + 1),
186
223
  backgroundColor: themeColor(theme2, color, bgColorShade + 1)
187
224
  },
188
- "&:disabled": {
225
+ "&:disabled, &[data-disabled]": {
189
226
  color: themeColor(theme2, color, 6),
190
227
  borderColor: themeColor(theme2, color, borderColorShade + 1),
191
228
  backgroundColor: themeColor(theme2, color, 2)
@@ -205,7 +242,7 @@ const theme = createTheme.createTheme({
205
242
  borderColor: themeColor(theme2, color, borderColorShade + 1),
206
243
  backgroundColor: themeColor(theme2, color, bgColorShade + 1)
207
244
  },
208
- "&:disabled": {
245
+ "&:disabled, &[data-disabled]": {
209
246
  color: themeColor(theme2, color, 6),
210
247
  borderColor: themeColor(theme2, color, borderColorShade + 1),
211
248
  backgroundColor: themeColor(theme2, color, 2)
@@ -223,7 +260,7 @@ const theme = createTheme.createTheme({
223
260
  color: themeColor(theme2, color, fontColorShade + 1),
224
261
  backgroundColor: themeColor(theme2, color, bgColorShade + 1)
225
262
  },
226
- "&:disabled": {
263
+ "&:disabled, &[data-disabled]": {
227
264
  color: themeColor(theme2, color, 6)
228
265
  }
229
266
  };
@@ -514,8 +551,6 @@ const theme = createTheme.createTheme({
514
551
  withCheckIcon: false
515
552
  },
516
553
  styles: (theme2, props) => {
517
- const styles = getInputStyles(theme2, { size: props.size });
518
- const height = styles.input.height;
519
554
  return {
520
555
  label: {
521
556
  lineHeight: "20px",
@@ -525,8 +560,6 @@ const theme = createTheme.createTheme({
525
560
  color: themeColor(theme2, "carbon", 7)
526
561
  },
527
562
  input: {
528
- height,
529
- minHeight: height,
530
563
  color: themeColor(theme2, "carbon", 8),
531
564
  ...props.variant === "unstyled" && {
532
565
  border: "none",
@@ -573,8 +606,6 @@ const theme = createTheme.createTheme({
573
606
  withCheckIcon: false
574
607
  },
575
608
  styles: (theme2, props) => {
576
- const styles = getInputStyles(theme2, { size: props.size });
577
- const inputHeight = styles.input.height;
578
609
  return {
579
610
  label: {
580
611
  fontSize: 14,
@@ -589,9 +620,6 @@ const theme = createTheme.createTheme({
589
620
  color: themeColor(theme2, "carbon", 6)
590
621
  }
591
622
  },
592
- wrapper: {
593
- height: inputHeight + 2
594
- },
595
623
  pill: {
596
624
  backgroundColor: themeColor(theme2, "carbon", 3),
597
625
  color: themeColor(theme2, "carbon", 8),
@@ -636,11 +664,7 @@ const theme = createTheme.createTheme({
636
664
  styles: getInputStyles
637
665
  },
638
666
  Textarea: {
639
- styles: (theme2, props) => {
640
- const styles = getInputStyles(theme2, props);
641
- styles.input.height = void 0;
642
- return styles;
643
- }
667
+ styles: getInputStyles
644
668
  },
645
669
  Badge: {
646
670
  defaultProps: {
package/dist/theme/theme.js CHANGED
@@ -13,35 +13,67 @@ const Colors = Object.keys(colors);
13
13
  function themeColor(theme2, color, shade) {
14
14
  return getThemeColor([color, shade].join("."), theme2);
15
15
  }
16
+ const InputSizes = {
17
+ xl: 48,
18
+ lg: 44,
19
+ md: 40,
20
+ sm: 32,
21
+ xs: 28
22
+ };
23
+ const InputFontSizes = {
24
+ xl: 16,
25
+ lg: 14,
26
+ md: 14,
27
+ sm: 13,
28
+ xs: 12
29
+ };
16
30
  function getInputStyles(theme2, props) {
17
- const sizes = {
18
- xl: 48,
19
- lg: 44,
20
- md: 40,
21
- sm: 32,
22
- xs: 28
23
- };
24
- const fontSizes = {
25
- xl: 16,
26
- lg: 14,
27
- md: 14,
28
- sm: 13,
29
- xs: 12
30
- };
31
- const size = sizes[props.size ?? "md"];
32
- const inputFontSize = fontSizes[props.size ?? "md"];
33
- const inputSize = {
34
- height: size,
35
- minHeight: size,
36
- lineHeight: `${size - 2}px`,
37
- fontSize: inputFontSize
38
- };
39
- const passwordInnerInputSize = {
31
+ const size = InputSizes[props.size ?? "md"];
32
+ const inputFontSize = InputFontSizes[props.size ?? "md"];
33
+ const inputSize = size ? {
34
+ "--input-size": `${size}px`,
35
+ "--input-height": `${size}px`,
36
+ "--input-line-height": `${size - 2}px`,
37
+ "--input-fz": `${inputFontSize}px`
38
+ } : {};
39
+ const passwordInnerInputSize = size ? {
40
40
  height: size - 2,
41
41
  minHeight: size - 2,
42
42
  lineHeight: `${size - 2}px`,
43
43
  fontSize: inputFontSize
44
- };
44
+ } : {};
45
+ if (props.variant === "unstyled") {
46
+ return {
47
+ input: {
48
+ "&:not(.mantine-Textarea-input)": {
49
+ ...inputSize
50
+ },
51
+ "& .mantine-PasswordInput-innerInput": {
52
+ ...passwordInnerInputSize
53
+ },
54
+ "&::placeholder": {
55
+ color: themeColor(theme2, "carbon", 6)
56
+ }
57
+ }
58
+ };
59
+ }
60
+ if (props.variant === "filled") {
61
+ return {
62
+ input: {
63
+ "--input-bg": themeColor(theme2, "carbon", 3),
64
+ "--input-bd-focus": themeColor(theme2, "carbon", 9),
65
+ "&:not(.mantine-Textarea-input)": {
66
+ ...inputSize
67
+ },
68
+ "& .mantine-PasswordInput-innerInput": {
69
+ ...passwordInnerInputSize
70
+ },
71
+ "&::placeholder": {
72
+ color: themeColor(theme2, "carbon", 6)
73
+ }
74
+ }
75
+ };
76
+ }
45
77
  return {
46
78
  label: {
47
79
  color: themeColor(theme2, "carbon", 8),
@@ -54,10 +86,12 @@ function getInputStyles(theme2, props) {
54
86
  fontSize: 12
55
87
  },
56
88
  input: {
57
- ...inputSize,
58
89
  color: theme2.colors.carbon[8],
59
90
  border: `1px solid ${themeColor(theme2, "carbon", 4)}`,
60
91
  backgroundColor: themeColor(theme2, "carbon", 0),
92
+ "&:not(.mantine-Textarea-input)": {
93
+ ...inputSize
94
+ },
61
95
  "&:hover": {
62
96
  borderColor: themeColor(theme2, "carbon", 5)
63
97
  },
@@ -98,13 +132,16 @@ function getInputStyles(theme2, props) {
98
132
  borderColor: themeColor(theme2, "red", 4)
99
133
  },
100
134
  "&::placeholder": {
101
- color: themeColor(theme2, "carbon", 6)
135
+ color: themeColor(theme2, "carbon", 2)
102
136
  }
103
137
  }
104
138
  }
105
139
  },
106
140
  section: {
107
- overflow: "hidden"
141
+ overflow: "hidden",
142
+ "& .mantine-PasswordInput-visibilityToggle svg": {
143
+ color: themeColor(theme2, "carbon", 6)
144
+ }
108
145
  }
109
146
  };
110
147
  }
@@ -161,7 +198,7 @@ const theme = createTheme({
161
198
  "&:hover": {
162
199
  backgroundColor: bgHoverColor
163
200
  },
164
- "&:disabled": {
201
+ "&:disabled, &[data-disabled]": {
165
202
  color: theme2.white,
166
203
  backgroundColor: themeColor(theme2, color, 5)
167
204
  }
@@ -183,7 +220,7 @@ const theme = createTheme({
183
220
  borderColor: themeColor(theme2, color, borderColorShade + 1),
184
221
  backgroundColor: themeColor(theme2, color, bgColorShade + 1)
185
222
  },
186
- "&:disabled": {
223
+ "&:disabled, &[data-disabled]": {
187
224
  color: themeColor(theme2, color, 6),
188
225
  borderColor: themeColor(theme2, color, borderColorShade + 1),
189
226
  backgroundColor: themeColor(theme2, color, 2)
@@ -203,7 +240,7 @@ const theme = createTheme({
203
240
  borderColor: themeColor(theme2, color, borderColorShade + 1),
204
241
  backgroundColor: themeColor(theme2, color, bgColorShade + 1)
205
242
  },
206
- "&:disabled": {
243
+ "&:disabled, &[data-disabled]": {
207
244
  color: themeColor(theme2, color, 6),
208
245
  borderColor: themeColor(theme2, color, borderColorShade + 1),
209
246
  backgroundColor: themeColor(theme2, color, 2)
@@ -221,7 +258,7 @@ const theme = createTheme({
221
258
  color: themeColor(theme2, color, fontColorShade + 1),
222
259
  backgroundColor: themeColor(theme2, color, bgColorShade + 1)
223
260
  },
224
- "&:disabled": {
261
+ "&:disabled, &[data-disabled]": {
225
262
  color: themeColor(theme2, color, 6)
226
263
  }
227
264
  };
@@ -512,8 +549,6 @@ const theme = createTheme({
512
549
  withCheckIcon: false
513
550
  },
514
551
  styles: (theme2, props) => {
515
- const styles = getInputStyles(theme2, { size: props.size });
516
- const height = styles.input.height;
517
552
  return {
518
553
  label: {
519
554
  lineHeight: "20px",
@@ -523,8 +558,6 @@ const theme = createTheme({
523
558
  color: themeColor(theme2, "carbon", 7)
524
559
  },
525
560
  input: {
526
- height,
527
- minHeight: height,
528
561
  color: themeColor(theme2, "carbon", 8),
529
562
  ...props.variant === "unstyled" && {
530
563
  border: "none",
@@ -571,8 +604,6 @@ const theme = createTheme({
571
604
  withCheckIcon: false
572
605
  },
573
606
  styles: (theme2, props) => {
574
- const styles = getInputStyles(theme2, { size: props.size });
575
- const inputHeight = styles.input.height;
576
607
  return {
577
608
  label: {
578
609
  fontSize: 14,
@@ -587,9 +618,6 @@ const theme = createTheme({
587
618
  color: themeColor(theme2, "carbon", 6)
588
619
  }
589
620
  },
590
- wrapper: {
591
- height: inputHeight + 2
592
- },
593
621
  pill: {
594
622
  backgroundColor: themeColor(theme2, "carbon", 3),
595
623
  color: themeColor(theme2, "carbon", 8),
@@ -634,11 +662,7 @@ const theme = createTheme({
634
662
  styles: getInputStyles
635
663
  },
636
664
  Textarea: {
637
- styles: (theme2, props) => {
638
- const styles = getInputStyles(theme2, props);
639
- styles.input.height = void 0;
640
- return styles;
641
- }
665
+ styles: getInputStyles
642
666
  },
643
667
  Badge: {
644
668
  defaultProps: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.0.0-beta.91",
3
+ "version": "2.0.0-beta.93",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",