krl-alfred 2.20.1 → 2.20.2

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

@@ -1,7 +1,7 @@
 import React from "react";
 declare const _default: {
     title: string;
-    component: ({ title, headerButtonText, hasHeaderDropdown, list, hasBadge, badgeText, hasHeader, hasRounded, hasBorder, headerImage, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerButtonAction, customColumnSpan }: import("../props").DescriptionCard) => React.JSX.Element;
+    component: ({ title, headerButtonText, hasHeaderDropdown, list, hasBadge, badgeText, hasHeader, hasHeaderBackground, hasHeaderBorder, hasRounded, hasBorder, headerImage, dropdownList, dropdownWidth, accordionList, boxSize, hasHeaderButton, headerButtonWidth, hasHeaderPrimaryButton, headerPrimaryButtonAction, headerPrimaryButtonText, headerPrimaryButtonIcon, headerPrimaryButtonSize, content, headerButtonAction, customColumnSpan }: import("../props").DescriptionCard) => React.JSX.Element;
     tags: string[];
     argTypes: {
         title: {
@@ -16,6 +16,12 @@ declare const _default: {
         hasHeader: {
             control: string;
         };
+        hasHeaderBackground: {
+            control: string;
+        };
+        hasHeaderBorder: {
+            control: string;
+        };
         hasRounded: {
             control: string;
         };
@@ -101,6 +107,72 @@ export declare const WithBadge: {
         headerImage: React.JSX.Element;
     };
 };
+export declare const WithHeaderBackground: {
+    args: {
+        hasHeaderBackground: boolean;
+        title: string;
+        hasBadge: boolean;
+        badgeText: string;
+        hasHeaderDropdown: boolean;
+        headerButtonText: string;
+        list: {
+            display: string;
+            title: string;
+        }[];
+        hasHeader: boolean;
+        hasRounded: boolean;
+        hasBorder: boolean;
+        hasHeaderButton: boolean;
+        headerButtonWidth: any;
+        hasHeaderPrimaryButton: boolean;
+        headerPrimaryButtonText: string;
+        headerPrimaryButtonAction: () => void;
+        headerButtonAction: () => void;
+        boxSize: number;
+        customColumnSpan: {
+            0: number;
+        };
+        dropdownList: {
+            name: string;
+            component: ({ children }: any) => React.JSX.Element;
+        }[];
+        dropdownWidth: string;
+        headerImage: React.JSX.Element;
+    };
+};
+export declare const WithoutHeaderBorder: {
+    args: {
+        hasHeaderBorder: boolean;
+        title: string;
+        hasBadge: boolean;
+        badgeText: string;
+        hasHeaderDropdown: boolean;
+        headerButtonText: string;
+        list: {
+            display: string;
+            title: string;
+        }[];
+        hasHeader: boolean;
+        hasRounded: boolean;
+        hasBorder: boolean;
+        hasHeaderButton: boolean;
+        headerButtonWidth: any;
+        hasHeaderPrimaryButton: boolean;
+        headerPrimaryButtonText: string;
+        headerPrimaryButtonAction: () => void;
+        headerButtonAction: () => void;
+        boxSize: number;
+        customColumnSpan: {
+            0: number;
+        };
+        dropdownList: {
+            name: string;
+            component: ({ children }: any) => React.JSX.Element;
+        }[];
+        dropdownWidth: string;
+        headerImage: React.JSX.Element;
+    };
+};
 export declare const WithHeaderButton: {
     args: {
         hasHeaderButton: boolean;
@@ -458,3 +530,23 @@ export declare const HasAccordion: {
         dropdownWidth: string;
     };
 };
+export declare const WithContent: {
+    args: {
+        title: string;
+        hasBadge: boolean;
+        badgeText: string;
+        hasHeader: boolean;
+        hasRounded: boolean;
+        hasBorder: boolean;
+        hasHeaderPrimaryButton: boolean;
+        headerPrimaryButtonText: string;
+        headerPrimaryButtonAction: () => void;
+        headerImage: any;
+        list: any[];
+        content: React.JSX.Element;
+    };
+    decorators: ((Story: any) => React.JSX.Element)[];
+};
+export declare const SubscriptionRules: {
+    render: () => React.JSX.Element;
+};

package/dist/components/DescriptionCard/stories/DescriptionCard.stories.js

@@ -1,4 +1,8 @@
 "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 __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -14,8 +18,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HasAccordion = exports.CustomColumnSpan = exports.WithoutHeaderImage = exports.EmptyList = exports.MinimalList = exports.WithoutRounded = exports.WithoutBorder = exports.WithoutHeader = exports.WithHeaderDropdown = exports.WithHeaderPrimaryButton = exports.WithHeaderButton = exports.WithBadge = exports.Default = void 0;
+exports.SubscriptionRules = exports.WithContent = exports.HasAccordion = exports.CustomColumnSpan = exports.WithoutHeaderImage = exports.EmptyList = exports.MinimalList = exports.WithoutRounded = exports.WithoutBorder = exports.WithoutHeader = exports.WithHeaderDropdown = exports.WithHeaderPrimaryButton = exports.WithHeaderButton = exports.WithoutHeaderBorder = exports.WithHeaderBackground = exports.WithBadge = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
 var DescriptionCard_1 = __importDefault(require("../DescriptionCard"));
 var descriptionList_json_1 = __importDefault(require("./../../../jsons/descriptionList.json"));
 var defaultHeaderImage = (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" });
@@ -60,6 +65,8 @@ exports.default = {
         hasBadge: { control: 'boolean' },
         badgeText: { control: 'text' },
         hasHeader: { control: 'boolean' },
+        hasHeaderBackground: { control: 'boolean' },
+        hasHeaderBorder: { control: 'boolean' },
         hasRounded: { control: 'boolean' },
         hasBorder: { control: 'boolean' },
         hasHeaderButton: { control: 'boolean' },
@@ -74,6 +81,12 @@ exports.Default = {
 exports.WithBadge = {
     args: __assign(__assign({}, defaultArgs), { hasBadge: true, badgeText: "Yeni" }),
 };
+exports.WithHeaderBackground = {
+    args: __assign(__assign({}, defaultArgs), { hasHeaderBackground: true }),
+};
+exports.WithoutHeaderBorder = {
+    args: __assign(__assign({}, defaultArgs), { hasHeaderBorder: false }),
+};
 exports.WithHeaderButton = {
     args: __assign(__assign({}, defaultArgs), { hasHeaderButton: true, headerButtonText: "Seçenekler" }),
 };
@@ -150,3 +163,32 @@ exports.HasAccordion = {
             }
         ], headerImage: (0, jsx_runtime_1.jsx)("img", { src: "https://kiralarsin.s3.eu-central-1.amazonaws.com/products/4MOMSMAMAROOANAKUC_1.jpg", alt: "test" }) }),
 };
+var SubscriptionRuleContentWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: block;\n"], ["\n    display: block;\n"])));
+var SubscriptionRuleDescription = styled_components_1.default.p(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0;\n    font: var(--body-medium-14-17);\n    color: var(--dark-opacity-75);\n"], ["\n    margin: 0;\n    font: var(--body-medium-14-17);\n    color: var(--dark-opacity-75);\n"])));
+var SubscriptionRuleDivider = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-bottom: 1px solid var(--dark-opacity-10);\n    margin: 1rem 0;\n"], ["\n    border-bottom: 1px solid var(--dark-opacity-10);\n    margin: 1rem 0;\n"])));
+var SubscriptionRuleMeta = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 1.5rem;\n"], ["\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 1.5rem;\n"])));
+var SubscriptionRuleMetaItem = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font: var(--body-medium-14-17);\n    color: var(--dark-opacity-75);\n"], ["\n    font: var(--body-medium-14-17);\n    color: var(--dark-opacity-75);\n"])));
+var subscriptionRuleContent = function (description, meta) { return ((0, jsx_runtime_1.jsxs)(SubscriptionRuleContentWrapper, { children: [(0, jsx_runtime_1.jsx)(SubscriptionRuleDescription, { children: description }), (0, jsx_runtime_1.jsx)(SubscriptionRuleDivider, {}), (0, jsx_runtime_1.jsx)(SubscriptionRuleMeta, { children: meta.map(function (item) { return ((0, jsx_runtime_1.jsx)(SubscriptionRuleMetaItem, { children: item }, item)); }) })] })); };
+exports.WithContent = {
+    args: {
+        title: "Standart esnek",
+        hasBadge: true,
+        badgeText: "Esnek",
+        hasHeader: true,
+        hasRounded: true,
+        hasBorder: true,
+        hasHeaderPrimaryButton: true,
+        headerPrimaryButtonText: "Düzenle",
+        headerPrimaryButtonAction: function () { return console.log("edit clicked"); },
+        headerImage: null,
+        list: [],
+        content: subscriptionRuleContent("Çekirdek kahve ürünleri için varsayılan abonelik kuralı. Müşteriler istedikleri zaman aboneliklerini duraklatabilir veya iptal edebilir.", ["5 Ürün kullanıyor", "32 Aktif abone", "Son güncelleme: iki hafta önce"]),
+    },
+    decorators: [
+        function (Story) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "900px", width: "100%" } }, { children: (0, jsx_runtime_1.jsx)(Story, {}) }))); },
+    ],
+};
+exports.SubscriptionRules = {
+    render: function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "900px", width: "100%" } }, { children: [(0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "Standart esnek", hasBadge: true, badgeText: "Esnek", hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderPrimaryButton: true, headerPrimaryButtonText: "D\u00FCzenle", headerPrimaryButtonAction: function () { return console.log("edit clicked"); }, list: [], content: subscriptionRuleContent("Çekirdek kahve ürünleri için varsayılan abonelik kuralı. Müşteriler istedikleri zaman aboneliklerini duraklatabilir veya iptal edebilir.", ["5 Ürün kullanıyor", "32 Aktif abone", "Son güncelleme: iki hafta önce"]) }), (0, jsx_runtime_1.jsx)(DescriptionCard_1.default, { title: "Standart Taahh\u00FCtl\u00FC", hasBadge: true, badgeText: "Taahh\u00FCtl\u00FC", hasHeader: true, hasRounded: true, hasBorder: true, hasHeaderPrimaryButton: true, headerPrimaryButtonText: "D\u00FCzenle", headerPrimaryButtonAction: function () { return console.log("edit clicked"); }, list: [], content: subscriptionRuleContent("Çekirdek kahve ürünleri için taahhütlü abonelik kuralı. Müşteriler belirlenen süre boyunca aboneliklerini devam ettirmekle yükümlüdür.", ["3 Ürün kullanıyor", "18 Aktif abone", "Son güncelleme: bir hafta önce"]) })] }))); },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/InfoBox/InfoBox.js

