@abumble/design-system 0.0.43 → 0.0.45
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 +44 -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/styles.css +2 -2
- 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,2CAqCd"}
|
|
@@ -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,44 @@
|
|
|
1
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { c as o } from "../shared/utils.js";
|
|
3
|
+
import * as s from "react";
|
|
4
|
+
const d = "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 h({
|
|
6
|
+
asChild: c = !1,
|
|
7
|
+
className: i,
|
|
8
|
+
children: l,
|
|
9
|
+
...n
|
|
10
|
+
}) {
|
|
11
|
+
const t = o("flex items-center outline-none group", i), r = /* @__PURE__ */ a(
|
|
12
|
+
"img",
|
|
13
|
+
{
|
|
14
|
+
src: d,
|
|
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 (c) {
|
|
21
|
+
let e;
|
|
22
|
+
try {
|
|
23
|
+
e = s.Children.only(l);
|
|
24
|
+
} catch {
|
|
25
|
+
throw new Error(
|
|
26
|
+
"BeeLogo with asChild requires exactly one child element."
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
const f = {
|
|
30
|
+
"aria-label": "Home",
|
|
31
|
+
className: o(
|
|
32
|
+
t,
|
|
33
|
+
e.props.className
|
|
34
|
+
),
|
|
35
|
+
children: r
|
|
36
|
+
};
|
|
37
|
+
return s.cloneElement(e, f);
|
|
38
|
+
}
|
|
39
|
+
return /* @__PURE__ */ a("a", { "aria-label": "Home", className: t, ...n, children: r });
|
|
40
|
+
}
|
|
41
|
+
export {
|
|
42
|
+
h as BeeLogo
|
|
43
|
+
};
|
|
44
|
+
//# 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 mergedProps: object = {\n\t\t\t'aria-label': 'Home',\n\t\t\tclassName: cn(\n\t\t\t\tlinkClassName,\n\t\t\t\t(child.props as React.HTMLAttributes<HTMLElement>).className,\n\t\t\t),\n\t\t\tchildren: logoContent,\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</a>\n\t)\n}\n"],"names":["bee","BeeLogo","asChild","className","children","props","linkClassName","cn","logoContent","jsx","child","React","mergedProps"],"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,IAAsB;AAAA,MAC3B,cAAc;AAAA,MACd,WAAWL;AAAA,QACVD;AAAA,QACCI,EAAM,MAA4C;AAAA,MAAA;AAAA,MAEpD,UAAUF;AAAA,IAAA;AAEX,WAAOG,EAAM,aAAaD,GAAOE,CAAW;AAAA,EAC7C;AAEA,SACC,gBAAAH,EAAC,OAAE,cAAW,QAAO,WAAWH,GAAgB,GAAGD,GACjD,UAAAG,EAAA,CACF;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
package/src/styles.css
CHANGED
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
@utility border-container {
|
|
22
|
-
@apply border border-
|
|
22
|
+
@apply border border-border;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
@utility random-rotation {
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
.header {
|
|
120
|
-
@apply z-50 fixed w-full top-0 px-3 flex justify-between text-card-foreground bg-card border-container items-center;
|
|
120
|
+
@apply z-50 fixed w-full h-14 top-0 px-3 flex justify-between text-card-foreground bg-card border-container items-center;
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
.sub-heading {
|
|
@@ -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
|
)
|