krl-alfred 2.24.11 → 2.25.0

package/dist/components/AddressCard/AddressCard.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { AddressCardProps } from "./props";
-declare const AddressCard: ({ title, description, content, handleUpdate, onChange, checked, isShowEditBtn, id, minHeight, name, value, disabled, hasBlockDescription }: AddressCardProps) => React.JSX.Element;
+declare const AddressCard: ({ title, description, content, handleUpdate, onChange, checked, isShowEditBtn, id, minHeight, name, value, disabled, hasBlockDescription, notice }: AddressCardProps) => React.JSX.Element;
 export default AddressCard;

package/dist/components/AddressCard/AddressCard.js

@@ -21,8 +21,8 @@ var RadioButton_1 = __importDefault(require("../RadioButton"));
 var TextLink_1 = __importDefault(require("../TextLink"));
 var react_i18next_1 = require("react-i18next");
 var AddressCard = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? props_1.AddressCardDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.AddressCardDefault.description : _c, _d = _a.content, content = _d === void 0 ? props_1.AddressCardDefault.content : _d, _e = _a.handleUpdate, handleUpdate = _e === void 0 ? props_1.AddressCardDefault.handleUpdate : _e, _f = _a.onChange, onChange = _f === void 0 ? props_1.AddressCardDefault.onChange : _f, _g = _a.checked, checked = _g === void 0 ? props_1.AddressCardDefault.checked : _g, _h = _a.isShowEditBtn, isShowEditBtn = _h === void 0 ? props_1.AddressCardDefault.isShowEditBtn : _h, _j = _a.id, id = _j === void 0 ? props_1.AddressCardDefault.id : _j, _k = _a.minHeight, minHeight = _k === void 0 ? props_1.AddressCardDefault.minHeight : _k, _l = _a.name, name = _l === void 0 ? props_1.AddressCardDefault.name : _l, _m = _a.value, value = _m === void 0 ? props_1.AddressCardDefault.value : _m, _o = _a.disabled, disabled = _o === void 0 ? props_1.AddressCardDefault.disabled : _o, _p = _a.hasBlockDescription, hasBlockDescription = _p === void 0 ? props_1.AddressCardDefault.hasBlockDescription : _p;
+    var _b = _a.title, title = _b === void 0 ? props_1.AddressCardDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.AddressCardDefault.description : _c, _d = _a.content, content = _d === void 0 ? props_1.AddressCardDefault.content : _d, _e = _a.handleUpdate, handleUpdate = _e === void 0 ? props_1.AddressCardDefault.handleUpdate : _e, _f = _a.onChange, onChange = _f === void 0 ? props_1.AddressCardDefault.onChange : _f, _g = _a.checked, checked = _g === void 0 ? props_1.AddressCardDefault.checked : _g, _h = _a.isShowEditBtn, isShowEditBtn = _h === void 0 ? props_1.AddressCardDefault.isShowEditBtn : _h, _j = _a.id, id = _j === void 0 ? props_1.AddressCardDefault.id : _j, _k = _a.minHeight, minHeight = _k === void 0 ? props_1.AddressCardDefault.minHeight : _k, _l = _a.name, name = _l === void 0 ? props_1.AddressCardDefault.name : _l, _m = _a.value, value = _m === void 0 ? props_1.AddressCardDefault.value : _m, _o = _a.disabled, disabled = _o === void 0 ? props_1.AddressCardDefault.disabled : _o, _p = _a.hasBlockDescription, hasBlockDescription = _p === void 0 ? props_1.AddressCardDefault.hasBlockDescription : _p, _q = _a.notice, notice = _q === void 0 ? props_1.AddressCardDefault.notice : _q;
     var t = (0, react_i18next_1.useTranslation)().t;
-    return ((0, jsx_runtime_1.jsxs)(AddressCard_styled_1.AddressCardStyled, __assign({ htmlFor: id, checked: checked, "$minHeight": minHeight, "$hasBlockDescription": hasBlockDescription }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "head" }, { children: [(0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: id, onChange: onChange, checked: checked, isWrapText: false, layout: "basic", size: "small", label: title, name: name, value: value, disabled: disabled, textSize: "large" }), isShowEditBtn && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "xxxxx", className: "editBtn" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: handleUpdate }, { children: t("edit") })) })))] })), description && (0, jsx_runtime_1.jsx)("div", __assign({ className: "description" }, { children: description })), checked && content != null && ((0, jsx_runtime_1.jsx)(AddressCard_styled_1.Content, { children: content }))] })));
+    return ((0, jsx_runtime_1.jsxs)(AddressCard_styled_1.AddressCardStyled, __assign({ htmlFor: id, checked: checked, "$minHeight": minHeight, "$hasBlockDescription": hasBlockDescription, "$disabled": disabled, "$hasNotice": Boolean(notice) }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "head" }, { children: [(0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: id, onChange: onChange, checked: checked, isWrapText: false, layout: "basic", size: "small", label: title, name: name, value: value, disabled: disabled, textSize: "large" }), isShowEditBtn && ((0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "xxxxx", className: "editBtn" }, { children: (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({ onClick: handleUpdate }, { children: t("edit") })) })))] })), (description || notice) && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "description" }, { children: [description, notice ? (0, jsx_runtime_1.jsx)(AddressCard_styled_1.Notice, { children: notice }) : null] }))), checked && content != null && ((0, jsx_runtime_1.jsx)(AddressCard_styled_1.Content, { children: content }))] })));
 };
 exports.default = AddressCard;

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
 import { AddressCardStyledProps } from "./props";
 export declare const AddressCardStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof AddressCardStyledProps> & AddressCardStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof AddressCardStyledProps> & AddressCardStyledProps, never>>> & string;