@@ -55,7 +55,7 @@ var InfoBox = function (_a) {
                 }, false);
             }
         });
-    }, []);
+    }, [description]);
     return ((0, jsx_runtime_1.jsxs)(InfoBox_styled_1.InfoBoxStyled, __assign({ onClick: onClick, "$radius": radius, "$variant": variant, "$hasLink": !!onClick, "$size": size }, { children: [hasIcon && ((0, jsx_runtime_1.jsx)(InfoBox_styled_1.IconWrapper, __assign({ "$variant": variant }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: variant === "danger" ? "Danger" : icon }) }))), (0, jsx_runtime_1.jsxs)(InfoBox_styled_1.TextWrapper, { children: [title && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Title, { dangerouslySetInnerHTML: { __html: title } }), description && (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Description, __assign({ "$size": size, ref: descriptionRef }, { children: description })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.AlertStyled, __assign({ "$visible": alert, "$alertLeft": alertLeft, "$alertTop": alertTop }, { children: t('copied') })), (0, jsx_runtime_1.jsx)(InfoBox_styled_1.Input, { ref: inputRef, id: "infoBoxInput" })] }), !!onClick && ((0, jsx_runtime_1.jsx)(InfoBox_styled_1.LinkIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowRightBig" }) }))] })));
 };
 exports.default = InfoBox;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 export declare const sizes: string[];
 export declare const variants: string[];
 export declare const iconNames: string[];
@@ -27,5 +27,5 @@ export interface AlertProps {
     $visible?: boolean;
 }
 export declare const InfoBoxDefault: InfoBox;
-export type InfoBoxProps = typeof InfoBoxDefault;
+export type InfoBoxProps = InfoBox;
 export {};

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

@@ -37,14 +37,6 @@ export declare const Default: {
         onClick: () => void;
     };
 };
-export declare const WithoutIcon: {
-    args: {
-        hasIcon: boolean;
-        title: string;
-        description: string;
-        onClick: () => void;
-    };
-};
 export declare const Primary: {
     args: {
         variant: string;
@@ -77,6 +69,14 @@ export declare const Secondary: {
         description: string;
     };
 };
+export declare const WithoutIcon: {
+    args: {
+        hasIcon: boolean;
+        title: string;
+        description: string;
+        onClick: () => void;
+    };
+};
 export declare const Small: {
     args: {
         size: string;
@@ -152,6 +152,13 @@ export declare const SimpleDescription: {
         onClick: () => void;
     };
 };
+export declare const ReactNodeDescription: {
+    args: {
+        title: string;
+        description: React.JSX.Element;
+        onClick: any;
+    };
+};
 export declare const WithCustomRadius: {
     args: {
         radius: string;

package/dist/components/InfoBox/stories/InfoBox.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.WithCustomRadius = exports.SimpleDescription = exports.Minimal = exports.WithoutDescription = exports.WithoutTitle = exports.WithoutOnClick = exports.AllSizes = exports.AllVariants = exports.Large = exports.Medium = exports.Small = exports.Secondary = exports.Warning = exports.Danger = exports.Primary = exports.WithoutIcon = exports.Default = void 0;
+exports.WithCustomRadius = exports.ReactNodeDescription = exports.SimpleDescription = exports.Minimal = exports.WithoutDescription = exports.WithoutTitle = exports.WithoutOnClick = exports.AllSizes = exports.AllVariants = exports.Large = exports.Medium = exports.Small = exports.WithoutIcon = exports.Secondary = exports.Warning = exports.Danger = exports.Primary = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var InfoBox_1 = __importDefault(require("../InfoBox"));
 var props_1 = require("../props");
@@ -41,9 +41,6 @@ exports.default = {
 exports.Default = {
     args: defaultArgs,
 };
-exports.WithoutIcon = {
-    args: __assign(__assign({}, defaultArgs), { hasIcon: false }),
-};
 // Variant stories
 exports.Primary = {
     args: __assign(__assign({}, defaultArgs), { variant: 'primary' }),
@@ -57,6 +54,9 @@ exports.Warning = {
 exports.Secondary = {
     args: __assign(__assign({}, defaultArgs), { variant: 'secondary', onClick: undefined }),
 };
+exports.WithoutIcon = {
+    args: __assign(__assign({}, defaultArgs), { hasIcon: false, title: "İkon olmadan" }),
+};
 // Size stories
 exports.Small = {
     args: __assign(__assign({}, defaultArgs), { size: 'small' }),
@@ -92,6 +92,9 @@ exports.Minimal = {
 exports.SimpleDescription = {
     args: __assign(__assign({}, defaultArgs), { title: "Basit bilgi", description: "Bu sadece düz metin açıklamasıdır. HTML veya kopyalanabilir alan içermez." }),
 };
+exports.ReactNodeDescription = {
+    args: __assign(__assign({}, defaultArgs), { title: "React node açıklama", description: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { children: "\u0130ade g\u00FCn\u00FCn kiralama biti\u015F g\u00FCn\u00FCnd\u00FCr." }), (0, jsx_runtime_1.jsxs)("p", { children: ["Detaylar i\u00E7in ", (0, jsx_runtime_1.jsx)("b", { children: "info@kiralarsin.com" }), " adresine yazabilirsin."] })] })), onClick: undefined }),
+};
 exports.WithCustomRadius = {
     args: __assign(__assign({}, defaultArgs), { radius: "16px" }),
 };

package/dist/components/RadioGroup/RadioGroup.js

@@ -30,7 +30,7 @@ var RadioGroup = function (_a) {
     return ((0, jsx_runtime_1.jsxs)(RadioGroup_styled_1.RadioGroupStyled, { children: [label && ((0, jsx_runtime_1.jsx)(RadioGroup_styled_1.GroupLabelWrapper, __assign({ "$emphasizedLabel": hasInfo }, { children: (0, jsx_runtime_1.jsx)(RadioGroup_styled_1.GroupLabel, __assign({ "$emphasizedLabel": hasInfo }, { children: label })) }))), hasInfo && infoText && ((0, jsx_runtime_1.jsxs)(RadioGroup_styled_1.InfoArea, { children: [(0, jsx_runtime_1.jsx)(RadioGroup_styled_1.InfoIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: (infoIcon || props_1.RadioGroupDefault.infoIcon), width: "24", height: "24", hasWrapper: false }) }), (0, jsx_runtime_1.jsx)(RadioGroup_styled_1.InfoText, { children: infoText })] })), (0, jsx_runtime_1.jsx)(RadioGroup_styled_1.RadioButtonsWrapper, __assign({ "$layout": layout, "$gap": gap, "$isFilled": isFilled, "$gridColumnLength": gridColumnLength, "$isHorizontalOnMobile": isHorizontalOnMobile }, { children: options.map(function (option, index) {
                     var radioId = option.id || "".concat(name, "_").concat(index);
                     var isChecked = value === option.value;
-                    return ((0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: radioId, name: name, value: option.value, checked: isChecked, onChange: function (e) { return handleRadioChange(option.value); }, label: option.label, description: option.description, image: option.image, disabled: disabled || option.disabled, alignment: option.alignment, isWrapText: option.isWrapText, size: size, textSize: textSize, layout: radioLayout, valid: valid, labelOffset: labelOffset, color: option.color || color, verticalAlign: verticalAlign, readOnly: readOnly, showIndicator: showIndicator, titleBadgePosition: option.titleBadgePosition, hasTitleBadge: option.hasTitleBadge, titleBadgeLayout: option.titleBadgeLayout, titleBadgeText: option.titleBadgeText }, radioId));
+                    return ((0, jsx_runtime_1.jsx)(RadioButton_1.default, { id: radioId, name: name, value: option.value, checked: isChecked, onChange: function (e) { return handleRadioChange(option.value); }, label: option.label, description: option.description, image: option.image, disabled: disabled || option.disabled, alignment: option.alignment, isWrapText: option.isWrapText, size: size, textSize: textSize, layout: radioLayout, valid: valid, labelOffset: labelOffset, color: option.color || color, verticalAlign: verticalAlign, readOnly: readOnly, labelSm: option.labelSm, hasBadge: option.hasBadge, badgeText: option.badgeText, badgeVariant: option.badgeVariant, price: option.price, priceDesc: option.priceDesc, hasTitleBadge: option.hasTitleBadge, titleBadgeLayout: option.titleBadgeLayout, titleBadgeText: option.titleBadgeText, hasPriceBadge: option.hasPriceBadge, priceBadgeLayout: option.priceBadgeLayout, priceBadgeText: option.priceBadgeText, iconName: option.iconName, iconColor: option.iconColor, content: option.content, showIndicator: showIndicator, titleBadgePosition: option.titleBadgePosition }, radioId));
                 }) }))] }));
 };
 exports.default = RadioGroup;

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { variants } from "../Badges/props";
 export declare const layouts: string[];
 export declare const sizes: string[];
 export declare const textSizes: string[];
@@ -20,10 +19,22 @@ export interface RadioOption {
     color?: string;
     alignment?: ALIGNMENTS;
     isWrapText?: boolean;
-    titleBadgePosition?: "inline" | "below";
+    labelSm?: string;
+    hasBadge?: boolean;
+    badgeText?: string;
+    badgeVariant?: string;
+    price?: string;
+    priceDesc?: string;
     hasTitleBadge?: boolean;
-    titleBadgeLayout?: (typeof variants)[number];
+    titleBadgeLayout?: string;
     titleBadgeText?: string;
+    hasPriceBadge?: boolean;
+    priceBadgeLayout?: string;
+    priceBadgeText?: string;
+    iconName?: string;
+    iconColor?: string;
+    content?: React.ReactNode;
+    titleBadgePosition?: "inline" | "below";
 }
 export interface RadioGroup {
     options?: RadioOption[];

package/dist/components/RadioGroup/props.js

@@ -4,7 +4,7 @@ exports.RadioGroupDefault = exports.alignments = exports.radioLayouts = exports.
 exports.layouts = ["vertical", "horizontal"];
 exports.sizes = ["small", "medium"];
 exports.textSizes = ["small", "medium", "large", "xlarge"];
-exports.radioLayouts = ["basic", "boxed", "boxedSm", "boxedMd", "horizontal", "color"];
+exports.radioLayouts = ["basic", "boxed", "boxedSm", "boxedMd", "boxedWithIcon", "horizontal", "color"];
 exports.alignments = ["vertical", "horizontal"];
 exports.RadioGroupDefault = {
     options: [],

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

@@ -328,3 +328,76 @@ export declare const WithDescriptions: {
         size: string;
     };
 };
+export declare const BoxedWithIconLayout: {
+    args: {
+        name: string;
+        label: string;
+        options: {
+            label: string;
+            value: string;
+            iconName: string;
+            iconColor: string;
+            content: React.JSX.Element;
+        }[];
+        value: string;
+        onChange: (value: any) => void;
+        layout: string;
+        radioLayout: string;
+        gap: string;
+    };
+    decorators: ((Story: any) => React.JSX.Element)[];
+};
+export declare const HorizontalInstallment: {
+    args: {
+        name: string;
+        label: string;
+        options: ({
+            label: string;
+            value: string;
+            description: string;
+            price: string;
+            priceDesc: string;
+            hasTitleBadge: boolean;
+            titleBadgeLayout: string;
+            titleBadgeText: string;
+            hasPriceBadge: boolean;
+            priceBadgeLayout: string;
+            priceBadgeText: string;
+            disabled?: undefined;
+        } | {
+            label: string;
+            value: string;
+            description: string;
+            price: string;
+            priceDesc: string;
+            hasTitleBadge: boolean;
+            hasPriceBadge: boolean;
+            titleBadgeLayout?: undefined;
+            titleBadgeText?: undefined;
+            priceBadgeLayout?: undefined;
+            priceBadgeText?: undefined;
+            disabled?: undefined;
+        } | {
+            label: string;
+            value: string;
+            description: string;
+            price: string;
+            priceDesc: string;
+            hasTitleBadge: boolean;
+            titleBadgeLayout: string;
+            titleBadgeText: string;
+            hasPriceBadge: boolean;
+            priceBadgeLayout: string;
+            priceBadgeText: string;
+            disabled: boolean;
+        })[];
+        value: string;
+        onChange: (value: any) => void;
+        layout: string;
+        radioLayout: string;
+        gap: string;
+    };
+};
+export declare const AllRadioLayouts: {
+    render: () => React.JSX.Element;
+};

package/dist/components/RadioGroup/stories/RadioGroup.stories.js

@@ -14,10 +14,88 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithDescriptions = exports.WithDisabledOptions = exports.ColorPicker = exports.GridStackedOnMobile = exports.GridTwoColumns = exports.WithInfoArea = exports.BoxedMdWithoutIndicator = exports.BoxedMdFilled = exports.BoxedMdLayout = exports.BoxedSmFilled = exports.BoxedSmLayout = exports.BoxedLayout = exports.Horizontal = exports.VerticalHorizontalOnMobile = exports.WithoutIndicator = exports.Default = void 0;
+exports.AllRadioLayouts = exports.HorizontalInstallment = exports.BoxedWithIconLayout = exports.WithDescriptions = exports.WithDisabledOptions = exports.ColorPicker = exports.GridStackedOnMobile = exports.GridTwoColumns = exports.WithInfoArea = exports.BoxedMdWithoutIndicator = exports.BoxedMdFilled = exports.BoxedMdLayout = exports.BoxedSmFilled = exports.BoxedSmLayout = exports.BoxedLayout = exports.Horizontal = exports.VerticalHorizontalOnMobile = exports.WithoutIndicator = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var RadioGroup_1 = __importDefault(require("../RadioGroup"));
 var props_1 = require("../props");
+var onChange = function (value) { return console.log("Selected value:", value); };
+var basicOptions = [
+    { label: "Option 1", value: "option1", description: "Description 1" },
+    { label: "Option 2", value: "option2", description: "Description 2" },
+    { label: "Option 3", value: "option3", description: "Description 3" },
+];
+var boxedOptions = [
+    { label: "99.999,99 TL", labelSm: "/ay", description: "1 hafta", value: "weekly" },
+    { label: "199.999,99 TL", labelSm: "/ay", description: "1 ay", value: "monthly", hasBadge: true, badgeText: "Avantajlı", badgeVariant: "primary" },
+    { label: "299.999,99 TL", labelSm: "/ay", description: "3 ay", value: "quarterly" },
+];
+var boxedSmOptions = [
+    { label: "1.999,99 TL", value: "monthly", description: "12 ay" },
+    { label: "3.499,99 TL", value: "biannual", description: "6 ay" },
+    { label: "5.999,99 TL", value: "annual", description: "3 ay" },
+];
+var boxedWithIconOptions = [
+    {
+        label: "İş Bankası müşterisiyim",
+        value: "customer",
+        iconName: "ShieldDoneLg",
+        iconColor: "var(--green)",
+        content: ((0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsx)("li", { children: "\u0130\u015FCep'e giri\u015F yap" }), (0, jsx_runtime_1.jsx)("li", { children: "Mevduat hesab\u0131n\u0131 a\u00E7" }), (0, jsx_runtime_1.jsx)("li", { children: "\u0130\u015Flemine devam etmek i\u00E7in telefonuna gelen SMS ile devam et" })] })),
+    },
+    {
+        label: "İş Bankası müşterisi değilim",
+        value: "nonCustomer",
+        iconName: "UserPlusLg",
+        iconColor: "var(--yellow)",
+        content: ((0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsx)("li", { children: "\u00D6nce \u0130\u015FCep uygulamas\u0131n\u0131 indir" }), (0, jsx_runtime_1.jsx)("li", { children: "\u0130\u015F Bankas\u0131 m\u00FC\u015Fterisi ol ad\u0131m\u0131ndan m\u00FC\u015Fteri ol" }), (0, jsx_runtime_1.jsx)("li", { children: "M\u00FC\u015Fteri olduktan sonra \u0130\u015FCep'ten \u00E7\u0131k\u0131\u015F yap" })] })),
+    },
+];
+var horizontalOptions = [
+    {
+        label: "Taksitli Ödeme",
+        value: "installment",
+        description: "10 taksit seçeneği ile ödeme yapabilirsiniz",
+        price: "1.250 TL",
+        priceDesc: "12.500 TL",
+        hasTitleBadge: true,
+        titleBadgeLayout: "secondary",
+        titleBadgeText: "Peşin fiyatına",
+        hasPriceBadge: true,
+        priceBadgeLayout: "primary",
+        priceBadgeText: "Avantajlı",
+    },
+    {
+        label: "Tek Çekim",
+        value: "single",
+        description: "Tek seferde ödeme yapın",
+        price: "12.500 TL",
+        priceDesc: "12.500 TL",
+        hasTitleBadge: false,
+        hasPriceBadge: false,
+    },
+    {
+        label: "Taksitli Ödeme",
+        value: "disabled",
+        description: "Bu seçenek şu an kullanılamıyor",
+        price: "1.250 TL",
+        priceDesc: "12.500 TL",
+        hasTitleBadge: true,
+        titleBadgeLayout: "secondary",
+        titleBadgeText: "Peşin fiyatına",
+        hasPriceBadge: true,
+        priceBadgeLayout: "disabled",
+        priceBadgeText: "Satışta yok",
+        disabled: true,
+    },
+];
+var colorOptions = [
+    { value: "black", color: "#000000" },
+    { value: "white", color: "#FFFFFF" },
+    { value: "red", color: "#FF1F1F" },
+    { value: "blue", color: "#2563EB" },
+    { value: "green", color: "#16A34A" },
+    { value: "purple", color: "#9763F6" },
+];
 exports.default = {
     title: 'Components/RadioGroup',
     component: RadioGroup_1.default,
@@ -276,9 +354,39 @@ exports.WithDescriptions = {
             },
         ],
         value: "standard",
