pixelize-design-library 2.1.23 → 2.1.25

package/dist/Components/Reorder/Reorder.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
 import { ReorderItem, ReorderListProps } from "./ReorderProps";
-declare const ReorderList: <T extends ReorderItem>({ label, items, onReorder, }: ReorderListProps<T>) => JSX.Element;
+type ExtendedReorderListProps<T extends ReorderItem> = ReorderListProps<T> & {
+    showRemoveIcon?: boolean;
+    onRemove?: (id: string) => void;
+};
+declare const ReorderList: <T extends ReorderItem>({ label, items, onReorder, showRemoveIcon, onRemove, }: ExtendedReorderListProps<T>) => JSX.Element;
 export default ReorderList;

package/dist/Components/Reorder/Reorder.js

@@ -20,7 +20,7 @@ var dnd_1 = require("@hello-pangea/dnd");
 var lucide_react_1 = require("lucide-react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var ReorderList = function (_a) {
-    var _b = _a.label, label = _b === void 0 ? "" : _b, items = _a.items, onReorder = _a.onReorder;
+    var _b = _a.label, label = _b === void 0 ? "" : _b, items = _a.items, onReorder = _a.onReorder, _c = _a.showRemoveIcon, showRemoveIcon = _c === void 0 ? false : _c, onRemove = _a.onRemove;
     var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
     var handleDragEnd = function (result) {
         if (!result.destination)
@@ -39,11 +39,12 @@ var ReorderList = function (_a) {
         react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: handleDragEnd },
             react_1.default.createElement(dnd_1.Droppable, { droppableId: "item-list", direction: "horizontal" }, function (provided) { return (react_1.default.createElement(react_2.HStack, __assign({ ref: provided.innerRef }, provided.droppableProps, { spacing: 4, overflowX: "auto" }),
                 items.map(function (item, index) { return (react_1.default.createElement(dnd_1.Draggable, { key: item.id, draggableId: item.id, index: index }, function (provided) {
-                    var _a, _b, _c;
+                    var _a, _b, _c, _d;
                     return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { position: "relative", border: "0.063rem solid", borderColor: (_a = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _a === void 0 ? void 0 : _a[300], borderRadius: "md", overflow: "hidden" }),
                         react_1.default.createElement(react_2.Image, { src: item.previewUrl, alt: (_b = item.name) !== null && _b !== void 0 ? _b : "item-".concat(index), boxSize: "7.5rem", objectFit: "cover" }),
                         react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.GripVertical, { size: 16, color: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[500] }), "aria-label": "Drag", size: "sm", position: "absolute", top: 1, left: 1, variant: "ghost" }),
-                        react_1.default.createElement(react_2.Badge, { position: "absolute", colorScheme: "gray", variant: "solid", bottom: 1, right: 1 }, index + 1)));
+                        react_1.default.createElement(react_2.Badge, { position: "absolute", colorScheme: "gray", variant: "solid", bottom: 1, right: 1 }, index + 1),
+                        showRemoveIcon && (react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.X, { size: 16, color: (_d = colors === null || colors === void 0 ? void 0 : colors.red) === null || _d === void 0 ? void 0 : _d[500] }), "aria-label": "Remove", size: "sm", position: "absolute", top: 1, right: 1, variant: "ghost", onClick: function () { return onRemove === null || onRemove === void 0 ? void 0 : onRemove(item.id); } }))));
                 })); }),
                 provided.placeholder)); }))));
 };

package/dist/Components/Slider/Slider.d.ts

@@ -8,7 +8,7 @@ type SliderImage = {
     id: string | number;
     label?: string;
     previewUrl: string;
-    order?: number;
+    order: number;
 };
 declare const Slider: React.FC<ImageSliderProps>;
 export default Slider;

package/dist/Components/Slider/Slider.js

@@ -22,6 +22,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
@@ -47,7 +56,8 @@ var Slider = function (_a) {
         };
     }, [currentIndex, interval]);
     return (react_1.default.createElement(react_2.Box, { position: "relative", w: "100%", h: "30rem", overflow: "hidden" },
-        react_1.default.createElement(react_2.Flex, { w: "".concat(images.length * 100, "vw"), transform: "translateX(-".concat(currentIndex * 100, "vw)"), transition: "transform 0.5s ease" }, images.map(function (image, idx) { return (react_1.default.createElement(react_2.Box, { key: idx, w: "100vw", h: "30rem", flexShrink: 0, display: "flex", justifyContent: "center", alignItems: "center" },
+        react_1.default.createElement(react_2.Flex, { w: "".concat(images.length * 100, "vw"), transform: "translateX(-".concat(currentIndex * 100, "vw)"), transition: "transform 0.5s ease" }, __spreadArray([], images, true).sort(function (a, b) { return a.order - b.order; })
+            .map(function (image, idx) { return (react_1.default.createElement(react_2.Box, { key: image.id, w: "100vw", h: "30rem", flexShrink: 0, display: "flex", justifyContent: "center", alignItems: "center" },
             react_1.default.createElement(react_2.Image, { src: image.previewUrl, alt: "Slide ".concat(idx + 1), objectFit: "cover", w: "100vw", h: "100%" }))); })),
         isArrow && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.ChevronLeft, { color: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[800] }), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200] } }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.1.23",
+  "version": "2.1.25",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",