@macolmenerori/component-library 1.1.0 → 1.1.1
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/README.md +34 -13
- package/dist/{ThemeSwitch-DbaEio36.js → ThemeSwitch-Dyt25jza.js} +2 -2
- package/dist/{ThemeSwitch-DbaEio36.js.map → ThemeSwitch-Dyt25jza.js.map} +1 -1
- package/dist/ThemeSwitch-qivD2U8S.cjs +2 -0
- package/dist/{ThemeSwitch-C7k1_MA4.cjs.map → ThemeSwitch-qivD2U8S.cjs.map} +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/dist/theme-switch.cjs +1 -1
- package/dist/theme-switch.js +1 -1
- package/package.json +2 -1
- package/dist/ThemeSwitch-C7k1_MA4.cjs +0 -2
- /package/dist/{ThemeSwitch.css → component-library.css} +0 -0
package/README.md
CHANGED
|
@@ -4,10 +4,10 @@ A modern React component library built with TypeScript, providing reusable UI co
|
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
|
-
- Built with React and TypeScript
|
|
7
|
+
- Built with React 18/19 and TypeScript
|
|
8
8
|
- Fully typed components with TypeScript declarations
|
|
9
9
|
- ESM and CommonJS support
|
|
10
|
-
-
|
|
10
|
+
- **Subpath exports** for tree-shaking and optional dependencies
|
|
11
11
|
- Strict TypeScript configuration for type safety
|
|
12
12
|
|
|
13
13
|
## Installation
|
|
@@ -34,7 +34,15 @@ yarn add @macolmenerori/component-library
|
|
|
34
34
|
|
|
35
35
|
## Usage
|
|
36
36
|
|
|
37
|
-
Import components from the library
|
|
37
|
+
Import components from the library. You can use the main entry point or subpath imports for better tree-shaking.
|
|
38
|
+
|
|
39
|
+
### Subpath Exports
|
|
40
|
+
|
|
41
|
+
| Import Path | Components | Dependencies Required |
|
|
42
|
+
| -------------------------------------------------- | -------------- | --------------------------------- |
|
|
43
|
+
| `@macolmenerori/component-library` | All | react, react-markdown, remark-gfm |
|
|
44
|
+
| `@macolmenerori/component-library/theme-switch` | ThemeSwitch | react |
|
|
45
|
+
| `@macolmenerori/component-library/markdown-render` | MarkdownRender | react, react-markdown, remark-gfm |
|
|
38
46
|
|
|
39
47
|
### Available Components
|
|
40
48
|
|
|
@@ -53,7 +61,10 @@ A visually appealing theme toggle component with sun/moon animations, clouds, an
|
|
|
53
61
|
|
|
54
62
|
```tsx
|
|
55
63
|
import { useState } from 'react';
|
|
56
|
-
|
|
64
|
+
// Import CSS separately (required for styling)
|
|
65
|
+
import '@macolmenerori/component-library/theme-switch-css';
|
|
66
|
+
// Subpath import (recommended - no react-markdown dependency required)
|
|
67
|
+
import { ThemeSwitch } from '@macolmenerori/component-library/theme-switch';
|
|
57
68
|
|
|
58
69
|
function App() {
|
|
59
70
|
const [darkMode, setDarkMode] = useState(false);
|
|
@@ -66,6 +77,8 @@ function App() {
|
|
|
66
77
|
}
|
|
67
78
|
```
|
|
68
79
|
|
|
80
|
+
> **Note:** ThemeSwitch requires manual CSS import to support SSG/SSR environments. Import the CSS file before using the component.
|
|
81
|
+
|
|
69
82
|
</details>
|
|
70
83
|
|
|
71
84
|
<details>
|
|
@@ -73,6 +86,8 @@ function App() {
|
|
|
73
86
|
|
|
74
87
|
A simple and flexible markdown renderer with GitHub Flavored Markdown (GFM) support, including tables, task lists, strikethrough, and code blocks.
|
|
75
88
|
|
|
89
|
+
> **Note:** This component requires `react-markdown` and `remark-gfm` peer dependencies.
|
|
90
|
+
|
|
76
91
|
**Props:**
|
|
77
92
|
|
|
78
93
|
- `content` (string, required): The markdown string to render
|
|
@@ -89,7 +104,7 @@ A simple and flexible markdown renderer with GitHub Flavored Markdown (GFM) supp
|
|
|
89
104
|
**Example:**
|
|
90
105
|
|
|
91
106
|
```tsx
|
|
92
|
-
import MarkdownRender from '@macolmenerori/component-library';
|
|
107
|
+
import { MarkdownRender } from '@macolmenerori/component-library/markdown-render';
|
|
93
108
|
|
|
94
109
|
function App() {
|
|
95
110
|
const markdownContent = `
|
|
@@ -120,12 +135,17 @@ This is **bold** and this is *italic*.
|
|
|
120
135
|
|
|
121
136
|
## Peer Dependencies
|
|
122
137
|
|
|
123
|
-
|
|
138
|
+
**Required:**
|
|
139
|
+
|
|
140
|
+
- `react`: ^18.0.0 or ^19.0.0
|
|
141
|
+
- `react-dom`: ^18.0.0 or ^19.0.0
|
|
142
|
+
|
|
143
|
+
**Optional** (only needed for MarkdownRender):
|
|
124
144
|
|
|
125
|
-
-
|
|
126
|
-
-
|
|
145
|
+
- `react-markdown`: ^10.0.0
|
|
146
|
+
- `react-gfm`: ^4.0.0
|
|
127
147
|
|
|
128
|
-
|
|
148
|
+
If you only use ThemeSwitch via the subpath import (`/theme-switch`), you don't need to install react-markdown.
|
|
129
149
|
|
|
130
150
|
## Development
|
|
131
151
|
|
|
@@ -159,11 +179,12 @@ To build the library:
|
|
|
159
179
|
pnpm build
|
|
160
180
|
```
|
|
161
181
|
|
|
162
|
-
This will generate:
|
|
182
|
+
This will generate multiple entry points:
|
|
163
183
|
|
|
164
|
-
-
|
|
165
|
-
-
|
|
166
|
-
-
|
|
184
|
+
- `dist/index.js` / `dist/index.cjs` - Main entry (all components)
|
|
185
|
+
- `dist/theme-switch.js` / `dist/theme-switch.cjs` - ThemeSwitch only
|
|
186
|
+
- `dist/markdown-render.js` / `dist/markdown-render.cjs` - MarkdownRender only
|
|
187
|
+
- `dist/types/` - TypeScript declarations
|
|
167
188
|
|
|
168
189
|
### Publishing
|
|
169
190
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as t, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
|
|
2
|
+
const m = "ThemeSwitch-module__sunCore___tUhud", d = "ThemeSwitch-module__small___YlvWo", r = "ThemeSwitch-module__medium___Q8Rro", n = "ThemeSwitch-module__large___BMOxC", u = "ThemeSwitch-module__sunspot1___8RI1V", i = "ThemeSwitch-module__sunspot2___U0whF", h = "ThemeSwitch-module__sunspot3___kWYEI", w = "ThemeSwitch-module__sunRay___t1B4U", S = "ThemeSwitch-module__rotateSun___JQByd", T = "ThemeSwitch-module__switchContainer___VENjU", N = "ThemeSwitch-module__dark___a4vSn", v = "ThemeSwitch-module__background___Rpodp", g = "ThemeSwitch-module__cloud___OoOyx", $ = "ThemeSwitch-module__light___ddTa2", C = "ThemeSwitch-module__cloud1___aqGNx", p = "ThemeSwitch-module__floatCloud1___MdWMj", y = "ThemeSwitch-module__cloud2___guY71", R = "ThemeSwitch-module__floatCloud2___2x6Sp", k = "ThemeSwitch-module__cloud3___7-NhR", b = "ThemeSwitch-module__floatCloud3___FJCbV", f = "ThemeSwitch-module__star___Z98bU", x = "ThemeSwitch-module__star1___rhotb", I = "ThemeSwitch-module__star2___pzbNR", j = "ThemeSwitch-module__star3___iK7lJ", F = "ThemeSwitch-module__star4___t5pqN", J = "ThemeSwitch-module__star5___dx42N", K = "ThemeSwitch-module__star6___wur-I", U = "ThemeSwitch-module__star7___KONgd", O = "ThemeSwitch-module__star8___gIYpk", V = "ThemeSwitch-module__twinkle___Abun5", W = "ThemeSwitch-module__toggle___L5FGS", Y = "ThemeSwitch-module__sun___s8noI", B = "ThemeSwitch-module__moon___TNpFJ", E = "ThemeSwitch-module__moonCore___svwjb", Q = "ThemeSwitch-module__crater1___swpHc", q = "ThemeSwitch-module__crater2___WQVKR", G = "ThemeSwitch-module__crater3___F-KJu", Z = "ThemeSwitch-module__crater4___ZsIb7", s = {
|
|
3
3
|
sunCore: m,
|
|
4
4
|
small: d,
|
|
5
5
|
medium: r,
|
|
@@ -101,4 +101,4 @@ import './ThemeSwitch.css';const m = "ThemeSwitch-module__sunCore___tUhud", d =
|
|
|
101
101
|
export {
|
|
102
102
|
A as T
|
|
103
103
|
};
|
|
104
|
-
//# sourceMappingURL=ThemeSwitch-
|
|
104
|
+
//# sourceMappingURL=ThemeSwitch-Dyt25jza.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeSwitch-
|
|
1
|
+
{"version":3,"file":"ThemeSwitch-Dyt25jza.js","sources":["../src/components/ThemeSwitch/ThemeSwitch.tsx"],"sourcesContent":["import React from 'react';\n\nimport styles from './ThemeSwitch.module.css';\n\n/**\n * Props for the ThemeSwitch component\n */\nexport interface ThemeSwitchProps {\n /** Whether dark mode is currently enabled */\n enableDarkMode: boolean;\n /** Callback function to update the dark mode state */\n setEnableDarkMode: (value: boolean) => void;\n /** Size variant of the switch. Defaults to 'large' */\n size?: 'small' | 'medium' | 'large';\n}\n\n/**\n * ThemeSwitch Component\n *\n * An animated toggle switch for switching between light and dark themes.\n * Features sun/moon icons with animated clouds (light mode) and stars (dark mode).\n *\n * @component\n * @example\n * ```tsx\n * const [darkMode, setDarkMode] = useState(false);\n * <ThemeSwitch\n * enableDarkMode={darkMode}\n * setEnableDarkMode={setDarkMode}\n * size=\"medium\"\n * />\n * ```\n */\nconst ThemeSwitch: React.FC<ThemeSwitchProps> = ({\n enableDarkMode,\n setEnableDarkMode,\n size = 'large'\n}) => {\n const handleToggle = () => {\n setEnableDarkMode(!enableDarkMode);\n };\n\n return (\n <div\n className={`${styles.switchContainer} ${styles[size]} ${\n enableDarkMode ? styles.dark : styles.light\n }`}\n onClick={handleToggle}\n role=\"button\"\n tabIndex={0}\n aria-label={`Switch to ${enableDarkMode ? 'light' : 'dark'} mode`}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n handleToggle();\n }\n }}\n >\n {/* Background elements */}\n <div className={styles.background}>\n {/* Clouds for light mode */}\n <div className={`${styles.cloud} ${styles.cloud1}`}></div>\n <div className={`${styles.cloud} ${styles.cloud2}`}></div>\n <div className={`${styles.cloud} ${styles.cloud3}`}></div>\n\n {/* Stars for dark mode */}\n <div className={`${styles.star} ${styles.star1}`}></div>\n <div className={`${styles.star} ${styles.star2}`}></div>\n <div className={`${styles.star} ${styles.star3}`}></div>\n <div className={`${styles.star} ${styles.star4}`}></div>\n <div className={`${styles.star} ${styles.star5}`}></div>\n <div className={`${styles.star} ${styles.star6}`}></div>\n <div className={`${styles.star} ${styles.star7}`}></div>\n <div className={`${styles.star} ${styles.star8}`}></div>\n </div>\n\n {/* Toggle circle with sun/moon */}\n <div className={styles.toggle}>\n {/* Sun */}\n <div className={styles.sun}>\n <div className={styles.sunCore}>\n <div className={styles.sunspot1}></div>\n <div className={styles.sunspot2}></div>\n <div className={styles.sunspot3}></div>\n </div>\n <div className={styles.sunRay}></div>\n <div className={styles.sunRay}></div>\n <div className={styles.sunRay}></div>\n <div className={styles.sunRay}></div>\n <div className={styles.sunRay}></div>\n <div className={styles.sunRay}></div>\n <div className={styles.sunRay}></div>\n <div className={styles.sunRay}></div>\n </div>\n\n {/* Moon */}\n <div className={styles.moon}>\n <div className={styles.moonCore}>\n <div className={styles.crater1}></div>\n <div className={styles.crater2}></div>\n <div className={styles.crater3}></div>\n <div className={styles.crater4}></div>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default ThemeSwitch;\n"],"names":["ThemeSwitch","enableDarkMode","setEnableDarkMode","size","handleToggle","jsxs","styles","e","jsx"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime"),l="ThemeSwitch-module__sunCore___tUhud",m="ThemeSwitch-module__small___YlvWo",d="ThemeSwitch-module__medium___Q8Rro",r="ThemeSwitch-module__large___BMOxC",n="ThemeSwitch-module__sunspot1___8RI1V",u="ThemeSwitch-module__sunspot2___U0whF",i="ThemeSwitch-module__sunspot3___kWYEI",h="ThemeSwitch-module__sunRay___t1B4U",w="ThemeSwitch-module__rotateSun___JQByd",S="ThemeSwitch-module__switchContainer___VENjU",T="ThemeSwitch-module__dark___a4vSn",N="ThemeSwitch-module__background___Rpodp",x="ThemeSwitch-module__cloud___OoOyx",j="ThemeSwitch-module__light___ddTa2",v="ThemeSwitch-module__cloud1___aqGNx",g="ThemeSwitch-module__floatCloud1___MdWMj",$="ThemeSwitch-module__cloud2___guY71",C="ThemeSwitch-module__floatCloud2___2x6Sp",p="ThemeSwitch-module__cloud3___7-NhR",R="ThemeSwitch-module__floatCloud3___FJCbV",y="ThemeSwitch-module__star___Z98bU",k="ThemeSwitch-module__star1___rhotb",b="ThemeSwitch-module__star2___pzbNR",f="ThemeSwitch-module__star3___iK7lJ",I="ThemeSwitch-module__star4___t5pqN",F="ThemeSwitch-module__star5___dx42N",J="ThemeSwitch-module__star6___wur-I",K="ThemeSwitch-module__star7___KONgd",U="ThemeSwitch-module__star8___gIYpk",O="ThemeSwitch-module__twinkle___Abun5",V="ThemeSwitch-module__toggle___L5FGS",W="ThemeSwitch-module__sun___s8noI",Y="ThemeSwitch-module__moon___TNpFJ",q="ThemeSwitch-module__moonCore___svwjb",B="ThemeSwitch-module__crater1___swpHc",E="ThemeSwitch-module__crater2___WQVKR",Q="ThemeSwitch-module__crater3___F-KJu",G="ThemeSwitch-module__crater4___ZsIb7",s={sunCore:l,small:m,medium:d,large:r,sunspot1:n,sunspot2:u,sunspot3:i,sunRay:h,rotateSun:w,switchContainer:S,dark:T,background:N,cloud:x,light:j,cloud1:v,floatCloud1:g,cloud2:$,floatCloud2:C,cloud3:p,floatCloud3:R,star:y,star1:k,star2:b,star3:f,star4:I,star5:F,star6:J,star7:K,star8:U,twinkle:O,toggle:V,sun:W,moon:Y,moonCore:q,crater1:B,crater2:E,crater3:Q,crater4:G},Z=({enableDarkMode:t,setEnableDarkMode:a,size:c="large"})=>{const _=()=>{a(!t)};return e.jsxs("div",{className:`${s.switchContainer} ${s[c]} ${t?s.dark:s.light}`,onClick:_,role:"button",tabIndex:0,"aria-label":`Switch to ${t?"light":"dark"} mode`,onKeyDown:o=>{(o.key==="Enter"||o.key===" ")&&_()},children:[e.jsxs("div",{className:s.background,children:[e.jsx("div",{className:`${s.cloud} ${s.cloud1}`}),e.jsx("div",{className:`${s.cloud} ${s.cloud2}`}),e.jsx("div",{className:`${s.cloud} ${s.cloud3}`}),e.jsx("div",{className:`${s.star} ${s.star1}`}),e.jsx("div",{className:`${s.star} ${s.star2}`}),e.jsx("div",{className:`${s.star} ${s.star3}`}),e.jsx("div",{className:`${s.star} ${s.star4}`}),e.jsx("div",{className:`${s.star} ${s.star5}`}),e.jsx("div",{className:`${s.star} ${s.star6}`}),e.jsx("div",{className:`${s.star} ${s.star7}`}),e.jsx("div",{className:`${s.star} ${s.star8}`})]}),e.jsxs("div",{className:s.toggle,children:[e.jsxs("div",{className:s.sun,children:[e.jsxs("div",{className:s.sunCore,children:[e.jsx("div",{className:s.sunspot1}),e.jsx("div",{className:s.sunspot2}),e.jsx("div",{className:s.sunspot3})]}),e.jsx("div",{className:s.sunRay}),e.jsx("div",{className:s.sunRay}),e.jsx("div",{className:s.sunRay}),e.jsx("div",{className:s.sunRay}),e.jsx("div",{className:s.sunRay}),e.jsx("div",{className:s.sunRay}),e.jsx("div",{className:s.sunRay}),e.jsx("div",{className:s.sunRay})]}),e.jsx("div",{className:s.moon,children:e.jsxs("div",{className:s.moonCore,children:[e.jsx("div",{className:s.crater1}),e.jsx("div",{className:s.crater2}),e.jsx("div",{className:s.crater3}),e.jsx("div",{className:s.crater4})]})})]})]})};exports.ThemeSwitch=Z;
|
|
2
|
+
//# sourceMappingURL=ThemeSwitch-qivD2U8S.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeSwitch-
|
|
1
|
+
{"version":3,"file":"ThemeSwitch-qivD2U8S.cjs","sources":["../src/components/ThemeSwitch/ThemeSwitch.tsx"],"sourcesContent":["import React from 'react';\n\nimport styles from './ThemeSwitch.module.css';\n\n/**\n * Props for the ThemeSwitch component\n */\nexport interface ThemeSwitchProps {\n /** Whether dark mode is currently enabled */\n enableDarkMode: boolean;\n /** Callback function to update the dark mode state */\n setEnableDarkMode: (value: boolean) => void;\n /** Size variant of the switch. Defaults to 'large' */\n size?: 'small' | 'medium' | 'large';\n}\n\n/**\n * ThemeSwitch Component\n *\n * An animated toggle switch for switching between light and dark themes.\n * Features sun/moon icons with animated clouds (light mode) and stars (dark mode).\n *\n * @component\n * @example\n * ```tsx\n * const [darkMode, setDarkMode] = useState(false);\n * <ThemeSwitch\n * enableDarkMode={darkMode}\n * setEnableDarkMode={setDarkMode}\n * size=\"medium\"\n * />\n * ```\n */\nconst ThemeSwitch: React.FC<ThemeSwitchProps> = ({\n enableDarkMode,\n setEnableDarkMode,\n size = 'large'\n}) => {\n const handleToggle = () => {\n setEnableDarkMode(!enableDarkMode);\n };\n\n return (\n <div\n className={`${styles.switchContainer} ${styles[size]} ${\n enableDarkMode ? styles.dark : styles.light\n }`}\n onClick={handleToggle}\n role=\"button\"\n tabIndex={0}\n aria-label={`Switch to ${enableDarkMode ? 'light' : 'dark'} mode`}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n handleToggle();\n }\n }}\n >\n {/* Background elements */}\n <div className={styles.background}>\n {/* Clouds for light mode */}\n <div className={`${styles.cloud} ${styles.cloud1}`}></div>\n <div className={`${styles.cloud} ${styles.cloud2}`}></div>\n <div className={`${styles.cloud} ${styles.cloud3}`}></div>\n\n {/* Stars for dark mode */}\n <div className={`${styles.star} ${styles.star1}`}></div>\n <div className={`${styles.star} ${styles.star2}`}></div>\n <div className={`${styles.star} ${styles.star3}`}></div>\n <div className={`${styles.star} ${styles.star4}`}></div>\n <div className={`${styles.star} ${styles.star5}`}></div>\n <div className={`${styles.star} ${styles.star6}`}></div>\n <div className={`${styles.star} ${styles.star7}`}></div>\n <div className={`${styles.star} ${styles.star8}`}></div>\n </div>\n\n {/* Toggle circle with sun/moon */}\n <div className={styles.toggle}>\n {/* Sun */}\n <div className={styles.sun}>\n <div className={styles.sunCore}>\n <div className={styles.sunspot1}></div>\n <div className={styles.sunspot2}></div>\n <div className={styles.sunspot3}></div>\n </div>\n <div className={styles.sunRay}></div>\n <div className={styles.sunRay}></div>\n <div className={styles.sunRay}></div>\n <div className={styles.sunRay}></div>\n <div className={styles.sunRay}></div>\n <div className={styles.sunRay}></div>\n <div className={styles.sunRay}></div>\n <div className={styles.sunRay}></div>\n </div>\n\n {/* Moon */}\n <div className={styles.moon}>\n <div className={styles.moonCore}>\n <div className={styles.crater1}></div>\n <div className={styles.crater2}></div>\n <div className={styles.crater3}></div>\n <div className={styles.crater4}></div>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default ThemeSwitch;\n"],"names":["ThemeSwitch","enableDarkMode","setEnableDarkMode","size","handleToggle","jsxs","styles","e","jsx"],"mappings":"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"}
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./MarkdownRender-C-bSlM80.cjs"),r=require("./ThemeSwitch-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./MarkdownRender-C-bSlM80.cjs"),r=require("./ThemeSwitch-qivD2U8S.cjs");exports.MarkdownRender=e.MarkdownRender;exports.ThemeSwitch=r.ThemeSwitch;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.js
CHANGED
package/dist/theme-switch.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ThemeSwitch-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./ThemeSwitch-qivD2U8S.cjs");exports.ThemeSwitch=e.ThemeSwitch;
|
|
2
2
|
//# sourceMappingURL=theme-switch.cjs.map
|
package/dist/theme-switch.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@macolmenerori/component-library",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [],
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
"default": "./dist/theme-switch.cjs"
|
|
38
38
|
}
|
|
39
39
|
},
|
|
40
|
+
"./theme-switch-css": "./dist/ThemeSwitch.css",
|
|
40
41
|
"./markdown-render": {
|
|
41
42
|
"import": {
|
|
42
43
|
"types": "./dist/types/components/MarkdownRender/index.d.ts",
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";require('./ThemeSwitch.css');const e=require("react/jsx-runtime"),l="ThemeSwitch-module__sunCore___tUhud",m="ThemeSwitch-module__small___YlvWo",d="ThemeSwitch-module__medium___Q8Rro",r="ThemeSwitch-module__large___BMOxC",n="ThemeSwitch-module__sunspot1___8RI1V",u="ThemeSwitch-module__sunspot2___U0whF",i="ThemeSwitch-module__sunspot3___kWYEI",h="ThemeSwitch-module__sunRay___t1B4U",w="ThemeSwitch-module__rotateSun___JQByd",S="ThemeSwitch-module__switchContainer___VENjU",T="ThemeSwitch-module__dark___a4vSn",N="ThemeSwitch-module__background___Rpodp",x="ThemeSwitch-module__cloud___OoOyx",j="ThemeSwitch-module__light___ddTa2",v="ThemeSwitch-module__cloud1___aqGNx",g="ThemeSwitch-module__floatCloud1___MdWMj",$="ThemeSwitch-module__cloud2___guY71",C="ThemeSwitch-module__floatCloud2___2x6Sp",p="ThemeSwitch-module__cloud3___7-NhR",R="ThemeSwitch-module__floatCloud3___FJCbV",y="ThemeSwitch-module__star___Z98bU",k="ThemeSwitch-module__star1___rhotb",b="ThemeSwitch-module__star2___pzbNR",f="ThemeSwitch-module__star3___iK7lJ",I="ThemeSwitch-module__star4___t5pqN",F="ThemeSwitch-module__star5___dx42N",J="ThemeSwitch-module__star6___wur-I",K="ThemeSwitch-module__star7___KONgd",U="ThemeSwitch-module__star8___gIYpk",O="ThemeSwitch-module__twinkle___Abun5",V="ThemeSwitch-module__toggle___L5FGS",W="ThemeSwitch-module__sun___s8noI",Y="ThemeSwitch-module__moon___TNpFJ",q="ThemeSwitch-module__moonCore___svwjb",B="ThemeSwitch-module__crater1___swpHc",E="ThemeSwitch-module__crater2___WQVKR",Q="ThemeSwitch-module__crater3___F-KJu",G="ThemeSwitch-module__crater4___ZsIb7",s={sunCore:l,small:m,medium:d,large:r,sunspot1:n,sunspot2:u,sunspot3:i,sunRay:h,rotateSun:w,switchContainer:S,dark:T,background:N,cloud:x,light:j,cloud1:v,floatCloud1:g,cloud2:$,floatCloud2:C,cloud3:p,floatCloud3:R,star:y,star1:k,star2:b,star3:f,star4:I,star5:F,star6:J,star7:K,star8:U,twinkle:O,toggle:V,sun:W,moon:Y,moonCore:q,crater1:B,crater2:E,crater3:Q,crater4:G},Z=({enableDarkMode:t,setEnableDarkMode:a,size:c="large"})=>{const _=()=>{a(!t)};return e.jsxs("div",{className:`${s.switchContainer} ${s[c]} ${t?s.dark:s.light}`,onClick:_,role:"button",tabIndex:0,"aria-label":`Switch to ${t?"light":"dark"} mode`,onKeyDown:o=>{(o.key==="Enter"||o.key===" ")&&_()},children:[e.jsxs("div",{className:s.background,children:[e.jsx("div",{className:`${s.cloud} ${s.cloud1}`}),e.jsx("div",{className:`${s.cloud} ${s.cloud2}`}),e.jsx("div",{className:`${s.cloud} ${s.cloud3}`}),e.jsx("div",{className:`${s.star} ${s.star1}`}),e.jsx("div",{className:`${s.star} ${s.star2}`}),e.jsx("div",{className:`${s.star} ${s.star3}`}),e.jsx("div",{className:`${s.star} ${s.star4}`}),e.jsx("div",{className:`${s.star} ${s.star5}`}),e.jsx("div",{className:`${s.star} ${s.star6}`}),e.jsx("div",{className:`${s.star} ${s.star7}`}),e.jsx("div",{className:`${s.star} ${s.star8}`})]}),e.jsxs("div",{className:s.toggle,children:[e.jsxs("div",{className:s.sun,children:[e.jsxs("div",{className:s.sunCore,children:[e.jsx("div",{className:s.sunspot1}),e.jsx("div",{className:s.sunspot2}),e.jsx("div",{className:s.sunspot3})]}),e.jsx("div",{className:s.sunRay}),e.jsx("div",{className:s.sunRay}),e.jsx("div",{className:s.sunRay}),e.jsx("div",{className:s.sunRay}),e.jsx("div",{className:s.sunRay}),e.jsx("div",{className:s.sunRay}),e.jsx("div",{className:s.sunRay}),e.jsx("div",{className:s.sunRay})]}),e.jsx("div",{className:s.moon,children:e.jsxs("div",{className:s.moonCore,children:[e.jsx("div",{className:s.crater1}),e.jsx("div",{className:s.crater2}),e.jsx("div",{className:s.crater3}),e.jsx("div",{className:s.crater4})]})})]})]})};exports.ThemeSwitch=Z;
|
|
2
|
-
//# sourceMappingURL=ThemeSwitch-C7k1_MA4.cjs.map
|
|
File without changes
|