@razzusharma/accent-theme 2.0.2 → 2.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +38 -0
  2. package/dist/index.d.mts +25 -38
  3. package/dist/index.d.ts +25 -38
  4. package/dist/index.js +414 -22
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +413 -22
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -23,6 +23,25 @@ yarn add @razzusharma/accent-theme
23
23
  pnpm add @razzusharma/accent-theme
24
24
  ```
25
25
 
26
+ ## Troubleshooting
27
+
28
+ ### Type error: `ReactNode is not assignable` from a local path
29
+
30
+ If you are testing with `npm link` or a direct folder install, TypeScript can load two different React type trees.
31
+ Use a packed tarball install instead (this matches real npm usage):
32
+
33
+ ```bash
34
+ # in accent-theme repo
35
+ npm run build
36
+ npm pack --pack-destination /tmp
37
+
38
+ # in your app repo
39
+ npm uninstall @razzusharma/accent-theme
40
+ npm install /tmp/razzusharma-accent-theme-2.0.2.tgz
41
+ ```
42
+
43
+ Then restart your TS server/editor and dev server.
44
+
26
45
  ## Quick Start (It Just Works!)
27
46
 
28
47
  ### 1. Wrap your app with the provider
@@ -83,6 +102,25 @@ import { AccentColorPicker } from '@razzusharma/accent-theme';
83
102
  - `onChange`: Callback when color changes
84
103
  - `className`: Custom classes
85
104
 
105
+ ### AccentThemeWidget
106
+
107
+ Floating glass-style theme panel (like your screenshot), ready to reuse:
108
+
109
+ ```tsx
110
+ import { AccentThemeWidget } from '@razzusharma/accent-theme';
111
+
112
+ <AccentThemeWidget position="top-right" />
113
+ ```
114
+
115
+ **Props:**
116
+ - `position`: `"top-right" | "top-left" | "bottom-right" | "bottom-left" | "inline"`
117
+ - `offset`: Number (viewport edge spacing in px)
118
+ - `collapsible`: Show compact trigger button
119
+ - `defaultOpen`: Initial open state
120
+ - `showCurrent`: Show current color footer
121
+ - `title` / `subtitle`: Panel text
122
+ - `onChange`: Callback when color changes
123
+
86
124
  ### AccentColorSwatches
87
125
 
88
126
  Horizontal row of color dots:
package/dist/index.d.mts CHANGED
@@ -1,5 +1,4 @@
1
1
  import * as React from 'react';
2
- import { ReactNode } from 'react';
3
2
 
4
3
  type AccentColor = "teal" | "blue" | "purple" | "rose" | "amber" | "emerald" | "indigo" | "cyan" | string;
5
4
  interface AccentColorConfig {
@@ -20,7 +19,7 @@ interface AccentThemeContextType {
20
19
  resetToDefault: () => void;
21
20
  }
22
21
  interface AccentThemeProviderProps {
23
- children: ReactNode;
22
+ children: React.ReactNode;
24
23
  defaultColor?: AccentColor;
25
24
  customColors?: Record<string, AccentColorConfig>;
26
25
  storageKey?: string;
@@ -79,8 +78,19 @@ interface AccentColorSwatchProps {
79
78
  className?: string;
80
79
  showCheckmark?: boolean;
81
80
  }
81
+ interface AccentThemeWidgetProps {
82
+ className?: string;
83
+ title?: string;
84
+ subtitle?: string;
85
+ position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "inline";
86
+ offset?: number;
87
+ defaultOpen?: boolean;
88
+ collapsible?: boolean;
89
+ showCurrent?: boolean;
90
+ onChange?: (color: AccentColor) => void;
91
+ }
82
92
 
83
- declare function AccentThemeProvider({ children, defaultColor, customColors, storageKey, cssVariablePrefix, injectCSS, enableDarkMode, }: AccentThemeProviderProps): React.FunctionComponentElement<React.ProviderProps<AccentThemeContextType>>;
93
+ declare function AccentThemeProvider({ children, defaultColor, customColors, storageKey, cssVariablePrefix, injectCSS, enableDarkMode, }: AccentThemeProviderProps): React.JSX.Element;
84
94
  declare function useAccentTheme(): AccentThemeContextType;
85
95
  declare function useAccentColor(): {
86
96
  primary: string;
@@ -93,39 +103,16 @@ declare function useAccentColor(): {
93
103
  };
94
104
  declare function useAccentDarkMode(): boolean;
95
105
 
96
- declare function AccentColorSwatch({ color, isSelected, onClick, size, className, showCheckmark, }: AccentColorSwatchProps): React.DetailedReactHTMLElement<{
97
- type: string;
98
- onClick: (() => void) | undefined;
99
- className: string;
100
- style: {
101
- [x: string]: string;
102
- background: string;
103
- };
104
- title: string;
105
- "aria-label": string;
106
- "aria-pressed": boolean | undefined;
107
- }, HTMLElement> | null;
108
- declare function AccentColorPicker({ size, variant, columns, className, align, onChange, label, showColorName, }: AccentColorPickerProps): React.DetailedReactHTMLElement<{
109
- className: string;
110
- }, HTMLElement> | React.FunctionComponentElement<AccentColorMenuProps>;
111
- declare function AccentColorSwatches({ className, size, onChange, showCheckmark, gap, }: AccentColorSwatchesProps): React.DetailedReactHTMLElement<{
112
- className: string;
113
- }, HTMLElement>;
114
- declare function AccentColorMenu({ className, size: _size, onChange, align, label, }: AccentColorMenuProps): React.DetailedReactHTMLElement<{
115
- className: string;
116
- }, HTMLElement>;
117
- declare function AccentColorButton({ className, size, onClick, showLabel, buttonVariant, }: AccentColorButtonProps): React.DetailedReactHTMLElement<{
118
- className: string;
119
- }, HTMLElement>;
120
- declare function AccentThemeReset({ className, size, text, onReset, variant, }: AccentThemeResetProps): React.DetailedReactHTMLElement<{
121
- className: string;
122
- }, HTMLElement>;
123
- declare function CurrentAccentIndicator({ className, size, showName, pulseOnChange, }: CurrentAccentIndicatorProps): React.DetailedReactHTMLElement<{
124
- className: string;
125
- }, HTMLElement>;
126
- declare function AccentColorGrid({ className, size, columns, onChange, showLabels, gap, }: AccentColorGridProps): React.DetailedReactHTMLElement<{
127
- className: string;
128
- }, HTMLElement>;
106
+ declare function AccentColorSwatch({ color, isSelected, onClick, size, className, showCheckmark, }: AccentColorSwatchProps): React.JSX.Element | null;
107
+ declare function AccentColorPicker({ size, variant, columns, className, align, onChange, label, showColorName, }: AccentColorPickerProps): React.JSX.Element;
108
+ declare function AccentColorSwatches({ className, size, onChange, showCheckmark, gap, }: AccentColorSwatchesProps): React.JSX.Element;
109
+ declare function AccentColorMenu({ className, size: _size, onChange, align, label, }: AccentColorMenuProps): React.JSX.Element;
110
+ declare function AccentColorButton({ className, size, onClick, showLabel, buttonVariant, }: AccentColorButtonProps): React.JSX.Element;
111
+ declare function AccentThemeReset({ className, size, text, onReset, variant, }: AccentThemeResetProps): React.JSX.Element;
112
+ declare function CurrentAccentIndicator({ className, size, showName, pulseOnChange, }: CurrentAccentIndicatorProps): React.JSX.Element;
113
+ declare function AccentColorGrid({ className, size, columns, onChange, showLabels, gap, }: AccentColorGridProps): React.JSX.Element;
114
+
115
+ declare function AccentThemeWidget({ className, title, subtitle, position, offset, defaultOpen, collapsible, showCurrent, onChange, }: AccentThemeWidgetProps): React.JSX.Element;
129
116
 
130
117
  declare const defaultAccentColors: Record<AccentColor, AccentColorConfig>;
131
118
  declare function mergeColors(defaultColors: Record<string, AccentColorConfig>, customColors?: Record<string, AccentColorConfig>): Record<string, AccentColorConfig>;
@@ -147,6 +134,6 @@ declare const storage: {
147
134
  remove: (key: string) => void;
148
135
  };
149
136
 
150
- declare const VERSION = "2.0.0";
137
+ declare const VERSION = "2.0.2";
151
138
 
152
- export { type AccentColor, AccentColorButton, type AccentColorButtonProps, type AccentColorConfig, AccentColorGrid, type AccentColorGridProps, AccentColorMenu, type AccentColorMenuProps, AccentColorPicker, type AccentColorPickerProps, AccentColorSwatch, type AccentColorSwatchProps, AccentColorSwatches, type AccentColorSwatchesProps, type AccentThemeContextType, AccentThemeProvider, type AccentThemeProviderProps, AccentThemeReset, type AccentThemeResetProps, type BaseComponentProps, type ComponentSize, CurrentAccentIndicator, type CurrentAccentIndicatorProps, VERSION, adjustHSL, applyCSSVariables, createGradient, createShadow, defaultAccentColors, generateCSSVariables, getContrastColor, isClient, mergeColors, storage, useAccentColor, useAccentDarkMode, useAccentTheme };
139
+ export { type AccentColor, AccentColorButton, type AccentColorButtonProps, type AccentColorConfig, AccentColorGrid, type AccentColorGridProps, AccentColorMenu, type AccentColorMenuProps, AccentColorPicker, type AccentColorPickerProps, AccentColorSwatch, type AccentColorSwatchProps, AccentColorSwatches, type AccentColorSwatchesProps, type AccentThemeContextType, AccentThemeProvider, type AccentThemeProviderProps, AccentThemeReset, type AccentThemeResetProps, AccentThemeWidget, type AccentThemeWidgetProps, type BaseComponentProps, type ComponentSize, CurrentAccentIndicator, type CurrentAccentIndicatorProps, VERSION, adjustHSL, applyCSSVariables, createGradient, createShadow, defaultAccentColors, generateCSSVariables, getContrastColor, isClient, mergeColors, storage, useAccentColor, useAccentDarkMode, useAccentTheme };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import * as React from 'react';
2
- import { ReactNode } from 'react';
3
2
 
4
3
  type AccentColor = "teal" | "blue" | "purple" | "rose" | "amber" | "emerald" | "indigo" | "cyan" | string;
5
4
  interface AccentColorConfig {
@@ -20,7 +19,7 @@ interface AccentThemeContextType {
20
19
  resetToDefault: () => void;
21
20
  }
22
21
  interface AccentThemeProviderProps {
23
- children: ReactNode;
22
+ children: React.ReactNode;
24
23
  defaultColor?: AccentColor;
25
24
  customColors?: Record<string, AccentColorConfig>;
26
25
  storageKey?: string;
@@ -79,8 +78,19 @@ interface AccentColorSwatchProps {
79
78
  className?: string;
80
79
  showCheckmark?: boolean;
81
80
  }
81
+ interface AccentThemeWidgetProps {
82
+ className?: string;
83
+ title?: string;
84
+ subtitle?: string;
85
+ position?: "top-right" | "top-left" | "bottom-right" | "bottom-left" | "inline";
86
+ offset?: number;
87
+ defaultOpen?: boolean;
88
+ collapsible?: boolean;
89
+ showCurrent?: boolean;
90
+ onChange?: (color: AccentColor) => void;
91
+ }
82
92
 
83
- declare function AccentThemeProvider({ children, defaultColor, customColors, storageKey, cssVariablePrefix, injectCSS, enableDarkMode, }: AccentThemeProviderProps): React.FunctionComponentElement<React.ProviderProps<AccentThemeContextType>>;
93
+ declare function AccentThemeProvider({ children, defaultColor, customColors, storageKey, cssVariablePrefix, injectCSS, enableDarkMode, }: AccentThemeProviderProps): React.JSX.Element;
84
94
  declare function useAccentTheme(): AccentThemeContextType;
85
95
  declare function useAccentColor(): {
86
96
  primary: string;
@@ -93,39 +103,16 @@ declare function useAccentColor(): {
93
103
  };
94
104
  declare function useAccentDarkMode(): boolean;
95
105
 
96
- declare function AccentColorSwatch({ color, isSelected, onClick, size, className, showCheckmark, }: AccentColorSwatchProps): React.DetailedReactHTMLElement<{
97
- type: string;
98
- onClick: (() => void) | undefined;
99
- className: string;
100
- style: {
101
- [x: string]: string;
102
- background: string;
103
- };
104
- title: string;
105
- "aria-label": string;
106
- "aria-pressed": boolean | undefined;
107
- }, HTMLElement> | null;
108
- declare function AccentColorPicker({ size, variant, columns, className, align, onChange, label, showColorName, }: AccentColorPickerProps): React.DetailedReactHTMLElement<{
109
- className: string;
110
- }, HTMLElement> | React.FunctionComponentElement<AccentColorMenuProps>;
111
- declare function AccentColorSwatches({ className, size, onChange, showCheckmark, gap, }: AccentColorSwatchesProps): React.DetailedReactHTMLElement<{
112
- className: string;
113
- }, HTMLElement>;
114
- declare function AccentColorMenu({ className, size: _size, onChange, align, label, }: AccentColorMenuProps): React.DetailedReactHTMLElement<{
115
- className: string;
116
- }, HTMLElement>;
117
- declare function AccentColorButton({ className, size, onClick, showLabel, buttonVariant, }: AccentColorButtonProps): React.DetailedReactHTMLElement<{
118
- className: string;
119
- }, HTMLElement>;
120
- declare function AccentThemeReset({ className, size, text, onReset, variant, }: AccentThemeResetProps): React.DetailedReactHTMLElement<{
121
- className: string;
122
- }, HTMLElement>;
123
- declare function CurrentAccentIndicator({ className, size, showName, pulseOnChange, }: CurrentAccentIndicatorProps): React.DetailedReactHTMLElement<{
124
- className: string;
125
- }, HTMLElement>;
126
- declare function AccentColorGrid({ className, size, columns, onChange, showLabels, gap, }: AccentColorGridProps): React.DetailedReactHTMLElement<{
127
- className: string;
128
- }, HTMLElement>;
106
+ declare function AccentColorSwatch({ color, isSelected, onClick, size, className, showCheckmark, }: AccentColorSwatchProps): React.JSX.Element | null;
107
+ declare function AccentColorPicker({ size, variant, columns, className, align, onChange, label, showColorName, }: AccentColorPickerProps): React.JSX.Element;
108
+ declare function AccentColorSwatches({ className, size, onChange, showCheckmark, gap, }: AccentColorSwatchesProps): React.JSX.Element;
109
+ declare function AccentColorMenu({ className, size: _size, onChange, align, label, }: AccentColorMenuProps): React.JSX.Element;
110
+ declare function AccentColorButton({ className, size, onClick, showLabel, buttonVariant, }: AccentColorButtonProps): React.JSX.Element;
111
+ declare function AccentThemeReset({ className, size, text, onReset, variant, }: AccentThemeResetProps): React.JSX.Element;
112
+ declare function CurrentAccentIndicator({ className, size, showName, pulseOnChange, }: CurrentAccentIndicatorProps): React.JSX.Element;
113
+ declare function AccentColorGrid({ className, size, columns, onChange, showLabels, gap, }: AccentColorGridProps): React.JSX.Element;
114
+
115
+ declare function AccentThemeWidget({ className, title, subtitle, position, offset, defaultOpen, collapsible, showCurrent, onChange, }: AccentThemeWidgetProps): React.JSX.Element;
129
116
 
130
117
  declare const defaultAccentColors: Record<AccentColor, AccentColorConfig>;
131
118
  declare function mergeColors(defaultColors: Record<string, AccentColorConfig>, customColors?: Record<string, AccentColorConfig>): Record<string, AccentColorConfig>;
@@ -147,6 +134,6 @@ declare const storage: {
147
134
  remove: (key: string) => void;
148
135
  };
149
136
 
150
- declare const VERSION = "2.0.0";
137
+ declare const VERSION = "2.0.2";
151
138
 
152
- export { type AccentColor, AccentColorButton, type AccentColorButtonProps, type AccentColorConfig, AccentColorGrid, type AccentColorGridProps, AccentColorMenu, type AccentColorMenuProps, AccentColorPicker, type AccentColorPickerProps, AccentColorSwatch, type AccentColorSwatchProps, AccentColorSwatches, type AccentColorSwatchesProps, type AccentThemeContextType, AccentThemeProvider, type AccentThemeProviderProps, AccentThemeReset, type AccentThemeResetProps, type BaseComponentProps, type ComponentSize, CurrentAccentIndicator, type CurrentAccentIndicatorProps, VERSION, adjustHSL, applyCSSVariables, createGradient, createShadow, defaultAccentColors, generateCSSVariables, getContrastColor, isClient, mergeColors, storage, useAccentColor, useAccentDarkMode, useAccentTheme };
139
+ export { type AccentColor, AccentColorButton, type AccentColorButtonProps, type AccentColorConfig, AccentColorGrid, type AccentColorGridProps, AccentColorMenu, type AccentColorMenuProps, AccentColorPicker, type AccentColorPickerProps, AccentColorSwatch, type AccentColorSwatchProps, AccentColorSwatches, type AccentColorSwatchesProps, type AccentThemeContextType, AccentThemeProvider, type AccentThemeProviderProps, AccentThemeReset, type AccentThemeResetProps, AccentThemeWidget, type AccentThemeWidgetProps, type BaseComponentProps, type ComponentSize, CurrentAccentIndicator, type CurrentAccentIndicatorProps, VERSION, adjustHSL, applyCSSVariables, createGradient, createShadow, defaultAccentColors, generateCSSVariables, getContrastColor, isClient, mergeColors, storage, useAccentColor, useAccentDarkMode, useAccentTheme };