@razzusharma/accent-theme 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Tourgasm
+
+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,201 @@
+# @tourgasm/accent-theme
+
+A React hook and provider for dynamic accent color theming. Perfect for adding customizable color themes to your React applications.
+
+## Features
+
+- 🎨 **8 Built-in Colors** - Teal, Blue, Purple, Rose, Amber, Emerald, Indigo, Cyan
+- 🎯 **TypeScript Support** - Fully typed with generics
+- 💾 **Persistence** - Automatically saves user preference to localStorage
+- 🌓 **Dark Mode Compatible** - Works seamlessly with dark mode
+- 🎛️ **Customizable** - Add your own custom colors
+- 📦 **Zero Dependencies** - Only peer dependencies on React
+- 🪶 **Lightweight** - ~3KB gzipped
+
+## Installation
+
+```bash
+npm install @tourgasm/accent-theme
+# or
+yarn add @tourgasm/accent-theme
+# or
+pnpm add @tourgasm/accent-theme
+```
+
+## Quick Start
+
+### 1. Wrap your app with the provider
+
+```tsx
+import { AccentThemeProvider } from '@tourgasm/accent-theme';
+
+function App() {
+  return (
+    <AccentThemeProvider>
+      <YourApp />
+    </AccentThemeProvider>
+  );
+}
+```
+
+### 2. Use the hook in your components
+
+```tsx
+import { useAccentTheme, useAccentColor } from '@tourgasm/accent-theme';
+
+function MyComponent() {
+  const { accentColor, setAccentColor } = useAccentTheme();
+  const { primary, light, gradient } = useAccentColor();
+
+  return (
+    <div style={{ color: primary }}>
+      <h1>Current theme: {accentColor}</h1>
+      <button onClick={() => setAccentColor('blue')}>
+        Switch to Blue
+      </button>
+    </div>
+  );
+}
+```
+
+### 3. Use the built-in color picker
+
+```tsx
+import { AccentColorPicker } from '@tourgasm/accent-theme';
+
+function Settings() {
+  return (
+    <div>
+      <h2>Choose your theme</h2>
+      <AccentColorPicker variant="inline" columns={4} />
+    </div>
+  );
+}
+```
+
+## Configuration
+
+### Provider Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `defaultColor` | `string` | `'teal'` | Default accent color |
+| `customColors` | `object` | `undefined` | Add custom colors |
+| `storageKey` | `string` | `'accent-color'` | localStorage key |
+| `cssVariablePrefix` | `string` | `''` | Prefix for CSS variables |
+
+### Custom Colors
+
+```tsx
+import { AccentThemeProvider } from '@tourgasm/accent-theme';
+
+const customColors = {
+  coral: {
+    name: "Coral",
+    primary: "16 100% 60%",
+    primaryForeground: "0 0% 100%",
+    light: "16 100% 70%",
+    dark: "16 100% 50%",
+    gradient: "from-orange-400 to-red-500",
+  },
+};
+
+function App() {
+  return (
+    <AccentThemeProvider 
+      defaultColor="coral"
+      customColors={customColors}
+    >
+      <YourApp />
+    </AccentThemeProvider>
+  );
+}
+```
+
+## CSS Variables
+
+The library sets these CSS custom properties on the root element:
+
+```css
+:root {
+  --primary: 174 72% 35%;        /* HSL values */
+  --primary-foreground: 210 40% 98%;
+  --accent: 174 72% 45%;
+  --ring: 174 72% 45%;
+}
+```
+
+Use them in your CSS/Tailwind:
+
+```css
+.my-button {
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+}
+```
+
+```html
+<button class="bg-[hsl(var(--primary))] text-white">
+  Click me
+</button>
+```
+
+## API Reference
+
+### `useAccentTheme()`
+
+```ts
+const {
+  accentColor,      // Current color name
+  setAccentColor,   // Function to change color
+  accentConfig,     // Full color config object
+  mounted,          // Hydration flag
+} = useAccentTheme();
+```
+
+### `useAccentColor()`
+
+```ts
+const {
+  primary,          // hsl() string for primary color
+  primaryForeground,// hsl() string for text color
+  light,            // hsl() string for light variant
+  dark,             // hsl() string for dark variant
+  gradient,         // Tailwind gradient class
+  mounted,          // Hydration flag
+} = useAccentColor();
+```
+
+### `AccentColorPicker`
+
+```tsx
+<AccentColorPicker 
+  size="md"           // 'sm' | 'md' | 'lg'
+  variant="dropdown"  // 'dropdown' | 'inline'
+  columns={4}         // Number of columns for inline
+  onChange={(color) => console.log(color)}
+/>
+```
+
+## Tailwind CSS Integration
+
+Add to your `tailwind.config.js`:
+
+```js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: 'hsl(var(--primary))',
+        'primary-foreground': 'hsl(var(--primary-foreground))',
+        accent: 'hsl(var(--accent))',
+        ring: 'hsl(var(--ring))',
+      },
+    },
+  },
+}
+```
+
+## License
+
+MIT © Tourgasm

