boreal-ui 0.0.30 → 0.0.31
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-kLL_3Qc-.cjs → Footer-B6ybz8yK.cjs} +18 -20
- package/dist/core/Footer-B6ybz8yK.cjs.map +1 -0
- package/dist/core/{Footer-CPg_4j5r.js → Footer-C0OiicSH.js} +18 -20
- package/dist/core/Footer-C0OiicSH.js.map +1 -0
- package/dist/core/Footer.cjs.js +1 -1
- package/dist/core/Footer.js +1 -1
- package/dist/core/{ThemeContext-B-z-faEj.js → ThemeContext-DJ18CFaV.js} +33 -6
- package/dist/core/ThemeContext-DJ18CFaV.js.map +1 -0
- package/dist/core/{ThemeContext-CtNdJ7LK.cjs → ThemeContext-D_SPnedS.cjs} +31 -4
- package/dist/core/ThemeContext-D_SPnedS.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-BvAAYL0M.cjs → Footer-DCYc1MZV.cjs} +17 -19
- package/dist/next/Footer-DCYc1MZV.cjs.map +1 -0
- package/dist/next/{Footer-D18LIc08.js → Footer-DHkI2Lbi.js} +17 -19
- package/dist/next/Footer-DHkI2Lbi.js.map +1 -0
- package/dist/next/Footer.cjs.js +1 -1
- package/dist/next/Footer.js +1 -1
- package/dist/next/{ThemeContext-B-z-faEj.js → ThemeContext-DJ18CFaV.js} +33 -6
- package/dist/next/ThemeContext-DJ18CFaV.js.map +1 -0
- package/dist/next/{ThemeContext-BHzkqvlv.cjs → ThemeContext-Iy-HHefR.cjs} +31 -4
- package/dist/next/ThemeContext-Iy-HHefR.cjs.map +1 -0
- package/dist/next/ThemeProvider.cjs.js +1 -1
- package/dist/next/ThemeProvider.js +1 -1
- package/dist/next/index.cjs.js +2 -4
- package/dist/next/index.cjs.js.map +1 -1
- package/dist/next/index.js +19 -21
- package/dist/next/index.js.map +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/components/Select/ThemeSelect/core/ThemeSelect.d.ts.map +1 -1
- package/dist/types/components/Select/ThemeSelect/next/ThemeSelect.d.ts.map +1 -1
- package/dist/types/context/ThemeContext.d.ts.map +1 -1
- package/dist/types/context/ThemeContext.types.d.ts +2 -0
- package/dist/types/context/ThemeContext.types.d.ts.map +1 -1
- package/dist/types/index.next.d.ts +0 -1
- package/dist/types/index.next.d.ts.map +1 -1
- package/package.json +1 -6
- package/dist/core/Footer-CPg_4j5r.js.map +0 -1
- package/dist/core/Footer-kLL_3Qc-.cjs.map +0 -1
- package/dist/core/ThemeContext-B-z-faEj.js.map +0 -1
- package/dist/core/ThemeContext-CtNdJ7LK.cjs.map +0 -1
- package/dist/next/Footer-BvAAYL0M.cjs.map +0 -1
- package/dist/next/Footer-D18LIc08.js.map +0 -1
- package/dist/next/ThemeContext-B-z-faEj.js.map +0 -1
- package/dist/next/ThemeContext-BHzkqvlv.cjs.map +0 -1
- package/dist/next/ThemeInitScript-B22_wzIJ.cjs +0 -37
- package/dist/next/ThemeInitScript-B22_wzIJ.cjs.map +0 -1
- package/dist/next/ThemeInitScript-D6EpWMC9.js +0 -38
- package/dist/next/ThemeInitScript-D6EpWMC9.js.map +0 -1
- package/dist/next/ThemeInitScript.cjs.js +0 -4
- package/dist/next/ThemeInitScript.cjs.js.map +0 -1
- package/dist/next/ThemeInitScript.js +0 -5
- package/dist/next/ThemeInitScript.js.map +0 -1
- package/dist/types/context/ThemeInitScript.d.ts +0 -3
- package/dist/types/context/ThemeInitScript.d.ts.map +0 -1
- package/dist/types/context/ThemeInitScript.types.d.ts +0 -7
- package/dist/types/context/ThemeInitScript.types.d.ts.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Footer-DHkI2Lbi.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, useMemo } 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 ctx = useContext(ThemeContext);\r\n if (!ctx)\r\n throw new Error(\"ThemeContext is undefined. Wrap with ThemeProvider.\");\r\n\r\n const { selectedScheme, setSelectedScheme, schemes } = ctx;\r\n\r\n const options = useMemo(\r\n () =>\r\n schemes.map((scheme, index) => ({\r\n value: String(index),\r\n label: scheme.name,\r\n })),\r\n [schemes]\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}\r\n value={String(selectedScheme)}\r\n ariaLabel=\"Select Theme\"\r\n onChange={(value: string | number) =>\r\n setSelectedScheme(parseInt(String(value), 10))\r\n }\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":";;;;;;;;;;AAqBA,MAAM,oBAAgD,CAAC;AAAA,EACrD,QAAQ,gBAAA;AAAA,EACR,SAAS,iBAAA;AAAA,EACT,WAAW,mBAAA;AAAA,EACX,QAAQ;AAAA,EACR,eAAe,SAAS;AAC1B,MAAM;AACJ,QAAM,MAAM,WAAW,YAAY;AACnC,MAAI,CAAC;AACH,UAAM,IAAI,MAAM,qDAAqD;AAEvE,QAAM,EAAE,gBAAgB,mBAAmB,QAAA,IAAY;AAEvD,QAAM,UAAU;AAAA,IACd,MACE,QAAQ,IAAI,CAAC,QAAQ,WAAW;AAAA,MAC9B,OAAO,OAAO,KAAK;AAAA,MACnB,OAAO,OAAO;AAAA,IAAA,EACd;AAAA,IACJ,CAAC,OAAO;AAAA,EAAA;AAGV,SACE,oBAAC,OAAA,EAAI,WAAW,qBACd,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,OAAO,OAAO,cAAc;AAAA,MAC5B,WAAU;AAAA,MACV,UAAU,CAAC,UACT,kBAAkB,SAAS,OAAO,KAAK,GAAG,EAAE,CAAC;AAAA,IAAA;AAAA,EAAA,GAGnD;AAEJ;ACzCA,MAAM,aAAwC,CAAC;AAAA,EAC7C,QAAQ,gBAAA;AAAA,EACR,aAAa;AAAA,EACb,SAAS;AAAA,EACT,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,eAAe,SAAS;AAAA,EACxB;AAAA,EACA,OAAAA,SAAQ,CAAA;AAAA,EACR,MAAAC;AAAA,EACA,cAAc,CAAA;AAAA,EACd,kBAAkB;AAAA,EAClB,YAAAC;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA,cAAc,CAAC,EAAE,MAAM,eAAe,oBAAC,KAAA,EAAE,MAAa,SAAA,CAAS;AACjE,MAAM;AACJ,QAAM,cAAc;AAAA,IAClB,MACE;AAAA,MACE,SAAS;AAAA,MACT,SAAS,KAAK;AAAA,MACd,SAAS,SAAS,WAAW,MAAM,CAAC,EAAE;AAAA,MACtC,SAAS,QAAQ,WAAW,QAAQ,CAAC,EAAE;AAAA,MACvC,SAAS,aAAa,WAAW,UAAU,CAAC,EAAE;AAAA,MAC9C;AAAA,IAAA;AAAA,IAEJ,CAAC,UAAU,OAAO,SAAS;AAAA,EAAA;AAE7B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,MAAK;AAAA,MACL,cAAW;AAAA,MACX,eAAa;AAAA,MAEb,UAAA,qBAAC,OAAA,EAAI,WAAW,SAAS,SACvB,UAAA;AAAA,QAAA,qBAAC,SAAI,WAAW,SAAS,MAAM,eAAa,GAAG,MAAM,SAClD,UAAA;AAAA,UAAAD,UACA,OAAOA,UAAS,YACd,OAAOA,UAAS,YAAY,SAASA,SACtC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,SAAS;AAAA,cACpB,cAAW;AAAA,cACX,MAAK;AAAA,cACL,eAAa,GAAG,MAAM;AAAA,cACtB,SAAQ;AAAA,cACR,KAAKA;AAAA,cACL,KAAI;AAAA,cACJ,QAAQ;AAAA,cACR,OAAO;AAAA,YAAA;AAAA,UAAA,IAGT;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,SAAS;AAAA,cACpB,cAAW;AAAA,cACX,MAAK;AAAA,cACL,eAAa,GAAG,MAAM;AAAA,cAErB,UAAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAIJ,aACC,oBAAC,OAAA,EAAI,WAAW,SAAS,MAAM,eAAa,GAAG,MAAM,cACnD,UAAA,oBAAC,KAAA,EAAG,qBAAU,EAAA,CAChB;AAAA,QAAA,GAEJ;AAAA,QAECD,OAAM,SAAS,KACd;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,SAAS;AAAA,YACpB,cAAW;AAAA,YACX,eAAa,GAAG,MAAM;AAAA,YAEtB,UAAA,oBAAC,MAAA,EAAG,MAAK,QACN,UAAAA,OAAM,IAAI,CAAC,MAAM,MAChB,oBAAC,MAAA,EACC,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM,KAAK;AAAA,gBACX,WAAW,SAAS;AAAA,gBACpB,eAAa,GAAG,MAAM,SAAS,KAAK,MAAM,YAAA,EAAc,QAAQ,QAAQ,GAAG,CAAC;AAAA,gBAE3E,UAAA,KAAK;AAAA,cAAA;AAAA,YAAA,EACR,GAPO,CAQT,CACD,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,QAIH,mBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,SAAS;AAAA,YACpB,eAAa,GAAG,MAAM;AAAA,YACtB,cAAW;AAAA,YAEX,UAAA,oBAAC,aAAA,EAAY,OAAO,SAAS,QAAQ,OAAA,CAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAIhD,YAAY,SAAS,KACpB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,SAAS;AAAA,YACpB,cAAW;AAAA,YACX,MAAK;AAAA,YACL,eAAa,GAAG,MAAM;AAAA,YAErB,UAAA,YAAY,IAAI,CAACG,SAAQ,UACxB;AAAA,cAACD;AAAA,cAAA;AAAA,gBAEC,MAAMC,QAAO;AAAA,gBACb,MAAMA,QAAO;AAAA,gBACb,YAAU;AAAA,gBACV,QAAO;AAAA,gBACP,QAAO;AAAA,gBACP,KAAI;AAAA,gBACJ,WAAWA,QAAO;AAAA,gBAClB,OAAOA,QAAO;AAAA,gBACd,OAAM;AAAA,gBACN,eAAa,GAAG,MAAM,WAAWA,QAAO,MACrC,cACA,QAAQ,QAAQ,GAAG,CAAC;AAAA,cAAA;AAAA,cAZlB;AAAA,YAAA,CAcR;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC7IA,MAAM,SAAgC,CAAC,UAAU;AAC/C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,gBAAgB;AAAA,MAAA,aAChBC;AAAAA,MACA,aAAa,CAAC,EAAE,MAAM,UAAU,WAAW,GAAG,KAAA,0BAC3C,MAAA,EAAK,MAAY,WAAuB,GAAG,MACzC,SAAA,CACH;AAAA,MAEF,UAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;"}
|
package/dist/next/Footer.cjs.js
CHANGED
package/dist/next/Footer.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { createContext, useState, useEffect, useLayoutEffect } from "react";
|
|
3
|
-
import {
|
|
2
|
+
import { createContext, useState, useMemo, useEffect, useLayoutEffect } from "react";
|
|
3
|
+
import { g as getAllColorSchemes, r as registerColorScheme } from "./registerColorSheme-BPX0H7hl.js";
|
|
4
4
|
import { g as getDefaultColorSchemeName } from "./boreal-style-config-BILmxkZG.js";
|
|
5
5
|
import { colorSchemes } from "./colorSchemes.js";
|
|
6
6
|
const ThemeContext = createContext(
|
|
@@ -11,6 +11,14 @@ const fallbackIndex = colorSchemes.findIndex(
|
|
|
11
11
|
);
|
|
12
12
|
const defaultIndex = fallbackIndex !== -1 ? fallbackIndex : 0;
|
|
13
13
|
const STORAGE_KEY = "boreal:selectedScheme";
|
|
14
|
+
function shallowEqualByName(a, b) {
|
|
15
|
+
if (a === b) return true;
|
|
16
|
+
if (a.length !== b.length) return false;
|
|
17
|
+
for (let i = 0; i < a.length; i++) {
|
|
18
|
+
if (a[i].name !== b[i].name) return false;
|
|
19
|
+
}
|
|
20
|
+
return true;
|
|
21
|
+
}
|
|
14
22
|
const ThemeProvider = ({ children, customSchemes = [], initialScheme }) => {
|
|
15
23
|
if (fallbackIndex === -1 && process.env.NODE_ENV === "development") {
|
|
16
24
|
console.warn(
|
|
@@ -29,9 +37,22 @@ const ThemeProvider = ({ children, customSchemes = [], initialScheme }) => {
|
|
|
29
37
|
}
|
|
30
38
|
return defaultIndex;
|
|
31
39
|
});
|
|
40
|
+
const [schemes, setSchemes] = useState(() => getAllColorSchemes());
|
|
41
|
+
const customSchemesKey = useMemo(
|
|
42
|
+
() => JSON.stringify(customSchemes ?? []),
|
|
43
|
+
[customSchemes]
|
|
44
|
+
);
|
|
32
45
|
useEffect(() => {
|
|
33
|
-
|
|
34
|
-
|
|
46
|
+
try {
|
|
47
|
+
const parsed = JSON.parse(customSchemesKey);
|
|
48
|
+
if (Array.isArray(parsed) && parsed.length > 0) {
|
|
49
|
+
registerColorScheme(parsed);
|
|
50
|
+
}
|
|
51
|
+
} catch {
|
|
52
|
+
}
|
|
53
|
+
const next = getAllColorSchemes();
|
|
54
|
+
setSchemes((prev) => shallowEqualByName(prev, next) ? prev : next);
|
|
55
|
+
}, [customSchemesKey]);
|
|
35
56
|
useLayoutEffect(() => {
|
|
36
57
|
const allSchemes = getAllColorSchemes();
|
|
37
58
|
const scheme = allSchemes[selectedScheme] ?? allSchemes[defaultIndex];
|
|
@@ -139,10 +160,16 @@ const ThemeProvider = ({ children, customSchemes = [], initialScheme }) => {
|
|
|
139
160
|
console.error("Failed to save theme index");
|
|
140
161
|
}
|
|
141
162
|
}, [selectedScheme]);
|
|
142
|
-
return /* @__PURE__ */ jsx(
|
|
163
|
+
return /* @__PURE__ */ jsx(
|
|
164
|
+
ThemeContext.Provider,
|
|
165
|
+
{
|
|
166
|
+
value: { selectedScheme, setSelectedScheme, schemes },
|
|
167
|
+
children
|
|
168
|
+
}
|
|
169
|
+
);
|
|
143
170
|
};
|
|
144
171
|
export {
|
|
145
172
|
ThemeProvider as T,
|
|
146
173
|
ThemeContext as a
|
|
147
174
|
};
|
|
148
|
-
//# sourceMappingURL=ThemeContext-
|
|
175
|
+
//# sourceMappingURL=ThemeContext-DJ18CFaV.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeContext-DJ18CFaV.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 useMemo,\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\nfunction shallowEqualByName(a: { name: string }[], b: { name: string }[]) {\r\n if (a === b) return true;\r\n if (a.length !== b.length) return false;\r\n for (let i = 0; i < a.length; i++) {\r\n if (a[i].name !== b[i].name) return false;\r\n }\r\n return true;\r\n}\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 const [schemes, setSchemes] = useState(() => getAllColorSchemes());\r\n\r\n const customSchemesKey = useMemo(\r\n () => JSON.stringify(customSchemes ?? []),\r\n [customSchemes]\r\n );\r\n\r\n useEffect(() => {\r\n try {\r\n const parsed = JSON.parse(customSchemesKey);\r\n if (Array.isArray(parsed) && parsed.length > 0) {\r\n registerColorScheme(parsed);\r\n }\r\n } catch {}\r\n\r\n const next = getAllColorSchemes();\r\n setSchemes((prev) => (shallowEqualByName(prev, next) ? prev : next));\r\n }, [customSchemesKey]);\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\r\n value={{ selectedScheme, setSelectedScheme, schemes }}\r\n >\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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"}
|
|
@@ -12,6 +12,14 @@ const fallbackIndex = colorSchemes.colorSchemes.findIndex(
|
|
|
12
12
|
);
|
|
13
13
|
const defaultIndex = fallbackIndex !== -1 ? fallbackIndex : 0;
|
|
14
14
|
const STORAGE_KEY = "boreal:selectedScheme";
|
|
15
|
+
function shallowEqualByName(a, b) {
|
|
16
|
+
if (a === b) return true;
|
|
17
|
+
if (a.length !== b.length) return false;
|
|
18
|
+
for (let i = 0; i < a.length; i++) {
|
|
19
|
+
if (a[i].name !== b[i].name) return false;
|
|
20
|
+
}
|
|
21
|
+
return true;
|
|
22
|
+
}
|
|
15
23
|
const ThemeProvider = ({ children, customSchemes = [], initialScheme }) => {
|
|
16
24
|
if (fallbackIndex === -1 && process.env.NODE_ENV === "development") {
|
|
17
25
|
console.warn(
|
|
@@ -30,9 +38,22 @@ const ThemeProvider = ({ children, customSchemes = [], initialScheme }) => {
|
|
|
30
38
|
}
|
|
31
39
|
return defaultIndex;
|
|
32
40
|
});
|
|
41
|
+
const [schemes, setSchemes] = React.useState(() => registerColorSheme.getAllColorSchemes());
|
|
42
|
+
const customSchemesKey = React.useMemo(
|
|
43
|
+
() => JSON.stringify(customSchemes ?? []),
|
|
44
|
+
[customSchemes]
|
|
45
|
+
);
|
|
33
46
|
React.useEffect(() => {
|
|
34
|
-
|
|
35
|
-
|
|
47
|
+
try {
|
|
48
|
+
const parsed = JSON.parse(customSchemesKey);
|
|
49
|
+
if (Array.isArray(parsed) && parsed.length > 0) {
|
|
50
|
+
registerColorSheme.registerColorScheme(parsed);
|
|
51
|
+
}
|
|
52
|
+
} catch {
|
|
53
|
+
}
|
|
54
|
+
const next = registerColorSheme.getAllColorSchemes();
|
|
55
|
+
setSchemes((prev) => shallowEqualByName(prev, next) ? prev : next);
|
|
56
|
+
}, [customSchemesKey]);
|
|
36
57
|
React.useLayoutEffect(() => {
|
|
37
58
|
const allSchemes = registerColorSheme.getAllColorSchemes();
|
|
38
59
|
const scheme = allSchemes[selectedScheme] ?? allSchemes[defaultIndex];
|
|
@@ -140,8 +161,14 @@ const ThemeProvider = ({ children, customSchemes = [], initialScheme }) => {
|
|
|
140
161
|
console.error("Failed to save theme index");
|
|
141
162
|
}
|
|
142
163
|
}, [selectedScheme]);
|
|
143
|
-
return /* @__PURE__ */ require$$2.jsx(
|
|
164
|
+
return /* @__PURE__ */ require$$2.jsx(
|
|
165
|
+
ThemeContext.Provider,
|
|
166
|
+
{
|
|
167
|
+
value: { selectedScheme, setSelectedScheme, schemes },
|
|
168
|
+
children
|
|
169
|
+
}
|
|
170
|
+
);
|
|
144
171
|
};
|
|
145
172
|
exports.ThemeContext = ThemeContext;
|
|
146
173
|
exports.ThemeProvider = ThemeProvider;
|
|
147
|
-
//# sourceMappingURL=ThemeContext-
|
|
174
|
+
//# sourceMappingURL=ThemeContext-Iy-HHefR.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeContext-Iy-HHefR.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 useMemo,\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\nfunction shallowEqualByName(a: { name: string }[], b: { name: string }[]) {\r\n if (a === b) return true;\r\n if (a.length !== b.length) return false;\r\n for (let i = 0; i < a.length; i++) {\r\n if (a[i].name !== b[i].name) return false;\r\n }\r\n return true;\r\n}\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 const [schemes, setSchemes] = useState(() => getAllColorSchemes());\r\n\r\n const customSchemesKey = useMemo(\r\n () => JSON.stringify(customSchemes ?? []),\r\n [customSchemes]\r\n );\r\n\r\n useEffect(() => {\r\n try {\r\n const parsed = JSON.parse(customSchemesKey);\r\n if (Array.isArray(parsed) && parsed.length > 0) {\r\n registerColorScheme(parsed);\r\n }\r\n } catch {}\r\n\r\n const next = getAllColorSchemes();\r\n setSchemes((prev) => (shallowEqualByName(prev, next) ? prev : next));\r\n }, [customSchemesKey]);\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\r\n value={{ selectedScheme, setSelectedScheme, schemes }}\r\n >\r\n {children}\r\n </ThemeContext.Provider>\r\n );\r\n};\r\n\r\nexport default ThemeProvider;\r\n"],"names":["createContext","colorSchemes","getDefaultColorSchemeName","useState","getAllColorSchemes","useMemo","useEffect","registerColorScheme","useLayoutEffect","jsx"],"mappings":"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"}
|
|
@@ -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-Iy-HHefR.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,8 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const ThemeContext = require("./ThemeContext-
|
|
3
|
+
const ThemeContext = require("./ThemeContext-Iy-HHefR.cjs");
|
|
4
4
|
const registerColorSheme = require("./registerColorSheme-nhYu5hbY.cjs");
|
|
5
|
-
const ThemeInitScript = require("./ThemeInitScript-B22_wzIJ.cjs");
|
|
6
5
|
const colorSchemes = require("./colorSchemes.cjs.js");
|
|
7
6
|
const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
|
|
8
7
|
const Button = require("./Button-G1PFBSqU.cjs");
|
|
@@ -11,7 +10,7 @@ const STT = require("./STT-B8QYAxU7.cjs");
|
|
|
11
10
|
const TextInput = require("./TextInput-D0rdRASC.cjs");
|
|
12
11
|
const TextArea = require("./TextArea-OpFozktU.cjs");
|
|
13
12
|
const Select = require("./Select-BVxDV81c.cjs");
|
|
14
|
-
const Footer = require("./Footer-
|
|
13
|
+
const Footer = require("./Footer-DCYc1MZV.cjs");
|
|
15
14
|
const FileUpload = require("./FileUpload-BeTvsLw-.cjs");
|
|
16
15
|
const TagInput = require("./TagInput-BVng78ON.cjs");
|
|
17
16
|
const RadioButton = require("./RadioButton-BvqTDvI8.cjs");
|
|
@@ -191,7 +190,6 @@ function ClientFooterWrapper(props) {
|
|
|
191
190
|
exports.ThemeContext = ThemeContext.ThemeContext;
|
|
192
191
|
exports.ThemeProvider = ThemeContext.ThemeProvider;
|
|
193
192
|
exports.registerColorScheme = registerColorSheme.registerColorScheme;
|
|
194
|
-
exports.ThemeInitScript = ThemeInitScript.ThemeInit;
|
|
195
193
|
exports.colorSchemes = colorSchemes.colorSchemes;
|
|
196
194
|
exports.setBorealStyleConfig = borealStyleConfig.setBorealStyleConfig;
|
|
197
195
|
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,19 +1,18 @@
|
|
|
1
|
-
import { a, T } from "./ThemeContext-
|
|
1
|
+
import { a, T } from "./ThemeContext-DJ18CFaV.js";
|
|
2
2
|
import { r } from "./registerColorSheme-BPX0H7hl.js";
|
|
3
|
-
import { T as T2 } from "./ThemeInitScript-D6EpWMC9.js";
|
|
4
3
|
import { colorSchemes } from "./colorSchemes.js";
|
|
5
4
|
import { c as getDefaultSize } from "./boreal-style-config-BILmxkZG.js";
|
|
6
5
|
import { s } from "./boreal-style-config-BILmxkZG.js";
|
|
7
6
|
import { B } from "./Button-ClWB5gZW.js";
|
|
8
7
|
import { I } from "./IconButton-Dk8EDf4Z.js";
|
|
9
8
|
import { S } from "./STT-B89YQxDF.js";
|
|
10
|
-
import { T as
|
|
11
|
-
import { T as
|
|
9
|
+
import { T as T2 } from "./TextInput-B00XEBiM.js";
|
|
10
|
+
import { T as T3 } from "./TextArea-Bmkg-d0v.js";
|
|
12
11
|
import { S as S2 } from "./Select-DXO2nK78.js";
|
|
13
|
-
import { F as Footer } from "./Footer-
|
|
14
|
-
import { U } from "./Footer-
|
|
12
|
+
import { F as Footer } from "./Footer-DHkI2Lbi.js";
|
|
13
|
+
import { U } from "./Footer-DHkI2Lbi.js";
|
|
15
14
|
import { F } from "./FileUpload-D7qdf0y5.js";
|
|
16
|
-
import { T as
|
|
15
|
+
import { T as T4 } from "./TagInput-B_VOR8-r.js";
|
|
17
16
|
import { R } from "./RadioButton-CffrjQlz.js";
|
|
18
17
|
import { S as S3 } from "./Slider-DIJEeH2r.js";
|
|
19
18
|
import { C } from "./Checkbox-3k5UZ20q.js";
|
|
@@ -33,19 +32,19 @@ import { C as C3 } from "./CircularProgress-DTKTvWPL.js";
|
|
|
33
32
|
import { R as R2 } from "./Rating-CqV2p3Wa.js";
|
|
34
33
|
import { S as S4 } from "./Skeleton-CJpwvGKT.js";
|
|
35
34
|
import { S as S5 } from "./Spinner-N0I3bKh8.js";
|
|
36
|
-
import { T as
|
|
35
|
+
import { T as T5 } from "./Tooltip-BLzis3b9.js";
|
|
37
36
|
import { M as M2 } from "./MessagePopUp-DEbsvN19.js";
|
|
38
37
|
import { P as P2 } from "./PopOver-CAUFP1-Y.js";
|
|
39
38
|
import { N } from "./NavBar-CKo-nom2.js";
|
|
40
39
|
import { B as B3 } from "./Breadcrumbs-BM-yj_kq.js";
|
|
41
|
-
import { T as
|
|
40
|
+
import { T as T6 } from "./Tabs-Dk0OQfLb.js";
|
|
42
41
|
import { S as S6 } from "./Stepper-De9foUOK.js";
|
|
43
|
-
import { T as
|
|
42
|
+
import { T as T7 } from "./Timeline-CLEpMONv.js";
|
|
44
43
|
import { A } from "./Accordion-CwNZAMaX.js";
|
|
45
44
|
import { P as P3 } from "./Pager-DiZtB-Df.js";
|
|
46
45
|
import { M as M3 } from "./Modal-BOaNai97.js";
|
|
47
|
-
import { T as
|
|
48
|
-
import { T as
|
|
46
|
+
import { T as T8 } from "./Toggle-D1vM9KrI.js";
|
|
47
|
+
import { T as T9 } from "./Toolbar-Dme9QqMY.js";
|
|
49
48
|
import { D as D3 } from "./Dropdown-CzQhdSD7.js";
|
|
50
49
|
import { D as D4 } from "./Divider-PQO6alS3.js";
|
|
51
50
|
import { M as M4 } from "./MetricBox-BIWbtopW.js";
|
|
@@ -229,18 +228,17 @@ export {
|
|
|
229
228
|
S3 as Slider,
|
|
230
229
|
S5 as Spinner,
|
|
231
230
|
S6 as Stepper,
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
231
|
+
T6 as Tabs,
|
|
232
|
+
T4 as TagInput,
|
|
233
|
+
T3 as TextArea,
|
|
234
|
+
T2 as TextInput,
|
|
236
235
|
a as ThemeContext,
|
|
237
|
-
T2 as ThemeInitScript,
|
|
238
236
|
T as ThemeProvider,
|
|
239
237
|
U as ThemeSelect,
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
238
|
+
T7 as Timeline,
|
|
239
|
+
T8 as Toggle,
|
|
240
|
+
T9 as Toolbar,
|
|
241
|
+
T5 as Tooltip,
|
|
244
242
|
colorSchemes,
|
|
245
243
|
r as registerColorScheme,
|
|
246
244
|
s as setBorealStyleConfig
|
package/dist/next/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.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":["chip","uuidv4"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.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":["chip","uuidv4"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAM,gBAAgB;AAAA,EACpB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO,eAAA;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,EAAA,GAEF,QACG;AACH,UAAM,CAAC,cAAc,eAAe,IAAI,SAAsB,CAAA,CAAE;AAEhE,cAAU,MAAM;AACd,YAAM,cAAc,MAAM,IAAI,CAACA,WAAU;AAAA,QACvC,GAAGA;AAAA,QACH,IAAIA,MAAK,MAAMC,GAAA;AAAA,MAAO,EACtB;AACF,sBAAgB,WAAW;AAAA,IAC7B,GAAG,CAAC,KAAK,CAAC;AAEV,UAAM,cAAc;AAAA,MAClB,CAAC,OAAe;AACd,wBAAgB,CAAC,SAAS,KAAK,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC;AACzD,6CAAW;AAAA,MACb;AAAA,MACA,CAAC,QAAQ;AAAA,IAAA;AAGX,wBAAoB,KAAK,OAAO;AAAA,MAC9B,eAAe,MAAM;AACnB,qBAAa,QAAQ,CAACD,UAAS,YAAYA,MAAK,EAAG,CAAC;AAAA,MACtD;AAAA,IAAA,EACA;AAEF,UAAM,qBAAqB;AAAA,MACzB,SAAS;AAAA,MACT,SAAS,QAAQ;AAAA,MACjB;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QACX,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACV,eAAY;AAAA,QAEZ,UAAA,oBAAC,MAAA,EAAG,MAAK,QAAO,WAAW,SAAS,MACjC,UAAA,aAAa,IAAI,CAACA,OAAM,UAAU;AACjC,gBAAM,eAAeA,MAAK,YAAY;AACtC,gBAAM,oBAAoB,SAAS,YAAY;AAE/C,iBACE,oBAAC,MAAA,EAAiB,MAAK,YACrB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAIA,MAAK;AAAA,cACT,SAASA,MAAK;AAAA,cACd,MAAMA,MAAK;AAAA,cACX,OAAOA,MAAK;AAAA,cACZ,OAAOA,MAAK;AAAA,cACZ,MAAMA,MAAK,QAAQ;AAAA,cACnB,UAAUA,MAAK;AAAA,cACf,QAAQA,MAAK;AAAA,cACb,SAAS;AAAA,cACT,SAAS,MAAM,YAAYA,MAAK,EAAG;AAAA,cACnC,WAAWA,MAAK;AAAA,cAChB,UAAUA,MAAK;AAAA,cACf,UAAU;AAAA,cACV,WAAW;AAAA,cACX,YAAY;AAAA,cACZ,WAAW;AAAA,gBACT,SAAS;AAAA,gBACTA,MAAK;AAAA,gBACL;AAAA,cAAA;AAAA,cAEF,eAAaA,MAAK,aAAa;AAAA,YAAA;AAAA,UAAA,EACjC,GAvBOA,MAAK,EAwBd;AAAA,QAEJ,CAAC,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACtG5B,MAAM,YAAY,MAAM;AAAA,EACtB,CAAC,OAAO,QACN;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,eAAe;AAAA,MACf,UAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;ACUA,SAAwB,oBAAoB,OAAoB;AAC9D,SAAO,oBAAC,QAAA,EAAQ,GAAG,MAAA,CAAO;AAC5B;"}
|