@metamask/design-system-react 0.36.0 → 0.37.0
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/CHANGELOG.md +20 -1
- package/dist/components/BannerBase/BannerBase.cjs +84 -8
- package/dist/components/BannerBase/BannerBase.cjs.map +1 -1
- package/dist/components/BannerBase/BannerBase.d.cts +2 -0
- package/dist/components/BannerBase/BannerBase.d.cts.map +1 -1
- package/dist/components/BannerBase/BannerBase.d.mts +2 -0
- package/dist/components/BannerBase/BannerBase.d.mts.map +1 -1
- package/dist/components/BannerBase/BannerBase.mjs +85 -9
- package/dist/components/BannerBase/BannerBase.mjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.cjs +1 -1
- package/dist/components/Checkbox/Checkbox.cjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.mjs +1 -1
- package/dist/components/Checkbox/Checkbox.mjs.map +1 -1
- package/dist/components/Toast/Toast.types.cjs.map +1 -1
- package/dist/components/Toast/Toast.types.d.cts +6 -0
- package/dist/components/Toast/Toast.types.d.cts.map +1 -1
- package/dist/components/Toast/Toast.types.d.mts +6 -0
- package/dist/components/Toast/Toast.types.d.mts.map +1 -1
- package/dist/components/Toast/Toast.types.mjs.map +1 -1
- package/dist/components/Toast/Toaster.cjs +9 -5
- package/dist/components/Toast/Toaster.cjs.map +1 -1
- package/dist/components/Toast/Toaster.d.cts.map +1 -1
- package/dist/components/Toast/Toaster.d.mts.map +1 -1
- package/dist/components/Toast/Toaster.mjs +9 -5
- package/dist/components/Toast/Toaster.mjs.map +1 -1
- package/dist/components/index.cjs +1 -4
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.d.cts +0 -1
- package/dist/components/index.d.cts.map +1 -1
- package/dist/components/index.d.mts +0 -1
- package/dist/components/index.d.mts.map +1 -1
- package/dist/components/index.mjs +0 -1
- package/dist/components/index.mjs.map +1 -1
- package/package.json +2 -2
- package/dist/components/PureBlackProvider/PureBlackProvider.cjs +0 -65
- package/dist/components/PureBlackProvider/PureBlackProvider.cjs.map +0 -1
- package/dist/components/PureBlackProvider/PureBlackProvider.d.cts +0 -33
- package/dist/components/PureBlackProvider/PureBlackProvider.d.cts.map +0 -1
- package/dist/components/PureBlackProvider/PureBlackProvider.d.mts +0 -33
- package/dist/components/PureBlackProvider/PureBlackProvider.d.mts.map +0 -1
- package/dist/components/PureBlackProvider/PureBlackProvider.mjs +0 -44
- package/dist/components/PureBlackProvider/PureBlackProvider.mjs.map +0 -1
- package/dist/components/PureBlackProvider/index.cjs +0 -7
- package/dist/components/PureBlackProvider/index.cjs.map +0 -1
- package/dist/components/PureBlackProvider/index.d.cts +0 -2
- package/dist/components/PureBlackProvider/index.d.cts.map +0 -1
- package/dist/components/PureBlackProvider/index.d.mts +0 -2
- package/dist/components/PureBlackProvider/index.d.mts.map +0 -1
- package/dist/components/PureBlackProvider/index.mjs +0 -2
- package/dist/components/PureBlackProvider/index.mjs.map +0 -1
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
function $importDefault(module) {
|
|
2
|
-
if (module?.__esModule) {
|
|
3
|
-
return module.default;
|
|
4
|
-
}
|
|
5
|
-
return module;
|
|
6
|
-
}
|
|
7
|
-
import { PureBlackContext } from "@metamask/design-system-shared";
|
|
8
|
-
import $React, { useContext, useMemo } from "react";
|
|
9
|
-
const React = $importDefault($React);
|
|
10
|
-
/**
|
|
11
|
-
* React context for pure-black (OLED) dark mode on web.
|
|
12
|
-
*
|
|
13
|
-
* Controlled component: the app owns when pure black is active (e.g. feature
|
|
14
|
-
* flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides
|
|
15
|
-
* come from `data-pure-black` on the document root (see extension `setTheme`);
|
|
16
|
-
* this provider supplies `usePureBlack()` for any remaining JS consumers.
|
|
17
|
-
*
|
|
18
|
-
* Design-system components no longer branch on pure black for surfaces —
|
|
19
|
-
* use elevated / border-alternative tokens instead (TMCU-1282).
|
|
20
|
-
*
|
|
21
|
-
* @param options - Component props
|
|
22
|
-
* @param options.children - Child components to render
|
|
23
|
-
* @param options.isPureBlack - When true, `usePureBlack()` returns true
|
|
24
|
-
* @returns React component that provides pure-black context to children
|
|
25
|
-
*/
|
|
26
|
-
export const PureBlackProvider = ({ children, isPureBlack = false, }) => {
|
|
27
|
-
const value = useMemo(() => ({ isPureBlack }), [isPureBlack]);
|
|
28
|
-
return (React.createElement(PureBlackContext.Provider, { value: value }, children));
|
|
29
|
-
};
|
|
30
|
-
PureBlackProvider.displayName = 'PureBlackProvider';
|
|
31
|
-
/**
|
|
32
|
-
* Returns whether pure-black dark mode is active in the current subtree.
|
|
33
|
-
*
|
|
34
|
-
* Prefer semantic tokens (`bg-elevated1`, `border-alternative`, etc.) over
|
|
35
|
-
* branching on this flag in design-system components. On React Native, use
|
|
36
|
-
* `usePureBlack` from `@metamask/design-system-twrnc-preset` instead.
|
|
37
|
-
*
|
|
38
|
-
* @returns True when wrapped by `PureBlackProvider` with `isPureBlack` enabled
|
|
39
|
-
*/
|
|
40
|
-
export const usePureBlack = () => {
|
|
41
|
-
const { isPureBlack } = useContext(PureBlackContext);
|
|
42
|
-
return isPureBlack;
|
|
43
|
-
};
|
|
44
|
-
//# sourceMappingURL=PureBlackProvider.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PureBlackProvider.mjs","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/PureBlackProvider.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,gBAAgB,EAAE,uCAAuC;AAElE,OAAO,QAAO,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc;;AAEnD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,QAAQ,EACR,WAAW,GAAG,KAAK,GACI,EAAE,EAAE;IAC3B,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE9D,OAAO,CACL,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IACpC,QAAQ,CACiB,CAC7B,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC;AAEpD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAY,EAAE;IACxC,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IACrD,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC","sourcesContent":["import { PureBlackContext } from '@metamask/design-system-shared';\nimport type { PureBlackProviderProps } from '@metamask/design-system-shared';\nimport React, { useContext, useMemo } from 'react';\n\n/**\n * React context for pure-black (OLED) dark mode on web.\n *\n * Controlled component: the app owns when pure black is active (e.g. feature\n * flag and resolved dark theme) and passes `isPureBlack`. CSS token overrides\n * come from `data-pure-black` on the document root (see extension `setTheme`);\n * this provider supplies `usePureBlack()` for any remaining JS consumers.\n *\n * Design-system components no longer branch on pure black for surfaces —\n * use elevated / border-alternative tokens instead (TMCU-1282).\n *\n * @param options - Component props\n * @param options.children - Child components to render\n * @param options.isPureBlack - When true, `usePureBlack()` returns true\n * @returns React component that provides pure-black context to children\n */\nexport const PureBlackProvider = ({\n children,\n isPureBlack = false,\n}: PureBlackProviderProps) => {\n const value = useMemo(() => ({ isPureBlack }), [isPureBlack]);\n\n return (\n <PureBlackContext.Provider value={value}>\n {children}\n </PureBlackContext.Provider>\n );\n};\n\nPureBlackProvider.displayName = 'PureBlackProvider';\n\n/**\n * Returns whether pure-black dark mode is active in the current subtree.\n *\n * Prefer semantic tokens (`bg-elevated1`, `border-alternative`, etc.) over\n * branching on this flag in design-system components. On React Native, use\n * `usePureBlack` from `@metamask/design-system-twrnc-preset` instead.\n *\n * @returns True when wrapped by `PureBlackProvider` with `isPureBlack` enabled\n */\nexport const usePureBlack = (): boolean => {\n const { isPureBlack } = useContext(PureBlackContext);\n return isPureBlack;\n};\n"]}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.usePureBlack = exports.PureBlackProvider = void 0;
|
|
4
|
-
var PureBlackProvider_1 = require("./PureBlackProvider.cjs");
|
|
5
|
-
Object.defineProperty(exports, "PureBlackProvider", { enumerable: true, get: function () { return PureBlackProvider_1.PureBlackProvider; } });
|
|
6
|
-
Object.defineProperty(exports, "usePureBlack", { enumerable: true, get: function () { return PureBlackProvider_1.usePureBlack; } });
|
|
7
|
-
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/index.ts"],"names":[],"mappings":";;;AAAA,6DAAsE;AAA7D,sHAAA,iBAAiB,OAAA;AAAE,iHAAA,YAAY,OAAA","sourcesContent":["export { PureBlackProvider, usePureBlack } from './PureBlackProvider';\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,gCAA4B"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,gCAA4B"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/PureBlackProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,gCAA4B","sourcesContent":["export { PureBlackProvider, usePureBlack } from './PureBlackProvider';\n"]}
|