infinity-theme 1.3.0

package/README.md

@@ -0,0 +1,114 @@
+# Infinity Theme
+
+A lightweight React theme system with dark/light mode and 5 color themes using CSS custom properties.
+
+## Features
+
+-  **Dark/Light mode** toggle with system preference detection
+-  **5 color themes**: Purple, Red, Blue, Green, Orange
+-  **Persistent** — saves preferences to localStorage
+-  **PWA-ready** — updates manifest theme-color dynamically
+-  **Zero dependencies** — just React peer dependency
+-  **~2KB** gzipped
+
+## Installation
+
+```bash
+npm install infinity-theme
+```
+
+## Usage
+
+### 1. Wrap your app with `ThemeProvider`
+
+```jsx
+import { ThemeProvider } from 'infinity-theme';
+import 'infinity-theme/globals.css';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+### 2. Use the `ThemeToggle` component
+
+```jsx
+import { ThemeToggle } from 'infinity-theme';
+
+function Header() {
+  return (
+    <header>
+      <h1>My App</h1>
+      <ThemeToggle />
+    </header>
+  );
+}
+```
+
+### 3. Use theme colors in your CSS
+
+The theme uses CSS custom properties in HSL format:
+
+```css
+.card {
+  background: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+  border: 1px solid hsl(var(--border));
+}
+
+.btn {
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+}
+```
+
+### Available CSS Variables
+
+| Variable | Usage |
+|---|---|
+| `--background` | Page background |
+| `--foreground` | Default text color |
+| `--card` | Card/container background |
+| `--card-foreground` | Card text color |
+| `--primary` | Primary accent color |
+| `--primary-foreground` | Text on primary |
+| `--secondary` | Secondary accent |
+| `--secondary-foreground` | Text on secondary |
+| `--muted` | Muted backgrounds |
+| `--muted-foreground` | Muted text |
+| `--border` | Border colors |
+| `--ring` | Focus rings, scrollbars |
+| `--radius` | Border radius |
+
+## API
+
+### `useTheme()`
+
+```jsx
+import { useTheme } from 'infinity-theme';
+
+function MyComponent() {
+  const { theme, toggleTheme, colorTheme, setColorTheme, colorThemes } = useTheme();
+  // theme: 'light' | 'dark'
+  // colorTheme: 'purple' | 'red' | 'blue' | 'green' | 'orange'
+  // colorThemes: array of available colors
+}
+```
+
+## Color Themes
+
+| Color | Light Primary | Dark Primary |
+|---|---|---|
+| Purple (default) | `hsl(270 90% 60%)` | `hsl(270 90% 70%)` |
+| Red | `hsl(0 85% 60%)` | `hsl(0 85% 65%)` |
+| Blue | `hsl(220 90% 60%)` | `hsl(220 90% 70%)` |
+| Green | `hsl(140 70% 45%)` | `hsl(140 70% 55%)` |
+| Orange | `hsl(25 95% 55%)` | `hsl(25 95% 60%)` |
+
+## License
+
+MIT

package/dist/globals.css

@@ -0,0 +1,503 @@
+:root {
+  --background: 270 100% 99%;
+  --foreground: 270 50% 10%;
+  --card: 0 0% 100%;
+  --card-foreground: 270 50% 10%;
+  --primary: 270 90% 60%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 270 30% 95%;
+  --secondary-foreground: 270 50% 20%;
+  --muted: 270 20% 96%;
+  --muted-foreground: 270 10% 40%;
+  --border: 270 20% 90%;
+  --ring: 270 90% 60%;
+  --radius: 0.75rem;
+}
+
+.dark {
+  --background: 270 50% 4%;
+  --foreground: 270 20% 95%;
+  --card: 270 50% 6%;
+  --card-foreground: 270 20% 95%;
+  --primary: 270 90% 70%;
+  --primary-foreground: 270 50% 5%;
+  --secondary: 270 40% 12%;
+  --secondary-foreground: 270 20% 95%;
+  --muted: 270 40% 12%;
+  --muted-foreground: 270 10% 60%;
+  --border: 270 40% 15%;
+  --ring: 270 90% 70%;
+}
+
+.red {
+  --background: 0 100% 98%;
+  --foreground: 0 50% 12%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 50% 12%;
+  --primary: 0 85% 60%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 30% 95%;
+  --secondary-foreground: 0 50% 20%;
+  --muted: 0 20% 96%;
+  --muted-foreground: 0 10% 40%;
+  --border: 0 20% 90%;
+  --ring: 0 85% 60%;
+}
+
+.red.dark {
+  --background: 0 50% 6%;
+  --foreground: 0 20% 95%;
+  --card: 0 50% 8%;
+  --card-foreground: 0 20% 95%;
+  --primary: 0 85% 65%;
+  --primary-foreground: 0 50% 5%;
+  --secondary: 0 40% 14%;
+  --secondary-foreground: 0 20% 95%;
+  --muted: 0 40% 14%;
+  --muted-foreground: 0 10% 60%;
+  --border: 0 40% 18%;
+  --ring: 0 85% 65%;
+}
+
+.blue {
+  --background: 220 100% 98%;
+  --foreground: 220 50% 12%;
+  --card: 220 0% 100%;
+  --card-foreground: 220 50% 12%;
+  --primary: 220 90% 60%;
+  --primary-foreground: 220 0% 100%;
+  --secondary: 220 30% 95%;
+  --secondary-foreground: 220 50% 20%;
+  --muted: 220 20% 96%;
+  --muted-foreground: 220 10% 40%;
+  --border: 220 20% 90%;
+  --ring: 220 90% 60%;
+}
+
+.blue.dark {
+  --background: 220 50% 6%;
+  --foreground: 220 20% 95%;
+  --card: 220 50% 8%;
+  --card-foreground: 220 20% 95%;
+  --primary: 220 90% 70%;
+  --primary-foreground: 220 50% 5%;
+  --secondary: 220 40% 14%;
+  --secondary-foreground: 220 20% 95%;
+  --muted: 220 40% 14%;
+  --muted-foreground: 220 10% 60%;
+  --border: 220 40% 18%;
+  --ring: 220 90% 70%;
+}
+
+.green {
+  --background: 140 80% 98%;
+  --foreground: 140 50% 12%;
+  --card: 140 0% 100%;
+  --card-foreground: 140 50% 12%;
+  --primary: 140 70% 45%;
+  --primary-foreground: 140 0% 100%;
+  --secondary: 140 30% 95%;
+  --secondary-foreground: 140 50% 20%;
+  --muted: 140 20% 96%;
+  --muted-foreground: 140 10% 40%;
+  --border: 140 20% 90%;
+  --ring: 140 70% 45%;
+}
+
+.green.dark {
+  --background: 140 50% 6%;
+  --foreground: 140 20% 95%;
+  --card: 140 50% 8%;
+  --card-foreground: 140 20% 95%;
+  --primary: 140 70% 55%;
+  --primary-foreground: 140 50% 5%;
+  --secondary: 140 40% 14%;
+  --secondary-foreground: 140 20% 95%;
+  --muted: 140 40% 14%;
+  --muted-foreground: 140 10% 60%;
+  --border: 140 40% 18%;
+  --ring: 140 70% 55%;
+}
+
+.orange {
+  --background: 30 100% 97%;
+  --foreground: 30 50% 12%;
+  --card: 30 0% 100%;
+  --card-foreground: 30 50% 12%;
+  --primary: 25 95% 55%;
+  --primary-foreground: 30 0% 100%;
+  --secondary: 30 30% 95%;
+  --secondary-foreground: 30 50% 20%;
+  --muted: 30 20% 96%;
+  --muted-foreground: 30 10% 40%;
+  --border: 30 20% 90%;
+  --ring: 25 95% 55%;
+}
+
+.orange.dark {
+  --background: 25 50% 6%;
+  --foreground: 25 20% 95%;
+  --card: 25 50% 8%;
+  --card-foreground: 25 20% 95%;
+  --primary: 25 95% 60%;
+  --primary-foreground: 25 50% 5%;
+  --secondary: 25 40% 14%;
+  --secondary-foreground: 25 20% 95%;
+  --muted: 25 40% 14%;
+  --muted-foreground: 25 10% 60%;
+  --border: 25 40% 18%;
+  --ring: 25 95% 60%;
+}
+
+* {
+  border-color: var(--border);
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--ring) / 0.3) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: hsl(var(--ring) / 0.3);
+  border-radius: 999px;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Links — inherit color by default, primary on hover */
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:hover {
+  color: hsl(var(--primary));
+  text-decoration: underline;
+}
+
+a:visited {
+  color: inherit;
+}
+
+/* Headings */
+h1, h2, h3, h4, h5, h6 {
+  color: hsl(var(--foreground));
+}
+
+/* Paragraphs & text */
+p, span {
+  color: hsl(var(--foreground));
+}
+
+small {
+  color: hsl(var(--muted-foreground));
+}
+
+strong, b {
+  color: hsl(var(--foreground));
+}
+
+em, i {
+  color: hsl(var(--foreground));
+}
+
+/* Code */
+code, pre, kbd {
+  background-color: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+}
+
+pre {
+  border-color: hsl(var(--border));
+}
+
+/* Buttons — primary color, muted when disabled */
+button {
+  background-color: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+  border-color: hsl(var(--border));
+}
+
+button:hover {
+  background-color: hsl(var(--primary) / 0.85);
+}
+
+button:active {
+  background-color: hsl(var(--primary) / 0.75);
+}
+
+button:disabled {
+  background-color: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+  border-color: hsl(var(--border));
+  cursor: not-allowed;
+}
+
+/* Inputs & Textareas */
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="tel"],
+input[type="url"],
+input:not([type]),
+textarea,
+select {
+  background-color: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+  border-color: hsl(var(--border));
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: hsl(var(--muted-foreground));
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input:not([type]):focus,
+textarea:focus,
+select:focus {
+  border-color: hsl(var(--ring));
+  outline: none;
+}
+
+/* Checkbox & Radio */
+input[type="checkbox"],
+input[type="radio"] {
+  accent-color: hsl(var(--primary));
+}
+
+/* Range */
+input[type="range"] {
+  accent-color: hsl(var(--primary));
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  background-color: hsl(var(--muted));
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  background-color: hsl(var(--primary));
+}
+
+/* Select dropdown arrow */
+select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='hsl(var(--muted-foreground))' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.5rem center;
+}
+
+/* Tables */
+table {
+  border-color: hsl(var(--border));
+}
+
+th {
+  background-color: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+}
+
+td {
+  border-color: hsl(var(--border));
+}
+
+tr:nth-child(even) {
+  background-color: hsl(var(--muted) / 0.3);
+}
+
+/* Lists */
+ul, ol {
+  color: hsl(var(--foreground));
+}
+
+li::marker {
+  color: hsl(var(--muted-foreground));
+}
+
+/* Blockquote */
+blockquote {
+  border-left-color: hsl(var(--primary));
+  color: hsl(var(--muted-foreground));
+}
+
+/* Horizontal rule */
+hr {
+  border-color: hsl(var(--border));
+}
+
+/* Text selection */
+::selection {
+  background-color: hsl(var(--primary) / 0.3);
+  color: hsl(var(--foreground));
+}
+
+/* Focus visible */
+:focus-visible {
+  outline-color: hsl(var(--ring));
+}
+
+/* Details / Summary */
+details {
+  border-color: hsl(var(--border));
+  background-color: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+}
+
+summary {
+  color: hsl(var(--foreground));
+}
+
+summary:hover {
+  color: hsl(var(--primary));
+}
+
+/* Progress */
+progress {
+  accent-color: hsl(var(--primary));
+}
+
+progress::-webkit-progress-bar {
+  background-color: hsl(var(--muted));
+}
+
+progress::-webkit-progress-value {
+  background-color: hsl(var(--primary));
+}
+
+/* Meter */
+meter::-webkit-meter-optimum-value {
+  background-color: hsl(var(--primary));
+}
+
+meter::-webkit-meter-bar {
+  background-color: hsl(var(--muted));
+  border-color: hsl(var(--border));
+}
+
+/* File input */
+input[type="file"] {
+  color: hsl(var(--muted-foreground));
+}
+
+input[type="file"]::file-selector-button {
+  background-color: hsl(var(--secondary));
+  color: hsl(var(--secondary-foreground));
+  border-color: hsl(var(--border));
+}
+
+input[type="file"]::file-selector-button:hover {
+  background-color: hsl(var(--secondary) / 0.8);
+}
+
+/* Color input */
+input[type="color"] {
+  border-color: hsl(var(--border));
+  background-color: hsl(var(--card));
+}
+
+/* Date/time inputs */
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"],
+input[type="week"] {
+  background-color: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+  border-color: hsl(var(--border));
+}
+
+/* Images */
+img {
+  color: hsl(var(--muted-foreground));
+}
+
+/* Mark / highlight */
+mark {
+  background-color: hsl(var(--primary) / 0.2);
+  color: hsl(var(--foreground));
+}
+
+/* Legend */
+legend {
+  color: hsl(var(--foreground));
+}
+
+/* Fieldset */
+fieldset {
+  border-color: hsl(var(--border));
+}
+
+/* Output */
+output {
+  color: hsl(var(--foreground));
+}
+
+/* Citation */
+cite {
+  color: hsl(var(--muted-foreground));
+}
+
+/* Definition */
+dfn {
+  color: hsl(var(--foreground));
+}
+
+/* Address */
+address {
+  color: hsl(var(--muted-foreground));
+}
+
+/* Figcaption */
+figcaption {
+  color: hsl(var(--muted-foreground));
+}
+
+/* Time */
+time {
+  color: hsl(var(--muted-foreground));
+}
+
+/* Iframe */
+iframe {
+  border-color: hsl(var(--border));
+}
+
+/* Video / Audio */
+video, audio {
+  background-color: hsl(var(--card));
+  border-color: hsl(var(--border));
+}
+
+/* Object / Embed */
+object, embed {
+  border-color: hsl(var(--border));
+}
+
+/* Abbreviation */
+abbr {
+  color: hsl(var(--muted-foreground));
+}

package/dist/index.js

@@ -0,0 +1,142 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.js
+var index_exports = {};
+__export(index_exports, {
+  ThemeProvider: () => ThemeProvider,
+  ThemeToggle: () => ThemeToggle,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/theme-context.jsx
+var import_react = __toESM(require("react"));
+var COLOR_THEMES = ["purple", "red", "blue", "green", "orange"];
+var COLOR_HEX = {
+  purple: "#6c55e7",
+  red: "#e74c3c",
+  blue: "#3498db",
+  green: "#2ecc71",
+  orange: "#f39c12"
+};
+var ThemeContext = (0, import_react.createContext)(null);
+function ThemeProvider({ children }) {
+  const [theme, setThemeState] = (0, import_react.useState)(() => {
+    if (typeof window === "undefined") return "light";
+    const saved = localStorage.getItem("infinity-theme");
+    if (saved) return saved;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  });
+  const [colorTheme, setColorThemeState] = (0, import_react.useState)(() => {
+    if (typeof window === "undefined") return "purple";
+    const saved = localStorage.getItem("infinity-color-theme");
+    if (saved && COLOR_THEMES.includes(saved)) return saved;
+    return "purple";
+  });
+  (0, import_react.useEffect)(() => {
+    const root = document.documentElement;
+    root.classList.remove("light", "dark");
+    root.classList.add(theme);
+    localStorage.setItem("infinity-theme", theme);
+  }, [theme]);
+  (0, import_react.useEffect)(() => {
+    const root = document.documentElement;
+    root.classList.remove(...COLOR_THEMES);
+    if (colorTheme !== "purple") {
+      root.classList.add(colorTheme);
+    }
+    localStorage.setItem("infinity-color-theme", colorTheme);
+    const metaThemeColor = document.getElementById("theme-color-meta");
+    if (metaThemeColor) {
+      metaThemeColor.setAttribute("content", COLOR_HEX[colorTheme] || COLOR_HEX.purple);
+    }
+  }, [colorTheme]);
+  const toggleTheme = () => {
+    setThemeState((prev) => prev === "light" ? "dark" : "light");
+  };
+  const setColorTheme = (color) => {
+    setColorThemeState(color);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(ThemeContext.Provider, { value: { theme, toggleTheme, colorTheme, setColorTheme, colorThemes: COLOR_THEMES } }, children);
+}
+function useTheme() {
+  const context = (0, import_react.useContext)(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+
+// src/ThemeToggle.jsx
+var import_react2 = __toESM(require("react"));
+var COLOR_OPTIONS = {
+  purple: { label: "Purple", color: "#a855f7" },
+  red: { label: "Red", color: "#ef4444" },
+  blue: { label: "Blue", color: "#3b82f6" },
+  green: { label: "Green", color: "#22c55e" },
+  orange: { label: "Orange", color: "#f97316" }
+};
+function ThemeToggle({ className = "" }) {
+  const { theme, toggleTheme, colorTheme, setColorTheme, colorThemes } = useTheme();
+  const [showColors, setShowColors] = (0, import_react2.useState)(false);
+  return /* @__PURE__ */ import_react2.default.createElement("div", { className: `infinity-theme-controls ${className}` }, /* @__PURE__ */ import_react2.default.createElement(
+    "button",
+    {
+      onClick: toggleTheme,
+      className: "infinity-theme-toggle-btn",
+      "aria-label": `Switch to ${theme === "light" ? "dark" : "light"} mode`,
+      title: "Toggle dark/light mode"
+    },
+    theme === "light" ? /* @__PURE__ */ import_react2.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react2.default.createElement("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })) : /* @__PURE__ */ import_react2.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react2.default.createElement("circle", { cx: "12", cy: "12", r: "5" }), /* @__PURE__ */ import_react2.default.createElement("line", { x1: "12", y1: "1", x2: "12", y2: "3" }), /* @__PURE__ */ import_react2.default.createElement("line", { x1: "12", y1: "21", x2: "12", y2: "23" }), /* @__PURE__ */ import_react2.default.createElement("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }), /* @__PURE__ */ import_react2.default.createElement("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }), /* @__PURE__ */ import_react2.default.createElement("line", { x1: "1", y1: "12", x2: "3", y2: "12" }), /* @__PURE__ */ import_react2.default.createElement("line", { x1: "21", y1: "12", x2: "23", y2: "12" }), /* @__PURE__ */ import_react2.default.createElement("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }), /* @__PURE__ */ import_react2.default.createElement("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" }))
+  ), /* @__PURE__ */ import_react2.default.createElement("div", { className: "infinity-color-picker-wrapper" }, /* @__PURE__ */ import_react2.default.createElement(
+    "button",
+    {
+      onClick: () => setShowColors(!showColors),
+      className: "infinity-color-picker-btn",
+      "aria-label": "Select color theme",
+      title: "Color theme"
+    },
+    /* @__PURE__ */ import_react2.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react2.default.createElement("circle", { cx: "13.5", cy: "6.5", r: "2.5" }), /* @__PURE__ */ import_react2.default.createElement("circle", { cx: "17.5", cy: "10.5", r: "2.5" }), /* @__PURE__ */ import_react2.default.createElement("circle", { cx: "8.5", cy: "7.5", r: "2.5" }), /* @__PURE__ */ import_react2.default.createElement("circle", { cx: "6.5", cy: "12.5", r: "2.5" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.9 0 1.7-.8 1.7-1.7 0-.4-.2-.8-.4-1.1-.3-.3-.4-.7-.4-1.1 0-.9.8-1.7 1.7-1.7H16c3.3 0 6-2.7 6-6 0-5.5-4.5-9.4-10-9.4z" }))
+  ), showColors && /* @__PURE__ */ import_react2.default.createElement("div", { className: "infinity-color-picker-dropdown" }, colorThemes.map((color) => /* @__PURE__ */ import_react2.default.createElement(
+    "button",
+    {
+      key: color,
+      onClick: () => {
+        setColorTheme(color);
+        setShowColors(false);
+      },
+      className: `infinity-color-option ${colorTheme === color ? "active" : ""}`,
+      style: { backgroundColor: COLOR_OPTIONS[color].color },
+      "aria-label": `${COLOR_OPTIONS[color].label} theme`,
+      title: COLOR_OPTIONS[color].label
+    },
+    colorTheme === color && /* @__PURE__ */ import_react2.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react2.default.createElement("polyline", { points: "20 6 9 17 4 12" }))
+  )))));
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.js", "../src/theme-context.jsx", "../src/ThemeToggle.jsx"],
+  "sourcesContent": ["export { ThemeProvider, useTheme } from './theme-context';\nexport { ThemeToggle } from './ThemeToggle';\n// import './globals.css';", "import React,{ createContext, useContext, useEffect, useState } from 'react';\n\nconst COLOR_THEMES = ['purple', 'red', 'blue', 'green', 'orange'];\n\nconst COLOR_HEX = {\n  purple: '#6c55e7',\n  red: '#e74c3c',\n  blue: '#3498db',\n  green: '#2ecc71',\n  orange: '#f39c12',\n};\n\nconst ThemeContext = createContext(null);\n\nexport function ThemeProvider({ children }) {\n  const [theme, setThemeState] = useState(() => {\n    if (typeof window === 'undefined') return 'light';\n    const saved = localStorage.getItem('infinity-theme');\n    if (saved) return saved;\n    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n  });\n\n  const [colorTheme, setColorThemeState] = useState(() => {\n    if (typeof window === 'undefined') return 'purple';\n    const saved = localStorage.getItem('infinity-color-theme');\n    if (saved && COLOR_THEMES.includes(saved)) return saved;\n    return 'purple';\n  });\n\n  useEffect(() => {\n    const root = document.documentElement;\n    root.classList.remove('light', 'dark');\n    root.classList.add(theme);\n    localStorage.setItem('infinity-theme', theme);\n  }, [theme]);\n\n  useEffect(() => {\n    const root = document.documentElement;\n    root.classList.remove(...COLOR_THEMES);\n    if (colorTheme !== 'purple') {\n      root.classList.add(colorTheme);\n    }\n    localStorage.setItem('infinity-color-theme', colorTheme);\n\n    const metaThemeColor = document.getElementById('theme-color-meta');\n    if (metaThemeColor) {\n      metaThemeColor.setAttribute('content', COLOR_HEX[colorTheme] || COLOR_HEX.purple);\n    }\n  }, [colorTheme]);\n\n  const toggleTheme = () => {\n    setThemeState((prev) => (prev === 'light' ? 'dark' : 'light'));\n  };\n\n  const setColorTheme = (color) => {\n    setColorThemeState(color);\n  };\n\n  return (\n    <ThemeContext.Provider value={{ theme, toggleTheme, colorTheme, setColorTheme, colorThemes: COLOR_THEMES }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\nexport function useTheme() {\n  const context = useContext(ThemeContext);\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeProvider');\n  }\n  return context;\n}\n", "import React, { useState } from 'react';\nimport { useTheme } from './theme-context';\n\nconst COLOR_OPTIONS = {\n  purple: { label: 'Purple', color: '#a855f7' },\n  red: { label: 'Red', color: '#ef4444' },\n  blue: { label: 'Blue', color: '#3b82f6' },\n  green: { label: 'Green', color: '#22c55e' },\n  orange: { label: 'Orange', color: '#f97316' },\n};\n\nexport function ThemeToggle({ className = '' }) {\n  const { theme, toggleTheme, colorTheme, setColorTheme, colorThemes } = useTheme();\n  const [showColors, setShowColors] = useState(false);\n\n  return (\n    <div className={`infinity-theme-controls ${className}`}>\n      <button\n        onClick={toggleTheme}\n        className=\"infinity-theme-toggle-btn\"\n        aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}\n        title=\"Toggle dark/light mode\"\n      >\n        {theme === 'light' ? (\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n            <path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\" />\n          </svg>\n        ) : (\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n            <circle cx=\"12\" cy=\"12\" r=\"5\" />\n            <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\" />\n            <line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\" />\n            <line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\" />\n            <line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\" />\n            <line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\" />\n            <line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\" />\n            <line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\" />\n            <line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\" />\n          </svg>\n        )}\n      </button>\n\n      <div className=\"infinity-color-picker-wrapper\">\n        <button\n          onClick={() => setShowColors(!showColors)}\n          className=\"infinity-color-picker-btn\"\n          aria-label=\"Select color theme\"\n          title=\"Color theme\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n            <circle cx=\"13.5\" cy=\"6.5\" r=\"2.5\" />\n            <circle cx=\"17.5\" cy=\"10.5\" r=\"2.5\" />\n            <circle cx=\"8.5\" cy=\"7.5\" r=\"2.5\" />\n            <circle cx=\"6.5\" cy=\"12.5\" r=\"2.5\" />\n            <path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.9 0 1.7-.8 1.7-1.7 0-.4-.2-.8-.4-1.1-.3-.3-.4-.7-.4-1.1 0-.9.8-1.7 1.7-1.7H16c3.3 0 6-2.7 6-6 0-5.5-4.5-9.4-10-9.4z\" />\n          </svg>\n        </button>\n\n        {showColors && (\n          <div className=\"infinity-color-picker-dropdown\">\n            {colorThemes.map((color) => (\n              <button\n                key={color}\n                onClick={() => {\n                  setColorTheme(color);\n                  setShowColors(false);\n                }}\n                className={`infinity-color-option ${colorTheme === color ? 'active' : ''}`}\n                style={{ backgroundColor: COLOR_OPTIONS[color].color }}\n                aria-label={`${COLOR_OPTIONS[color].label} theme`}\n                title={COLOR_OPTIONS[color].label}\n              >\n                {colorTheme === color && (\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                    <polyline points=\"20 6 9 17 4 12\" />\n                  </svg>\n                )}\n              </button>\n            ))}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],
+  "mappings": "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",
+  "names": ["React", "import_react", "React"]
+}

package/dist/index.mjs

@@ -0,0 +1,110 @@
+// src/theme-context.jsx
+import React, { createContext, useContext, useEffect, useState } from "react";
+var COLOR_THEMES = ["purple", "red", "blue", "green", "orange"];
+var COLOR_HEX = {
+  purple: "#6c55e7",
+  red: "#e74c3c",
+  blue: "#3498db",
+  green: "#2ecc71",
+  orange: "#f39c12"
+};
+var ThemeContext = createContext(null);
+function ThemeProvider({ children }) {
+  const [theme, setThemeState] = useState(() => {
+    if (typeof window === "undefined") return "light";
+    const saved = localStorage.getItem("infinity-theme");
+    if (saved) return saved;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  });
+  const [colorTheme, setColorThemeState] = useState(() => {
+    if (typeof window === "undefined") return "purple";
+    const saved = localStorage.getItem("infinity-color-theme");
+    if (saved && COLOR_THEMES.includes(saved)) return saved;
+    return "purple";
+  });
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.remove("light", "dark");
+    root.classList.add(theme);
+    localStorage.setItem("infinity-theme", theme);
+  }, [theme]);
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.remove(...COLOR_THEMES);
+    if (colorTheme !== "purple") {
+      root.classList.add(colorTheme);
+    }
+    localStorage.setItem("infinity-color-theme", colorTheme);
+    const metaThemeColor = document.getElementById("theme-color-meta");
+    if (metaThemeColor) {
+      metaThemeColor.setAttribute("content", COLOR_HEX[colorTheme] || COLOR_HEX.purple);
+    }
+  }, [colorTheme]);
+  const toggleTheme = () => {
+    setThemeState((prev) => prev === "light" ? "dark" : "light");
+  };
+  const setColorTheme = (color) => {
+    setColorThemeState(color);
+  };
+  return /* @__PURE__ */ React.createElement(ThemeContext.Provider, { value: { theme, toggleTheme, colorTheme, setColorTheme, colorThemes: COLOR_THEMES } }, children);
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+
+// src/ThemeToggle.jsx
+import React2, { useState as useState2 } from "react";
+var COLOR_OPTIONS = {
+  purple: { label: "Purple", color: "#a855f7" },
+  red: { label: "Red", color: "#ef4444" },
+  blue: { label: "Blue", color: "#3b82f6" },
+  green: { label: "Green", color: "#22c55e" },
+  orange: { label: "Orange", color: "#f97316" }
+};
+function ThemeToggle({ className = "" }) {
+  const { theme, toggleTheme, colorTheme, setColorTheme, colorThemes } = useTheme();
+  const [showColors, setShowColors] = useState2(false);
+  return /* @__PURE__ */ React2.createElement("div", { className: `infinity-theme-controls ${className}` }, /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      onClick: toggleTheme,
+      className: "infinity-theme-toggle-btn",
+      "aria-label": `Switch to ${theme === "light" ? "dark" : "light"} mode`,
+      title: "Toggle dark/light mode"
+    },
+    theme === "light" ? /* @__PURE__ */ React2.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React2.createElement("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })) : /* @__PURE__ */ React2.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React2.createElement("circle", { cx: "12", cy: "12", r: "5" }), /* @__PURE__ */ React2.createElement("line", { x1: "12", y1: "1", x2: "12", y2: "3" }), /* @__PURE__ */ React2.createElement("line", { x1: "12", y1: "21", x2: "12", y2: "23" }), /* @__PURE__ */ React2.createElement("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }), /* @__PURE__ */ React2.createElement("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }), /* @__PURE__ */ React2.createElement("line", { x1: "1", y1: "12", x2: "3", y2: "12" }), /* @__PURE__ */ React2.createElement("line", { x1: "21", y1: "12", x2: "23", y2: "12" }), /* @__PURE__ */ React2.createElement("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }), /* @__PURE__ */ React2.createElement("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" }))
+  ), /* @__PURE__ */ React2.createElement("div", { className: "infinity-color-picker-wrapper" }, /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      onClick: () => setShowColors(!showColors),
+      className: "infinity-color-picker-btn",
+      "aria-label": "Select color theme",
+      title: "Color theme"
+    },
+    /* @__PURE__ */ React2.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React2.createElement("circle", { cx: "13.5", cy: "6.5", r: "2.5" }), /* @__PURE__ */ React2.createElement("circle", { cx: "17.5", cy: "10.5", r: "2.5" }), /* @__PURE__ */ React2.createElement("circle", { cx: "8.5", cy: "7.5", r: "2.5" }), /* @__PURE__ */ React2.createElement("circle", { cx: "6.5", cy: "12.5", r: "2.5" }), /* @__PURE__ */ React2.createElement("path", { d: "M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.9 0 1.7-.8 1.7-1.7 0-.4-.2-.8-.4-1.1-.3-.3-.4-.7-.4-1.1 0-.9.8-1.7 1.7-1.7H16c3.3 0 6-2.7 6-6 0-5.5-4.5-9.4-10-9.4z" }))
+  ), showColors && /* @__PURE__ */ React2.createElement("div", { className: "infinity-color-picker-dropdown" }, colorThemes.map((color) => /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      key: color,
+      onClick: () => {
+        setColorTheme(color);
+        setShowColors(false);
+      },
+      className: `infinity-color-option ${colorTheme === color ? "active" : ""}`,
+      style: { backgroundColor: COLOR_OPTIONS[color].color },
+      "aria-label": `${COLOR_OPTIONS[color].label} theme`,
+      title: COLOR_OPTIONS[color].label
+    },
+    colorTheme === color && /* @__PURE__ */ React2.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React2.createElement("polyline", { points: "20 6 9 17 4 12" }))
+  )))));
+}
+export {
+  ThemeProvider,
+  ThemeToggle,
+  useTheme
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/theme-context.jsx", "../src/ThemeToggle.jsx"],
+  "sourcesContent": ["import React,{ createContext, useContext, useEffect, useState } from 'react';\n\nconst COLOR_THEMES = ['purple', 'red', 'blue', 'green', 'orange'];\n\nconst COLOR_HEX = {\n  purple: '#6c55e7',\n  red: '#e74c3c',\n  blue: '#3498db',\n  green: '#2ecc71',\n  orange: '#f39c12',\n};\n\nconst ThemeContext = createContext(null);\n\nexport function ThemeProvider({ children }) {\n  const [theme, setThemeState] = useState(() => {\n    if (typeof window === 'undefined') return 'light';\n    const saved = localStorage.getItem('infinity-theme');\n    if (saved) return saved;\n    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n  });\n\n  const [colorTheme, setColorThemeState] = useState(() => {\n    if (typeof window === 'undefined') return 'purple';\n    const saved = localStorage.getItem('infinity-color-theme');\n    if (saved && COLOR_THEMES.includes(saved)) return saved;\n    return 'purple';\n  });\n\n  useEffect(() => {\n    const root = document.documentElement;\n    root.classList.remove('light', 'dark');\n    root.classList.add(theme);\n    localStorage.setItem('infinity-theme', theme);\n  }, [theme]);\n\n  useEffect(() => {\n    const root = document.documentElement;\n    root.classList.remove(...COLOR_THEMES);\n    if (colorTheme !== 'purple') {\n      root.classList.add(colorTheme);\n    }\n    localStorage.setItem('infinity-color-theme', colorTheme);\n\n    const metaThemeColor = document.getElementById('theme-color-meta');\n    if (metaThemeColor) {\n      metaThemeColor.setAttribute('content', COLOR_HEX[colorTheme] || COLOR_HEX.purple);\n    }\n  }, [colorTheme]);\n\n  const toggleTheme = () => {\n    setThemeState((prev) => (prev === 'light' ? 'dark' : 'light'));\n  };\n\n  const setColorTheme = (color) => {\n    setColorThemeState(color);\n  };\n\n  return (\n    <ThemeContext.Provider value={{ theme, toggleTheme, colorTheme, setColorTheme, colorThemes: COLOR_THEMES }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\nexport function useTheme() {\n  const context = useContext(ThemeContext);\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeProvider');\n  }\n  return context;\n}\n", "import React, { useState } from 'react';\nimport { useTheme } from './theme-context';\n\nconst COLOR_OPTIONS = {\n  purple: { label: 'Purple', color: '#a855f7' },\n  red: { label: 'Red', color: '#ef4444' },\n  blue: { label: 'Blue', color: '#3b82f6' },\n  green: { label: 'Green', color: '#22c55e' },\n  orange: { label: 'Orange', color: '#f97316' },\n};\n\nexport function ThemeToggle({ className = '' }) {\n  const { theme, toggleTheme, colorTheme, setColorTheme, colorThemes } = useTheme();\n  const [showColors, setShowColors] = useState(false);\n\n  return (\n    <div className={`infinity-theme-controls ${className}`}>\n      <button\n        onClick={toggleTheme}\n        className=\"infinity-theme-toggle-btn\"\n        aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}\n        title=\"Toggle dark/light mode\"\n      >\n        {theme === 'light' ? (\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n            <path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\" />\n          </svg>\n        ) : (\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n            <circle cx=\"12\" cy=\"12\" r=\"5\" />\n            <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\" />\n            <line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\" />\n            <line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\" />\n            <line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\" />\n            <line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\" />\n            <line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\" />\n            <line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\" />\n            <line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\" />\n          </svg>\n        )}\n      </button>\n\n      <div className=\"infinity-color-picker-wrapper\">\n        <button\n          onClick={() => setShowColors(!showColors)}\n          className=\"infinity-color-picker-btn\"\n          aria-label=\"Select color theme\"\n          title=\"Color theme\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n            <circle cx=\"13.5\" cy=\"6.5\" r=\"2.5\" />\n            <circle cx=\"17.5\" cy=\"10.5\" r=\"2.5\" />\n            <circle cx=\"8.5\" cy=\"7.5\" r=\"2.5\" />\n            <circle cx=\"6.5\" cy=\"12.5\" r=\"2.5\" />\n            <path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.9 0 1.7-.8 1.7-1.7 0-.4-.2-.8-.4-1.1-.3-.3-.4-.7-.4-1.1 0-.9.8-1.7 1.7-1.7H16c3.3 0 6-2.7 6-6 0-5.5-4.5-9.4-10-9.4z\" />\n          </svg>\n        </button>\n\n        {showColors && (\n          <div className=\"infinity-color-picker-dropdown\">\n            {colorThemes.map((color) => (\n              <button\n                key={color}\n                onClick={() => {\n                  setColorTheme(color);\n                  setShowColors(false);\n                }}\n                className={`infinity-color-option ${colorTheme === color ? 'active' : ''}`}\n                style={{ backgroundColor: COLOR_OPTIONS[color].color }}\n                aria-label={`${COLOR_OPTIONS[color].label} theme`}\n                title={COLOR_OPTIONS[color].label}\n              >\n                {colorTheme === color && (\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                    <polyline points=\"20 6 9 17 4 12\" />\n                  </svg>\n                )}\n              </button>\n            ))}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],
+  "mappings": "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",
+  "names": ["React", "useState", "useState", "React"]
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "infinity-theme",
+  "version": "1.3.0",
+  "description": "A lightweight React theme system with dark/light mode and 5 color themes using CSS custom properties",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./globals.css": "./dist/globals.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "browser": "dist/index.mjs",
+  "scripts": {
+    "build": "node build.mjs",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "theme",
+    "dark-mode",
+    "color-theme",
+    "css-variables",
+    "theme-provider",
+    "light-dark"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "esbuild": "^0.25.0"
+  }
+}