+export declare const Notice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 export declare const Content: 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;

package/dist/components/AddressCard/AddressCard.styled.js

@@ -7,9 +7,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Content = exports.AddressCardStyled = void 0;
+exports.Content = exports.Notice = exports.AddressCardStyled = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var devices_1 = require("../../constants/devices");
-exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 0.5rem;\n    border: 1px solid var(--border);\n    background: var(--bg);\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n    .head {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        margin-top: 1.5rem;\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: var(--text);\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n    }\n"], ["\n    border-radius: 0.5rem;\n    border: 1px solid var(--border);\n    background: var(--bg);\n    padding: 1rem;\n    cursor: pointer;\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n    .head {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        margin-top: 1.5rem;\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: var(--text);\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n    }\n"])), function (props) { return props.checked ? '1' : '0'; }, function (props) { return !props.checked && "\n          @media only screen and ".concat(devices_1.devices.mdUp, " {\n            &:hover {\n                &:before{\n                    border: 1px solid var(--primary);\n                    opacity: 1;\n                }   \n            }\n          }\n          &:active {\n              &:before{\n                  border: 1px solid var(--primary);\n                  opacity: 1;\n              }   \n          }\n    "); }, function (props) { return props.$minHeight ? props.$minHeight : '68px'; }, function (props) { return props.$hasBlockDescription ? 'block' : '-webkit-inline-box'; }, function (props) { return props.$hasBlockDescription ? 'unset' : '4'; }, function (props) { return props.$hasBlockDescription ? 'unset' : 'vertical'; }, function (props) { return props.$hasBlockDescription ? 'unset' : 'middle'; });
-exports.Content = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin-top: 1rem;\n    cursor: default;\n"], ["\n    margin-top: 1rem;\n    cursor: default;\n"])));
-var templateObject_1, templateObject_2;
+exports.AddressCardStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-radius: 0.5rem;\n    border: 1px solid var(--border);\n    background: var(--bg);\n    padding: 1rem;\n    cursor: ", ";\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n\n    ", "\n    .head {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        margin-top: 1.5rem;\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: ", ";\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n        ", "\n    }\n"], ["\n    border-radius: 0.5rem;\n    border: 1px solid var(--border);\n    background: var(--bg);\n    padding: 1rem;\n    cursor: ", ";\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n\n    &:before {\n        content: \"\";\n        position: absolute;\n        inset: -1px;\n        border: 2px solid var(--primary);\n        opacity: ", ";\n        user-select: none;\n        pointer-events: none;\n        border-radius: inherit;\n    }\n\n    ", "\n\n    ", "\n    .head {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        cursor: inherit;\n\n        .editBtn {\n            font: var(--body-bold-14-17);\n            margin-left: 1rem;\n            display: block;\n\n            * {\n                display: block;\n            }\n        }\n    }\n\n    .description {\n        margin-top: 1.5rem;\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        word-break: break-word;\n        font: var(--body-regular-14-17);\n        color: ", ";\n        height: ", ";\n        cursor: inherit;\n        display: ", ";\n        -webkit-line-clamp: ", ";\n        -webkit-box-orient: ", ";\n        vertical-align: ", ";\n        ", "\n    }\n"])), function (props) { return props.$disabled ? 'not-allowed' : 'pointer'; }, function (props) { return props.checked ? '1' : '0'; }, function (props) { return props.$disabled && "\n        .head > label:first-child,\n        .head > label:first-child * {\n            color: var(--text-disabled);\n        }\n    "; }, function (props) { return !props.checked && !props.$disabled && "\n          @media only screen and ".concat(devices_1.devices.mdUp, " {\n            &:hover {\n                &:before{\n                    border: 1px solid var(--primary);\n                    opacity: 1;\n                }   \n            }\n          }\n          &:active {\n              &:before{\n                  border: 1px solid var(--primary);\n                  opacity: 1;\n              }   \n          }\n    "); }, function (props) { return props.$disabled ? 'var(--text-disabled)' : 'var(--text)'; }, function (props) { return props.$minHeight ? props.$minHeight : '68px'; }, function (props) { return props.$hasBlockDescription || props.$hasNotice ? 'block' : '-webkit-inline-box'; }, function (props) { return props.$hasBlockDescription || props.$hasNotice ? 'unset' : '4'; }, function (props) { return props.$hasBlockDescription || props.$hasNotice ? 'unset' : 'vertical'; }, function (props) { return props.$hasBlockDescription || props.$hasNotice ? 'unset' : 'middle'; }, function (props) { return props.$hasNotice && "\n            height: auto;\n            overflow: visible;\n        "; });
+exports.Notice = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: block;\n    margin-top: 0.25rem;\n    font: var(--body-medium-13-16);\n    color: var(--text-soft);\n"], ["\n    display: block;\n    margin-top: 0.25rem;\n    font: var(--body-medium-13-16);\n    color: var(--text-soft);\n"])));
+exports.Content = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    margin-top: 1rem;\n    cursor: default;\n"], ["\n    margin-top: 1rem;\n    cursor: default;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

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

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

