krl-alfred 2.23.26 → 2.24.0

package/dist/components/ColorCard/ColorCard.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ColorCardProps } from './props';
+declare const ColorCard: ({ title, hint, value, placeholder, hasError, errorMessage, disabled, name, id, onChange, }: ColorCardProps) => React.JSX.Element;
+export default ColorCard;

package/dist/components/ColorCard/ColorCard.js

@@ -0,0 +1,69 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var props_1 = require("./props");
+var ColorCard_styled_1 = require("./ColorCard.styled");
+var Input_1 = __importDefault(require("../Input"));
+var ColorPicker_1 = __importDefault(require("./ColorPicker"));
+var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
+var color_1 = require("./utils/color");
+var ColorCard = function (_a) {
+    var _b = _a.title, title = _b === void 0 ? props_1.ColorCardDefault.title : _b, _c = _a.hint, hint = _c === void 0 ? props_1.ColorCardDefault.hint : _c, _d = _a.value, value = _d === void 0 ? props_1.ColorCardDefault.value : _d, _e = _a.placeholder, placeholder = _e === void 0 ? props_1.ColorCardDefault.placeholder : _e, _f = _a.hasError, hasError = _f === void 0 ? props_1.ColorCardDefault.hasError : _f, _g = _a.errorMessage, errorMessage = _g === void 0 ? props_1.ColorCardDefault.errorMessage : _g, _h = _a.disabled, disabled = _h === void 0 ? props_1.ColorCardDefault.disabled : _h, _j = _a.name, name = _j === void 0 ? props_1.ColorCardDefault.name : _j, _k = _a.id, id = _k === void 0 ? props_1.ColorCardDefault.id : _k, _l = _a.onChange, onChange = _l === void 0 ? props_1.ColorCardDefault.onChange : _l;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var pickerRef = (0, react_1.useRef)(null);
+    var _m = (0, react_1.useState)(false), isOpen = _m[0], setIsOpen = _m[1];
+    var _o = (0, react_1.useState)(function () { return (0, color_1.formatHexInput)(value); }), hex = _o[0], setHex = _o[1];
+    var swatchColor = (0, color_1.toSwatchColor)(hex);
+    var pickerValue = (0, color_1.normalizeHex)(hex) || '#000000';
+    (0, useOnClickOutside_1.default)(pickerRef, function () { return setIsOpen(false); }, true);
+    (0, react_1.useEffect)(function () {
+        setHex((0, color_1.formatHexInput)(value));
+    }, [value]);
+    (0, react_1.useEffect)(function () {
+        if (!isOpen)
+            return undefined;
+        var handleKeyDown = function (event) {
+            if (event.key === 'Escape')
+                setIsOpen(false);
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return function () { return document.removeEventListener('keydown', handleKeyDown); };
+    }, [isOpen]);
+    var emitHex = function (next) {
+        var formatted = (0, color_1.nextHexInput)(hex, next);
+        setHex(formatted);
+        if (formatted === hex)
+            return;
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            target: { value: formatted, name: name, id: id },
+            currentTarget: { value: formatted, name: name, id: id },
+        });
+    };
+    var handleHexBlur = function (event) {
+        var _a;
+        var raw = (_a = event.target.value) !== null && _a !== void 0 ? _a : hex;
+        emitHex((0, color_1.formatHexInput)(raw).toUpperCase());
+    };
+    return ((0, jsx_runtime_1.jsxs)(ColorCard_styled_1.ColorCardStyled, { children: [(0, jsx_runtime_1.jsxs)(ColorCard_styled_1.SwatchWrap, __assign({ ref: pickerRef }, { children: [(0, jsx_runtime_1.jsx)(ColorCard_styled_1.ColorSwatch, { type: "button", "$color": swatchColor, "$disabled": disabled, disabled: disabled, "aria-label": title || t('pickColor'), "aria-expanded": isOpen, "aria-haspopup": "dialog", onClick: function () {
+                            if (disabled)
+                                return;
+                            setIsOpen(function (open) { return !open; });
+                        } }), isOpen && !disabled && ((0, jsx_runtime_1.jsx)(ColorCard_styled_1.ColorPickerPopover, __assign({ role: "dialog", "aria-label": t('pickColor') }, { children: (0, jsx_runtime_1.jsx)(ColorPicker_1.default, { value: pickerValue, onChange: emitHex }) })))] })), (0, jsx_runtime_1.jsx)(ColorCard_styled_1.ColorCardField, __assign({ onBlur: handleHexBlur }, { children: (0, jsx_runtime_1.jsx)(Input_1.default, { label: title, description: hint, value: hex, placeholder: placeholder, hasError: hasError, errorMessage: errorMessage, disabled: disabled, name: name, id: id, mask: null, format: null, maxLength: 7, onChange: function (event) { var _a; return emitHex((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value); }, width: "100%" }) }))] }));
+};
+exports.default = ColorCard;

package/dist/components/ColorCard/ColorCard.styled.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { ColorCardStyledProps } from './props';
+export declare const ColorCardStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const SwatchWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ColorSwatch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof ColorCardStyledProps> & ColorCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof ColorCardStyledProps> & ColorCardStyledProps, never>>> & string;
+export declare const ColorCardField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ColorPickerPopover: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const PickerBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Saturation: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hue"> & {
+    $hue: number;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hue"> & {
+    $hue: number;
+}, never>>> & string;
+export declare const HueSlider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Thumb: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$x" | "$y"> & {
+    $x: number;
+    $y: number;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$x" | "$y"> & {
+    $x: number;
+    $y: number;
+}, never>>> & string;

package/dist/components/ColorCard/ColorCard.styled.js

