krl-alfred 2.23.10 → 2.23.12

package/dist/components/CategoryMenu/CategoryMenu.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { CategoryMenuProps } from "./props";
-declare const CategoryMenu: ({ data, subMenuRowLength, showIcons, }: CategoryMenuProps) => React.JSX.Element;
+declare const CategoryMenu: ({ data, subMenuRowLength, showIcons, leftAlignMaxCount, }: CategoryMenuProps) => React.JSX.Element;
 export default CategoryMenu;

package/dist/components/CategoryMenu/CategoryMenu.js

@@ -33,7 +33,7 @@ var OptionMenu_1 = __importDefault(require("../OptionMenu"));
 var Badges_1 = __importDefault(require("../Badges"));
 var CategoryMenu = function (_a) {
     var _b;
-    var _c = _a.data, data = _c === void 0 ? props_1.CategoryMenuDefault.data : _c, _d = _a.subMenuRowLength, subMenuRowLength = _d === void 0 ? props_1.CategoryMenuDefault.subMenuRowLength : _d, _e = _a.showIcons, showIcons = _e === void 0 ? props_1.CategoryMenuDefault.showIcons : _e;
+    var _c = _a.data, data = _c === void 0 ? props_1.CategoryMenuDefault.data : _c, _d = _a.subMenuRowLength, subMenuRowLength = _d === void 0 ? props_1.CategoryMenuDefault.subMenuRowLength : _d, _e = _a.showIcons, showIcons = _e === void 0 ? props_1.CategoryMenuDefault.showIcons : _e, _f = _a.leftAlignMaxCount, leftAlignMaxCount = _f === void 0 ? props_1.CategoryMenuDefault.leftAlignMaxCount : _f;
     var ButtonLinkComponent = function (_a) {
         var item = _a.item, children = _a.children;
         return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "componentWrapper" }, { children: children })) })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "componentWrapper" }, { children: children })) })));
@@ -42,7 +42,7 @@ var CategoryMenu = function (_a) {
         var item = __rest(_a, []);
         return ((0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItem, __assign({ "$isActiveCategory": item.isActive, "$hasCustomItem": item.hasCustomItem }, { children: [(0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: item }, { children: (0, jsx_runtime_1.jsxs)(CategoryMenu_styled_1.CategoryItemButtonInner, { children: [(item === null || item === void 0 ? void 0 : item.badgeTextSm) && ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonBadgeSm, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: item === null || item === void 0 ? void 0 : item.badgeTextSm }) })), showIcons && ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonIcon, __assign({ "$hasAnimation": item === null || item === void 0 ? void 0 : item.badgeText }, { children: (item === null || item === void 0 ? void 0 : item.badgeText) ? ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonBadge, { children: item === null || item === void 0 ? void 0 : item.badgeText })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { color: ["ElSatis"].includes(item.icon) ? "var(--primary)" : null, name: item.icon, hasColorChanged: !["CampaignColorful", "Lightning", "Flash", "Valentine", "NewYear"].includes(item.icon) })) }))), (0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryItemButtonTitle, __assign({ "$showIcons": showIcons }, { children: item.name }))] }) })), item.children] })));
     };
-    var hasFewCategories = ((_b = data === null || data === void 0 ? void 0 : data.length) !== null && _b !== void 0 ? _b : 0) <= 4;
+    var hasFewCategories = ((_b = data === null || data === void 0 ? void 0 : data.length) !== null && _b !== void 0 ? _b : 0) <= leftAlignMaxCount;
     return ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.CategoryMenuWrapper, __assign({ "$hasFewCategories": hasFewCategories }, { children: data === null || data === void 0 ? void 0 : data.map(function (item) {
             return ((0, jsx_runtime_1.jsx)(MenuButton, __assign({}, item, { children: item.children.length > 0 && ((0, jsx_runtime_1.jsx)(CategoryMenu_styled_1.SubMenu, { children: (0, jsx_runtime_1.jsx)(OptionMenu_1.default, { hasActiveItem: false, data: item.children, rowLength: item.subMenuRowLength || subMenuRowLength }) })) }), item.id));
         }) })));

package/dist/components/CategoryMenu/CategoryMenu.styled.js

