@abumble/design-system 0.0.44 → 0.0.46
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/components/BeeLogo/BeeLogo.d.ts +20 -0
- package/dist/components/BeeLogo/BeeLogo.d.ts.map +1 -0
- package/dist/components/BeeLogo/index.d.ts +2 -0
- package/dist/components/BeeLogo/index.d.ts.map +1 -0
- package/dist/components/BeeLogo.js +47 -0
- package/dist/components/BeeLogo.js.map +1 -0
- package/dist/themes/ThemeProvider.d.ts +2 -1
- package/dist/themes/ThemeProvider.d.ts.map +1 -1
- package/dist/themes.js +41 -36
- package/dist/themes.js.map +1 -1
- package/package.json +1 -1
- package/src/themes/ThemeProvider.tsx +13 -6
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export interface BeeLogoProps extends React.ComponentProps<'a'> {
|
|
3
|
+
/** If true, renders the provided child element as the anchor. Use with router Link components. */
|
|
4
|
+
asChild?: boolean;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Bee logo link. Router-agnostic via asChild pattern.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* // With TanStack Router:
|
|
11
|
+
* <BeeLogo asChild>
|
|
12
|
+
* <Link to="/" />
|
|
13
|
+
* </BeeLogo>
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* // Plain link:
|
|
17
|
+
* <BeeLogo href="/" />
|
|
18
|
+
*/
|
|
19
|
+
export declare function BeeLogo({ asChild, className, children, ...props }: BeeLogoProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
//# sourceMappingURL=BeeLogo.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BeeLogo.d.ts","sourceRoot":"","sources":["../../../src/components/BeeLogo/BeeLogo.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;IAC9D,kGAAkG;IAClG,OAAO,CAAC,EAAE,OAAO,CAAA;CACjB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,OAAO,CAAC,EACvB,OAAe,EACf,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,YAAY,2CAyCd"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BeeLogo/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { jsxs as s, Fragment as p, jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import { c } from "../shared/utils.js";
|
|
3
|
+
import * as i from "react";
|
|
4
|
+
const h = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20style='background-color:transparent'%20viewBox='0%200%2095%2095'%3e%3cdefs%3e%3cradialGradient%20id='b'%20cx='64.8'%20cy='43.2'%20r='11.3'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23fff'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/radialGradient%3e%3cradialGradient%20id='d'%20cx='64.8'%20cy='43.2'%20r='11.3'%20gradientTransform='matrix(.81137%20-.09169%20-.01114%20.86802%2012.704%2011.643)'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23fff'/%3e%3cstop%20offset='1'%20stop-color='%23fff'%20stop-opacity='0'/%3e%3c/radialGradient%3e%3clinearGradient%20id='a'%20x1='45.1'%20x2='84.952'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23fff'/%3e%3cstop%20offset='1'%20stop-color='%23a2ffff'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath%20fill='none'%20d='M4.177%204.177h86.646v86.646H4.177z'/%3e%3cpath%20stroke='%23000'%20stroke-width='2.19816'%20d='M28.134%2034.891c0%207.015%205.686%2012.7%2012.7%2012.7s12.7-5.685%2012.7-12.7-5.685-12.7-12.7-12.7-12.7%205.686-12.7%2012.7z'/%3e%3cpath%20fill='%23ff0'%20stroke='%23000'%20stroke-width='1.8'%20d='M39.599%2058.252c2.651%2012.903%2014.854%2024.58%2027.255%2026.078s20.305-7.744%2017.653-20.648-14.854-24.579-27.255-26.078-20.305%207.745-17.653%2020.648z'/%3e%3cpath%20fill='url(%23a)'%20stroke='%23000'%20stroke-width='1.8'%20d='M46%2045.8c18.6%201.6%2046.132%2011.217%2035.8%2026s-31-8.4-35.8-26z'%20transform='matrix(-1%200%200%201%2094.032%20-1.307)'/%3e%3cpath%20d='M70.188%2042.818a36.7%2036.7%200%200%201%206.062%205.313c-1.638.126-3.55.298-5.718.594-5.408.738-11.766%202.26-14.781%204.312l-.125.094c-2.96%202.085-6.866%207.662-9.72%2012.688-.64%201.13-1.209%202.192-1.75%203.219-1.428-2.194-2.608-4.524-3.468-6.938%202.045-6.09%204.547-12.949%209.031-16%204.525-3.079%2012.42-3.326%2019.062-3.281.815.006.652-.004%201.406%200zm10.281%2010.906a33%2033%200%200%201%202.813%205.72c-1.18.114-2.444.254-3.782.437-5.662.773-12.312%202.352-15.469%204.5l-.156.093c-3.099%202.183-7.17%208.02-10.156%2013.281-.173.305-.302.575-.469.875a37%2037%200%200%201-5.093-4.5c2.155-6.434%204.808-13.766%209.562-17%204.738-3.223%2012.982-3.453%2019.938-3.406%201.626.011%201.433-.005%202.813%200zm4.281%2011.344c.254%201.69.321%203.311.219%204.844-4.396.613-9.496%201.839-11.938%203.5l-.094.094c-2.425%201.708-5.63%206.258-7.969%2010.375-.024.043-.038.082-.062.125a27%2027%200%200%201-4.781-1.469c.162-.465.304-.885.468-1.375%201.693-5.057%203.757-10.859%207.5-13.406%203.708-2.523%2010.182-2.724%2015.625-2.687z'/%3e%3cpath%20fill='url(%23a)'%20stroke='%23000'%20stroke-width='1.8'%20d='M45.302%2046.719c11.846%209.186%2026.222%2027.672%2012.811%2033.138S40.868%2060.681%2045.302%2046.719z'%20transform='matrix(-1%200%200%201%2094.032%20-1.307)'/%3e%3cpath%20fill='url(%23b)'%20d='M75.2%2043.2c0%205.744-4.656%2010.4-10.4%2010.4s-10.4-4.656-10.4-10.4%204.656-10.4%2010.4-10.4%2010.4%204.656%2010.4%2010.4'%20transform='matrix(-.80583%200%20-.55717%20.8634%20114.605%20-4.804)'/%3e%3cpath%20stroke='%23000'%20d='M29.332%2030.093c-9.875-.2-11.102-1.052-13.15%201.675s-3.15%207.287-.6%207.3%202.405-4.507%203.143-6.362%205.507-2.3%2010.607-2.613zM39.894%2023.452c0-9.877-.828-11.12%201.94-13.113s7.35-3.001%207.311-.452-4.555%202.313-6.424%203.014-2.411%205.46-2.827%2010.552z'/%3e%3cg%20fill='url(%23a)'%20stroke='%23000'%20stroke-width='1.8'%20transform='rotate(-90%2046.148%2027.801)'%3e%3cpath%20d='M29.702%2030.083c18.6%201.6%2046.132%2011.217%2035.8%2026s-31-8.4-35.8-26z'/%3e%3cpath%20d='M29.005%2031.002c11.846%209.186%2026.222%2027.672%2012.811%2033.138S24.571%2044.964%2029.005%2031.002z'/%3e%3c/g%3e%3cpath%20d='m80.12%2080.244%205.328%209.46-8.155-7.394z'/%3e%3cpath%20fill='url(%23d)'%20d='M75.2%2043.2c0%205.744-4.656%2010.4-10.4%2010.4s-10.4-4.656-10.4-10.4%204.656-10.4%2010.4-10.4%2010.4%204.656%2010.4%2010.4'%20transform='matrix(0%20.96103%201.0698%20.66449%2016.057%20-31.013)'/%3e%3c/svg%3e";
|
|
5
|
+
function x({
|
|
6
|
+
asChild: l = !1,
|
|
7
|
+
className: n,
|
|
8
|
+
children: t,
|
|
9
|
+
...f
|
|
10
|
+
}) {
|
|
11
|
+
const r = c("flex items-center outline-none group", n), a = /* @__PURE__ */ m(
|
|
12
|
+
"img",
|
|
13
|
+
{
|
|
14
|
+
src: h,
|
|
15
|
+
alt: "",
|
|
16
|
+
"aria-hidden": "true",
|
|
17
|
+
className: "h-8 w-8 transition-transform duration-300 group-hover:rotate-12 group-hover:scale-110"
|
|
18
|
+
}
|
|
19
|
+
);
|
|
20
|
+
if (l) {
|
|
21
|
+
let e;
|
|
22
|
+
try {
|
|
23
|
+
e = i.Children.only(t);
|
|
24
|
+
} catch {
|
|
25
|
+
throw new Error(
|
|
26
|
+
"BeeLogo with asChild requires exactly one child element."
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
const o = e.props, d = {
|
|
30
|
+
"aria-label": "Home",
|
|
31
|
+
className: c(r, o.className),
|
|
32
|
+
children: /* @__PURE__ */ s(p, { children: [
|
|
33
|
+
a,
|
|
34
|
+
o.children
|
|
35
|
+
] })
|
|
36
|
+
};
|
|
37
|
+
return i.cloneElement(e, d);
|
|
38
|
+
}
|
|
39
|
+
return /* @__PURE__ */ s("a", { "aria-label": "Home", className: r, ...f, children: [
|
|
40
|
+
a,
|
|
41
|
+
t
|
|
42
|
+
] });
|
|
43
|
+
}
|
|
44
|
+
export {
|
|
45
|
+
x as BeeLogo
|
|
46
|
+
};
|
|
47
|
+
//# sourceMappingURL=BeeLogo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BeeLogo.js","sources":["../../src/assets/bee.svg","../../src/components/BeeLogo/BeeLogo.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20style='background-color:transparent'%20viewBox='0%200%2095%2095'%3e%3cdefs%3e%3cradialGradient%20id='b'%20cx='64.8'%20cy='43.2'%20r='11.3'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23fff'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/radialGradient%3e%3cradialGradient%20id='d'%20cx='64.8'%20cy='43.2'%20r='11.3'%20gradientTransform='matrix(.81137%20-.09169%20-.01114%20.86802%2012.704%2011.643)'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23fff'/%3e%3cstop%20offset='1'%20stop-color='%23fff'%20stop-opacity='0'/%3e%3c/radialGradient%3e%3clinearGradient%20id='a'%20x1='45.1'%20x2='84.952'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20offset='0'%20stop-color='%23fff'/%3e%3cstop%20offset='1'%20stop-color='%23a2ffff'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath%20fill='none'%20d='M4.177%204.177h86.646v86.646H4.177z'/%3e%3cpath%20stroke='%23000'%20stroke-width='2.19816'%20d='M28.134%2034.891c0%207.015%205.686%2012.7%2012.7%2012.7s12.7-5.685%2012.7-12.7-5.685-12.7-12.7-12.7-12.7%205.686-12.7%2012.7z'/%3e%3cpath%20fill='%23ff0'%20stroke='%23000'%20stroke-width='1.8'%20d='M39.599%2058.252c2.651%2012.903%2014.854%2024.58%2027.255%2026.078s20.305-7.744%2017.653-20.648-14.854-24.579-27.255-26.078-20.305%207.745-17.653%2020.648z'/%3e%3cpath%20fill='url(%23a)'%20stroke='%23000'%20stroke-width='1.8'%20d='M46%2045.8c18.6%201.6%2046.132%2011.217%2035.8%2026s-31-8.4-35.8-26z'%20transform='matrix(-1%200%200%201%2094.032%20-1.307)'/%3e%3cpath%20d='M70.188%2042.818a36.7%2036.7%200%200%201%206.062%205.313c-1.638.126-3.55.298-5.718.594-5.408.738-11.766%202.26-14.781%204.312l-.125.094c-2.96%202.085-6.866%207.662-9.72%2012.688-.64%201.13-1.209%202.192-1.75%203.219-1.428-2.194-2.608-4.524-3.468-6.938%202.045-6.09%204.547-12.949%209.031-16%204.525-3.079%2012.42-3.326%2019.062-3.281.815.006.652-.004%201.406%200zm10.281%2010.906a33%2033%200%200%201%202.813%205.72c-1.18.114-2.444.254-3.782.437-5.662.773-12.312%202.352-15.469%204.5l-.156.093c-3.099%202.183-7.17%208.02-10.156%2013.281-.173.305-.302.575-.469.875a37%2037%200%200%201-5.093-4.5c2.155-6.434%204.808-13.766%209.562-17%204.738-3.223%2012.982-3.453%2019.938-3.406%201.626.011%201.433-.005%202.813%200zm4.281%2011.344c.254%201.69.321%203.311.219%204.844-4.396.613-9.496%201.839-11.938%203.5l-.094.094c-2.425%201.708-5.63%206.258-7.969%2010.375-.024.043-.038.082-.062.125a27%2027%200%200%201-4.781-1.469c.162-.465.304-.885.468-1.375%201.693-5.057%203.757-10.859%207.5-13.406%203.708-2.523%2010.182-2.724%2015.625-2.687z'/%3e%3cpath%20fill='url(%23a)'%20stroke='%23000'%20stroke-width='1.8'%20d='M45.302%2046.719c11.846%209.186%2026.222%2027.672%2012.811%2033.138S40.868%2060.681%2045.302%2046.719z'%20transform='matrix(-1%200%200%201%2094.032%20-1.307)'/%3e%3cpath%20fill='url(%23b)'%20d='M75.2%2043.2c0%205.744-4.656%2010.4-10.4%2010.4s-10.4-4.656-10.4-10.4%204.656-10.4%2010.4-10.4%2010.4%204.656%2010.4%2010.4'%20transform='matrix(-.80583%200%20-.55717%20.8634%20114.605%20-4.804)'/%3e%3cpath%20stroke='%23000'%20d='M29.332%2030.093c-9.875-.2-11.102-1.052-13.15%201.675s-3.15%207.287-.6%207.3%202.405-4.507%203.143-6.362%205.507-2.3%2010.607-2.613zM39.894%2023.452c0-9.877-.828-11.12%201.94-13.113s7.35-3.001%207.311-.452-4.555%202.313-6.424%203.014-2.411%205.46-2.827%2010.552z'/%3e%3cg%20fill='url(%23a)'%20stroke='%23000'%20stroke-width='1.8'%20transform='rotate(-90%2046.148%2027.801)'%3e%3cpath%20d='M29.702%2030.083c18.6%201.6%2046.132%2011.217%2035.8%2026s-31-8.4-35.8-26z'/%3e%3cpath%20d='M29.005%2031.002c11.846%209.186%2026.222%2027.672%2012.811%2033.138S24.571%2044.964%2029.005%2031.002z'/%3e%3c/g%3e%3cpath%20d='m80.12%2080.244%205.328%209.46-8.155-7.394z'/%3e%3cpath%20fill='url(%23d)'%20d='M75.2%2043.2c0%205.744-4.656%2010.4-10.4%2010.4s-10.4-4.656-10.4-10.4%204.656-10.4%2010.4-10.4%2010.4%204.656%2010.4%2010.4'%20transform='matrix(0%20.96103%201.0698%20.66449%2016.057%20-31.013)'/%3e%3c/svg%3e\"","import bee from '@/assets/bee.svg'\nimport { cn } from '@/utils'\nimport * as React from 'react'\n\nexport interface BeeLogoProps extends React.ComponentProps<'a'> {\n\t/** If true, renders the provided child element as the anchor. Use with router Link components. */\n\tasChild?: boolean\n}\n\n/**\n * Bee logo link. Router-agnostic via asChild pattern.\n *\n * @example\n * // With TanStack Router:\n * <BeeLogo asChild>\n * <Link to=\"/\" />\n * </BeeLogo>\n *\n * @example\n * // Plain link:\n * <BeeLogo href=\"/\" />\n */\nexport function BeeLogo({\n\tasChild = false,\n\tclassName,\n\tchildren,\n\t...props\n}: BeeLogoProps) {\n\tconst linkClassName = cn('flex items-center outline-none group', className)\n\n\tconst logoContent = (\n\t\t<img\n\t\t\tsrc={bee}\n\t\t\talt=\"\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName=\"h-8 w-8 transition-transform duration-300 group-hover:rotate-12 group-hover:scale-110\"\n\t\t/>\n\t)\n\n\tif (asChild) {\n\t\tlet child: React.ReactElement\n\t\ttry {\n\t\t\tchild = React.Children.only(children) as React.ReactElement\n\t\t} catch {\n\t\t\tthrow new Error(\n\t\t\t\t'BeeLogo with asChild requires exactly one child element.',\n\t\t\t)\n\t\t}\n\t\tconst childProps = child.props as React.HTMLAttributes<HTMLElement>\n\t\tconst mergedProps: object = {\n\t\t\t'aria-label': 'Home',\n\t\t\tclassName: cn(linkClassName, childProps.className),\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t{logoContent}\n\t\t\t\t\t{childProps.children}\n\t\t\t\t</>\n\t\t\t),\n\t\t}\n\t\treturn React.cloneElement(child, mergedProps)\n\t}\n\n\treturn (\n\t\t<a aria-label=\"Home\" className={linkClassName} {...props}>\n\t\t\t{logoContent}\n\t\t\t{children}\n\t\t</a>\n\t)\n}\n"],"names":["bee","BeeLogo","asChild","className","children","props","linkClassName","cn","logoContent","jsx","child","React","childProps","mergedProps","jsxs","Fragment"],"mappings":";;;AAAA,MAAAA,IAAe;ACsBR,SAASC,EAAQ;AAAA,EACvB,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACJ,GAAiB;AAChB,QAAMC,IAAgBC,EAAG,wCAAwCJ,CAAS,GAEpEK,IACL,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,KAAKT;AAAA,MACL,KAAI;AAAA,MACJ,eAAY;AAAA,MACZ,WAAU;AAAA,IAAA;AAAA,EAAA;AAIZ,MAAIE,GAAS;AACZ,QAAIQ;AACJ,QAAI;AACH,MAAAA,IAAQC,EAAM,SAAS,KAAKP,CAAQ;AAAA,IACrC,QAAQ;AACP,YAAM,IAAI;AAAA,QACT;AAAA,MAAA;AAAA,IAEF;AACA,UAAMQ,IAAaF,EAAM,OACnBG,IAAsB;AAAA,MAC3B,cAAc;AAAA,MACd,WAAWN,EAAGD,GAAeM,EAAW,SAAS;AAAA,MACjD,UACC,gBAAAE,EAAAC,GAAA,EACE,UAAA;AAAA,QAAAP;AAAA,QACAI,EAAW;AAAA,MAAA,EAAA,CACb;AAAA,IAAA;AAGF,WAAOD,EAAM,aAAaD,GAAOG,CAAW;AAAA,EAC7C;AAEA,2BACE,KAAA,EAAE,cAAW,QAAO,WAAWP,GAAgB,GAAGD,GACjD,UAAA;AAAA,IAAAG;AAAA,IACAJ;AAAA,EAAA,GACF;AAEF;"}
|
|
@@ -3,7 +3,8 @@ import './linen.css';
|
|
|
3
3
|
import './steel.css';
|
|
4
4
|
export type Theme = 'light' | 'dark' | 'system';
|
|
5
5
|
export type ColorTheme = 'linen' | 'steel';
|
|
6
|
-
export declare function ThemeProvider({ children }: {
|
|
6
|
+
export declare function ThemeProvider({ children, defaultColorTheme, }: {
|
|
7
7
|
children: ReactNode;
|
|
8
|
+
defaultColorTheme?: ColorTheme;
|
|
8
9
|
}): import("react/jsx-runtime").JSX.Element;
|
|
9
10
|
//# sourceMappingURL=ThemeProvider.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/themes/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,aAAa,CAAA;AACpB,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,OAAO,CAAA;AAiC1C,wBAAgB,aAAa,CAAC,
|
|
1
|
+
{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/themes/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,aAAa,CAAA;AACpB,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAC/C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,OAAO,CAAA;AAiC1C,wBAAgB,aAAa,CAAC,EAC7B,QAAQ,EACR,iBAA2B,GAC3B,EAAE;IACF,QAAQ,EAAE,SAAS,CAAA;IACnB,iBAAiB,CAAC,EAAE,UAAU,CAAA;CAC9B,2CA8CA"}
|
package/dist/themes.js
CHANGED
|
@@ -1,50 +1,55 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { T as
|
|
4
|
-
import { u as
|
|
5
|
-
const
|
|
6
|
-
function y() {
|
|
7
|
-
if (typeof window > "u") return "system";
|
|
8
|
-
const e = localStorage.getItem(l);
|
|
9
|
-
return e === "light" || e === "dark" || e === "system" ? e : "dark";
|
|
10
|
-
}
|
|
1
|
+
import { jsx as k } from "react/jsx-runtime";
|
|
2
|
+
import { useState as m, useEffect as c, useCallback as l, useMemo as E } from "react";
|
|
3
|
+
import { T as y } from "./shared/useTheme.js";
|
|
4
|
+
import { u as b } from "./shared/useTheme.js";
|
|
5
|
+
const h = "theme", u = "color-theme";
|
|
11
6
|
function v() {
|
|
12
|
-
if (typeof window > "u") return "
|
|
7
|
+
if (typeof window > "u") return "system";
|
|
13
8
|
const e = localStorage.getItem(h);
|
|
14
|
-
return e === "
|
|
9
|
+
return e === "light" || e === "dark" || e === "system" ? e : "dark";
|
|
15
10
|
}
|
|
16
11
|
function w(e) {
|
|
17
|
-
|
|
18
|
-
|
|
12
|
+
if (typeof window > "u") return e;
|
|
13
|
+
const o = localStorage.getItem(u);
|
|
14
|
+
return o === "linen" || o === "steel" ? o : e;
|
|
19
15
|
}
|
|
20
16
|
function C(e) {
|
|
17
|
+
const o = document.documentElement;
|
|
18
|
+
e === "dark" ? o.classList.add("dark") : o.classList.remove("dark");
|
|
19
|
+
}
|
|
20
|
+
function L(e) {
|
|
21
21
|
document.documentElement.setAttribute("data-theme", e);
|
|
22
22
|
}
|
|
23
|
-
function
|
|
24
|
-
|
|
23
|
+
function _({
|
|
24
|
+
children: e,
|
|
25
|
+
defaultColorTheme: o = "steel"
|
|
26
|
+
}) {
|
|
27
|
+
const [r, f] = m(v), [s, T] = m(
|
|
28
|
+
() => w(o)
|
|
29
|
+
), [p, g] = m(
|
|
25
30
|
() => window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
26
|
-
), n =
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}, [n]),
|
|
30
|
-
|
|
31
|
-
}, [
|
|
32
|
-
if (
|
|
33
|
-
const
|
|
34
|
-
return
|
|
35
|
-
}, [
|
|
36
|
-
const a =
|
|
37
|
-
|
|
38
|
-
}, []),
|
|
39
|
-
|
|
40
|
-
}, []),
|
|
41
|
-
() => ({ theme:
|
|
42
|
-
[
|
|
31
|
+
), n = r === "system" ? p ? "dark" : "light" : r;
|
|
32
|
+
c(() => {
|
|
33
|
+
C(n);
|
|
34
|
+
}, [n]), c(() => {
|
|
35
|
+
L(s);
|
|
36
|
+
}, [s]), c(() => {
|
|
37
|
+
if (r !== "system") return;
|
|
38
|
+
const t = window.matchMedia("(prefers-color-scheme: dark)"), i = () => g(t.matches);
|
|
39
|
+
return t.addEventListener("change", i), () => t.removeEventListener("change", i);
|
|
40
|
+
}, [r]);
|
|
41
|
+
const a = l((t) => {
|
|
42
|
+
f(t), localStorage.setItem(h, t);
|
|
43
|
+
}, []), d = l((t) => {
|
|
44
|
+
T(t), localStorage.setItem(u, t);
|
|
45
|
+
}, []), S = E(
|
|
46
|
+
() => ({ theme: r, setTheme: a, effectiveTheme: n, colorTheme: s, setColorTheme: d }),
|
|
47
|
+
[r, a, n, s, d]
|
|
43
48
|
);
|
|
44
|
-
return /* @__PURE__ */
|
|
49
|
+
return /* @__PURE__ */ k(y.Provider, { value: S, children: e });
|
|
45
50
|
}
|
|
46
51
|
export {
|
|
47
|
-
|
|
48
|
-
|
|
52
|
+
_ as ThemeProvider,
|
|
53
|
+
b as useTheme
|
|
49
54
|
};
|
|
50
55
|
//# sourceMappingURL=themes.js.map
|
package/dist/themes.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themes.js","sources":["../src/themes/ThemeProvider.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { ThemeContext } from './ThemeContext'\nimport './linen.css'\nimport './steel.css'\n\nexport type Theme = 'light' | 'dark' | 'system'\nexport type ColorTheme = 'linen' | 'steel'\n\nconst STORAGE_KEY = 'theme'\nconst COLOR_THEME_STORAGE_KEY = 'color-theme'\n\nfunction getStoredTheme(): Theme {\n\tif (typeof window === 'undefined') return 'system'\n\tconst stored = localStorage.getItem(STORAGE_KEY)\n\tif (stored === 'light' || stored === 'dark' || stored === 'system')\n\t\treturn stored\n\treturn 'dark'\n}\n\nfunction getStoredColorTheme(): ColorTheme {\n\tif (typeof window === 'undefined') return
|
|
1
|
+
{"version":3,"file":"themes.js","sources":["../src/themes/ThemeProvider.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { ThemeContext } from './ThemeContext'\nimport './linen.css'\nimport './steel.css'\n\nexport type Theme = 'light' | 'dark' | 'system'\nexport type ColorTheme = 'linen' | 'steel'\n\nconst STORAGE_KEY = 'theme'\nconst COLOR_THEME_STORAGE_KEY = 'color-theme'\n\nfunction getStoredTheme(): Theme {\n\tif (typeof window === 'undefined') return 'system'\n\tconst stored = localStorage.getItem(STORAGE_KEY)\n\tif (stored === 'light' || stored === 'dark' || stored === 'system')\n\t\treturn stored\n\treturn 'dark'\n}\n\nfunction getStoredColorTheme(defaultColorTheme: ColorTheme): ColorTheme {\n\tif (typeof window === 'undefined') return defaultColorTheme\n\tconst stored = localStorage.getItem(COLOR_THEME_STORAGE_KEY)\n\tif (stored === 'linen' || stored === 'steel') return stored\n\treturn defaultColorTheme\n}\n\nfunction applyTheme(effective: 'light' | 'dark') {\n\tconst root = document.documentElement\n\tif (effective === 'dark') {\n\t\troot.classList.add('dark')\n\t} else {\n\t\troot.classList.remove('dark')\n\t}\n}\n\nfunction applyColorTheme(colorTheme: ColorTheme) {\n\tdocument.documentElement.setAttribute('data-theme', colorTheme)\n}\n\nexport function ThemeProvider({\n\tchildren,\n\tdefaultColorTheme = 'steel',\n}: {\n\tchildren: ReactNode\n\tdefaultColorTheme?: ColorTheme\n}) {\n\tconst [theme, setThemeState] = useState<Theme>(getStoredTheme)\n\tconst [colorTheme, setColorThemeState] = useState<ColorTheme>(() =>\n\t\tgetStoredColorTheme(defaultColorTheme),\n\t)\n\tconst [systemDark, setSystemDark] = useState(\n\t\t() => window.matchMedia('(prefers-color-scheme: dark)').matches,\n\t)\n\n\tconst effectiveTheme: 'light' | 'dark' =\n\t\ttheme === 'system' ? (systemDark ? 'dark' : 'light') : theme\n\n\tuseEffect(() => {\n\t\tapplyTheme(effectiveTheme)\n\t}, [effectiveTheme])\n\n\tuseEffect(() => {\n\t\tapplyColorTheme(colorTheme)\n\t}, [colorTheme])\n\n\tuseEffect(() => {\n\t\tif (theme !== 'system') return\n\t\tconst media = window.matchMedia('(prefers-color-scheme: dark)')\n\t\tconst handler = () => setSystemDark(media.matches)\n\t\tmedia.addEventListener('change', handler)\n\t\treturn () => media.removeEventListener('change', handler)\n\t}, [theme])\n\n\tconst setTheme = useCallback((next: Theme) => {\n\t\tsetThemeState(next)\n\t\tlocalStorage.setItem(STORAGE_KEY, next)\n\t}, [])\n\n\tconst setColorTheme = useCallback((next: ColorTheme) => {\n\t\tsetColorThemeState(next)\n\t\tlocalStorage.setItem(COLOR_THEME_STORAGE_KEY, next)\n\t}, [])\n\n\tconst value = useMemo(\n\t\t() => ({ theme, setTheme, effectiveTheme, colorTheme, setColorTheme }),\n\t\t[theme, setTheme, effectiveTheme, colorTheme, setColorTheme],\n\t)\n\n\treturn (\n\t\t<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n\t)\n}\n"],"names":["STORAGE_KEY","COLOR_THEME_STORAGE_KEY","getStoredTheme","stored","getStoredColorTheme","defaultColorTheme","applyTheme","effective","root","applyColorTheme","colorTheme","ThemeProvider","children","theme","setThemeState","useState","setColorThemeState","systemDark","setSystemDark","effectiveTheme","useEffect","media","handler","setTheme","useCallback","next","setColorTheme","value","useMemo","jsx","ThemeContext"],"mappings":";;;;AASA,MAAMA,IAAc,SACdC,IAA0B;AAEhC,SAASC,IAAwB;AAChC,MAAI,OAAO,SAAW,IAAa,QAAO;AAC1C,QAAMC,IAAS,aAAa,QAAQH,CAAW;AAC/C,SAAIG,MAAW,WAAWA,MAAW,UAAUA,MAAW,WAClDA,IACD;AACR;AAEA,SAASC,EAAoBC,GAA2C;AACvE,MAAI,OAAO,SAAW,IAAa,QAAOA;AAC1C,QAAMF,IAAS,aAAa,QAAQF,CAAuB;AAC3D,SAAIE,MAAW,WAAWA,MAAW,UAAgBA,IAC9CE;AACR;AAEA,SAASC,EAAWC,GAA6B;AAChD,QAAMC,IAAO,SAAS;AACtB,EAAID,MAAc,SACjBC,EAAK,UAAU,IAAI,MAAM,IAEzBA,EAAK,UAAU,OAAO,MAAM;AAE9B;AAEA,SAASC,EAAgBC,GAAwB;AAChD,WAAS,gBAAgB,aAAa,cAAcA,CAAU;AAC/D;AAEO,SAASC,EAAc;AAAA,EAC7B,UAAAC;AAAA,EACA,mBAAAP,IAAoB;AACrB,GAGG;AACF,QAAM,CAACQ,GAAOC,CAAa,IAAIC,EAAgBb,CAAc,GACvD,CAACQ,GAAYM,CAAkB,IAAID;AAAA,IAAqB,MAC7DX,EAAoBC,CAAiB;AAAA,EAAA,GAEhC,CAACY,GAAYC,CAAa,IAAIH;AAAA,IACnC,MAAM,OAAO,WAAW,8BAA8B,EAAE;AAAA,EAAA,GAGnDI,IACLN,MAAU,WAAYI,IAAa,SAAS,UAAWJ;AAExD,EAAAO,EAAU,MAAM;AACf,IAAAd,EAAWa,CAAc;AAAA,EAC1B,GAAG,CAACA,CAAc,CAAC,GAEnBC,EAAU,MAAM;AACf,IAAAX,EAAgBC,CAAU;AAAA,EAC3B,GAAG,CAACA,CAAU,CAAC,GAEfU,EAAU,MAAM;AACf,QAAIP,MAAU,SAAU;AACxB,UAAMQ,IAAQ,OAAO,WAAW,8BAA8B,GACxDC,IAAU,MAAMJ,EAAcG,EAAM,OAAO;AACjD,WAAAA,EAAM,iBAAiB,UAAUC,CAAO,GACjC,MAAMD,EAAM,oBAAoB,UAAUC,CAAO;AAAA,EACzD,GAAG,CAACT,CAAK,CAAC;AAEV,QAAMU,IAAWC,EAAY,CAACC,MAAgB;AAC7C,IAAAX,EAAcW,CAAI,GAClB,aAAa,QAAQzB,GAAayB,CAAI;AAAA,EACvC,GAAG,CAAA,CAAE,GAECC,IAAgBF,EAAY,CAACC,MAAqB;AACvD,IAAAT,EAAmBS,CAAI,GACvB,aAAa,QAAQxB,GAAyBwB,CAAI;AAAA,EACnD,GAAG,CAAA,CAAE,GAECE,IAAQC;AAAA,IACb,OAAO,EAAE,OAAAf,GAAO,UAAAU,GAAU,gBAAAJ,GAAgB,YAAAT,GAAY,eAAAgB,EAAA;AAAA,IACtD,CAACb,GAAOU,GAAUJ,GAAgBT,GAAYgB,CAAa;AAAA,EAAA;AAG5D,SACC,gBAAAG,EAACC,EAAa,UAAb,EAAsB,OAAAH,GAAe,UAAAf,EAAA,CAAS;AAEjD;"}
|
package/package.json
CHANGED
|
@@ -18,11 +18,11 @@ function getStoredTheme(): Theme {
|
|
|
18
18
|
return 'dark'
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
function getStoredColorTheme(): ColorTheme {
|
|
22
|
-
if (typeof window === 'undefined') return
|
|
21
|
+
function getStoredColorTheme(defaultColorTheme: ColorTheme): ColorTheme {
|
|
22
|
+
if (typeof window === 'undefined') return defaultColorTheme
|
|
23
23
|
const stored = localStorage.getItem(COLOR_THEME_STORAGE_KEY)
|
|
24
24
|
if (stored === 'linen' || stored === 'steel') return stored
|
|
25
|
-
return
|
|
25
|
+
return defaultColorTheme
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
function applyTheme(effective: 'light' | 'dark') {
|
|
@@ -38,10 +38,17 @@ function applyColorTheme(colorTheme: ColorTheme) {
|
|
|
38
38
|
document.documentElement.setAttribute('data-theme', colorTheme)
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
export function ThemeProvider({
|
|
41
|
+
export function ThemeProvider({
|
|
42
|
+
children,
|
|
43
|
+
defaultColorTheme = 'steel',
|
|
44
|
+
}: {
|
|
45
|
+
children: ReactNode
|
|
46
|
+
defaultColorTheme?: ColorTheme
|
|
47
|
+
}) {
|
|
42
48
|
const [theme, setThemeState] = useState<Theme>(getStoredTheme)
|
|
43
|
-
const [colorTheme, setColorThemeState] =
|
|
44
|
-
|
|
49
|
+
const [colorTheme, setColorThemeState] = useState<ColorTheme>(() =>
|
|
50
|
+
getStoredColorTheme(defaultColorTheme),
|
|
51
|
+
)
|
|
45
52
|
const [systemDark, setSystemDark] = useState(
|
|
46
53
|
() => window.matchMedia('(prefers-color-scheme: dark)').matches,
|
|
47
54
|
)
|