@@ -0,0 +1,21 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Thumb = exports.HueSlider = exports.Saturation = exports.PickerBody = exports.ColorPickerPopover = exports.ColorCardField = exports.ColorSwatch = exports.SwatchWrap = exports.ColorCardStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.ColorCardStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 1.5rem;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    box-sizing: border-box;\n    background: var(--dark-opacity-3);\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 1.5rem;\n    padding: 1.5rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    box-sizing: border-box;\n    background: var(--dark-opacity-3);\n"])));
+exports.SwatchWrap = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    position: relative;\n    flex-shrink: 0;\n    width: 56px;\n    height: 56px;\n    border: 1px solid var(--dark-opacity-10);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0.5rem;\n"], ["\n    position: relative;\n    flex-shrink: 0;\n    width: 56px;\n    height: 56px;\n    border: 1px solid var(--dark-opacity-10);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0.5rem;\n"])));
+exports.ColorSwatch = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: 40px;\n    height: 40px;\n    padding: 0;\n    flex-shrink: 0;\n    box-sizing: border-box;\n    border-radius: 0.25rem;\n    border: none;\n    background-color: ", ";\n    opacity: ", ";\n    cursor: ", ";\n    appearance: none;\n\n    &:focus-visible {\n        outline: 2px solid var(--primary);\n        outline-offset: 2px;\n    }\n"], ["\n    width: 40px;\n    height: 40px;\n    padding: 0;\n    flex-shrink: 0;\n    box-sizing: border-box;\n    border-radius: 0.25rem;\n    border: none;\n    background-color: ", ";\n    opacity: ", ";\n    cursor: ", ";\n    appearance: none;\n\n    &:focus-visible {\n        outline: 2px solid var(--primary);\n        outline-offset: 2px;\n    }\n"])), function (props) { return props.$color || 'transparent'; }, function (props) { return props.$disabled ? 0.4 : 1; }, function (props) { return props.$disabled ? 'not-allowed' : 'pointer'; });
+exports.ColorCardField = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex: 1;\n    min-width: 0;\n"], ["\n    flex: 1;\n    min-width: 0;\n"])));
+exports.ColorPickerPopover = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    position: absolute;\n    top: calc(100% + 8px);\n    left: 0;\n    z-index: 9;\n    padding: 1rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    box-sizing: border-box;\n    user-select: none;\n"], ["\n    position: absolute;\n    top: calc(100% + 8px);\n    left: 0;\n    z-index: 9;\n    padding: 1rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--dark-opacity-10);\n    background: white;\n    box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    box-sizing: border-box;\n    user-select: none;\n"])));
+exports.PickerBody = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n"], ["\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n"])));
+exports.Saturation = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    position: relative;\n    width: 192px;\n    height: 140px;\n    border-radius: 0.5rem;\n    cursor: crosshair;\n    touch-action: none;\n    background:\n        linear-gradient(to top, #000, transparent),\n        linear-gradient(to right, #fff, hsl(", ", 100%, 50%));\n"], ["\n    position: relative;\n    width: 192px;\n    height: 140px;\n    border-radius: 0.5rem;\n    cursor: crosshair;\n    touch-action: none;\n    background:\n        linear-gradient(to top, #000, transparent),\n        linear-gradient(to right, #fff, hsl(", ", 100%, 50%));\n"])), function (props) { return props.$hue; });
+exports.HueSlider = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    position: relative;\n    width: 192px;\n    height: 12px;\n    border-radius: 0.5rem;\n    cursor: pointer;\n    touch-action: none;\n    background: linear-gradient(to right, #F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00);\n"], ["\n    position: relative;\n    width: 192px;\n    height: 12px;\n    border-radius: 0.5rem;\n    cursor: pointer;\n    touch-action: none;\n    background: linear-gradient(to right, #F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00);\n"])));
+exports.Thumb = styled_components_1.default.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    position: absolute;\n    left: ", "%;\n    top: ", "%;\n    width: 16px;\n    height: 16px;\n    border: 2px solid white;\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px var(--dark-opacity-25);\n    transform: translate(-50%, -50%);\n    pointer-events: none;\n    box-sizing: border-box;\n"], ["\n    position: absolute;\n    left: ", "%;\n    top: ", "%;\n    width: 16px;\n    height: 16px;\n    border: 2px solid white;\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px var(--dark-opacity-25);\n    transform: translate(-50%, -50%);\n    pointer-events: none;\n    box-sizing: border-box;\n"])), function (props) { return props.$x * 100; }, function (props) { return props.$y * 100; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/components/ColorCard/ColorCard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ColorCard/ColorCard.test.js

@@ -0,0 +1,257 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var ColorCard_1 = __importDefault(require("./ColorCard"));
+var props_1 = require("./props");
+jest.mock('react-i18next', function () { return ({
+    useTranslation: function () { return ({
+        t: function (key) { return key; },
+    }); },
+}); });
+var mockRect = function (element, width, height) {
+    jest.spyOn(element, 'getBoundingClientRect').mockReturnValue({
+        width: width,
+        height: height,
+        left: 0,
+        top: 0,
+        right: width,
+        bottom: height,
+        x: 0,
+        y: 0,
+        toJSON: function () { },
+    });
+};
+var renderColorCard = function (props) {
+    if (props === void 0) { props = {}; }
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(ColorCard_1.default, __assign({}, props_1.ColorCardDefault, { title: "Birincil renk", hint: "Ana buton ve vurgular", value: "#9763F6", id: "color-card-test", onChange: jest.fn() }, props)));
+};
+var hexField = function () { return react_1.screen.getByRole('textbox'); };
+describe('ColorCard', function () {
+    it('renders title, hex value and hint through Input', function () {
+        renderColorCard();
+        expect(react_1.screen.getByText('Birincil renk')).toBeInTheDocument();
+        expect(hexField()).toHaveDisplayValue('#9763F6');
+        expect(react_1.screen.getByText('Ana buton ve vurgular')).toBeInTheDocument();
+    });
+    it('keeps the hex field editable', function () {
+        renderColorCard();
+        expect(hexField()).toBeEnabled();
+        expect(hexField()).toHaveProperty('readOnly', false);
+    });
+    it('paints the swatch from a valid hex value', function () {
+        renderColorCard({ value: '#0A103D' });
+        expect(react_1.screen.getByRole('button', { name: 'Birincil renk' })).toHaveStyle({
+            width: '40px',
+            height: '40px',
+            backgroundColor: 'rgb(10, 16, 61)',
+        });
+    });
+    it('keeps a hash prefix and at most 6 hex digits', function () {
+        renderColorCard();
+        react_1.fireEvent.change(hexField(), { target: { value: '##zz0a103dzzzz' } });
+        expect(hexField()).toHaveDisplayValue('#0a103d');
+        expect(hexField()).toHaveAttribute('maxLength', '7');
+    });
+    it('keeps a full 6-digit hex after blur', function () {
+        renderColorCard({ value: '#' });
+        react_1.fireEvent.change(hexField(), { target: { value: '#abcdef' } });
+        react_1.fireEvent.focusOut(hexField());
+        expect(hexField()).toHaveDisplayValue('#ABCDEF');
+    });
+    it('uppercases the hex field on blur', function () {
+        renderColorCard();
+        react_1.fireEvent.change(hexField(), { target: { value: '#aa11bb' } });
+        react_1.fireEvent.focusOut(hexField());
+        expect(hexField()).toHaveDisplayValue('#AA11BB');
+    });
+    it('ignores invalid letters while typing instead of deleting them on the next key', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = user_event_1.default.setup();
+                    renderColorCard({ value: '#' });
+                    return [4 /*yield*/, user.type(hexField(), 'asd', { initialSelectionStart: 1, initialSelectionEnd: 1 })];
+                case 1:
+                    _a.sent();
+                    expect(hexField()).toHaveDisplayValue('#ad');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('keeps existing hex digits when an invalid letter is typed in the middle', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, field;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = user_event_1.default.setup();
+                    renderColorCard({ value: '#ACE' });
+                    field = hexField();
+                    field.focus();
+                    field.setSelectionRange(2, 2);
+                    return [4 /*yield*/, user.keyboard('sb')];
+                case 1:
+                    _a.sent();
+                    expect(field).toHaveDisplayValue('#AbCE');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('inserts a hex digit in the middle without shifting the rest', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, field;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = user_event_1.default.setup();
+                    renderColorCard({ value: '#ACE' });
+                    field = hexField();
+                    field.focus();
+                    field.setSelectionRange(2, 2);
+                    return [4 /*yield*/, user.keyboard('b')];
+                case 1:
+                    _a.sent();
+                    expect(field).toHaveDisplayValue('#AbCE');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('restores the hash and keeps digits when the hash is deleted', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, field;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = user_event_1.default.setup();
+                    renderColorCard({ value: '#ab' });
+                    field = hexField();
+                    field.focus();
+                    field.setSelectionRange(0, 1);
+                    return [4 /*yield*/, user.keyboard('{Backspace}')];
+                case 1:
+                    _a.sent();
+                    expect(field).toHaveDisplayValue('#ab');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('does not accept more than 6 hex digits', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = user_event_1.default.setup();
+                    renderColorCard({ value: '#ABCDEF' });
+                    return [4 /*yield*/, user.type(hexField(), '1', { initialSelectionStart: 7, initialSelectionEnd: 7 })];
+                case 1:
+                    _a.sent();
+                    expect(hexField()).toHaveDisplayValue('#ABCDEF');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('replaces a fully selected value key by key without stripping later letters', function () {
+        renderColorCard({ value: '#9763F6' });
+        var field = hexField();
+        field.setSelectionRange(0, field.value.length);
+        react_1.fireEvent.select(field);
+        react_1.fireEvent.change(field, { target: { value: 'a' } });
+        expect(field).toHaveDisplayValue('#a');
+        react_1.fireEvent.change(field, { target: { value: '#as' } });
+        expect(field).toHaveDisplayValue('#a');
+        react_1.fireEvent.change(field, { target: { value: '#ad' } });
+        expect(field).toHaveDisplayValue('#ad');
+    });
+    it('updates the swatch when a valid hex is typed', function () {
+        renderColorCard();
+        react_1.fireEvent.change(hexField(), { target: { value: '#0A103D' } });
+        expect(react_1.screen.getByRole('button', { name: 'Birincil renk' })).toHaveStyle({
+            backgroundColor: 'rgb(10, 16, 61)',
+        });
+    });
+    it('updates the hex field when the picker changes', function () {
+        renderColorCard();
+        react_1.fireEvent.click(react_1.screen.getByRole('button', { name: 'Birincil renk' }));
+        var hue = react_1.screen.getByRole('slider', { name: 'colorHue' });
+        mockRect(hue, 360, 12);
+        react_1.fireEvent.pointerDown(hue, { clientX: 0, clientY: 6, buttons: 1, pointerId: 1 });
+        expect(hexField()).toHaveDisplayValue(/^#[0-9A-F]{6}$/);
+        expect(hexField()).not.toHaveDisplayValue('#9763F6');
+    });
+    it('opens the color picker from the swatch', function () {
+        renderColorCard();
+        react_1.fireEvent.click(react_1.screen.getByRole('button', { name: 'Birincil renk' }));
+        expect(react_1.screen.getByRole('dialog', { name: 'pickColor' })).toBeInTheDocument();
+    });
+    it('does not open the picker when disabled', function () {
+        renderColorCard({ disabled: true });
+        react_1.fireEvent.click(react_1.screen.getByRole('button', { name: 'Birincil renk' }));
+        expect(react_1.screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    it('renders error message when hasError is true', function () {
+        renderColorCard({ hasError: true, errorMessage: 'Geçersiz renk' });
+        expect(react_1.screen.getByText('Geçersiz renk')).toBeInTheDocument();
+    });
+    it('renders title, hint and value as text, not HTML', function () {
+        renderColorCard({
+            title: '<script>alert(1)</script>',
+            hint: '<img src=x onerror=alert(1)>',
+            value: '<script>alert(1)</script>',
+        });
+        expect(react_1.screen.getByText('<script>alert(1)</script>')).toBeInTheDocument();
+        expect(react_1.screen.getByText('<img src=x onerror=alert(1)>')).toBeInTheDocument();
+        expect(react_1.screen.getByDisplayValue(/^#[0-9A-Fa-f]{0,6}$/)).toBeInTheDocument();
+        expect(document.querySelector('script')).not.toBeInTheDocument();
+        expect(document.querySelector('img')).not.toBeInTheDocument();
+    });
+});

package/dist/components/ColorCard/ColorPicker.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type ColorPickerProps = {
+    value: string;
+    onChange(hex: string): void;
+};
+declare const ColorPicker: ({ value, onChange }: ColorPickerProps) => React.JSX.Element;
+export default ColorPicker;

package/dist/components/ColorCard/ColorPicker.js

@@ -0,0 +1,75 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var ColorCard_styled_1 = require("./ColorCard.styled");
+var color_1 = require("./utils/color");
+var FALLBACK_HSV = { h: 0, s: 0, v: 0 };
+var toHsv = function (value, fallback) {
+    if (fallback === void 0) { fallback = FALLBACK_HSV; }
+    var next = (0, color_1.hexToHsv)(value);
+    if (!next)
+        return fallback;
+    if (next.s === 0)
+        return __assign(__assign({}, next), { h: fallback.h });
+    return next;
+};
+var ColorPicker = function (_a) {
+    var value = _a.value, onChange = _a.onChange;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var _b = (0, react_1.useState)(function () { return toHsv(value); }), hsv = _b[0], setHsv = _b[1];
+    (0, react_1.useEffect)(function () {
+        setHsv(function (current) {
+            var next = toHsv(value, current);
+            if (next.h === current.h && next.s === current.s && next.v === current.v)
+                return current;
+            return next;
+        });
+    }, [value]);
+    var commit = function (next) {
+        setHsv(next);
+        onChange((0, color_1.hsvToHex)(next.h, next.s, next.v));
+    };
+    var pointFromEvent = function (event) {
+        var rect = event.currentTarget.getBoundingClientRect();
+        var clientX = Number.isFinite(event.clientX) ? event.clientX : 0;
+        var clientY = Number.isFinite(event.clientY) ? event.clientY : 0;
+        return {
+            x: (0, color_1.clamp)((clientX - rect.left) / (rect.width || 1), 0, 1),
+            y: (0, color_1.clamp)((clientY - rect.top) / (rect.height || 1), 0, 1),
+        };
+    };
+    var handleSaturation = function (event) {
+        if (event.buttons !== 1 && event.type !== 'pointerdown')
+            return;
+        var _a = pointFromEvent(event), x = _a.x, y = _a.y;
+        commit(__assign(__assign({}, hsv), { s: x, v: 1 - y }));
+    };
+    var handleHue = function (event) {
+        if (event.buttons !== 1 && event.type !== 'pointerdown')
+            return;
+        commit(__assign(__assign({}, hsv), { h: pointFromEvent(event).x * 360 }));
+    };
+    var bindDrag = function (handler) { return ({
+        onPointerDown: function (event) {
+            var _a, _b;
+            (_b = (_a = event.currentTarget).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, event.pointerId);
+            handler(event);
+        },
+        onPointerMove: handler,
+    }); };
+    return ((0, jsx_runtime_1.jsxs)(ColorCard_styled_1.PickerBody, { children: [(0, jsx_runtime_1.jsx)(ColorCard_styled_1.Saturation, __assign({ "$hue": hsv.h, role: "slider", "aria-label": t('colorSaturation'), "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(hsv.s * 100) }, bindDrag(handleSaturation), { children: (0, jsx_runtime_1.jsx)(ColorCard_styled_1.Thumb, { "$x": hsv.s, "$y": 1 - hsv.v }) })), (0, jsx_runtime_1.jsx)(ColorCard_styled_1.HueSlider, __assign({ role: "slider", "aria-label": t('colorHue'), "aria-valuemin": 0, "aria-valuemax": 360, "aria-valuenow": Math.round(hsv.h) }, bindDrag(handleHue), { children: (0, jsx_runtime_1.jsx)(ColorCard_styled_1.Thumb, { "$x": hsv.h / 360, "$y": 0.5 }) }))] }));
+};
+exports.default = ColorPicker;

package/dist/components/ColorCard/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ColorCard';

package/dist/components/ColorCard/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var ColorCard_1 = require("./ColorCard");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ColorCard_1).default; } });

package/dist/components/ColorCard/props.d.ts

@@ -0,0 +1,18 @@
+export interface ColorCard {
+    title?: string;
+    hint?: string;
+    value?: string;
+    placeholder?: string;
+    hasError?: boolean;
+    errorMessage?: string;
+    disabled?: boolean;
+    name?: string;
+    id?: string;
+    onChange?(e: any): void;
+}
+export interface ColorCardStyledProps {
+    $color?: string;
+    $disabled?: boolean;
+}
+export declare const ColorCardDefault: ColorCard;
+export type ColorCardProps = typeof ColorCardDefault;

package/dist/components/ColorCard/props.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorCardDefault = void 0;
+exports.ColorCardDefault = {
+    title: '',
+    hint: '',
+    value: '',
+    placeholder: '#000000',
+    hasError: false,
+    errorMessage: '',
+    disabled: false,
+    name: null,
+    id: null,
+    onChange: null,
+};

package/dist/components/ColorCard/stories/ColorCard.stories.d.ts

@@ -0,0 +1,106 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: (props: any) => React.JSX.Element;
+    tags: string[];
+    argTypes: {
+        title: {
+            control: string;
+        };
+        hint: {
+            control: string;
+        };
+        value: {
+            control: string;
+        };
+        placeholder: {
+            control: string;
+        };
+        hasError: {
+            control: string;
+        };
+        errorMessage: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        onChange: {
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        title: string;
+        hint: string;
+        value: string;
+        placeholder: string;
+        hasError: boolean;
+        errorMessage: string;
+        disabled: boolean;
+        id: string;
+        name: string;
+        onChange: (e: any) => void;
+    };
+};
+export declare const TextColor: {
+    args: {
+        title: string;
+        hint: string;
+        value: string;
+        id: string;
+        name: string;
+        placeholder: string;
+        hasError: boolean;
+        errorMessage: string;
+        disabled: boolean;
+        onChange: (e: any) => void;
+    };
+};
+export declare const Empty: {
+    args: {
+        title: string;
+        hint: string;
+        value: string;
+        id: string;
+        name: string;
+        placeholder: string;
+        hasError: boolean;
+        errorMessage: string;
+        disabled: boolean;
+        onChange: (e: any) => void;
+    };
+};
+export declare const WithError: {
+    args: {
+        value: string;
+        hasError: boolean;
+        errorMessage: string;
+        id: string;
+        title: string;
+        hint: string;
+        placeholder: string;
+        disabled: boolean;
+        name: string;
+        onChange: (e: any) => void;
+    };
+};
+export declare const Disabled: {
+    args: {
+        disabled: boolean;
+        id: string;
+        title: string;
+        hint: string;
+        value: string;
+        placeholder: string;
+        hasError: boolean;
+        errorMessage: string;
+        name: string;
+        onChange: (e: any) => void;
+    };
+};
+export declare const Palette: {
+    render: () => React.JSX.Element;
+};

package/dist/components/ColorCard/stories/ColorCard.stories.js

@@ -0,0 +1,73 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Palette = exports.Disabled = exports.WithError = exports.Empty = exports.TextColor = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var ColorCard_1 = __importDefault(require("../ColorCard"));
+var baseArgs = {
+    title: 'Birincil renk',
+    hint: 'Ana buton ve vurgular',
+    value: '#9763F6',
+    placeholder: '#000000',
+    hasError: false,
+    errorMessage: '',
+    disabled: false,
+    id: 'color-card-primary',
+    name: 'primaryColor',
+    onChange: function (e) {
+        var _a;
+        console.log((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value, 'onChange');
+    },
+};
+exports.default = {
+    title: 'Components/Color Card',
+    component: function (props) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: '480px' } }, { children: (0, jsx_runtime_1.jsx)(ColorCard_1.default, __assign({}, props)) }))); },
+    tags: ['autodocs'],
+    argTypes: {
+        title: { control: 'text' },
+        hint: { control: 'text' },
+        value: { control: 'text' },
+        placeholder: { control: 'text' },
+        hasError: { control: 'boolean' },
+        errorMessage: { control: 'text' },
+        disabled: { control: 'boolean' },
+        onChange: { action: 'changed' },
+    },
+};
+exports.Default = {
+    args: __assign({}, baseArgs),
+};
+exports.TextColor = {
+    args: __assign(__assign({}, baseArgs), { title: 'Metin rengi', hint: 'Ana metin ve başlıklar', value: '#0A103D', id: 'color-card-text', name: 'textColor' }),
+};
+exports.Empty = {
+    args: __assign(__assign({}, baseArgs), { title: 'Arka plan rengi', hint: 'Sayfa arka planı', value: '', id: 'color-card-empty', name: 'backgroundColor' }),
+};
+exports.WithError = {
+    args: __assign(__assign({}, baseArgs), { value: '9763F6', hasError: true, errorMessage: 'Geçerli bir hex renk kodu gir', id: 'color-card-error' }),
+};
+exports.Disabled = {
+    args: __assign(__assign({}, baseArgs), { disabled: true, id: 'color-card-disabled' }),
+};
+var PaletteStory = function () {
+    var _a = (0, react_1.useState)('#9763F6'), primary = _a[0], setPrimary = _a[1];
+    var _b = (0, react_1.useState)('#0A103D'), text = _b[0], setText = _b[1];
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: '480px' } }, { children: [(0, jsx_runtime_1.jsx)(ColorCard_1.default, { title: "Birincil renk", hint: "Ana buton ve vurgular", value: primary, id: "palette-primary", name: "primaryColor", onChange: function (e) { var _a, _b; return setPrimary((_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ''); } }), (0, jsx_runtime_1.jsx)(ColorCard_1.default, { title: "Metin rengi", hint: "Ana metin ve ba\u015Fl\u0131klar", value: text, id: "palette-text", name: "textColor", onChange: function (e) { var _a, _b; return setText((_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ''); } })] })));
+};
+exports.Palette = {
+    render: function () { return (0, jsx_runtime_1.jsx)(PaletteStory, {}); },
+};

package/dist/components/ColorCard/utils/color.d.ts

@@ -0,0 +1,17 @@
+export type Hsv = {
+    h: number;
+    s: number;
+    v: number;
+};
+export declare const isHexInputValue: (value: string) => boolean;
+export declare const clamp: (value: number, min: number, max: number) => number;
+export declare const formatHexInput: (value?: string) => string;
+export declare const nextHexInput: (previous: string, next?: string) => string;
+export declare const toSwatchColor: (value?: string) => string;
+export declare const normalizeHex: (value?: string) => string;
+export declare const hexToRgb: (value?: string) => [number, number, number] | undefined;
+export declare const rgbToHex: (r: number, g: number, b: number) => string;
+export declare const rgbToHsv: (r: number, g: number, b: number) => Hsv;
+export declare const hsvToRgb: (h: number, s: number, v: number) => [number, number, number];
+export declare const hexToHsv: (value?: string) => Hsv;
+export declare const hsvToHex: (h: number, s: number, v: number) => string;

package/dist/components/ColorCard/utils/color.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hsvToHex = exports.hexToHsv = exports.hsvToRgb = exports.rgbToHsv = exports.rgbToHex = exports.hexToRgb = exports.normalizeHex = exports.toSwatchColor = exports.nextHexInput = exports.formatHexInput = exports.clamp = exports.isHexInputValue = void 0;
+var HEX_COLOR_PATTERN = /^#(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
+var HEX_INPUT_PATTERN = /^#[0-9A-Fa-f]{0,6}$/;
+var isHexInputValue = function (value) { return HEX_INPUT_PATTERN.test(value); };
+exports.isHexInputValue = isHexInputValue;
+var clamp = function (value, min, max) {
+    if (!Number.isFinite(value))
+        return min;
+    return Math.min(max, Math.max(min, value));
+};
+exports.clamp = clamp;
+var formatHexInput = function (value) {
+    var raw = typeof value === 'string' ? value : '';
+    var digits = raw.replace(/#/g, '').replace(/[^0-9A-Fa-f]/g, '').slice(0, 6);
+    return "#".concat(digits);
+};
+exports.formatHexInput = formatHexInput;
+var nextHexInput = function (previous, next) {
+    var prev = (0, exports.isHexInputValue)(previous) ? previous : (0, exports.formatHexInput)(previous);
+    var raw = typeof next === 'string' ? next : '';
+    if ((0, exports.isHexInputValue)(raw))
+        return raw;
+    var insertedOne = raw.length === prev.length + 1;
+    var replacedInPlace = raw.length === prev.length && raw.startsWith('#');
+    if ((insertedOne || replacedInPlace) && raw.startsWith('#'))
+        return prev;
+    return (0, exports.formatHexInput)(raw);
+};
+exports.nextHexInput = nextHexInput;
+var toSwatchColor = function (value) {
+    if (typeof value !== 'string')
+        return undefined;
+    var color = value.trim();
+    return HEX_COLOR_PATTERN.test(color) ? color : undefined;
+};
+exports.toSwatchColor = toSwatchColor;
+var normalizeHex = function (value) {
+    var color = (0, exports.toSwatchColor)(value);
+    if (!color)
+        return undefined;
+    if (color.length === 4) {
+        return "#".concat(color[1]).concat(color[1]).concat(color[2]).concat(color[2]).concat(color[3]).concat(color[3]).toUpperCase();
+    }
+    return color.toUpperCase();
+};
+exports.normalizeHex = normalizeHex;
+var hexToRgb = function (value) {
+    var hex = (0, exports.normalizeHex)(value);
+    if (!hex)
+        return undefined;
+    return [
+        parseInt(hex.slice(1, 3), 16),
+        parseInt(hex.slice(3, 5), 16),
+        parseInt(hex.slice(5, 7), 16),
+    ];
+};
+exports.hexToRgb = hexToRgb;
+var rgbToHex = function (r, g, b) {
+    var toHex = function (channel) { return (0, exports.clamp)(Math.round(channel), 0, 255).toString(16).padStart(2, '0'); };
+    return "#".concat(toHex(r)).concat(toHex(g)).concat(toHex(b)).toUpperCase();
+};
+exports.rgbToHex = rgbToHex;
+var rgbToHsv = function (r, g, b) {
+    var red = r / 255;
+    var green = g / 255;
+    var blue = b / 255;
+    var max = Math.max(red, green, blue);
+    var min = Math.min(red, green, blue);
+    var delta = max - min;
+    var h = 0;
+    if (delta !== 0) {
+        if (max === red)
+            h = ((green - blue) / delta) % 6;
+        else if (max === green)
+            h = (blue - red) / delta + 2;
+        else
+            h = (red - green) / delta + 4;
+        h *= 60;
+        if (h < 0)
+            h += 360;
+    }
+    return {
+        h: h,
+        s: max === 0 ? 0 : delta / max,
+        v: max,
+    };
+};
+exports.rgbToHsv = rgbToHsv;
+var hsvToRgb = function (h, s, v) {
+    var _a, _b, _c, _d, _e, _f;
+    var chroma = v * s;
+    var x = chroma * (1 - Math.abs(((h / 60) % 2) - 1));
+    var m = v - chroma;
+    var red = 0;
+    var green = 0;
+    var blue = 0;
+    if (h < 60)
+        _a = [chroma, x, 0], red = _a[0], green = _a[1], blue = _a[2];
+    else if (h < 120)
+        _b = [x, chroma, 0], red = _b[0], green = _b[1], blue = _b[2];
+    else if (h < 180)
+        _c = [0, chroma, x], red = _c[0], green = _c[1], blue = _c[2];
+    else if (h < 240)
+        _d = [0, x, chroma], red = _d[0], green = _d[1], blue = _d[2];
+    else if (h < 300)
+        _e = [x, 0, chroma], red = _e[0], green = _e[1], blue = _e[2];
+    else
+        _f = [chroma, 0, x], red = _f[0], green = _f[1], blue = _f[2];
+    return [(red + m) * 255, (green + m) * 255, (blue + m) * 255];
+};
+exports.hsvToRgb = hsvToRgb;
+var hexToHsv = function (value) {
+    var rgb = (0, exports.hexToRgb)(value);
+    if (!rgb)
+        return undefined;
+    return (0, exports.rgbToHsv)(rgb[0], rgb[1], rgb[2]);
+};
+exports.hexToHsv = hexToHsv;
+var hsvToHex = function (h, s, v) {
+    var rgb = (0, exports.hsvToRgb)(h, s, v);
+    return (0, exports.rgbToHex)(rgb[0], rgb[1], rgb[2]);
+};
+exports.hsvToHex = hsvToHex;

package/dist/components/ColorCard/utils/color.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ColorCard/utils/color.test.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var color_1 = require("./color");
+describe('formatHexInput', function () {
+    it('keeps a hash prefix and at most 6 hex digits', function () {
+        expect((0, color_1.formatHexInput)('')).toBe('#');
+        expect((0, color_1.formatHexInput)('abc')).toBe('#abc');
+        expect((0, color_1.formatHexInput)('##gg12abZZ')).toBe('#12ab');
+        expect((0, color_1.formatHexInput)('#9763F6extra')).toBe('#9763F6');
+    });
+});
+describe('nextHexInput', function () {
+    it('accepts a valid hex draft', function () {
+        expect((0, color_1.nextHexInput)('#', '#a')).toBe('#a');
+        expect((0, color_1.nextHexInput)('#a', '#ad')).toBe('#ad');
+        expect((0, color_1.nextHexInput)('#ad', '#ad1')).toBe('#ad1');
+    });
+    it('ignores a single invalid letter instead of stripping it', function () {
+        expect((0, color_1.nextHexInput)('#a', '#as')).toBe('#a');
+        expect((0, color_1.nextHexInput)('#ACE', '#AsCE')).toBe('#ACE');
+        expect((0, color_1.nextHexInput)('#ab', '#as')).toBe('#ab');
+    });
+    it('does not pull the next hex digit over an ignored letter', function () {
+        expect((0, color_1.nextHexInput)('#a', '#as')).toBe('#a');
+        expect((0, color_1.nextHexInput)('#a', '#ad')).toBe('#ad');
+    });
+    it('sanitizes paste and missing hash', function () {
+        expect((0, color_1.nextHexInput)('#9763F6', '##zz0a103dzzzz')).toBe('#0a103d');
+        expect((0, color_1.nextHexInput)('#ab', 'ab')).toBe('#ab');
+        expect((0, color_1.nextHexInput)('#a', '')).toBe('#');
+    });
+});
+describe('toSwatchColor', function () {
+    it('accepts 3 and 6 digit hex colors', function () {
+        expect((0, color_1.toSwatchColor)('#0Af')).toBe('#0Af');
+        expect((0, color_1.toSwatchColor)('  #9763F6  ')).toBe('#9763F6');
+    });
+    it('rejects values that are not hex colors', function () {
+        expect((0, color_1.toSwatchColor)('')).toBeUndefined();
+        expect((0, color_1.toSwatchColor)('red')).toBeUndefined();
+        expect((0, color_1.toSwatchColor)('#gggggg')).toBeUndefined();
+        expect((0, color_1.toSwatchColor)('#9763F6; background: red')).toBeUndefined();
+    });
+});
+describe('normalizeHex', function () {
+    it('expands 3 digit hex and uppercases', function () {
+        expect((0, color_1.normalizeHex)('#0Af')).toBe('#00AAFF');
+        expect((0, color_1.normalizeHex)('  #9763f6  ')).toBe('#9763F6');
+    });
+});
+describe('hsv hex roundtrip', function () {
+    it.each(['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#9763F6', '#0A103D'])('converts %s through HSV back to the same hex', function (hex) {
+        var hsv = (0, color_1.hexToHsv)(hex);
+        expect(hsv).toBeDefined();
+        expect((0, color_1.hsvToHex)(hsv.h, hsv.s, hsv.v)).toBe(hex);
+    });
+});

package/dist/components/ColorPalette/ColorPalette.styled.js

@@ -13,7 +13,7 @@ exports.ColorPaletteStyled = styled_components_1.default.div(templateObject_1 ||
 exports.ColorItem = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: 1px solid var(--dark-opacity-10);\n  display: block;\n  border-radius: 1rem;\n  position: relative;\n  overflow: hidden;\n"], ["\n  border: 1px solid var(--dark-opacity-10);\n  display: block;\n  border-radius: 1rem;\n  position: relative;\n  overflow: hidden;\n"])));
 exports.Bg = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  min-height: 120px;\n  background: ", "};\n"], ["\n  min-height: 120px;\n  background: ", "};\n"])), function (props) {
     var _a;
-    return ((_a = props === null || props === void 0 ? void 0 : props.gradient) === null || _a === void 0 ? void 0 : _a.length)
+    return ((_a = props === null || props === void 0 ? void 0 : props.gradient) === null || _a === void 0 ? void 0 : _a.length) > 0
         ? "linear-gradient(0deg,  ".concat(props.gradient.join(","), ")")
         : props.data.hex;
 });

package/dist/components/Input/Input.js

@@ -104,6 +104,50 @@ var Input = function (_a) {
     }, [dateInputRef, format, hasCopyButton, hasError, id, infoText, inputValue, isCalendarOpen, isClearable, type]);
     var handleFocus = function () { return setIsFocused(true); };
     var handleBlur = function () { return setIsFocused(false); };
+    var isControlled = value !== undefined;
+    var fieldValue = isControlled ? value : (inputValue !== null && inputValue !== void 0 ? inputValue : '');
+    var fieldValueRef = (0, react_1.useRef)(fieldValue);
+    fieldValueRef.current = fieldValue;
+    var selectionRef = (0, react_1.useRef)({ start: 0, end: 0 });
+    var rememberSelection = function (event) {
+        var _a, _b;
+        var input = event.currentTarget;
+        selectionRef.current = {
+            start: (_a = input.selectionStart) !== null && _a !== void 0 ? _a : 0,
+            end: (_b = input.selectionEnd) !== null && _b !== void 0 ? _b : 0,
+        };
+    };
+    var restoreField = function (input, nextValue, start, end) {
+        input.value = nextValue;
+        try {
+            input.setSelectionRange(start, end);
+        }
+        catch (_a) {
+            // jsdom can throw if the node is not focused
+        }
+    };
+    var handleTextChange = function (event) {
+        var next = event.currentTarget.value;
+        var prev = fieldValue !== null && fieldValue !== void 0 ? fieldValue : '';
+        var _a = selectionRef.current, start = _a.start, end = _a.end;
+        var replacedAll = prev.length > 1 && start === 0 && end === prev.length;
+        var collapsedByMaxLength = maxLength != null && prev.length >= maxLength && next.length <= 1 && !replacedAll;
+        if (collapsedByMaxLength) {
+            restoreField(event.currentTarget, prev, start, end);
+            return;
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        if (!isControlled) {
+            setInputValue(next);
+            return;
+        }
+        var input = event.currentTarget;
+        queueMicrotask(function () {
+            if (fieldValueRef.current !== prev)
+                return;
+            restoreField(input, prev, start, end);
+        });
+    };
     var handleClearValue = function () {
         var _a, _b;
         setInputValue('');
@@ -117,16 +161,13 @@ var Input = function (_a) {
         onChange === null || onChange === void 0 ? void 0 : onChange(null);
         onClear === null || onClear === void 0 ? void 0 : onClear();
     };
-    var currentLength = (inputValue !== null && inputValue !== void 0 ? inputValue : '').length;
+    var currentLength = (fieldValue !== null && fieldValue !== void 0 ? fieldValue : '').length;
     var showCharCount = showMaxLengthCounter && maxLength != null;
     var showTopRow = Boolean(label || customLinkText || showCharCount);
-    var hasInputIcon = (isClearable && inputValue) || ['password', 'date'].includes(type) || hasCopyButton || infoText;
+    var hasInputIcon = (isClearable && fieldValue) || ['password', 'date'].includes(type) || hasCopyButton || infoText;
     return ((0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": width }, { children: [showTopRow && ((0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTop, { children: [label ? (0, jsx_runtime_1.jsx)(Input_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })) : (0, jsx_runtime_1.jsx)("span", {}), (0, jsx_runtime_1.jsxs)(Input_styled_1.FieldTopActions, { children: [showCharCount && ((0, jsx_runtime_1.jsxs)(Input_styled_1.CharCount, { children: [currentLength, "/", maxLength] })), customLinkText && ((0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText })))] })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [hasNumericFormat ? ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { customInput: Input_styled_1.InputStyled, id: id, onFocus: handleFocus, onBlur: handleBlur }))) : mask && format ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, maxLength: maxLength }, other, { format: format, mask: mask, customInput: Input_styled_1.InputStyled, id: id, onFocus: handleFocus, onBlur: handleBlur }))) : type === 'date' ? ((0, jsx_runtime_1.jsx)(Input_styled_1.DatePickerWrapperStyled, __assign({ "$inline": inline }, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, __assign({ placeholderText: placeholder, disabled: disabled, name: name, readOnly: readOnly, autoFocus: autoFocus, onChange: handleDateChange, selected: startDate, ref: datePickerRef, id: id, dateFormat: "yyyy-MM-dd", locale: language === 'tr' ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}), inline: inline, minDate: minDate, maxDate: maxDate, filterDate: filterDate, renderCustomHeader: function (_a) {
                                 var monthDate = _a.monthDate, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, nextYearButtonDisabled = _a.nextYearButtonDisabled;
                                 return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "headerTopContent" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "leftButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Year", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseYear, type: "button", disabled: prevYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CalenderArrowleftsmall" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Month", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseMonth, type: "button", disabled: prevMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallLeft" }) }))] })), (0, jsx_runtime_1.jsxs)("span", __assign({ className: "react-datepicker__current-month" }, { children: [monthDate.toLocaleString(language === 'tr' ? 'tr-TR' : 'en-GB', { month: 'long' }), ",", ' ', monthDate.toLocaleString(language === 'tr' ? 'tr-TR' : 'en-GB', { year: 'numeric' })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Month", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseMonth, type: "button", disabled: nextMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Year", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseYear, type: "button", disabled: nextYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Calenderarrowrightsmall" }) }))] }))] })));
