pmg-ui-kit 0.0.35 → 0.0.37

package/dist/icons/InfoIcon.d.ts

@@ -0,0 +1,8 @@
+type InfoIconProps = {
+    onClick?: () => void;
+    width?: number;
+    height?: number;
+    color?: string;
+};
+export declare const InfoIcon: ({ onClick, width, height, color }: InfoIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/icons/InfoIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const InfoIcon = ({ onClick, width = 24, height = 24, color = "currentColor" }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", onClick: onClick, className: "icon icon-tabler icons-tabler-outline icon-tabler-info-square", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M12 9h.01" }), _jsx("path", { d: "M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z" }), _jsx("path", { d: "M11 12h1v4h1" })] }));

package/dist/icons/TrashIcon.d.ts

@@ -1,8 +1,8 @@
 type TrashIconProps = {
     onClick?: () => void;
-    className?: string;
-    strokeColor?: string;
-    size?: number;
+    width?: number;
+    height?: number;
+    color?: string;
 };
-export declare const TrashIcon: ({ className, onClick, strokeColor }: TrashIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TrashIcon: ({ onClick, width, height, color }: TrashIconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/icons/TrashIcon.js

@@ -1,2 +1,2 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export const TrashIcon = ({ className, onClick, strokeColor }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: strokeColor || "currentColor", className: `w-6 h-6 inline ${className}`, onClick: onClick, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" }) }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const TrashIcon = ({ onClick, width = 24, height = 24, color = "currentColor" }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", onClick: onClick, className: "icon icon-tabler icons-tabler-outline icon-tabler-trash", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M4 7l16 0" }), _jsx("path", { d: "M10 11l0 6" }), _jsx("path", { d: "M14 11l0 6" }), _jsx("path", { d: "M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" }), _jsx("path", { d: "M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" })] }));

package/dist/ui/atoms/InputTypeFileWithListing.js

@@ -19,6 +19,6 @@ export const InputTypeFileWithListing = ({ accept, className, handleChangeFilesL
                     _jsx("button", { onClick: () => {
                             setFilesList(filesList.filter((f) => f !== file));
                             handleChangeFilesList(filesList);
-                        }, children: _jsx(TrashIcon, { strokeColor: "red" }) }, index),
+                        }, children: _jsx(TrashIcon, { color: "red" }) }, index),
                 ]), globalTableCellsClassNames: "!py-2", tableCellsListClassNames: ["", "text-right"], hideColumnNames: true }))] }));
 };

package/dist/ui/atoms/Modal.d.ts

@@ -10,7 +10,7 @@ type ModalProps = {
     cancelBtnLabel?: string;
     cancelBtnClassname?: string;
     hideButtons?: boolean;
-    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
 };
 export declare const Modal: ({ show, handleOnClose, handleOnAccept, header, content, okBtnLabel, okBtnClassname, cancelBtnLabel, cancelBtnClassname, hideButtons, size }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/atoms/Modal.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Modal as FlowbiteModal } from "flowbite-react";
 import { Button } from "./Button";
-export const Modal = ({ show, handleOnClose, handleOnAccept, header, content, okBtnLabel = "Ok", okBtnClassname, cancelBtnLabel = "Cancel", cancelBtnClassname, hideButtons = false, size = "md" }) => {
+export const Modal = ({ show, handleOnClose, handleOnAccept, header, content, okBtnLabel = "Ok", okBtnClassname, cancelBtnLabel = "Cancel", cancelBtnClassname, hideButtons = false, size = "xl" }) => {
     return (_jsxs(FlowbiteModal, { show: show, onClose: () => handleOnClose(), size: size, children: [_jsx(FlowbiteModal.Header, { children: header }), _jsx(FlowbiteModal.Body, { children: content }), !hideButtons &&
                 _jsxs(FlowbiteModal.Footer, { className: "flex justify-between", children: [_jsx(Button, { type: "b-primary", className: okBtnClassname, onClick: () => handleOnAccept(), text: okBtnLabel }), _jsx(Button, { type: "b-default", className: cancelBtnClassname, onClick: () => handleOnClose(), text: cancelBtnLabel })] })] }));
 };

package/dist/ui/components/DragAndDropList.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+interface DragAndDropItem {
+    id: string;
+    content: ReactNode;
+}
+interface DragAndDropListProps {
+    items: DragAndDropItem[];
+    onItemsChange: (newItems: DragAndDropItem[]) => void;
+    className?: string;
+}
+export declare const DragAndDropList: ({ items, onItemsChange, className }: DragAndDropListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/components/DragAndDropList.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+export const DragAndDropList = ({ items, onItemsChange, className = "" }) => {
+    const [draggedItem, setDraggedItem] = useState(null);
+    const [dragOverIndex, setDragOverIndex] = useState(null);
+    const handleDragStart = (e, itemId) => {
+        setDraggedItem(itemId);
+        e.dataTransfer.effectAllowed = 'move';
+    };
+    const handleDragEnd = () => {
+        setDraggedItem(null);
+        setDragOverIndex(null);
+    };
+    const handleDragOver = (e, index) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        setDragOverIndex(index);
+    };
+    const handleDragLeave = () => {
+        setDragOverIndex(null);
+    };
+    const handleDrop = (e, dropIndex) => {
+        e.preventDefault();
+        if (!draggedItem)
+            return;
+        const draggedIndex = items.findIndex(item => item.id === draggedItem);
+        if (draggedIndex === -1 || draggedIndex === dropIndex)
+            return;
+        const newItems = [...items];
+        const [removed] = newItems.splice(draggedIndex, 1);
+        newItems.splice(dropIndex, 0, removed);
+        onItemsChange(newItems);
+        setDragOverIndex(null);
+    };
+    return (_jsx("div", { className: `space-y-2 ${className}`, children: items.map((item, index) => (_jsx("div", { draggable: true, onDragStart: (e) => handleDragStart(e, item.id), onDragEnd: handleDragEnd, onDragOver: (e) => handleDragOver(e, index), onDragLeave: handleDragLeave, onDrop: (e) => handleDrop(e, index), className: `
+            p-4 border-2 border-dashed border-gray-300 rounded-lg cursor-move 
+            transition-all duration-200 bg-white
+            ${draggedItem === item.id ? 'opacity-60 bg-gray-100 border-gray-400 shadow-lg scale-105' : ''}
+            ${dragOverIndex === index ? 'border-blue-500 bg-blue-50 scale-102' : ''}
+            hover:border-gray-400 hover:shadow-md
+          `, children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "text-gray-400 cursor-grab active:cursor-grabbing", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: [_jsx("circle", { cx: "3", cy: "3", r: "1" }), _jsx("circle", { cx: "3", cy: "8", r: "1" }), _jsx("circle", { cx: "3", cy: "13", r: "1" }), _jsx("circle", { cx: "8", cy: "3", r: "1" }), _jsx("circle", { cx: "8", cy: "8", r: "1" }), _jsx("circle", { cx: "8", cy: "13", r: "1" })] }) }), _jsx("div", { className: "flex-1", children: item.content })] }) }, item.id))) }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pmg-ui-kit",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "description": "Components library for PMG projects",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",