krl-alfred 2.23.26 → 2.24.1

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;
+};