package/dist/components/AddressCard/AddressCard.test.js

@@ -0,0 +1,148 @@
+"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 AddressCard_1 = __importDefault(require("./AddressCard"));
+var props_1 = require("./props");
+jest.mock('react-i18next', function () { return ({
+    useTranslation: function () { return ({
+        t: function (key) { return key; },
+    }); },
+}); });
+var renderCard = function (props) {
+    if (props === void 0) { props = {}; }
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(AddressCard_1.default, __assign({}, props_1.AddressCardDefault, { id: "address-1", name: "address", value: "home", title: "Ev", description: "Ba\u011Fdat Cad. No:12", onChange: jest.fn(), handleUpdate: jest.fn() }, props)));
+};
+describe('AddressCard', function () {
+    it('renders title and description', function () {
+        renderCard();
+        expect(react_1.screen.getByText('Ev')).toBeInTheDocument();
+        expect(react_1.screen.getByText('Bağdat Cad. No:12')).toBeInTheDocument();
+    });
+    it('calls onChange when the radio is selected', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onChange;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onChange = jest.fn();
+                    renderCard({ onChange: onChange });
+                    return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByRole('radio'))];
+                case 1:
+                    _a.sent();
+                    expect(onChange).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('calls handleUpdate when edit is clicked', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var handleUpdate;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    handleUpdate = jest.fn();
+                    renderCard({ handleUpdate: handleUpdate });
+                    return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByText('edit'))];
+                case 1:
+                    _a.sent();
+                    expect(handleUpdate).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('shows extra content only when checked', function () {
+        var rerender = renderCard({ checked: false, content: (0, jsx_runtime_1.jsx)("span", { children: "Ek i\u00E7erik" }) }).rerender;
+        expect(react_1.screen.queryByText('Ek içerik')).not.toBeInTheDocument();
+        rerender((0, jsx_runtime_1.jsx)(AddressCard_1.default, __assign({}, props_1.AddressCardDefault, { id: "address-1", title: "Ev", checked: true, content: (0, jsx_runtime_1.jsx)("span", { children: "Ek i\u00E7erik" }) })));
+        expect(react_1.screen.getByText('Ek içerik')).toBeInTheDocument();
+    });
+    it('does not call onChange when disabled', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onChange;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onChange = jest.fn();
+                    renderCard({ disabled: true, onChange: onChange });
+                    return [4 /*yield*/, user_event_1.default.click(react_1.screen.getByRole('radio'))];
+                case 1:
+                    _a.sent();
+                    expect(onChange).not.toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('dims the title and address when disabled', function () {
+        renderCard({ disabled: true });
+        expect(react_1.screen.getByText('Ev')).toHaveStyle({ color: 'var(--text-disabled)' });
+        expect(react_1.screen.getByText('Bağdat Cad. No:12')).toHaveStyle({ color: 'var(--text-disabled)' });
+    });
+    it('renders the unavailable notice under the address', function () {
+        var container = renderCard({
+            disabled: true,
+            notice: 'Bu bölgeye teslimat yapılmıyor',
+        }).container;
+        var notice = react_1.screen.getByText('Bu bölgeye teslimat yapılmıyor');
+        expect(notice).toHaveStyle({ color: 'var(--text-soft)' });
+        expect(container.firstChild).toHaveStyle({ cursor: 'not-allowed' });
+    });
+    it('renders unsafe title, description and notice as text', function () {
+        var payload = '<script>alert(1)</script>';
+        var container = renderCard({
+            title: payload,
+            description: payload,
+            notice: payload,
+        }).container;
+        expect(container.querySelector('script')).not.toBeInTheDocument();
+        expect(container.textContent).toContain(payload);
+    });
+});

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

@@ -13,11 +13,15 @@ export interface AddressCard {
     value?: string;
     disabled?: boolean;
     hasBlockDescription?: boolean;
+    /** Adres satırının altında, örn. teslimat yapılamayan bölge notu. */
+    notice?: string;
 }
 export interface AddressCardStyledProps {
     checked?: boolean;
     $minHeight?: string;
     $hasBlockDescription?: boolean;
+    $disabled?: boolean;
+    $hasNotice?: boolean;
 }
 export declare const AddressCardDefault: AddressCard;
 export type AddressCardProps = typeof AddressCardDefault;

package/dist/components/AddressCard/props.js

@@ -15,4 +15,5 @@ exports.AddressCardDefault = {
     isShowEditBtn: true,
     minHeight: "68px",
     hasBlockDescription: false,
+    notice: null,
 };

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

