pmg-ui-kit 0.0.39 → 0.0.41

package/dist/icons/SaveIcon.d.ts

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

package/dist/icons/SaveIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SaveIcon = ({ 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-device-floppy", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" }), _jsx("path", { d: "M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" }), _jsx("path", { d: "M14 4l0 4l-6 0l0 -4" })] }));

package/dist/index.d.ts

@@ -18,6 +18,8 @@ export * from './ui/atoms/Subheader';
 export * from './ui/atoms/Text';
 export * from './ui/atoms/Textarea';
 export * from './ui/atoms/Tooltip';
+export * from './ui/components/Accordion';
+export * from './ui/components/DragAndDropList';
 export * from './ui/components/Form';
 export * from './ui/components/FormElementContainer';
 export * from './ui/components/FormElementInputWithLink';
@@ -56,5 +58,6 @@ export * from './icons/PercentageIcon';
 export * from './icons/PlusIcon';
 export * from './icons/RefreshIcon';
 export * from './icons/SaveDiscIcon';
+export * from './icons/SaveIcon';
 export * from './icons/TrashIcon';
 export * from './icons/UserPlusIcon';

package/dist/index.js

@@ -18,6 +18,8 @@ export * from './ui/atoms/Subheader';
 export * from './ui/atoms/Text';
 export * from './ui/atoms/Textarea';
 export * from './ui/atoms/Tooltip';
+export * from './ui/components/Accordion';
+export * from './ui/components/DragAndDropList';
 export * from './ui/components/Form';
 export * from './ui/components/FormElementContainer';
 export * from './ui/components/FormElementInputWithLink';
@@ -56,5 +58,6 @@ export * from './icons/PercentageIcon';
 export * from './icons/PlusIcon';
 export * from './icons/RefreshIcon';
 export * from './icons/SaveDiscIcon';
+export * from './icons/SaveIcon';
 export * from './icons/TrashIcon';
 export * from './icons/UserPlusIcon';

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

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+interface AccordionProps {
+    title: ReactNode;
+    content: ReactNode;
+    defaultOpen?: boolean;
+    className?: string;
+}
+export declare const Accordion: ({ title, content, defaultOpen, className }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/components/Accordion.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+export const Accordion = ({ title, content, defaultOpen, className }) => {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const [contentHeight, setContentHeight] = useState(defaultOpen ? undefined : 0);
+    const contentRef = useRef(null);
+    useEffect(() => {
+        if (contentRef.current) {
+            if (isOpen) {
+                setContentHeight(contentRef.current.scrollHeight);
+            }
+            else {
+                setContentHeight(0);
+            }
+        }
+    }, [isOpen]);
+    const toggleAccordion = () => {
+        setIsOpen(!isOpen);
+    };
+    return (_jsxs("div", { className: `border border-gray-200 rounded-lg bg-white ${className}`, children: [_jsxs("div", { className: "flex items-center justify-between p-2 cursor-pointer hover:bg-gray-50 transition-colors", onClick: toggleAccordion, children: [_jsx("div", { className: "flex-1", children: title }), _jsx("div", { className: "ml-6", children: _jsx("div", { className: `text-gray-500 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`, children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 16 16", fill: "currentColor", children: _jsx("path", { d: "M4 6l4 4 4-4H4z" }) }) }) })] }), _jsx("div", { className: "overflow-hidden transition-all duration-300 ease-in-out", style: { height: contentHeight }, children: _jsx("div", { ref: contentRef, className: "p-4 pt-0 border-t border-gray-100", children: content }) })] }));
+};

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

@@ -1,12 +1,11 @@
-import { ReactNode } from 'react';
-interface DragAndDropItem {
+import { type ReactNode } from 'react';
+export interface DragAndDropItem {
     id: string;
     content: ReactNode;
 }
-interface DragAndDropListProps {
+export 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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
+import { GripVerticalIcon } from '../../icons/GripVerticalIcon';
 export const DragAndDropList = ({ items, onItemsChange, className = "" }) => {
     const [draggedItem, setDraggedItem] = useState(null);
     const [dragOverIndex, setDragOverIndex] = useState(null);
@@ -33,10 +34,10 @@ export const DragAndDropList = ({ items, onItemsChange, className = "" }) => {
         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 
+            p-2 border-2 border-dashed border-pmg-blue 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' : ''}
+            ${draggedItem === item.id ? 'opacity-60 bg-blue-100 border-blue-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))) }));
+            hover:border-blue-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: _jsx(GripVerticalIcon, {}) }), _jsx("div", { className: "flex-1", children: item.content })] }) }, item.id))) }));
 };

package/package.json

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