@@ -29,7 +29,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubMenu = exports.CategoryItemButtonTitle = exports.CategoryItemButtonBadgeSm = exports.CategoryItemButtonBadge = exports.CategoryItemButtonIcon = exports.CategoryItemButtonInner = exports.CategoryItem = exports.CategoryMenuWrapper = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
-exports.CategoryMenuWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"])), function (props) { return props.$hasFewCategories ? 'flex-start' : 'space-between'; });
+exports.CategoryMenuWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    gap: ", ";\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    justify-content: ", ";\n    gap: ", ";\n    width: 100%;\n    padding:0;\n    margin: 12.5px auto;\n    max-width: 1050px;\n    a {\n      text-decoration:none;\n      &:not([href]){\n        cursor: initial;\n        *{\n          cursor: initial;\n        }\n      }\n    }\n"])), function (props) { return props.$hasFewCategories ? 'flex-start' : 'space-between'; }, function (props) { return props.$hasFewCategories ? '2rem' : '0'; });
 var hoverAndActive = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n        color: var(--dark);\n    }\n"], ["\n    color: var(--dark);\n    &:before{\n        border-color: var(--grey-10);\n        box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n        color: var(--dark);\n    }\n"])));
 exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75);\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n    ", "\n"], ["\n    display: block;\n    position: relative;\n    margin: 0;\n    padding-bottom: 8px;\n    padding-top: 8px;\n    &:not(:last-child):not(:nth-last-child(2)){\n      path, circle, rect {\n        color : var(--dark-opacity-75);\n      }\n    }\n    &:hover{\n      &:not(:last-child):not(:nth-last-child(2)){\n        path , circle, rect {\n          color : var(--dark);\n        }\n      }\n        > ul{\n            opacity: 1;\n            visibility: visible;\n            transform: translateY(0);\n            transition-delay: 0.3s;\n        }\n        .componentWrapper {\n            > span{\n                ", "\n            }\n        }\n    }\n      &:last-child , &:nth-last-child(2){\n        ul{\n          left: auto;\n          right: 0;\n        }\n      }\n    ", "\n    ", "\n"])), hoverAndActive, function (props) { return props.$isActiveCategory ? "\n        .componentWrapper > span{\n            ".concat(hoverAndActive, "\n        }\n    ") : ""; }, function (props) { return props.$hasCustomItem ? "\n    display: flex;\n    align-items: center;\n    justify-content: center;\n          &:before{\n            content: '';\n            background-color:var(--grey-10);\n            height: 39px;\n            width: 2px;\n            display: block;\n            vertical-align: middle;\n            border-radius: 8px;\n            margin-right: 6px;\n            margin-left: 6px;\n          }\n    " : ""; });
 exports.CategoryItemButtonInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid transparent;\n        color: var(--dark-opacity-75);\n        background-color: transparent;\n        border-radius: 0.5rem;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"], ["\n    text-decoration: none;\n    padding: 12px 16px;\n    color: var(--dark-opacity-75);\n    margin: 0;\n    transition: all 0.2s ease-in-out;\n    text-align: center;\n    outline: none;\n    display: block;\n    position: relative;\n    border: 0;\n    background: transparent;\n    outline: 0;\n    width: 100%;\n    font-family:inherit;\n    cursor:pointer;\n    box-sizing: border-box;\n    &:before{\n        content: \"\";\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        border: 1px solid transparent;\n        color: var(--dark-opacity-75);\n        background-color: transparent;\n        border-radius: 0.5rem;\n        z-index: -1;\n        transition: all 0.2s ease-in-out;\n    }\n"])));

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