-                            } }, calendarControlProps)) }))) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: function (e) {
-                            onChange === null || onChange === void 0 ? void 0 : onChange(e);
-                            setInputValue(e.currentTarget.value);
-                        }, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue, id: id, maxLength: maxLength, "$hasIcon": hasInputIcon }, other, { onFocus: handleFocus, onBlur: handleBlur }))), isClearable && inputValue ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : type === 'date' && !inline ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg hasNoCursor" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Copy" }) })))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)(Input_styled_1.PopupText, { dangerouslySetInnerHTML: { __html: infoText } }) })) }))), tooltipText && ((0, jsx_runtime_1.jsx)(Input_styled_1.FocusTooltip, __assign({ "$isOpen": isFocused, "$maxWidth": tooltipWidth }, { children: (0, jsx_runtime_1.jsx)(Input_styled_1.PopupText, { dangerouslySetInnerHTML: { __html: tooltipText } }) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))), description && (0, jsx_runtime_1.jsx)(Input_styled_1.FieldDescription, { children: description })] })));
+                            } }, calendarControlProps)) }))) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: fieldValue, id: id, maxLength: maxLength, "$hasIcon": hasInputIcon }, other, { onKeyDown: rememberSelection, onSelect: rememberSelection, onMouseUp: rememberSelection, onFocus: handleFocus, onBlur: handleBlur, onChange: handleTextChange }))), isClearable && fieldValue ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: handleClearValue, className: "removeIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark)", name: "Closebig" }) }))) : type === 'password' ? ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: toggleInputType, className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--dark-opacity-50)", name: inputType === 'password' ? 'Show' : 'Hide' }) }))) : type === 'date' && !inline ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg hasNoCursor" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--grey-50)", name: "Calendar" }) }))) : (hasCopyButton && ((0, jsx_runtime_1.jsx)("div", __assign({ onClick: copyToClipboard, className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Copy" }) })))), infoText && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon hasNoBg" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ popupSize: "small", position: "topRight", popupWidth: "160px", popupRight: "-10px", iconWidth: "24px", iconHeight: "24px" }, { children: (0, jsx_runtime_1.jsx)(Input_styled_1.PopupText, { dangerouslySetInnerHTML: { __html: infoText } }) })) }))), tooltipText && ((0, jsx_runtime_1.jsx)(Input_styled_1.FocusTooltip, __assign({ "$isOpen": isFocused, "$maxWidth": tooltipWidth }, { children: (0, jsx_runtime_1.jsx)(Input_styled_1.PopupText, { dangerouslySetInnerHTML: { __html: tooltipText } }) }))), (0, jsx_runtime_1.jsx)(Input_styled_1.AlertStyled, __assign({ "$visible": alert }, { children: t('copied') }))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "SwitchPassive" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] }))), description && (0, jsx_runtime_1.jsx)(Input_styled_1.FieldDescription, { children: description })] })));
 };
 exports.default = Input;

