boreal-ui 0.0.26 → 0.0.28
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/core/{Footer-CcSbV-IP.js → Footer-CPg_4j5r.js} +2 -2
- package/dist/core/{Footer-CcSbV-IP.js.map → Footer-CPg_4j5r.js.map} +1 -1
- package/dist/core/{Footer-C0xaMboS.cjs → Footer-kLL_3Qc-.cjs} +2 -2
- package/dist/core/{Footer-C0xaMboS.cjs.map → Footer-kLL_3Qc-.cjs.map} +1 -1
- package/dist/core/Footer.cjs.js +1 -1
- package/dist/core/Footer.js +1 -1
- package/dist/core/{ThemeContext-Bo0vLczy.js → ThemeContext-B-z-faEj.js} +30 -30
- package/dist/core/ThemeContext-B-z-faEj.js.map +1 -0
- package/dist/core/{ThemeContext-CtZXUeeU.cjs → ThemeContext-CtNdJ7LK.cjs} +29 -29
- package/dist/core/ThemeContext-CtNdJ7LK.cjs.map +1 -0
- package/dist/core/ThemeProvider.cjs.js +1 -1
- package/dist/core/ThemeProvider.js +1 -1
- package/dist/core/index.cjs.js +2 -2
- package/dist/core/index.js +2 -2
- package/dist/next/{Footer-CQhcAscy.cjs → Footer-BvAAYL0M.cjs} +2 -2
- package/dist/next/{Footer-CQhcAscy.cjs.map → Footer-BvAAYL0M.cjs.map} +1 -1
- package/dist/next/{Footer-Rshwlhwo.js → Footer-D18LIc08.js} +2 -2
- package/dist/next/{Footer-Rshwlhwo.js.map → Footer-D18LIc08.js.map} +1 -1
- package/dist/next/Footer.cjs.js +1 -1
- package/dist/next/Footer.js +1 -1
- package/dist/next/{ThemeContext-Bo0vLczy.js → ThemeContext-B-z-faEj.js} +30 -30
- package/dist/next/ThemeContext-B-z-faEj.js.map +1 -0
- package/dist/next/{ThemeContext-BNR3_OIq.cjs → ThemeContext-BHzkqvlv.cjs} +29 -29
- package/dist/next/ThemeContext-BHzkqvlv.cjs.map +1 -0
- package/dist/next/ThemeInitScript-B22_wzIJ.cjs +37 -0
- package/dist/next/ThemeInitScript-B22_wzIJ.cjs.map +1 -0
- package/dist/next/ThemeInitScript-D6EpWMC9.js +38 -0
- package/dist/next/ThemeInitScript-D6EpWMC9.js.map +1 -0
- package/dist/next/ThemeInitScript.cjs.js +4 -0
- package/dist/next/ThemeInitScript.cjs.js.map +1 -0
- package/dist/next/ThemeInitScript.js +5 -0
- package/dist/next/ThemeInitScript.js.map +1 -0
- package/dist/next/ThemeProvider.cjs.js +1 -1
- package/dist/next/ThemeProvider.js +1 -1
- package/dist/next/index.cjs.js +4 -2
- package/dist/next/index.cjs.js.map +1 -1
- package/dist/next/index.js +21 -19
- package/dist/next/index.js.map +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/context/ThemeContext.d.ts +3 -1
- package/dist/types/context/ThemeContext.d.ts.map +1 -1
- package/dist/types/context/ThemeInitScript.d.ts +8 -0
- package/dist/types/context/ThemeInitScript.d.ts.map +1 -0
- package/dist/types/index.next.d.ts +1 -0
- package/dist/types/index.next.d.ts.map +1 -1
- package/package.json +5 -1
- package/dist/core/ThemeContext-Bo0vLczy.js.map +0 -1
- package/dist/core/ThemeContext-CtZXUeeU.cjs.map +0 -1
- package/dist/next/ThemeContext-BNR3_OIq.cjs.map +0 -1
- package/dist/next/ThemeContext-Bo0vLczy.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Footer-Rshwlhwo.js","sources":["../../src/components/Select/ThemeSelect/next/ThemeSelect.tsx","../../src/components/Footer/FooterBase.tsx","../../src/components/Footer/next/Footer.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useContext } from \"react\";\r\nimport { getAllColorSchemes } from \"../../../../styles/colorSchemeRegistry\";\r\nimport { Select } from \"@/index.next\";\r\nimport { ThemeContext } from \"../../../../context/ThemeContext\";\r\nimport { RoundingType, ShadowType, StateType, ThemeType } from \"@/types/types\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"@/config/boreal-style-config\";\r\n\r\ninterface ThemeSelectProps {\r\n theme?: ThemeType;\r\n shadow?: ShadowType;\r\n rounding?: RoundingType;\r\n \"data-testid\"?: string;\r\n state?: StateType;\r\n}\r\n\r\nconst UserThemeSettings: React.FC<ThemeSelectProps> = ({\r\n theme = getDefaultTheme(),\r\n shadow = getDefaultShadow(),\r\n rounding = getDefaultRounding(),\r\n state = \"\",\r\n \"data-testid\": testId = \"theme-select\",\r\n}) => {\r\n const themeContext = useContext(ThemeContext);\r\n\r\n if (!themeContext) {\r\n throw new Error(\r\n \"ThemeContext is undefined. Make sure to wrap this component with ThemeProvider.\"\r\n );\r\n }\r\n\r\n const { selectedScheme, setSelectedScheme } = themeContext;\r\n const allSchemes = getAllColorSchemes();\r\n\r\n const options = allSchemes.map((scheme, index) => ({\r\n value: index.toString(),\r\n label: scheme.name,\r\n }));\r\n\r\n return (\r\n <div className={`control-container`}>\r\n <Select\r\n theme={theme}\r\n state={state}\r\n shadow={shadow}\r\n rounding={rounding}\r\n options={options}\r\n data-testid={`${testId}-select`}\r\n value={selectedScheme.toString()}\r\n onChange={(value: string | number) =>\r\n setSelectedScheme(parseInt(value as string, 10))\r\n }\r\n ariaLabel=\"Select Theme\"\r\n />\r\n </div>\r\n );\r\n};\r\n\r\nexport default UserThemeSettings;\r\n","import React, { JSX, useMemo } from \"react\";\r\nimport { FooterProps } from \"./Footer.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { getDefaultTheme } from \"../../config/boreal-style-config\";\r\nimport { capitalize } from \"@/utils/capitalize\";\r\n\r\nexport interface BaseFooterProps extends FooterProps {\r\n IconButton: React.ComponentType<any>;\r\n ThemeSelect: React.ComponentType<any>;\r\n ImageComponent?: React.ElementType;\r\n classMap: Record<string, string>;\r\n LinkWrapper?: (props: {\r\n href: string;\r\n children: React.ReactNode;\r\n className?: string;\r\n [key: string]: any;\r\n }) => JSX.Element;\r\n}\r\n\r\nconst FooterBase: React.FC<BaseFooterProps> = ({\r\n theme = getDefaultTheme(),\r\n attachment = \"static\",\r\n shadow = \"none\",\r\n rounding = \"none\",\r\n className = \"\",\r\n \"data-testid\": testId = \"footer\",\r\n copyright,\r\n links = [],\r\n logo,\r\n socialLinks = [],\r\n showThemeSelect = false,\r\n IconButton,\r\n ImageComponent = \"img\",\r\n ThemeSelect,\r\n classMap,\r\n LinkWrapper = ({ href, children }) => <a href={href}>{children}</a>,\r\n}) => {\r\n const footerClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.footer,\r\n classMap[theme],\r\n classMap[`shadow${capitalize(shadow)}`],\r\n classMap[`round${capitalize(rounding)}`],\r\n classMap[`attachment${capitalize(attachment)}`],\r\n className\r\n ),\r\n [classMap, theme, className]\r\n );\r\n return (\r\n <footer\r\n className={footerClass}\r\n role=\"contentinfo\"\r\n aria-label=\"Footer\"\r\n data-testid={testId}\r\n >\r\n <div className={classMap.content}>\r\n <div className={classMap.left} data-testid={`${testId}-left`}>\r\n {logo &&\r\n (typeof logo === \"string\" ||\r\n (typeof logo === \"object\" && \"src\" in logo)) ? (\r\n <ImageComponent\r\n className={classMap.logo}\r\n aria-label=\"Logo\"\r\n role=\"img\"\r\n data-testid={`${testId}-logo`}\r\n loading=\"lazy\"\r\n src={logo}\r\n alt=\"Logo\"\r\n height={20}\r\n width={20}\r\n />\r\n ) : (\r\n <span\r\n className={classMap.logo}\r\n aria-label=\"Logo\"\r\n role=\"img\"\r\n data-testid={`${testId}-logo`}\r\n >\r\n {logo}\r\n </span>\r\n )}\r\n\r\n {copyright && (\r\n <div className={classMap.left} data-testid={`${testId}-copyright`}>\r\n <p>{copyright}</p>\r\n </div>\r\n )}\r\n </div>\r\n\r\n {links.length > 0 && (\r\n <nav\r\n className={classMap.links}\r\n aria-label=\"Footer site links\"\r\n data-testid={`${testId}-nav`}\r\n >\r\n <ul role=\"list\">\r\n {links.map((link, i) => (\r\n <li key={i}>\r\n <LinkWrapper\r\n href={link.href}\r\n className={classMap.link}\r\n data-testid={`${testId}-link-${link.label.toLowerCase().replace(/\\s+/g, \"-\")}`}\r\n >\r\n {link.label}\r\n </LinkWrapper>\r\n </li>\r\n ))}\r\n </ul>\r\n </nav>\r\n )}\r\n\r\n {showThemeSelect && (\r\n <div\r\n className={classMap.themeToggle}\r\n data-testid={`${testId}-theme-select`}\r\n aria-label=\"Theme selector container\"\r\n >\r\n <ThemeSelect theme={\"clear\"} shadow={\"none\"} />\r\n </div>\r\n )}\r\n\r\n {socialLinks.length > 0 && (\r\n <div\r\n className={classMap.social}\r\n aria-label=\"Social media\"\r\n role=\"navigation\"\r\n data-testid={`${testId}-social`}\r\n >\r\n {socialLinks.map((social, index) => (\r\n <IconButton\r\n key={index}\r\n icon={social.icon}\r\n href={social.href}\r\n isExternal\r\n shadow=\"none\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n ariaLabel={social.title}\r\n title={social.title}\r\n theme=\"clear\"\r\n data-testid={`${testId}-social-${social.title\r\n .toLowerCase()\r\n .replace(/\\s+/g, \"-\")}`}\r\n />\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n </footer>\r\n );\r\n};\r\n\r\nexport default FooterBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport FooterBase from \"../FooterBase\";\r\nimport { FooterProps } from \"../Footer.types\";\r\nimport { IconButton, ThemeSelect } from \"@/index.next\";\r\nimport Link from \"next/link\";\r\nimport styles from \"./Footer.module.scss\";\r\nimport Image from \"next/image\";\r\n\r\nconst Footer: React.FC<FooterProps> = (props) => {\r\n return (\r\n <FooterBase\r\n {...props}\r\n IconButton={IconButton}\r\n ImageComponent={Image}\r\n ThemeSelect={ThemeSelect}\r\n LinkWrapper={({ href, children, className, ...rest }) => (\r\n <Link href={href} className={className} {...rest}>\r\n {children}\r\n </Link>\r\n )}\r\n classMap={styles}\r\n />\r\n );\r\n};\r\n\r\nexport default Footer;\r\n"],"names":["links","logo","IconButton","social","ThemeSelect"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Footer-D18LIc08.js","sources":["../../src/components/Select/ThemeSelect/next/ThemeSelect.tsx","../../src/components/Footer/FooterBase.tsx","../../src/components/Footer/next/Footer.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useContext } from \"react\";\r\nimport { getAllColorSchemes } from \"../../../../styles/colorSchemeRegistry\";\r\nimport { Select } from \"@/index.next\";\r\nimport { ThemeContext } from \"../../../../context/ThemeContext\";\r\nimport { RoundingType, ShadowType, StateType, ThemeType } from \"@/types/types\";\r\nimport {\r\n getDefaultRounding,\r\n getDefaultShadow,\r\n getDefaultTheme,\r\n} from \"@/config/boreal-style-config\";\r\n\r\ninterface ThemeSelectProps {\r\n theme?: ThemeType;\r\n shadow?: ShadowType;\r\n rounding?: RoundingType;\r\n \"data-testid\"?: string;\r\n state?: StateType;\r\n}\r\n\r\nconst UserThemeSettings: React.FC<ThemeSelectProps> = ({\r\n theme = getDefaultTheme(),\r\n shadow = getDefaultShadow(),\r\n rounding = getDefaultRounding(),\r\n state = \"\",\r\n \"data-testid\": testId = \"theme-select\",\r\n}) => {\r\n const themeContext = useContext(ThemeContext);\r\n\r\n if (!themeContext) {\r\n throw new Error(\r\n \"ThemeContext is undefined. Make sure to wrap this component with ThemeProvider.\"\r\n );\r\n }\r\n\r\n const { selectedScheme, setSelectedScheme } = themeContext;\r\n const allSchemes = getAllColorSchemes();\r\n\r\n const options = allSchemes.map((scheme, index) => ({\r\n value: index.toString(),\r\n label: scheme.name,\r\n }));\r\n\r\n return (\r\n <div className={`control-container`}>\r\n <Select\r\n theme={theme}\r\n state={state}\r\n shadow={shadow}\r\n rounding={rounding}\r\n options={options}\r\n data-testid={`${testId}-select`}\r\n value={selectedScheme.toString()}\r\n onChange={(value: string | number) =>\r\n setSelectedScheme(parseInt(value as string, 10))\r\n }\r\n ariaLabel=\"Select Theme\"\r\n />\r\n </div>\r\n );\r\n};\r\n\r\nexport default UserThemeSettings;\r\n","import React, { JSX, useMemo } from \"react\";\r\nimport { FooterProps } from \"./Footer.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { getDefaultTheme } from \"../../config/boreal-style-config\";\r\nimport { capitalize } from \"@/utils/capitalize\";\r\n\r\nexport interface BaseFooterProps extends FooterProps {\r\n IconButton: React.ComponentType<any>;\r\n ThemeSelect: React.ComponentType<any>;\r\n ImageComponent?: React.ElementType;\r\n classMap: Record<string, string>;\r\n LinkWrapper?: (props: {\r\n href: string;\r\n children: React.ReactNode;\r\n className?: string;\r\n [key: string]: any;\r\n }) => JSX.Element;\r\n}\r\n\r\nconst FooterBase: React.FC<BaseFooterProps> = ({\r\n theme = getDefaultTheme(),\r\n attachment = \"static\",\r\n shadow = \"none\",\r\n rounding = \"none\",\r\n className = \"\",\r\n \"data-testid\": testId = \"footer\",\r\n copyright,\r\n links = [],\r\n logo,\r\n socialLinks = [],\r\n showThemeSelect = false,\r\n IconButton,\r\n ImageComponent = \"img\",\r\n ThemeSelect,\r\n classMap,\r\n LinkWrapper = ({ href, children }) => <a href={href}>{children}</a>,\r\n}) => {\r\n const footerClass = useMemo(\r\n () =>\r\n combineClassNames(\r\n classMap.footer,\r\n classMap[theme],\r\n classMap[`shadow${capitalize(shadow)}`],\r\n classMap[`round${capitalize(rounding)}`],\r\n classMap[`attachment${capitalize(attachment)}`],\r\n className\r\n ),\r\n [classMap, theme, className]\r\n );\r\n return (\r\n <footer\r\n className={footerClass}\r\n role=\"contentinfo\"\r\n aria-label=\"Footer\"\r\n data-testid={testId}\r\n >\r\n <div className={classMap.content}>\r\n <div className={classMap.left} data-testid={`${testId}-left`}>\r\n {logo &&\r\n (typeof logo === \"string\" ||\r\n (typeof logo === \"object\" && \"src\" in logo)) ? (\r\n <ImageComponent\r\n className={classMap.logo}\r\n aria-label=\"Logo\"\r\n role=\"img\"\r\n data-testid={`${testId}-logo`}\r\n loading=\"lazy\"\r\n src={logo}\r\n alt=\"Logo\"\r\n height={20}\r\n width={20}\r\n />\r\n ) : (\r\n <span\r\n className={classMap.logo}\r\n aria-label=\"Logo\"\r\n role=\"img\"\r\n data-testid={`${testId}-logo`}\r\n >\r\n {logo}\r\n </span>\r\n )}\r\n\r\n {copyright && (\r\n <div className={classMap.left} data-testid={`${testId}-copyright`}>\r\n <p>{copyright}</p>\r\n </div>\r\n )}\r\n </div>\r\n\r\n {links.length > 0 && (\r\n <nav\r\n className={classMap.links}\r\n aria-label=\"Footer site links\"\r\n data-testid={`${testId}-nav`}\r\n >\r\n <ul role=\"list\">\r\n {links.map((link, i) => (\r\n <li key={i}>\r\n <LinkWrapper\r\n href={link.href}\r\n className={classMap.link}\r\n data-testid={`${testId}-link-${link.label.toLowerCase().replace(/\\s+/g, \"-\")}`}\r\n >\r\n {link.label}\r\n </LinkWrapper>\r\n </li>\r\n ))}\r\n </ul>\r\n </nav>\r\n )}\r\n\r\n {showThemeSelect && (\r\n <div\r\n className={classMap.themeToggle}\r\n data-testid={`${testId}-theme-select`}\r\n aria-label=\"Theme selector container\"\r\n >\r\n <ThemeSelect theme={\"clear\"} shadow={\"none\"} />\r\n </div>\r\n )}\r\n\r\n {socialLinks.length > 0 && (\r\n <div\r\n className={classMap.social}\r\n aria-label=\"Social media\"\r\n role=\"navigation\"\r\n data-testid={`${testId}-social`}\r\n >\r\n {socialLinks.map((social, index) => (\r\n <IconButton\r\n key={index}\r\n icon={social.icon}\r\n href={social.href}\r\n isExternal\r\n shadow=\"none\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n ariaLabel={social.title}\r\n title={social.title}\r\n theme=\"clear\"\r\n data-testid={`${testId}-social-${social.title\r\n .toLowerCase()\r\n .replace(/\\s+/g, \"-\")}`}\r\n />\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n </footer>\r\n );\r\n};\r\n\r\nexport default FooterBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport FooterBase from \"../FooterBase\";\r\nimport { FooterProps } from \"../Footer.types\";\r\nimport { IconButton, ThemeSelect } from \"@/index.next\";\r\nimport Link from \"next/link\";\r\nimport styles from \"./Footer.module.scss\";\r\nimport Image from \"next/image\";\r\n\r\nconst Footer: React.FC<FooterProps> = (props) => {\r\n return (\r\n <FooterBase\r\n {...props}\r\n IconButton={IconButton}\r\n ImageComponent={Image}\r\n ThemeSelect={ThemeSelect}\r\n LinkWrapper={({ href, children, className, ...rest }) => (\r\n <Link href={href} className={className} {...rest}>\r\n {children}\r\n </Link>\r\n )}\r\n classMap={styles}\r\n />\r\n );\r\n};\r\n\r\nexport default Footer;\r\n"],"names":["links","logo","IconButton","social","ThemeSelect"],"mappings":"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"}
|
package/dist/next/Footer.cjs.js
CHANGED
package/dist/next/Footer.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { createContext, useState, useEffect } from "react";
|
|
2
|
+
import { createContext, useState, useEffect, useLayoutEffect } from "react";
|
|
3
3
|
import { r as registerColorScheme, g as getAllColorSchemes } from "./registerColorSheme-BPX0H7hl.js";
|
|
4
4
|
import { g as getDefaultColorSchemeName } from "./boreal-style-config-BILmxkZG.js";
|
|
5
5
|
import { colorSchemes } from "./colorSchemes.js";
|
|
@@ -10,29 +10,31 @@ const fallbackIndex = colorSchemes.findIndex(
|
|
|
10
10
|
(scheme) => scheme.name === getDefaultColorSchemeName()
|
|
11
11
|
);
|
|
12
12
|
const defaultIndex = fallbackIndex !== -1 ? fallbackIndex : 0;
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
customSchemes = []
|
|
16
|
-
}) => {
|
|
17
|
-
const [selectedScheme, setSelectedScheme] = useState(defaultIndex);
|
|
13
|
+
const STORAGE_KEY = "boreal:selectedScheme";
|
|
14
|
+
const ThemeProvider = ({ children, customSchemes = [], initialScheme }) => {
|
|
18
15
|
if (fallbackIndex === -1 && process.env.NODE_ENV === "development") {
|
|
19
16
|
console.warn(
|
|
20
17
|
`Default color scheme "${getDefaultColorSchemeName()}" not found. Falling back to index 0.`
|
|
21
18
|
);
|
|
22
19
|
}
|
|
20
|
+
const [selectedScheme, setSelectedScheme] = useState(() => {
|
|
21
|
+
if (typeof initialScheme === "number") return initialScheme;
|
|
22
|
+
if (typeof window !== "undefined") {
|
|
23
|
+
try {
|
|
24
|
+
const saved = localStorage.getItem(STORAGE_KEY);
|
|
25
|
+
if (saved != null) return parseInt(saved, 10);
|
|
26
|
+
} catch {
|
|
27
|
+
console.error("Failed to load saved theme index");
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
return defaultIndex;
|
|
31
|
+
});
|
|
23
32
|
useEffect(() => {
|
|
24
33
|
registerColorScheme(customSchemes);
|
|
25
34
|
}, [customSchemes]);
|
|
26
|
-
|
|
27
|
-
const savedScheme = localStorage.getItem("selectedScheme");
|
|
28
|
-
if (savedScheme) {
|
|
29
|
-
setSelectedScheme(parseInt(savedScheme, 10));
|
|
30
|
-
} else {
|
|
31
|
-
setSelectedScheme(defaultIndex);
|
|
32
|
-
}
|
|
33
|
-
}, []);
|
|
34
|
-
useEffect(() => {
|
|
35
|
+
useLayoutEffect(() => {
|
|
35
36
|
const allSchemes = getAllColorSchemes();
|
|
37
|
+
const scheme = allSchemes[selectedScheme] ?? allSchemes[defaultIndex];
|
|
36
38
|
const {
|
|
37
39
|
primaryColor,
|
|
38
40
|
secondaryColor,
|
|
@@ -40,7 +42,7 @@ const ThemeProvider = ({
|
|
|
40
42
|
quaternaryColor,
|
|
41
43
|
backgroundColor,
|
|
42
44
|
forceTextColor
|
|
43
|
-
} =
|
|
45
|
+
} = scheme;
|
|
44
46
|
const hexToHSL = (hex) => {
|
|
45
47
|
const r = parseInt(hex.slice(1, 3), 16) / 255;
|
|
46
48
|
const g = parseInt(hex.slice(3, 5), 16) / 255;
|
|
@@ -91,17 +93,15 @@ const ThemeProvider = ({
|
|
|
91
93
|
});
|
|
92
94
|
return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
|
|
93
95
|
};
|
|
94
|
-
const contrastRatio = (
|
|
95
|
-
const lum1 = relativeLuminance(
|
|
96
|
-
const lum2 = relativeLuminance(
|
|
96
|
+
const contrastRatio = (a, b) => {
|
|
97
|
+
const lum1 = relativeLuminance(a);
|
|
98
|
+
const lum2 = relativeLuminance(b);
|
|
97
99
|
const lighter = Math.max(lum1, lum2);
|
|
98
100
|
const darker = Math.min(lum1, lum2);
|
|
99
101
|
return (lighter + 0.05) / (darker + 0.05);
|
|
100
102
|
};
|
|
101
|
-
const getAccessibleTextColor = (
|
|
102
|
-
|
|
103
|
-
};
|
|
104
|
-
const variants = {
|
|
103
|
+
const getAccessibleTextColor = (bg) => contrastRatio(bg, "#000000") >= 4.5 ? "#000000" : "#FFFFFF";
|
|
104
|
+
const vars = {
|
|
105
105
|
"--primary-color": primaryColor,
|
|
106
106
|
"--primary-color-light": adjustLightness(primaryColor, 10),
|
|
107
107
|
"--primary-color-hover": adjustLightness(primaryColor, -10),
|
|
@@ -131,12 +131,12 @@ const ThemeProvider = ({
|
|
|
131
131
|
"--link-hover-color-primary": adjustLightness(primaryColor, -10),
|
|
132
132
|
"--link-hover-color-secondary": adjustLightness(secondaryColor, -10)
|
|
133
133
|
};
|
|
134
|
-
const
|
|
135
|
-
for (const [
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
134
|
+
const rootStyle = document.documentElement.style;
|
|
135
|
+
for (const [k, v] of Object.entries(vars)) rootStyle.setProperty(k, v);
|
|
136
|
+
try {
|
|
137
|
+
localStorage.setItem(STORAGE_KEY, String(selectedScheme));
|
|
138
|
+
} catch {
|
|
139
|
+
console.error("Failed to save theme index");
|
|
140
140
|
}
|
|
141
141
|
}, [selectedScheme]);
|
|
142
142
|
return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { selectedScheme, setSelectedScheme }, children });
|
|
@@ -145,4 +145,4 @@ export {
|
|
|
145
145
|
ThemeProvider as T,
|
|
146
146
|
ThemeContext as a
|
|
147
147
|
};
|
|
148
|
-
//# sourceMappingURL=ThemeContext-
|
|
148
|
+
//# sourceMappingURL=ThemeContext-B-z-faEj.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeContext-B-z-faEj.js","sources":["../../src/context/ThemeContext.tsx"],"sourcesContent":["\"use client\";\r\n\r\n/**\r\n * ---------------------------------------------------------------------\r\n * ThemeProvider.tsx\r\n * ---------------------------------------------------------------------\r\n * Provides a React context for managing and applying color schemes\r\n * dynamically across the Boreal UI system.\r\n *\r\n * Responsibilities:\r\n * - Registers any custom color schemes at runtime\r\n * - Sets the active color scheme based on `localStorage` or fallback default\r\n * - Dynamically updates CSS custom properties (`--*`) on the `:root`\r\n * to reflect the selected theme's color values\r\n * - Ensures text color contrast by calculating luminance and WCAG ratios\r\n *\r\n * Includes:\r\n * - Lightness adjustment utilities for generating `*-light` and `*-hover` variants\r\n * - Contrast checking and accessible text color fallbacks\r\n * - `ThemeContext` with `selectedScheme` index and setter\r\n *\r\n * Hooks:\r\n * - `useEffect` to register schemes and sync saved theme index\r\n * - `useEffect` to apply all computed color variables to `document.documentElement`\r\n *\r\n * Usage:\r\n * ```tsx\r\n * <ThemeProvider customSchemes={[customTheme]}>\r\n * <App />\r\n * </ThemeProvider>\r\n * ```\r\n *\r\n * Access via context:\r\n * ```ts\r\n * const { selectedScheme, setSelectedScheme } = useContext(ThemeContext);\r\n * ```\r\n */\r\n\r\nimport React, {\r\n createContext,\r\n useState,\r\n useEffect,\r\n useLayoutEffect,\r\n} from \"react\";\r\nimport {\r\n getAllColorSchemes,\r\n registerColorScheme,\r\n} from \"../styles/colorSchemeRegistry\";\r\nimport { getDefaultColorSchemeName } from \"../config/boreal-style-config\";\r\nimport { colorSchemes } from \"../styles/Themes\";\r\nimport { ThemeContextType, ThemeProviderProps } from \"./ThemeContext.types\";\r\n\r\nexport const ThemeContext = createContext<ThemeContextType | undefined>(\r\n undefined\r\n);\r\n\r\nconst fallbackIndex = colorSchemes.findIndex(\r\n (scheme) => scheme.name === getDefaultColorSchemeName()\r\n);\r\nconst defaultIndex = fallbackIndex !== -1 ? fallbackIndex : 0;\r\n\r\nconst STORAGE_KEY = \"boreal:selectedScheme\";\r\n\r\nconst ThemeProvider: React.FC<\r\n ThemeProviderProps & { initialScheme?: number }\r\n> = ({ children, customSchemes = [], initialScheme }) => {\r\n if (fallbackIndex === -1 && process.env.NODE_ENV === \"development\") {\r\n console.warn(\r\n `Default color scheme \"${getDefaultColorSchemeName()}\" not found. Falling back to index 0.`\r\n );\r\n }\r\n\r\n const [selectedScheme, setSelectedScheme] = useState<number>(() => {\r\n if (typeof initialScheme === \"number\") return initialScheme;\r\n\r\n if (typeof window !== \"undefined\") {\r\n try {\r\n const saved = localStorage.getItem(STORAGE_KEY);\r\n if (saved != null) return parseInt(saved, 10);\r\n } catch {\r\n console.error(\"Failed to load saved theme index\");\r\n }\r\n }\r\n return defaultIndex;\r\n });\r\n\r\n useEffect(() => {\r\n registerColorScheme(customSchemes);\r\n }, [customSchemes]);\r\n\r\n useLayoutEffect(() => {\r\n const allSchemes = getAllColorSchemes();\r\n const scheme = allSchemes[selectedScheme] ?? allSchemes[defaultIndex];\r\n\r\n const {\r\n primaryColor,\r\n secondaryColor,\r\n tertiaryColor,\r\n quaternaryColor,\r\n backgroundColor,\r\n forceTextColor,\r\n } = scheme;\r\n\r\n const hexToHSL = (hex: string) => {\r\n const r = parseInt(hex.slice(1, 3), 16) / 255;\r\n const g = parseInt(hex.slice(3, 5), 16) / 255;\r\n const b = parseInt(hex.slice(5, 7), 16) / 255;\r\n const max = Math.max(r, g, b),\r\n min = Math.min(r, g, b);\r\n let h = 0,\r\n s = 0;\r\n const l = (max + min) / 2;\r\n if (max !== min) {\r\n const d = max - min;\r\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\r\n switch (max) {\r\n case r:\r\n h = (g - b) / d + (g < b ? 6 : 0);\r\n break;\r\n case g:\r\n h = (b - r) / d + 2;\r\n break;\r\n case b:\r\n h = (r - g) / d + 4;\r\n break;\r\n }\r\n h /= 6;\r\n }\r\n return {\r\n h: Math.round(h * 360),\r\n s: Math.round(s * 100),\r\n l: Math.round(l * 100),\r\n };\r\n };\r\n\r\n const hslToHex = (h: number, s: number, l: number): string => {\r\n s /= 100;\r\n l /= 100;\r\n const k = (n: number) => (n + h / 30) % 12;\r\n const a = s * Math.min(l, 1 - l);\r\n const f = (n: number) =>\r\n Math.round(\r\n 255 *\r\n (l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))))\r\n );\r\n return `#${[f(0), f(8), f(4)].map((x) => x.toString(16).padStart(2, \"0\")).join(\"\")}`;\r\n };\r\n\r\n const adjustLightness = (hex: string, percent: number): string => {\r\n const { h, s, l } = hexToHSL(hex);\r\n return hslToHex(h, s, Math.min(100, Math.max(0, l + percent)));\r\n };\r\n\r\n const relativeLuminance = (hex: string): number => {\r\n const rgb = [1, 3, 5].map((i) => {\r\n const c = parseInt(hex.slice(i, i + 2), 16) / 255;\r\n return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\r\n });\r\n return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];\r\n };\r\n\r\n const contrastRatio = (a: string, b: string): number => {\r\n const lum1 = relativeLuminance(a);\r\n const lum2 = relativeLuminance(b);\r\n const lighter = Math.max(lum1, lum2);\r\n const darker = Math.min(lum1, lum2);\r\n return (lighter + 0.05) / (darker + 0.05);\r\n };\r\n\r\n const getAccessibleTextColor = (bg: string): string =>\r\n contrastRatio(bg, \"#000000\") >= 4.5 ? \"#000000\" : \"#FFFFFF\";\r\n\r\n const vars = {\r\n \"--primary-color\": primaryColor,\r\n \"--primary-color-light\": adjustLightness(primaryColor, 10),\r\n \"--primary-color-hover\": adjustLightness(primaryColor, -10),\r\n \"--text-color-primary\":\r\n forceTextColor ?? getAccessibleTextColor(primaryColor),\r\n\r\n \"--secondary-color\": secondaryColor,\r\n \"--secondary-color-light\": adjustLightness(secondaryColor, 10),\r\n \"--secondary-color-hover\": adjustLightness(secondaryColor, -10),\r\n \"--text-color-secondary\": getAccessibleTextColor(secondaryColor),\r\n\r\n \"--tertiary-color\": tertiaryColor,\r\n \"--tertiary-color-light\": adjustLightness(tertiaryColor, 10),\r\n \"--tertiary-color-hover\": adjustLightness(tertiaryColor, -10),\r\n \"--text-color-tertiary\": getAccessibleTextColor(tertiaryColor),\r\n\r\n \"--quaternary-color\": quaternaryColor,\r\n \"--quaternary-color-light\": adjustLightness(quaternaryColor, 10),\r\n \"--quaternary-color-hover\": adjustLightness(quaternaryColor, -10),\r\n \"--text-color-quaternary\": getAccessibleTextColor(quaternaryColor),\r\n\r\n \"--background-color\": backgroundColor,\r\n \"--background-color-dark\": adjustLightness(backgroundColor, -10),\r\n \"--background-color-darker\": adjustLightness(backgroundColor, -25),\r\n \"--background-color-light\": adjustLightness(backgroundColor, 10),\r\n \"--background-color-lighter\": adjustLightness(backgroundColor, 20),\r\n\r\n \"--link-color\": getAccessibleTextColor(backgroundColor),\r\n \"--link-color-hover\": adjustLightness(\r\n getAccessibleTextColor(backgroundColor),\r\n -20\r\n ),\r\n \"--link-hover-color-primary\": adjustLightness(primaryColor, -10),\r\n \"--link-hover-color-secondary\": adjustLightness(secondaryColor, -10),\r\n } as const;\r\n\r\n const rootStyle = document.documentElement.style;\r\n for (const [k, v] of Object.entries(vars)) rootStyle.setProperty(k, v);\r\n\r\n try {\r\n localStorage.setItem(STORAGE_KEY, String(selectedScheme));\r\n } catch {\r\n console.error(\"Failed to save theme index\");\r\n }\r\n }, [selectedScheme]);\r\n\r\n return (\r\n <ThemeContext.Provider value={{ selectedScheme, setSelectedScheme }}>\r\n {children}\r\n </ThemeContext.Provider>\r\n );\r\n};\r\n\r\nexport default ThemeProvider;\r\n"],"names":[],"mappings":"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"}
|
|
@@ -11,29 +11,31 @@ const fallbackIndex = colorSchemes.colorSchemes.findIndex(
|
|
|
11
11
|
(scheme) => scheme.name === borealStyleConfig.getDefaultColorSchemeName()
|
|
12
12
|
);
|
|
13
13
|
const defaultIndex = fallbackIndex !== -1 ? fallbackIndex : 0;
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
customSchemes = []
|
|
17
|
-
}) => {
|
|
18
|
-
const [selectedScheme, setSelectedScheme] = React.useState(defaultIndex);
|
|
14
|
+
const STORAGE_KEY = "boreal:selectedScheme";
|
|
15
|
+
const ThemeProvider = ({ children, customSchemes = [], initialScheme }) => {
|
|
19
16
|
if (fallbackIndex === -1 && process.env.NODE_ENV === "development") {
|
|
20
17
|
console.warn(
|
|
21
18
|
`Default color scheme "${borealStyleConfig.getDefaultColorSchemeName()}" not found. Falling back to index 0.`
|
|
22
19
|
);
|
|
23
20
|
}
|
|
21
|
+
const [selectedScheme, setSelectedScheme] = React.useState(() => {
|
|
22
|
+
if (typeof initialScheme === "number") return initialScheme;
|
|
23
|
+
if (typeof window !== "undefined") {
|
|
24
|
+
try {
|
|
25
|
+
const saved = localStorage.getItem(STORAGE_KEY);
|
|
26
|
+
if (saved != null) return parseInt(saved, 10);
|
|
27
|
+
} catch {
|
|
28
|
+
console.error("Failed to load saved theme index");
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
return defaultIndex;
|
|
32
|
+
});
|
|
24
33
|
React.useEffect(() => {
|
|
25
34
|
registerColorSheme.registerColorScheme(customSchemes);
|
|
26
35
|
}, [customSchemes]);
|
|
27
|
-
React.
|
|
28
|
-
const savedScheme = localStorage.getItem("selectedScheme");
|
|
29
|
-
if (savedScheme) {
|
|
30
|
-
setSelectedScheme(parseInt(savedScheme, 10));
|
|
31
|
-
} else {
|
|
32
|
-
setSelectedScheme(defaultIndex);
|
|
33
|
-
}
|
|
34
|
-
}, []);
|
|
35
|
-
React.useEffect(() => {
|
|
36
|
+
React.useLayoutEffect(() => {
|
|
36
37
|
const allSchemes = registerColorSheme.getAllColorSchemes();
|
|
38
|
+
const scheme = allSchemes[selectedScheme] ?? allSchemes[defaultIndex];
|
|
37
39
|
const {
|
|
38
40
|
primaryColor,
|
|
39
41
|
secondaryColor,
|
|
@@ -41,7 +43,7 @@ const ThemeProvider = ({
|
|
|
41
43
|
quaternaryColor,
|
|
42
44
|
backgroundColor,
|
|
43
45
|
forceTextColor
|
|
44
|
-
} =
|
|
46
|
+
} = scheme;
|
|
45
47
|
const hexToHSL = (hex) => {
|
|
46
48
|
const r = parseInt(hex.slice(1, 3), 16) / 255;
|
|
47
49
|
const g = parseInt(hex.slice(3, 5), 16) / 255;
|
|
@@ -92,17 +94,15 @@ const ThemeProvider = ({
|
|
|
92
94
|
});
|
|
93
95
|
return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
|
|
94
96
|
};
|
|
95
|
-
const contrastRatio = (
|
|
96
|
-
const lum1 = relativeLuminance(
|
|
97
|
-
const lum2 = relativeLuminance(
|
|
97
|
+
const contrastRatio = (a, b) => {
|
|
98
|
+
const lum1 = relativeLuminance(a);
|
|
99
|
+
const lum2 = relativeLuminance(b);
|
|
98
100
|
const lighter = Math.max(lum1, lum2);
|
|
99
101
|
const darker = Math.min(lum1, lum2);
|
|
100
102
|
return (lighter + 0.05) / (darker + 0.05);
|
|
101
103
|
};
|
|
102
|
-
const getAccessibleTextColor = (
|
|
103
|
-
|
|
104
|
-
};
|
|
105
|
-
const variants = {
|
|
104
|
+
const getAccessibleTextColor = (bg) => contrastRatio(bg, "#000000") >= 4.5 ? "#000000" : "#FFFFFF";
|
|
105
|
+
const vars = {
|
|
106
106
|
"--primary-color": primaryColor,
|
|
107
107
|
"--primary-color-light": adjustLightness(primaryColor, 10),
|
|
108
108
|
"--primary-color-hover": adjustLightness(primaryColor, -10),
|
|
@@ -132,16 +132,16 @@ const ThemeProvider = ({
|
|
|
132
132
|
"--link-hover-color-primary": adjustLightness(primaryColor, -10),
|
|
133
133
|
"--link-hover-color-secondary": adjustLightness(secondaryColor, -10)
|
|
134
134
|
};
|
|
135
|
-
const
|
|
136
|
-
for (const [
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
135
|
+
const rootStyle = document.documentElement.style;
|
|
136
|
+
for (const [k, v] of Object.entries(vars)) rootStyle.setProperty(k, v);
|
|
137
|
+
try {
|
|
138
|
+
localStorage.setItem(STORAGE_KEY, String(selectedScheme));
|
|
139
|
+
} catch {
|
|
140
|
+
console.error("Failed to save theme index");
|
|
141
141
|
}
|
|
142
142
|
}, [selectedScheme]);
|
|
143
143
|
return /* @__PURE__ */ require$$2.jsx(ThemeContext.Provider, { value: { selectedScheme, setSelectedScheme }, children });
|
|
144
144
|
};
|
|
145
145
|
exports.ThemeContext = ThemeContext;
|
|
146
146
|
exports.ThemeProvider = ThemeProvider;
|
|
147
|
-
//# sourceMappingURL=ThemeContext-
|
|
147
|
+
//# sourceMappingURL=ThemeContext-BHzkqvlv.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeContext-BHzkqvlv.cjs","sources":["../../src/context/ThemeContext.tsx"],"sourcesContent":["\"use client\";\r\n\r\n/**\r\n * ---------------------------------------------------------------------\r\n * ThemeProvider.tsx\r\n * ---------------------------------------------------------------------\r\n * Provides a React context for managing and applying color schemes\r\n * dynamically across the Boreal UI system.\r\n *\r\n * Responsibilities:\r\n * - Registers any custom color schemes at runtime\r\n * - Sets the active color scheme based on `localStorage` or fallback default\r\n * - Dynamically updates CSS custom properties (`--*`) on the `:root`\r\n * to reflect the selected theme's color values\r\n * - Ensures text color contrast by calculating luminance and WCAG ratios\r\n *\r\n * Includes:\r\n * - Lightness adjustment utilities for generating `*-light` and `*-hover` variants\r\n * - Contrast checking and accessible text color fallbacks\r\n * - `ThemeContext` with `selectedScheme` index and setter\r\n *\r\n * Hooks:\r\n * - `useEffect` to register schemes and sync saved theme index\r\n * - `useEffect` to apply all computed color variables to `document.documentElement`\r\n *\r\n * Usage:\r\n * ```tsx\r\n * <ThemeProvider customSchemes={[customTheme]}>\r\n * <App />\r\n * </ThemeProvider>\r\n * ```\r\n *\r\n * Access via context:\r\n * ```ts\r\n * const { selectedScheme, setSelectedScheme } = useContext(ThemeContext);\r\n * ```\r\n */\r\n\r\nimport React, {\r\n createContext,\r\n useState,\r\n useEffect,\r\n useLayoutEffect,\r\n} from \"react\";\r\nimport {\r\n getAllColorSchemes,\r\n registerColorScheme,\r\n} from \"../styles/colorSchemeRegistry\";\r\nimport { getDefaultColorSchemeName } from \"../config/boreal-style-config\";\r\nimport { colorSchemes } from \"../styles/Themes\";\r\nimport { ThemeContextType, ThemeProviderProps } from \"./ThemeContext.types\";\r\n\r\nexport const ThemeContext = createContext<ThemeContextType | undefined>(\r\n undefined\r\n);\r\n\r\nconst fallbackIndex = colorSchemes.findIndex(\r\n (scheme) => scheme.name === getDefaultColorSchemeName()\r\n);\r\nconst defaultIndex = fallbackIndex !== -1 ? fallbackIndex : 0;\r\n\r\nconst STORAGE_KEY = \"boreal:selectedScheme\";\r\n\r\nconst ThemeProvider: React.FC<\r\n ThemeProviderProps & { initialScheme?: number }\r\n> = ({ children, customSchemes = [], initialScheme }) => {\r\n if (fallbackIndex === -1 && process.env.NODE_ENV === \"development\") {\r\n console.warn(\r\n `Default color scheme \"${getDefaultColorSchemeName()}\" not found. Falling back to index 0.`\r\n );\r\n }\r\n\r\n const [selectedScheme, setSelectedScheme] = useState<number>(() => {\r\n if (typeof initialScheme === \"number\") return initialScheme;\r\n\r\n if (typeof window !== \"undefined\") {\r\n try {\r\n const saved = localStorage.getItem(STORAGE_KEY);\r\n if (saved != null) return parseInt(saved, 10);\r\n } catch {\r\n console.error(\"Failed to load saved theme index\");\r\n }\r\n }\r\n return defaultIndex;\r\n });\r\n\r\n useEffect(() => {\r\n registerColorScheme(customSchemes);\r\n }, [customSchemes]);\r\n\r\n useLayoutEffect(() => {\r\n const allSchemes = getAllColorSchemes();\r\n const scheme = allSchemes[selectedScheme] ?? allSchemes[defaultIndex];\r\n\r\n const {\r\n primaryColor,\r\n secondaryColor,\r\n tertiaryColor,\r\n quaternaryColor,\r\n backgroundColor,\r\n forceTextColor,\r\n } = scheme;\r\n\r\n const hexToHSL = (hex: string) => {\r\n const r = parseInt(hex.slice(1, 3), 16) / 255;\r\n const g = parseInt(hex.slice(3, 5), 16) / 255;\r\n const b = parseInt(hex.slice(5, 7), 16) / 255;\r\n const max = Math.max(r, g, b),\r\n min = Math.min(r, g, b);\r\n let h = 0,\r\n s = 0;\r\n const l = (max + min) / 2;\r\n if (max !== min) {\r\n const d = max - min;\r\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\r\n switch (max) {\r\n case r:\r\n h = (g - b) / d + (g < b ? 6 : 0);\r\n break;\r\n case g:\r\n h = (b - r) / d + 2;\r\n break;\r\n case b:\r\n h = (r - g) / d + 4;\r\n break;\r\n }\r\n h /= 6;\r\n }\r\n return {\r\n h: Math.round(h * 360),\r\n s: Math.round(s * 100),\r\n l: Math.round(l * 100),\r\n };\r\n };\r\n\r\n const hslToHex = (h: number, s: number, l: number): string => {\r\n s /= 100;\r\n l /= 100;\r\n const k = (n: number) => (n + h / 30) % 12;\r\n const a = s * Math.min(l, 1 - l);\r\n const f = (n: number) =>\r\n Math.round(\r\n 255 *\r\n (l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))))\r\n );\r\n return `#${[f(0), f(8), f(4)].map((x) => x.toString(16).padStart(2, \"0\")).join(\"\")}`;\r\n };\r\n\r\n const adjustLightness = (hex: string, percent: number): string => {\r\n const { h, s, l } = hexToHSL(hex);\r\n return hslToHex(h, s, Math.min(100, Math.max(0, l + percent)));\r\n };\r\n\r\n const relativeLuminance = (hex: string): number => {\r\n const rgb = [1, 3, 5].map((i) => {\r\n const c = parseInt(hex.slice(i, i + 2), 16) / 255;\r\n return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\r\n });\r\n return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];\r\n };\r\n\r\n const contrastRatio = (a: string, b: string): number => {\r\n const lum1 = relativeLuminance(a);\r\n const lum2 = relativeLuminance(b);\r\n const lighter = Math.max(lum1, lum2);\r\n const darker = Math.min(lum1, lum2);\r\n return (lighter + 0.05) / (darker + 0.05);\r\n };\r\n\r\n const getAccessibleTextColor = (bg: string): string =>\r\n contrastRatio(bg, \"#000000\") >= 4.5 ? \"#000000\" : \"#FFFFFF\";\r\n\r\n const vars = {\r\n \"--primary-color\": primaryColor,\r\n \"--primary-color-light\": adjustLightness(primaryColor, 10),\r\n \"--primary-color-hover\": adjustLightness(primaryColor, -10),\r\n \"--text-color-primary\":\r\n forceTextColor ?? getAccessibleTextColor(primaryColor),\r\n\r\n \"--secondary-color\": secondaryColor,\r\n \"--secondary-color-light\": adjustLightness(secondaryColor, 10),\r\n \"--secondary-color-hover\": adjustLightness(secondaryColor, -10),\r\n \"--text-color-secondary\": getAccessibleTextColor(secondaryColor),\r\n\r\n \"--tertiary-color\": tertiaryColor,\r\n \"--tertiary-color-light\": adjustLightness(tertiaryColor, 10),\r\n \"--tertiary-color-hover\": adjustLightness(tertiaryColor, -10),\r\n \"--text-color-tertiary\": getAccessibleTextColor(tertiaryColor),\r\n\r\n \"--quaternary-color\": quaternaryColor,\r\n \"--quaternary-color-light\": adjustLightness(quaternaryColor, 10),\r\n \"--quaternary-color-hover\": adjustLightness(quaternaryColor, -10),\r\n \"--text-color-quaternary\": getAccessibleTextColor(quaternaryColor),\r\n\r\n \"--background-color\": backgroundColor,\r\n \"--background-color-dark\": adjustLightness(backgroundColor, -10),\r\n \"--background-color-darker\": adjustLightness(backgroundColor, -25),\r\n \"--background-color-light\": adjustLightness(backgroundColor, 10),\r\n \"--background-color-lighter\": adjustLightness(backgroundColor, 20),\r\n\r\n \"--link-color\": getAccessibleTextColor(backgroundColor),\r\n \"--link-color-hover\": adjustLightness(\r\n getAccessibleTextColor(backgroundColor),\r\n -20\r\n ),\r\n \"--link-hover-color-primary\": adjustLightness(primaryColor, -10),\r\n \"--link-hover-color-secondary\": adjustLightness(secondaryColor, -10),\r\n } as const;\r\n\r\n const rootStyle = document.documentElement.style;\r\n for (const [k, v] of Object.entries(vars)) rootStyle.setProperty(k, v);\r\n\r\n try {\r\n localStorage.setItem(STORAGE_KEY, String(selectedScheme));\r\n } catch {\r\n console.error(\"Failed to save theme index\");\r\n }\r\n }, [selectedScheme]);\r\n\r\n return (\r\n <ThemeContext.Provider value={{ selectedScheme, setSelectedScheme }}>\r\n {children}\r\n </ThemeContext.Provider>\r\n );\r\n};\r\n\r\nexport default ThemeProvider;\r\n"],"names":["createContext","colorSchemes","getDefaultColorSchemeName","useState","useEffect","registerColorScheme","useLayoutEffect","getAllColorSchemes","jsx"],"mappings":"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"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const require$$2 = require("react/jsx-runtime");
|
|
3
|
+
function ThemeInit({
|
|
4
|
+
storageKeyScheme = "boreal:selectedScheme",
|
|
5
|
+
storageKeyVars = "boreal:cssVars",
|
|
6
|
+
dataAttr = "data-scheme",
|
|
7
|
+
readyAttr = "data-theme-ready"
|
|
8
|
+
}) {
|
|
9
|
+
const code = `
|
|
10
|
+
(function(){
|
|
11
|
+
try {
|
|
12
|
+
var docEl = document.documentElement;
|
|
13
|
+
var raw = localStorage.getItem(${JSON.stringify(storageKeyVars)});
|
|
14
|
+
if (raw) {
|
|
15
|
+
try {
|
|
16
|
+
var vars = JSON.parse(raw);
|
|
17
|
+
for (var k in vars) if (Object.prototype.hasOwnProperty.call(vars, k)) {
|
|
18
|
+
docEl.style.setProperty(k, vars[k]);
|
|
19
|
+
}
|
|
20
|
+
} catch(e){}
|
|
21
|
+
}
|
|
22
|
+
var idx = localStorage.getItem(${JSON.stringify(storageKeyScheme)});
|
|
23
|
+
if (idx != null) docEl.setAttribute(${JSON.stringify(dataAttr)}, String(idx));
|
|
24
|
+
docEl.setAttribute(${JSON.stringify(readyAttr)}, "true");
|
|
25
|
+
} catch(e){}
|
|
26
|
+
})();
|
|
27
|
+
`.trim();
|
|
28
|
+
return /* @__PURE__ */ require$$2.jsx(
|
|
29
|
+
"script",
|
|
30
|
+
{
|
|
31
|
+
dangerouslySetInnerHTML: { __html: code },
|
|
32
|
+
suppressHydrationWarning: true
|
|
33
|
+
}
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
exports.ThemeInit = ThemeInit;
|
|
37
|
+
//# sourceMappingURL=ThemeInitScript-B22_wzIJ.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeInitScript-B22_wzIJ.cjs","sources":["../../src/context/ThemeInitScript.tsx"],"sourcesContent":["export type Props = {\r\n storageKeyScheme?: string;\r\n storageKeyVars?: string;\r\n dataAttr?: string;\r\n readyAttr?: string;\r\n};\r\n\r\nexport default function ThemeInit({\r\n storageKeyScheme = \"boreal:selectedScheme\",\r\n storageKeyVars = \"boreal:cssVars\",\r\n dataAttr = \"data-scheme\",\r\n readyAttr = \"data-theme-ready\",\r\n}: Props) {\r\n const code = `\r\n (function(){\r\n try {\r\n var docEl = document.documentElement;\r\n var raw = localStorage.getItem(${JSON.stringify(storageKeyVars)});\r\n if (raw) {\r\n try {\r\n var vars = JSON.parse(raw);\r\n for (var k in vars) if (Object.prototype.hasOwnProperty.call(vars, k)) {\r\n docEl.style.setProperty(k, vars[k]);\r\n }\r\n } catch(e){}\r\n }\r\n var idx = localStorage.getItem(${JSON.stringify(storageKeyScheme)});\r\n if (idx != null) docEl.setAttribute(${JSON.stringify(dataAttr)}, String(idx));\r\n docEl.setAttribute(${JSON.stringify(readyAttr)}, \"true\");\r\n } catch(e){}\r\n })();\r\n `.trim();\r\n\r\n return (\r\n <script\r\n dangerouslySetInnerHTML={{ __html: code }}\r\n suppressHydrationWarning\r\n />\r\n );\r\n}\r\n"],"names":["jsx"],"mappings":";;AAOA,SAAwB,UAAU;AAAA,EAChC,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,YAAY;AACd,GAAU;AACR,QAAM,OAAO;AAAA;AAAA;AAAA;AAAA,uCAIwB,KAAK,UAAU,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uCAS9B,KAAK,UAAU,gBAAgB,CAAC;AAAA,4CAC3B,KAAK,UAAU,QAAQ,CAAC;AAAA,2BACzC,KAAK,UAAU,SAAS,CAAC;AAAA;AAAA;AAAA,IAGhD,KAAA;AAEF,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,yBAAyB,EAAE,QAAQ,KAAA;AAAA,MACnC,0BAAwB;AAAA,IAAA;AAAA,EAAA;AAG9B;;"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
function ThemeInit({
|
|
3
|
+
storageKeyScheme = "boreal:selectedScheme",
|
|
4
|
+
storageKeyVars = "boreal:cssVars",
|
|
5
|
+
dataAttr = "data-scheme",
|
|
6
|
+
readyAttr = "data-theme-ready"
|
|
7
|
+
}) {
|
|
8
|
+
const code = `
|
|
9
|
+
(function(){
|
|
10
|
+
try {
|
|
11
|
+
var docEl = document.documentElement;
|
|
12
|
+
var raw = localStorage.getItem(${JSON.stringify(storageKeyVars)});
|
|
13
|
+
if (raw) {
|
|
14
|
+
try {
|
|
15
|
+
var vars = JSON.parse(raw);
|
|
16
|
+
for (var k in vars) if (Object.prototype.hasOwnProperty.call(vars, k)) {
|
|
17
|
+
docEl.style.setProperty(k, vars[k]);
|
|
18
|
+
}
|
|
19
|
+
} catch(e){}
|
|
20
|
+
}
|
|
21
|
+
var idx = localStorage.getItem(${JSON.stringify(storageKeyScheme)});
|
|
22
|
+
if (idx != null) docEl.setAttribute(${JSON.stringify(dataAttr)}, String(idx));
|
|
23
|
+
docEl.setAttribute(${JSON.stringify(readyAttr)}, "true");
|
|
24
|
+
} catch(e){}
|
|
25
|
+
})();
|
|
26
|
+
`.trim();
|
|
27
|
+
return /* @__PURE__ */ jsx(
|
|
28
|
+
"script",
|
|
29
|
+
{
|
|
30
|
+
dangerouslySetInnerHTML: { __html: code },
|
|
31
|
+
suppressHydrationWarning: true
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
export {
|
|
36
|
+
ThemeInit as T
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=ThemeInitScript-D6EpWMC9.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeInitScript-D6EpWMC9.js","sources":["../../src/context/ThemeInitScript.tsx"],"sourcesContent":["export type Props = {\r\n storageKeyScheme?: string;\r\n storageKeyVars?: string;\r\n dataAttr?: string;\r\n readyAttr?: string;\r\n};\r\n\r\nexport default function ThemeInit({\r\n storageKeyScheme = \"boreal:selectedScheme\",\r\n storageKeyVars = \"boreal:cssVars\",\r\n dataAttr = \"data-scheme\",\r\n readyAttr = \"data-theme-ready\",\r\n}: Props) {\r\n const code = `\r\n (function(){\r\n try {\r\n var docEl = document.documentElement;\r\n var raw = localStorage.getItem(${JSON.stringify(storageKeyVars)});\r\n if (raw) {\r\n try {\r\n var vars = JSON.parse(raw);\r\n for (var k in vars) if (Object.prototype.hasOwnProperty.call(vars, k)) {\r\n docEl.style.setProperty(k, vars[k]);\r\n }\r\n } catch(e){}\r\n }\r\n var idx = localStorage.getItem(${JSON.stringify(storageKeyScheme)});\r\n if (idx != null) docEl.setAttribute(${JSON.stringify(dataAttr)}, String(idx));\r\n docEl.setAttribute(${JSON.stringify(readyAttr)}, \"true\");\r\n } catch(e){}\r\n })();\r\n `.trim();\r\n\r\n return (\r\n <script\r\n dangerouslySetInnerHTML={{ __html: code }}\r\n suppressHydrationWarning\r\n />\r\n );\r\n}\r\n"],"names":[],"mappings":";AAOA,SAAwB,UAAU;AAAA,EAChC,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,YAAY;AACd,GAAU;AACR,QAAM,OAAO;AAAA;AAAA;AAAA;AAAA,uCAIwB,KAAK,UAAU,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uCAS9B,KAAK,UAAU,gBAAgB,CAAC;AAAA,4CAC3B,KAAK,UAAU,QAAQ,CAAC;AAAA,2BACzC,KAAK,UAAU,SAAS,CAAC;AAAA;AAAA;AAAA,IAGhD,KAAA;AAEF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,yBAAyB,EAAE,QAAQ,KAAA;AAAA,MACnC,0BAAwB;AAAA,IAAA;AAAA,EAAA;AAG9B;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeInitScript.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeInitScript.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const ThemeContext = require("./ThemeContext-
|
|
3
|
+
const ThemeContext = require("./ThemeContext-BHzkqvlv.cjs");
|
|
4
4
|
exports.ThemeContext = ThemeContext.ThemeContext;
|
|
5
5
|
exports.ThemeProvider = ThemeContext.ThemeProvider;
|
|
6
6
|
//# sourceMappingURL=ThemeProvider.cjs.js.map
|
package/dist/next/index.cjs.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const ThemeContext = require("./ThemeContext-
|
|
3
|
+
const ThemeContext = require("./ThemeContext-BHzkqvlv.cjs");
|
|
4
4
|
const registerColorSheme = require("./registerColorSheme-nhYu5hbY.cjs");
|
|
5
|
+
const ThemeInitScript = require("./ThemeInitScript-B22_wzIJ.cjs");
|
|
5
6
|
const colorSchemes = require("./colorSchemes.cjs.js");
|
|
6
7
|
const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
|
|
7
8
|
const Button = require("./Button-G1PFBSqU.cjs");
|
|
@@ -10,7 +11,7 @@ const STT = require("./STT-B8QYAxU7.cjs");
|
|
|
10
11
|
const TextInput = require("./TextInput-D0rdRASC.cjs");
|
|
11
12
|
const TextArea = require("./TextArea-OpFozktU.cjs");
|
|
12
13
|
const Select = require("./Select-BVxDV81c.cjs");
|
|
13
|
-
const Footer = require("./Footer-
|
|
14
|
+
const Footer = require("./Footer-BvAAYL0M.cjs");
|
|
14
15
|
const FileUpload = require("./FileUpload-BeTvsLw-.cjs");
|
|
15
16
|
const TagInput = require("./TagInput-BVng78ON.cjs");
|
|
16
17
|
const RadioButton = require("./RadioButton-BvqTDvI8.cjs");
|
|
@@ -190,6 +191,7 @@ function ClientFooterWrapper(props) {
|
|
|
190
191
|
exports.ThemeContext = ThemeContext.ThemeContext;
|
|
191
192
|
exports.ThemeProvider = ThemeContext.ThemeProvider;
|
|
192
193
|
exports.registerColorScheme = registerColorSheme.registerColorScheme;
|
|
194
|
+
exports.ThemeInitScript = ThemeInitScript.ThemeInit;
|
|
193
195
|
exports.colorSchemes = colorSchemes.colorSchemes;
|
|
194
196
|
exports.setBorealStyleConfig = borealStyleConfig.setBorealStyleConfig;
|
|
195
197
|
exports.Button = Button.Button;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../src/components/Chip/ChipGroup/ChipGroupBase.tsx","../../src/components/Chip/ChipGroup/next/ChipGroup.tsx","../../src/components/Footer/next/ClientFooterWrapper.tsx"],"sourcesContent":["import {\r\n forwardRef,\r\n useCallback,\r\n useEffect,\r\n useImperativeHandle,\r\n useState,\r\n} from \"react\";\r\nimport type { ChipGroupProps, ChipGroupRef } from \"./ChipGroup.types\";\r\nimport type { ChipProps } from \"../Chip.types\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\nimport { combineClassNames } from \"@/utils/classNames\";\r\nimport { getDefaultSize } from \"@/config/boreal-style-config\";\r\n\r\nexport interface ChipGroupBaseProps extends ChipGroupProps {\r\n ChipComponent: React.ElementType;\r\n classMap: Record<string, string>;\r\n}\r\n\r\nconst ChipGroupBase = forwardRef<ChipGroupRef, ChipGroupBaseProps>(\r\n (\r\n {\r\n chips,\r\n onRemove,\r\n position = \"topCenter\",\r\n size = getDefaultSize(),\r\n className = \"\",\r\n ChipComponent,\r\n classMap,\r\n },\r\n ref\r\n ) => {\r\n const [visibleChips, setVisibleChips] = useState<ChipProps[]>([]);\r\n\r\n useEffect(() => {\r\n const initialized = chips.map((chip) => ({\r\n ...chip,\r\n id: chip.id || uuidv4(),\r\n }));\r\n setVisibleChips(initialized);\r\n }, [chips]);\r\n\r\n const handleClose = useCallback(\r\n (id: string) => {\r\n setVisibleChips((prev) => prev.filter((c) => c.id !== id));\r\n onRemove?.(id);\r\n },\r\n [onRemove]\r\n );\r\n\r\n useImperativeHandle(ref, () => ({\r\n closeAllChips: () => {\r\n visibleChips.forEach((chip) => handleClose(chip.id!));\r\n },\r\n }));\r\n\r\n const containerClassName = [\r\n classMap.container,\r\n classMap[position],\r\n className,\r\n ]\r\n .filter(Boolean)\r\n .join(\" \");\r\n\r\n return (\r\n <div\r\n className={containerClassName}\r\n role=\"region\"\r\n aria-label=\"Notifications\"\r\n aria-live=\"polite\"\r\n data-testid=\"chip-group\"\r\n >\r\n <ul role=\"list\" className={classMap.list}>\r\n {visibleChips.map((chip, index) => {\r\n const chipPosition = chip.position || position;\r\n const chipPositionClass = classMap[chipPosition];\r\n\r\n return (\r\n <li key={chip.id} role=\"listitem\">\r\n <ChipComponent\r\n id={chip.id}\r\n message={chip.message}\r\n icon={chip.icon}\r\n theme={chip.theme}\r\n state={chip.state}\r\n size={chip.size || size}\r\n rounding={chip.rounding}\r\n shadow={chip.shadow}\r\n visible={true}\r\n onClose={() => handleClose(chip.id!)}\r\n autoClose={chip.autoClose}\r\n duration={chip.duration}\r\n position={chipPosition}\r\n usePortal={false}\r\n stackIndex={index}\r\n className={combineClassNames(\r\n classMap.chip,\r\n chip.className,\r\n chipPositionClass\r\n )}\r\n data-testid={chip[\"data-testid\"]}\r\n />\r\n </li>\r\n );\r\n })}\r\n </ul>\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nChipGroupBase.displayName = \"ChipGroupBase\";\r\nexport default ChipGroupBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport ChipGroupBase from \"../ChipGroupBase\";\r\nimport { Chip } from \"../../../../index.next\";\r\nimport styles from \"./ChipGroup.module.scss\";\r\nimport { ChipGroupProps, ChipGroupRef } from \"../ChipGroup.types\";\r\n\r\nconst ChipGroup = React.forwardRef<ChipGroupRef, ChipGroupProps>(\r\n (props, ref) => (\r\n <ChipGroupBase\r\n {...props}\r\n ref={ref}\r\n ChipComponent={Chip}\r\n classMap={styles}\r\n />\r\n )\r\n);\r\n\r\nexport default ChipGroup;\r\n","/**\r\n * ---------------------------------------------------------------------\r\n * ClientFooterWrapper.tsx\r\n * ---------------------------------------------------------------------\r\n * A client-side wrapper for the `<Footer>` component to ensure\r\n * it renders only on the client (required when using dynamic content\r\n * or browser-specific APIs within the Footer).\r\n *\r\n * This is useful in Next.js when a server component cannot render\r\n * a client-only dependency.\r\n *\r\n * Props are directly passed through from `FooterProps`.\r\n *\r\n * Usage:\r\n * ```tsx\r\n * <ClientFooterWrapper\r\n * copyright=\"© 2025 Davin Chiupka\"\r\n * showThemeSelect\r\n * />\r\n * ```\r\n */\r\n\r\n\"use client\";\r\n\r\nimport Footer from \"./Footer\";\r\nimport type { FooterProps } from \"../Footer.types\";\r\n\r\nexport default function ClientFooterWrapper(props: FooterProps) {\r\n return <Footer {...props} />;\r\n}\r\n"],"names":["forwardRef","getDefaultSize","useState","useEffect","chip","uuidv4","useCallback","useImperativeHandle","jsx","combineClassNames","Chip","Footer"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../src/components/Chip/ChipGroup/ChipGroupBase.tsx","../../src/components/Chip/ChipGroup/next/ChipGroup.tsx","../../src/components/Footer/next/ClientFooterWrapper.tsx"],"sourcesContent":["import {\r\n forwardRef,\r\n useCallback,\r\n useEffect,\r\n useImperativeHandle,\r\n useState,\r\n} from \"react\";\r\nimport type { ChipGroupProps, ChipGroupRef } from \"./ChipGroup.types\";\r\nimport type { ChipProps } from \"../Chip.types\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\nimport { combineClassNames } from \"@/utils/classNames\";\r\nimport { getDefaultSize } from \"@/config/boreal-style-config\";\r\n\r\nexport interface ChipGroupBaseProps extends ChipGroupProps {\r\n ChipComponent: React.ElementType;\r\n classMap: Record<string, string>;\r\n}\r\n\r\nconst ChipGroupBase = forwardRef<ChipGroupRef, ChipGroupBaseProps>(\r\n (\r\n {\r\n chips,\r\n onRemove,\r\n position = \"topCenter\",\r\n size = getDefaultSize(),\r\n className = \"\",\r\n ChipComponent,\r\n classMap,\r\n },\r\n ref\r\n ) => {\r\n const [visibleChips, setVisibleChips] = useState<ChipProps[]>([]);\r\n\r\n useEffect(() => {\r\n const initialized = chips.map((chip) => ({\r\n ...chip,\r\n id: chip.id || uuidv4(),\r\n }));\r\n setVisibleChips(initialized);\r\n }, [chips]);\r\n\r\n const handleClose = useCallback(\r\n (id: string) => {\r\n setVisibleChips((prev) => prev.filter((c) => c.id !== id));\r\n onRemove?.(id);\r\n },\r\n [onRemove]\r\n );\r\n\r\n useImperativeHandle(ref, () => ({\r\n closeAllChips: () => {\r\n visibleChips.forEach((chip) => handleClose(chip.id!));\r\n },\r\n }));\r\n\r\n const containerClassName = [\r\n classMap.container,\r\n classMap[position],\r\n className,\r\n ]\r\n .filter(Boolean)\r\n .join(\" \");\r\n\r\n return (\r\n <div\r\n className={containerClassName}\r\n role=\"region\"\r\n aria-label=\"Notifications\"\r\n aria-live=\"polite\"\r\n data-testid=\"chip-group\"\r\n >\r\n <ul role=\"list\" className={classMap.list}>\r\n {visibleChips.map((chip, index) => {\r\n const chipPosition = chip.position || position;\r\n const chipPositionClass = classMap[chipPosition];\r\n\r\n return (\r\n <li key={chip.id} role=\"listitem\">\r\n <ChipComponent\r\n id={chip.id}\r\n message={chip.message}\r\n icon={chip.icon}\r\n theme={chip.theme}\r\n state={chip.state}\r\n size={chip.size || size}\r\n rounding={chip.rounding}\r\n shadow={chip.shadow}\r\n visible={true}\r\n onClose={() => handleClose(chip.id!)}\r\n autoClose={chip.autoClose}\r\n duration={chip.duration}\r\n position={chipPosition}\r\n usePortal={false}\r\n stackIndex={index}\r\n className={combineClassNames(\r\n classMap.chip,\r\n chip.className,\r\n chipPositionClass\r\n )}\r\n data-testid={chip[\"data-testid\"]}\r\n />\r\n </li>\r\n );\r\n })}\r\n </ul>\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nChipGroupBase.displayName = \"ChipGroupBase\";\r\nexport default ChipGroupBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport ChipGroupBase from \"../ChipGroupBase\";\r\nimport { Chip } from \"../../../../index.next\";\r\nimport styles from \"./ChipGroup.module.scss\";\r\nimport { ChipGroupProps, ChipGroupRef } from \"../ChipGroup.types\";\r\n\r\nconst ChipGroup = React.forwardRef<ChipGroupRef, ChipGroupProps>(\r\n (props, ref) => (\r\n <ChipGroupBase\r\n {...props}\r\n ref={ref}\r\n ChipComponent={Chip}\r\n classMap={styles}\r\n />\r\n )\r\n);\r\n\r\nexport default ChipGroup;\r\n","/**\r\n * ---------------------------------------------------------------------\r\n * ClientFooterWrapper.tsx\r\n * ---------------------------------------------------------------------\r\n * A client-side wrapper for the `<Footer>` component to ensure\r\n * it renders only on the client (required when using dynamic content\r\n * or browser-specific APIs within the Footer).\r\n *\r\n * This is useful in Next.js when a server component cannot render\r\n * a client-only dependency.\r\n *\r\n * Props are directly passed through from `FooterProps`.\r\n *\r\n * Usage:\r\n * ```tsx\r\n * <ClientFooterWrapper\r\n * copyright=\"© 2025 Davin Chiupka\"\r\n * showThemeSelect\r\n * />\r\n * ```\r\n */\r\n\r\n\"use client\";\r\n\r\nimport Footer from \"./Footer\";\r\nimport type { FooterProps } from \"../Footer.types\";\r\n\r\nexport default function ClientFooterWrapper(props: FooterProps) {\r\n return <Footer {...props} />;\r\n}\r\n"],"names":["forwardRef","getDefaultSize","useState","useEffect","chip","uuidv4","useCallback","useImperativeHandle","jsx","combineClassNames","Chip","Footer"],"mappings":"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"}
|
package/dist/next/index.js
CHANGED
|
@@ -1,18 +1,19 @@
|
|
|
1
|
-
import { a, T } from "./ThemeContext-
|
|
1
|
+
import { a, T } from "./ThemeContext-B-z-faEj.js";
|
|
2
2
|
import { r } from "./registerColorSheme-BPX0H7hl.js";
|
|
3
|
+
import { T as T2 } from "./ThemeInitScript-D6EpWMC9.js";
|
|
3
4
|
import { colorSchemes } from "./colorSchemes.js";
|
|
4
5
|
import { c as getDefaultSize } from "./boreal-style-config-BILmxkZG.js";
|
|
5
6
|
import { s } from "./boreal-style-config-BILmxkZG.js";
|
|
6
7
|
import { B } from "./Button-ClWB5gZW.js";
|
|
7
8
|
import { I } from "./IconButton-Dk8EDf4Z.js";
|
|
8
9
|
import { S } from "./STT-B89YQxDF.js";
|
|
9
|
-
import { T as
|
|
10
|
-
import { T as
|
|
10
|
+
import { T as T3 } from "./TextInput-B00XEBiM.js";
|
|
11
|
+
import { T as T4 } from "./TextArea-Bmkg-d0v.js";
|
|
11
12
|
import { S as S2 } from "./Select-DXO2nK78.js";
|
|
12
|
-
import { F as Footer } from "./Footer-
|
|
13
|
-
import { U } from "./Footer-
|
|
13
|
+
import { F as Footer } from "./Footer-D18LIc08.js";
|
|
14
|
+
import { U } from "./Footer-D18LIc08.js";
|
|
14
15
|
import { F } from "./FileUpload-D7qdf0y5.js";
|
|
15
|
-
import { T as
|
|
16
|
+
import { T as T5 } from "./TagInput-B_VOR8-r.js";
|
|
16
17
|
import { R } from "./RadioButton-CffrjQlz.js";
|
|
17
18
|
import { S as S3 } from "./Slider-DIJEeH2r.js";
|
|
18
19
|
import { C } from "./Checkbox-3k5UZ20q.js";
|
|
@@ -32,19 +33,19 @@ import { C as C3 } from "./CircularProgress-DTKTvWPL.js";
|
|
|
32
33
|
import { R as R2 } from "./Rating-CqV2p3Wa.js";
|
|
33
34
|
import { S as S4 } from "./Skeleton-CJpwvGKT.js";
|
|
34
35
|
import { S as S5 } from "./Spinner-N0I3bKh8.js";
|
|
35
|
-
import { T as
|
|
36
|
+
import { T as T6 } from "./Tooltip-BLzis3b9.js";
|
|
36
37
|
import { M as M2 } from "./MessagePopUp-DEbsvN19.js";
|
|
37
38
|
import { P as P2 } from "./PopOver-CAUFP1-Y.js";
|
|
38
39
|
import { N } from "./NavBar-CKo-nom2.js";
|
|
39
40
|
import { B as B3 } from "./Breadcrumbs-BM-yj_kq.js";
|
|
40
|
-
import { T as
|
|
41
|
+
import { T as T7 } from "./Tabs-Dk0OQfLb.js";
|
|
41
42
|
import { S as S6 } from "./Stepper-De9foUOK.js";
|
|
42
|
-
import { T as
|
|
43
|
+
import { T as T8 } from "./Timeline-CLEpMONv.js";
|
|
43
44
|
import { A } from "./Accordion-CwNZAMaX.js";
|
|
44
45
|
import { P as P3 } from "./Pager-DiZtB-Df.js";
|
|
45
46
|
import { M as M3 } from "./Modal-BOaNai97.js";
|
|
46
|
-
import { T as
|
|
47
|
-
import { T as
|
|
47
|
+
import { T as T9 } from "./Toggle-D1vM9KrI.js";
|
|
48
|
+
import { T as T10 } from "./Toolbar-Dme9QqMY.js";
|
|
48
49
|
import { D as D3 } from "./Dropdown-CzQhdSD7.js";
|
|
49
50
|
import { D as D4 } from "./Divider-PQO6alS3.js";
|
|
50
51
|
import { M as M4 } from "./MetricBox-BIWbtopW.js";
|
|
@@ -228,17 +229,18 @@ export {
|
|
|
228
229
|
S3 as Slider,
|
|
229
230
|
S5 as Spinner,
|
|
230
231
|
S6 as Stepper,
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
232
|
+
T7 as Tabs,
|
|
233
|
+
T5 as TagInput,
|
|
234
|
+
T4 as TextArea,
|
|
235
|
+
T3 as TextInput,
|
|
235
236
|
a as ThemeContext,
|
|
237
|
+
T2 as ThemeInitScript,
|
|
236
238
|
T as ThemeProvider,
|
|
237
239
|
U as ThemeSelect,
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
240
|
+
T8 as Timeline,
|
|
241
|
+
T9 as Toggle,
|
|
242
|
+
T10 as Toolbar,
|
|
243
|
+
T6 as Tooltip,
|
|
242
244
|
colorSchemes,
|
|
243
245
|
r as registerColorScheme,
|
|
244
246
|
s as setBorealStyleConfig
|