@macolmenerori/component-library 1.0.2 → 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 +39 -18
- package/dist/MarkdownRender-C-bSlM80.cjs +2 -0
- package/dist/MarkdownRender-C-bSlM80.cjs.map +1 -0
- package/dist/MarkdownRender-DLY5lZNG.js +8 -0
- package/dist/MarkdownRender-DLY5lZNG.js.map +1 -0
- package/dist/ThemeSwitch-Dyt25jza.js +104 -0
- package/dist/ThemeSwitch-Dyt25jza.js.map +1 -0
- package/dist/ThemeSwitch-qivD2U8S.cjs +2 -0
- package/dist/ThemeSwitch-qivD2U8S.cjs.map +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +4 -104
- package/dist/index.js.map +1 -1
- package/dist/markdown-render.cjs +2 -0
- package/dist/markdown-render.cjs.map +1 -0
- package/dist/markdown-render.js +5 -0
- package/dist/markdown-render.js.map +1 -0
- package/dist/theme-switch.cjs +2 -0
- package/dist/theme-switch.cjs.map +1 -0
- package/dist/theme-switch.js +5 -0
- package/dist/theme-switch.js.map +1 -0
- package/dist/types/components/MarkdownRender/MarkdownRender.d.ts +13 -0
- package/dist/types/components/MarkdownRender/index.d.ts +2 -0
- package/dist/types/components/ThemeSwitch/ThemeSwitch.d.ts +31 -0
- package/dist/types/components/ThemeSwitch/index.d.ts +2 -0
- package/dist/types/index.d.ts +2 -48
- package/package.json +27 -3
- /package/dist/{index.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 19 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
|
|
|
@@ -133,8 +153,8 @@ This section is for contributors working on the library itself.
|
|
|
133
153
|
|
|
134
154
|
### Prerequisites
|
|
135
155
|
|
|
136
|
-
- Node.js
|
|
137
|
-
- pnpm 10.
|
|
156
|
+
- Node.js 24
|
|
157
|
+
- pnpm 10.25.0
|
|
138
158
|
|
|
139
159
|
### Setup
|
|
140
160
|
|
|
@@ -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
|
|
|
@@ -174,9 +195,9 @@ To publish a new version:
|
|
|
174
195
|
|
|
175
196
|
## Technology Stack
|
|
176
197
|
|
|
177
|
-
- **React** 19.0.0 - UI library
|
|
178
|
-
- **TypeScript**
|
|
179
|
-
- **Vite**
|
|
198
|
+
- **React** 18.0.0 || 19.0.0 - UI library
|
|
199
|
+
- **TypeScript** - Type safety
|
|
200
|
+
- **Vite** - Build tool and dev server
|
|
180
201
|
- **ESLint** - Code linting
|
|
181
202
|
- **Prettier** - Code formatting
|
|
182
203
|
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const r=require("react/jsx-runtime"),s=require("react-markdown"),i=require("remark-gfm"),t=({content:e,className:n})=>r.jsx("div",{className:n,children:r.jsx(s,{remarkPlugins:[i],children:e})});exports.MarkdownRender=t;
|
|
2
|
+
//# sourceMappingURL=MarkdownRender-C-bSlM80.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MarkdownRender-C-bSlM80.cjs","sources":["../src/components/MarkdownRender/MarkdownRender.tsx"],"sourcesContent":["import ReactMarkdown from 'react-markdown';\n\nimport remarkGfm from 'remark-gfm';\n\nexport interface MarkdownProps {\n /** The markdown string to render */\n content: string;\n /** Optional CSS class name for the container */\n className?: string;\n}\n\n/**\n * A component that renders a markdown string as HTML.\n * Supports GitHub Flavored Markdown (GFM) including tables,\n * strikethrough, task lists, and autolinks.\n */\nconst MarkdownRender: React.FC<MarkdownProps> = ({ content, className }) => {\n return (\n <div className={className}>\n <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>\n </div>\n );\n};\n\nexport default MarkdownRender;\n"],"names":["MarkdownRender","content","className","jsx","ReactMarkdown","remarkGfm"],"mappings":"sGAgBMA,EAA0C,CAAC,CAAE,QAAAC,EAAS,UAAAC,KAExDC,EAAAA,IAAC,MAAA,CAAI,UAAAD,EACH,SAAAC,EAAAA,IAACC,EAAA,CAAc,cAAe,CAACC,CAAS,EAAI,SAAAJ,CAAA,CAAQ,CAAA,CACtD"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import m from "react-markdown";
|
|
3
|
+
import n from "remark-gfm";
|
|
4
|
+
const d = ({ content: o, className: e }) => /* @__PURE__ */ r("div", { className: e, children: /* @__PURE__ */ r(m, { remarkPlugins: [n], children: o }) });
|
|
5
|
+
export {
|
|
6
|
+
d as M
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=MarkdownRender-DLY5lZNG.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MarkdownRender-DLY5lZNG.js","sources":["../src/components/MarkdownRender/MarkdownRender.tsx"],"sourcesContent":["import ReactMarkdown from 'react-markdown';\n\nimport remarkGfm from 'remark-gfm';\n\nexport interface MarkdownProps {\n /** The markdown string to render */\n content: string;\n /** Optional CSS class name for the container */\n className?: string;\n}\n\n/**\n * A component that renders a markdown string as HTML.\n * Supports GitHub Flavored Markdown (GFM) including tables,\n * strikethrough, task lists, and autolinks.\n */\nconst MarkdownRender: React.FC<MarkdownProps> = ({ content, className }) => {\n return (\n <div className={className}>\n <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>\n </div>\n );\n};\n\nexport default MarkdownRender;\n"],"names":["MarkdownRender","content","className","jsx","ReactMarkdown","remarkGfm"],"mappings":";;;AAgBA,MAAMA,IAA0C,CAAC,EAAE,SAAAC,GAAS,WAAAC,QAExD,gBAAAC,EAAC,OAAA,EAAI,WAAAD,GACH,UAAA,gBAAAC,EAACC,GAAA,EAAc,eAAe,CAACC,CAAS,GAAI,UAAAJ,EAAA,CAAQ,EAAA,CACtD;"}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import { jsxs as t, jsx as e } from "react/jsx-runtime";
|
|
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
|
+
sunCore: m,
|
|
4
|
+
small: d,
|
|
5
|
+
medium: r,
|
|
6
|
+
large: n,
|
|
7
|
+
sunspot1: u,
|
|
8
|
+
sunspot2: i,
|
|
9
|
+
sunspot3: h,
|
|
10
|
+
sunRay: w,
|
|
11
|
+
rotateSun: S,
|
|
12
|
+
switchContainer: T,
|
|
13
|
+
dark: N,
|
|
14
|
+
background: v,
|
|
15
|
+
cloud: g,
|
|
16
|
+
light: $,
|
|
17
|
+
cloud1: C,
|
|
18
|
+
floatCloud1: p,
|
|
19
|
+
cloud2: y,
|
|
20
|
+
floatCloud2: R,
|
|
21
|
+
cloud3: k,
|
|
22
|
+
floatCloud3: b,
|
|
23
|
+
star: f,
|
|
24
|
+
star1: x,
|
|
25
|
+
star2: I,
|
|
26
|
+
star3: j,
|
|
27
|
+
star4: F,
|
|
28
|
+
star5: J,
|
|
29
|
+
star6: K,
|
|
30
|
+
star7: U,
|
|
31
|
+
star8: O,
|
|
32
|
+
twinkle: V,
|
|
33
|
+
toggle: W,
|
|
34
|
+
sun: Y,
|
|
35
|
+
moon: B,
|
|
36
|
+
moonCore: E,
|
|
37
|
+
crater1: Q,
|
|
38
|
+
crater2: q,
|
|
39
|
+
crater3: G,
|
|
40
|
+
crater4: Z
|
|
41
|
+
}, A = ({
|
|
42
|
+
enableDarkMode: _,
|
|
43
|
+
setEnableDarkMode: c,
|
|
44
|
+
size: l = "large"
|
|
45
|
+
}) => {
|
|
46
|
+
const o = () => {
|
|
47
|
+
c(!_);
|
|
48
|
+
};
|
|
49
|
+
return /* @__PURE__ */ t(
|
|
50
|
+
"div",
|
|
51
|
+
{
|
|
52
|
+
className: `${s.switchContainer} ${s[l]} ${_ ? s.dark : s.light}`,
|
|
53
|
+
onClick: o,
|
|
54
|
+
role: "button",
|
|
55
|
+
tabIndex: 0,
|
|
56
|
+
"aria-label": `Switch to ${_ ? "light" : "dark"} mode`,
|
|
57
|
+
onKeyDown: (a) => {
|
|
58
|
+
(a.key === "Enter" || a.key === " ") && o();
|
|
59
|
+
},
|
|
60
|
+
children: [
|
|
61
|
+
/* @__PURE__ */ t("div", { className: s.background, children: [
|
|
62
|
+
/* @__PURE__ */ e("div", { className: `${s.cloud} ${s.cloud1}` }),
|
|
63
|
+
/* @__PURE__ */ e("div", { className: `${s.cloud} ${s.cloud2}` }),
|
|
64
|
+
/* @__PURE__ */ e("div", { className: `${s.cloud} ${s.cloud3}` }),
|
|
65
|
+
/* @__PURE__ */ e("div", { className: `${s.star} ${s.star1}` }),
|
|
66
|
+
/* @__PURE__ */ e("div", { className: `${s.star} ${s.star2}` }),
|
|
67
|
+
/* @__PURE__ */ e("div", { className: `${s.star} ${s.star3}` }),
|
|
68
|
+
/* @__PURE__ */ e("div", { className: `${s.star} ${s.star4}` }),
|
|
69
|
+
/* @__PURE__ */ e("div", { className: `${s.star} ${s.star5}` }),
|
|
70
|
+
/* @__PURE__ */ e("div", { className: `${s.star} ${s.star6}` }),
|
|
71
|
+
/* @__PURE__ */ e("div", { className: `${s.star} ${s.star7}` }),
|
|
72
|
+
/* @__PURE__ */ e("div", { className: `${s.star} ${s.star8}` })
|
|
73
|
+
] }),
|
|
74
|
+
/* @__PURE__ */ t("div", { className: s.toggle, children: [
|
|
75
|
+
/* @__PURE__ */ t("div", { className: s.sun, children: [
|
|
76
|
+
/* @__PURE__ */ t("div", { className: s.sunCore, children: [
|
|
77
|
+
/* @__PURE__ */ e("div", { className: s.sunspot1 }),
|
|
78
|
+
/* @__PURE__ */ e("div", { className: s.sunspot2 }),
|
|
79
|
+
/* @__PURE__ */ e("div", { className: s.sunspot3 })
|
|
80
|
+
] }),
|
|
81
|
+
/* @__PURE__ */ e("div", { className: s.sunRay }),
|
|
82
|
+
/* @__PURE__ */ e("div", { className: s.sunRay }),
|
|
83
|
+
/* @__PURE__ */ e("div", { className: s.sunRay }),
|
|
84
|
+
/* @__PURE__ */ e("div", { className: s.sunRay }),
|
|
85
|
+
/* @__PURE__ */ e("div", { className: s.sunRay }),
|
|
86
|
+
/* @__PURE__ */ e("div", { className: s.sunRay }),
|
|
87
|
+
/* @__PURE__ */ e("div", { className: s.sunRay }),
|
|
88
|
+
/* @__PURE__ */ e("div", { className: s.sunRay })
|
|
89
|
+
] }),
|
|
90
|
+
/* @__PURE__ */ e("div", { className: s.moon, children: /* @__PURE__ */ t("div", { className: s.moonCore, children: [
|
|
91
|
+
/* @__PURE__ */ e("div", { className: s.crater1 }),
|
|
92
|
+
/* @__PURE__ */ e("div", { className: s.crater2 }),
|
|
93
|
+
/* @__PURE__ */ e("div", { className: s.crater3 }),
|
|
94
|
+
/* @__PURE__ */ e("div", { className: s.crater4 })
|
|
95
|
+
] }) })
|
|
96
|
+
] })
|
|
97
|
+
]
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
};
|
|
101
|
+
export {
|
|
102
|
+
A as T
|
|
103
|
+
};
|
|
104
|
+
//# sourceMappingURL=ThemeSwitch-Dyt25jza.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCMA,IAA0C,CAAC;AAAA,EAC/C,gBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,MAAAC,IAAO;AACT,MAAM;AACJ,QAAMC,IAAe,MAAM;AACzB,IAAAF,EAAkB,CAACD,CAAc;AAAA,EACnC;AAEA,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAGC,EAAO,eAAe,IAAIA,EAAOH,CAAI,CAAC,IAClDF,IAAiBK,EAAO,OAAOA,EAAO,KACxC;AAAA,MACA,SAASF;AAAA,MACT,MAAK;AAAA,MACL,UAAU;AAAA,MACV,cAAY,aAAaH,IAAiB,UAAU,MAAM;AAAA,MAC1D,WAAW,CAACM,MAAM;AAChB,SAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,QACjCH,EAAA;AAAA,MAEJ;AAAA,MAGA,UAAA;AAAA,QAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,YAErB,UAAA;AAAA,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAW,GAAGF,EAAO,KAAK,IAAIA,EAAO,MAAM,GAAA,CAAI;AAAA,UACpD,gBAAAE,EAAC,SAAI,WAAW,GAAGF,EAAO,KAAK,IAAIA,EAAO,MAAM,GAAA,CAAI;AAAA,UACpD,gBAAAE,EAAC,SAAI,WAAW,GAAGF,EAAO,KAAK,IAAIA,EAAO,MAAM,GAAA,CAAI;AAAA,UAGpD,gBAAAE,EAAC,SAAI,WAAW,GAAGF,EAAO,IAAI,IAAIA,EAAO,KAAK,GAAA,CAAI;AAAA,UAClD,gBAAAE,EAAC,SAAI,WAAW,GAAGF,EAAO,IAAI,IAAIA,EAAO,KAAK,GAAA,CAAI;AAAA,UAClD,gBAAAE,EAAC,SAAI,WAAW,GAAGF,EAAO,IAAI,IAAIA,EAAO,KAAK,GAAA,CAAI;AAAA,UAClD,gBAAAE,EAAC,SAAI,WAAW,GAAGF,EAAO,IAAI,IAAIA,EAAO,KAAK,GAAA,CAAI;AAAA,UAClD,gBAAAE,EAAC,SAAI,WAAW,GAAGF,EAAO,IAAI,IAAIA,EAAO,KAAK,GAAA,CAAI;AAAA,UAClD,gBAAAE,EAAC,SAAI,WAAW,GAAGF,EAAO,IAAI,IAAIA,EAAO,KAAK,GAAA,CAAI;AAAA,UAClD,gBAAAE,EAAC,SAAI,WAAW,GAAGF,EAAO,IAAI,IAAIA,EAAO,KAAK,GAAA,CAAI;AAAA,UAClD,gBAAAE,EAAC,SAAI,WAAW,GAAGF,EAAO,IAAI,IAAIA,EAAO,KAAK,GAAA,CAAI;AAAA,QAAA,GACpD;AAAA,QAGA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,QAErB,UAAA;AAAA,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,KACrB,UAAA;AAAA,YAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,SACrB,UAAA;AAAA,cAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,SAAA,CAAU;AAAA,cACjC,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,SAAA,CAAU;AAAA,cACjC,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,SAAA,CAAU;AAAA,YAAA,GACnC;AAAA,YACA,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,OAAA,CAAQ;AAAA,YAC/B,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,OAAA,CAAQ;AAAA,YAC/B,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,OAAA,CAAQ;AAAA,YAC/B,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,OAAA,CAAQ;AAAA,YAC/B,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,OAAA,CAAQ;AAAA,YAC/B,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,OAAA,CAAQ;AAAA,YAC/B,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,OAAA,CAAQ;AAAA,YAC/B,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,OAAA,CAAQ;AAAA,UAAA,GACjC;AAAA,UAGA,gBAAAE,EAAC,SAAI,WAAWF,EAAO,MACrB,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,UACrB,UAAA;AAAA,YAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,QAAA,CAAS;AAAA,YAChC,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,QAAA,CAAS;AAAA,YAChC,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,QAAA,CAAS;AAAA,YAChC,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,QAAA,CAAS;AAAA,UAAA,EAAA,CAClC,EAAA,CACF;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -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
|
|
@@ -0,0 +1 @@
|
|
|
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"});
|
|
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.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/dist/index.js
CHANGED
|
@@ -1,107 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import m from "
|
|
3
|
-
import r from "remark-gfm";
|
|
4
|
-
import './index.css';const d = "ThemeSwitch-module__sunCore___tUhud", n = "ThemeSwitch-module__small___YlvWo", u = "ThemeSwitch-module__medium___Q8Rro", i = "ThemeSwitch-module__large___BMOxC", h = "ThemeSwitch-module__sunspot1___8RI1V", w = "ThemeSwitch-module__sunspot2___U0whF", S = "ThemeSwitch-module__sunspot3___kWYEI", T = "ThemeSwitch-module__sunRay___t1B4U", N = "ThemeSwitch-module__rotateSun___JQByd", v = "ThemeSwitch-module__switchContainer___VENjU", g = "ThemeSwitch-module__dark___a4vSn", $ = "ThemeSwitch-module__background___Rpodp", p = "ThemeSwitch-module__cloud___OoOyx", C = "ThemeSwitch-module__light___ddTa2", k = "ThemeSwitch-module__cloud1___aqGNx", R = "ThemeSwitch-module__floatCloud1___MdWMj", y = "ThemeSwitch-module__cloud2___guY71", f = "ThemeSwitch-module__floatCloud2___2x6Sp", b = "ThemeSwitch-module__cloud3___7-NhR", x = "ThemeSwitch-module__floatCloud3___FJCbV", I = "ThemeSwitch-module__star___Z98bU", j = "ThemeSwitch-module__star1___rhotb", F = "ThemeSwitch-module__star2___pzbNR", J = "ThemeSwitch-module__star3___iK7lJ", K = "ThemeSwitch-module__star4___t5pqN", U = "ThemeSwitch-module__star5___dx42N", O = "ThemeSwitch-module__star6___wur-I", V = "ThemeSwitch-module__star7___KONgd", W = "ThemeSwitch-module__star8___gIYpk", Y = "ThemeSwitch-module__twinkle___Abun5", B = "ThemeSwitch-module__toggle___L5FGS", E = "ThemeSwitch-module__sun___s8noI", G = "ThemeSwitch-module__moon___TNpFJ", M = "ThemeSwitch-module__moonCore___svwjb", Q = "ThemeSwitch-module__crater1___swpHc", q = "ThemeSwitch-module__crater2___WQVKR", Z = "ThemeSwitch-module__crater3___F-KJu", z = "ThemeSwitch-module__crater4___ZsIb7", e = {
|
|
5
|
-
sunCore: d,
|
|
6
|
-
small: n,
|
|
7
|
-
medium: u,
|
|
8
|
-
large: i,
|
|
9
|
-
sunspot1: h,
|
|
10
|
-
sunspot2: w,
|
|
11
|
-
sunspot3: S,
|
|
12
|
-
sunRay: T,
|
|
13
|
-
rotateSun: N,
|
|
14
|
-
switchContainer: v,
|
|
15
|
-
dark: g,
|
|
16
|
-
background: $,
|
|
17
|
-
cloud: p,
|
|
18
|
-
light: C,
|
|
19
|
-
cloud1: k,
|
|
20
|
-
floatCloud1: R,
|
|
21
|
-
cloud2: y,
|
|
22
|
-
floatCloud2: f,
|
|
23
|
-
cloud3: b,
|
|
24
|
-
floatCloud3: x,
|
|
25
|
-
star: I,
|
|
26
|
-
star1: j,
|
|
27
|
-
star2: F,
|
|
28
|
-
star3: J,
|
|
29
|
-
star4: K,
|
|
30
|
-
star5: U,
|
|
31
|
-
star6: O,
|
|
32
|
-
star7: V,
|
|
33
|
-
star8: W,
|
|
34
|
-
twinkle: Y,
|
|
35
|
-
toggle: B,
|
|
36
|
-
sun: E,
|
|
37
|
-
moon: G,
|
|
38
|
-
moonCore: M,
|
|
39
|
-
crater1: Q,
|
|
40
|
-
crater2: q,
|
|
41
|
-
crater3: Z,
|
|
42
|
-
crater4: z
|
|
43
|
-
}, P = ({ content: _, className: o }) => /* @__PURE__ */ s("div", { className: o, children: /* @__PURE__ */ s(m, { remarkPlugins: [r], children: _ }) }), X = ({
|
|
44
|
-
enableDarkMode: _,
|
|
45
|
-
setEnableDarkMode: o,
|
|
46
|
-
size: l = "large"
|
|
47
|
-
}) => {
|
|
48
|
-
const a = () => {
|
|
49
|
-
o(!_);
|
|
50
|
-
};
|
|
51
|
-
return /* @__PURE__ */ t(
|
|
52
|
-
"div",
|
|
53
|
-
{
|
|
54
|
-
className: `${e.switchContainer} ${e[l]} ${_ ? e.dark : e.light}`,
|
|
55
|
-
onClick: a,
|
|
56
|
-
role: "button",
|
|
57
|
-
tabIndex: 0,
|
|
58
|
-
"aria-label": `Switch to ${_ ? "light" : "dark"} mode`,
|
|
59
|
-
onKeyDown: (c) => {
|
|
60
|
-
(c.key === "Enter" || c.key === " ") && a();
|
|
61
|
-
},
|
|
62
|
-
children: [
|
|
63
|
-
/* @__PURE__ */ t("div", { className: e.background, children: [
|
|
64
|
-
/* @__PURE__ */ s("div", { className: `${e.cloud} ${e.cloud1}` }),
|
|
65
|
-
/* @__PURE__ */ s("div", { className: `${e.cloud} ${e.cloud2}` }),
|
|
66
|
-
/* @__PURE__ */ s("div", { className: `${e.cloud} ${e.cloud3}` }),
|
|
67
|
-
/* @__PURE__ */ s("div", { className: `${e.star} ${e.star1}` }),
|
|
68
|
-
/* @__PURE__ */ s("div", { className: `${e.star} ${e.star2}` }),
|
|
69
|
-
/* @__PURE__ */ s("div", { className: `${e.star} ${e.star3}` }),
|
|
70
|
-
/* @__PURE__ */ s("div", { className: `${e.star} ${e.star4}` }),
|
|
71
|
-
/* @__PURE__ */ s("div", { className: `${e.star} ${e.star5}` }),
|
|
72
|
-
/* @__PURE__ */ s("div", { className: `${e.star} ${e.star6}` }),
|
|
73
|
-
/* @__PURE__ */ s("div", { className: `${e.star} ${e.star7}` }),
|
|
74
|
-
/* @__PURE__ */ s("div", { className: `${e.star} ${e.star8}` })
|
|
75
|
-
] }),
|
|
76
|
-
/* @__PURE__ */ t("div", { className: e.toggle, children: [
|
|
77
|
-
/* @__PURE__ */ t("div", { className: e.sun, children: [
|
|
78
|
-
/* @__PURE__ */ t("div", { className: e.sunCore, children: [
|
|
79
|
-
/* @__PURE__ */ s("div", { className: e.sunspot1 }),
|
|
80
|
-
/* @__PURE__ */ s("div", { className: e.sunspot2 }),
|
|
81
|
-
/* @__PURE__ */ s("div", { className: e.sunspot3 })
|
|
82
|
-
] }),
|
|
83
|
-
/* @__PURE__ */ s("div", { className: e.sunRay }),
|
|
84
|
-
/* @__PURE__ */ s("div", { className: e.sunRay }),
|
|
85
|
-
/* @__PURE__ */ s("div", { className: e.sunRay }),
|
|
86
|
-
/* @__PURE__ */ s("div", { className: e.sunRay }),
|
|
87
|
-
/* @__PURE__ */ s("div", { className: e.sunRay }),
|
|
88
|
-
/* @__PURE__ */ s("div", { className: e.sunRay }),
|
|
89
|
-
/* @__PURE__ */ s("div", { className: e.sunRay }),
|
|
90
|
-
/* @__PURE__ */ s("div", { className: e.sunRay })
|
|
91
|
-
] }),
|
|
92
|
-
/* @__PURE__ */ s("div", { className: e.moon, children: /* @__PURE__ */ t("div", { className: e.moonCore, children: [
|
|
93
|
-
/* @__PURE__ */ s("div", { className: e.crater1 }),
|
|
94
|
-
/* @__PURE__ */ s("div", { className: e.crater2 }),
|
|
95
|
-
/* @__PURE__ */ s("div", { className: e.crater3 }),
|
|
96
|
-
/* @__PURE__ */ s("div", { className: e.crater4 })
|
|
97
|
-
] }) })
|
|
98
|
-
] })
|
|
99
|
-
]
|
|
100
|
-
}
|
|
101
|
-
);
|
|
102
|
-
};
|
|
1
|
+
import { M as o } from "./MarkdownRender-DLY5lZNG.js";
|
|
2
|
+
import { T as m } from "./ThemeSwitch-Dyt25jza.js";
|
|
103
3
|
export {
|
|
104
|
-
|
|
105
|
-
|
|
4
|
+
o as MarkdownRender,
|
|
5
|
+
m as ThemeSwitch
|
|
106
6
|
};
|
|
107
7
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"markdown-render.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"markdown-render.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme-switch.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme-switch.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export interface MarkdownProps {
|
|
2
|
+
/** The markdown string to render */
|
|
3
|
+
content: string;
|
|
4
|
+
/** Optional CSS class name for the container */
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* A component that renders a markdown string as HTML.
|
|
9
|
+
* Supports GitHub Flavored Markdown (GFM) including tables,
|
|
10
|
+
* strikethrough, task lists, and autolinks.
|
|
11
|
+
*/
|
|
12
|
+
declare const MarkdownRender: React.FC<MarkdownProps>;
|
|
13
|
+
export default MarkdownRender;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Props for the ThemeSwitch component
|
|
4
|
+
*/
|
|
5
|
+
export interface ThemeSwitchProps {
|
|
6
|
+
/** Whether dark mode is currently enabled */
|
|
7
|
+
enableDarkMode: boolean;
|
|
8
|
+
/** Callback function to update the dark mode state */
|
|
9
|
+
setEnableDarkMode: (value: boolean) => void;
|
|
10
|
+
/** Size variant of the switch. Defaults to 'large' */
|
|
11
|
+
size?: 'small' | 'medium' | 'large';
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* ThemeSwitch Component
|
|
15
|
+
*
|
|
16
|
+
* An animated toggle switch for switching between light and dark themes.
|
|
17
|
+
* Features sun/moon icons with animated clouds (light mode) and stars (dark mode).
|
|
18
|
+
*
|
|
19
|
+
* @component
|
|
20
|
+
* @example
|
|
21
|
+
* ```tsx
|
|
22
|
+
* const [darkMode, setDarkMode] = useState(false);
|
|
23
|
+
* <ThemeSwitch
|
|
24
|
+
* enableDarkMode={darkMode}
|
|
25
|
+
* setEnableDarkMode={setDarkMode}
|
|
26
|
+
* size="medium"
|
|
27
|
+
* />
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
30
|
+
declare const ThemeSwitch: React.FC<ThemeSwitchProps>;
|
|
31
|
+
export default ThemeSwitch;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,48 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export declare interface MarkdownProps {
|
|
4
|
-
/** The markdown string to render */
|
|
5
|
-
content: string;
|
|
6
|
-
/** Optional CSS class name for the container */
|
|
7
|
-
className?: string;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* A component that renders a markdown string as HTML.
|
|
12
|
-
* Supports GitHub Flavored Markdown (GFM) including tables,
|
|
13
|
-
* strikethrough, task lists, and autolinks.
|
|
14
|
-
*/
|
|
15
|
-
export declare const MarkdownRender: React.FC<MarkdownProps>;
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* ThemeSwitch Component
|
|
19
|
-
*
|
|
20
|
-
* An animated toggle switch for switching between light and dark themes.
|
|
21
|
-
* Features sun/moon icons with animated clouds (light mode) and stars (dark mode).
|
|
22
|
-
*
|
|
23
|
-
* @component
|
|
24
|
-
* @example
|
|
25
|
-
* ```tsx
|
|
26
|
-
* const [darkMode, setDarkMode] = useState(false);
|
|
27
|
-
* <ThemeSwitch
|
|
28
|
-
* enableDarkMode={darkMode}
|
|
29
|
-
* setEnableDarkMode={setDarkMode}
|
|
30
|
-
* size="medium"
|
|
31
|
-
* />
|
|
32
|
-
* ```
|
|
33
|
-
*/
|
|
34
|
-
export declare const ThemeSwitch: default_2.FC<ThemeSwitchProps>;
|
|
35
|
-
|
|
36
|
-
/**
|
|
37
|
-
* Props for the ThemeSwitch component
|
|
38
|
-
*/
|
|
39
|
-
declare interface ThemeSwitchProps {
|
|
40
|
-
/** Whether dark mode is currently enabled */
|
|
41
|
-
enableDarkMode: boolean;
|
|
42
|
-
/** Callback function to update the dark mode state */
|
|
43
|
-
setEnableDarkMode: (value: boolean) => void;
|
|
44
|
-
/** Size variant of the switch. Defaults to 'large' */
|
|
45
|
-
size?: 'small' | 'medium' | 'large';
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
export { }
|
|
1
|
+
export * from './components/MarkdownRender';
|
|
2
|
+
export * from './components/ThemeSwitch';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@macolmenerori/component-library",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [],
|
|
@@ -26,8 +26,32 @@
|
|
|
26
26
|
"types": "./dist/types/index.d.ts",
|
|
27
27
|
"default": "./dist/index.cjs"
|
|
28
28
|
}
|
|
29
|
+
},
|
|
30
|
+
"./theme-switch": {
|
|
31
|
+
"import": {
|
|
32
|
+
"types": "./dist/types/components/ThemeSwitch/index.d.ts",
|
|
33
|
+
"default": "./dist/theme-switch.js"
|
|
34
|
+
},
|
|
35
|
+
"require": {
|
|
36
|
+
"types": "./dist/types/components/ThemeSwitch/index.d.ts",
|
|
37
|
+
"default": "./dist/theme-switch.cjs"
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
"./theme-switch-css": "./dist/ThemeSwitch.css",
|
|
41
|
+
"./markdown-render": {
|
|
42
|
+
"import": {
|
|
43
|
+
"types": "./dist/types/components/MarkdownRender/index.d.ts",
|
|
44
|
+
"default": "./dist/markdown-render.js"
|
|
45
|
+
},
|
|
46
|
+
"require": {
|
|
47
|
+
"types": "./dist/types/components/MarkdownRender/index.d.ts",
|
|
48
|
+
"default": "./dist/markdown-render.cjs"
|
|
49
|
+
}
|
|
29
50
|
}
|
|
30
51
|
},
|
|
52
|
+
"sideEffects": [
|
|
53
|
+
"**/*.css"
|
|
54
|
+
],
|
|
31
55
|
"files": [
|
|
32
56
|
"dist"
|
|
33
57
|
],
|
|
@@ -36,8 +60,8 @@
|
|
|
36
60
|
"access": "public"
|
|
37
61
|
},
|
|
38
62
|
"peerDependencies": {
|
|
39
|
-
"react": "^19.
|
|
40
|
-
"react-dom": "^19.
|
|
63
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
64
|
+
"react-dom": "^18.0.0 || ^19.0.0",
|
|
41
65
|
"react-markdown": "^10.0.0",
|
|
42
66
|
"remark-gfm": "^4.0.0"
|
|
43
67
|
},
|
|
File without changes
|