@@ -23,6 +23,9 @@ declare const _default: {
         hasBlockDescription: {
             control: string;
         };
+        notice: {
+            control: string;
+        };
         minHeight: {
             control: string;
         };
@@ -134,6 +137,24 @@ export declare const Disabled: {
         content: any;
     };
 };
+export declare const Unavailable: {
+    args: {
+        title: string;
+        description: string;
+        id: string;
+        value: string;
+        disabled: boolean;
+        isShowEditBtn: boolean;
+        minHeight: string;
+        notice: string;
+        handleUpdate: () => void;
+        onChange: () => void;
+        name: string;
+        checked: boolean;
+        hasBlockDescription: boolean;
+        content: any;
+    };
+};
 export declare const DisabledChecked: {
     args: {
         title: string;

package/dist/components/AddressCard/stories/AddressCard.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Complete = exports.AddressList = exports.BlockDescriptionChecked = exports.BlockDescription = exports.WithContentAndEdit = exports.WithContentOpen = exports.WithContent = exports.CustomMinHeight = exports.LongDescription = exports.ShortDescription = exports.DisabledWithoutEditButton = exports.DisabledChecked = exports.Disabled = exports.WithoutDescription = exports.WithoutEditButtonChecked = exports.WithoutEditButton = exports.Checked = exports.Default = void 0;
+exports.Complete = exports.AddressList = exports.BlockDescriptionChecked = exports.BlockDescription = exports.WithContentAndEdit = exports.WithContentOpen = exports.WithContent = exports.CustomMinHeight = exports.LongDescription = exports.ShortDescription = exports.DisabledWithoutEditButton = exports.DisabledChecked = exports.Unavailable = exports.Disabled = exports.WithoutDescription = exports.WithoutEditButtonChecked = exports.WithoutEditButton = exports.Checked = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var AddressCard_1 = __importDefault(require("../AddressCard"));
@@ -86,6 +86,7 @@ exports.default = {
         disabled: { control: "boolean" },
         isShowEditBtn: { control: "boolean" },
         hasBlockDescription: { control: "boolean" },
+        notice: { control: "text" },
         minHeight: { control: "text" },
         content: { control: false },
     },
@@ -108,6 +109,9 @@ exports.WithoutDescription = {
 exports.Disabled = {
     args: __assign(__assign({}, baseArgs), { title: "Disabled Address", id: "addressCard_5", value: "address_5", disabled: true }),
 };
+exports.Unavailable = {
+    args: __assign(__assign({}, baseArgs), { title: "Ev", description: "Bağdat Cad. No:12, Kadıköy / İstanbul", id: "addressCard_unavailable", value: "address_unavailable", disabled: true, isShowEditBtn: false, minHeight: "auto", notice: "Bu bölgeye teslimat yapılmıyor" }),
+};
 exports.DisabledChecked = {
     args: __assign(__assign({}, baseArgs), { title: "Disabled Selected Address", id: "addressCard_6", value: "address_6", checked: true, disabled: true }),
 };

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

@@ -268,6 +268,43 @@ export declare const DateWithMinMax: {
         onChange: (e: any) => void;
     };
 };
+export declare const Time: {
+    args: {
+        label: string;
+        placeholder: string;
+        format: string;
+        mask: string;
+        allowEmptyFormatting: boolean;
+        id: string;
+        hasError: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+        isClearable: boolean;
+        type: string;
+        infoText: any;
+        tooltipText: any;
+        onChange: (e: any) => void;
+    };
+};
+export declare const TimeWithValue: {
+    args: {
+        label: string;
+        placeholder: string;
+        format: string;
+        mask: string;
+        allowEmptyFormatting: boolean;
+        value: string;
+        id: string;
+        hasError: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+        isClearable: boolean;
+        type: string;
+        infoText: any;
+        tooltipText: any;
+        onChange: (e: any) => void;
+    };
+};
 export declare const WithCopyButton: {
     args: {
         placeholder: string;

package/dist/components/Input/stories/Input.stories.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Interactive = exports.PercentageMaskWithValue = exports.PercentageMask = exports.WithMaxLengthAndDescription = exports.ErrorWithCustomLink = exports.Complete = exports.CustomWidth = exports.Number = exports.Tel = exports.Email = exports.PatternFormatWithValue = exports.PatternFormat = exports.PriceFormat = exports.NumericFormat = exports.WithTooltip = exports.WithInfoText = exports.Clearable = exports.WithCopyButton = exports.DateWithMinMax = exports.DateInline = exports.DateInput = exports.PasswordWithValue = exports.Password = exports.WithCustomLink = exports.ReadOnly = exports.Disabled = exports.WithError = exports.WithLabel = exports.WithValue = exports.Empty = exports.Default = void 0;
+exports.Interactive = exports.PercentageMaskWithValue = exports.PercentageMask = exports.WithMaxLengthAndDescription = exports.ErrorWithCustomLink = exports.Complete = exports.CustomWidth = exports.Number = exports.Tel = exports.Email = exports.PatternFormatWithValue = exports.PatternFormat = exports.PriceFormat = exports.NumericFormat = exports.WithTooltip = exports.WithInfoText = exports.Clearable = exports.WithCopyButton = exports.TimeWithValue = exports.Time = exports.DateWithMinMax = exports.DateInline = exports.DateInput = exports.PasswordWithValue = exports.Password = exports.WithCustomLink = exports.ReadOnly = exports.Disabled = exports.WithError = exports.WithLabel = exports.WithValue = exports.Empty = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = __importDefault(require("react"));
 var Input_1 = __importDefault(require("../Input"));
@@ -244,6 +244,12 @@ exports.DateWithMinMax = {
         }
     },
 };
+exports.Time = {
+    args: __assign(__assign({}, baseArgs), { label: "Saat", placeholder: "Örn: 07:00", format: "##:##", mask: "_", allowEmptyFormatting: false, id: "input_time" }),
+};
+exports.TimeWithValue = {
+    args: __assign(__assign({}, baseArgs), { label: "Saat", placeholder: "Örn: 10:30", format: "##:##", mask: "_", allowEmptyFormatting: false, value: "14:30", id: "input_time_value" }),
+};
 exports.WithCopyButton = {
     args: {
         placeholder: "Copy this text",

package/dist/components/LoadingBar/LoadingBar.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { LoadingBarProps } from "./props";
+declare const LoadingBar: ({ title, description, value, total, format, progressText, }: LoadingBarProps) => React.JSX.Element;
+export default LoadingBar;

package/dist/components/LoadingBar/LoadingBar.js

@@ -0,0 +1,28 @@
+"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 props_1 = require("./props");
+var LoadingBar_styled_1 = require("./LoadingBar.styled");
+var progress_1 = require("./utils/progress");
+var LoadingBar = function (_a) {
+    var _b = _a.title, title = _b === void 0 ? props_1.LoadingBarDefault.title : _b, _c = _a.description, description = _c === void 0 ? props_1.LoadingBarDefault.description : _c, _d = _a.value, value = _d === void 0 ? props_1.LoadingBarDefault.value : _d, _e = _a.total, total = _e === void 0 ? props_1.LoadingBarDefault.total : _e, _f = _a.format, format = _f === void 0 ? props_1.LoadingBarDefault.format : _f, _g = _a.progressText, progressText = _g === void 0 ? props_1.LoadingBarDefault.progressText : _g;
+    var titleId = (0, react_1.useId)();
+    var descriptionId = (0, react_1.useId)();
+    var progress = (0, progress_1.getLoadingProgress)(value, total);
+    var current = (0, progress_1.getLoadingCurrent)(value, total);
+    var max = (0, progress_1.getLoadingTotal)(total);
+    return ((0, jsx_runtime_1.jsxs)(LoadingBar_styled_1.LoadingBarStyled, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "header" }, { children: [title ? ((0, jsx_runtime_1.jsx)("p", __assign({ className: "title", id: titleId }, { children: title }))) : null, (0, jsx_runtime_1.jsx)("p", __assign({ className: "value" }, { children: progressText || (0, progress_1.formatLoadingValue)(value, total, format) }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "body" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "track", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": current, "aria-labelledby": title ? titleId : undefined, "aria-describedby": description ? descriptionId : undefined }, { children: (0, jsx_runtime_1.jsx)("div", { className: "fill", style: { width: "".concat(progress, "%") } }) })), description ? ((0, jsx_runtime_1.jsx)("p", __assign({ className: "description", id: descriptionId }, { children: description }))) : null] }))] }));
+};
+exports.default = LoadingBar;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LoadingBarStyled: 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;

package/dist/components/LoadingBar/LoadingBar.styled.js

@@ -0,0 +1,13 @@
+"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.LoadingBarStyled = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.LoadingBarStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 16px;\n    width: 100%;\n\n    .header {\n        display: flex;\n        align-items: flex-end;\n        justify-content: space-between;\n        gap: 16px;\n        width: 100%;\n    }\n\n    .title {\n        margin: 0;\n        color: var(--dark);\n        font: var(--caption-semi-bold-12-15);\n    }\n\n    .value {\n        margin: 0 0 0 auto;\n        flex-shrink: 0;\n        color: var(--grey-50);\n        font: var(--caption-semi-bold-11-13);\n        white-space: nowrap;\n    }\n\n    .body {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n        width: 100%;\n    }\n\n    .track {\n        width: 100%;\n        height: 4px;\n        border-radius: 16px;\n        background-color: var(--dark-opacity-5);\n        overflow: hidden;\n    }\n\n    .fill {\n        height: 4px;\n        border-radius: 16px;\n        background-color: var(--primary);\n        transition: width 0.2s ease;\n    }\n\n    .description {\n        margin: 0;\n        width: 100%;\n        color: var(--dark-opacity-50);\n        font: var(--caption-medium-12-15);\n    }\n"], ["\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 16px;\n    width: 100%;\n\n    .header {\n        display: flex;\n        align-items: flex-end;\n        justify-content: space-between;\n        gap: 16px;\n        width: 100%;\n    }\n\n    .title {\n        margin: 0;\n        color: var(--dark);\n        font: var(--caption-semi-bold-12-15);\n    }\n\n    .value {\n        margin: 0 0 0 auto;\n        flex-shrink: 0;\n        color: var(--grey-50);\n        font: var(--caption-semi-bold-11-13);\n        white-space: nowrap;\n    }\n\n    .body {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n        width: 100%;\n    }\n\n    .track {\n        width: 100%;\n        height: 4px;\n        border-radius: 16px;\n        background-color: var(--dark-opacity-5);\n        overflow: hidden;\n    }\n\n    .fill {\n        height: 4px;\n        border-radius: 16px;\n        background-color: var(--primary);\n        transition: width 0.2s ease;\n    }\n\n    .description {\n        margin: 0;\n        width: 100%;\n        color: var(--dark-opacity-50);\n        font: var(--caption-medium-12-15);\n    }\n"])));
+var templateObject_1;

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

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

package/dist/components/LoadingBar/LoadingBar.test.js

@@ -0,0 +1,97 @@
+"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("@testing-library/react");
+var LoadingBar_1 = __importDefault(require("./LoadingBar"));
+var props_1 = require("./props");
+var renderLoadingBar = function (props) {
+    if (props === void 0) { props = {}; }
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(LoadingBar_1.default, __assign({}, props_1.LoadingBarDefault, props)));
+};
+describe("LoadingBar", function () {
+    it("renders the title, description and fraction label", function () {
+        renderLoadingBar({
+            title: "Ürünler getiriliyor...",
+            description: "Aktarım devam eder.",
+            value: 268,
+            total: 510,
+            format: "fraction",
+        });
+        expect(react_1.screen.getByText("Ürünler getiriliyor...")).toBeInTheDocument();
+        expect(react_1.screen.getByText("Aktarım devam eder.")).toBeInTheDocument();
+        expect(react_1.screen.getByText("268 / 510")).toBeInTheDocument();
+        expect(react_1.screen.getByRole("progressbar")).toHaveAttribute("aria-valuenow", "268");
+        expect(react_1.screen.getByRole("progressbar")).toHaveAttribute("aria-valuemax", "510");
+    });
+    it("renders a percent label", function () {
+        renderLoadingBar({ value: 20, total: 100, format: "percent" });
+        expect(react_1.screen.getByText("%20 / %100")).toBeInTheDocument();
+    });
+    it("clamps the bar when value is outside the total", function () {
+        var container = renderLoadingBar({ value: 800, total: 510, format: "percent" }).container;
+        expect(react_1.screen.getByText("%100 / %100")).toBeInTheDocument();
+        expect(react_1.screen.getByRole("progressbar")).toHaveAttribute("aria-valuenow", "510");
+        expect(container.querySelector(".fill")).toHaveStyle({ width: "100%" });
+    });
+    it("stays at zero when total is not positive", function () {
+        var container = renderLoadingBar({ value: 10, total: 0, format: "fraction" }).container;
+        expect(react_1.screen.getByText("10 / 0")).toBeInTheDocument();
+        expect(react_1.screen.getByRole("progressbar")).toHaveAttribute("aria-valuenow", "0");
+        expect(react_1.screen.getByRole("progressbar")).toHaveAttribute("aria-valuemax", "0");
+        expect(container.querySelector(".fill")).toHaveStyle({ width: "0%" });
+    });
+    it("renders progressText instead of the generated label", function () {
+        renderLoadingBar({
+            value: 268,
+            total: 510,
+            format: "fraction",
+            progressText: "268 ürün",
+        });
+        expect(react_1.screen.getByText("268 ürün")).toBeInTheDocument();
+        expect(react_1.screen.queryByText("268 / 510")).not.toBeInTheDocument();
+    });
+    it("does not execute HTML passed as progressText", function () {
+        renderLoadingBar({
+            progressText: '<script>window.__xssProgress = true</script>%20',
+            value: 20,
+            total: 100,
+        });
+        expect(react_1.screen.getByText(/%20/)).toBeInTheDocument();
+        expect(document.querySelector("script")).not.toBeInTheDocument();
+        expect(window.__xssProgress).toBeUndefined();
+    });
+    it("omits empty title and description", function () {
+        renderLoadingBar({ title: "", description: "", value: 1, total: 4 });
+        expect(react_1.screen.getByText("1 / 4")).toBeInTheDocument();
+        expect(document.querySelector(".title")).not.toBeInTheDocument();
+        expect(document.querySelector(".description")).not.toBeInTheDocument();
+    });
+    it("does not execute HTML passed as title or description", function () {
+        renderLoadingBar({
+            title: '<script>window.__xssTitle = true</script>Başlık',
+            description: '<img src="x" onerror="window.__xssDesc = true" />Açıklama',
+            value: 1,
+            total: 2,
+        });
+        expect(react_1.screen.getByText(/Başlık/)).toBeInTheDocument();
+        expect(react_1.screen.getByText(/Açıklama/)).toBeInTheDocument();
+        expect(document.querySelector("script")).not.toBeInTheDocument();
+        expect(document.querySelector("img")).not.toBeInTheDocument();
+        expect(window.__xssTitle).toBeUndefined();
+        expect(window.__xssDesc).toBeUndefined();
+    });
+});

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

@@ -0,0 +1 @@
+export { default } from "./LoadingBar";

package/dist/components/LoadingBar/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 LoadingBar_1 = require("./LoadingBar");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(LoadingBar_1).default; } });

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

@@ -0,0 +1,12 @@
+import { LoadingBarFormat } from "./utils/progress";
+export declare const formats: readonly ["fraction", "percent"];
+export interface LoadingBar {
+    title?: string;
+    description?: string;
+    value?: number;
+    total?: number;
+    format?: LoadingBarFormat;
+    progressText?: string;
+}
+export declare const LoadingBarDefault: LoadingBar;
+export type LoadingBarProps = typeof LoadingBarDefault;

package/dist/components/LoadingBar/props.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingBarDefault = exports.formats = void 0;
+exports.formats = ["fraction", "percent"];
+exports.LoadingBarDefault = {
+    title: "",
+    description: "",
+    value: 0,
+    total: 100,
+    format: "fraction",
+    progressText: "",
+};

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

@@ -0,0 +1,78 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: (props: any) => React.JSX.Element;
+    tags: string[];
+    argTypes: {
+        title: {
+            control: string;
+        };
+        description: {
+            control: string;
+        };
+        value: {
+            control: string;
+        };
+        total: {
+            control: string;
+        };
+        format: {
+            control: string;
+            options: readonly ["fraction", "percent"];
+        };
+        progressText: {
+            control: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        title: string;
+        description: string;
+        value: number;
+        total: number;
+        format: "fraction";
+        progressText: string;
+    };
+};
+export declare const Percent: {
+    args: {
+        value: number;
+        total: number;
+        format: string;
+        title: string;
+        description: string;
+        progressText: string;
+    };
+};
+export declare const WithoutDescription: {
+    args: {
+        description: string;
+        title: string;
+        value: number;
+        total: number;
+        format: "fraction";
+        progressText: string;
+    };
+};
+export declare const CustomProgressText: {
+    args: {
+        progressText: string;
+        title: string;
+        description: string;
+        value: number;
+        total: number;
+        format: "fraction";
+    };
+};
+export declare const TitleOnly: {
+    args: {
+        description: string;
+        value: number;
+        total: number;
+        title: string;
+        format: "fraction";
+        progressText: string;
+    };
+};

package/dist/components/LoadingBar/stories/LoadingBar.stories.js

@@ -0,0 +1,56 @@
+"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.TitleOnly = exports.CustomProgressText = exports.WithoutDescription = exports.Percent = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var LoadingBar_1 = __importDefault(require("../LoadingBar"));
+var props_1 = require("../props");
+var baseArgs = {
+    title: "Ürünler getiriliyor...",
+    description: "Bu işlem arka planda çalışıyor. Sayfadan ayrılabilirsin, aktarım devam eder.",
+    value: 268,
+    total: 510,
+    format: "fraction",
+    progressText: "",
+};
+exports.default = {
+    title: "Components/LoadingBar",
+    component: function (props) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { width: 920 } }, { children: (0, jsx_runtime_1.jsx)(LoadingBar_1.default, __assign({}, props)) }))); },
+    tags: ["autodocs"],
+    argTypes: {
+        title: { control: "text" },
+        description: { control: "text" },
+        value: { control: "number" },
+        total: { control: "number" },
+        format: { control: "select", options: props_1.formats },
+        progressText: { control: "text" },
+    },
+};
+exports.Default = {
+    args: __assign({}, baseArgs),
+};
+exports.Percent = {
+    args: __assign(__assign({}, baseArgs), { value: 20, total: 100, format: "percent" }),
+};
+exports.WithoutDescription = {
+    args: __assign(__assign({}, baseArgs), { description: "" }),
+};
+exports.CustomProgressText = {
+    args: __assign(__assign({}, baseArgs), { progressText: "268 ürün" }),
+};
+exports.TitleOnly = {
+    args: __assign(__assign({}, baseArgs), { description: "", value: 0, total: 100 }),
+};

