customizable-gradient-picker 1.1.0

package/dist/store/context.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { GradientPickerStore } from './types';
+export declare const GradientPickerStoreProvider: (props: {
+    store: GradientPickerStore;
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useGradientPickerStoreApi: () => GradientPickerStore;

package/dist/store/hooks.d.ts

@@ -0,0 +1,2 @@
+import { GradientPickerStoreState } from './types';
+export declare const useGradientPickerSelector: <T>(selector: (state: GradientPickerStoreState) => T, isEqual?: (a: T, b: T) => boolean) => T;

package/dist/store/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './store';
+export * from './context';
+export * from './hooks';

package/dist/store/store.d.ts

@@ -0,0 +1,8 @@
+import { GradientPickerStore } from './types';
+import { Stops } from '../types';
+export declare const createGradientPickerStore: (args: {
+    gradient: string;
+    onGradientChange: (g: string) => void;
+    updateDelay: number;
+    initialStops: Stops;
+}) => GradientPickerStore;

package/dist/store/types.d.ts

@@ -0,0 +1,40 @@
+import { GradientFormats } from '../components';
+import { Stops } from '../types';
+export type GradientPrefixes = Record<GradientFormats, string>;
+export type GradientPickerStoreState = {
+    rgba: string;
+    hue: number;
+    format: GradientFormats;
+    prefixes: GradientPrefixes;
+    angle: number;
+    gradient: string;
+    updateDelay: number;
+    activeStopId: string | null;
+    stops: Stops;
+    stopsOrder: string[];
+    draggingStopId: string | null;
+    draftPosition: number | null;
+    onGradientChange: (gradient: string) => void;
+};
+export type GradientPickerStore = {
+    getState: () => GradientPickerStoreState;
+    setState: (updater: (prev: GradientPickerStoreState) => GradientPickerStoreState) => void;
+    subscribe: (listener: () => void) => () => void;
+    setRgba: (rgba: string) => void;
+    setHue: (hue: number) => void;
+    setFormat: (format: GradientFormats) => void;
+    setPrefixes: (prefixes: GradientPrefixes) => void;
+    setAngle: (angle: number) => void;
+    setGradient: (gradient: string) => void;
+    setUpdateDelay: (delay: number) => void;
+    setOnGradientChange: (fn: (gradient: string) => void) => void;
+    setActiveStopId: (id: string | null) => void;
+    setStops: (updater: (prev: Stops) => Stops) => void;
+    setStopsOrder: (order: string[]) => void;
+    setDraggingStopId: (id: string | null) => void;
+    setDraftPosition: (pos: number | null) => void;
+    recomputeGradient: VoidFunction;
+    setActiveStopColor: (rgba: string) => void;
+    setHueForActiveStop: (hue: number) => void;
+    setSvForActiveStop: (s: number, v: number) => void;
+};

package/dist/types.d.ts

@@ -0,0 +1,37 @@
+import { ComponentType, ReactNode, SVGProps } from 'react';
+import { StopPositionProps, HexInputProps, RgbaInputProps, HueSliderProps, AlphaSliderProps, ColorSquareProps, EyeDropperProps, GradientSliderProps, DeleteStopProps, GradientFormatsProps, AngleInputProps, GradientStringProps, GradientPreviewProps, RgbaPreviewProps, HexPreviewProps, AlphaInputProps } from './components';
+export type Stop = {
+    position: number;
+    color: string;
+    id: string;
+};
+export type Stops = Record<string, Stop>;
+export type Nodes = 'color-square' | 'hue-slider' | 'alpha-slider' | 'alpha-input' | 'eye-dropper' | 'stop-position' | 'stop-delete' | 'gradient-slider' | 'gradient-formats' | 'gradient-preview' | 'gradient-string' | 'angle-input' | 'hex-input' | 'hex-preview' | 'rgba-input' | 'rgba-preview';
+export type GridItem = Nodes | {
+    className?: string;
+    children: (Nodes | GridItem)[];
+};
+export type Grid = GridItem[];
+export type ChildrenProps = {
+    colorSquare?: Partial<ColorSquareProps>;
+    deleteStop?: Partial<DeleteStopProps>;
+    eyeDropper?: Partial<EyeDropperProps>;
+    hueSlider?: Partial<HueSliderProps>;
+    stopPosition?: Partial<StopPositionProps>;
+    gradientSlider?: Partial<GradientSliderProps>;
+    gradientFormats?: Partial<GradientFormatsProps>;
+    gradientString?: Partial<GradientStringProps>;
+    gradientPreview?: Partial<GradientPreviewProps>;
+    alphaSlider?: Partial<AlphaSliderProps>;
+    alphaInput?: Partial<AlphaInputProps>;
+    angleInput?: Partial<AngleInputProps>;
+    hexInput?: Partial<HexInputProps>;
+    hexPreview?: Partial<HexPreviewProps>;
+    rgbaInput?: Partial<RgbaInputProps>;
+    rgbaPreview?: Partial<RgbaPreviewProps>;
+};
+export type Icon = Nullable<ComponentType<SVGProps<SVGSVGElement>> | ReactNode>;
+export type IconedButtonClassName = Partial<{
+    icon: string;
+    button: string;
+}>;

package/package.json

@@ -0,0 +1,78 @@
+{
+   "name": "customizable-gradient-picker",
+   "version": "1.1.0",
+   "private": false,
+   "type": "module",
+   "license": "MIT",
+   "sideEffects": [
+      "**/*.css",
+      "**/*.style.ts"
+   ],
+   "files": [
+      "dist",
+      "README.md"
+   ],
+   "main": "./dist/index.js",
+   "module": "./dist/index.js",
+   "types": "./dist/index.d.ts",
+   "exports": {
+      ".": {
+         "types": "./dist/index.d.ts",
+         "import": "./dist/index.js",
+         "default": "./dist/index.js"
+      }
+   },
+   "scripts": {
+      "dev": "next dev",
+      "build": "next build",
+      "start": "next start",
+      "lint": "eslint",
+      "build:lib": "vite build",
+      "prepublishOnly": "npm run build:lib",
+      "pack:check": "npm pack --dry-run",
+      "test:all": "concurrently -n jest \"npm run test\"",
+      "test": "jest --config jest.config.cjs",
+      "test:watch": "jest --config jest.config.cjs --watch",
+      "compose-code": "bash ./compose-code.tool.sh"
+   },
+   "peerDependencies": {
+      "react": ">=18",
+      "react-dom": ">=18"
+   },
+   "dependencies": {},
+   "devDependencies": {
+      "@eslint/css": "^0.10.0",
+      "@eslint/eslintrc": "^3.3.1",
+      "@eslint/js": "^9.31.0",
+      "@eslint/json": "^0.13.0",
+      "@eslint/markdown": "^7.0.0",
+      "@playwright/test": "^1.58.1",
+      "@tailwindcss/postcss": "^4",
+      "@testing-library/jest-dom": "^6.9.1",
+      "@testing-library/react": "^16.3.2",
+      "@types/jest": "^30.0.0",
+      "@types/node": "^20",
+      "@types/react": "^19",
+      "@types/react-dom": "^19",
+      "@vitejs/plugin-react": "^5.2.0",
+      "concurrently": "^9.2.1",
+      "eslint": "^9",
+      "eslint-config-next": "16.1.2",
+      "eslint-plugin-import": "^2.32.0",
+      "eslint-plugin-react": "^7.37.5",
+      "identity-obj-proxy": "^3.0.0",
+      "jest": "^30.2.0",
+      "jest-environment-jsdom": "^30.2.0",
+      "next": "16.1.2",
+      "prettier-plugin-tailwindcss": "^0.6.14",
+      "react": "19.2.3",
+      "react-dom": "19.2.3",
+      "tailwindcss": "^4",
+      "ts-jest": "^29.4.6",
+      "tsup": "^8.5.1",
+      "typescript": "^5.9.3",
+      "vite": "^7.3.1",
+      "vite-plugin-css-injected-by-js": "^4.0.1",
+      "vite-plugin-dts": "^4.5.4"
+   }
+}