package/dist/index.d.mts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+type AccentColor = "teal" | "blue" | "purple" | "rose" | "amber" | "emerald" | "indigo" | "cyan" | string;
+interface AccentColorConfig {
+    name: string;
+    primary: string;
+    primaryForeground: string;
+    light: string;
+    dark: string;
+    gradient: string;
+}
+interface AccentThemeContextType {
+    accentColor: AccentColor;
+    setAccentColor: (color: AccentColor) => void;
+    accentConfig: AccentColorConfig;
+    mounted: boolean;
+}
+interface AccentThemeProviderProps {
+    children: ReactNode;
+    defaultColor?: AccentColor;
+    customColors?: Record<string, AccentColorConfig>;
+    storageKey?: string;
+    cssVariablePrefix?: string;
+}
+
+declare function AccentThemeProvider({ children, defaultColor, customColors, storageKey, cssVariablePrefix }: AccentThemeProviderProps): React.FunctionComponentElement<React.ProviderProps<AccentThemeContextType>>;
+declare function useAccentTheme(): AccentThemeContextType;
+declare function useAccentColor(): {
+    primary: string;
+    primaryForeground: string;
+    light: string;
+    dark: string;
+    gradient: string;
+    mounted: boolean;
+};
+
+interface AccentColorPickerProps {
+    size?: "sm" | "md" | "lg";
+    variant?: "dropdown" | "inline";
+    columns?: number;
+    className?: string;
+    onChange?: (color: AccentColor) => void;
+}
+declare function AccentColorPicker({ size, variant, columns, className, onChange, }: AccentColorPickerProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+interface AccentColorSwatchProps {
+    color: AccentColor;
+    isSelected?: boolean;
+    onClick?: () => void;
+    size?: "sm" | "md" | "lg";
+}
+declare function AccentColorSwatch({ color, isSelected, onClick, size }: AccentColorSwatchProps): React.DetailedReactHTMLElement<{
+    onClick: (() => void) | undefined;
+    className: string;
+    style: {
+        [x: string]: string;
+        background: string;
+    };
+    title: string;
+}, HTMLElement> | null;
+
+declare const defaultAccentColors: Record<AccentColor, AccentColorConfig>;
+
+declare function generateCSSVariables(config: AccentColorConfig, prefix?: string): Record<string, string>;
+declare function applyCSSVariables(element: HTMLElement, variables: Record<string, string>): void;
+declare function createGradient(config: AccentColorConfig, direction?: string): string;
+declare function createShadow(config: AccentColorConfig, intensity?: number, blur?: number): string;
+declare function adjustHSL(hsl: string, adjustments: {
+    hue?: number;
+    saturation?: number;
+    lightness?: number;
+}): string;
+declare function getContrastColor(hsl: string, threshold?: number): "black" | "white";
+declare function isClient(): boolean;
+declare const storage: {
+    get: (key: string, defaultValue?: string) => string | undefined;
+    set: (key: string, value: string) => void;
+    remove: (key: string) => void;
+};
+
+export { type AccentColor, type AccentColorConfig, AccentColorPicker, AccentColorSwatch, type AccentThemeContextType, AccentThemeProvider, type AccentThemeProviderProps, adjustHSL, applyCSSVariables, createGradient, createShadow, defaultAccentColors, generateCSSVariables, getContrastColor, isClient, storage, useAccentColor, useAccentTheme };

package/dist/index.d.ts

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+type AccentColor = "teal" | "blue" | "purple" | "rose" | "amber" | "emerald" | "indigo" | "cyan" | string;
+interface AccentColorConfig {
+    name: string;
+    primary: string;
+    primaryForeground: string;
+    light: string;
+    dark: string;
+    gradient: string;
+}
+interface AccentThemeContextType {
+    accentColor: AccentColor;
+    setAccentColor: (color: AccentColor) => void;
+    accentConfig: AccentColorConfig;
+    mounted: boolean;
+}
+interface AccentThemeProviderProps {
+    children: ReactNode;
+    defaultColor?: AccentColor;
+    customColors?: Record<string, AccentColorConfig>;
+    storageKey?: string;
+    cssVariablePrefix?: string;
+}
+
+declare function AccentThemeProvider({ children, defaultColor, customColors, storageKey, cssVariablePrefix }: AccentThemeProviderProps): React.FunctionComponentElement<React.ProviderProps<AccentThemeContextType>>;
+declare function useAccentTheme(): AccentThemeContextType;
+declare function useAccentColor(): {
+    primary: string;
+    primaryForeground: string;
+    light: string;
+    dark: string;
+    gradient: string;
+    mounted: boolean;
+};
+
+interface AccentColorPickerProps {
+    size?: "sm" | "md" | "lg";
+    variant?: "dropdown" | "inline";
+    columns?: number;
+    className?: string;
+    onChange?: (color: AccentColor) => void;
+}
+declare function AccentColorPicker({ size, variant, columns, className, onChange, }: AccentColorPickerProps): React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+interface AccentColorSwatchProps {
+    color: AccentColor;
+    isSelected?: boolean;
+    onClick?: () => void;
+    size?: "sm" | "md" | "lg";
+}
+declare function AccentColorSwatch({ color, isSelected, onClick, size }: AccentColorSwatchProps): React.DetailedReactHTMLElement<{
+    onClick: (() => void) | undefined;
+    className: string;
+    style: {
+        [x: string]: string;
+        background: string;
+    };
+    title: string;
+}, HTMLElement> | null;
+
+declare const defaultAccentColors: Record<AccentColor, AccentColorConfig>;
+
+declare function generateCSSVariables(config: AccentColorConfig, prefix?: string): Record<string, string>;
+declare function applyCSSVariables(element: HTMLElement, variables: Record<string, string>): void;
+declare function createGradient(config: AccentColorConfig, direction?: string): string;
+declare function createShadow(config: AccentColorConfig, intensity?: number, blur?: number): string;
+declare function adjustHSL(hsl: string, adjustments: {
+    hue?: number;
+    saturation?: number;
+    lightness?: number;
+}): string;
+declare function getContrastColor(hsl: string, threshold?: number): "black" | "white";
+declare function isClient(): boolean;
+declare const storage: {
+    get: (key: string, defaultValue?: string) => string | undefined;
+    set: (key: string, value: string) => void;
+    remove: (key: string) => void;
+};
+
+export { type AccentColor, type AccentColorConfig, AccentColorPicker, AccentColorSwatch, type AccentThemeContextType, AccentThemeProvider, type AccentThemeProviderProps, adjustHSL, applyCSSVariables, createGradient, createShadow, defaultAccentColors, generateCSSVariables, getContrastColor, isClient, storage, useAccentColor, useAccentTheme };