{"_id":"@composy/color-picker-core","name":"@composy/color-picker-core","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@composy/color-picker-core","version":"0.0.1","description":"棰滆壊閫夋嫨鍣ㄥ簱锛屾敮鎸佸彇鑹层€佽皟鑹叉澘涓庢牸寮忚浆鎹?","keywords":["color-picker","color","palette"],"author":{"name":"LDesign Team"},"license":"MIT","repository":{"type":"git","url":"https://gitee.com/ldesign-v1/ldesign-color-picker"},"type":"module","sideEffects":false,"exports":{".":{"types":"./es/index.d.ts","import":"./es/index.js","require":"./lib/index.cjs","default":"./es/index.js"},"./core":{"types":"./es/core/index.d.ts","import":"./es/core/index.js","require":"./lib/core/index.cjs","default":"./es/core/index.js"},"./core/*":{"types":"./es/core/*.d.ts","import":"./es/core/*.js","require":"./lib/core/*.cjs","default":"./es/core/*.js"},"./types":{"types":"./es/types/index.d.ts","import":"./es/types/index.js","require":"./lib/types/index.cjs","default":"./es/types/index.js"},"./types/*":{"types":"./es/types/*.d.ts","import":"./es/types/*.js","require":"./lib/types/*.cjs","default":"./es/types/*.js"},"./utils":{"types":"./es/utils/index.d.ts","import":"./es/utils/index.js","require":"./lib/utils/index.cjs","default":"./es/utils/index.js"},"./utils/*":{"types":"./es/utils/*.d.ts","import":"./es/utils/*.js","require":"./lib/utils/*.cjs","default":"./es/utils/*.js"},"./styles":{"types":"./es/styles/index.d.ts","import":"./es/styles/index.js","require":"./lib/styles/index.cjs","default":"./es/styles/index.js"},"./styles/*":{"types":"./es/styles/*.d.ts","import":"./es/styles/*.js","require":"./lib/styles/*.cjs","default":"./es/styles/*.js"},"./package.json":"./package.json"},"main":"./lib/index.cjs","module":"./es/index.js","types":"./es/index.d.ts","unpkg":"./dist/index.min.js","jsdelivr":"./dist/index.min.js","scripts":{"build":"ldesign-builder build","postbuild":"node --experimental-strip-types ../../../../scripts/index.ts workspace:ensure-package-outputs --cwd .. --target core","dev":"ldesign-builder build --watch","lint":"eslint . --cache","lint:check":"eslint . --cache --max-warnings 0","lint:fix":"eslint . --cache --fix","type-check":"tsc --noEmit","test":"ltesting run:unit","test:run":"ltesting run:unit","test:watch":"ltesting run:unit --watch","test:coverage":"ltesting run:unit --coverage","test:changed":"ltesting run:unit --changed","test:failed":"ltesting run:unit --failed","test:ui":"ltesting dashboard"},"devDependencies":{"@antfu/eslint-config":"9.1.0","@composy/builder":"^0.0.1","@composy/testing":"^0.0.1","eslint":"10.7.0","typescript":"5.9.3"},"publishConfig":{"registry":"http://npm.longrise.cn:6286/"},"typings":"./es/index.d.ts","browser":"./dist/index.js","_id":"@composy/color-picker-core@0.0.1","_nodeVersion":"23.11.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-Myqe4bgvW0PQXzJrR/EQYKeJRpjdxeoo5T3QOg+3oNw0ZLrTxpKk2wBIbBgQLHOHiK8lhTF3/qfhke6IGdAS8g==","shasum":"0982c96024332fc16c27e6d830e3e089aa3702c8","tarball":"https://registry.npmjs.org/@composy/color-picker-core/-/color-picker-core-0.0.1.tgz","fileCount":168,"unpackedSize":1672594,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFd7HOHXZePlQ+KQkL9/qIxxJKllGAFtalN8Epr/adJiAiEA4t+sehziwuC2KSmUtsqwDRA5VOFwn9THEqw35patD08="}]},"_npmUser":{"name":"swimly","email":"979741120@qq.com"},"directories":{},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/color-picker-core_0.0.1_1786948351919_0.695427610461723"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-17T06:32:31.758Z","0.0.1":"2026-08-17T06:32:32.087Z","modified":"2026-08-17T06:32:32.398Z"},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"description":"棰滆壊閫夋嫨鍣ㄥ簱锛屾敮鎸佸彇鑹层€佽皟鑹叉澘涓庢牸寮忚浆鎹?","keywords":["color-picker","color","palette"],"repository":{"type":"git","url":"https://gitee.com/ldesign-v1/ldesign-color-picker"},"author":{"name":"LDesign Team"},"license":"MIT","readme":"# @composy/color-picker-core\n\nFramework-agnostic color picker core for LDesign. It provides HSV color picking, alpha editing, color format conversion, preset/history swatches, EyeDropper integration, gradient stop editing, CSS gradient output, shared class names, and token-backed styles.\n\n## Features\n\n- `ColorPicker`: HSV panel, hue/alpha sliders, HEX/RGB/HSL/HSV formats, presets, history, disabled/readonly states, and EyeDropper.\n- `GradientPicker`: linear/radial/conic gradients, sortable stops, keyboard stop movement, angle dial, preset gradients, CSS copy, and embedded color picker.\n- Standard class names use `ldesign-color-picker*` and `ldesign-gradient-picker*`.\n- Visible UI styles are generated from component CSS variables such as `--ldesign-color-picker-background-color`.\n- Default component variables reference LDesign runtime tokens from `packages/color` and `packages/size`, using `--ld-*`.\n- Builds generate `dist`, `es`, `esm`, and `lib` outputs.\n\n## Install\n\n```bash\npnpm add @composy/color-picker-core\n```\n\nConsumers should load LDesign color and size CSS variables before mounting:\n\n```ts\nimport '@composy/color-core/styles'\nimport '@composy/size-core/styles'\n```\n\n## Usage\n\n```ts\nimport {\n  ColorPicker,\n  GradientPicker,\n  colorPickerClassNames,\n  createColorPickerStylesheet,\n} from '@composy/color-picker-core'\n\nconst picker = new ColorPicker({\n  container: '#color-picker',\n  defaultColor: '#1677ff',\n  format: 'hex',\n  showAlpha: true,\n  history: ['#1677FF'],\n})\n\npicker.on('change', ({ color, source }) => {\n  console.log(source, color.hex, picker.getColorString())\n})\n\nconst gradient = new GradientPicker({\n  container: '#gradient-picker',\n  type: 'linear',\n  angle: 90,\n  stops: [\n    { color: '#1677FF', position: 0 },\n    { color: '#22C55E', position: 100 },\n  ],\n})\n\nconsole.log(gradient.getCSSString())\nconsole.log(colorPickerClassNames.root)\nconsole.log(createColorPickerStylesheet())\n```\n\n## Styling Contract\n\nCore injects one stylesheet by default. Disable it with `autoInjectStyles: false` when the host app owns style injection.\n\n```ts\nimport {\n  ensureColorPickerStyles,\n  createColorPickerCssVariables,\n} from '@composy/color-picker-core/styles'\n\nensureColorPickerStyles()\n\nconst vars = createColorPickerCssVariables({\n  variables: {\n    primaryColor: 'var(--ld-success-default)',\n    radius: 'var(--ld-radius-xl)',\n  },\n})\n```\n\nAll public class names are exported from `styles/classNames` and use BEM-style names:\n\n- `ldesign-color-picker`\n- `ldesign-color-picker__panel`\n- `ldesign-color-picker__input`\n- `ldesign-gradient-picker`\n- `ldesign-gradient-picker__stop`\n- `ldesign-gradient-picker--active`\n\n## API Notes\n\n- `setColor(input)` returns `false` and emits `error` for invalid color input.\n- `setDisabled()` and `setReadonly()` update user interaction state without destroying the instance.\n- `updateOptions()` supports runtime updates for width, format, disabled, readonly, history, and theme variables.\n- Gradient `modelValue` is emitted as CSS text; use `type`, `angle`, and `stops` to update gradient state without lossy CSS parsing.\n\n## Scripts\n\n```bash\npnpm run type-check\npnpm run build\n```\n\nExpected build outputs:\n\n- `dist/index.js`\n- `dist/index.min.js`\n- `es/index.js`\n- `esm/index.js`\n- `lib/index.cjs`\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-53f31f07ebfeca3497d832595bc37f15"}