krl-alfred 2.23.8 → 2.23.9

package/dist/components/Uploader/Uploader.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { UploaderProps } from './props';
-declare const Uploader: ({ className, title, description, images, maxCount, columnCount, uploadLabel, coverBadgeText, variant, selectedIndexes, selectedIndex, showCoverBadge, accept, disabled, imagePadding, onUpload, onRemove, onSelect, }: UploaderProps) => React.JSX.Element;
+declare const Uploader: ({ className, title, description, images, maxCount, columnCount, uploadLabel, coverBadgeText, variant, selectedIndexes, selectedIndex, showCoverBadge, accept, disabled, imagePadding, imageFit, onUpload, onRemove, onSelect, }: UploaderProps) => React.JSX.Element;
 export default Uploader;

package/dist/components/Uploader/Uploader.js

@@ -21,11 +21,11 @@ var Uploader_styled_1 = require("./Uploader.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Badges_1 = __importDefault(require("../Badges/Badges"));
 var Uploader = function (_a) {
-    var className = _a.className, title = _a.title, description = _a.description, _b = _a.images, images = _b === void 0 ? props_1.UploaderDefault.images : _b, _c = _a.maxCount, maxCount = _c === void 0 ? props_1.UploaderDefault.maxCount : _c, _d = _a.columnCount, columnCount = _d === void 0 ? props_1.UploaderDefault.columnCount : _d, _e = _a.uploadLabel, uploadLabel = _e === void 0 ? props_1.UploaderDefault.uploadLabel : _e, _f = _a.coverBadgeText, coverBadgeText = _f === void 0 ? props_1.UploaderDefault.coverBadgeText : _f, _g = _a.variant, variant = _g === void 0 ? props_1.UploaderDefault.variant : _g, selectedIndexes = _a.selectedIndexes, selectedIndex = _a.selectedIndex, _h = _a.showCoverBadge, showCoverBadge = _h === void 0 ? props_1.UploaderDefault.showCoverBadge : _h, _j = _a.accept, accept = _j === void 0 ? props_1.UploaderDefault.accept : _j, _k = _a.disabled, disabled = _k === void 0 ? props_1.UploaderDefault.disabled : _k, _l = _a.imagePadding, imagePadding = _l === void 0 ? props_1.UploaderDefault.imagePadding : _l, onUpload = _a.onUpload, onRemove = _a.onRemove, onSelect = _a.onSelect;
+    var className = _a.className, title = _a.title, description = _a.description, _b = _a.images, images = _b === void 0 ? props_1.UploaderDefault.images : _b, _c = _a.maxCount, maxCount = _c === void 0 ? props_1.UploaderDefault.maxCount : _c, _d = _a.columnCount, columnCount = _d === void 0 ? props_1.UploaderDefault.columnCount : _d, _e = _a.uploadLabel, uploadLabel = _e === void 0 ? props_1.UploaderDefault.uploadLabel : _e, _f = _a.coverBadgeText, coverBadgeText = _f === void 0 ? props_1.UploaderDefault.coverBadgeText : _f, _g = _a.variant, variant = _g === void 0 ? props_1.UploaderDefault.variant : _g, selectedIndexes = _a.selectedIndexes, selectedIndex = _a.selectedIndex, _h = _a.showCoverBadge, showCoverBadge = _h === void 0 ? props_1.UploaderDefault.showCoverBadge : _h, _j = _a.accept, accept = _j === void 0 ? props_1.UploaderDefault.accept : _j, _k = _a.disabled, disabled = _k === void 0 ? props_1.UploaderDefault.disabled : _k, _l = _a.imagePadding, imagePadding = _l === void 0 ? props_1.UploaderDefault.imagePadding : _l, _m = _a.imageFit, imageFit = _m === void 0 ? props_1.UploaderDefault.imageFit : _m, onUpload = _a.onUpload, onRemove = _a.onRemove, onSelect = _a.onSelect;
     var fileInputRef = (0, react_1.useRef)(null);
     var uploadIndexRef = (0, react_1.useRef)(null);
     var localPreviewsRef = (0, react_1.useRef)({});
-    var _m = (0, react_1.useState)({}), localPreviews = _m[0], setLocalPreviews = _m[1];
+    var _o = (0, react_1.useState)({}), localPreviews = _o[0], setLocalPreviews = _o[1];
     var slots = Array.from({ length: maxCount }, function (_, index) { var _a, _b; return (_b = (_a = images[index]) !== null && _a !== void 0 ? _a : localPreviews[index]) !== null && _b !== void 0 ? _b : null; });
     var isCoverSelect = variant === 'coverSelect';
     var activeSelectedIndexes = selectedIndexes !== null && selectedIndexes !== void 0 ? selectedIndexes : (selectedIndex !== undefined && selectedIndex !== null ? [selectedIndex] : props_1.UploaderDefault.selectedIndexes);
@@ -111,7 +111,7 @@ var Uploader = function (_a) {
                     var isSelected = isCoverSelect && !isEmpty && activeSelectedIndexes.includes(index);
                     var showCoverOnSlot = !isCoverSelect && showCoverBadge && index === 0;
                     var showUploadContent = isEmpty || showCoverOnSlot;
-                    return ((0, jsx_runtime_1.jsxs)(Uploader_styled_1.UploaderSlot, __assign({ type: "button", "$isEmpty": isEmpty, "$isSelected": isSelected, "$disabled": disabled, disabled: disabled, onClick: function () { return handleSlotClick(index, image); } }, { children: [image && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderSlotMedia, __assign({ "$padding": imagePadding }, { children: (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderSlotImage, { src: image.src, alt: (_a = image.alt) !== null && _a !== void 0 ? _a : '' }) })), !isCoverSelect && ((0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderRemoveButton, __assign({ type: "button", "aria-label": "G\u00F6rseli kald\u0131r", onClick: function (event) { return handleRemove(event, index); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closebig" }) })))] })), showUploadContent && ((0, jsx_runtime_1.jsxs)(Uploader_styled_1.UploaderUploadContent, __assign({ "$hasImage": !isEmpty }, { children: [showCoverOnSlot && ((0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderUploadBadgeWrapper, { children: renderCoverBadge() })), (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderUploadLabel, __assign({ "$isHidden": !isEmpty && showCoverOnSlot }, { children: uploadLabel })), (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderUploadIcon, __assign({ "$isHidden": !isEmpty && showCoverOnSlot }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusMd", width: "1.5rem", height: "1.5rem", color: "var(--primary)" }) }))] })))] }), (_b = image === null || image === void 0 ? void 0 : image.id) !== null && _b !== void 0 ? _b : "slot-".concat(index)));
+                    return ((0, jsx_runtime_1.jsxs)(Uploader_styled_1.UploaderSlot, __assign({ type: "button", "$isEmpty": isEmpty, "$isSelected": isSelected, "$disabled": disabled, disabled: disabled, onClick: function () { return handleSlotClick(index, image); } }, { children: [image && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderSlotMedia, __assign({ "$padding": imagePadding }, { children: (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderSlotImage, { src: image.src, alt: (_a = image.alt) !== null && _a !== void 0 ? _a : '', "$fit": imageFit }) })), !isCoverSelect && ((0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderRemoveButton, __assign({ type: "button", "aria-label": "G\u00F6rseli kald\u0131r", onClick: function (event) { return handleRemove(event, index); } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Closebig" }) })))] })), showUploadContent && ((0, jsx_runtime_1.jsxs)(Uploader_styled_1.UploaderUploadContent, __assign({ "$hasImage": !isEmpty }, { children: [showCoverOnSlot && ((0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderUploadBadgeWrapper, { children: renderCoverBadge() })), (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderUploadLabel, __assign({ "$isHidden": !isEmpty && showCoverOnSlot }, { children: uploadLabel })), (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderUploadIcon, __assign({ "$isHidden": !isEmpty && showCoverOnSlot }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "PlusMd", width: "1.5rem", height: "1.5rem", color: "var(--primary)" }) }))] })))] }), (_b = image === null || image === void 0 ? void 0 : image.id) !== null && _b !== void 0 ? _b : "slot-".concat(index)));
                 }) })), (0, jsx_runtime_1.jsx)(Uploader_styled_1.UploaderHiddenInput, { ref: fileInputRef, type: "file", accept: accept, onChange: handleFileChange })] })));
 };
 exports.default = Uploader;

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