-        onChange: function (value) { return console.log("Selected value:", value); },
+        onChange: onChange,
         layout: "vertical",
         radioLayout: "horizontal",
         size: "small",
     },
 };
+exports.BoxedWithIconLayout = {
+    args: {
+        name: "boxedWithIconRadioGroup",
+        label: "Müşteri Tipi",
+        options: boxedWithIconOptions,
+        value: "customer",
+        onChange: onChange,
+        layout: "vertical",
+        radioLayout: "boxedWithIcon",
+        gap: "0.75rem",
+    },
+    decorators: [
+        function (Story) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "400px" } }, { children: (0, jsx_runtime_1.jsx)(Story, {}) }))); },
+    ],
+};
+exports.HorizontalInstallment = {
+    args: {
+        name: "horizontalInstallmentRadioGroup",
+        label: "Ödeme Seçenekleri",
+        options: horizontalOptions,
+        value: "installment",
+        onChange: onChange,
+        layout: "vertical",
+        radioLayout: "horizontal",
+        gap: "0.75rem",
+    },
+};
+exports.AllRadioLayouts = {
+    render: function () { return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", flexDirection: "column", gap: "2.5rem" } }, { children: [(0, jsx_runtime_1.jsx)(RadioGroup_1.default, { name: "allBasic", label: "Basic", options: basicOptions, value: "option1", onChange: onChange, radioLayout: "basic" }), (0, jsx_runtime_1.jsx)(RadioGroup_1.default, { name: "allBoxed", label: "Boxed", options: boxedOptions, value: "weekly", onChange: onChange, layout: "horizontal", radioLayout: "boxed", gap: "0.75rem" }), (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "179px" } }, { children: (0, jsx_runtime_1.jsx)(RadioGroup_1.default, { name: "allBoxedSm", label: "BoxedSm", options: boxedSmOptions, value: "monthly", onChange: onChange, layout: "vertical", radioLayout: "boxedSm", gap: "0.75rem" }) })), (0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "400px" } }, { children: (0, jsx_runtime_1.jsx)(RadioGroup_1.default, { name: "allBoxedWithIcon", label: "BoxedWithIcon", options: boxedWithIconOptions, value: "customer", onChange: onChange, layout: "vertical", radioLayout: "boxedWithIcon", gap: "0.75rem" }) })), (0, jsx_runtime_1.jsx)(RadioGroup_1.default, { name: "allHorizontal", label: "Horizontal", options: horizontalOptions, value: "installment", onChange: onChange, layout: "vertical", radioLayout: "horizontal", gap: "0.75rem" }), (0, jsx_runtime_1.jsx)(RadioGroup_1.default, { name: "allColor", label: "Color", options: colorOptions, value: "black", onChange: onChange, layout: "horizontal", radioLayout: "color", gap: "1rem" })] }))); },
+};

package/dist/components/Tabs/Tabs.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TabsProps } from "./props";
-declare const Tabs: ({ tabs, activeTab, defaultTab, size, hasAutoFlex, isHideTabHeaderOnMobile, onChange, }: TabsProps) => React.JSX.Element;
+declare const Tabs: ({ tabs, activeTab, defaultTab, size, hasAutoFlex, isHideTabHeaderOnMobile, tabButtonWidth, onChange, }: TabsProps) => React.JSX.Element;
 export default Tabs;