package/dist/components/LoadingBar/utils/progress.d.ts

@@ -0,0 +1,5 @@
+export type LoadingBarFormat = "fraction" | "percent";
+export declare const getLoadingTotal: (total: number) => number;
+export declare const getLoadingProgress: (value: number, total: number) => number;
+export declare const getLoadingCurrent: (value: number, total: number) => number;
+export declare const formatLoadingValue: (value: number, total: number, format: LoadingBarFormat) => string;

package/dist/components/LoadingBar/utils/progress.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatLoadingValue = exports.getLoadingCurrent = exports.getLoadingProgress = exports.getLoadingTotal = void 0;
+var toFiniteNumber = function (value) { return (Number.isFinite(value) ? value : 0); };
+var getLoadingTotal = function (total) {
+    var safeTotal = toFiniteNumber(total);
+    return safeTotal > 0 ? safeTotal : 0;
+};
+exports.getLoadingTotal = getLoadingTotal;
+var getLoadingProgress = function (value, total) {
+    var safeTotal = (0, exports.getLoadingTotal)(total);
+    if (safeTotal === 0) {
+        return 0;
+    }
+    var ratio = (toFiniteNumber(value) / safeTotal) * 100;
+    return Math.min(100, Math.max(0, ratio));
+};
+exports.getLoadingProgress = getLoadingProgress;
+var getLoadingCurrent = function (value, total) {
+    var safeTotal = (0, exports.getLoadingTotal)(total);
+    if (safeTotal === 0) {
+        return 0;
+    }
+    return Math.min(safeTotal, Math.max(0, toFiniteNumber(value)));
+};
+exports.getLoadingCurrent = getLoadingCurrent;
+var formatLoadingValue = function (value, total, format) {
+    var safeTotal = (0, exports.getLoadingTotal)(total);
+    var safeValue = Math.max(0, toFiniteNumber(value));
+    if (format === "percent") {
+        return "%".concat(Math.round((0, exports.getLoadingProgress)(value, total)), " / %100");
+    }
+    return "".concat(safeValue, " / ").concat(safeTotal);
+};
+exports.formatLoadingValue = formatLoadingValue;

