@macolmenerori/component-library 1.0.2 → 1.1.0
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 +6 -6
- 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-C7k1_MA4.cjs +2 -0
- package/dist/ThemeSwitch-C7k1_MA4.cjs.map +1 -0
- package/dist/ThemeSwitch-DbaEio36.js +104 -0
- package/dist/ThemeSwitch-DbaEio36.js.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 +26 -3
- /package/dist/{index.css → ThemeSwitch.css} +0 -0
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ A modern React component library built with TypeScript, providing reusable UI co
|
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
|
-
- Built with React
|
|
7
|
+
- Built with React and TypeScript
|
|
8
8
|
- Fully typed components with TypeScript declarations
|
|
9
9
|
- ESM and CommonJS support
|
|
10
10
|
- Tree-shakeable exports
|
|
@@ -133,8 +133,8 @@ This section is for contributors working on the library itself.
|
|
|
133
133
|
|
|
134
134
|
### Prerequisites
|
|
135
135
|
|
|
136
|
-
- Node.js
|
|
137
|
-
- pnpm 10.
|
|
136
|
+
- Node.js 24
|
|
137
|
+
- pnpm 10.25.0
|
|
138
138
|
|
|
139
139
|
### Setup
|
|
140
140
|
|
|
@@ -174,9 +174,9 @@ To publish a new version:
|
|
|
174
174
|
|
|
175
175
|
## Technology Stack
|
|
176
176
|
|
|
177
|
-
- **React** 19.0.0 - UI library
|
|
178
|
-
- **TypeScript**
|
|
179
|
-
- **Vite**
|
|
177
|
+
- **React** 18.0.0 || 19.0.0 - UI library
|
|
178
|
+
- **TypeScript** - Type safety
|
|
179
|
+
- **Vite** - Build tool and dev server
|
|
180
180
|
- **ESLint** - Code linting
|
|
181
181
|
- **Prettier** - Code formatting
|
|
182
182
|
|
|
@@ -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,2 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeSwitch-C7k1_MA4.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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"}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import { jsxs as t, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import './ThemeSwitch.css';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-DbaEio36.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeSwitch-DbaEio36.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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"}
|
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-C7k1_MA4.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-DbaEio36.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.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [],
|
|
@@ -26,8 +26,31 @@
|
|
|
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
|
+
"./markdown-render": {
|
|
41
|
+
"import": {
|
|
42
|
+
"types": "./dist/types/components/MarkdownRender/index.d.ts",
|
|
43
|
+
"default": "./dist/markdown-render.js"
|
|
44
|
+
},
|
|
45
|
+
"require": {
|
|
46
|
+
"types": "./dist/types/components/MarkdownRender/index.d.ts",
|
|
47
|
+
"default": "./dist/markdown-render.cjs"
|
|
48
|
+
}
|
|
29
49
|
}
|
|
30
50
|
},
|
|
51
|
+
"sideEffects": [
|
|
52
|
+
"**/*.css"
|
|
53
|
+
],
|
|
31
54
|
"files": [
|
|
32
55
|
"dist"
|
|
33
56
|
],
|
|
@@ -36,8 +59,8 @@
|
|
|
36
59
|
"access": "public"
|
|
37
60
|
},
|
|
38
61
|
"peerDependencies": {
|
|
39
|
-
"react": "^19.
|
|
40
|
-
"react-dom": "^19.
|
|
62
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
63
|
+
"react-dom": "^18.0.0 || ^19.0.0",
|
|
41
64
|
"react-markdown": "^10.0.0",
|
|
42
65
|
"remark-gfm": "^4.0.0"
|
|
43
66
|
},
|
|
File without changes
|