@snack-uikit/color-picker 0.3.51-preview-d1ce0cc3.0 → 0.3.52

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## <small>0.3.52 (2026-02-18)</small>
+
+### Only dependencies have been changed
+* [@snack-uikit/icons@0.27.6]($PUBLIC_PROJECT_URL/blob/master/packages/icons/CHANGELOG.md)
+* [@snack-uikit/input-private@4.8.7]($PUBLIC_PROJECT_URL/blob/master/packages/input-private/CHANGELOG.md)
+* [@snack-uikit/segmented-control@0.6.17]($PUBLIC_PROJECT_URL/blob/master/packages/segmented-control/CHANGELOG.md)
+
+
+
+
+
+## <small>0.3.51 (2026-01-19)</small>
+
+* docs(FF-7788): readme update ([e3142b8](https://github.com/cloud-ru-tech/snack-uikit/commit/e3142b8))
+
+
+
+
+
 ## <small>0.3.50 (2025-12-01)</small>
 
 ### Only dependencies have been changed

package/README.md

@@ -5,7 +5,50 @@
 
 [Changelog](./CHANGELOG.md)
 
+## Description
 
+- Пакет `@snack-uikit/color-picker` предоставляет компонент `ColorPicker` для выбора цвета с визуальным палитр-пикером и текстовыми полями для ручного ввода значений.
+- Поддерживает три цветовые модели: **HEX**, **RGB** и **HSV**, между которыми можно переключаться через `SegmentedControl`.
+- Работает с альфа-каналом (`withAlpha`): при включённом режиме позволяет управлять прозрачностью цвета.
+- Поддерживает два режима применения изменений: **автоматический** (`autoApply={true}`) — изменения применяются сразу при выборе цвета, и **ручной** (`autoApply={false}`) — изменения применяются по кнопке "Применить", с возможностью отмены через кнопку "Отмена".
+- Позволяет настраивать доступные цветовые модели через проп `colorMode`, скрывая ненужные варианты (например, только HEX и RGB).
+- Визуальный палитр-пикер автоматически подстраивается под выбранную цветовую модель и режим работы с альфа-каналом.
+- При выборе цвета в HEX-режиме компонент валидирует введённое значение и показывает ошибку при некорректном формате.
+- Конвертирует значения между различными цветовыми моделями и предоставляет полную информацию о выбранном цвете в формате `RawColor` (hex, rgb, rgba, hsl, hsla, hsv, hsva).
+- Figma: [`ColorPicker`](https://www.figma.com/design/jtGxAPvFJOMir7V0eQFukN/branch/Rq5wXgsa8hopMLIL5iXxN2/Snack-UI-Kit-4.0.0?node-id=10776-174&node-type=canvas&m=dev).
+
+## Example
+
+```tsx
+import { ColorPicker, RawColor } from '@snack-uikit/color-picker';
+import { useState } from 'react';
+
+function Example() {
+  const [color, setColor] = useState<string>('#000000');
+  const [rawValue, setRawValue] = useState<RawColor>({} as RawColor);
+
+  const handleChange = (rawColor: Partial<RawColor>) => {
+    if (rawColor.hex) {
+      setColor(rawColor.hex);
+    }
+    setRawValue(rawColor as RawColor);
+  };
+
+  return (
+    <ColorPicker
+      value={color}
+      onChange={handleChange}
+      withAlpha={true}
+      autoApply={false}
+      colorMode={{
+        hex: true,
+        rgb: true,
+        hsv: true,
+      }}
+    />
+  );
+}
+```
 
 [//]: DOCUMENTATION_SECTION_START
 [//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT

package/dist/cjs/helperComponents/FieldPrivate/styles.module.css

@@ -1,13 +1,6 @@
 .container{
   background-color:var(--sys-neutral-background1-level, #fdfdfd);
   border-color:var(--sys-neutral-decor-default, #dde0ea);
-  position:relative;
-  display:flex;
-  align-items:center;
-  justify-content:space-between;
-  box-sizing:border-box;
-  min-width:52px;
-  border-style:solid;
 }
 .container:hover{
   background-color:var(--sys-neutral-background2-level, #ffffff);
@@ -21,6 +14,15 @@
   border-color:var(--sys-primary-accent-default, #389f74);
   outline-color:var(--sys-primary-decor-activated, #99d7ba);
 }
+.container{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  box-sizing:border-box;
+  min-width:52px;
+  border-style:solid;
+}
 .container[data-validation=error]{
   background-color:var(--sys-red-background1-level, #fef6f3);
   border-color:var(--sys-red-decor-default, #fdd6cd);

package/dist/esm/helperComponents/FieldPrivate/styles.module.css

@@ -1,13 +1,6 @@
 .container{
   background-color:var(--sys-neutral-background1-level, #fdfdfd);
   border-color:var(--sys-neutral-decor-default, #dde0ea);
-  position:relative;
-  display:flex;
-  align-items:center;
-  justify-content:space-between;
-  box-sizing:border-box;
-  min-width:52px;
-  border-style:solid;
 }
 .container:hover{
   background-color:var(--sys-neutral-background2-level, #ffffff);
@@ -21,6 +14,15 @@
   border-color:var(--sys-primary-accent-default, #389f74);
   outline-color:var(--sys-primary-decor-activated, #99d7ba);
 }
+.container{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  box-sizing:border-box;
+  min-width:52px;
+  border-style:solid;
+}
 .container[data-validation=error]{
   background-color:var(--sys-red-background1-level, #fef6f3);
   border-color:var(--sys-red-decor-default, #fdd6cd);

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Color Picker",
-  "version": "0.3.51-preview-d1ce0cc3.0",
+  "version": "0.3.52",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,16 +36,16 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.19.16",
-    "@snack-uikit/icons": "0.27.5-preview-d1ce0cc3.0",
-    "@snack-uikit/input-private": "4.8.6-preview-d1ce0cc3.0",
-    "@snack-uikit/segmented-control": "0.6.16-preview-d1ce0cc3.0",
-    "@snack-uikit/utils": "4.0.0",
+    "@snack-uikit/button": "0.19.17",
+    "@snack-uikit/icons": "0.27.6",
+    "@snack-uikit/input-private": "4.8.7",
+    "@snack-uikit/segmented-control": "0.6.17",
+    "@snack-uikit/utils": "4.0.1",
     "classnames": "2.5.1",
     "react-colorful": "5.6.1"
   },
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "fb9ce21584a4374d0092f030928aaf48afe2ae9c"
+  "gitHead": "17b72086167d3d6503e4e74142358765230478c8"
 }