package/dist/components/QuantitySelector/QuantitySelector.js

@@ -26,6 +26,8 @@ var QuantitySelector = function (_a) {
         $hasDisableActions: hasDisableActions,
     };
     var decrementButton = hasRemove ? ((0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", disabled: hasLoading, onClick: onRemove }, styledProps, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "DeleteSmall" }) }))) : ((0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", disabled: hasLoading, onClick: onDecrement }, styledProps, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "NegativeSmall" }) })));
-    return ((0, jsx_runtime_1.jsxs)(QuantitySelector_styled_1.Container, { children: [label && (0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.Label, __assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)(QuantitySelector_styled_1.Controls, __assign({}, styledProps, { children: [!hasDisableActions && ((0, jsx_runtime_1.jsxs)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", disabled: hasLoading || hasError || hasDisableIncrement, onClick: onIncrement }, styledProps, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall" }), hasError && ((0, jsx_runtime_1.jsx)("div", { className: "popup", dangerouslySetInnerHTML: { __html: errorText } }))] }))), (0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.QuantityValue, __assign({}, styledProps, { children: hasLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) : quantity })), !hasDisableActions && decrementButton] }))] }));
+    var incrementButton = ((0, jsx_runtime_1.jsxs)(QuantitySelector_styled_1.SelectorButton, __assign({ type: "button", disabled: hasLoading || hasError || hasDisableIncrement, onClick: onIncrement }, styledProps, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusSmall" }), hasError && ((0, jsx_runtime_1.jsx)("div", { className: "popup", dangerouslySetInnerHTML: { __html: errorText } }))] })));
+    var isHorizontal = orientation === 'horizontal';
+    return ((0, jsx_runtime_1.jsxs)(QuantitySelector_styled_1.Container, { children: [label && (0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.Label, __assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)(QuantitySelector_styled_1.Controls, __assign({}, styledProps, { children: [!hasDisableActions && (isHorizontal ? decrementButton : incrementButton), (0, jsx_runtime_1.jsx)(QuantitySelector_styled_1.QuantityValue, __assign({}, styledProps, { children: hasLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) : quantity })), !hasDisableActions && (isHorizontal ? incrementButton : decrementButton)] }))] }));
 };
 exports.default = QuantitySelector;

package/dist/components/QuantitySelector/QuantitySelector.test.js

@@ -84,6 +84,27 @@ describe('QuantitySelector', function () {
             }
         });
     }); });
