[
  {
    "path": ".eslintignore",
    "content": "# Dependencies\n/node_modules\n\n# Production\n/dist\n"
  },
  {
    "path": ".eslintrc",
    "content": "{\n  \"parser\": \"@typescript-eslint/parser\",\n  \"parserOptions\": {\n    \"project\": [\"./tsconfig.json\"],\n    \"ecmaVersion\": \"latest\",\n    \"sourceType\": \"module\",\n    \"ecmaFeatures\": {\n      \"jsx\": true\n    }\n  },\n  \"settings\": {\n    \"react\": {\n      \"version\": \"detect\"\n    }\n  },\n  \"env\": {\n    \"es2022\": true,\n    \"browser\": true\n  },\n  \"plugins\": [\n    \"@typescript-eslint\",\n    \"prettier\",\n    \"react\",\n    \"react-hooks\"\n  ],\n  \"rules\": {\n    // ESLint\n    \"array-callback-return\": \"error\",\n    \"constructor-super\": \"off\",\n    \"for-direction\": \"error\",\n    \"getter-return\": \"off\",\n    \"no-async-promise-executor\": \"error\",\n    \"no-await-in-loop\": \"off\",\n    \"no-class-assign\": \"error\",\n    \"no-compare-neg-zero\": \"error\",\n    \"no-cond-assign\": [\"error\", \"always\"],\n    \"no-const-assign\": \"off\",\n    \"no-constant-binary-expression\": \"error\",\n    \"no-constant-condition\": \"error\",\n    \"no-constructor-return\": \"error\",\n    \"no-control-regex\": \"error\",\n    \"no-debugger\": \"error\",\n    \"no-dupe-args\": \"off\",\n    \"no-dupe-class-members\": \"off\",\n    \"no-dupe-else-if\": \"error\",\n    \"no-dupe-keys\": \"off\",\n    \"no-duplicate-case\": \"error\",\n    \"no-duplicate-imports\": \"error\",\n    \"no-empty-character-class\": \"error\",\n    \"no-empty-pattern\": \"error\",\n    \"no-ex-assign\": \"error\",\n    \"no-fallthrough\": \"error\",\n    \"no-func-assign\": \"off\",\n    \"no-import-assign\": \"off\",\n    \"no-inner-declarations\": \"error\",\n    \"no-invalid-regexp\": \"error\",\n    \"no-irregular-whitespace\": \"error\",\n    \"no-loss-of-precision\": \"off\",\n    \"no-misleading-character-class\": \"error\",\n    \"no-new-native-nonconstructor\": \"error\",\n    \"no-new-symbol\": \"off\",\n    \"no-obj-calls\": \"off\",\n    \"no-promise-executor-return\": \"error\",\n    \"no-prototype-builtins\": \"error\",\n    \"no-self-assign\": \"error\",\n    \"no-self-compare\": \"error\",\n    \"no-setter-return\": \"off\",\n    \"no-sparse-arrays\": \"error\",\n    \"no-template-curly-in-string\": \"error\",\n    \"no-this-before-super\": \"off\",\n    \"no-undef\": \"off\",\n    \"no-unexpected-multiline\": \"off\",\n    \"no-unmodified-loop-condition\": \"error\",\n    \"no-unreachable\": \"off\",\n    \"no-unreachable-loop\": \"error\",\n    \"no-unsafe-finally\": \"error\",\n    \"no-unsafe-negation\": \"off\",\n    \"no-unsafe-optional-chaining\": \"error\",\n    \"no-unused-private-class-members\": \"error\",\n    \"no-unused-vars\": \"off\",\n    \"no-use-before-define\": \"off\",\n    \"no-useless-backreference\": \"error\",\n    \"require-atomic-updates\": \"error\",\n    \"use-isnan\": \"error\",\n    \"valid-typeof\": \"off\",\n    \"accessor-pairs\": \"off\",\n    \"arrow-body-style\": \"off\",\n    \"block-scoped-var\": \"error\",\n    \"camelcase\": \"off\",\n    \"capitalized-comments\": \"error\",\n    \"class-methods-use-this\": \"off\",\n    \"complexity\": \"off\",\n    \"consistent-return\": \"off\",\n    \"consistent-this\": \"off\",\n    \"curly\": \"off\",\n    \"default-case\": \"off\",\n    \"default-case-last\": \"error\",\n    \"default-param-last\": \"off\",\n    \"dot-notation\": \"off\",\n    \"eqeqeq\": [\"error\", \"smart\"],\n    \"func-name-matching\": \"off\",\n    \"func-names\": [\"error\", \"as-needed\"],\n    \"grouped-accessor-pairs\": [\"error\", \"getBeforeSet\"],\n    \"guard-for-in\": \"off\",\n    \"id-denylist\": \"off\",\n    \"id-length\": \"off\",\n    \"id-match\": \"off\",\n    \"init-declarations\": \"off\",\n    \"logical-assignment-operators\": [\"error\", \"always\"],\n    \"max-classes-per-file\": \"off\",\n    \"max-depth\": \"off\",\n    \"max-lines\": \"off\",\n    \"max-lines-per-function\": \"off\",\n    \"max-nested-callbacks\": \"off\",\n    \"max-params\": \"off\",\n    \"max-statements\": \"off\",\n    \"multiline-comment-style\": \"error\",\n    \"new-cap\": [\"error\", { \"capIsNew\": false }],\n    \"no-alert\": \"error\",\n    \"no-array-constructor\": \"off\",\n    \"no-bitwise\": \"off\",\n    \"no-caller\": \"error\",\n    \"no-case-declarations\": \"error\",\n    \"no-confusing-arrow\": \"off\",\n    \"no-console\": \"off\",\n    \"no-continue\": \"off\",\n    \"no-delete-var\": \"error\",\n    \"no-div-regex\": \"error\",\n    \"no-else-return\": \"error\",\n    \"no-empty\": [\"error\", { \"allowEmptyCatch\": true }],\n    \"no-empty-function\": \"off\",\n    \"no-empty-static-block\": \"error\",\n    \"no-eq-null\": \"off\",\n    \"no-eval\": \"error\",\n    \"no-extend-native\": \"error\",\n    \"no-extra-bind\": \"error\",\n    \"no-extra-boolean-cast\": \"error\",\n    \"no-extra-label\": \"error\",\n    \"no-extra-semi\": \"off\",\n    \"no-floating-decimal\": \"off\",\n    \"no-global-assign\": \"error\",\n    \"no-implicit-coercion\": \"off\",\n    \"no-implicit-globals\": \"off\",\n    \"no-implied-eval\": \"off\",\n    \"no-inline-comments\": \"error\",\n    \"no-invalid-this\": \"off\",\n    \"no-iterator\": \"error\",\n    \"no-label-var\": \"error\",\n    \"no-labels\": [\"error\", { \"allowLoop\": true }],\n    \"no-lone-blocks\": \"error\",\n    \"no-lonely-if\": \"off\",\n    \"no-loop-func\": \"off\",\n    \"no-magic-numbers\": \"off\",\n    \"no-mixed-operators\": \"off\",\n    \"no-multi-assign\": \"error\",\n    \"no-multi-str\": \"error\",\n    \"no-negated-condition\": \"error\",\n    \"no-nested-ternary\": \"off\",\n    \"no-new\": \"error\",\n    \"no-new-func\": \"error\",\n    \"no-new-object\": \"error\",\n    \"no-new-wrappers\": \"error\",\n    \"no-nonoctal-decimal-escape\": \"error\",\n    \"no-octal\": \"error\",\n    \"no-octal-escape\": \"error\",\n    \"no-param-reassign\": \"off\",\n    \"no-plusplus\": \"error\",\n    \"no-proto\": \"error\",\n    \"no-redeclare\": \"off\",\n    \"no-regex-spaces\": \"error\",\n    \"no-restricted-exports\": \"off\",\n    \"no-restricted-globals\": \"off\",\n    \"no-restricted-imports\": \"off\",\n    \"no-restricted-properties\": \"off\",\n    \"no-restricted-syntax\": \"off\",\n    \"no-return-assign\": \"error\",\n    \"no-return-await\": \"off\",\n    \"no-script-url\": \"error\",\n    \"no-sequences\": \"error\",\n    \"no-shadow\": \"off\",\n    \"no-shadow-restricted-names\": \"error\",\n    \"no-ternary\": \"off\",\n    \"no-throw-literal\": \"off\",\n    \"no-undef-init\": \"off\",\n    \"no-undefined\": \"off\",\n    \"no-underscore-dangle\": \"off\",\n    \"no-unneeded-ternary\": \"error\",\n    \"no-unused-expressions\": \"off\",\n    \"no-unused-labels\": \"error\",\n    \"no-useless-call\": \"error\",\n    \"no-useless-catch\": \"off\",\n    \"no-useless-computed-key\": \"error\",\n    \"no-useless-concat\": \"error\",\n    \"no-useless-constructor\": \"off\",\n    \"no-useless-escape\": \"error\",\n    \"no-useless-rename\": \"error\",\n    \"no-useless-return\": \"off\",\n    \"no-var\": \"off\",\n    \"no-void\": \"error\",\n    \"no-warning-comments\": \"off\",\n    \"no-with\": \"error\",\n    \"object-shorthand\": \"off\",\n    \"one-var\": \"off\",\n    \"one-var-declaration-per-line\": \"off\",\n    \"operator-assignment\": \"error\",\n    \"prefer-arrow-callback\": \"off\",\n    \"prefer-const\": \"off\",\n    \"prefer-destructuring\": \"error\",\n    \"prefer-exponentiation-operator\": \"error\",\n    \"prefer-named-capture-group\": \"off\",\n    \"prefer-numeric-literals\": \"error\",\n    \"prefer-object-has-own\": \"error\",\n    \"prefer-object-spread\": \"error\",\n    \"prefer-promise-reject-errors\": \"off\",\n    \"prefer-regex-literals\": \"error\",\n    \"prefer-rest-params\": \"off\",\n    \"prefer-spread\": \"off\",\n    \"prefer-template\": \"error\",\n    \"quote-props\": \"off\",\n    \"radix\": \"error\",\n    \"require-await\": \"off\",\n    \"require-unicode-regexp\": \"error\",\n    \"require-yield\": \"error\",\n    \"sort-imports\": \"off\",\n    \"sort-keys\": \"off\",\n    \"sort-vars\": \"off\",\n    \"spaced-comment\": \"off\",\n    \"strict\": \"off\",\n    \"symbol-description\": \"error\",\n    \"vars-on-top\": \"off\",\n    \"yoda\": \"error\",\n    \"array-bracket-newline\": \"off\",\n    \"array-bracket-spacing\": \"off\",\n    \"array-element-newline\": \"off\",\n    \"arrow-parens\": \"off\",\n    \"arrow-spacing\": \"off\",\n    \"block-spacing\": \"off\",\n    \"brace-style\": \"off\",\n    \"comma-dangle\": \"off\",\n    \"comma-spacing\": \"off\",\n    \"comma-style\": \"off\",\n    \"computed-property-spacing\": \"off\",\n    \"dot-location\": \"off\",\n    \"eol-last\": \"off\",\n    \"func-call-spacing\": \"off\",\n    \"function-call-argument-newline\": \"off\",\n    \"function-paren-newline\": \"off\",\n    \"generator-star-spacing\": \"off\",\n    \"implicit-arrow-linebreak\": \"off\",\n    \"indent\": \"off\",\n    \"jsx-quotes\": \"off\",\n    \"key-spacing\": \"off\",\n    \"keyword-spacing\": \"off\",\n    \"line-comment-position\": \"error\",\n    \"linebreak-style\": \"off\",\n    \"lines-around-comment\": \"off\",\n    \"lines-between-class-members\": [\"error\", \"always\", { \"exceptAfterSingleLine\": true }],\n    \"max-len\": \"off\",\n    \"max-statements-per-line\": \"off\",\n    \"multiline-ternary\": \"off\",\n    \"new-parens\": \"off\",\n    \"newline-per-chained-call\": \"off\",\n    \"no-extra-parens\": \"off\",\n    \"no-mixed-spaces-and-tabs\": \"off\",\n    \"no-multi-spaces\": \"off\",\n    \"no-multiple-empty-lines\": \"off\",\n    \"no-tabs\": \"off\",\n    \"no-trailing-spaces\": \"off\",\n    \"no-whitespace-before-property\": \"off\",\n    \"nonblock-statement-body-position\": \"off\",\n    \"object-curly-newline\": \"off\",\n    \"object-curly-spacing\": \"off\",\n    \"object-property-newline\": \"off\",\n    \"operator-linebreak\": \"off\",\n    \"padded-blocks\": \"off\",\n    \"padding-line-between-statements\": [\n      \"error\",\n      { \"blankLine\": \"always\", \"prev\": \"*\", \"next\": \"return\" },\n      { \"blankLine\": \"always\", \"prev\": \"*\", \"next\": [\"const\", \"let\"] },\n      { \"blankLine\": \"always\", \"prev\": [\"const\", \"let\"], \"next\": \"*\" },\n      { \"blankLine\": \"any\", \"prev\": [\"const\", \"let\"], \"next\" : [\"const\", \"let\"] },\n      { \"blankLine\": \"always\", \"prev\": \"*\", \"next\": \"break\" },\n      { \"blankLine\": \"always\", \"prev\": \"*\", \"next\": \"for\" },\n      { \"blankLine\": \"always\", \"prev\": \"for\", \"next\": \"*\" },\n      { \"blankLine\": \"always\", \"prev\": \"*\", \"next\": \"while\" },\n      { \"blankLine\": \"always\", \"prev\": \"while\", \"next\": \"*\" }\n    ],\n    \"quotes\": \"off\",\n    \"rest-spread-spacing\": \"off\",\n    \"semi\": \"off\",\n    \"semi-spacing\": \"off\",\n    \"semi-style\": \"off\",\n    \"space-before-blocks\": \"off\",\n    \"space-before-function-paren\": \"off\",\n    \"space-in-parens\": \"off\",\n    \"space-infix-ops\": \"off\",\n    \"space-unary-ops\": \"off\",\n    \"switch-colon-spacing\": \"off\",\n    \"template-curly-spacing\": \"off\",\n    \"template-tag-spacing\": \"off\",\n    \"unicode-bom\": \"off\",\n    \"wrap-iife\": \"off\",\n    \"wrap-regex\": \"off\",\n    \"yield-star-spacing\": \"off\",\n    // TypeScript ESLint\n    \"@typescript-eslint/adjacent-overload-signatures\": \"error\",\n    \"@typescript-eslint/array-type\": [\"error\", { \"default\": \"array\", \"readonly\": \"array\" }],\n    \"@typescript-eslint/await-thenable\": \"error\",\n    \"@typescript-eslint/ban-ts-comment\": \"error\",\n    \"@typescript-eslint/ban-tslint-comment\": \"error\",\n    \"@typescript-eslint/ban-types\": \"error\",\n    \"@typescript-eslint/class-literal-property-style\": \"error\",\n    \"@typescript-eslint/consistent-generic-constructors\": \"error\",\n    \"@typescript-eslint/consistent-indexed-object-style\": \"error\",\n    \"@typescript-eslint/consistent-type-assertions\": \"off\",\n    \"@typescript-eslint/consistent-type-definitions\": \"error\",\n    \"@typescript-eslint/consistent-type-exports\": \"off\",\n    \"@typescript-eslint/consistent-type-imports\": [\"error\", { \"prefer\": \"type-imports\", \"fixStyle\": \"inline-type-imports\" }],\n    \"@typescript-eslint/explicit-function-return-type\": \"off\",\n    \"@typescript-eslint/explicit-member-accessibility\": \"off\",\n    \"@typescript-eslint/explicit-module-boundary-types\": \"off\",\n    \"@typescript-eslint/member-delimiter-style\": \"off\",\n    \"@typescript-eslint/member-ordering\": \"off\",\n    \"@typescript-eslint/method-signature-style\": [\"error\", \"property\"],\n    \"@typescript-eslint/naming-convention\": [\n      \"error\",\n      { \"selector\": \"interface\", \"format\": [\"StrictPascalCase\"], \"leadingUnderscore\": \"forbid\", \"trailingUnderscore\": \"forbid\", \"prefix\": [\"I\"] },\n      { \"selector\": \"typeAlias\", \"format\": [\"StrictPascalCase\"], \"leadingUnderscore\": \"forbid\", \"trailingUnderscore\": \"forbid\", \"prefix\": [\"T\"] },\n      { \"selector\": \"enum\", \"format\": [\"StrictPascalCase\"], \"leadingUnderscore\": \"forbid\", \"trailingUnderscore\": \"forbid\", \"prefix\": [\"E\"] }\n    ],\n    \"@typescript-eslint/no-base-to-string\": \"error\",\n    \"@typescript-eslint/no-confusing-non-null-assertion\": \"error\",\n    \"@typescript-eslint/no-confusing-void-expression\": [\"error\", { \"ignoreArrowShorthand\": true }],\n    \"@typescript-eslint/no-duplicate-enum-values\": \"error\",\n    \"@typescript-eslint/no-dynamic-delete\": \"error\",\n    \"@typescript-eslint/no-empty-interface\": \"error\",\n    \"@typescript-eslint/no-explicit-any\": \"off\",\n    \"@typescript-eslint/no-extra-non-null-assertion\": \"error\",\n    \"@typescript-eslint/no-extraneous-class\": \"off\",\n    \"@typescript-eslint/no-floating-promises\": \"off\",\n    \"@typescript-eslint/no-for-in-array\": \"error\",\n    \"@typescript-eslint/no-inferrable-types\": \"error\",\n    \"@typescript-eslint/no-invalid-void-type\": \"error\",\n    \"@typescript-eslint/no-meaningless-void-operator\": \"error\",\n    \"@typescript-eslint/no-misused-new\": \"error\",\n    \"@typescript-eslint/no-misused-promises\": \"off\",\n    \"@typescript-eslint/no-namespace\": \"error\",\n    \"@typescript-eslint/no-non-null-asserted-nullish-coalescing\": \"error\",\n    \"@typescript-eslint/no-non-null-asserted-optional-chain\": \"error\",\n    \"@typescript-eslint/no-non-null-assertion\": \"error\",\n    \"@typescript-eslint/no-redundant-type-constituents\": \"error\",\n    \"@typescript-eslint/no-require-imports\": \"error\",\n    \"@typescript-eslint/no-this-alias\": \"error\",\n    \"@typescript-eslint/no-type-alias\": \"off\",\n    \"@typescript-eslint/no-unnecessary-boolean-literal-compare\": \"error\",\n    \"@typescript-eslint/no-unnecessary-condition\": \"off\",\n    \"@typescript-eslint/no-unnecessary-qualifier\": \"error\",\n    \"@typescript-eslint/no-unnecessary-type-arguments\": \"error\",\n    \"@typescript-eslint/no-unnecessary-type-assertion\": \"error\",\n    \"@typescript-eslint/no-unnecessary-type-constraint\": \"error\",\n    \"@typescript-eslint/no-unsafe-argument\": \"off\",\n    \"@typescript-eslint/no-unsafe-assignment\": \"off\",\n    \"@typescript-eslint/no-unsafe-call\": \"off\",\n    \"@typescript-eslint/no-unsafe-declaration-merging\": \"error\",\n    \"@typescript-eslint/no-unsafe-member-access\": \"off\",\n    \"@typescript-eslint/no-unsafe-return\": \"off\",\n    \"@typescript-eslint/no-useless-empty-export\": \"error\",\n    \"@typescript-eslint/no-var-requires\": \"error\",\n    \"@typescript-eslint/non-nullable-type-assertion-style\": \"off\",\n    \"@typescript-eslint/parameter-properties\": \"off\",\n    \"@typescript-eslint/prefer-as-const\": \"error\",\n    \"@typescript-eslint/prefer-enum-initializers\": \"error\",\n    \"@typescript-eslint/prefer-for-of\": \"off\",\n    \"@typescript-eslint/prefer-function-type\": \"error\",\n    \"@typescript-eslint/prefer-includes\": \"error\",\n    \"@typescript-eslint/prefer-literal-enum-member\": [\"error\", { \"allowBitwiseExpressions\": true }],\n    \"@typescript-eslint/prefer-namespace-keyword\": \"error\",\n    \"@typescript-eslint/prefer-nullish-coalescing\": \"error\",\n    \"@typescript-eslint/prefer-optional-chain\": \"error\",\n    \"@typescript-eslint/prefer-readonly\": \"off\",\n    \"@typescript-eslint/prefer-readonly-parameter-types\": \"off\",\n    \"@typescript-eslint/prefer-reduce-type-parameter\": \"error\",\n    \"@typescript-eslint/prefer-regexp-exec\": \"off\",\n    \"@typescript-eslint/prefer-return-this-type\": \"error\",\n    \"@typescript-eslint/prefer-string-starts-ends-with\": \"error\",\n    \"@typescript-eslint/prefer-ts-expect-error\": \"error\",\n    \"@typescript-eslint/promise-function-async\": \"error\",\n    \"@typescript-eslint/require-array-sort-compare\": \"off\",\n    \"@typescript-eslint/restrict-plus-operands\": \"error\",\n    \"@typescript-eslint/restrict-template-expressions\": \"off\",\n    \"@typescript-eslint/sort-type-constituents\": \"off\",\n    \"@typescript-eslint/strict-boolean-expressions\": \"off\",\n    \"@typescript-eslint/switch-exhaustiveness-check\": \"off\",\n    \"@typescript-eslint/triple-slash-reference\": \"error\",\n    \"@typescript-eslint/typedef\": \"off\",\n    \"@typescript-eslint/unbound-method\": \"off\",\n    \"@typescript-eslint/unified-signatures\": \"error\",\n    \"@typescript-eslint/default-param-last\": \"error\",\n    \"@typescript-eslint/dot-notation\": \"error\",\n    \"@typescript-eslint/init-declarations\": \"off\",\n    \"@typescript-eslint/no-array-constructor\": \"error\",\n    \"@typescript-eslint/no-dupe-class-members\": \"error\",\n    \"@typescript-eslint/no-empty-function\": \"error\",\n    \"@typescript-eslint/no-extra-semi\": \"off\",\n    \"@typescript-eslint/no-implied-eval\": \"error\",\n    \"@typescript-eslint/no-invalid-this\": \"error\",\n    \"@typescript-eslint/no-loop-func\": \"error\",\n    \"@typescript-eslint/no-loss-of-precision\": \"error\",\n    \"@typescript-eslint/no-magic-numbers\": \"off\",\n    \"@typescript-eslint/no-redeclare\": \"error\",\n    \"@typescript-eslint/no-restricted-imports\": \"off\",\n    \"@typescript-eslint/no-shadow\": \"off\",\n    \"@typescript-eslint/no-throw-literal\": \"off\",\n    \"@typescript-eslint/no-unused-expressions\": \"error\",\n    \"@typescript-eslint/no-unused-vars\": \"error\",\n    \"@typescript-eslint/no-use-before-define\": \"error\",\n    \"@typescript-eslint/no-useless-constructor\": \"error\",\n    \"@typescript-eslint/require-await\": \"off\",\n    \"@typescript-eslint/return-await\": \"error\",\n    \"@typescript-eslint/brace-style\": \"off\",\n    \"@typescript-eslint/comma-dangle\": \"off\",\n    \"@typescript-eslint/comma-spacing\": \"off\",\n    \"@typescript-eslint/func-call-spacing\": \"off\",\n    \"@typescript-eslint/indent\": \"off\",\n    \"@typescript-eslint/keyword-spacing\": \"off\",\n    \"@typescript-eslint/lines-between-class-members\": \"off\",\n    \"@typescript-eslint/no-extra-parens\": \"off\",\n    \"@typescript-eslint/object-curly-spacing\": \"off\",\n    \"@typescript-eslint/padding-line-between-statements\": \"off\",\n    \"@typescript-eslint/quotes\": \"off\",\n    \"@typescript-eslint/semi\": \"off\",\n    \"@typescript-eslint/space-before-blocks\": \"off\",\n    \"@typescript-eslint/space-before-function-paren\": \"off\",\n    \"@typescript-eslint/space-infix-ops\": \"off\",\n    \"@typescript-eslint/type-annotation-spacing\": \"off\",\n    // Prettier\n    \"prettier/prettier\": \"error\",\n    // React\n    \"react/boolean-prop-naming\": \"off\",\n    \"react/button-has-type\": \"error\",\n    \"react/default-props-match-prop-types\": \"off\",\n    \"react/destructuring-assignment\": [\"error\", \"always\"],\n    \"react/display-name\": \"off\",\n    \"react/forbid-component-props\": \"off\",\n    \"react/forbid-dom-props\": \"off\",\n    \"react/forbid-elements\": \"off\",\n    \"react/forbid-foreign-prop-types\": \"off\",\n    \"react/forbid-prop-types\": \"off\",\n    \"react/function-component-definition\": [\"error\", { \"namedComponents\": \"function-declaration\", \"unnamedComponents\": \"arrow-function\" }],\n    \"react/hook-use-state\": \"error\",\n    \"react/iframe-missing-sandbox\": \"off\",\n    \"react/jsx-boolean-value\": [\"error\", \"never\"],\n    \"react/jsx-child-element-spacing\": \"off\",\n    \"react/jsx-closing-bracket-location\": \"off\",\n    \"react/jsx-closing-tag-location\": \"off\",\n    \"react/jsx-curly-brace-presence\": \"off\",\n    \"react/jsx-curly-newline\": \"off\",\n    \"react/jsx-curly-spacing\": \"off\",\n    \"react/jsx-equals-spacing\": \"off\",\n    \"react/jsx-filename-extension\": \"off\",\n    \"react/jsx-first-prop-new-line\": \"off\",\n    \"react/jsx-fragments\": [\"error\", \"element\"],\n    \"react/jsx-handler-names\": \"error\",\n    \"react/jsx-indent\": \"off\",\n    \"react/jsx-indent-props\": \"off\",\n    \"react/jsx-key\": \"error\",\n    \"react/jsx-max-depth\": \"off\",\n    \"react/jsx-max-props-per-line\": \"off\",\n    \"react/jsx-newline\": \"off\",\n    \"react/jsx-no-bind\": \"off\",\n    \"react/jsx-no-comment-textnodes\": \"error\",\n    \"react/jsx-no-constructed-context-values\": \"error\",\n    \"react/jsx-no-duplicate-props\": \"error\",\n    \"react/jsx-no-leaked-render\": \"error\",\n    \"react/jsx-no-literals\": \"off\",\n    \"react/jsx-no-script-url\": \"error\",\n    \"react/jsx-no-target-blank\": [\"error\", { \"allowReferrer\": true, \"enforceDynamicLinks\": \"always\", \"links\": false }],\n    \"react/jsx-no-undef\": \"error\",\n    \"react/jsx-no-useless-fragment\": \"off\",\n    \"react/jsx-one-expression-per-line\": \"off\",\n    \"react/jsx-pascal-case\": \"error\",\n    \"react/jsx-props-no-multi-spaces\": \"off\",\n    \"react/jsx-props-no-spreading\": \"off\",\n    \"react/jsx-sort-props\": \"off\",\n    \"react/jsx-tag-spacing\": \"off\",\n    \"react/jsx-uses-react\": \"off\",\n    \"react/jsx-uses-vars\": \"error\",\n    \"react/jsx-wrap-multilines\": \"off\",\n    \"react/no-access-state-in-setstate\": \"error\",\n    \"react/no-adjacent-inline-elements\": \"off\",\n    \"react/no-array-index-key\": \"error\",\n    \"react/no-arrow-function-lifecycle\": \"error\",\n    \"react/no-children-prop\": \"error\",\n    \"react/no-danger\": \"off\",\n    \"react/no-danger-with-children\": \"error\",\n    \"react/no-deprecated\": \"error\",\n    \"react/no-did-mount-set-state\": \"error\",\n    \"react/no-did-update-set-state\": \"error\",\n    \"react/no-direct-mutation-state\": \"error\",\n    \"react/no-find-dom-node\": \"error\",\n    \"react/no-invalid-html-attribute\": \"error\",\n    \"react/no-is-mounted\": \"error\",\n    \"react/no-multi-comp\": \"error\",\n    \"react/no-namespace\": \"error\",\n    \"react/no-object-type-as-default-prop\": \"off\",\n    \"react/no-redundant-should-component-update\": \"error\",\n    \"react/no-render-return-value\": \"error\",\n    \"react/no-set-state\": \"off\",\n    \"react/no-string-refs\": \"error\",\n    \"react/no-this-in-sfc\": \"error\",\n    \"react/no-typos\": \"error\",\n    \"react/no-unescaped-entities\": \"error\",\n    \"react/no-unknown-property\": \"error\",\n    \"react/no-unsafe\": \"off\",\n    \"react/no-unstable-nested-components\": \"error\",\n    \"react/no-unused-class-component-methods\": \"off\",\n    \"react/no-unused-prop-types\": \"off\",\n    \"react/no-unused-state\": \"off\",\n    \"react/no-will-update-set-state\": \"error\",\n    \"react/prefer-es6-class\": \"error\",\n    \"react/prefer-exact-props\": \"off\",\n    \"react/prefer-read-only-props\": \"off\",\n    \"react/prefer-stateless-function\": \"off\",\n    \"react/prop-types\": \"off\",\n    \"react/react-in-jsx-scope\": \"off\",\n    \"react/require-default-props\": \"off\",\n    \"react/require-optimization\": \"off\",\n    \"react/require-render-return\": \"error\",\n    \"react/self-closing-comp\": \"error\",\n    \"react/sort-comp\": \"off\",\n    \"react/sort-default-props\": \"off\",\n    \"react/sort-prop-types\": \"off\",\n    \"react/state-in-constructor\": \"error\",\n    \"react/static-property-placement\": \"off\",\n    \"react/style-prop-object\": \"error\",\n    \"react/void-dom-elements-no-children\": \"error\",\n    // React Hooks\n    \"react-hooks/rules-of-hooks\": \"error\",\n    \"react-hooks/exhaustive-deps\": \"warn\"\n  }\n}\n"
  },
  {
    "path": ".github/COMMIT_CONVENTION.md",
    "content": "## Git Commit Message Convention\n\n> This is adapted from [Angular's commit convention](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular).\n\n#### TL;DR:\n\nMessages must be matched by the following regex:\n\n```js\n/^(feat|fix|chore|docs|style|refactor|perf|test|ci)(\\(.+\\))?: .{1,72}/;\n```\n\n### Full Message Format\n\nA commit message consists of a **header**, **body** and **footer**. The header has a **type** and **subject**:\n\n```\n<type>: <subject>\n<BLANK LINE>\n<body>\n<BLANK LINE>\n<footer>\n```\n\n### Type\n\nIf the prefix is `feat` or `fix` it will appear in the changelog. However, if there is any [BREAKING CHANGE](#footer), the commit will always appear in the changelog.\n\nOther prefixes are up to your discretion. Suggested prefixes are `chore`, `docs`, `style`, `refactor`, `perf`, `test`, and `ci` for non-changelog related tasks.\n\n### Subject\n\nThe subject contains a succinct description of the change:\n\n- use the imperative, present tense: \"change\" not \"changed\" nor \"changes\"\n- capitalize the first letter\n- no dot (.) at the end\n\n### Body\n\nJust as in the **subject**, use the imperative, present tense: \"change\" not \"changed\" nor \"changes\".\nThe body should include the motivation for the change and contrast this with previous behavior.\n\n### Footer\n\nThe footer should contain any information about **Breaking Changes** and is also the place to\nreference GitHub issues that this commit **Closes**.\n\n**Breaking Changes** should start with the word `BREAKING CHANGE:` with a space or two newlines. The rest of the commit message is then used for this.\n"
  },
  {
    "path": ".github/CONTRIBUTING.md",
    "content": "# Contributing\n\n## Setup\n\n1. Fork & Clone the repository.\n2. Run `pnpm install`.\n3. Time to code!\n\n## Test\n\n1. Run `pnpm test`.\n\n## Submit\n\n1. [Submit a pull request](https://github.com/Wondermarin/react-color-palette/compare) (make sure you follow the [Conventional Commit Format](https://github.com/Wondermarin/react-color-palette/blob/master/.github/COMMIT_CONVENTION.md)).\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/bug-report.md",
    "content": "---\nname: Bug Report\nabout: Report incorrect behavior of react-color-palette\ntitle: ''\nlabels: 's: unverified, t: bug'\nassignees: 'Wondermarin'\n---\n\n### My Environment\n\n| Dependency                  | Version  |\n| --------------------------- | -------- |\n| Node.JS version             | vX.Y.Z   |\n| react-color-palette version | vX.Y.Z   |\n\n### Expected Behavior:\n\n<!-- \n  A brief description of the expected behavior.\n-->\n\n### Actual Behavior:\n\n<!--\n  A brief description of the actual behavior.\n-->\n\n### Additional Context:\n\n<!--\n  Add any other context about the bug report here.\n-->\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/feature-request.md",
    "content": "---\nname: Feature Request\nabout: Suggest your idea for the development of the project\ntitle: ''\nlabels: 't: enhancement'\nassignees: 'Wondermarin'\n---\n\n### The Problem:\n\n<!--\n  A brief description of the problem and why its solution should be implemented in the project.\n-->\n\n### The Solution:\n\n<!--\n  A brief description of what you want to happen.\n-->\n\n### Additional Context:\n\n<!--\n  Add any other context about the feature request here.\n-->\n"
  },
  {
    "path": ".github/PULL_REQUEST_TEMPLATE.md",
    "content": "<!--\n  Before opening the request, make sure that all the listed conditions are met.\n\n  - Code is up-to-date with the `main` branch.\n  - `pnpm test (npm run test)` passes with this change.\n  - The new commits follow conventions explained in [CONTRIBUTING.md](https://github.com/Wondermarin/react-color-palette/blob/master/.github/CONTRIBUTING.md)\n\n  If your PR adds new functionality, you should also change the `demo`!\n-->\n\n### Description of Change\n\n<!--\n  A brief description of what you did and why the project needs it.\n-->\n\n<!--\n  Thank you for helping the project, thanks to you it will live <3\n-->\n"
  },
  {
    "path": ".github/workflows/versioning.yml",
    "content": "name: Versioning\n\non:\n  push:\n    branches:\n      - main\n\npermissions:\n  contents: write\n  pull-requests: write\n\njobs:\n  release-please:\n    name: Release Please\n    runs-on: ubuntu-latest\n    steps:\n      - name: Release Please Action\n        uses: google-github-actions/release-please-action@v3\n        with:\n          release-type: node\n          package-name: release-please-action\n          pull-request-title-pattern: 'chore: Release ${version}'\n"
  },
  {
    "path": ".gitignore",
    "content": "# IDEs and editors\n/.idea\n.project\n.classpath\n.c9/\n*.launch\n.settings/\n*.sublime-workspace\n\n# IDE - VSCode\n.vscode/*\n!.vscode/settings.json\n!.vscode/tasks.json\n!.vscode/launch.json\n!.vscode/extensions.json\n\n# Dependencies\n/node_modules\n\n# Demo\n/demo\n\n# Production\n/dist\n\n# Env\n.env\n\n# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nlerna-debug.log*\n\n# OS\n.DS_Store\n\n# Tests\n/coverage\n/.nyc_output\n"
  },
  {
    "path": ".prettierignore",
    "content": "# Dependencies\n/node_modules\n\n# Production\n/dist\n"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"printWidth\": 120,\n  \"tabWidth\": 2,\n  \"useTabs\": false,\n  \"semi\": true,\n  \"singleQuote\": false,\n  \"quoteProps\": \"as-needed\",\n  \"jsxSingleQuote\": false,\n  \"trailingComma\": \"es5\",\n  \"bracketSpacing\": true,\n  \"bracketSameLine\": false,\n  \"arrowParens\": \"always\",\n  \"requirePragma\": false,\n  \"insertPragma\": false,\n  \"proseWrap\": \"preserve\",\n  \"htmlWhitespaceSensitivity\": \"css\",\n  \"endOfLine\": \"auto\",\n  \"embeddedLanguageFormatting\": \"auto\",\n  \"singleAttributePerLine\": false,\n  \"plugins\": [\n    \"@ianvs/prettier-plugin-sort-imports\"\n  ],\n  \"importOrderParserPlugins\": [\"typescript\", \"classProperties\", \"jsx\"],\n  \"importOrderTypeScriptVersion\": \"5.1.6\",\n  \"importOrder\": [\n    \"<BUILTIN_MODULES>\",\n    \"\",\n    \"<THIRD_PARTY_MODULES>\",\n    \"\",\n    \"^@/components$\",\n    \"^@/components/(.*)$\",\n    \"\",\n    \"^@/hooks$\",\n    \"^@/hooks/(.*)$\",\n    \"\",\n    \"^@/services$\",\n    \"^@/services/(.*)$\",\n    \"\",\n    \"^@/utils$\",\n    \"^@/utils/(.*)$\",\n    \"\",\n    \"^@/css/(.*)$\",\n    \"\",\n    \"^[.]\"\n  ]\n}\n"
  },
  {
    "path": ".vscode/settings.json",
    "content": "{\n  \"editor.tabSize\": 2,\n  \"editor.quickSuggestions\": {\n    \"strings\": \"on\"\n  },\n  \"[typescript][typescriptreact]\": {\n    \"editor.defaultFormatter\": \"esbenp.prettier-vscode\",\n    \"editor.codeActionsOnSave\": {\n      \"source.fixAll.eslint\": \"explicit\"\n    }\n  },\n  \"files.exclude\": {\n    \"**/.git\": true,\n    \"**/.svn\": true,\n    \"**/.hg\": true,\n    \"**/CVS\": true,\n    \"**/.DS_Store\": true,\n    \"**/Thumbs.db\": true,\n    \"**/node_modules\": true\n  },\n  \"typescript.preferences.includePackageJsonAutoImports\": \"on\",\n  \"typescript.tsdk\": \"node_modules\\\\typescript\\\\lib\"\n}\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# Changelog\n\n\n## [7.3.1](https://github.com/Wondermarin/react-color-palette/compare/v7.3.0...v7.3.1) (2025-08-07)\n\n\n### Bug Fixes\n\n* Replace `undefined` to avoid unexpected output ([#88](https://github.com/Wondermarin/react-color-palette/issues/88)) ([269b7a4](https://github.com/Wondermarin/react-color-palette/commit/269b7a412b6aeac4d358c5f3da1c7110eb3153cc))\n\n## [7.3.0](https://github.com/Wondermarin/react-color-palette/compare/v7.2.2...v7.3.0) (2024-09-13)\n\n\n### Features\n\n* Add disabled prop ([#82](https://github.com/Wondermarin/react-color-palette/issues/82)) ([6f025db](https://github.com/Wondermarin/react-color-palette/commit/6f025db6ee0172ddad42c31782578b4f52671f2a))\n\n## [7.2.2](https://github.com/Wondermarin/react-color-palette/compare/v7.2.1...v7.2.2) (2024-07-30)\n\n\n### Bug Fixes\n\n* Replace `pointer` event with `mouse` event and `touch` event for better support across different environments ([671a74e](https://github.com/Wondermarin/react-color-palette/commit/671a74e036228ab4b97231979c666a4af1e03a76))\n\n## [7.2.1](https://github.com/Wondermarin/react-color-palette/compare/v7.2.0...v7.2.1) (2024-07-12)\n\n\n### Bug Fixes\n\n* `useBoundingClientRect` wrong dimensions in modal ([#75](https://github.com/Wondermarin/react-color-palette/issues/75)) ([770820b](https://github.com/Wondermarin/react-color-palette/commit/770820b22db6b72bfebf925e0a53914edcd64d46))\n\n## [7.2.0](https://github.com/Wondermarin/react-color-palette/compare/v7.1.1...v7.2.0) (2024-06-27)\n\n\n### Features\n\n* Add `onChangeComplete` event ([#73](https://github.com/Wondermarin/react-color-palette/issues/73)) ([2aa616e](https://github.com/Wondermarin/react-color-palette/commit/2aa616e1e82f18b499474a87e91ad287adc666b1))\n\n## [7.1.1](https://github.com/Wondermarin/react-color-palette/compare/v7.1.0...v7.1.1) (2024-04-10)\n\n\n### Bug Fixes\n\n* Mark `.css` files as `sideEffect` ([#68](https://github.com/Wondermarin/react-color-palette/issues/68)) ([1acc892](https://github.com/Wondermarin/react-color-palette/commit/1acc892302f46bc3afe02adf4c34e88df6d3be6f))\n\n## [7.1.0](https://github.com/Wondermarin/react-color-palette/compare/v7.0.4...v7.1.0) (2023-09-07)\n\n\n### Features\n\n* Add \"individual visibility control for color inputs\" support ([#62](https://github.com/Wondermarin/react-color-palette/issues/62)) ([157dbb1](https://github.com/Wondermarin/react-color-palette/commit/157dbb1b162d53dd0acfafebb7e238f969f1e894))\n\n## [7.0.4](https://github.com/Wondermarin/react-color-palette/compare/v7.0.3...v7.0.4) (2023-08-12)\n\n\n### Bug Fixes\n\n* Add reposition support ([#60](https://github.com/Wondermarin/react-color-palette/issues/60)) ([8342bf3](https://github.com/Wondermarin/react-color-palette/commit/8342bf345215ed621f15936069ecb599a5f43d12))\n\n## [7.0.3](https://github.com/Wondermarin/react-color-palette/compare/v7.0.2...v7.0.3) (2023-08-09)\n\n\n### Bug Fixes\n\n* Add resize support ([003f052](https://github.com/Wondermarin/react-color-palette/commit/003f05284a7a860d8e2a330c5c450df93b9dc441))\n\n## [7.0.2](https://github.com/Wondermarin/react-color-palette/compare/v7.0.1...v7.0.2) (2023-08-04)\n\n\n### Bug Fixes\n\n* Add `touch-action: none` to prevent `pointercancel` ([be5bfd0](https://github.com/Wondermarin/react-color-palette/commit/be5bfd039a88a25a302438cd9557969ad4225209))\n\n## [7.0.1](https://github.com/Wondermarin/react-color-palette/compare/v7.0.0...v7.0.1) (2023-08-04)\n\n\n### Bug Fixes\n\n* Add direct path to stylesheet ([#53](https://github.com/Wondermarin/react-color-palette/issues/53)) ([762f465](https://github.com/Wondermarin/react-color-palette/commit/762f4651ebc3bef4f4507c8fbc0ca59fe3ddbee2))\n\n## [7.0.0](https://github.com/Wondermarin/react-color-palette/compare/v6.2.0...v7.0.0) (2023-08-03)\n\n\n### ⚠ BREAKING CHANGES\n\n* Remove `model` arg in `useColor()`\n* Remove `width` prop in `<ColorPicker />` component\n* Remove `onChangeComplete` prop in `<ColorPicker />` component\n* Replace `hideHEX`, `hideRGB` and `hideHSV` to `hideInput` prop in `<ColorPicker />` component\n* Replace `alpha` to `hideAlpha` prop in `<ColorPicker />` component\n* Remove `dark` prop in `<ColorPicker />` component\n* Replace `toColor()` to `ColorService`\n* Rename `Color`, `ColorRGB` and `ColorHSV` types in `IColor`, `IColorRgb` and `IColorHsv`\n* Replace `react-color-palette/lib/css/styles.css` to `react-color-palette/css`\n\n### Features\n\n* Add CSS-like values support in `useColor()` ([91d0ca6](https://github.com/Wondermarin/react-color-palette/commit/91d0ca63891272ef4153f8201a0dd81ef524d5d0))\n* Add responsive support ([#22](https://github.com/Wondermarin/react-color-palette/issues/22)) ([91d0ca6](https://github.com/Wondermarin/react-color-palette/commit/91d0ca63891272ef4153f8201a0dd81ef524d5d0))\n* Add RSC support (Next.js 13 App Router) ([91d0ca6](https://github.com/Wondermarin/react-color-palette/commit/91d0ca63891272ef4153f8201a0dd81ef524d5d0))\n* Add touch support ([#20](https://github.com/Wondermarin/react-color-palette/issues/20)) ([91d0ca6](https://github.com/Wondermarin/react-color-palette/commit/91d0ca63891272ef4153f8201a0dd81ef524d5d0))\n* Enable alpha-channel by default ([91d0ca6](https://github.com/Wondermarin/react-color-palette/commit/91d0ca63891272ef4153f8201a0dd81ef524d5d0))\n* Export `<Saturation />`, `<Hue />` and `<Alpha />` components ([91d0ca6](https://github.com/Wondermarin/react-color-palette/commit/91d0ca63891272ef4153f8201a0dd81ef524d5d0))\n* Implement update state from props in `useColor()` ([#38](https://github.com/Wondermarin/react-color-palette/issues/38)) ([91d0ca6](https://github.com/Wondermarin/react-color-palette/commit/91d0ca63891272ef4153f8201a0dd81ef524d5d0))\n* Remove `dark` prop in `<ColorPicker />` component ([91d0ca6](https://github.com/Wondermarin/react-color-palette/commit/91d0ca63891272ef4153f8201a0dd81ef524d5d0))\n* Remove `model` arg in `useColor()` ([91d0ca6](https://github.com/Wondermarin/react-color-palette/commit/91d0ca63891272ef4153f8201a0dd81ef524d5d0))\n* Remove `onChangeComplete` prop in `<ColorPicker />` component ([91d0ca6](https://github.com/Wondermarin/react-color-palette/commit/91d0ca63891272ef4153f8201a0dd81ef524d5d0))\n* Remove `width` prop in `<ColorPicker />` component ([91d0ca6](https://github.com/Wondermarin/react-color-palette/commit/91d0ca63891272ef4153f8201a0dd81ef524d5d0))\n* Rename `Color`, `ColorRGB` and `ColorHSV` types in `IColor`, `IColorRgb` and `IColorHsv` ([91d0ca6](https://github.com/Wondermarin/react-color-palette/commit/91d0ca63891272ef4153f8201a0dd81ef524d5d0))\n* Replace `alpha` to `hideAlpha` prop in `<ColorPicker />` component ([91d0ca6](https://github.com/Wondermarin/react-color-palette/commit/91d0ca63891272ef4153f8201a0dd81ef524d5d0))\n* Replace `hideHEX`, `hideRGB` and `hideHSV` to `hideInput` prop in `<ColorPicker />` component ([91d0ca6](https://github.com/Wondermarin/react-color-palette/commit/91d0ca63891272ef4153f8201a0dd81ef524d5d0))\n* Replace `react-color-palette/lib/css/styles.css` to `react-color-palette/css` ([91d0ca6](https://github.com/Wondermarin/react-color-palette/commit/91d0ca63891272ef4153f8201a0dd81ef524d5d0))\n* Replace `toColor()` to `ColorService` ([91d0ca6](https://github.com/Wondermarin/react-color-palette/commit/91d0ca63891272ef4153f8201a0dd81ef524d5d0))\n\n\n### Bug Fixes\n\n* Add `types` in `exports` field ([#51](https://github.com/Wondermarin/react-color-palette/issues/51)) ([91d0ca6](https://github.com/Wondermarin/react-color-palette/commit/91d0ca63891272ef4153f8201a0dd81ef524d5d0))\n* Add check for `NaN` alpha value in `hex2rgb()` ([#33](https://github.com/Wondermarin/react-color-palette/issues/33)) ([91d0ca6](https://github.com/Wondermarin/react-color-palette/commit/91d0ca63891272ef4153f8201a0dd81ef524d5d0))\n\n## [6.2.0](https://github.com/Wondermarin/react-color-palette/compare/v6.1.0...v6.2.0) (2021-11-11)\n\n\n### Features\n\n* `onChangeComplete` callback. ([bd83997](https://github.com/Wondermarin/react-color-palette/commit/bd83997da178d79d9292264cf513f20b696a665e)), closes [#18](https://github.com/Wondermarin/react-color-palette/issues/18)\n\n\n### Bug Fixes\n\n* Infinite `useColor` re-renders ([#26](https://github.com/Wondermarin/react-color-palette/issues/26)) ([3dcc66b](https://github.com/Wondermarin/react-color-palette/commit/3dcc66bbe38615dea273e147bf379aa3f982f493))\n* Sliders width ([#24](https://github.com/Wondermarin/react-color-palette/issues/24)) ([6c8fa99](https://github.com/Wondermarin/react-color-palette/commit/6c8fa999742e474a1d2f67877e8045d399a9f280))\n\n## [6.1.0](https://github.com/Wondermarin/react-color-palette/compare/v6.0.0...v6.1.0) (2021-07-22)\n\n\n### Features\n\n* Add `alpha channel` ([#15](https://github.com/Wondermarin/react-color-palette/issues/15)) ([aa7c289](https://github.com/Wondermarin/react-color-palette/commit/aa7c289b971e02fe0c0740904202f80d39fd9bbd))\n\n## [6.0.0](https://github.com/Wondermarin/react-color-palette/compare/v5.0.0...v6.0.0) (2021-06-26)\n\n\n### ⚠ BREAKING CHANGES\n\n* `hideHSB` -> `hideHSV` (#14)\n\n### Bug Fixes\n\n* `hideHSB` -> `hideHSV` ([#14](https://github.com/Wondermarin/react-color-palette/issues/14)) ([b6d8e8b](https://github.com/Wondermarin/react-color-palette/commit/b6d8e8b95f31bbd8269d5a4e9aa9f8fe0be336e1))\n* Hue bar size ([#12](https://github.com/Wondermarin/react-color-palette/issues/12)) ([95084b1](https://github.com/Wondermarin/react-color-palette/commit/95084b148e37fc28cdaee7abc143161a0b7b9f6e))\n\n## [5.0.0](https://github.com/Wondermarin/react-color-palette/compare/v4.1.0...v5.0.0) (2021-04-28)\n\n\n### ⚠ BREAKING CHANGES\n\n* Remove `ColorPicker` default export\n* Rename `HSB` -> `HSV`\n\n### Features\n\n* Add `ESModule` support. ([e534a6d](https://github.com/Wondermarin/react-color-palette/commit/e534a6dacddb9b71a8a429cb8538d2a83ccb311c))\n* Remove `ColorPicker` default export ([f51c337](https://github.com/Wondermarin/react-color-palette/commit/f51c33767f85165a7dc5506b9571028040bac192))\n* Rename `HSB` -> `HSV` ([bf741e3](https://github.com/Wondermarin/react-color-palette/commit/bf741e3071115cadb738db6e26179d63192e6cd3))\n\n\n### Bug Fixes\n\n* Add `React 16` support ([#9](https://github.com/Wondermarin/react-color-palette/issues/9)) ([cd4c729](https://github.com/Wondermarin/react-color-palette/commit/cd4c72988e4e20e03c2cf2f31436d76385da6305))\n\n## [4.1.0](https://github.com/Wondermarin/react-color-palette/compare/v4.0.0...v4.1.0) (2021-04-16)\n\n\n### Features\n\n* Now `Saturation` is a `div` ([5dd224a](https://github.com/Wondermarin/react-color-palette/commit/5dd224a78373b20c99a799e737824d7063b16991))\n\n## [4.0.0](https://github.com/Wondermarin/react-color-palette/compare/v3.1.0...v4.0.0) (2021-04-03)\n\n\n### Bug Fixes\n\n* CSS Import ([#7](https://github.com/Wondermarin/react-color-palette/issues/7)) ([30ddf8e](https://github.com/Wondermarin/react-color-palette/commit/30ddf8e30ed4e84dacf2f1728eaae0fdafeecfd5))\n\n## [3.1.0](https://github.com/Wondermarin/react-color-palette/compare/v3.0.0...v3.1.0) (2021-02-25)\n\n\n### Features\n\n* Hide color fields ([#4](https://github.com/Wondermarin/react-color-palette/issues/4)) ([3af0074](https://github.com/Wondermarin/react-color-palette/commit/3af0074d4fe3357d9ef6d3ceee03b42ba8e57a57))\n\n### Bug Fixes\n\n* Fixed the display of fields ([4ddc02f](https://github.com/Wondermarin/react-color-palette/commit/4ddc02ff2a30ae9689ff72effee7fd827de9db00))\n\n## 3.0.0 (2021-01-08)\n\n\n### Whats new?\n\n* Rewritten and improved code. ([a58ea61](https://github.com/Wondermarin/react-color-palette/commit/a58ea610b2a9fdb23945f28a07deb3978bce57df))\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2021 Wondermarin\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "<div align=\"center\">\n  <p>\n    <img alt=\"react-color-palette\" src=\"https://github.com/Wondermarin/react-color-palette/raw/main/public/logo.png\" width=\"128px\" height=\"128px\" />\n  </p>\n  <p>🎨 Lightweight &lt;ColorPicker /&gt; component for <a href=\"https://github.com/facebook/react\">React</a>.</p>\n  <p>\n    <a href=\"https://www.npmjs.com/package/react-color-palette\">\n      <img alt=\"npm\" src=\"https://badgen.net/npm/v/react-color-palette?color=561ecb\" />\n    </a>\n    <a href=\"https://www.npmjs.com/package/react-color-palette\">\n      <img alt=\"downloads\" src=\"https://badgen.net/npm/dw/react-color-palette?color=561ecb\" />\n    </a>\n    <a href=\"https://bundlephobia.com/result?p=react-color-palette\">\n      <img alt=\"size\" src=\"https://badgen.net/bundlephobia/minzip/react-color-palette@latest?color=561ecb\" />\n    </a>\n  </p>\n  <p>\n    <img src=\"https://github.com/Wondermarin/react-color-palette/raw/main/public/demo.apng\" />\n  </p>\n</div>\n\n## Installation\n\n### yarn\n```sh\nyarn add react-color-palette\n```\n\n### npm\n```sh\nnpm install react-color-palette\n```\n\n## Usage\n\n```tsx\nimport { ColorPicker, useColor } from \"react-color-palette\";\nimport \"react-color-palette/css\";\n\nexport function App() {\n  const [color, setColor] = useColor(\"#561ecb\");\n\n  return <ColorPicker color={color} onChange={setColor} />;\n}\n```\n\n## Examples\n\n### Usage <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb\">`rgb()`</a> in <a href=\"#usecolor\">`useColor()`</a>\n```tsx\nimport { ColorPicker, useColor } from \"react-color-palette\";\nimport \"react-color-palette/css\";\n\nexport function App() {\n  const [color, setColor] = useColor(\"rgb(86 30 203)\");\n\n  return <ColorPicker color={color} onChange={setColor} />;\n}\n```\n\n### Usage <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/named-color\">`<named-color>`</a> in <a href=\"#usecolor\">`useColor()`</a>\n```tsx\nimport { ColorPicker, useColor } from \"react-color-palette\";\nimport \"react-color-palette/css\";\n\nexport function App() {\n  const [color, setColor] = useColor(\"cyan\");\n\n  return <ColorPicker color={color} onChange={setColor} />;\n}\n```\n\n### Custom Layout\n```tsx\nimport { Saturation, Hue, useColor } from \"react-color-palette\";\nimport \"react-color-palette/css\";\n\nexport function App() {\n  const [color, setColor] = useColor(\"hsl(120 100% 50% / .5)\");\n\n  return (\n    <div className=\"custom-layout\">\n      <Saturation height={300} color={color} onChange={setColor} />\n      <Hue color={color} onChange={setColor} />\n    </div>\n  );\n}\n```\n\n### HEX input only\n```tsx\nimport { ColorPicker, useColor } from \"react-color-palette\";\nimport \"react-color-palette/css\";\n\nexport function App() {\n  const [color, setColor] = useColor(\"#123123\");\n\n  return <ColorPicker hideInput={[\"rgb\", \"hsv\"]} color={color} onChange={setColor} />\n}\n```\n\n### onChangeComplete optional callback\n```tsx\nimport { ColorPicker, useColor, type IColor } from \"react-color-palette\";\nimport \"react-color-palette/css\";\n\nexport function App() {\n  const [color, setColor] = useColor(\"#123123\");\n\n  const onChangeComplete = (color: IColor) => localStorage.setItem(\"color\", color.hex);\n\n  return <ColorPicker hideInput={[\"rgb\", \"hsv\"]} color={color} onChange={setColor} onChangeComplete={onChangeComplete} />\n}\n```\n\n## API\n\n### `<ColorPicker />`\n<p>The main component, which includes: <a href=\"#saturation\">&lt;Saturation /&gt;</a>, <a href=\"#hue\">&lt;Hue /&gt;</a>, <a href=\"#alpha\">&lt;Alpha /&gt;</a> and &lt;Fields /&gt; components for instant use.<br />If you need a custom layout, then you can use <a href=\"#saturation\">&lt;Saturation /&gt;</a>, <a href=\"#hue\">&lt;Hue /&gt;</a> and <a href=\"#alpha\">&lt;Alpha /&gt;</a> components separately, which are also exported from the library.</p>\n\n<table>\n  <tr>\n    <th>Prop</th>\n    <th>Type</th>\n    <th>Default</th>\n    <th>Description</th>\n  </tr>\n  <tr>\n    <td>height</td>\n    <td>number</td>\n    <td>200</td>\n    <td>Height of the <a href=\"#saturation\">Saturation</a> component in pixels.</td>\n  </tr>\n  <tr>\n    <td>hideAlpha</td>\n    <td>boolean</td>\n    <td>false</td>\n    <td>Hides the <a href=\"#alpha\">Alpha</a> component.</td>\n  </tr>\n  <tr>\n    <td>hideInput</td>\n    <td>(keyof <a href=\"#icolor\">IColor</a>)[] | boolean</td>\n    <td>false</td>\n    <td>If boolean: hides all inputs if true or displays all inputs if false. If array: hides all inputs listed in the array.</td>\n  </tr>\n  <tr>\n    <td>color</td>\n    <td><a href=\"#icolor\">IColor</a></td>\n    <td></td>\n    <td>Current <a href=\"#icolor\">color</a>.</td>\n  </tr>\n  <tr>\n    <td>disabled</td>\n    <td>boolean</td>\n    <td>false</td>\n    <td>Disables interactivity.</td>\n  </tr>\n  <tr>\n    <td>onChange</td>\n    <td>Function</td>\n    <td></td>\n    <td>Сallback function will be fired when <a href=\"#icolor\">color</a> changes.</td>\n  </tr>\n  <tr>\n    <td>onChangeComplete</td>\n    <td>Function</td>\n    <td></td>\n    <td>Callback function will be fired when the interaction is complete with the color picker.</td>\n  </tr>\n</table>\n\n### `<Saturation />`\n\n<table>\n  <tr>\n    <th>Prop</th>\n    <th>Type</th>\n    <th>Default</th>\n    <th>Description</th>\n  </tr>\n  <tr>\n    <td>height</td>\n    <td>number</td>\n    <td></td>\n    <td>Height of the saturation element in pixels.</td>\n  </tr>\n  <tr>\n    <td>color</td>\n    <td><a href=\"#icolor\">IColor</a></td>\n    <td></td>\n    <td>Current <a href=\"#icolor\">color</a>.</td>\n  </tr>\n  <tr>\n    <td>disabled</td>\n    <td>boolean</td>\n    <td>false</td>\n    <td>Disables interactivity.</td>\n  </tr>\n  <tr>\n    <td>onChange</td>\n    <td>Function</td>\n    <td></td>\n    <td>Сallback function will be fired when <a href=\"#icolor\">color</a> changes.</td>\n  </tr>\n  <tr>\n    <td>onChangeComplete</td>\n    <td>Function</td>\n    <td></td>\n    <td>Callback function will be fired when the interaction is complete with the saturation picker.</td>\n  </tr>\n</table>\n\n### `<Hue />`\n\n<table>\n  <tr>\n    <th>Prop</th>\n    <th>Type</th>\n    <th>Default</th>\n    <th>Description</th>\n  </tr>\n  <tr>\n    <td>color</td>\n    <td><a href=\"#icolor\">IColor</a></td>\n    <td></td>\n    <td>Current <a href=\"#icolor\">color</a>.</td>\n  </tr>\n  <tr>\n    <td>disabled</td>\n    <td>boolean</td>\n    <td>false</td>\n    <td>Disables interactivity.</td>\n  </tr>\n  <tr>\n    <td>onChange</td>\n    <td>Function</td>\n    <td></td>\n    <td>Сallback function will be fired when <a href=\"#icolor\">color</a> changes.</td>\n  </tr>\n  <tr>\n    <td>onChangeComplete</td>\n    <td>Function</td>\n    <td></td>\n    <td>Callback function will be fired when the interaction is complete with the hue picker.</td>\n  </tr>\n</table>\n\n### `<Alpha />`\n\n<table>\n  <tr>\n    <th>Prop</th>\n    <th>Type</th>\n    <th>Default</th>\n    <th>Description</th>\n  </tr>\n  <tr>\n    <td>color</td>\n    <td><a href=\"#icolor\">IColor</a></td>\n    <td></td>\n    <td>Current <a href=\"#icolor\">color</a>.</td>\n  </tr>\n  <tr>\n    <td>disabled</td>\n    <td>boolean</td>\n    <td>false</td>\n    <td>Disables interactivity.</td>\n  </tr>\n  <tr>\n    <td>onChange</td>\n    <td>Function</td>\n    <td></td>\n    <td>Сallback function will be fired when <a href=\"#icolor\">color</a> changes.</td>\n  </tr>\n  <tr>\n    <td>onChangeComplete</td>\n    <td>Function</td>\n    <td></td>\n    <td>Callback function will be fired when the interaction is complete with the alpha picker.</td>\n  </tr>\n</table>\n\n### `useColor()`\n\n<table>\n  <tr>\n    <th>Arg</th>\n    <th>Type</th>\n    <th>Default</th>\n    <th>Description</th>\n  </tr>\n  <tr>\n    <td>initialColor</td>\n    <td><a href=\"#tcolor\">TColor</a></td>\n    <td></td>\n    <td>Initial <a href=\"#tcolor\">сolor</a>.</td>\n  </tr>\n</table>\n\n### `TColor`\n<p>Value can be specified using one of the methods listed below:</p>\n\n- <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/named-color\">`<named-color>`</a>\n- <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color\">`<hex-color>`</a>\n- <a href=\"https://en.wikipedia.org/wiki/SRGB\">sRGB</a> color space: <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl\">`hsl()`</a>, <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb\">`hwb()`</a> or <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb\">`rgb()`</a>\n\n### `IColor`\n\n<table>\n  <tr>\n    <th>Field</th>\n    <th>Type</th>\n  </tr>\n  <tr>\n    <td>hex</td>\n    <td>string</td>\n  </tr>\n  <tr>\n    <td>rgb</td>\n    <td><a href=\"#icolorrgb\">IColorRgb</a></td>\n  </tr>\n  <tr>\n    <td>hsv</td>\n    <td><a href=\"#icolorhsv\">IColorHsv</a></td>\n  </tr>\n</table>\n\n### `IColorRgb`\n\n<table>\n  <tr>\n    <th>Field</th>\n    <th>Type</th>\n  </tr>\n  <tr>\n    <td>r</td>\n    <td>number</td>\n  </tr>\n  <tr>\n    <td>g</td>\n    <td>number</td>\n  </tr>\n  <tr>\n    <td>b</td>\n    <td>number</td>\n  </tr>\n    <tr>\n    <td>a</td>\n    <td>number</td>\n  </tr>\n</table>\n\n### `IColorHsv`\n\n<table>\n  <tr>\n    <th>Field</th>\n    <th>Type</th>\n  </tr>\n  <tr>\n    <td>h</td>\n    <td>number</td>\n  </tr>\n  <tr>\n    <td>s</td>\n    <td>number</td>\n  </tr>\n  <tr>\n    <td>v</td>\n    <td>number</td>\n  </tr>\n    <tr>\n    <td>a</td>\n    <td>number</td>\n  </tr>\n</table>\n\n## License\n\n<p>Code released under the <a href=\"https://github.com/Wondermarin/react-color-palette/blob/master/LICENSE\">MIT</a> license.</p>\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"react-color-palette\",\n  \"version\": \"7.3.1\",\n  \"description\": \"🎨 Lightweight Color Picker component for React.\",\n  \"author\": \"Wondermarin\",\n  \"type\": \"commonjs\",\n  \"main\": \"dist/rcp.js\",\n  \"module\": \"dist/rcp.mjs\",\n  \"types\": \"dist/rcp.d.ts\",\n  \"exports\": {\n    \"./package.json\": \"./package.json\",\n    \".\": {\n      \"import\": {\n        \"types\": \"./dist/rcp.d.mts\",\n        \"default\": \"./dist/rcp.mjs\"\n      },\n      \"require\": {\n        \"types\": \"./dist/rcp.d.ts\",\n        \"default\": \"./dist/rcp.js\"\n      }\n    },\n    \"./css\": \"./dist/css/rcp.css\",\n    \"./dist/css/rcp.css\": \"./dist/css/rcp.css\"\n  },\n  \"homepage\": \"https://github.com/Wondermarin/react-color-palette#readme\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/Wondermarin/react-color-palette.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/Wondermarin/react-color-palette/issues\"\n  },\n  \"license\": \"MIT\",\n  \"sideEffects\": [\n    \"*.css\"\n  ],\n  \"private\": false,\n  \"keywords\": [\n    \"react\",\n    \"react-component\",\n    \"color-palette\",\n    \"color palette\",\n    \"color-picker\",\n    \"color picker\",\n    \"color\",\n    \"picker\"\n  ],\n  \"files\": [\n    \"dist\"\n  ],\n  \"engines\": {\n    \"node\": \">=10\"\n  },\n  \"scripts\": {\n    \"test:lint\": \"eslint src/**/*.{ts,tsx}\",\n    \"test:types\": \"tsc\",\n    \"test\": \"pnpm test:lint && pnpm test:types\",\n    \"prebuild\": \"pnpm test\",\n    \"build\": \"tsup\"\n  },\n  \"peerDependencies\": {\n    \"react\": \">=16.8\"\n  },\n  \"devDependencies\": {\n    \"@ianvs/prettier-plugin-sort-imports\": \"^4.1.0\",\n    \"@types/node\": \"^20.4.4\",\n    \"@types/react\": \"^18.2.15\",\n    \"@types/react-dom\": \"^18.2.7\",\n    \"@typescript-eslint/eslint-plugin\": \"^6.1.0\",\n    \"@typescript-eslint/parser\": \"^6.1.0\",\n    \"eslint\": \"^8.45.0\",\n    \"eslint-plugin-prettier\": \"^5.0.0\",\n    \"eslint-plugin-react\": \"^7.33.0\",\n    \"eslint-plugin-react-hooks\": \"^4.6.0\",\n    \"prettier\": \"^3.0.0\",\n    \"tsup\": \"^7.2.0\",\n    \"typescript\": \"^5.1.6\"\n  }\n}\n"
  },
  {
    "path": "src/components/alpha/alpha.component.tsx",
    "content": "import React, { memo, useCallback, useMemo } from \"react\";\n\nimport { useBoundingClientRect } from \"@/hooks/use-bounding-client-rect\";\n\nimport { ColorService, type IColor } from \"@/services/color\";\n\nimport { Interactive } from \"../interactive\";\n\ninterface IAlphaProps {\n  readonly color: IColor;\n  readonly disabled?: boolean;\n  readonly onChange: (color: IColor) => void;\n  readonly onChangeComplete?: (color: IColor) => void;\n}\n\nexport const Alpha = memo(({ color, disabled, onChange, onChangeComplete }: IAlphaProps) => {\n  const [alphaRef, { width }] = useBoundingClientRect<HTMLDivElement>();\n\n  const position = useMemo(() => {\n    const x = color.hsv.a * width;\n\n    return { x };\n  }, [color.hsv.a, width]);\n\n  const updateColor = useCallback(\n    (final: boolean, x: number) => {\n      const nextColor = ColorService.convert(\"hsv\", {\n        ...color.hsv,\n        a: x / width,\n      });\n\n      onChange(nextColor);\n      if (final) onChangeComplete?.(nextColor);\n    },\n    [color.hsv, width, onChange, onChangeComplete]\n  );\n\n  const rgb = useMemo(() => [color.rgb.r, color.rgb.g, color.rgb.b].join(\" \"), [color.rgb.r, color.rgb.g, color.rgb.b]);\n  const rgba = useMemo(() => [rgb, color.rgb.a].join(\" / \"), [rgb, color.rgb.a]);\n\n  return (\n    <Interactive disabled={disabled} onCoordinateChange={updateColor}>\n      <div\n        ref={alphaRef}\n        style={{\n          background: `linear-gradient(to right, rgb(${rgb} / 0), rgb(${rgb} / 1)) top left / auto auto,\n                      conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) top left / 12px 12px\n                      repeat`,\n        }}\n        className=\"rcp-alpha\"\n      >\n        <div\n          style={{\n            left: position.x,\n            background: `linear-gradient(to right, rgb(${rgba}), rgb(${rgba})) top left / auto auto,\n                        conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) ${\n                          -position.x - 4\n                        }px 2px / 12px 12px\n                        repeat`,\n          }}\n          className=\"rcp-alpha-cursor\"\n        />\n      </div>\n    </Interactive>\n  );\n});\n"
  },
  {
    "path": "src/components/alpha/index.ts",
    "content": "export * from \"./alpha.component\";\n"
  },
  {
    "path": "src/components/color-picker/color-picker.component.tsx",
    "content": "import React, { memo } from \"react\";\n\nimport { type IColor } from \"@/services/color\";\n\nimport { isFieldHide } from \"@/utils/is-field-hide\";\n\nimport { Alpha } from \"../alpha\";\nimport { Fields } from \"../fields\";\nimport { Hue } from \"../hue\";\nimport { Saturation } from \"../saturation\";\n\ninterface IColorPickerProps {\n  readonly height?: number;\n  readonly hideAlpha?: boolean;\n  readonly hideInput?: (keyof IColor)[] | boolean;\n  readonly color: IColor;\n  readonly disabled?: boolean;\n  readonly onChange: (color: IColor) => void;\n  readonly onChangeComplete?: (color: IColor) => void;\n}\n\nexport const ColorPicker = memo(\n  ({\n    height = 200,\n    hideAlpha = false,\n    hideInput = false,\n    color,\n    disabled = false,\n    onChange,\n    onChangeComplete,\n  }: IColorPickerProps) => (\n    <div className=\"rcp-root rcp\">\n      <Saturation\n        height={height}\n        color={color}\n        disabled={disabled}\n        onChange={onChange}\n        onChangeComplete={onChangeComplete}\n      />\n      <div className=\"rcp-body\">\n        <section className=\"rcp-section\">\n          <Hue color={color} disabled={disabled} onChange={onChange} onChangeComplete={onChangeComplete} />\n          {!hideAlpha && (\n            <Alpha color={color} disabled={disabled} onChange={onChange} onChangeComplete={onChangeComplete} />\n          )}\n        </section>\n        {(!isFieldHide(hideInput, \"hex\") || !isFieldHide(hideInput, \"rgb\") || !isFieldHide(hideInput, \"hsv\")) && (\n          <section className=\"rcp-section\">\n            <Fields\n              hideInput={hideInput}\n              color={color}\n              disabled={disabled}\n              onChange={onChange}\n              onChangeComplete={onChangeComplete}\n            />\n          </section>\n        )}\n      </div>\n    </div>\n  )\n);\n"
  },
  {
    "path": "src/components/color-picker/index.ts",
    "content": "export * from \"./color-picker.component\";\n"
  },
  {
    "path": "src/components/fields/fields.component.tsx",
    "content": "import React, { memo, useCallback, useEffect, useState } from \"react\";\n\nimport { ColorService, type IColor } from \"@/services/color\";\n\nimport { formatHsv, formatRgb } from \"@/utils/format\";\nimport { isFieldHide } from \"@/utils/is-field-hide\";\n\ninterface IFieldsProps {\n  readonly hideInput: (keyof IColor)[] | boolean;\n  readonly color: IColor;\n  readonly disabled?: boolean;\n  readonly onChange: (color: IColor) => void;\n  readonly onChangeComplete?: (color: IColor) => void;\n}\n\nexport const Fields = memo(({ hideInput, color, disabled, onChange, onChangeComplete }: IFieldsProps) => {\n  const [fields, setFields] = useState({\n    hex: {\n      value: color.hex,\n      inputted: false,\n    },\n    rgb: {\n      value: formatRgb(color.rgb),\n      inputted: false,\n    },\n    hsv: {\n      value: formatHsv(color.hsv),\n      inputted: false,\n    },\n  });\n\n  useEffect(() => {\n    if (!fields.hex.inputted) {\n      setFields((fields) => ({ ...fields, hex: { ...fields.hex, value: color.hex } }));\n    }\n  }, [fields.hex.inputted, color.hex]);\n\n  useEffect(() => {\n    if (!fields.rgb.inputted) {\n      setFields((fields) => ({ ...fields, rgb: { ...fields.rgb, value: formatRgb(color.rgb) } }));\n    }\n  }, [fields.rgb.inputted, color.rgb]);\n\n  useEffect(() => {\n    if (!fields.hsv.inputted) {\n      setFields((fields) => ({ ...fields, hsv: { ...fields.hsv, value: formatHsv(color.hsv) } }));\n    }\n  }, [fields.hsv.inputted, color.hsv]);\n\n  const onInputChange = useCallback(\n    <T extends keyof typeof fields>(field: T) =>\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const { value } = event.target;\n\n        setFields((fields) => ({ ...fields, [field]: { ...fields[field], value } }));\n\n        if (field === \"hsv\") onChange(ColorService.convert(\"hsv\", ColorService.toHsv(value)));\n        else if (field === \"rgb\") onChange(ColorService.convert(\"rgb\", ColorService.toRgb(value)));\n        else onChange(ColorService.convert(\"hex\", value));\n      },\n    [onChange]\n  );\n\n  const onInputFocus = useCallback(\n    <T extends keyof typeof fields>(field: T) =>\n      () => {\n        setFields((fields) => ({ ...fields, [field]: { ...fields[field], inputted: true } }));\n      },\n    []\n  );\n\n  const onInputBlur = useCallback(\n    <T extends keyof typeof fields>(field: T) =>\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const { value } = event.target;\n\n        setFields((fields) => ({ ...fields, [field]: { ...fields[field], inputted: false } }));\n\n        if (field === \"hsv\") onChangeComplete?.(ColorService.convert(\"hsv\", ColorService.toHsv(value)));\n        else if (field === \"rgb\") onChangeComplete?.(ColorService.convert(\"rgb\", ColorService.toRgb(value)));\n        else onChangeComplete?.(ColorService.convert(\"hex\", value));\n      },\n    [onChangeComplete]\n  );\n\n  return (\n    <div className=\"rcp-fields\">\n      {!isFieldHide(hideInput, \"hex\") && (\n        <div className=\"rcp-fields-floor\">\n          <div className=\"rcp-field\">\n            <input\n              id=\"hex\"\n              className=\"rcp-field-input\"\n              readOnly={disabled}\n              value={fields.hex.value}\n              onChange={onInputChange(\"hex\")}\n              onFocus={onInputFocus(\"hex\")}\n              onBlur={onInputBlur(\"hex\")}\n            />\n            <label htmlFor=\"hex\" className=\"rcp-field-label\">\n              HEX\n            </label>\n          </div>\n        </div>\n      )}\n      {(!isFieldHide(hideInput, \"rgb\") || !isFieldHide(hideInput, \"hsv\")) && (\n        <div className=\"rcp-fields-floor\">\n          {!isFieldHide(hideInput, \"rgb\") && (\n            <div className=\"rcp-field\">\n              <input\n                id=\"rgb\"\n                className=\"rcp-field-input\"\n                readOnly={disabled}\n                value={fields.rgb.value}\n                onChange={onInputChange(\"rgb\")}\n                onFocus={onInputFocus(\"rgb\")}\n                onBlur={onInputBlur(\"rgb\")}\n              />\n              <label htmlFor=\"rgb\" className=\"rcp-field-label\">\n                RGB\n              </label>\n            </div>\n          )}\n          {!isFieldHide(hideInput, \"hsv\") && (\n            <div className=\"rcp-field\">\n              <input\n                id=\"hsv\"\n                className=\"rcp-field-input\"\n                readOnly={disabled}\n                value={fields.hsv.value}\n                onChange={onInputChange(\"hsv\")}\n                onFocus={onInputFocus(\"hsv\")}\n                onBlur={onInputBlur(\"hsv\")}\n              />\n              <label htmlFor=\"hsv\" className=\"rcp-field-label\">\n                HSV\n              </label>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n});\n"
  },
  {
    "path": "src/components/fields/index.ts",
    "content": "export * from \"./fields.component\";\n"
  },
  {
    "path": "src/components/hue/hue.component.tsx",
    "content": "import React, { memo, useCallback, useMemo } from \"react\";\n\nimport { useBoundingClientRect } from \"@/hooks/use-bounding-client-rect\";\n\nimport { ColorService, type IColor } from \"@/services/color\";\n\nimport { Interactive } from \"../interactive\";\n\ninterface IHueProps {\n  readonly color: IColor;\n  readonly disabled?: boolean;\n  readonly onChange: (color: IColor) => void;\n  readonly onChangeComplete?: (color: IColor) => void;\n}\n\nexport const Hue = memo(({ color, disabled, onChange, onChangeComplete }: IHueProps) => {\n  const [hueRef, { width }] = useBoundingClientRect<HTMLDivElement>();\n\n  const position = useMemo(() => {\n    const x = (color.hsv.h / 360) * width;\n\n    return { x };\n  }, [color.hsv.h, width]);\n\n  const updateColor = useCallback(\n    (final: boolean, x: number) => {\n      const nextColor = ColorService.convert(\"hsv\", {\n        ...color.hsv,\n        h: (x / width) * 360,\n      });\n\n      onChange(nextColor);\n      if (final) onChangeComplete?.(nextColor);\n    },\n    [color.hsv, width, onChange, onChangeComplete]\n  );\n\n  const hsl = useMemo(() => [color.hsv.h, \"100%\", \"50%\"].join(\" \"), [color.hsv.h]);\n\n  return (\n    <Interactive disabled={disabled} onCoordinateChange={updateColor}>\n      <div ref={hueRef} className=\"rcp-hue\">\n        <div style={{ left: position.x, backgroundColor: `hsl(${hsl})` }} className=\"rcp-hue-cursor\" />\n      </div>\n    </Interactive>\n  );\n});\n"
  },
  {
    "path": "src/components/hue/index.ts",
    "content": "export * from \"./hue.component\";\n"
  },
  {
    "path": "src/components/interactive/index.ts",
    "content": "export * from \"./interactive.component\";\n"
  },
  {
    "path": "src/components/interactive/interactive.component.tsx",
    "content": "import React, { memo, useCallback } from \"react\";\n\nimport { useBoundingClientRect } from \"@/hooks/use-bounding-client-rect\";\n\nimport { clamp } from \"@/utils/clamp\";\nimport { isTouch } from \"@/utils/is-touch\";\n\ninterface IInteractiveProps {\n  readonly onCoordinateChange: (final: boolean, x: number, y: number) => void;\n  readonly children: React.ReactNode;\n  readonly disabled?: boolean;\n}\n\ntype TInteractionEvent = React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement> | MouseEvent | TouchEvent;\ntype TMoveEvent = React.MouseEvent<HTMLDivElement> | React.Touch | MouseEvent | Touch;\n\nexport const Interactive = memo(({ onCoordinateChange, children, disabled }: IInteractiveProps) => {\n  const [interactiveRef, { width, height }, getPosition] = useBoundingClientRect<HTMLDivElement>();\n\n  const move = useCallback(\n    (event: TMoveEvent, final = false) => {\n      const { left, top } = getPosition();\n\n      const x = clamp(event.clientX - left, 0, width);\n      const y = clamp(event.clientY - top, 0, height);\n\n      onCoordinateChange(final, x, y);\n    },\n    [width, height, getPosition, onCoordinateChange]\n  );\n\n  const onStart = useCallback(\n    (event: TInteractionEvent) => {\n      if (!isTouch(event) && event.button !== 0) return;\n\n      const onMove = (event: TInteractionEvent) => {\n        move(isTouch(event) ? event.touches[0] : event);\n      };\n\n      const onEnd = (event: TInteractionEvent) => {\n        move(isTouch(event) ? event.changedTouches[0] : event, true);\n\n        document.removeEventListener(isTouch(event) ? \"touchmove\" : \"mousemove\", onMove, false);\n        document.removeEventListener(isTouch(event) ? \"touchend\" : \"mouseup\", onEnd, false);\n      };\n\n      onMove(event);\n\n      document.addEventListener(isTouch(event) ? \"touchmove\" : \"mousemove\", onMove, false);\n      document.addEventListener(isTouch(event) ? \"touchend\" : \"mouseup\", onEnd, false);\n    },\n    [move]\n  );\n\n  return (\n    <div\n      ref={interactiveRef}\n      className=\"rcp-interactive\"\n      onMouseDown={onStart}\n      onTouchStart={onStart}\n      aria-disabled={disabled}\n    >\n      {children}\n    </div>\n  );\n});\n"
  },
  {
    "path": "src/components/saturation/index.ts",
    "content": "export * from \"./saturation.component\";\n"
  },
  {
    "path": "src/components/saturation/saturation.component.tsx",
    "content": "import React, { memo, useCallback, useMemo } from \"react\";\n\nimport { useBoundingClientRect } from \"@/hooks/use-bounding-client-rect\";\n\nimport { ColorService, type IColor } from \"@/services/color\";\n\nimport { Interactive } from \"../interactive\";\n\ninterface ISaturationProps {\n  readonly height: number;\n  readonly color: IColor;\n  readonly disabled?: boolean;\n  readonly onChange: (color: IColor) => void;\n  readonly onChangeComplete?: (color: IColor) => void;\n}\n\nexport const Saturation = memo(({ height, color, disabled, onChange, onChangeComplete }: ISaturationProps) => {\n  const [saturationRef, { width }] = useBoundingClientRect<HTMLDivElement>();\n\n  const position = useMemo(() => {\n    const x = (color.hsv.s / 100) * width;\n    const y = ((100 - color.hsv.v) / 100) * height;\n\n    return { x, y };\n  }, [color.hsv.s, color.hsv.v, width, height]);\n\n  const updateColor = useCallback(\n    (final: boolean, x: number, y: number) => {\n      const nextColor = ColorService.convert(\"hsv\", {\n        ...color.hsv,\n        s: (x / width) * 100,\n        v: 100 - (y / height) * 100,\n      });\n\n      onChange(nextColor);\n      if (final) onChangeComplete?.(nextColor);\n    },\n    [color.hsv, width, height, onChange, onChangeComplete]\n  );\n\n  const hsl = useMemo(() => [color.hsv.h, \"100%\", \"50%\"].join(\" \"), [color.hsv.h]);\n  const rgb = useMemo(() => [color.rgb.r, color.rgb.g, color.rgb.b].join(\" \"), [color.rgb.r, color.rgb.g, color.rgb.b]);\n\n  return (\n    <Interactive disabled={disabled} onCoordinateChange={updateColor}>\n      <div ref={saturationRef} style={{ height, backgroundColor: `hsl(${hsl})` }} className=\"rcp-saturation\">\n        <div\n          style={{ left: position.x, top: position.y, backgroundColor: `rgb(${rgb})` }}\n          className=\"rcp-saturation-cursor\"\n        />\n      </div>\n    </Interactive>\n  );\n});\n"
  },
  {
    "path": "src/css/rcp.css",
    "content": ".rcp-root {\n  --rcp-background-color: #121212;\n  --rcp-field-input-color: #ffffff;\n  --rcp-field-input-border-color: #242424;\n  --rcp-field-label-color: #808080;\n}\n\n.rcp {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--rcp-background-color);\n  border-radius: 10px;\n}\n\n.rcp-body {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  padding: 20px 10px;\n}\n\n.rcp-section {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.rcp-interactive {\n  width: 100%;\n  height: 100%;\n  user-select: none;\n  touch-action: none;\n}\n\n.rcp-interactive[aria-disabled=\"true\"] {\n  cursor: unset;\n  pointer-events: none;\n}\n\n.rcp-saturation {\n  cursor: all-scroll;\n  width: 100%;\n  position: relative;\n  background-image: linear-gradient(to bottom, transparent, black), linear-gradient(to right, white, transparent);\n  border-radius: 10px 10px 0 0;\n}\n\n.rcp-saturation-cursor {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  border: 2px solid white;\n  border-radius: 100%;\n  box-shadow: 0 0 15px 0 rgb(0 0 0 / .15);\n  transform: translate(-10px, -10px);\n}\n\n.rcp-hue {\n  cursor: ew-resize;\n  position: relative;\n  width: 100%;\n  height: 12px;\n  background-image: linear-gradient(\n    to right,\n    rgb(255, 0, 0),\n    rgb(255, 255, 0),\n    rgb(0, 255, 0),\n    rgb(0, 255, 255),\n    rgb(0, 0, 255),\n    rgb(255, 0, 255),\n    rgb(255, 0, 0)\n  );\n  border-radius: 10px;\n}\n\n.rcp-hue-cursor {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  border: 2px solid white;\n  border-radius: 100%;\n  box-shadow: 0 0 15px 0 rgb(0 0 0 / .15);\n  transform: translate(-10px, -4px);\n}\n\n.rcp-alpha {\n  cursor: ew-resize;\n  position: relative;\n  width: 100%;\n  height: 12px;\n  border-radius: 10px;\n}\n\n.rcp-alpha-cursor {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  border: 2px solid white;\n  border-radius: 100%;\n  box-shadow: 0 0 15px 0 rgb(0 0 0 / .15);\n  transform: translate(-10px, -4px);\n}\n\n.rcp-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.rcp-fields-floor {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 10px;\n}\n\n.rcp-field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.rcp-field-input {\n  width: 100%;\n  font-family: inherit;\n  font-size: 14px;\n  text-align: center;\n  color: var(--rcp-field-input-color);\n  background-color: transparent;\n  border: 2px solid var(--rcp-field-input-border-color);\n  border-radius: 5px;\n  outline: none;\n  padding: 5px 0;\n}\n\n.rcp-field-input:read-only {\n  opacity: 0.8;\n}\n\n.rcp-field-label {\n  font-size: 14px;\n  text-align: center;\n  color: var(--rcp-field-label-color);\n}\n"
  },
  {
    "path": "src/hooks/use-bounding-client-rect/index.ts",
    "content": "export * from \"./use-bounding-client-rect.hook\";\n"
  },
  {
    "path": "src/hooks/use-bounding-client-rect/use-bounding-client-rect.hook.ts",
    "content": "import { useCallback, useLayoutEffect, useRef, useState } from \"react\";\n\ninterface ISize {\n  readonly width: number;\n  readonly height: number;\n}\n\ninterface IPosition {\n  readonly left: number;\n  readonly right: number;\n  readonly top: number;\n  readonly bottom: number;\n}\n\nconst getElementDimensions = (element: Element): ISize => {\n  const rect = element.getBoundingClientRect();\n\n  return {\n    width: rect.width,\n    height: rect.height,\n  };\n};\n\nexport function useBoundingClientRect<T extends HTMLElement>(): [React.RefObject<T>, ISize, () => IPosition] {\n  const ref = useRef<T>(null);\n\n  const [size, setSize] = useState<ISize>({ width: 1, height: 1 });\n\n  useLayoutEffect(() => {\n    const onWindowResize = () => {\n      if (!ref.current) return;\n      setSize(getElementDimensions(ref.current));\n    };\n    const onElementResize: ResizeObserverCallback = ([{ contentBoxSize }]) => {\n      setSize({\n        height: contentBoxSize[0].blockSize,\n        width: contentBoxSize[0].inlineSize,\n      });\n    };\n\n    window.addEventListener(\"resize\", onWindowResize, false);\n\n    const observer = new ResizeObserver(onElementResize);\n\n    if (ref.current) observer.observe(ref.current);\n\n    return () => {\n      window.removeEventListener(\"resize\", onWindowResize, false);\n      observer.disconnect();\n    };\n  }, []);\n\n  const getPosition = useCallback(() => {\n    const { left = 1, right = 1, top = 1, bottom = 1 } = ref.current?.getBoundingClientRect() ?? ({} as DOMRect);\n\n    return { left, right, top, bottom };\n  }, []);\n\n  return [ref, size, getPosition];\n}\n"
  },
  {
    "path": "src/hooks/use-color/index.ts",
    "content": "export * from \"./use-color.hook\";\n"
  },
  {
    "path": "src/hooks/use-color/use-color.hook.ts",
    "content": "import { useEffect, useState } from \"react\";\n\nimport { ColorService, type IColor } from \"@/services/color\";\n\nexport function useColor(initialColor: string): [IColor, React.Dispatch<React.SetStateAction<IColor>>] {\n  const [color, setColor] = useState(ColorService.convert(\"hex\", initialColor));\n\n  useEffect(() => {\n    setColor(ColorService.convert(\"hex\", initialColor));\n  }, [initialColor]);\n\n  return [color, setColor];\n}\n"
  },
  {
    "path": "src/rcp.ts",
    "content": "export { ColorPicker } from \"./components/color-picker\";\nexport { Saturation } from \"./components/saturation\";\nexport { Hue } from \"./components/hue\";\nexport { Alpha } from \"./components/alpha\";\n\nexport { useColor } from \"./hooks/use-color\";\n\nexport { ColorService, type IColor } from \"./services/color\";\n"
  },
  {
    "path": "src/services/color/color.service.ts",
    "content": "import { clamp } from \"@/utils/clamp\";\n\nexport interface IColor {\n  readonly hex: string;\n  readonly rgb: IColorRgb;\n  readonly hsv: IColorHsv;\n}\n\ninterface IColorRgb {\n  readonly r: number;\n  readonly g: number;\n  readonly b: number;\n  readonly a: number;\n}\n\ninterface IColorHsv {\n  readonly h: number;\n  readonly s: number;\n  readonly v: number;\n  readonly a: number;\n}\n\nclass ColorServiceStatic {\n  public convert<M extends keyof IColor, C extends IColor[M]>(model: M, color: C): IColor {\n    let hex: IColor[\"hex\"] = this.toHex(\"#000000\");\n    let rgb: IColor[\"rgb\"] = this.hex2rgb(hex);\n    let hsv: IColor[\"hsv\"] = this.rgb2hsv(rgb);\n\n    if (model === \"hex\") {\n      const value = color as IColor[\"hex\"];\n\n      hex = this.toHex(value);\n      rgb = this.hex2rgb(hex);\n\n      if (hex.startsWith(\"rgba\")) {\n        rgb = this.toRgb(hex);\n        hex = this.rgb2hex(rgb);\n      }\n\n      hsv = this.rgb2hsv(rgb);\n    } else if (model === \"rgb\") {\n      const value = color as IColor[\"rgb\"];\n\n      rgb = value;\n      hex = this.rgb2hex(rgb);\n      hsv = this.rgb2hsv(rgb);\n    } else if (model === \"hsv\") {\n      const value = color as IColor[\"hsv\"];\n\n      hsv = value;\n      rgb = this.hsv2rgb(hsv);\n      hex = this.rgb2hex(rgb);\n    }\n\n    return { hex, rgb, hsv };\n  }\n\n  public toHex(value: string): IColor[\"hex\"] {\n    if (!value.startsWith(\"#\")) {\n      const ctx = document.createElement(\"canvas\").getContext(\"2d\");\n\n      if (!ctx) throw new Error(\"2d context not supported or canvas already initialized\");\n\n      ctx.fillStyle = value;\n\n      return ctx.fillStyle;\n    } else if (value.length === 4 || value.length === 5) {\n      value = value\n        .split(\"\")\n        .map((v, i) => (i ? (i < 4 ? v + v : v === \"f\" ? undefined : v + v) : \"#\"))\n        .join(\"\");\n\n      return value;\n    } else if (value.length === 7) {\n      return value;\n    } else if (value.length === 9) {\n      return value.endsWith(\"ff\") ? value.slice(0, 7) : value;\n    }\n\n    return \"#000000\";\n  }\n\n  public toRgb(value: string): IColor[\"rgb\"] {\n    const rgb: string[] = value.match(/\\d+(\\.\\d+)?/gu) ?? [];\n\n    const [r, g, b, a] = Array.from({ length: 4 }).map((_, i) =>\n      clamp(+(rgb[i] ?? (i < 3 ? 0 : 1)), 0, i < 3 ? 255 : 1)\n    );\n\n    return { r, g, b, a };\n  }\n\n  public toHsv(value: string): IColor[\"hsv\"] {\n    const hsv: string[] = value.match(/\\d+(\\.\\d+)?/gu) ?? [];\n\n    const [h, s, v, a] = Array.from({ length: 4 }).map((_, i) =>\n      clamp(+(hsv[i] ?? (i < 3 ? 0 : 1)), 0, i ? (i < 3 ? 100 : 1) : 360)\n    );\n\n    return { h, s, v, a };\n  }\n\n  public hex2rgb(hex: IColor[\"hex\"]): IColor[\"rgb\"] {\n    hex = hex.slice(1);\n\n    let [r, g, b, a] = Array.from({ length: 4 }).map((_, i) => parseInt(hex.slice(i * 2, i * 2 + 2), 16));\n\n    a = Number.isNaN(a) ? 1 : a / 255;\n\n    return { r, g, b, a };\n  }\n\n  public rgb2hsv({ r, g, b, a }: IColor[\"rgb\"]): IColor[\"hsv\"] {\n    r /= 255;\n    g /= 255;\n    b /= 255;\n\n    const max = Math.max(r, g, b);\n    const d = max - Math.min(r, g, b);\n\n    const h = d ? (max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? 2 + (b - r) / d : 4 + (r - g) / d) * 60 : 0;\n    const s = max ? (d / max) * 100 : 0;\n    const v = max * 100;\n\n    return { h, s, v, a };\n  }\n\n  public hsv2rgb({ h, s, v, a }: IColor[\"hsv\"]): IColor[\"rgb\"] {\n    s /= 100;\n    v /= 100;\n\n    const i = ~~(h / 60);\n    const f = h / 60 - i;\n    const p = v * (1 - s);\n    const q = v * (1 - s * f);\n    const t = v * (1 - s * (1 - f));\n    const index = i % 6;\n\n    const r = [v, q, p, p, t, v][index] * 255;\n    const g = [t, v, v, q, p, p][index] * 255;\n    const b = [p, p, t, v, v, q][index] * 255;\n\n    return { r, g, b, a };\n  }\n\n  public rgb2hex({ r, g, b, a }: IColor[\"rgb\"]): IColor[\"hex\"] {\n    const [rr, gg, bb, aa] = [r, g, b, a].map((v, i) =>\n      Math.round(i < 3 ? v : v * 255)\n        .toString(16)\n        .padStart(2, \"0\")\n    );\n\n    return [\"#\", rr, gg, bb, aa === \"ff\" ? \"\" : aa].join(\"\");\n  }\n}\n\nexport const ColorService = new ColorServiceStatic();\n"
  },
  {
    "path": "src/services/color/index.ts",
    "content": "export * from \"./color.service\";\n"
  },
  {
    "path": "src/utils/clamp/clamp.util.ts",
    "content": "export function clamp(value: number, min: number, max: number) {\n  return value < min ? min : value > max ? max : value;\n}\n"
  },
  {
    "path": "src/utils/clamp/index.ts",
    "content": "export * from \"./clamp.util\";\n"
  },
  {
    "path": "src/utils/float/float.util.ts",
    "content": "export function float(value: number, decimalPlaces: number) {\n  return Math.round(value * 10 ** decimalPlaces) / 10 ** decimalPlaces;\n}\n"
  },
  {
    "path": "src/utils/float/index.ts",
    "content": "export * from \"./float.util\";\n"
  },
  {
    "path": "src/utils/format/format.util.ts",
    "content": "import { type IColor } from \"@/services/color\";\n\nimport { float } from \"../float\";\n\nexport function formatRgb({ r, g, b, a }: IColor[\"rgb\"]) {\n  const rgb: any[] = [Math.round(r), Math.round(g), Math.round(b)];\n  const alpha = float(a, 3);\n\n  if (alpha < 1) rgb.push(alpha);\n\n  return rgb.join(\", \");\n}\n\nexport function formatHsv({ h, s, v, a }: IColor[\"hsv\"]) {\n  const hsv: any[] = [`${Math.round(h)}°`, `${Math.round(s)}%`, `${Math.round(v)}%`];\n  const alpha = float(a, 3);\n\n  if (alpha < 1) hsv.push(alpha);\n\n  return hsv.join(\", \");\n}\n"
  },
  {
    "path": "src/utils/format/index.ts",
    "content": "export * from \"./format.util\";\n"
  },
  {
    "path": "src/utils/is-field-hide/index.ts",
    "content": "export * from \"./is-field-hide.util\";\n"
  },
  {
    "path": "src/utils/is-field-hide/is-field-hide.util.ts",
    "content": "import { type IColor } from \"@/services/color\";\n\nexport function isFieldHide(hideInput: (keyof IColor)[] | boolean, field: keyof IColor) {\n  return Array.isArray(hideInput) ? hideInput.includes(field) : hideInput;\n}\n"
  },
  {
    "path": "src/utils/is-touch/index.ts",
    "content": "export * from \"./is-touch.util\";\n"
  },
  {
    "path": "src/utils/is-touch/is-touch.util.ts",
    "content": "export function isTouch<T>(event: any): event is React.TouchEvent<T> | TouchEvent {\n  return \"touches\" in event;\n}\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"ESNext\",\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"Node\",\n    \"lib\": [\"ESNext\", \"DOM\"],\n    \"jsx\": \"react\",\n    \"outDir\": \"dist\",\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@/*\": [\"src/*\"]\n    },\n    \"noEmit\": true,\n    \"strict\": true,\n    \"isolatedModules\": true,\n    \"esModuleInterop\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"skipLibCheck\": true,\n    \"removeComments\": true,\n  },\n  \"include\": [\"src\", \"demo\", \"tsup.config.ts\"],\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "tsup.config.ts",
    "content": "import { defineConfig } from \"tsup\";\n\nconst config = defineConfig({\n  entry: [\"src/rcp.ts\", \"src/css/rcp.css\"],\n  outDir: \"dist\",\n  format: [\"esm\", \"cjs\"],\n  external: [\"react\"],\n  clean: true,\n  minify: false,\n  dts: \"src/rcp.ts\",\n  banner: {\n    js: `\"use client\"`,\n  },\n});\n\nexport default config;\n"
  }
]