@macolmenerori/component-library 0.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Miguel Angel Colmenero Rincon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,127 @@
+# @macolmenerori/component-library
+
+A modern React component library built with TypeScript, providing reusable UI components for your React applications.
+
+## Features
+
+- Built with React 19 and TypeScript
+- Fully typed components with TypeScript declarations
+- ESM and CommonJS support
+- Tree-shakeable exports
+- Strict TypeScript configuration for type safety
+
+## Installation
+
+This package is published to GitHub Packages. To install it in your project, you need to configure npm to use GitHub Packages for the `@macolmenerori` scope.
+
+Create or update a `.npmrc` file in your project root with the following content:
+
+```
+@macolmenerori:registry=https://npm.pkg.github.com
+```
+
+Then install the package:
+
+Using npm:
+
+```bash
+npm install @macolmenerori/component-library
+```
+
+Using pnpm:
+
+```bash
+pnpm add @macolmenerori/component-library
+```
+
+Using yarn:
+
+```bash
+yarn add @macolmenerori/component-library
+```
+
+## Usage
+
+Import components from the library:
+
+```tsx
+import { ThemeSwitch } from '@macolmenerori/component-library';
+
+function App() {
+  return (
+    <div>
+      <ThemeSwitch />
+    </div>
+  );
+}
+```
+
+## Peer Dependencies
+
+This library requires the following peer dependencies:
+
+- React: ^18.0.0 or ^19.0.0
+- React DOM: ^18.0.0 or ^19.0.0
+
+Make sure these are installed in your project.
+
+## Development
+
+This section is for contributors working on the library itself.
+
+### Prerequisites
+
+- Node.js >= 22.0.0 and < 23.0.0
+- pnpm 10.19.0
+
+### Setup
+
+```bash
+pnpm install
+```
+
+### Available Scripts
+
+- `pnpm dev` - Start the development server on port 3000
+- `pnpm build` - Build the library for distribution
+- `pnpm preview` - Preview the production build
+- `pnpm prettify` - Format code with Prettier
+- `pnpm lint` - Lint code with ESLint
+- `pnpm types` - Type check with TypeScript
+
+### Building
+
+To build the library:
+
+```bash
+pnpm build
+```
+
+This will generate:
+
+- ESM bundle at `dist/index.js`
+- CommonJS bundle at `dist/index.cjs`
+- TypeScript declarations at `dist/types/`
+
+### Publishing
+
+To publish a new version:
+
+1. Build the library: `pnpm build`
+2. Publish: `pnpm publish`
+
+## Technology Stack
+
+- **React** 19.0.0 - UI library
+- **TypeScript** 5.7.3 - Type safety
+- **Vite** 7.0.5 - Build tool and dev server
+- **ESLint** - Code linting
+- **Prettier** - Code formatting
+
+## License
+
+MIT
+
+## Repository
+
+[https://github.com/macolmenerori/component-library](https://github.com/macolmenerori/component-library)

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.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",y="ThemeSwitch-module__floatCloud3___FJCbV",R="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",O="ThemeSwitch-module__star8___gIYpk",U="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:y,star:R,star1:k,star2:b,star3:f,star4:I,star5:F,star6:J,star7:K,star8:O,twinkle:U,toggle:V,sun:W,moon:Y,moonCore:q,crater1:B,crater2:E,crater3:Q,crater4:G},M=({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=M;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.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 */\ninterface 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.css

@@ -0,0 +1 @@
+.ThemeSwitch-module__sunCore___tUhud{position:relative;background:radial-gradient(circle,gold,orange);border-radius:50%}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__sunCore___tUhud{width:16px;height:16px;box-shadow:inset -1px -1px 2px #ff8c0080}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__sunCore___tUhud{width:24px;height:24px;box-shadow:inset -1.5px -1.5px 3px #ff8c0080}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__sunCore___tUhud{width:32px;height:32px;box-shadow:inset -2px -2px 4px #ff8c0080}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__sunspot1___8RI1V{position:absolute;width:2px;height:2px;background:#ff8c0099;border-radius:50%;top:4px;left:5px}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__sunspot2___U0whF{position:absolute;width:1.5px;height:1.5px;background:#ff8c0080;border-radius:50%;bottom:5px;right:4px}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__sunspot3___kWYEI{position:absolute;width:1px;height:1px;background:#ff8c0066;border-radius:50%;top:6px;right:6px}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__sunspot1___8RI1V{position:absolute;width:3px;height:3px;background:#ff8c0099;border-radius:50%;top:6px;left:7.5px}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__sunspot2___U0whF{position:absolute;width:2.25px;height:2.25px;background:#ff8c0080;border-radius:50%;bottom:7.5px;right:6px}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__sunspot3___kWYEI{position:absolute;width:1.5px;height:1.5px;background:#ff8c0066;border-radius:50%;top:9px;right:9px}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__sunspot1___8RI1V{position:absolute;width:4px;height:4px;background:#ff8c0099;border-radius:50%;top:8px;left:10px}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__sunspot2___U0whF{position:absolute;width:3px;height:3px;background:#ff8c0080;border-radius:50%;bottom:10px;right:8px}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__sunspot3___kWYEI{position:absolute;width:2px;height:2px;background:#ff8c0066;border-radius:50%;top:12px;right:12px}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__sunRay___t1B4U{position:absolute;background:linear-gradient(90deg,transparent,#ffd700,transparent);animation:ThemeSwitch-module__rotateSun___JQByd 10s linear infinite}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__sunRay___t1B4U:nth-child(2){width:20px;height:1px;top:50%;left:50%;transform:translate(-50%,-50%)}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__sunRay___t1B4U:nth-child(3){width:1px;height:20px;top:50%;left:50%;transform:translate(-50%,-50%)}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__sunRay___t1B4U:nth-child(4){width:20px;height:1px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg)}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__sunRay___t1B4U:nth-child(5){width:20px;height:1px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg)}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__sunRay___t1B4U:nth-child(6),.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__sunRay___t1B4U:nth-child(7),.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__sunRay___t1B4U:nth-child(8),.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__sunRay___t1B4U:nth-child(9){display:none}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__sunRay___t1B4U{position:absolute;background:linear-gradient(90deg,transparent,#ffd700,transparent);animation:ThemeSwitch-module__rotateSun___JQByd 10s linear infinite}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__sunRay___t1B4U:nth-child(2){width:30px;height:1.5px;top:50%;left:50%;transform:translate(-50%,-50%)}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__sunRay___t1B4U:nth-child(3){width:1.5px;height:30px;top:50%;left:50%;transform:translate(-50%,-50%)}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__sunRay___t1B4U:nth-child(4){width:30px;height:1.5px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg)}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__sunRay___t1B4U:nth-child(5){width:30px;height:1.5px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg)}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__sunRay___t1B4U:nth-child(6){width:26px;height:1px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(22.5deg)}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__sunRay___t1B4U:nth-child(7){width:26px;height:1px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-22.5deg)}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__sunRay___t1B4U:nth-child(8),.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__sunRay___t1B4U:nth-child(9){display:none}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__sunRay___t1B4U{position:absolute;background:linear-gradient(90deg,transparent,#ffd700,transparent);animation:ThemeSwitch-module__rotateSun___JQByd 10s linear infinite}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__sunRay___t1B4U:nth-child(2){width:40px;height:2px;top:50%;left:50%;transform:translate(-50%,-50%)}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__sunRay___t1B4U:nth-child(3){width:2px;height:40px;top:50%;left:50%;transform:translate(-50%,-50%)}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__sunRay___t1B4U:nth-child(4){width:40px;height:2px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg)}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__sunRay___t1B4U:nth-child(5){width:40px;height:2px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg)}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__sunRay___t1B4U:nth-child(6){width:35px;height:1px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(22.5deg)}.ThemeSwitch-module__switchContainer___VENjU{position:relative;background:linear-gradient(135deg,#87ceeb,#add8e6);border-radius:30px;cursor:pointer;overflow:hidden;transition:background .6s cubic-bezier(.4,0,.2,1);box-shadow:inset 0 2px 8px #0000001a,0 4px 12px #00000026;-webkit-user-select:none;user-select:none}.ThemeSwitch-module__switchContainer___VENjU.ThemeSwitch-module__small___YlvWo{width:60px;height:30px;border-radius:15px}.ThemeSwitch-module__switchContainer___VENjU.ThemeSwitch-module__medium___Q8Rro{width:90px;height:45px;border-radius:22.5px}.ThemeSwitch-module__switchContainer___VENjU.ThemeSwitch-module__large___BMOxC{width:120px;height:60px;border-radius:30px}.ThemeSwitch-module__switchContainer___VENjU:focus{outline:2px solid #4a90e2;outline-offset:2px}.ThemeSwitch-module__switchContainer___VENjU.ThemeSwitch-module__dark___a4vSn{background:linear-gradient(135deg,#1a1a3e,#0a0a1f)}.ThemeSwitch-module__background___Rpodp{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none}.ThemeSwitch-module__cloud___OoOyx{position:absolute;background:#fff6;border-radius:100px;opacity:0;transition:opacity .6s ease}.ThemeSwitch-module__light___ddTa2 .ThemeSwitch-module__cloud___OoOyx{opacity:1}.ThemeSwitch-module__cloud___OoOyx:before,.ThemeSwitch-module__cloud___OoOyx:after{content:"";position:absolute;background:#fff6;border-radius:100px}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__cloud1___aqGNx{width:12px;height:4px;top:7px;left:10px}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__cloud1___aqGNx:before{width:5px;height:5px;top:-2.5px;left:2.5px}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__cloud1___aqGNx:after{width:6px;height:4px;top:-1.5px;right:2.5px}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__cloud1___aqGNx{width:19px;height:6px;top:11px;left:15px}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__cloud1___aqGNx:before{width:7.5px;height:7.5px;top:-3.75px;left:3.75px}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__cloud1___aqGNx:after{width:9px;height:6px;top:-2.25px;right:3.75px}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__cloud1___aqGNx{width:25px;height:8px;top:15px;left:20px}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__cloud1___aqGNx:before{width:10px;height:10px;top:-5px;left:5px}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__cloud1___aqGNx:after{width:12px;height:8px;top:-3px;right:5px}.ThemeSwitch-module__cloud1___aqGNx{animation:ThemeSwitch-module__floatCloud1___MdWMj 12s infinite ease-in-out}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__cloud2___guY71{width:10px;height:3px;top:17px;right:12px}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__cloud2___guY71:before{width:4px;height:4px;top:-2px;left:1.5px}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__cloud2___guY71{width:15px;height:4.5px;top:26px;right:19px}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__cloud2___guY71:before{width:6px;height:6px;top:-3px;left:2.25px}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__cloud2___guY71{width:20px;height:6px;top:35px;right:25px}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__cloud2___guY71:before{width:8px;height:8px;top:-4px;left:3px}.ThemeSwitch-module__cloud2___guY71{animation:ThemeSwitch-module__floatCloud2___2x6Sp 15s infinite ease-in-out}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__cloud3___7-NhR{width:9px;height:2.5px;bottom:9px;left:17px}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__cloud3___7-NhR:after{width:5px;height:3px;top:-1.5px;right:1.5px}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__cloud3___7-NhR{width:13.5px;height:3.75px;bottom:13.5px;left:26px}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__cloud3___7-NhR:after{width:7.5px;height:4.5px;top:-2.25px;right:2.25px}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__cloud3___7-NhR{width:18px;height:5px;bottom:18px;left:35px}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__cloud3___7-NhR:after{width:10px;height:6px;top:-3px;right:3px}.ThemeSwitch-module__cloud3___7-NhR{animation:ThemeSwitch-module__floatCloud3___FJCbV 18s infinite ease-in-out}@keyframes ThemeSwitch-module__floatCloud1___MdWMj{0%,to{transform:translate(0)}50%{transform:translate(5px)}}@keyframes ThemeSwitch-module__floatCloud2___2x6Sp{0%,to{transform:translate(0)}50%{transform:translate(-3px)}}@keyframes ThemeSwitch-module__floatCloud3___FJCbV{0%,to{transform:translate(0)}50%{transform:translate(4px)}}.ThemeSwitch-module__star___Z98bU{position:absolute;background:#fff;border-radius:50%;opacity:0;transition:opacity .6s ease}.ThemeSwitch-module__dark___a4vSn .ThemeSwitch-module__star___Z98bU{opacity:1}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__star1___rhotb{width:1px;height:1px;top:5px;left:12px}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__star2___pzbNR{width:1px;height:1px;top:9px;right:15px}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__star3___iK7lJ{width:1px;height:1px;bottom:7px;left:20px}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__star4___t5pqN{width:.75px;height:.75px;top:12px;left:7px}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__star5___dx42N{width:1px;height:1px;bottom:10px;right:17px}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__star6___wur-I{width:.5px;height:.5px;top:17px;right:10px}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__star7___KONgd{width:.75px;height:.75px;bottom:12px;left:10px}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__star8___gIYpk{width:.5px;height:.5px;top:6px;right:7px}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__star1___rhotb{width:1.5px;height:1.5px;top:7.5px;left:19px}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__star2___pzbNR{width:1.5px;height:1.5px;top:13.5px;right:22.5px}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__star3___iK7lJ{width:1.5px;height:1.5px;bottom:11px;left:30px}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__star4___t5pqN{width:1.13px;height:1.13px;top:19px;left:11px}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__star5___dx42N{width:1.5px;height:1.5px;bottom:15px;right:26px}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__star6___wur-I{width:.75px;height:.75px;top:26px;right:15px}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__star7___KONgd{width:1.13px;height:1.13px;bottom:19px;left:15px}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__star8___gIYpk{width:.75px;height:.75px;top:9px;right:11px}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__star1___rhotb{width:2px;height:2px;top:10px;left:25px}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__star2___pzbNR{width:2px;height:2px;top:18px;right:30px}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__star3___iK7lJ{width:2px;height:2px;bottom:15px;left:40px}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__star4___t5pqN{width:1.5px;height:1.5px;top:25px;left:15px}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__star5___dx42N{width:2px;height:2px;bottom:20px;right:35px}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__star6___wur-I{width:1px;height:1px;top:35px;right:20px}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__star7___KONgd{width:1.5px;height:1.5px;bottom:25px;left:20px}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__star8___gIYpk{width:1px;height:1px;top:12px;right:15px}.ThemeSwitch-module__star1___rhotb{animation:ThemeSwitch-module__twinkle___Abun5 3s infinite}.ThemeSwitch-module__star2___pzbNR{animation:ThemeSwitch-module__twinkle___Abun5 3s infinite .5s}.ThemeSwitch-module__star3___iK7lJ{animation:ThemeSwitch-module__twinkle___Abun5 3s infinite 1s}.ThemeSwitch-module__star4___t5pqN{animation:ThemeSwitch-module__twinkle___Abun5 3s infinite 1.5s}.ThemeSwitch-module__star5___dx42N{animation:ThemeSwitch-module__twinkle___Abun5 3s infinite 2s}.ThemeSwitch-module__star6___wur-I{animation:ThemeSwitch-module__twinkle___Abun5 3s infinite 2.5s}.ThemeSwitch-module__star7___KONgd{animation:ThemeSwitch-module__twinkle___Abun5 3s infinite .8s}.ThemeSwitch-module__star8___gIYpk{animation:ThemeSwitch-module__twinkle___Abun5 3s infinite 1.3s}@keyframes ThemeSwitch-module__twinkle___Abun5{0%,to{opacity:.3}50%{opacity:1}}.ThemeSwitch-module__toggle___L5FGS{position:absolute;border-radius:50%;transition:transform .6s cubic-bezier(.4,0,.2,1),background .6s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__toggle___L5FGS{width:24px;height:24px;background:linear-gradient(135deg,gold,orange);top:3px;left:3px;box-shadow:0 1px 4px #0003,0 0 10px #ffd7004d}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__toggle___L5FGS{width:36px;height:36px;background:linear-gradient(135deg,gold,orange);top:4.5px;left:4.5px;box-shadow:0 1.5px 6px #0003,0 0 15px #ffd7004d}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__toggle___L5FGS{width:48px;height:48px;background:linear-gradient(135deg,gold,orange);top:6px;left:6px;box-shadow:0 2px 8px #0003,0 0 20px #ffd7004d}.ThemeSwitch-module__dark___a4vSn.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__toggle___L5FGS{transform:translate(30px);background:linear-gradient(135deg,beige,#d3d3d3);box-shadow:0 1px 4px #0000004d,0 0 10px #f5f5dc33}.ThemeSwitch-module__dark___a4vSn.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__toggle___L5FGS{transform:translate(45px);background:linear-gradient(135deg,beige,#d3d3d3);box-shadow:0 1.5px 6px #0000004d,0 0 15px #f5f5dc33}.ThemeSwitch-module__dark___a4vSn.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__toggle___L5FGS{transform:translate(60px);background:linear-gradient(135deg,beige,#d3d3d3);box-shadow:0 2px 8px #0000004d,0 0 20px #f5f5dc33}.ThemeSwitch-module__sun___s8noI{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:1;transform:rotate(0) scale(1);transition:opacity .6s ease,transform .6s ease}.ThemeSwitch-module__dark___a4vSn .ThemeSwitch-module__sun___s8noI{opacity:0;transform:rotate(180deg) scale(.5)}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__sunRay___t1B4U:nth-child(7){width:35px;height:1px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-22.5deg)}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__sunRay___t1B4U:nth-child(8){width:35px;height:1px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(67.5deg)}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__sunRay___t1B4U:nth-child(9){width:35px;height:1px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-67.5deg)}@keyframes ThemeSwitch-module__rotateSun___JQByd{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.ThemeSwitch-module__moon___TNpFJ{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;transform:rotate(-180deg) scale(.5);transition:opacity .6s ease,transform .6s ease}.ThemeSwitch-module__dark___a4vSn .ThemeSwitch-module__moon___TNpFJ{opacity:1;transform:rotate(0) scale(1)}.ThemeSwitch-module__moonCore___svwjb{position:relative;border-radius:50%}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__moonCore___svwjb{width:16px;height:16px;background:radial-gradient(circle at 30% 30%,beige,silver);box-shadow:inset -1.5px -1.5px 4px #0003,inset 1px 1px 4px #ffffff4d}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__moonCore___svwjb{width:24px;height:24px;background:radial-gradient(circle at 30% 30%,beige,silver);box-shadow:inset -2.25px -2.25px 6px #0003,inset 1.5px 1.5px 6px #ffffff4d}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__moonCore___svwjb{width:32px;height:32px;background:radial-gradient(circle at 30% 30%,beige,silver);box-shadow:inset -3px -3px 8px #0003,inset 2px 2px 8px #ffffff4d}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__crater1___swpHc{position:absolute;width:3px;height:3px;background:radial-gradient(circle,#80808066,#69696933);border-radius:50%;top:4px;left:5px;box-shadow:inset .5px .5px 1px #0003}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__crater2___WQVKR{position:absolute;width:2px;height:2px;background:radial-gradient(circle,#8080804d,#69696926);border-radius:50%;bottom:4.5px;right:3.5px;box-shadow:inset .5px .5px .5px #00000026}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__crater3___F-KJu{position:absolute;width:1.5px;height:1.5px;background:radial-gradient(circle,#80808040,#6969691a);border-radius:50%;top:7.5px;right:5.5px;box-shadow:inset .25px .25px .5px #0000001a}.ThemeSwitch-module__small___YlvWo .ThemeSwitch-module__crater4___ZsIb7{position:absolute;width:2.5px;height:2.5px;background:radial-gradient(circle,#80808059,#6969692e);border-radius:50%;bottom:3px;left:4px;box-shadow:inset .5px .5px .75px #0000002e}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__crater1___swpHc{position:absolute;width:4.5px;height:4.5px;background:radial-gradient(circle,#80808066,#69696933);border-radius:50%;top:6px;left:7.5px;box-shadow:inset .75px .75px 1.5px #0003}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__crater2___WQVKR{position:absolute;width:3px;height:3px;background:radial-gradient(circle,#8080804d,#69696926);border-radius:50%;bottom:6.75px;right:5.25px;box-shadow:inset .75px .75px .75px #00000026}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__crater3___F-KJu{position:absolute;width:2.25px;height:2.25px;background:radial-gradient(circle,#80808040,#6969691a);border-radius:50%;top:11.25px;right:8.25px;box-shadow:inset .375px .375px .75px #0000001a}.ThemeSwitch-module__medium___Q8Rro .ThemeSwitch-module__crater4___ZsIb7{position:absolute;width:3.75px;height:3.75px;background:radial-gradient(circle,#80808059,#6969692e);border-radius:50%;bottom:4.5px;left:6px;box-shadow:inset .75px .75px 1.125px #0000002e}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__crater1___swpHc{position:absolute;width:6px;height:6px;background:radial-gradient(circle,#80808066,#69696933);border-radius:50%;top:8px;left:10px;box-shadow:inset 1px 1px 2px #0003}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__crater2___WQVKR{position:absolute;width:4px;height:4px;background:radial-gradient(circle,#8080804d,#69696926);border-radius:50%;bottom:9px;right:7px;box-shadow:inset 1px 1px 1px #00000026}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__crater3___F-KJu{position:absolute;width:3px;height:3px;background:radial-gradient(circle,#80808040,#6969691a);border-radius:50%;top:15px;right:11px;box-shadow:inset .5px .5px 1px #0000001a}.ThemeSwitch-module__large___BMOxC .ThemeSwitch-module__crater4___ZsIb7{position:absolute;width:5px;height:5px;background:radial-gradient(circle,#80808059,#6969692e);border-radius:50%;bottom:6px;left:8px;box-shadow:inset 1px 1px 1.5px #0000002e}

package/dist/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <title>Macolmenerori Component Library</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

package/dist/index.js

@@ -0,0 +1,104 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import './index.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 = {
+  sunCore: m,
+  small: d,
+  medium: r,
+  large: n,
+  sunspot1: u,
+  sunspot2: i,
+  sunspot3: h,
+  sunRay: w,
+  rotateSun: S,
+  switchContainer: T,
+  dark: N,
+  background: v,
+  cloud: g,
+  light: $,
+  cloud1: C,
+  floatCloud1: p,
+  cloud2: y,
+  floatCloud2: R,
+  cloud3: k,
+  floatCloud3: b,
+  star: f,
+  star1: x,
+  star2: I,
+  star3: j,
+  star4: F,
+  star5: J,
+  star6: K,
+  star7: U,
+  star8: O,
+  twinkle: V,
+  toggle: W,
+  sun: Y,
+  moon: B,
+  moonCore: E,
+  crater1: Q,
+  crater2: q,
+  crater3: G,
+  crater4: Z
+}, A = ({
+  enableDarkMode: _,
+  setEnableDarkMode: c,
+  size: l = "large"
+}) => {
+  const o = () => {
+    c(!_);
+  };
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: `${s.switchContainer} ${s[l]} ${_ ? s.dark : s.light}`,
+      onClick: o,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": `Switch to ${_ ? "light" : "dark"} mode`,
+      onKeyDown: (a) => {
+        (a.key === "Enter" || a.key === " ") && o();
+      },
+      children: [
+        /* @__PURE__ */ t("div", { className: s.background, children: [
+          /* @__PURE__ */ e("div", { className: `${s.cloud} ${s.cloud1}` }),
+          /* @__PURE__ */ e("div", { className: `${s.cloud} ${s.cloud2}` }),
+          /* @__PURE__ */ e("div", { className: `${s.cloud} ${s.cloud3}` }),
+          /* @__PURE__ */ e("div", { className: `${s.star} ${s.star1}` }),
+          /* @__PURE__ */ e("div", { className: `${s.star} ${s.star2}` }),
+          /* @__PURE__ */ e("div", { className: `${s.star} ${s.star3}` }),
+          /* @__PURE__ */ e("div", { className: `${s.star} ${s.star4}` }),
+          /* @__PURE__ */ e("div", { className: `${s.star} ${s.star5}` }),
+          /* @__PURE__ */ e("div", { className: `${s.star} ${s.star6}` }),
+          /* @__PURE__ */ e("div", { className: `${s.star} ${s.star7}` }),
+          /* @__PURE__ */ e("div", { className: `${s.star} ${s.star8}` })
+        ] }),
+        /* @__PURE__ */ t("div", { className: s.toggle, children: [
+          /* @__PURE__ */ t("div", { className: s.sun, children: [
+            /* @__PURE__ */ t("div", { className: s.sunCore, children: [
+              /* @__PURE__ */ e("div", { className: s.sunspot1 }),
+              /* @__PURE__ */ e("div", { className: s.sunspot2 }),
+              /* @__PURE__ */ e("div", { className: s.sunspot3 })
+            ] }),
+            /* @__PURE__ */ e("div", { className: s.sunRay }),
+            /* @__PURE__ */ e("div", { className: s.sunRay }),
+            /* @__PURE__ */ e("div", { className: s.sunRay }),
+            /* @__PURE__ */ e("div", { className: s.sunRay }),
+            /* @__PURE__ */ e("div", { className: s.sunRay }),
+            /* @__PURE__ */ e("div", { className: s.sunRay }),
+            /* @__PURE__ */ e("div", { className: s.sunRay }),
+            /* @__PURE__ */ e("div", { className: s.sunRay })
+          ] }),
+          /* @__PURE__ */ e("div", { className: s.moon, children: /* @__PURE__ */ t("div", { className: s.moonCore, children: [
+            /* @__PURE__ */ e("div", { className: s.crater1 }),
+            /* @__PURE__ */ e("div", { className: s.crater2 }),
+            /* @__PURE__ */ e("div", { className: s.crater3 }),
+            /* @__PURE__ */ e("div", { className: s.crater4 })
+          ] }) })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  A as ThemeSwitch
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.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 */\ninterface 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/types/index.d.ts

@@ -0,0 +1,34 @@
+import { default as default_2 } from 'react';
+
+/**
+ * ThemeSwitch Component
+ *
+ * An animated toggle switch for switching between light and dark themes.
+ * Features sun/moon icons with animated clouds (light mode) and stars (dark mode).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * const [darkMode, setDarkMode] = useState(false);
+ * <ThemeSwitch
+ *   enableDarkMode={darkMode}
+ *   setEnableDarkMode={setDarkMode}
+ *   size="medium"
+ * />
+ * ```
+ */
+export declare const ThemeSwitch: default_2.FC<ThemeSwitchProps>;
+
+/**
+ * Props for the ThemeSwitch component
+ */
+declare interface ThemeSwitchProps {
+    /** Whether dark mode is currently enabled */
+    enableDarkMode: boolean;
+    /** Callback function to update the dark mode state */
+    setEnableDarkMode: (value: boolean) => void;
+    /** Size variant of the switch. Defaults to 'large' */
+    size?: 'small' | 'medium' | 'large';
+}
+
+export { }

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@macolmenerori/component-library",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "",
+  "keywords": [],
+  "author": "macolmenerori",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/macolmenerori/component-library.git"
+  },
+  "engines": {
+    "node": ">=24.0.0 <25.0.0"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@jest/types": "^30.2.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^24.10.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jest-dom": "^5.5.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-testing-library": "^7.13.3",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "jest-fixed-jsdom": "^0.0.10",
+    "prettier": "^3.6.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.3",
+    "vite": "^7.2.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "prettify": "prettier -w --log-level=silent src/",
+    "lint": "eslint --fix ./src/",
+    "test": "echo \"Info: no tests for the moment\" && exit 0",
+    "types": "tsc --noEmit",
+    "verify": "pnpm lint && pnpm prettify && pnpm types && pnpm test && pnpm audit --prod && pnpm build",
+    "publish:npm": "pnpm publish --registry https://registry.npmjs.org/ --access public",
+    "publish:github": "pnpm publish --registry https://npm.pkg.github.com"
+  }
+}