+    it('places decrement before increment when horizontal', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onIncrement, onDecrement, _a, first, second;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    onIncrement = jest.fn();
+                    onDecrement = jest.fn();
+                    renderSelector({ orientation: 'horizontal', onIncrement: onIncrement, onDecrement: onDecrement });
+                    _a = react_1.screen.getAllByRole('button'), first = _a[0], second = _a[1];
+                    return [4 /*yield*/, user_event_1.default.click(first)];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, user_event_1.default.click(second)];
+                case 2:
+                    _b.sent();
+                    expect(onDecrement).toHaveBeenCalledTimes(1);
+                    expect(onIncrement).toHaveBeenCalledTimes(1);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     it('does not call onIncrement when increment is disabled', function () { return __awaiter(void 0, void 0, void 0, function () {
         var onIncrement;
         return __generator(this, function (_a) {

package/dist/index.d.ts

@@ -66,4 +66,5 @@ import Tag from "./components/Tag";
 import TagInput from "./components/TagInput";
 import RichTextEditor from "./components/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 };
+import LoadingBar from "./components/LoadingBar";
+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, LoadingBar };

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.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;
+exports.LoadingBar = 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; } });
@@ -143,3 +143,5 @@ var RichTextEditor_1 = __importDefault(require("./components/RichTextEditor"));
 exports.RichTextEditor = RichTextEditor_1.default;
 var ColorCard_1 = __importDefault(require("./components/ColorCard"));
 exports.ColorCard = ColorCard_1.default;
+var LoadingBar_1 = __importDefault(require("./components/LoadingBar"));
+exports.LoadingBar = LoadingBar_1.default;

package/package.json

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