@alextheman/components 7.0.2 → 7.0.3
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/theme/index.d.ts +5 -1
- package/dist/theme/index.js +1 -1
- package/dist/theme/index.js.map +1 -1
- package/package.json +1 -1
package/dist/theme/index.d.ts
CHANGED
|
@@ -32,5 +32,9 @@ declare function ThemeProvider({
|
|
|
32
32
|
themeOptions
|
|
33
33
|
}: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
34
34
|
//#endregion
|
|
35
|
-
|
|
35
|
+
//#region src/theme/ThemeToggle.d.ts
|
|
36
|
+
/** A toggle to switch between dark mode and light mode. Must be used in a `ThemeProvider`. */
|
|
37
|
+
declare function ThemeToggle(): import("react/jsx-runtime").JSX.Element;
|
|
38
|
+
//#endregion
|
|
39
|
+
export { type ThemeContextValue, ThemeProvider, type ThemeProviderProps, ThemeToggle, useThemeContext };
|
|
36
40
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/theme/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{omitProperties as e}from"@alextheman/utility";import{DataError as t}from"@alextheman/utility/v6";import n from"@mui/material/CssBaseline";import{ThemeProvider as r,createTheme as i}from"@mui/material/styles";import{createContext as
|
|
1
|
+
import{omitProperties as e}from"@alextheman/utility";import{DataError as t}from"@alextheman/utility/v6";import n from"@mui/material/CssBaseline";import{ThemeProvider as r,createTheme as i,styled as a}from"@mui/material/styles";import{createContext as o,use as s,useMemo as c,useState as l}from"react";import{jsx as u,jsxs as d}from"react/jsx-runtime";import f from"@mui/material/Tooltip";import{MdOutlineDarkMode as p,MdOutlineLightMode as m}from"react-icons/md";import h from"@mui/material/Box";import g from"@mui/material/Switch";const _=o(void 0);function v({strict:e=!0}={}){let n=s(_);if(e&&!n)throw new t({strict:e,context:n},`MODE_PROVIDER_NOT_FOUND`,`Could not find the ModeProvider context. Please double-check that it is present.`);return n}function y({children:t,mode:a=`dark`,themeOptions:o}){let[s,f]=l(a),p=c(()=>i({palette:{mode:s,...e(o?.palette??{},[`mode`])},components:{MuiPaper:{styleOverrides:{root:({theme:e})=>({border:1,borderStyle:`solid`,borderColor:e.palette.divider}),...o?.components?.MuiPaper?.styleOverrides},...e(o?.components?.MuiPaper??{},`styleOverrides`)},...e(o?.components??{},`MuiPaper`)},...e(o??{},[`components`,`palette`])}),[s,o]);return u(_,{value:{mode:s,toggleMode:()=>{f(e=>e===`light`?`dark`:`light`)}},children:d(r,{theme:p,children:[u(n,{}),t]})})}const b=a(g)(()=>({padding:8,"& .MuiSwitch-track":{borderRadius:11,"&::before, &::after":{content:`""`,position:`absolute`,top:`50%`,transform:`translateY(-50%)`,fontSize:16,width:28,height:28}}}));function x({checkedIcon:e,checkedIconStyles:t,uncheckedIcon:n,uncheckedIconStyles:r,...i}){let a={borderRadius:`50%`,borderColor:`white`,backgroundColor:`white`,display:`flex`,alignItems:`center`,justifyContent:`center`,padding:.25},o={color:`black`,maxWidth:16.5,maxHeight:16.5};return u(b,{checkedIcon:u(h,{sx:a,children:u(e,{style:{...o,...t}})}),icon:u(h,{sx:a,children:u(n,{style:{...o,...r}})}),...i})}function S(){let{mode:e,toggleMode:t}=v(),n=e===`dark`,r=`Enable ${n?`light`:`dark`} mode`;return u(f,{title:r,children:u(x,{uncheckedIcon:m,checkedIcon:p,checked:n,onChange:t,"aria-label":r})})}export{y as ThemeProvider,S as ThemeToggle,v as useThemeContext};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/theme/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["MuiThemeProvider"],"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import type { OptionalOnCondition } from \"@alextheman/utility\";\nimport type { PaletteMode, ThemeOptions } from \"@mui/material/styles\";\nimport type { ReactNode } from \"react\";\n\nimport type { ContextHookOptions } from \"src/root/types\";\n\nimport { omitProperties } from \"@alextheman/utility\";\nimport { DataError } from \"@alextheman/utility/v6\";\nimport CssBaseline from \"@mui/material/CssBaseline\";\nimport { createTheme, ThemeProvider as MuiThemeProvider } from \"@mui/material/styles\";\nimport { createContext, use, useMemo, useState } from \"react\";\n\nexport interface ThemeContextValue {\n toggleMode: () => void;\n mode: PaletteMode;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\n/** Access the mode context directly. */\nexport function useThemeContext<Strict extends boolean = true>({\n strict = true as Strict,\n}: ContextHookOptions<Strict> = {}): OptionalOnCondition<Strict, ThemeContextValue> {\n const context = use(ThemeContext);\n if (strict && !context) {\n throw new DataError(\n { strict, context },\n \"MODE_PROVIDER_NOT_FOUND\",\n \"Could not find the ModeProvider context. Please double-check that it is present.\",\n );\n }\n return context as OptionalOnCondition<Strict, ThemeContextValue>;\n}\n\nexport interface ThemeProviderProps {\n /** The children that will have access to the current mode. */\n children: ReactNode;\n /** The initial mode. */\n mode?: PaletteMode;\n /** Extra options to apply on top of our default theme options */\n themeOptions?: ThemeOptions;\n}\n\n/** Provides information about the current theme mode to its children components. */\nfunction ThemeProvider({ children, mode: modeProp = \"dark\", themeOptions }: ThemeProviderProps) {\n const [mode, setMode] = useState<PaletteMode>(modeProp);\n\n const theme = useMemo(() => {\n return createTheme({\n palette: {\n mode,\n ...omitProperties(themeOptions?.palette ?? {}, [\"mode\"]),\n },\n components: {\n MuiPaper: {\n styleOverrides: {\n root: ({ theme }) => {\n return {\n border: 1,\n borderStyle: \"solid\",\n borderColor: theme.palette.divider,\n };\n },\n ...themeOptions?.components?.MuiPaper?.styleOverrides,\n },\n ...omitProperties(themeOptions?.components?.MuiPaper ?? {}, \"styleOverrides\"),\n },\n ...omitProperties(themeOptions?.components ?? {}, \"MuiPaper\"),\n },\n ...omitProperties(themeOptions ?? {}, [\"components\", \"palette\"]),\n });\n }, [mode, themeOptions]);\n\n return (\n <ThemeContext\n value={{\n mode,\n toggleMode: () => {\n setMode((prev) => {\n return prev === \"light\" ? \"dark\" : \"light\";\n });\n },\n }}\n >\n <MuiThemeProvider theme={theme}>\n <CssBaseline />\n {children}\n </MuiThemeProvider>\n </ThemeContext>\n );\n}\n\nexport default ThemeProvider;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","names":["MuiThemeProvider"],"sources":["../../src/theme/ThemeProvider.tsx","../../src/root/components/SwitchWithIcons.tsx","../../src/theme/ThemeToggle.tsx"],"sourcesContent":["import type { OptionalOnCondition } from \"@alextheman/utility\";\nimport type { PaletteMode, ThemeOptions } from \"@mui/material/styles\";\nimport type { ReactNode } from \"react\";\n\nimport type { ContextHookOptions } from \"src/root/types\";\n\nimport { omitProperties } from \"@alextheman/utility\";\nimport { DataError } from \"@alextheman/utility/v6\";\nimport CssBaseline from \"@mui/material/CssBaseline\";\nimport { createTheme, ThemeProvider as MuiThemeProvider } from \"@mui/material/styles\";\nimport { createContext, use, useMemo, useState } from \"react\";\n\nexport interface ThemeContextValue {\n toggleMode: () => void;\n mode: PaletteMode;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\n/** Access the mode context directly. */\nexport function useThemeContext<Strict extends boolean = true>({\n strict = true as Strict,\n}: ContextHookOptions<Strict> = {}): OptionalOnCondition<Strict, ThemeContextValue> {\n const context = use(ThemeContext);\n if (strict && !context) {\n throw new DataError(\n { strict, context },\n \"MODE_PROVIDER_NOT_FOUND\",\n \"Could not find the ModeProvider context. Please double-check that it is present.\",\n );\n }\n return context as OptionalOnCondition<Strict, ThemeContextValue>;\n}\n\nexport interface ThemeProviderProps {\n /** The children that will have access to the current mode. */\n children: ReactNode;\n /** The initial mode. */\n mode?: PaletteMode;\n /** Extra options to apply on top of our default theme options */\n themeOptions?: ThemeOptions;\n}\n\n/** Provides information about the current theme mode to its children components. */\nfunction ThemeProvider({ children, mode: modeProp = \"dark\", themeOptions }: ThemeProviderProps) {\n const [mode, setMode] = useState<PaletteMode>(modeProp);\n\n const theme = useMemo(() => {\n return createTheme({\n palette: {\n mode,\n ...omitProperties(themeOptions?.palette ?? {}, [\"mode\"]),\n },\n components: {\n MuiPaper: {\n styleOverrides: {\n root: ({ theme }) => {\n return {\n border: 1,\n borderStyle: \"solid\",\n borderColor: theme.palette.divider,\n };\n },\n ...themeOptions?.components?.MuiPaper?.styleOverrides,\n },\n ...omitProperties(themeOptions?.components?.MuiPaper ?? {}, \"styleOverrides\"),\n },\n ...omitProperties(themeOptions?.components ?? {}, \"MuiPaper\"),\n },\n ...omitProperties(themeOptions ?? {}, [\"components\", \"palette\"]),\n });\n }, [mode, themeOptions]);\n\n return (\n <ThemeContext\n value={{\n mode,\n toggleMode: () => {\n setMode((prev) => {\n return prev === \"light\" ? \"dark\" : \"light\";\n });\n },\n }}\n >\n <MuiThemeProvider theme={theme}>\n <CssBaseline />\n {children}\n </MuiThemeProvider>\n </ThemeContext>\n );\n}\n\nexport default ThemeProvider;\n","import type { CommonProps } from \"@mui/material/OverridableComponent\";\nimport type { SwitchProps } from \"@mui/material/Switch\";\nimport type { ComponentType, CSSProperties } from \"react\";\n\nimport Box from \"@mui/material/Box\";\nimport { styled } from \"@mui/material/styles\";\nimport Switch from \"@mui/material/Switch\";\n\nexport interface SwitchWithIconsProps extends Omit<SwitchProps, \"icon\" | \"checkedIcon\"> {\n /** The icon to show when the switch is in a checked state. */\n checkedIcon: ComponentType<{ style?: CSSProperties }>;\n /** Additional styling to apply to the icon that shows when checked. */\n checkedIconStyles?: CommonProps[\"style\"];\n /** The icon to show when the switch is in an unchecked state. */\n uncheckedIcon: ComponentType<{ style?: CSSProperties }>;\n /** Additional styling to apply to the icon that shows when unchecked. */\n uncheckedIconStyles?: CommonProps[\"style\"];\n}\n\nconst StyledSwitch = styled(Switch)(() => {\n return {\n padding: 8,\n \"& .MuiSwitch-track\": {\n borderRadius: 11,\n \"&::before, &::after\": {\n content: '\"\"',\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n fontSize: 16,\n width: 28,\n height: 28,\n },\n },\n };\n});\n\n/** Renders a switch with your provided icons. */\nfunction SwitchWithIcons({\n checkedIcon: CheckedIcon,\n checkedIconStyles,\n uncheckedIcon: UncheckedIcon,\n uncheckedIconStyles,\n ...switchProps\n}: SwitchWithIconsProps) {\n const boxSx = {\n borderRadius: \"50%\",\n borderColor: \"white\",\n backgroundColor: \"white\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n padding: 0.25,\n };\n const defaultIconStyles = { color: \"black\", maxWidth: 16.5, maxHeight: 16.5 };\n return (\n <StyledSwitch\n checkedIcon={\n <Box sx={boxSx}>\n <CheckedIcon style={{ ...defaultIconStyles, ...checkedIconStyles }} />\n </Box>\n }\n icon={\n <Box sx={boxSx}>\n <UncheckedIcon style={{ ...defaultIconStyles, ...uncheckedIconStyles }} />\n </Box>\n }\n {...switchProps}\n />\n );\n}\n\nexport default SwitchWithIcons;\n","import Tooltip from \"@mui/material/Tooltip\";\nimport { MdOutlineDarkMode, MdOutlineLightMode } from \"react-icons/md\";\n\nimport SwitchWithIcons from \"src/root/components/SwitchWithIcons\";\nimport { useThemeContext } from \"src/theme/ThemeProvider\";\n\n/** A toggle to switch between dark mode and light mode. Must be used in a `ThemeProvider`. */\nfunction ThemeToggle() {\n const { mode, toggleMode } = useThemeContext();\n const isDarkMode = mode === \"dark\";\n const modeText = `Enable ${isDarkMode ? \"light\" : \"dark\"} mode`;\n\n return (\n <Tooltip title={modeText}>\n <SwitchWithIcons\n uncheckedIcon={MdOutlineLightMode}\n checkedIcon={MdOutlineDarkMode}\n checked={isDarkMode}\n onChange={toggleMode}\n aria-label={modeText}\n />\n </Tooltip>\n );\n}\n\nexport default ThemeToggle;\n"],"mappings":"ohBAiBA,MAAM,EAAe,EAA6C,IAAA,EAAS,EAG3E,SAAgB,EAA+C,CAC7D,SAAS,IACqB,CAAC,EAAmD,CAClF,IAAM,EAAU,EAAI,CAAY,EAChC,GAAI,GAAU,CAAC,EACb,MAAM,IAAI,EACR,CAAE,SAAQ,SAAQ,EAClB,0BACA,kFACF,EAEF,OAAO,CACT,CAYA,SAAS,EAAc,CAAE,WAAU,KAAM,EAAW,OAAQ,gBAAoC,CAC9F,GAAM,CAAC,EAAM,GAAW,EAAsB,CAAQ,EAEhD,EAAQ,MACL,EAAY,CACjB,QAAS,CACP,OACA,GAAG,EAAe,GAAc,SAAW,CAAC,EAAG,CAAC,MAAM,CAAC,CACzD,EACA,WAAY,CACV,SAAU,CACR,eAAgB,CACd,MAAO,CAAE,YACA,CACL,OAAQ,EACR,YAAa,QACb,YAAa,EAAM,QAAQ,OAC7B,GAEF,GAAG,GAAc,YAAY,UAAU,cACzC,EACA,GAAG,EAAe,GAAc,YAAY,UAAY,CAAC,EAAG,gBAAgB,CAC9E,EACA,GAAG,EAAe,GAAc,YAAc,CAAC,EAAG,UAAU,CAC9D,EACA,GAAG,EAAe,GAAgB,CAAC,EAAG,CAAC,aAAc,SAAS,CAAC,CACjE,CAAC,EACA,CAAC,EAAM,CAAY,CAAC,EAEvB,OACE,EAAC,EAAD,CACE,MAAO,CACL,OACA,eAAkB,CAChB,EAAS,GACA,IAAS,QAAU,OAAS,OACpC,CACH,CACF,WAEA,EAACA,EAAD,CAAyB,iBAAzB,CACE,EAAC,EAAD,CAAc,CAAA,EACb,CACe,GACN,CAAA,CAElB,CCvEA,MAAM,EAAe,EAAO,CAAM,OACzB,CACL,QAAS,EACT,qBAAsB,CACpB,aAAc,GACd,sBAAuB,CACrB,QAAS,KACT,SAAU,WACV,IAAK,MACL,UAAW,mBACX,SAAU,GACV,MAAO,GACP,OAAQ,EACV,CACF,CACF,EACD,EAGD,SAAS,EAAgB,CACvB,YAAa,EACb,oBACA,cAAe,EACf,sBACA,GAAG,GACoB,CACvB,IAAM,EAAQ,CACZ,aAAc,MACd,YAAa,QACb,gBAAiB,QACjB,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,QAAS,GACX,EACM,EAAoB,CAAE,MAAO,QAAS,SAAU,KAAM,UAAW,IAAK,EAC5E,OACE,EAAC,EAAD,CACE,YACE,EAAC,EAAD,CAAK,GAAI,WACP,EAAC,EAAD,CAAa,MAAO,CAAE,GAAG,EAAmB,GAAG,CAAkB,CAAI,CAAA,CAClE,CAAA,EAEP,KACE,EAAC,EAAD,CAAK,GAAI,WACP,EAAC,EAAD,CAAe,MAAO,CAAE,GAAG,EAAmB,GAAG,CAAoB,CAAI,CAAA,CACtE,CAAA,EAEP,GAAI,CACL,CAAA,CAEL,CC/DA,SAAS,GAAc,CACrB,GAAM,CAAE,OAAM,cAAe,EAAgB,EACvC,EAAa,IAAS,OACtB,EAAW,UAAU,EAAa,QAAU,OAAO,OAEzD,OACE,EAAC,EAAD,CAAS,MAAO,WACd,EAAC,EAAD,CACE,cAAe,EACf,YAAa,EACb,QAAS,EACT,SAAU,EACV,aAAY,CACb,CAAA,CACM,CAAA,CAEb"}
|