krl-alfred 2.20.0 → 2.20.2

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

@@ -20,7 +20,7 @@ declare const _default: {
             control: string;
         };
         period: {
-            control: string;
+            control: boolean;
         };
         image: {
             control: string;
@@ -76,6 +76,9 @@ declare const _default: {
         hasButtonRemoveMdDown: {
             control: string;
         };
+        hasDescriptionHideMdDown: {
+            control: string;
+        };
         hasTooltip: {
             control: string;
         };
@@ -154,6 +157,39 @@ export declare const WithDescription: {
         isDisabled: boolean;
     };
 };
+export declare const DescriptionHideMdDown: {
+    args: {
+        description: string;
+        hasDescriptionHideMdDown: boolean;
+        title: string;
+        price: string;
+        priceSm: string;
+        slug: string;
+        period: string;
+        image: string;
+        component: ({ children }: {
+            children: any;
+        }) => React.JSX.Element;
+        hasImageBorder: boolean;
+        imageWidth: string;
+        imageHeight: string;
+        imageInnerWidth: number;
+        imageInnerHeight: number;
+        infoPosition: string;
+        hasButton: boolean;
+        buttonVariant: string;
+        buttonText: string;
+        hasBorder: boolean;
+        hasBordeHover: boolean;
+        isSelected: boolean;
+        hasTitleWrap: boolean;
+        hasButtonRemoveMdDown: boolean;
+        hasTooltip: boolean;
+        tooltipSelectorTitle: string;
+        tooltipDescription: string;
+        isDisabled: boolean;
+    };
+};
 export declare const WithButton: {
     args: {
         hasButton: boolean;
@@ -216,6 +252,37 @@ export declare const RightAlignedInfo: {
         isDisabled: boolean;
     };
 };
+export declare const CustomPeriod: {
+    args: {
+        infoPosition: string;
+        period: React.JSX.Element;
+        title: string;
+        price: string;
+        priceSm: string;
+        slug: string;
+        image: string;
+        component: ({ children }: {
+            children: any;
+        }) => React.JSX.Element;
+        hasImageBorder: boolean;
+        imageWidth: string;
+        imageHeight: string;
+        imageInnerWidth: number;
+        imageInnerHeight: number;
+        hasButton: boolean;
+        buttonVariant: string;
+        buttonText: string;
+        hasBorder: boolean;
+        hasBordeHover: boolean;
+        isSelected: boolean;
+        hasTitleWrap: boolean;
+        hasButtonRemoveMdDown: boolean;
+        hasTooltip: boolean;
+        tooltipSelectorTitle: string;
+        tooltipDescription: string;
+        isDisabled: boolean;
+    };
+};
 export declare const WithImageBorder: {
     args: {
         hasImageBorder: boolean;

package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.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.WithBorderHover = exports.WithImageRounded = exports.WithoutBorder = exports.WithoutTooltip = exports.Selected = exports.Disabled = exports.WithImageBorder = exports.RightAlignedInfo = exports.WithButton = exports.WithDescription = exports.Default = void 0;
+exports.WithBorderHover = exports.WithImageRounded = exports.WithoutBorder = exports.WithoutTooltip = exports.Selected = exports.Disabled = exports.WithImageBorder = exports.CustomPeriod = exports.RightAlignedInfo = exports.WithButton = exports.DescriptionHideMdDown = exports.WithDescription = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var ProductCardHorizontalSm_1 = __importDefault(require("../ProductCardHorizontalSm"));
 var props_1 = require("../../Button/props");
@@ -28,7 +28,7 @@ exports.default = {
         price: { control: "text" },
         priceSm: { control: "text" },
         slug: { control: "text" },
-        period: { control: "text" },
+        period: { control: false },
         image: { control: "text" },
         component: { control: "none" },
         imageComponent: {
@@ -55,6 +55,7 @@ exports.default = {
         isSelected: { control: "boolean" },
         hasTitleWrap: { control: "boolean" },
         hasButtonRemoveMdDown: { control: "boolean" },
+        hasDescriptionHideMdDown: { control: "boolean" },
         hasTooltip: { control: "boolean" },
         tooltipSelectorTitle: { control: "text" },
         tooltipDescription: { control: "text" },
@@ -97,12 +98,18 @@ exports.Default = {
 exports.WithDescription = {
     args: __assign(__assign({}, exports.Default.args), { description: "İki ayda bir gönderim" }),
 };
+exports.DescriptionHideMdDown = {
+    args: __assign(__assign({}, exports.Default.args), { description: "İki ayda bir gönderim", hasDescriptionHideMdDown: true }),
+};
 exports.WithButton = {
     args: __assign(__assign({}, exports.Default.args), { hasButton: true, buttonText: "Kirala", buttonVariant: "secondary" }),
 };
 exports.RightAlignedInfo = {
     args: __assign(__assign({}, exports.Default.args), { infoPosition: "right" }),
 };
+exports.CustomPeriod = {
+    args: __assign(__assign({}, exports.Default.args), { infoPosition: "right", period: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: "period-mobile" }, { children: "/ay" })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "period-desktop" }, { children: "/hafta" }))] })) }),
+};
 exports.WithImageBorder = {
     args: __assign(__assign({}, exports.Default.args), { hasImageBorder: true }),
 };

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { RadioGroupProps } from "./props";
-declare const RadioGroup: ({ options, value, onChange, name, label, disabled, size, textSize, layout, radioLayout, valid, labelOffset, color, verticalAlign, readOnly, gap, isFilled, showIndicator, hasInfo, infoText, infoIcon, gridColumnLength }: RadioGroupProps) => React.JSX.Element;
+declare const RadioGroup: ({ options, value, onChange, name, label, disabled, size, textSize, layout, radioLayout, valid, labelOffset, color, verticalAlign, readOnly, gap, isFilled, showIndicator, hasInfo, infoText, infoIcon, gridColumnLength, isHorizontalOnMobile, }: RadioGroupProps) => React.JSX.Element;
 export default RadioGroup;