@@ -4,6 +4,8 @@ export interface CategoryMenu {
     isActiveCategory?: boolean;
     hasCustomItem?: boolean;
     showIcons?: boolean;
+    /** Bu sayı ve altındaysa menü sola yaslanır; üstündeyse space-between */
+    leftAlignMaxCount?: number;
 }
 export interface CategoryMenuStyled {
     $subMenuRowLength?: number;

package/dist/components/CategoryMenu/props.js

@@ -7,4 +7,5 @@ exports.CategoryMenuDefault = {
     isActiveCategory: false,
     hasCustomItem: false,
     showIcons: true,
+    leftAlignMaxCount: 4,
 };

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

@@ -1,12 +1,15 @@
 /// <reference types="react" />
 declare const _default: {
     title: string;
-    component: ({ data, subMenuRowLength, showIcons, }: import("../props").CategoryMenu) => import("react").JSX.Element;
+    component: ({ data, subMenuRowLength, showIcons, leftAlignMaxCount, }: import("../props").CategoryMenu) => import("react").JSX.Element;
     tags: string[];
     argTypes: {
         subMenuRowLength: {
             control: string;
         };
+        leftAlignMaxCount: {
+            control: string;
+        };
         showIcons: {
             control: string;
         };
@@ -184,6 +187,9 @@ export declare const FourCategories: {
         subMenuRowLength: {
             control: string;
         };
+        leftAlignMaxCount: {
+            control: string;
+        };
         showIcons: {
             control: string;
         };
@@ -193,6 +199,7 @@ export declare const FourCategories: {
     };
     args: {
         subMenuRowLength: number;
+        leftAlignMaxCount: number;
         showIcons: boolean;
         data: ({
             id: number;

package/dist/components/CategoryMenu/stories/CategoryMenu.stories.js

@@ -12,6 +12,7 @@ exports.default = {
     tags: ['autodocs'],
     argTypes: {
         subMenuRowLength: { control: 'number' },
+        leftAlignMaxCount: { control: 'number' },
         showIcons: { control: 'boolean' },
         data: { control: 'disabled' }
     }
@@ -31,11 +32,13 @@ exports.Default = {
 exports.FourCategories = {
     argTypes: {
         subMenuRowLength: { control: 'number' },
+        leftAlignMaxCount: { control: 'number' },
         showIcons: { control: 'boolean' },
         data: { control: 'disabled' }
     },
     args: {
         subMenuRowLength: 7,
+        leftAlignMaxCount: 4,
         showIcons: true,
         data: categories_1.default.slice(0, 4),
     },

package/dist/components/RichTextEditor/RichTextEditor.js

@@ -32,8 +32,8 @@ var StrikeIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({
 var OrderedListIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M10 6h10M10 12h10M10 18h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M4 5.5h1.5V9M4 9h3M4.5 14.5c.8 0 1.5.5 1.5 1.25S5.3 17 4.5 17H4v1.5h3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
 var HeadingIcon = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M6 5v14M18 5v14M6 12h12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }))); };
 var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.label, label = _b === void 0 ? props_1.RichTextEditorDefault.label : _b, _c = _a.placeholder, placeholder = _c === void 0 ? props_1.RichTextEditorDefault.placeholder : _c, value = _a.value, _d = _a.defaultValue, defaultValue = _d === void 0 ? props_1.RichTextEditorDefault.defaultValue : _d, onChange = _a.onChange, onBlur = _a.onBlur, _e = _a.disabled, disabled = _e === void 0 ? props_1.RichTextEditorDefault.disabled : _e, _f = _a.hasError, hasError = _f === void 0 ? props_1.RichTextEditorDefault.hasError : _f, _g = _a.errorMessage, errorMessage = _g === void 0 ? props_1.RichTextEditorDefault.errorMessage : _g, className = _a.className, id = _a.id, _h = _a.minHeight, minHeight = _h === void 0 ? props_1.RichTextEditorDefault.minHeight : _h;
-    var _j = (0, react_1.useState)(false), focused = _j[0], setFocused = _j[1];
+    var _b = _a.label, label = _b === void 0 ? props_1.RichTextEditorDefault.label : _b, _c = _a.placeholder, placeholder = _c === void 0 ? props_1.RichTextEditorDefault.placeholder : _c, _d = _a.description, description = _d === void 0 ? props_1.RichTextEditorDefault.description : _d, value = _a.value, _e = _a.defaultValue, defaultValue = _e === void 0 ? props_1.RichTextEditorDefault.defaultValue : _e, onChange = _a.onChange, onBlur = _a.onBlur, _f = _a.disabled, disabled = _f === void 0 ? props_1.RichTextEditorDefault.disabled : _f, _g = _a.hasError, hasError = _g === void 0 ? props_1.RichTextEditorDefault.hasError : _g, _h = _a.errorMessage, errorMessage = _h === void 0 ? props_1.RichTextEditorDefault.errorMessage : _h, className = _a.className, id = _a.id, _j = _a.minHeight, minHeight = _j === void 0 ? props_1.RichTextEditorDefault.minHeight : _j;
+    var _k = (0, react_1.useState)(false), focused = _k[0], setFocused = _k[1];
     var isControlled = value !== undefined;
     var editor = (0, react_2.useEditor)({
         immediatelyRender: false,
@@ -110,7 +110,7 @@ var RichTextEditor = (0, react_1.forwardRef)(function (_a, ref) {
     }); }, [editor, disabled]);
     if (!editor)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.RichTextEditorRoot, __assign({ className: className }, { children: [label && (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.EditorShell, __assign({ "$hasError": hasError, "$disabled": disabled, "$focused": focused && !hasError }, { children: [(0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Kal\u0131n", "$active": editor.isActive('bold'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBold().run(); } }, { children: (0, jsx_runtime_1.jsx)(BoldIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u0130talik", "$active": editor.isActive('italic'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleItalic().run(); } }, { children: (0, jsx_runtime_1.jsx)(ItalicIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Alt\u0131 \u00E7izili", "$active": editor.isActive('underline'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleUnderline().run(); } }, { children: (0, jsx_runtime_1.jsx)(UnderlineIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u00DCst\u00FC \u00E7izili", "$active": editor.isActive('strike'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleStrike().run(); } }, { children: (0, jsx_runtime_1.jsx)(StrikeIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Ba\u015Fl\u0131k", "$active": editor.isActive('heading', { level: 2 }), disabled: disabled, onClick: function () { return editor.chain().focus().toggleHeading({ level: 2 }).run(); } }, { children: (0, jsx_runtime_1.jsx)(HeadingIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Numaral\u0131 liste", "$active": editor.isActive('orderedList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleOrderedList().run(); } }, { children: (0, jsx_runtime_1.jsx)(OrderedListIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Madde i\u015Faretli liste", "$active": editor.isActive('bulletList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBulletList().run(); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "List", width: "1.25rem", height: "1.25rem", color: "currentColor" }) }))] }), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.EditorContentArea, __assign({ "$minHeight": minHeight }, { children: (0, jsx_runtime_1.jsx)(react_2.EditorContent, { editor: editor }) }))] })), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ErrorMessage, { children: (0, jsx_runtime_1.jsx)("p", { children: errorMessage }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.RichTextEditorRoot, __assign({ className: className }, { children: [label && (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.FieldLabel, __assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.EditorShell, __assign({ "$hasError": hasError, "$disabled": disabled, "$focused": focused && !hasError }, { children: [(0, jsx_runtime_1.jsxs)(RichTextEditor_styled_1.Toolbar, { children: [(0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Kal\u0131n", "$active": editor.isActive('bold'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBold().run(); } }, { children: (0, jsx_runtime_1.jsx)(BoldIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u0130talik", "$active": editor.isActive('italic'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleItalic().run(); } }, { children: (0, jsx_runtime_1.jsx)(ItalicIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Alt\u0131 \u00E7izili", "$active": editor.isActive('underline'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleUnderline().run(); } }, { children: (0, jsx_runtime_1.jsx)(UnderlineIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "\u00DCst\u00FC \u00E7izili", "$active": editor.isActive('strike'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleStrike().run(); } }, { children: (0, jsx_runtime_1.jsx)(StrikeIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Ba\u015Fl\u0131k", "$active": editor.isActive('heading', { level: 2 }), disabled: disabled, onClick: function () { return editor.chain().focus().toggleHeading({ level: 2 }).run(); } }, { children: (0, jsx_runtime_1.jsx)(HeadingIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarDivider, {}), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Numaral\u0131 liste", "$active": editor.isActive('orderedList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleOrderedList().run(); } }, { children: (0, jsx_runtime_1.jsx)(OrderedListIcon, {}) })), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ToolbarButton, __assign({ type: "button", "aria-label": "Madde i\u015Faretli liste", "$active": editor.isActive('bulletList'), disabled: disabled, onClick: function () { return editor.chain().focus().toggleBulletList().run(); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "List", width: "1.25rem", height: "1.25rem", color: "currentColor" }) }))] }), (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.EditorContentArea, __assign({ "$minHeight": minHeight }, { children: (0, jsx_runtime_1.jsx)(react_2.EditorContent, { editor: editor }) }))] })), description && (0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.FieldDescription, { children: description }), hasError && errorMessage && ((0, jsx_runtime_1.jsx)(RichTextEditor_styled_1.ErrorMessage, { children: (0, jsx_runtime_1.jsx)("p", { children: errorMessage }) }))] })));
 });
 RichTextEditor.displayName = 'RichTextEditor';
 exports.default = RichTextEditor;

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

@@ -22,6 +22,7 @@ export declare const EditorContentArea: import("styled-components/dist/types").I
 }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$minHeight"> & {
     $minHeight?: string;
 }, never>>> & string;
+export declare const FieldDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
 export declare const ErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const VariableActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const VariableChipButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;

package/dist/components/RichTextEditor/RichTextEditor.styled.js

@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VariableChipButton = exports.VariableActions = exports.ErrorMessage = exports.EditorContentArea = exports.ToolbarDivider = exports.ToolbarButton = exports.Toolbar = exports.EditorShell = exports.FieldLabel = exports.RichTextEditorRoot = void 0;
+exports.VariableChipButton = exports.VariableActions = exports.ErrorMessage = exports.FieldDescription = exports.EditorContentArea = exports.ToolbarDivider = exports.ToolbarButton = exports.Toolbar = exports.EditorShell = exports.FieldLabel = exports.RichTextEditorRoot = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.RichTextEditorRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n"], ["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n"])));
 exports.FieldLabel = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0 0 0.5rem;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"], ["\n    margin: 0 0 0.5rem;\n    color: var(--dark-opacity-50);\n    display: block;\n    font: var(--caption-bold-12-15);\n"])));
@@ -16,7 +16,8 @@ exports.Toolbar = styled_components_1.default.div(templateObject_4 || (templateO
 exports.ToolbarButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    height: 1.25rem;\n    padding: 0;\n    border: none;\n    border-radius: 0.25rem;\n    background: transparent;\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: pointer;\n    transition: background-color 0.15s ease, color 0.15s ease;\n\n    &:hover:not(:disabled) {\n        background: transparent;\n        color: var(--dark);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n        background: transparent;\n    }\n\n    svg {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    height: 1.25rem;\n    padding: 0;\n    border: none;\n    border-radius: 0.25rem;\n    background: transparent;\n    color: ", ";\n    font: var(--body-bold-14-17);\n    cursor: pointer;\n    transition: background-color 0.15s ease, color 0.15s ease;\n\n    &:hover:not(:disabled) {\n        background: transparent;\n        color: var(--dark);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        color: var(--dark-opacity-25);\n        background: transparent;\n    }\n\n    svg {\n        width: 1.25rem;\n        height: 1.25rem;\n    }\n"])), function (props) { return (props.$active ? 'var(--dark)' : 'var(--grey-50)'); });
 exports.ToolbarDivider = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: inline-block;\n    width: 1px;\n    height: 1.25rem;\n    margin: 0;\n    background: var(--dark-opacity-10);\n"], ["\n    display: inline-block;\n    width: 1px;\n    height: 1.25rem;\n    margin: 0;\n    background: var(--dark-opacity-10);\n"])));
 exports.EditorContentArea = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    .ProseMirror {\n        min-height: ", ";\n        padding: 0;\n        outline: none;\n        color: var(--dark);\n        font: var(--body-regular-14-17);\n        box-sizing: border-box;\n\n        p {\n            margin: 0 0 0.75rem;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        h2 {\n            margin: 0 0 0.75rem;\n            color: var(--dark);\n            font: var(--headline-semi-bold-18-22);\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        ul,\n        ol {\n            margin: 0 0 0.75rem;\n            padding-left: 1.25rem;\n            list-style-position: outside;\n        }\n\n        ul {\n            list-style-type: disc;\n        }\n\n        ol {\n            list-style-type: decimal;\n        }\n\n        li {\n            margin-bottom: 0.25rem;\n            display: list-item;\n        }\n\n        strong {\n            font-weight: 700;\n        }\n\n        em {\n            font-style: italic;\n        }\n\n        u {\n            text-decoration: underline;\n        }\n\n        s {\n            text-decoration: line-through;\n        }\n\n        .rte-variable-node {\n            display: inline-flex;\n            align-items: center;\n            vertical-align: middle;\n            margin: 0 0.125rem;\n            user-select: none;\n        }\n\n        /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n        .rte-variable {\n            display: inline-flex;\n            align-items: center;\n            margin: 0 0.125rem;\n            padding: 0 8px;\n            height: 17px;\n            line-height: 17px;\n            border-radius: 3px;\n            background-color: var(--primary-opacity-10);\n            color: var(--primary);\n            font: var(--caption-semi-bold-10-12);\n            white-space: nowrap;\n            vertical-align: middle;\n            user-select: none;\n        }\n\n        p.is-editor-empty:first-child::before {\n            content: attr(data-placeholder);\n            float: left;\n            color: var(--dark-opacity-50);\n            pointer-events: none;\n            height: 0;\n            font: var(--body-regular-14-17);\n        }\n    }\n"], ["\n    .ProseMirror {\n        min-height: ", ";\n        padding: 0;\n        outline: none;\n        color: var(--dark);\n        font: var(--body-regular-14-17);\n        box-sizing: border-box;\n\n        p {\n            margin: 0 0 0.75rem;\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        h2 {\n            margin: 0 0 0.75rem;\n            color: var(--dark);\n            font: var(--headline-semi-bold-18-22);\n\n            &:last-child {\n                margin-bottom: 0;\n            }\n        }\n\n        ul,\n        ol {\n            margin: 0 0 0.75rem;\n            padding-left: 1.25rem;\n            list-style-position: outside;\n        }\n\n        ul {\n            list-style-type: disc;\n        }\n\n        ol {\n            list-style-type: decimal;\n        }\n\n        li {\n            margin-bottom: 0.25rem;\n            display: list-item;\n        }\n\n        strong {\n            font-weight: 700;\n        }\n\n        em {\n            font-style: italic;\n        }\n\n        u {\n            text-decoration: underline;\n        }\n\n        s {\n            text-decoration: line-through;\n        }\n\n        .rte-variable-node {\n            display: inline-flex;\n            align-items: center;\n            vertical-align: middle;\n            margin: 0 0.125rem;\n            user-select: none;\n        }\n\n        /* getHTML / serialize \u00E7\u0131kt\u0131s\u0131 \u2014 Badges text/secondary ile ayn\u0131 */\n        .rte-variable {\n            display: inline-flex;\n            align-items: center;\n            margin: 0 0.125rem;\n            padding: 0 8px;\n            height: 17px;\n            line-height: 17px;\n            border-radius: 3px;\n            background-color: var(--primary-opacity-10);\n            color: var(--primary);\n            font: var(--caption-semi-bold-10-12);\n            white-space: nowrap;\n            vertical-align: middle;\n            user-select: none;\n        }\n\n        p.is-editor-empty:first-child::before {\n            content: attr(data-placeholder);\n            float: left;\n            color: var(--dark-opacity-50);\n            pointer-events: none;\n            height: 0;\n            font: var(--body-regular-14-17);\n        }\n    }\n"])), function (props) { return props.$minHeight || '200px'; });
-exports.ErrorMessage = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    margin-top: 0.5rem;\n    color: var(--red);\n\n    p {\n        margin: 0;\n        font: var(--caption-semi-bold-11-13);\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    margin-top: 0.5rem;\n    color: var(--red);\n\n    p {\n        margin: 0;\n        font: var(--caption-semi-bold-11-13);\n    }\n"])));
-exports.VariableActions = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-top: 0.75rem;\n"], ["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-top: 0.75rem;\n"])));
-exports.VariableChipButton = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    padding: 0.375rem 0.75rem;\n    border-radius: 0.375rem;\n    border: 1px solid var(--primary-opacity-50);\n    background: var(--primary-opacity-10);\n    color: var(--primary);\n    font: var(--caption-bold-12-15);\n    cursor: pointer;\n    transition: background-color 0.15s ease, border-color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-50);\n        border-color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    padding: 0.375rem 0.75rem;\n    border-radius: 0.375rem;\n    border: 1px solid var(--primary-opacity-50);\n    background: var(--primary-opacity-10);\n    color: var(--primary);\n    font: var(--caption-bold-12-15);\n    cursor: pointer;\n    transition: background-color 0.15s ease, border-color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-50);\n        border-color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n    }\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+exports.FieldDescription = styled_components_1.default.p(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    margin: 0.5rem 0 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-semi-bold-12-15);\n"], ["\n    margin: 0.5rem 0 0;\n    color: var(--dark-opacity-50);\n    font: var(--caption-semi-bold-12-15);\n"])));
+exports.ErrorMessage = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    margin-top: 0.5rem;\n    color: var(--red);\n\n    p {\n        margin: 0;\n        font: var(--caption-semi-bold-11-13);\n    }\n"], ["\n    display: flex;\n    align-items: center;\n    margin-top: 0.5rem;\n    color: var(--red);\n\n    p {\n        margin: 0;\n        font: var(--caption-semi-bold-11-13);\n    }\n"])));
+exports.VariableActions = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-top: 0.75rem;\n"], ["\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    margin-top: 0.75rem;\n"])));
+exports.VariableChipButton = styled_components_1.default.button(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    display: inline-flex;\n    align-items: center;\n    padding: 0.375rem 0.75rem;\n    border-radius: 0.375rem;\n    border: 1px solid var(--primary-opacity-50);\n    background: var(--primary-opacity-10);\n    color: var(--primary);\n    font: var(--caption-bold-12-15);\n    cursor: pointer;\n    transition: background-color 0.15s ease, border-color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-50);\n        border-color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n    }\n"], ["\n    display: inline-flex;\n    align-items: center;\n    padding: 0.375rem 0.75rem;\n    border-radius: 0.375rem;\n    border: 1px solid var(--primary-opacity-50);\n    background: var(--primary-opacity-10);\n    color: var(--primary);\n    font: var(--caption-bold-12-15);\n    cursor: pointer;\n    transition: background-color 0.15s ease, border-color 0.15s ease;\n\n    &:hover {\n        background: var(--primary-opacity-50);\n        border-color: var(--primary);\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n    }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

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

@@ -6,6 +6,7 @@ export type RichTextVariable = {
 export interface RichTextEditorProps {
     label?: string;
     placeholder?: string;
+    description?: string;
     value?: string;
     defaultValue?: string;
     onChange?: (html: string) => void;
@@ -29,6 +30,7 @@ export interface RichTextEditorRef {
 export declare const RichTextEditorDefault: {
     label: string;
     placeholder: string;
+    description: string;
     defaultValue: string;
     disabled: boolean;
     hasError: boolean;

package/dist/components/RichTextEditor/props.js

@@ -4,6 +4,7 @@ exports.RichTextEditorDefault = void 0;
 exports.RichTextEditorDefault = {
     label: null,
     placeholder: 'Metin yaz…',
+    description: null,
     defaultValue: '',
     disabled: false,
     hasError: false,

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

@@ -11,6 +11,9 @@ declare const _default: {
         placeholder: {
             control: string;
         };
+        description: {
+            control: string;
+        };
         disabled: {
             control: string;
         };
@@ -48,6 +51,14 @@ export declare const Default: {
         minHeight: string;
     };
 };
+export declare const WithDescription: {
+    args: {
+        label: string;
+        placeholder: string;
+        description: string;
+        minHeight: string;
+    };
+};
 export declare const WithSampleContent: {
     name: string;
     args: {

package/dist/components/RichTextEditor/stories/RichTextEditor.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.InsertVariables = exports.Disabled = exports.WithError = exports.WithSampleContent = exports.Default = void 0;
+exports.InsertVariables = exports.Disabled = exports.WithError = exports.WithSampleContent = exports.WithDescription = exports.Default = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var RichTextEditor_1 = __importDefault(require("../RichTextEditor"));
@@ -32,6 +32,7 @@ exports.default = {
     argTypes: {
         label: { control: 'text' },
         placeholder: { control: 'text' },
+        description: { control: 'text' },
         disabled: { control: 'boolean' },
         hasError: { control: 'boolean' },
         errorMessage: { control: 'text' },
@@ -50,6 +51,14 @@ exports.Default = {
         minHeight: '220px',
     },
 };
+exports.WithDescription = {
+    args: {
+        label: 'Mail metni',
+        placeholder: 'Metin yaz…',
+        description: 'Bu metin, gönderilen e-postalarda ürün kartının altında görünür.',
+        minHeight: '220px',
+    },
+};
 exports.WithSampleContent = {
     name: 'Örnek içerik + değişken chip’leri',
     args: {

package/package.json

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