@@ -22,7 +22,11 @@ export declare const UploaderSlotMedia: import("styled-components/dist/types").I
 }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$padding"> & {
     $padding?: string;
 }, never>>> & string;
-export declare const UploaderSlotImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>>> & string;
+export declare const UploaderSlotImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "$fit"> & {
+    $fit?: 'cover' | 'contain';
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "$fit"> & {
+    $fit?: 'cover' | 'contain';
+}, never>>> & string;
 export declare const UploaderUploadContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasImage"> & {
     $hasImage?: boolean;
 }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hasImage"> & {

package/dist/components/Uploader/Uploader.styled.js

@@ -45,7 +45,7 @@ exports.UploaderSlot = styled_components_1.default.button(templateObject_9 || (t
     return slotFilledStyles;
 });
 exports.UploaderSlotMedia = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ", ";\n    box-sizing: border-box;\n"], ["\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ", ";\n    box-sizing: border-box;\n"])), function (props) { return props.$padding || '1rem'; });
-exports.UploaderSlotImage = styled_components_1.default.img(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    box-sizing: border-box;\n    pointer-events: none;\n    border-radius: 0.5rem;\n"], ["\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    box-sizing: border-box;\n    pointer-events: none;\n    border-radius: 0.5rem;\n"])));
+exports.UploaderSlotImage = styled_components_1.default.img(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    width: 100%;\n    height: 100%;\n    object-fit: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    border-radius: 0.5rem;\n"], ["\n    width: 100%;\n    height: 100%;\n    object-fit: ", ";\n    box-sizing: border-box;\n    pointer-events: none;\n    border-radius: 0.5rem;\n"])), function (props) { return props.$fit || 'cover'; });
 exports.UploaderUploadContent = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none;\n    position: ", ";\n    z-index: ", ";\n"], ["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none;\n    position: ", ";\n    z-index: ", ";\n"])), function (props) { return props.$hasImage ? 'relative' : 'static'; }, function (props) { return props.$hasImage ? 1 : 'auto'; });
 exports.UploaderUploadBadgeWrapper = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    margin-bottom: 0.5rem;\n"], ["\n    margin-bottom: 0.5rem;\n"])));
 exports.UploaderUploadLabel = styled_components_1.default.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    color: var(--primary);\n    font: var(--body-semi-bold-14-17);\n    visibility: ", ";\n"], ["\n    color: var(--primary);\n    font: var(--body-semi-bold-14-17);\n    visibility: ", ";\n"])), function (props) { return props.$isHidden ? 'hidden' : 'visible'; });

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

@@ -4,6 +4,7 @@ export interface UploaderImage {
     alt?: string;
 }
 export type UploaderVariant = 'default' | 'coverSelect';
+export type UploaderImageFit = 'cover' | 'contain';
 export interface UploaderProps {
     className?: string;
     title?: string;
@@ -24,6 +25,8 @@ export interface UploaderProps {
     disabled?: boolean;
     /** Slot görseli padding'i (`1.5rem`, `1rem`, `1.5rem 1rem` vb.) */
     imagePadding?: string;
+    /** Slot görseli object-fit değeri */
+    imageFit?: UploaderImageFit;
     onUpload?: (index: number, file: File) => void;
     onRemove?: (index: number) => void;
     /** Slot seçildiğinde çağrılır; parent selectedIndexes'i yönetir */
@@ -42,4 +45,5 @@ export declare const UploaderDefault: {
     accept: string;
     disabled: boolean;
     imagePadding: string;
+    imageFit: UploaderImageFit;
 };

package/dist/components/Uploader/props.js

@@ -14,4 +14,5 @@ exports.UploaderDefault = {
     accept: 'image/*',
     disabled: false,
     imagePadding: '1rem',
+    imageFit: 'cover',
 };

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { UploaderImage } from '../props';
 declare const _default: {
     title: string;
-    component: ({ className, title, description, images, maxCount, columnCount, uploadLabel, coverBadgeText, variant, selectedIndexes, selectedIndex, showCoverBadge, accept, disabled, imagePadding, onUpload, onRemove, onSelect, }: import("../props").UploaderProps) => React.JSX.Element;
+    component: ({ className, title, description, images, maxCount, columnCount, uploadLabel, coverBadgeText, variant, selectedIndexes, selectedIndex, showCoverBadge, accept, disabled, imagePadding, imageFit, onUpload, onRemove, onSelect, }: import("../props").UploaderProps) => React.JSX.Element;
     tags: string[];
     argTypes: {
         variant: {
@@ -24,6 +24,10 @@ declare const _default: {
         imagePadding: {
             control: string;
         };
+        imageFit: {
+            control: string;
+            options: string[];
+        };
         selectedIndexes: {
             control: string;
         };

package/dist/components/Uploader/stories/Uploader.stories.js

@@ -47,6 +47,7 @@ exports.default = {
         showCoverBadge: { control: 'boolean' },
         disabled: { control: 'boolean' },
         imagePadding: { control: 'text' },
+        imageFit: { control: 'select', options: ['cover', 'contain'] },
         selectedIndexes: { control: 'object' },
     },
 };

package/package.json

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