package/dist/components/RadioGroup/RadioGroup.js

@@ -21,16 +21,16 @@ var RadioGroup_styled_1 = require("./RadioGroup.styled");
 var RadioButton_1 = __importDefault(require("../RadioButton"));
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var RadioGroup = function (_a) {
-    var _b = _a.options, options = _b === void 0 ? props_1.RadioGroupDefault.options : _b, _c = _a.value, value = _c === void 0 ? props_1.RadioGroupDefault.value : _c, _d = _a.onChange, onChange = _d === void 0 ? props_1.RadioGroupDefault.onChange : _d, _e = _a.name, name = _e === void 0 ? props_1.RadioGroupDefault.name : _e, _f = _a.label, label = _f === void 0 ? props_1.RadioGroupDefault.label : _f, _g = _a.disabled, disabled = _g === void 0 ? props_1.RadioGroupDefault.disabled : _g, _h = _a.size, size = _h === void 0 ? props_1.RadioGroupDefault.size : _h, _j = _a.textSize, textSize = _j === void 0 ? props_1.RadioGroupDefault.textSize : _j, _k = _a.layout, layout = _k === void 0 ? props_1.RadioGroupDefault.layout : _k, _l = _a.radioLayout, radioLayout = _l === void 0 ? props_1.RadioGroupDefault.radioLayout : _l, _m = _a.valid, valid = _m === void 0 ? props_1.RadioGroupDefault.valid : _m, _o = _a.labelOffset, labelOffset = _o === void 0 ? props_1.RadioGroupDefault.labelOffset : _o, _p = _a.color, color = _p === void 0 ? props_1.RadioGroupDefault.color : _p, _q = _a.verticalAlign, verticalAlign = _q === void 0 ? props_1.RadioGroupDefault.verticalAlign : _q, _r = _a.readOnly, readOnly = _r === void 0 ? props_1.RadioGroupDefault.readOnly : _r, _s = _a.gap, gap = _s === void 0 ? props_1.RadioGroupDefault.gap : _s, _t = _a.isFilled, isFilled = _t === void 0 ? props_1.RadioGroupDefault.isFilled : _t, _u = _a.showIndicator, showIndicator = _u === void 0 ? props_1.RadioGroupDefault.showIndicator : _u, _v = _a.hasInfo, hasInfo = _v === void 0 ? props_1.RadioGroupDefault.hasInfo : _v, _w = _a.infoText, infoText = _w === void 0 ? props_1.RadioGroupDefault.infoText : _w, _x = _a.infoIcon, infoIcon = _x === void 0 ? props_1.RadioGroupDefault.infoIcon : _x, _y = _a.gridColumnLength, gridColumnLength = _y === void 0 ? props_1.RadioGroupDefault.gridColumnLength : _y;
+    var _b = _a.options, options = _b === void 0 ? props_1.RadioGroupDefault.options : _b, _c = _a.value, value = _c === void 0 ? props_1.RadioGroupDefault.value : _c, _d = _a.onChange, onChange = _d === void 0 ? props_1.RadioGroupDefault.onChange : _d, _e = _a.name, name = _e === void 0 ? props_1.RadioGroupDefault.name : _e, _f = _a.label, label = _f === void 0 ? props_1.RadioGroupDefault.label : _f, _g = _a.disabled, disabled = _g === void 0 ? props_1.RadioGroupDefault.disabled : _g, _h = _a.size, size = _h === void 0 ? props_1.RadioGroupDefault.size : _h, _j = _a.textSize, textSize = _j === void 0 ? props_1.RadioGroupDefault.textSize : _j, _k = _a.layout, layout = _k === void 0 ? props_1.RadioGroupDefault.layout : _k, _l = _a.radioLayout, radioLayout = _l === void 0 ? props_1.RadioGroupDefault.radioLayout : _l, _m = _a.valid, valid = _m === void 0 ? props_1.RadioGroupDefault.valid : _m, _o = _a.labelOffset, labelOffset = _o === void 0 ? props_1.RadioGroupDefault.labelOffset : _o, _p = _a.color, color = _p === void 0 ? props_1.RadioGroupDefault.color : _p, _q = _a.verticalAlign, verticalAlign = _q === void 0 ? props_1.RadioGroupDefault.verticalAlign : _q, _r = _a.readOnly, readOnly = _r === void 0 ? props_1.RadioGroupDefault.readOnly : _r, _s = _a.gap, gap = _s === void 0 ? props_1.RadioGroupDefault.gap : _s, _t = _a.isFilled, isFilled = _t === void 0 ? props_1.RadioGroupDefault.isFilled : _t, _u = _a.showIndicator, showIndicator = _u === void 0 ? props_1.RadioGroupDefault.showIndicator : _u, _v = _a.hasInfo, hasInfo = _v === void 0 ? props_1.RadioGroupDefault.hasInfo : _v, _w = _a.infoText, infoText = _w === void 0 ? props_1.RadioGroupDefault.infoText : _w, _x = _a.infoIcon, infoIcon = _x === void 0 ? props_1.RadioGroupDefault.infoIcon : _x, _y = _a.gridColumnLength, gridColumnLength = _y === void 0 ? props_1.RadioGroupDefault.gridColumnLength : _y, _z = _a.isHorizontalOnMobile, isHorizontalOnMobile = _z === void 0 ? props_1.RadioGroupDefault.isHorizontalOnMobile : _z;
     var handleRadioChange = function (optionValue) {
         if (!onChange)
             return;
         onChange(optionValue);
     };
-    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 }, { children: options.map(function (option, index) {
+    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/RadioGroup.styled.js

@@ -9,14 +9,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioGroupStyled = exports.RadioButtonsWrapper = exports.InfoText = exports.InfoIconWrapper = exports.InfoArea = exports.GroupLabel = exports.GroupLabelWrapper = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
+var devices_1 = require("../../constants/devices");
 exports.GroupLabelWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    margin-bottom: ", ";\n"], ["\n    display: flex;\n    margin-bottom: ", ";\n"])), function (props) { return props.$emphasizedLabel ? "0.5rem" : "1rem"; });
 exports.GroupLabel = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0;\n    display: block;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0;\n    display: block;\n    color: var(--dark-opacity-50);\n    font: var(--caption-bold-12-15);\n"])));
 exports.InfoArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    padding: 0 0;\n    margin-bottom: 1rem;\n"], ["\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    padding: 0 0;\n    margin-bottom: 1rem;\n"])));
 exports.InfoIconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    color: var(--dark-opacity-50);\n"], ["\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    color: var(--dark-opacity-50);\n"])));
 exports.InfoText = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    margin: 0;\n    flex: 1;\n    font: var(--caption-medium-12-15);\n    color: var(--dark-opacity-50);\n"], ["\n    margin: 0;\n    flex: 1;\n    font: var(--caption-medium-12-15);\n    color: var(--dark-opacity-50);\n"])));
 exports.RadioButtonsWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    gap: ", ";\n    width: 100%;\n\n    ", "\n"], ["\n    gap: ", ";\n    width: 100%;\n\n    ", "\n"])), function (props) { return props.$gap || "0.5rem"; }, function (props) { return props.$gridColumnLength
-    ? "\n        display: grid;\n        grid-template-columns: repeat(".concat(props.$gridColumnLength, ", minmax(0, 1fr));\n    ")
-    : "\n        display: flex;\n        flex-direction: ".concat(props.$layout === "horizontal" ? "row" : "column", ";\n        flex-wrap: ").concat(props.$layout === "horizontal" ? "wrap" : "nowrap", ";\n        ").concat(props.$isFilled
+    ? "\n        display: grid;\n        grid-template-columns: repeat(".concat(props.$gridColumnLength, ", minmax(0, 1fr));\n        ").concat(props.$isHorizontalOnMobile
+        ? "\n        @media only screen and ".concat(devices_1.devices.md, " {\n            grid-template-columns: 1fr;\n        }\n        ")
+        : "", "\n    ")
+    : "\n        display: flex;\n        ".concat(props.$isHorizontalOnMobile && props.$layout === "horizontal"
+        ? "\n        flex-direction: row;\n        flex-wrap: wrap;\n        @media only screen and ".concat(devices_1.devices.md, " {\n            flex-direction: column;\n            flex-wrap: nowrap;\n        }\n        ")
+        : "\n        flex-direction: ".concat(props.$layout === "horizontal" ? "row" : "column", ";\n        flex-wrap: ").concat(props.$layout === "horizontal" ? "wrap" : "nowrap", ";\n        "), "\n        ").concat(props.$isFilled
         ? "\n            > * {\n                flex: 1 1 0;\n            }\n        "
         : "", "\n    "); });
 exports.RadioGroupStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n"], ["\n    display: flex;\n    flex-direction: column;\n"])));

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[];
@@ -49,6 +60,8 @@ export interface RadioGroup {
     infoIcon?: string;
     /** Satır başına sütun sayısı — verildiğinde flex yerine grid kullanılır */
     gridColumnLength?: number;
+    /** Mobilde layout uyarlaması: flex vertical → row; grid → tek sütun (alt alta) */
+    isHorizontalOnMobile?: boolean;
 }
 export declare const RadioGroupDefault: RadioGroup;
 export interface RadioGroupStyledProps {
@@ -57,6 +70,7 @@ export interface RadioGroupStyledProps {
     $isFilled?: boolean;
     $emphasizedLabel?: boolean;
     $gridColumnLength?: number;
+    $isHorizontalOnMobile?: boolean;
 }
 export type RadioGroupProps = typeof RadioGroupDefault;
 export {};

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: [],
@@ -28,5 +28,6 @@ exports.RadioGroupDefault = {
     hasInfo: false,
     infoText: null,
     infoIcon: "InfoSquare",
-    gridColumnLength: undefined
+    gridColumnLength: undefined,
+    isHorizontalOnMobile: false,
 };

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

@@ -1,7 +1,7 @@
 import React from 'react';
 declare const _default: {
     title: string;
-    component: ({ options, value, onChange, name, label, disabled, size, textSize, layout, radioLayout, valid, labelOffset, color, verticalAlign, readOnly, gap, isFilled, showIndicator, hasInfo, infoText, infoIcon, gridColumnLength }: import("../props").RadioGroup) => React.JSX.Element;
+    component: ({ options, value, onChange, name, label, disabled, size, textSize, layout, radioLayout, valid, labelOffset, color, verticalAlign, readOnly, gap, isFilled, showIndicator, hasInfo, infoText, infoIcon, gridColumnLength, isHorizontalOnMobile, }: import("../props").RadioGroup) => React.JSX.Element;
     tags: string[];
     argTypes: {
         layout: {
@@ -49,6 +49,9 @@ declare const _default: {
             min: number;
             max: number;
         };
+        isHorizontalOnMobile: {
+            control: string;
+        };
     };
 };
 export default _default;
@@ -86,6 +89,24 @@ export declare const WithoutIndicator: {
         textSize: string;
     };
 };
+export declare const VerticalHorizontalOnMobile: {
+    args: {
+        layout: string;
+        isHorizontalOnMobile: boolean;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        name: string;
+        label: string;
+        value: string;
+        onChange: (value: any) => void;
+        radioLayout: string;
+        size: string;
+        textSize: string;
+        showIndicator: boolean;
+    };
+};
 export declare const Horizontal: {
     args: {
         name: string;
@@ -240,6 +261,25 @@ export declare const GridTwoColumns: {
     };
     render: (args: any) => React.JSX.Element;
 };
+export declare const GridStackedOnMobile: {
+    args: {
+        isHorizontalOnMobile: boolean;
+        options: {
+            label: string;
+            value: string;
+        }[];
+        name: string;
+        label: string;
+        value: string;
+        onChange: (value: any) => void;
+        radioLayout: string;
+        size: string;
+        gridColumnLength: number;
+        gap: string;
+        showIndicator: boolean;
+    };
+    render: (args: any) => React.JSX.Element;
+};
 export declare const ColorPicker: {
     args: {
         name: string;
@@ -288,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.GridTwoColumns = exports.WithInfoArea = exports.BoxedMdWithoutIndicator = exports.BoxedMdFilled = exports.BoxedMdLayout = exports.BoxedSmFilled = exports.BoxedSmLayout = exports.BoxedLayout = exports.Horizontal = 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,
@@ -36,6 +114,7 @@ exports.default = {
         infoText: { control: 'text' },
         infoIcon: { control: 'text' },
         gridColumnLength: { control: 'number', min: 1, max: 6 },
+        isHorizontalOnMobile: { control: 'boolean' },
     }
 };
 exports.Default = {
@@ -59,6 +138,14 @@ exports.Default = {
 exports.WithoutIndicator = {
     args: __assign(__assign({}, exports.Default.args), { showIndicator: false }),
 };
+exports.VerticalHorizontalOnMobile = {
+    args: __assign(__assign({}, exports.Default.args), { layout: "vertical", isHorizontalOnMobile: true, options: [
+            { label: "Option 1", value: "option1" },
+            { label: "Option 2", value: "option2" },
+            { label: "Option 3", value: "option3" },
+            { label: "Option 4", value: "option4" },
+        ] }),
+};
 exports.Horizontal = {
     args: {
         name: "horizontalRadioGroup",
@@ -204,6 +291,15 @@ exports.GridTwoColumns = {
     },
     render: function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { maxWidth: "720px" } }, { children: (0, jsx_runtime_1.jsx)(RadioGroup_1.default, __assign({}, args)) }))); },
 };
+exports.GridStackedOnMobile = {
+    args: __assign(__assign({}, exports.GridTwoColumns.args), { isHorizontalOnMobile: true, options: [
+            { label: "Esnek", value: "flexible" },
+            { label: "Taahhütlü", value: "committed" },
+            { label: "Seçenek 3", value: "option3" },
+            { label: "Seçenek 4", value: "option4" },
+        ] }),
+    render: exports.GridTwoColumns.render,
+};
 exports.ColorPicker = {
     args: {
         name: "colorRadioGroup",
@@ -258,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;