pixelize-design-library 2.4.1-beta.1 → 2.4.1-beta.2

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 (70) hide show
  1. package/.cursor/modules/account-management/MODULE.md +8 -1
  2. package/.cursor/modules/feedback/MODULE.md +6 -0
  3. package/.cursor/modules/inputs-date-file/MODULE.md +12 -1
  4. package/.cursor/modules/inputs-select/MODULE.md +64 -2
  5. package/.cursor/modules/inputs-toggle/MODULE.md +6 -0
  6. package/.cursor/modules/layout-navigation/MODULE.md +55 -5
  7. package/.cursor/modules/overlays/MODULE.md +29 -16
  8. package/.cursor/modules/table/MODULE.md +6 -0
  9. package/.cursor/modules/theme/MODULE.md +117 -0
  10. package/dist/Assets/defaultLogo.d.ts.map +1 -1
  11. package/dist/Assets/defaultLogo.js +1 -3
  12. package/dist/Assets/defaultLogo.tsx +4 -8
  13. package/dist/Components/DatePicker/CalendarPanel.d.ts.map +1 -1
  14. package/dist/Components/DatePicker/CalendarPanel.js +12 -3
  15. package/dist/Components/DatePicker/SingleDatePicker.d.ts.map +1 -1
  16. package/dist/Components/DatePicker/SingleDatePicker.js +11 -9
  17. package/dist/Components/DatePicker/TimeOnlyPicker.js +2 -2
  18. package/dist/Components/DatePicker/TimePicker.d.ts.map +1 -1
  19. package/dist/Components/DatePicker/TimePicker.js +14 -2
  20. package/dist/Components/DatePicker/TimePickerInput.d.ts.map +1 -1
  21. package/dist/Components/DatePicker/TimePickerInput.js +9 -1
  22. package/dist/Components/SelectV2/SelectV2.d.ts +3 -0
  23. package/dist/Components/SelectV2/SelectV2.d.ts.map +1 -0
  24. package/dist/Components/SelectV2/SelectV2.js +185 -0
  25. package/dist/Components/SelectV2/SelectV2Props.d.ts +67 -0
  26. package/dist/Components/SelectV2/SelectV2Props.d.ts.map +1 -0
  27. package/dist/Components/SelectV2/SelectV2Props.js +2 -0
  28. package/dist/Components/SideBar/SideBar.js +1 -1
  29. package/dist/Components/WorkspaceWindow/WorkspaceTrayPreview.js +2 -1
  30. package/dist/Components/WorkspaceWindow/WorkspaceWindow.d.ts +2 -2
  31. package/dist/Components/WorkspaceWindow/WorkspaceWindow.d.ts.map +1 -1
  32. package/dist/Components/WorkspaceWindow/WorkspaceWindow.js +25 -4
  33. package/dist/Components/WorkspaceWindow/WorkspaceWindowProps.d.ts +18 -0
  34. package/dist/Components/WorkspaceWindow/WorkspaceWindowProps.d.ts.map +1 -1
  35. package/dist/Theme/chakra/Avatar.styles.d.ts +33 -0
  36. package/dist/Theme/chakra/Avatar.styles.d.ts.map +1 -0
  37. package/dist/Theme/chakra/Avatar.styles.js +28 -0
  38. package/dist/Theme/chakra/Drawer.styles.d.ts +32 -0
  39. package/dist/Theme/chakra/Drawer.styles.d.ts.map +1 -0
  40. package/dist/Theme/chakra/Drawer.styles.js +26 -0
  41. package/dist/Theme/chakra/Menu.styles.d.ts +70 -0
  42. package/dist/Theme/chakra/Menu.styles.d.ts.map +1 -0
  43. package/dist/Theme/chakra/Menu.styles.js +50 -0
  44. package/dist/Theme/chakra/Modal.styles.d.ts +32 -0
  45. package/dist/Theme/chakra/Modal.styles.d.ts.map +1 -0
  46. package/dist/Theme/chakra/Modal.styles.js +26 -0
  47. package/dist/Theme/chakra/Popover.styles.d.ts +37 -0
  48. package/dist/Theme/chakra/Popover.styles.d.ts.map +1 -0
  49. package/dist/Theme/chakra/Popover.styles.js +30 -0
  50. package/dist/Theme/chakra/Slider.styles.d.ts +31 -0
  51. package/dist/Theme/chakra/Slider.styles.d.ts.map +1 -0
  52. package/dist/Theme/chakra/Slider.styles.js +25 -0
  53. package/dist/Theme/chakra/Switch.styles.d.ts +31 -0
  54. package/dist/Theme/chakra/Switch.styles.d.ts.map +1 -0
  55. package/dist/Theme/chakra/Switch.styles.js +24 -0
  56. package/dist/Theme/chakra/Tabs.styles.d.ts +43 -0
  57. package/dist/Theme/chakra/Tabs.styles.d.ts.map +1 -0
  58. package/dist/Theme/chakra/Tabs.styles.js +41 -0
  59. package/dist/Theme/chakra/componentStyles.d.ts +228 -1
  60. package/dist/Theme/chakra/componentStyles.d.ts.map +1 -1
  61. package/dist/Theme/chakra/componentStyles.js +62 -0
  62. package/dist/Theme/provider/PixelizeThemeProvider.d.ts +11 -1
  63. package/dist/Theme/provider/PixelizeThemeProvider.d.ts.map +1 -1
  64. package/dist/Theme/provider/PixelizeThemeProvider.js +35 -2
  65. package/dist/Theme/provider/ThemeSwitcher.d.ts.map +1 -1
  66. package/dist/Theme/provider/ThemeSwitcher.js +23 -11
  67. package/dist/index.d.ts +3 -1
  68. package/dist/index.d.ts.map +1 -1
  69. package/dist/index.js +4 -2
  70. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"WorkspaceWindowProps.d.ts","sourceRoot":"","sources":["../../../src/Components/WorkspaceWindow/WorkspaceWindowProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC;AAExE,MAAM,WAAW,oBAAoB;IACnC,+CAA+C;IAC/C,KAAK,EAAE,SAAS,CAAC;IACjB,0EAA0E;IAC1E,KAAK,EAAE,oBAAoB,CAAC;IAC5B,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAC;IAEpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B,8EAA8E;IAC9E,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IACjC,kEAAkE;IAClE,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,OAAO,EAAE,SAAS,GAAG,CAAC,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;IACjE,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,CAAC;IACpE,8EAA8E;IAC9E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
1
+ {"version":3,"file":"WorkspaceWindowProps.d.ts","sourceRoot":"","sources":["../../../src/Components/WorkspaceWindow/WorkspaceWindowProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC;AAExE,MAAM,WAAW,oBAAoB;IACnC,+CAA+C;IAC/C,KAAK,EAAE,SAAS,CAAC;IACjB,0EAA0E;IAC1E,KAAK,EAAE,oBAAoB,CAAC;IAC5B,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAC;IAEpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B,8EAA8E;IAC9E,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IACjC,kEAAkE;IAClE,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,CACX,IAAI,EAAE,iBAAiB,EACvB,GAAG,EAAE;QAAE,OAAO,EAAE,MAAM,IAAI,CAAC;QAAC,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAC5C,SAAS,CAAC;CAChB;AAED,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,OAAO,EAAE,SAAS,GAAG,CAAC,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;IACjE,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,CAAC;IACpE,8EAA8E;IAC9E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
@@ -0,0 +1,33 @@
1
+ import type { StyleFunctionProps } from "@chakra-ui/react";
2
+ declare const $badgeBorder: {
3
+ variable: string;
4
+ reference: string;
5
+ };
6
+ export declare const Avatar: {
7
+ baseStyle?: (({ theme }: StyleFunctionProps) => {
8
+ badge: {
9
+ [$badgeBorder.variable]: any;
10
+ };
11
+ container: {
12
+ [$badgeBorder.variable]: any;
13
+ };
14
+ }) | undefined;
15
+ sizes?: {
16
+ [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
17
+ keys: ("container" | "label" | "group" | "badge" | "excessLabel")[];
18
+ }>;
19
+ } | undefined;
20
+ variants?: {
21
+ [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
22
+ keys: ("container" | "label" | "group" | "badge" | "excessLabel")[];
23
+ }>;
24
+ } | undefined;
25
+ defaultProps?: {
26
+ size?: string | number | undefined;
27
+ variant?: string | number | undefined;
28
+ colorScheme?: string | undefined;
29
+ } | undefined;
30
+ parts: ("container" | "label" | "group" | "badge" | "excessLabel")[];
31
+ };
32
+ export {};
33
+ //# sourceMappingURL=Avatar.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Avatar.styles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/Avatar.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK3D,QAAA,MAAM,YAAY;;;CAAgC,CAAC;AAoBnD,eAAO,MAAM,MAAM;6BAZ4B,kBAAkB;;YAI3D,CAAC,YAAY,CAAC,QAAQ,CAAC,MAAQ;;;YAG/B,CAAC,YAAY,CAAC,QAAQ,CAAC,MAAQ;;;;;;;;;;;;;;;;;;;CAOnC,CAAC"}
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Avatar = void 0;
4
+ const react_1 = require("@chakra-ui/react");
5
+ const anatomy_1 = require("@chakra-ui/anatomy");
6
+ const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.avatarAnatomy.keys);
7
+ const $badgeBorder = (0, react_1.cssVar)("avatar-border-color");
8
+ /**
9
+ * Same bug class as Menu/Modal/Popover: Chakra's own Avatar baseStyle hardcodes the badge/
10
+ * container border color to `colors.white` outside `_dark` (it's a cutout ring meant to match
11
+ * the surface the avatar sits on), gated behind `_dark`, which this theme-swap app never
12
+ * triggers. Every bare `<Avatar>`/`<AvatarBadge>` renders a white ring on the dark canvas.
13
+ */
14
+ const baseStyle = definePartsStyle(({ theme }) => {
15
+ var _a, _b, _c, _d, _e, _f;
16
+ const border = (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff";
17
+ return {
18
+ badge: {
19
+ [$badgeBorder.variable]: border,
20
+ },
21
+ container: {
22
+ [$badgeBorder.variable]: border,
23
+ },
24
+ };
25
+ });
26
+ exports.Avatar = defineMultiStyleConfig({
27
+ baseStyle,
28
+ });
@@ -0,0 +1,32 @@
1
+ import type { StyleFunctionProps } from "@chakra-ui/react";
2
+ declare const $bg: {
3
+ variable: string;
4
+ reference: string;
5
+ };
6
+ export declare const Drawer: {
7
+ baseStyle?: (({ theme }: StyleFunctionProps) => {
8
+ dialog: {
9
+ [$bg.variable]: any;
10
+ bg: string;
11
+ color: any;
12
+ };
13
+ }) | undefined;
14
+ sizes?: {
15
+ [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
16
+ keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
17
+ }>;
18
+ } | undefined;
19
+ variants?: {
20
+ [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
21
+ keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
22
+ }>;
23
+ } | undefined;
24
+ defaultProps?: {
25
+ size?: string | number | undefined;
26
+ variant?: string | number | undefined;
27
+ colorScheme?: string | undefined;
28
+ } | undefined;
29
+ parts: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
30
+ };
31
+ export {};
32
+ //# sourceMappingURL=Drawer.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/Drawer.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK3D,QAAA,MAAM,GAAG;;;CAAsB,CAAC;AAgBhC,eAAO,MAAM,MAAM;6BAR4B,kBAAkB;;YAE7D,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAkF;;;;;;;;;;;;;;;;;;;;;CAQlG,CAAC"}
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Drawer = void 0;
4
+ const react_1 = require("@chakra-ui/react");
5
+ const anatomy_1 = require("@chakra-ui/anatomy");
6
+ const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.drawerAnatomy.keys);
7
+ const $bg = (0, react_1.cssVar)("drawer-bg");
8
+ /**
9
+ * Chakra's own Drawer baseStyle hardcodes `--drawer-bg` to "colors.white" (gated behind `_dark`,
10
+ * which this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
11
+ * `<DrawerContent>` in every consuming app renders a white panel on the dark canvas — the same
12
+ * bug class `Menu.styles.ts`/`Modal.styles.ts` already fix.
13
+ */
14
+ const baseStyle = definePartsStyle(({ theme }) => {
15
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
16
+ return ({
17
+ dialog: {
18
+ [$bg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
19
+ bg: $bg.reference,
20
+ color: (_j = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.text) === null || _h === void 0 ? void 0 : _h[900]) !== null && _j !== void 0 ? _j : "inherit",
21
+ },
22
+ });
23
+ });
24
+ exports.Drawer = defineMultiStyleConfig({
25
+ baseStyle,
26
+ });
@@ -0,0 +1,70 @@
1
+ import type { StyleFunctionProps } from "@chakra-ui/react";
2
+ declare const $bg: {
3
+ variable: string;
4
+ reference: string;
5
+ };
6
+ /**
7
+ * Chakra's own MenuList baseStyle hardcodes `--menu-bg` to "#fff" (gated behind `_dark`, which
8
+ * this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
9
+ * bare `<MenuList>` in every consuming app renders a white dropdown on the dark canvas. A `bg`
10
+ * prop set by a call site only recolors the list's own box, not this var — which `MenuItem`'s
11
+ * `_focus`/`_active`/`_expanded` states read — so both must come from the theme, not per call
12
+ * site (already duplicated at every fix-it-locally call site: NavigationBar, ButtonGroupIcon,
13
+ * ThemeSwitcher's BrandMenu/MenuVariant).
14
+ *
15
+ * Chakra's own MenuItem baseStyle then RE-hardcodes the same `--menu-bg` var on `_focus`/
16
+ * `_active`/`_expanded` (to `colors.gray.100`/`.200`, also `_dark`-gated) — so even with `list`
17
+ * fixed above, hovering/focusing an item snaps the var back to a near-white literal. Override
18
+ * `item` here too, to a theme-driven hover tint, or every hover state stays white regardless of
19
+ * the list fix.
20
+ */
21
+ declare const $itemBg: {
22
+ variable: string;
23
+ reference: string;
24
+ };
25
+ export declare const Menu: {
26
+ baseStyle?: (({ theme }: StyleFunctionProps) => {
27
+ list: {
28
+ [$bg.variable]: any;
29
+ bg: string;
30
+ color: any;
31
+ };
32
+ item: {
33
+ bg: string;
34
+ _focus: {
35
+ [$itemBg.variable]: any;
36
+ bg: string;
37
+ };
38
+ _hover: {
39
+ [$itemBg.variable]: any;
40
+ bg: string;
41
+ };
42
+ _active: {
43
+ [$itemBg.variable]: any;
44
+ bg: string;
45
+ };
46
+ _expanded: {
47
+ [$itemBg.variable]: any;
48
+ bg: string;
49
+ };
50
+ };
51
+ }) | undefined;
52
+ sizes?: {
53
+ [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
54
+ keys: ("button" | "list" | "icon" | "item" | "groupTitle" | "command" | "divider")[];
55
+ }>;
56
+ } | undefined;
57
+ variants?: {
58
+ [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
59
+ keys: ("button" | "list" | "icon" | "item" | "groupTitle" | "command" | "divider")[];
60
+ }>;
61
+ } | undefined;
62
+ defaultProps?: {
63
+ size?: string | number | undefined;
64
+ variant?: string | number | undefined;
65
+ colorScheme?: string | undefined;
66
+ } | undefined;
67
+ parts: ("button" | "list" | "icon" | "item" | "groupTitle" | "command" | "divider")[];
68
+ };
69
+ export {};
70
+ //# sourceMappingURL=Menu.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Menu.styles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/Menu.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK3D,QAAA,MAAM,GAAG;;;CAAoB,CAAC;AAE9B;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,OAAO;;;CAAyB,CAAC;AA4BvC,eAAO,MAAM,IAAI;6BA1B8B,kBAAkB;;YAO3D,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAkF;;;;;;;gBAWtF,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAS;;;;gBAC3B,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAS;;;;gBAC1B,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAU;;;;gBAC1B,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAS;;;;;;;;;;;;;;;;;;;;;CAO5C,CAAC"}
@@ -0,0 +1,50 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Menu = void 0;
4
+ const react_1 = require("@chakra-ui/react");
5
+ const anatomy_1 = require("@chakra-ui/anatomy");
6
+ const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.menuAnatomy.keys);
7
+ const $bg = (0, react_1.cssVar)("menu-bg");
8
+ /**
9
+ * Chakra's own MenuList baseStyle hardcodes `--menu-bg` to "#fff" (gated behind `_dark`, which
10
+ * this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
11
+ * bare `<MenuList>` in every consuming app renders a white dropdown on the dark canvas. A `bg`
12
+ * prop set by a call site only recolors the list's own box, not this var — which `MenuItem`'s
13
+ * `_focus`/`_active`/`_expanded` states read — so both must come from the theme, not per call
14
+ * site (already duplicated at every fix-it-locally call site: NavigationBar, ButtonGroupIcon,
15
+ * ThemeSwitcher's BrandMenu/MenuVariant).
16
+ *
17
+ * Chakra's own MenuItem baseStyle then RE-hardcodes the same `--menu-bg` var on `_focus`/
18
+ * `_active`/`_expanded` (to `colors.gray.100`/`.200`, also `_dark`-gated) — so even with `list`
19
+ * fixed above, hovering/focusing an item snaps the var back to a near-white literal. Override
20
+ * `item` here too, to a theme-driven hover tint, or every hover state stays white regardless of
21
+ * the list fix.
22
+ */
23
+ const $itemBg = (0, react_1.cssVar)("menu-item-bg");
24
+ const baseStyle = definePartsStyle(({ theme }) => {
25
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
26
+ const hoverBg = (_g = (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.opacity) === null || _c === void 0 ? void 0 : _c[8]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray) === null || _f === void 0 ? void 0 : _f[100]) !== null && _g !== void 0 ? _g : "#f7fafc";
27
+ const activeBg = (_p = (_l = (_k = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[16]) !== null && _l !== void 0 ? _l : (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.gray) === null || _o === void 0 ? void 0 : _o[200]) !== null && _p !== void 0 ? _p : "#edf2f7";
28
+ return {
29
+ list: {
30
+ [$bg.variable]: (_v = (_s = (_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.backgroundColor) === null || _r === void 0 ? void 0 : _r.light) !== null && _s !== void 0 ? _s : (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.background) === null || _u === void 0 ? void 0 : _u[50]) !== null && _v !== void 0 ? _v : "#fff",
31
+ bg: $bg.reference,
32
+ color: (_y = (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.text) === null || _x === void 0 ? void 0 : _x[900]) !== null && _y !== void 0 ? _y : "inherit",
33
+ },
34
+ // Own CSS var (`--menu-item-bg`), NOT the list's `--menu-bg` — Chakra's stock item
35
+ // baseStyle rewrites `--menu-bg` itself on hover/focus, so reusing that same var name
36
+ // here for the item's resting bg risked the two colliding under the same custom
37
+ // property. A dedicated var keeps the item's hover/focus tint fully independent of the
38
+ // list's background var.
39
+ item: {
40
+ bg: "transparent",
41
+ _focus: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
42
+ _hover: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
43
+ _active: { [$itemBg.variable]: activeBg, bg: $itemBg.reference },
44
+ _expanded: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
45
+ },
46
+ };
47
+ });
48
+ exports.Menu = defineMultiStyleConfig({
49
+ baseStyle,
50
+ });
@@ -0,0 +1,32 @@
1
+ import type { StyleFunctionProps } from "@chakra-ui/react";
2
+ declare const $bg: {
3
+ variable: string;
4
+ reference: string;
5
+ };
6
+ export declare const Modal: {
7
+ baseStyle?: (({ theme }: StyleFunctionProps) => {
8
+ dialog: {
9
+ [$bg.variable]: any;
10
+ bg: string;
11
+ color: any;
12
+ };
13
+ }) | undefined;
14
+ sizes?: {
15
+ [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
16
+ keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
17
+ }>;
18
+ } | undefined;
19
+ variants?: {
20
+ [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
21
+ keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
22
+ }>;
23
+ } | undefined;
24
+ defaultProps?: {
25
+ size?: string | number | undefined;
26
+ variant?: string | number | undefined;
27
+ colorScheme?: string | undefined;
28
+ } | undefined;
29
+ parts: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
30
+ };
31
+ export {};
32
+ //# sourceMappingURL=Modal.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Modal.styles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/Modal.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK3D,QAAA,MAAM,GAAG;;;CAAqB,CAAC;AAgB/B,eAAO,MAAM,KAAK;6BAR6B,kBAAkB;;YAE7D,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAkF;;;;;;;;;;;;;;;;;;;;;CAQlG,CAAC"}
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Modal = void 0;
4
+ const react_1 = require("@chakra-ui/react");
5
+ const anatomy_1 = require("@chakra-ui/anatomy");
6
+ const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.modalAnatomy.keys);
7
+ const $bg = (0, react_1.cssVar)("modal-bg");
8
+ /**
9
+ * Chakra's own Modal baseStyle hardcodes `--modal-bg` to "colors.white" (gated behind `_dark`,
10
+ * which this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
11
+ * `<ModalContent>` in every consuming app renders a white dialog on the dark canvas — the same
12
+ * bug class `Menu.styles.ts` already fixes for dropdowns.
13
+ */
14
+ const baseStyle = definePartsStyle(({ theme }) => {
15
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
16
+ return ({
17
+ dialog: {
18
+ [$bg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
19
+ bg: $bg.reference,
20
+ color: (_j = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.text) === null || _h === void 0 ? void 0 : _h[900]) !== null && _j !== void 0 ? _j : "inherit",
21
+ },
22
+ });
23
+ });
24
+ exports.Modal = defineMultiStyleConfig({
25
+ baseStyle,
26
+ });
@@ -0,0 +1,37 @@
1
+ import type { StyleFunctionProps } from "@chakra-ui/react";
2
+ declare const $popperBg: {
3
+ variable: string;
4
+ reference: string;
5
+ };
6
+ declare const $arrowShadowColor: {
7
+ variable: string;
8
+ reference: string;
9
+ };
10
+ export declare const Popover: {
11
+ baseStyle?: (({ theme }: StyleFunctionProps) => {
12
+ content: {
13
+ [$popperBg.variable]: any;
14
+ [$arrowShadowColor.variable]: any;
15
+ bg: string;
16
+ color: any;
17
+ };
18
+ }) | undefined;
19
+ sizes?: {
20
+ [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
21
+ keys: ("content" | "body" | "footer" | "header" | "closeButton" | "popper" | "arrow")[];
22
+ }>;
23
+ } | undefined;
24
+ variants?: {
25
+ [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
26
+ keys: ("content" | "body" | "footer" | "header" | "closeButton" | "popper" | "arrow")[];
27
+ }>;
28
+ } | undefined;
29
+ defaultProps?: {
30
+ size?: string | number | undefined;
31
+ variant?: string | number | undefined;
32
+ colorScheme?: string | undefined;
33
+ } | undefined;
34
+ parts: ("content" | "body" | "footer" | "header" | "closeButton" | "popper" | "arrow")[];
35
+ };
36
+ export {};
37
+ //# sourceMappingURL=Popover.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Popover.styles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/Popover.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK3D,QAAA,MAAM,SAAS;;;CAAsB,CAAC;AACtC,QAAA,MAAM,iBAAiB;;;CAAsC,CAAC;AAmB9D,eAAO,MAAM,OAAO;6BAT2B,kBAAkB;;YAE7D,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAkF;YAEtG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,MAAuE;;;;;;;;;;;;;;;;;;;;;CAOrG,CAAC"}
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Popover = void 0;
4
+ const react_1 = require("@chakra-ui/react");
5
+ const anatomy_1 = require("@chakra-ui/anatomy");
6
+ const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.popoverAnatomy.keys);
7
+ const $popperBg = (0, react_1.cssVar)("popper-bg");
8
+ const $arrowShadowColor = (0, react_1.cssVar)("popper-arrow-shadow-color");
9
+ /**
10
+ * Same bug class as Menu (Wave G): Chakra's own Popover baseStyle hardcodes `--popper-bg` to
11
+ * "#fff" and `--popper-arrow-shadow-color` to `colors.gray.200`, both gated behind `_dark`, which
12
+ * this theme-swap app never triggers (see Menu.styles.ts / createBrandTheme's colorMode comment).
13
+ * Every bare `<PopoverContent>` renders a white card with a light arrow shadow on the dark canvas.
14
+ * `--popper-arrow-bg` is left alone — Chakra's own baseStyle already points it at `$popperBg`, so
15
+ * fixing `$popperBg` here fixes the arrow fill too.
16
+ */
17
+ const baseStyle = definePartsStyle(({ theme }) => {
18
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
19
+ return ({
20
+ content: {
21
+ [$popperBg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
22
+ bg: $popperBg.reference,
23
+ [$arrowShadowColor.variable]: (_m = (_j = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.border) === null || _h === void 0 ? void 0 : _h[200]) !== null && _j !== void 0 ? _j : (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray) === null || _l === void 0 ? void 0 : _l[200]) !== null && _m !== void 0 ? _m : "#e2e8f0",
24
+ color: (_q = (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.text) === null || _p === void 0 ? void 0 : _p[900]) !== null && _q !== void 0 ? _q : "inherit",
25
+ },
26
+ });
27
+ });
28
+ exports.Popover = defineMultiStyleConfig({
29
+ baseStyle,
30
+ });
@@ -0,0 +1,31 @@
1
+ import type { StyleFunctionProps } from "@chakra-ui/react";
2
+ declare const $thumbBg: {
3
+ variable: string;
4
+ reference: string;
5
+ };
6
+ export declare const Slider: {
7
+ baseStyle?: (({ theme }: StyleFunctionProps) => {
8
+ thumb: {
9
+ [$thumbBg.variable]: any;
10
+ bg: string;
11
+ };
12
+ }) | undefined;
13
+ sizes?: {
14
+ [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
15
+ keys: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
16
+ }>;
17
+ } | undefined;
18
+ variants?: {
19
+ [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
20
+ keys: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
21
+ }>;
22
+ } | undefined;
23
+ defaultProps?: {
24
+ size?: string | number | undefined;
25
+ variant?: string | number | undefined;
26
+ colorScheme?: string | undefined;
27
+ } | undefined;
28
+ parts: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
29
+ };
30
+ export {};
31
+ //# sourceMappingURL=Slider.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Slider.styles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/Slider.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK3D,QAAA,MAAM,QAAQ;;;CAA4B,CAAC;AAe3C,eAAO,MAAM,MAAM;6BAP4B,kBAAkB;;YAE7D,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAkF;;;;;;;;;;;;;;;;;;;;CAOvG,CAAC"}
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Slider = void 0;
4
+ const react_1 = require("@chakra-ui/react");
5
+ const anatomy_1 = require("@chakra-ui/anatomy");
6
+ const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.sliderAnatomy.keys);
7
+ const $thumbBg = (0, react_1.cssVar)("slider-thumb-bg");
8
+ /**
9
+ * Chakra's own Slider thumb baseStyle hardcodes `bg: "white"` with no `_dark` gate at all (unlike
10
+ * track/filledTrack, which at least have one Chakra's own colorMode never triggers here) — so
11
+ * every bare `<SliderThumb>` renders a literal white circle on the dark canvas regardless of mode,
12
+ * same bug class as Menu/Modal but without even the dead `_dark` branch.
13
+ */
14
+ const baseStyle = definePartsStyle(({ theme }) => {
15
+ var _a, _b, _c, _d, _e, _f;
16
+ return ({
17
+ thumb: {
18
+ [$thumbBg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
19
+ bg: $thumbBg.reference,
20
+ },
21
+ });
22
+ });
23
+ exports.Slider = defineMultiStyleConfig({
24
+ baseStyle,
25
+ });
@@ -0,0 +1,31 @@
1
+ import type { StyleFunctionProps } from "@chakra-ui/react";
2
+ declare const $thumbBg: {
3
+ variable: string;
4
+ reference: string;
5
+ };
6
+ export declare const Switch: {
7
+ baseStyle?: (({ theme }: StyleFunctionProps) => {
8
+ thumb: {
9
+ [$thumbBg.variable]: any;
10
+ bg: string;
11
+ };
12
+ }) | undefined;
13
+ sizes?: {
14
+ [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
15
+ keys: ("container" | "label" | "track" | "thumb")[];
16
+ }>;
17
+ } | undefined;
18
+ variants?: {
19
+ [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
20
+ keys: ("container" | "label" | "track" | "thumb")[];
21
+ }>;
22
+ } | undefined;
23
+ defaultProps?: {
24
+ size?: string | number | undefined;
25
+ variant?: string | number | undefined;
26
+ colorScheme?: string | undefined;
27
+ } | undefined;
28
+ parts: ("container" | "label" | "track" | "thumb")[];
29
+ };
30
+ export {};
31
+ //# sourceMappingURL=Switch.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Switch.styles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/Switch.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK3D,QAAA,MAAM,QAAQ;;;CAA4B,CAAC;AAc3C,eAAO,MAAM,MAAM;6BAP4B,kBAAkB;;YAE7D,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAkF;;;;;;;;;;;;;;;;;;;;CAOvG,CAAC"}
@@ -0,0 +1,24 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Switch = void 0;
4
+ const react_1 = require("@chakra-ui/react");
5
+ const anatomy_1 = require("@chakra-ui/anatomy");
6
+ const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.switchAnatomy.keys);
7
+ const $thumbBg = (0, react_1.cssVar)("switch-thumb-bg");
8
+ /**
9
+ * Same bug as Slider's thumb: Chakra's own Switch thumb baseStyle hardcodes `bg: "white"` with no
10
+ * `_dark` gate at all, so every bare `<Switch>` renders a literal white knob on the dark canvas
11
+ * regardless of mode.
12
+ */
13
+ const baseStyle = definePartsStyle(({ theme }) => {
14
+ var _a, _b, _c, _d, _e, _f;
15
+ return ({
16
+ thumb: {
17
+ [$thumbBg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
18
+ bg: $thumbBg.reference,
19
+ },
20
+ });
21
+ });
22
+ exports.Switch = defineMultiStyleConfig({
23
+ baseStyle,
24
+ });
@@ -0,0 +1,43 @@
1
+ import type { StyleFunctionProps } from "@chakra-ui/react";
2
+ declare const $bg: {
3
+ variable: string;
4
+ reference: string;
5
+ };
6
+ declare const $border: {
7
+ variable: string;
8
+ reference: string;
9
+ };
10
+ export declare const Tabs: {
11
+ baseStyle?: import("@chakra-ui/react").PartsStyleInterpolation<{
12
+ keys: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
13
+ }> | undefined;
14
+ sizes?: {
15
+ [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
16
+ keys: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
17
+ }>;
18
+ } | undefined;
19
+ variants?: {
20
+ enclosed: ({ theme }: StyleFunctionProps) => {
21
+ tab: {
22
+ _selected: {
23
+ [$border.variable]: any;
24
+ };
25
+ };
26
+ };
27
+ "enclosed-colored": ({ theme }: StyleFunctionProps) => {
28
+ tab: {
29
+ _selected: {
30
+ [$bg.variable]: any;
31
+ };
32
+ };
33
+ };
34
+ } | undefined;
35
+ defaultProps?: {
36
+ size?: string | number | undefined;
37
+ variant?: "enclosed" | "enclosed-colored" | undefined;
38
+ colorScheme?: string | undefined;
39
+ } | undefined;
40
+ parts: ("tab" | "tablist" | "tabpanel" | "tabpanels" | "root" | "indicator")[];
41
+ };
42
+ export {};
43
+ //# sourceMappingURL=Tabs.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/Tabs.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK3D,QAAA,MAAM,GAAG;;;CAAoB,CAAC;AAC9B,QAAA,MAAM,OAAO;;;CAA8B,CAAC;AAyB5C,eAAO,MAAM,IAAI;;;;;;;;;;8BAhBoC,kBAAkB;;;oBAGjE,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAkF;;;;wCAK9C,kBAAkB;;;oBAGxE,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAkF;;;;;;;;;;;CAUpG,CAAC"}
@@ -0,0 +1,41 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Tabs = void 0;
4
+ const react_1 = require("@chakra-ui/react");
5
+ const anatomy_1 = require("@chakra-ui/anatomy");
6
+ const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.tabsAnatomy.keys);
7
+ const $bg = (0, react_1.cssVar)("tabs-bg");
8
+ const $border = (0, react_1.cssVar)("tabs-border-color");
9
+ /**
10
+ * Same bug class as Menu/Modal/Popover: Chakra's own Tabs baseStyle hardcodes the selected tab's
11
+ * "cutout" color to `colors.white` outside `_dark` for two variants — `enclosed`'s selected border
12
+ * (meant to match the panel it sits against) and `enclosed-colored`'s selected background — both
13
+ * gated behind `_dark`, which this theme-swap app never triggers. Every selected `enclosed`/
14
+ * `enclosed-colored` tab renders a white seam/fill on the dark canvas.
15
+ */
16
+ const variantEnclosed = definePartsStyle(({ theme }) => {
17
+ var _a, _b, _c, _d, _e, _f;
18
+ return ({
19
+ tab: {
20
+ _selected: {
21
+ [$border.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
22
+ },
23
+ },
24
+ });
25
+ });
26
+ const variantEnclosedColored = definePartsStyle(({ theme }) => {
27
+ var _a, _b, _c, _d, _e, _f;
28
+ return ({
29
+ tab: {
30
+ _selected: {
31
+ [$bg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
32
+ },
33
+ },
34
+ });
35
+ });
36
+ exports.Tabs = defineMultiStyleConfig({
37
+ variants: {
38
+ enclosed: variantEnclosed,
39
+ "enclosed-colored": variantEnclosedColored,
40
+ },
41
+ });