package/dist/components/Tabs/Tabs.js

@@ -17,15 +17,15 @@ var props_1 = require("./props");
 var Tabs_styled_1 = require("./Tabs.styled");
 var Tabs = function (_a) {
     var _b;
-    var _c = _a.tabs, tabs = _c === void 0 ? props_1.TabsDefault.tabs : _c, activeTab = _a.activeTab, defaultTab = _a.defaultTab, _d = _a.size, size = _d === void 0 ? props_1.TabsDefault.size : _d, _e = _a.hasAutoFlex, hasAutoFlex = _e === void 0 ? props_1.TabsDefault.hasAutoFlex : _e, _f = _a.isHideTabHeaderOnMobile, isHideTabHeaderOnMobile = _f === void 0 ? props_1.TabsDefault.isHideTabHeaderOnMobile : _f, onChange = _a.onChange;
-    var _g = (0, react_1.useState)(function () {
+    var _c = _a.tabs, tabs = _c === void 0 ? props_1.TabsDefault.tabs : _c, activeTab = _a.activeTab, defaultTab = _a.defaultTab, _d = _a.size, size = _d === void 0 ? props_1.TabsDefault.size : _d, _e = _a.hasAutoFlex, hasAutoFlex = _e === void 0 ? props_1.TabsDefault.hasAutoFlex : _e, _f = _a.isHideTabHeaderOnMobile, isHideTabHeaderOnMobile = _f === void 0 ? props_1.TabsDefault.isHideTabHeaderOnMobile : _f, _g = _a.tabButtonWidth, tabButtonWidth = _g === void 0 ? props_1.TabsDefault.tabButtonWidth : _g, onChange = _a.onChange;
+    var _h = (0, react_1.useState)(function () {
         var _a;
         if (activeTab)
             return activeTab;
         if (defaultTab)
             return defaultTab;
         return ((_a = tabs[0]) === null || _a === void 0 ? void 0 : _a.key) || '';
-    }), currentTab = _g[0], setCurrentTab = _g[1];
+    }), currentTab = _h[0], setCurrentTab = _h[1];
     var headerRef = (0, react_1.useRef)(null);
     // Sync with controlled activeTab prop
     (0, react_1.useEffect)(function () {
@@ -60,6 +60,6 @@ var Tabs = function (_a) {
         setCurrentTab(key);
     };
     var activeTabContent = (_b = tabs.find(function (tab) { return tab.key === currentTab; })) === null || _b === void 0 ? void 0 : _b.content;
-    return ((0, jsx_runtime_1.jsxs)(Tabs_styled_1.TabsStyled, { children: [(0, jsx_runtime_1.jsx)(Tabs_styled_1.TabHeaderStyled, __assign({ ref: headerRef, "$size": size, "$hasAutoFlex": hasAutoFlex, "$isHideTabHeaderOnMobile": isHideTabHeaderOnMobile }, { children: tabs.map(function (tab) { return ((0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemStyled, __assign({ "data-key": tab.key, "$size": size, "$isActive": currentTab === tab.key, "$isDisabled": tab.isDisabled, "$hasAutoFlex": hasAutoFlex }, { children: (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemTitleStyled, __assign({ "$size": size, "$isActive": currentTab === tab.key, "$hasAutoFlex": hasAutoFlex, onClick: function () { return !tab.isDisabled && handleTabChange(tab.key); } }, { children: tab.title })) }), tab.key)); }) })), (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemContentStyled, __assign({ "$size": size }, { children: activeTabContent }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Tabs_styled_1.TabsStyled, { children: [(0, jsx_runtime_1.jsx)(Tabs_styled_1.TabHeaderStyled, __assign({ ref: headerRef, "$size": size, "$hasAutoFlex": hasAutoFlex, "$isHideTabHeaderOnMobile": isHideTabHeaderOnMobile, "$tabButtonWidth": tabButtonWidth }, { children: tabs.map(function (tab) { return ((0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemStyled, __assign({ "data-key": tab.key, "$size": size, "$isActive": currentTab === tab.key, "$isDisabled": tab.isDisabled, "$hasAutoFlex": hasAutoFlex, "$tabButtonWidth": tabButtonWidth }, { children: (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemTitleStyled, __assign({ "$size": size, "$isActive": currentTab === tab.key, "$hasAutoFlex": hasAutoFlex, "$tabButtonWidth": tabButtonWidth, onClick: function () { return !tab.isDisabled && handleTabChange(tab.key); } }, { children: tab.title })) }), tab.key)); }) })), (0, jsx_runtime_1.jsx)(Tabs_styled_1.TabItemContentStyled, __assign({ "$size": size }, { children: activeTabContent }))] }));
 };
 exports.default = Tabs;

package/dist/components/Tabs/Tabs.styled.js

@@ -41,7 +41,7 @@ var getTabSize = function ($size) {
 };
 exports.TabsStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 exports.TabHeaderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    column-gap: ", ";\n    ", "\n    ", "\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    column-gap: ", ";\n    ", "\n    ", "\n"])), function (props) { return props.$hasAutoFlex ? "center" : "flex-start"; }, function (props) { return getTabSize(props.$size).columnGap; }, function (props) { return !props.$hasAutoFlex && "\n      scroll-snap-type: x proximity;\n      -webkit-overflow-scrolling: touch;\n      scrollbar-width: none;\n      overflow-x: scroll;\n      padding: 2rem;\n      margin: -2rem;\n      @media only screen and (".concat(devices_1.devices.xl, ") {\n        padding: 2rem 1rem;\n        margin: -2rem -1rem;\n        column-gap: ").concat(getTabSize(props.$size).columnGapSm, ";\n      }\n    "); }, function (props) { return props.$isHideTabHeaderOnMobile ? "\n        @media only screen and (".concat(devices_1.devices.lg, ") {\n            display: none;\n        }\n    ") : ""; });
-exports.TabItemStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex: ", ";\n    ", "\n"], ["\n    flex: ", ";\n    ", "\n"])), function (props) { return props.$hasAutoFlex ? "1 0" : "auto 0"; }, function (props) { return props.$isDisabled ? "\n        cursor: no-drop;\n        pointer-events: none;\n        user-select: none;\n    " : ""; });
+exports.TabItemStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex: ", ";\n    width: ", ";\n    ", "\n"], ["\n    flex: ", ";\n    width: ", ";\n    ", "\n"])), function (props) { return props.$tabButtonWidth ? "0 0 ".concat(props.$tabButtonWidth, "px") : props.$hasAutoFlex ? "1 0" : "auto 0"; }, function (props) { return props.$tabButtonWidth ? "".concat(props.$tabButtonWidth, "px") : "auto"; }, function (props) { return props.$isDisabled ? "\n        cursor: no-drop;\n        pointer-events: none;\n        user-select: none;\n    " : ""; });
 exports.TabItemTitleStyled = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background: transparent;\n    color: ", ";\n    border: 1px solid ", ";\n    width: 100%;\n    box-shadow: 0 6px 30px 0 ", ";\n    border-radius: 0.5rem;\n    transition: all .2s ease;\n    padding: ", ";\n    height: ", ";\n    cursor: pointer;\n    font: var(--body-semi-bold-14-17);\n    white-space: ", ";\n    outline: none !important;\n    &:hover {\n        color: var(--dark);\n        border: 1px solid var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    }\n"], ["\n    background: transparent;\n    color: ", ";\n    border: 1px solid ", ";\n    width: 100%;\n    box-shadow: 0 6px 30px 0 ", ";\n    border-radius: 0.5rem;\n    transition: all .2s ease;\n    padding: ", ";\n    height: ", ";\n    cursor: pointer;\n    font: var(--body-semi-bold-14-17);\n    white-space: ", ";\n    outline: none !important;\n    &:hover {\n        color: var(--dark);\n        border: 1px solid var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n    }\n"])), function (props) { return props.$isActive ? "var(--dark)" : "var(--dark-opacity-75)"; }, function (props) { return props.$isActive ? "var(--grey-10)" : "transparent"; }, function (props) { return props.$isActive ? "var(--box-shadow-color)" : "transparent"; }, function (props) { return props.$hasAutoFlex ? "0" : getTabSize(props.$size).padding; }, function (props) { return getTabSize(props.$size).height; }, function (props) { return props.$hasAutoFlex ? "pre-wrap" : "nowrap"; });
 exports.TabItemContentStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    padding-top: ", ";\n    @media only screen and (", ") {\n        padding-top: ", ";\n    }\n"], ["\n    padding-top: ", ";\n    @media only screen and (", ") {\n        padding-top: ", ";\n    }\n"])), function (props) { return getTabSize(props.$size).paddingTop; }, devices_1.devices.lg, function (props) { return getTabSize(props.$size).paddingTop; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -14,17 +14,20 @@ export interface TabsProps {
     size?: SIZES;
     hasAutoFlex?: boolean;
     isHideTabHeaderOnMobile?: boolean;
+    tabButtonWidth?: number;
     onChange?: (key: string) => void;
 }
 export interface TabStyledProps {
     $hasAutoFlex?: boolean;
     $isHideTabHeaderOnMobile?: boolean;
+    $tabButtonWidth?: number;
     $size?: SIZES;
 }
 export interface TabItemStyledProps {
     $isActive?: boolean;
     $isDisabled?: boolean;
     $hasAutoFlex?: boolean;
+    $tabButtonWidth?: number;
     $size?: SIZES;
 }
 export declare const TabsDefault: TabsProps;