package/dist/components/Input/Input.test.js

@@ -51,7 +51,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@testing-library/react");
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
 var user_event_1 = __importDefault(require("@testing-library/user-event"));
 var Input_1 = __importDefault(require("./Input"));
 var props_1 = require("./props");
@@ -62,17 +63,17 @@ jest.mock('react-i18next', function () { return ({
 }); });
 var renderInput = function (props) {
     if (props === void 0) { props = {}; }
-    return (0, react_1.render)((0, jsx_runtime_1.jsx)(Input_1.default, __assign({}, props_1.InputDefault, { id: "input-test", label: "Label", onChange: jest.fn() }, props)));
+    return (0, react_2.render)((0, jsx_runtime_1.jsx)(Input_1.default, __assign({}, props_1.InputDefault, { id: "input-test", label: "Label", onChange: jest.fn() }, props)));
 };
 describe('Input', function () {
     it('renders label and placeholder', function () {
         renderInput({ placeholder: 'Placeholder text' });
-        expect(react_1.screen.getByText('Label')).toBeInTheDocument();
-        expect(react_1.screen.getByPlaceholderText('Placeholder text')).toBeInTheDocument();
+        expect(react_2.screen.getByText('Label')).toBeInTheDocument();
+        expect(react_2.screen.getByPlaceholderText('Placeholder text')).toBeInTheDocument();
     });
     it('shows error message when hasError is true', function () {
         renderInput({ hasError: true, errorMessage: 'Invalid value' });
-        expect(react_1.screen.getByText('Invalid value')).toBeInTheDocument();
+        expect(react_2.screen.getByText('Invalid value')).toBeInTheDocument();
     });
     it('toggles password visibility', function () { return __awaiter(void 0, void 0, void 0, function () {
         var container, input;
@@ -80,7 +81,7 @@ describe('Input', function () {
             switch (_a.label) {
                 case 0:
                     container = renderInput({ type: 'password', placeholder: 'Password' }).container;
-                    input = react_1.screen.getByPlaceholderText('Password');
+                    input = react_2.screen.getByPlaceholderText('Password');
                     expect(input).toHaveAttribute('type', 'password');
                     return [4 /*yield*/, user_event_1.default.click(container.querySelector('.inputIcon'))];
                 case 1:
@@ -120,7 +121,7 @@ describe('Input', function () {
     });
     it('applies tooltipWidth to the focus tooltip', function () {
         renderInput({ tooltipText: 'Hint', tooltipWidth: '200px' });
-        expect(react_1.screen.getByText('Hint').parentElement).toHaveStyle({ maxWidth: '200px' });
+        expect(react_2.screen.getByText('Hint').parentElement).toHaveStyle({ maxWidth: '200px' });
     });
     it('shows tooltip on focus and hides it on blur', function () { return __awaiter(void 0, void 0, void 0, function () {
         var tooltip;
@@ -128,22 +129,59 @@ describe('Input', function () {
             switch (_a.label) {
                 case 0:
                     renderInput({ tooltipText: 'Focus hint', placeholder: 'Type here' });
-                    tooltip = react_1.screen.getByText('Focus hint');
+                    tooltip = react_2.screen.getByText('Focus hint');
                     expect(tooltip).not.toBeVisible();
-                    return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByPlaceholderText('Type here'))];
+                    return [4 /*yield*/, user_event_1.default.click(react_2.screen.getByPlaceholderText('Type here'))];
                 case 1:
                     _a.sent();
-                    return [4 /*yield*/, (0, react_1.waitFor)(function () { return expect(tooltip).toBeVisible(); })];
+                    return [4 /*yield*/, (0, react_2.waitFor)(function () { return expect(tooltip).toBeVisible(); })];
                 case 2:
                     _a.sent();
                     return [4 /*yield*/, user_event_1.default.tab()];
                 case 3:
                     _a.sent();
-                    return [4 /*yield*/, (0, react_1.waitFor)(function () { return expect(tooltip).not.toBeVisible(); })];
+                    return [4 /*yield*/, (0, react_2.waitFor)(function () { return expect(tooltip).not.toBeVisible(); })];
                 case 4:
                     _a.sent();
                     return [2 /*return*/];
             }
         });
     }); });
+    it('keeps a full maxLength value when a single character is typed', function () {
+        var onChange = jest.fn();
+        renderInput({ value: 'ABCDEFG', maxLength: 7, mask: null, onChange: onChange });
+        react_2.fireEvent.change(react_2.screen.getByDisplayValue('ABCDEFG'), { target: { value: '1' } });
+        expect(onChange).not.toHaveBeenCalled();
+        expect(react_2.screen.getByDisplayValue('ABCDEFG')).toBeInTheDocument();
+    });
+    it('keeps the value prop when the parent rejects the change', function () {
+        var onChange = jest.fn();
+        renderInput({ value: '#a', mask: null, onChange: onChange });
+        react_2.fireEvent.change(react_2.screen.getByDisplayValue('#a'), { target: { value: '#as' } });
+        expect(onChange).toHaveBeenCalled();
+        expect(react_2.screen.getByDisplayValue('#a')).toBeInTheDocument();
+    });
+    it('follows parent state for a controlled edit', function () {
+        var Harness = function () {
+            var _a = react_1.default.useState('#a'), value = _a[0], setValue = _a[1];
+            return ((0, jsx_runtime_1.jsx)(Input_1.default, __assign({}, props_1.InputDefault, { id: "controlled-input", mask: null, value: value, onChange: function (event) {
+                    var _a, _b;
+                    var next = (_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+                    if (/^#[0-9A-Fa-f]{0,6}$/.test(next))
+                        setValue(next);
+                } })));
+        };
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Harness, {}));
+        react_2.fireEvent.change(react_2.screen.getByDisplayValue('#a'), { target: { value: '#as' } });
+        expect(react_2.screen.getByDisplayValue('#a')).toBeInTheDocument();
+        react_2.fireEvent.change(react_2.screen.getByDisplayValue('#a'), { target: { value: '#ad' } });
+        expect(react_2.screen.getByDisplayValue('#ad')).toBeInTheDocument();
+    });
+    it('accepts a normal edit below maxLength when uncontrolled', function () {
+        var onChange = jest.fn();
+        renderInput({ mask: null, onChange: onChange });
+        react_2.fireEvent.change(react_2.screen.getByRole('textbox'), { target: { value: 'ABCD' } });
+        expect(onChange).toHaveBeenCalled();
+        expect(react_2.screen.getByDisplayValue('ABCD')).toBeInTheDocument();
+    });
 });

package/dist/i18n/locales/english.json

@@ -15,5 +15,8 @@
     "NO_OPTIONS_FOUND": "Not found",
     "GO": "Go",
     "OPTIONAL": "Optional",
-    "back": "Back"
+    "back": "Back",
+    "pickColor": "Pick color",
+    "colorHue": "Hue",
+    "colorSaturation": "Saturation and brightness"
 }

package/dist/i18n/locales/turkish.json

@@ -18,5 +18,8 @@
     "ALL_RENTED": "Hepsi kiralandı",
     "POST_COMMENTS": "Yorumlarını yayınla",
     "REMOVE_COMMENTS": "Yorumlarını kaldır",
-    "back": "Geri dön"
+    "back": "Geri dön",
+    "pickColor": "Renk seç",
+    "colorHue": "Renk tonu",
+    "colorSaturation": "Doygunluk ve parlaklık"
 }

package/dist/index.d.ts

@@ -65,4 +65,5 @@ import QuantitySelector from "./components/QuantitySelector";
 import Tag from "./components/Tag";
 import TagInput from "./components/TagInput";
 import RichTextEditor from "./components/RichTextEditor";
-export { Button, Breadcrumbs, CategoryMenu, Checkbox, CircleProgress, Input, Modal, OtpInput, Stepper, Alert, Agreement, Icon, RadioButton, ActionButton, Textarea, SearchBox, Divider, Accordion, toast, Toaster, SuggestBox, Badges, SelectBox, TextLink, Tooltip, InsuranceBox, ListGroup, InfoBox, CouponCode, ShoppingCartProduct, Loader, InlineProgress, Dropdown, CampaignCard, initReactI18next, initi18n, enLocale, trLocale, useTranslation, ReviewCard, AddressCard, InstallmentBox, AutocompleteInput, BannerCard, ProductCardVertical, ProductCardHorizontal, ProductCardHorizontalSm, ProductCardHorizontalMd, ProductCardCheckbox, ProductCardRadio, Tabs, PaymentCart, OptionMenu, DropdownButton, Table, DescriptionCard, Pagination, SkeletonLoader, RadioScale, BlogCard, ReviewBlock, VideoCard, StepSlider, RadioGroup, CheckboxGroup, QuantitySelector, Tag, TagInput, RichTextEditor };
+import ColorCard from "./components/ColorCard";
+export { Button, Breadcrumbs, CategoryMenu, Checkbox, CircleProgress, Input, Modal, OtpInput, Stepper, Alert, Agreement, Icon, RadioButton, ActionButton, Textarea, SearchBox, Divider, Accordion, toast, Toaster, SuggestBox, Badges, SelectBox, TextLink, Tooltip, InsuranceBox, ListGroup, InfoBox, CouponCode, ShoppingCartProduct, Loader, InlineProgress, Dropdown, CampaignCard, initReactI18next, initi18n, enLocale, trLocale, useTranslation, ReviewCard, AddressCard, InstallmentBox, AutocompleteInput, BannerCard, ProductCardVertical, ProductCardHorizontal, ProductCardHorizontalSm, ProductCardHorizontalMd, ProductCardCheckbox, ProductCardRadio, Tabs, PaymentCart, OptionMenu, DropdownButton, Table, DescriptionCard, Pagination, SkeletonLoader, RadioScale, BlogCard, ReviewBlock, VideoCard, StepSlider, RadioGroup, CheckboxGroup, QuantitySelector, Tag, TagInput, RichTextEditor, ColorCard };

package/dist/index.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProductCardRadio = exports.ProductCardCheckbox = exports.ProductCardHorizontalMd = exports.ProductCardHorizontalSm = exports.ProductCardHorizontal = exports.ProductCardVertical = exports.BannerCard = exports.AutocompleteInput = exports.InstallmentBox = exports.AddressCard = exports.ReviewCard = exports.useTranslation = exports.trLocale = exports.enLocale = exports.initi18n = exports.initReactI18next = exports.CampaignCard = exports.Dropdown = exports.InlineProgress = exports.Loader = exports.ShoppingCartProduct = exports.CouponCode = exports.InfoBox = exports.ListGroup = exports.InsuranceBox = exports.Tooltip = exports.TextLink = exports.SelectBox = exports.Badges = exports.SuggestBox = exports.Toaster = exports.toast = exports.Accordion = exports.Divider = exports.SearchBox = exports.Textarea = exports.ActionButton = exports.RadioButton = exports.Icon = exports.Agreement = exports.Alert = exports.Stepper = exports.OtpInput = exports.Modal = exports.Input = exports.CircleProgress = exports.Checkbox = exports.CategoryMenu = exports.Breadcrumbs = exports.Button = void 0;
-exports.RichTextEditor = exports.TagInput = exports.Tag = exports.QuantitySelector = exports.CheckboxGroup = exports.RadioGroup = exports.StepSlider = exports.VideoCard = exports.ReviewBlock = exports.BlogCard = exports.RadioScale = exports.SkeletonLoader = exports.Pagination = exports.DescriptionCard = exports.Table = exports.DropdownButton = exports.OptionMenu = exports.PaymentCart = exports.Tabs = void 0;
+exports.ColorCard = exports.RichTextEditor = exports.TagInput = exports.Tag = exports.QuantitySelector = exports.CheckboxGroup = exports.RadioGroup = exports.StepSlider = exports.VideoCard = exports.ReviewBlock = exports.BlogCard = exports.RadioScale = exports.SkeletonLoader = exports.Pagination = exports.DescriptionCard = exports.Table = exports.DropdownButton = exports.OptionMenu = exports.PaymentCart = exports.Tabs = void 0;
 var react_i18next_1 = require("react-i18next");
 Object.defineProperty(exports, "initReactI18next", { enumerable: true, get: function () { return react_i18next_1.initReactI18next; } });
 Object.defineProperty(exports, "useTranslation", { enumerable: true, get: function () { return react_i18next_1.useTranslation; } });
@@ -141,3 +141,5 @@ var TagInput_1 = __importDefault(require("./components/TagInput"));
 exports.TagInput = TagInput_1.default;
 var RichTextEditor_1 = __importDefault(require("./components/RichTextEditor"));
 exports.RichTextEditor = RichTextEditor_1.default;
+var ColorCard_1 = __importDefault(require("./components/ColorCard"));
+exports.ColorCard = ColorCard_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "2.23.26",
+  "version": "2.24.0",
   "files": [
     "dist"
   ],