ar-design 0.2.95 → 0.2.97

package/dist/assets/css/components/data-display/dnd/animations.css

@@ -1,11 +1,11 @@
 @keyframes endItem {
   0% {
-    transform: scale(1);
+    box-shadow: 0 0 0 0px var(--blue-500);
   }
   50% {
-    transform: scale(1.1);
+    box-shadow: 0 0 0 5px var(--blue-100);
   }
   100% {
-    transform: scale(1);
+    box-shadow: 0 0 0 7.5px transparent;
   }
 }

package/dist/assets/css/components/data-display/dnd/dnd.css

@@ -3,26 +3,24 @@
   flex-direction: column;
   gap: 1rem 0;
 }
+
 .ar-dnd > div {
   position: relative;
   display: flex;
   flex-direction: row;
+  justify-content: center;
   align-items: center;
   gap: 0 0.5rem;
   width: 100%;
-  border-radius: var(--border-radius-lg);
   cursor: move;
   overflow: hidden;
+  transition: transform 0.3s ease, opacity 0.3s ease;
 }
 .ar-dnd > div.drag-item {
   opacity: 0.5;
 }
 .ar-dnd > div.over-item {
   position: relative;
-  /* padding-bottom: 1rem; */
-  /* border-bottom: solid 2px var(--gray-500); */
-  /* box-shadow: 0 0 0 1.5px rgba(var(--success-rgb), 0.25), 0 0 0 5px rgba(var(--success-rgb), 0.15); */
-  /* transition: box-shadow 250ms ease-in-out; */
 }
 .ar-dnd > div.over-item::after {
   position: absolute;
@@ -39,26 +37,10 @@
   animation: endItem ease-in-out 1s 0s 1 normal both;
 }
 
-.ar-dnd > div > .move {
-  flex: 1rem;
-  width: 100%;
-  height: 1.5rem;
-  border-right: transparent;
-}
 .ar-dnd > div > .move {
   display: flex;
-  flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: 0.25rem 0;
-  cursor: move;
-}
-.ar-dnd > div > .move > span {
-  display: block;
-  background-color: var(--gray-500);
-  width: 90%;
-  height: 2px;
-  border-radius: var(--border-radius-pill);
 }
 
 .ar-dnd > div > .content {

package/dist/assets/css/components/form/radio/radio.css

@@ -47,5 +47,23 @@
   border-radius: var(--border-radius-pill);
   z-index: 1;
 }
+.ar-radio-wrapper > label > span > .past-trace {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: inline-block;
+  content: "";
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--border-radius-pill);
+  z-index: 1;
+}
+
+.ar-radio-wrapper > label > .validation {
+  color: var(--danger);
+  font-size: 0.8rem;
+  font-weight: 400;
+}
 
 @import url("./core/border.css");

package/dist/components/data-display/dnd/index.js

@@ -1,17 +1,19 @@
 "use client";
 import React, { useEffect, useRef } from "react";
 import "../../../assets/css/components/data-display/dnd/dnd.css";
+import { ARIcon } from "../../icons";
 const DnD = function ({ data, renderItem, onChange }) {
     // refs
     const _arDnD = useRef(null);
     const _dragItem = useRef();
+    // useEffects
     useEffect(() => {
         if (!_arDnD.current || data.length === 0)
             return;
         _arDnD.current.childNodes.forEach((item) => {
-            const targetItem = item;
+            const _item = item;
             // Events
-            targetItem.ondragstart = (event) => {
+            _item.ondragstart = (event) => {
                 const dragItem = event.currentTarget;
                 _dragItem.current = dragItem;
                 dragItem.classList.add("drag-item");
@@ -26,7 +28,7 @@ const DnD = function ({ data, renderItem, onChange }) {
                     });
                 }
             };
-            targetItem.ondragover = (event) => {
+            _item.ondragover = (event) => {
                 event.preventDefault();
                 const overItem = event.currentTarget;
                 const rect = overItem.getBoundingClientRect();
@@ -34,53 +36,51 @@ const DnD = function ({ data, renderItem, onChange }) {
                     window.scrollBy(0, -20);
                 if (rect.bottom > window.innerHeight - 150)
                     window.scrollBy(0, 20);
-                if (!overItem.classList.contains("over-item")) {
-                    overItem.classList.add("over-item");
-                }
-            };
-            targetItem.ondragleave = (event) => {
-                const leaveItem = event.currentTarget;
-                leaveItem.classList.remove("over-item");
-            };
-            targetItem.ondrop = (event) => {
-                event.preventDefault();
-                const dropItem = event.currentTarget;
-                // Cleaner...
-                dropItem.classList.remove("over-item");
+                // if (!overItem.classList.contains("over-item")) {
+                //   overItem.classList.add("over-item");
+                // }
                 const nodes = document.querySelectorAll("[data-id='ar-firewall']");
                 nodes.forEach((node) => node.remove());
-                if (_dragItem.current !== dropItem) {
+                if (_dragItem.current !== overItem) {
                     if (_arDnD.current && _dragItem.current) {
                         const dragItemIndex = [..._arDnD.current.children].indexOf(_dragItem.current);
-                        const dropItemIndex = [..._arDnD.current.children].indexOf(dropItem);
+                        const dropItemIndex = [..._arDnD.current.children].indexOf(overItem);
                         if (dragItemIndex < dropItemIndex) {
-                            // Render Order
-                            _arDnD.current.insertBefore(_dragItem.current, dropItem.nextSibling);
+                            _arDnD.current.insertBefore(_dragItem.current, overItem.nextSibling);
                         }
                         else {
-                            // Render Order
-                            _arDnD.current.insertBefore(_dragItem.current, dropItem);
+                            _arDnD.current.insertBefore(_dragItem.current, overItem);
                         }
-                        // Data Order
                         data.splice(dropItemIndex, 0, data.splice(dragItemIndex, 1)[0]);
                     }
                     onChange(data);
                 }
             };
-            targetItem.ondragend = (event) => {
+            // _item.ondragleave = (event) => {
+            //   const leaveItem = event.currentTarget as HTMLElement;
+            //   leaveItem.classList.remove("over-item");
+            // };
+            // _item.ondrop = (event) => {
+            //   // const dropItem = event.currentTarget as HTMLElement;
+            //   // Temizlik...
+            //   // dropItem.classList.remove("over-item");
+            // };
+            _item.ondragend = (event) => {
                 const item = event.currentTarget;
                 item.classList.remove("drag-item");
                 item.classList.add("end-item");
-                setTimeout(() => item.classList.remove("end-item"), 1000);
+                setTimeout(() => {
+                    item.classList.remove("end-item");
+                    if (item.classList.length === 0)
+                        item.removeAttribute("class");
+                }, 1000);
             };
         });
         _arDnD.current.ondragover = (event) => event.preventDefault();
     }, [data]);
     return (React.createElement("div", { ref: _arDnD, className: "ar-dnd" }, data.map((item, index) => (React.createElement("div", { key: index, draggable: true },
         React.createElement("div", { className: "move" },
-            React.createElement("span", null),
-            React.createElement("span", null),
-            React.createElement("span", null)),
+            React.createElement(ARIcon, { icon: "GripVertical", fill: "var(--blue-500)", size: 18 })),
         React.createElement("div", { className: "content" }, renderItem(item, index)))))));
 };
 export default DnD;

package/dist/components/form/radio/IProps.d.ts

@@ -27,5 +27,8 @@ interface IProps extends IVariant, IColors, IBorder, IIcon, ISize, IUpperCase, I
     trace?: {
         color: Color;
     };
+    pastTrace?: {
+        color: Color;
+    };
 }
 export default IProps;

package/dist/components/form/radio/index.js

@@ -2,14 +2,17 @@
 import React, { forwardRef, useRef } from "react";
 import "../../../assets/css/components/form/radio/radio.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
-const Radio = forwardRef(({ label, size = "normal", color = "blue", border = { radius: "pill" }, trace, upperCase, ...attributes }, ref) => {
+const Radio = forwardRef(({ label, size = "normal", color = "blue", border = { radius: "pill" }, trace, pastTrace, upperCase, validation, ...attributes }, ref) => {
     // refs
     const _checkbox = useRef(null);
     const _checkboxClassName = ["ar-radio"];
     const _traceClassName = ["trace", "filled"];
+    const _pastTraceClassName = ["past-trace", "filled"];
     _checkboxClassName.push(...Utils.GetClassName("filled", undefined, attributes.checked ? color : "light", border, size, undefined, attributes.className));
     if (trace && Object.keys(trace).length > 0)
         _traceClassName.push(trace.color);
+    if (pastTrace && Object.keys(pastTrace).length > 0)
+        _pastTraceClassName.push(pastTrace.color);
     return (React.createElement("div", { className: "ar-radio-wrapper" },
         React.createElement("label", null,
             React.createElement("input", { ref: ref, type: "radio", ...attributes, size: 0, onChange: (event) => {
@@ -23,7 +26,9 @@ const Radio = forwardRef(({ label, size = "normal", color = "blue", border = { r
             React.createElement("span", null,
                 React.createElement("span", { ref: _checkbox, className: _checkboxClassName.map((c) => c).join(" ") }),
                 trace && Object.keys(trace).length > 0 && (React.createElement("span", { className: _traceClassName.map((c) => c).join(" ") })),
-                label && React.createElement("span", { className: "label" }, upperCase ? label.toUpperCase() : label)))));
+                pastTrace && Object.keys(pastTrace).length > 0 && (React.createElement("span", { className: _pastTraceClassName.map((c) => c).join(" ") })),
+                label && React.createElement("span", { className: "label" }, upperCase ? label.toUpperCase() : label)),
+            validation?.text && React.createElement("span", { className: "validation" }, validation.text))));
 });
 Radio.displayName = "Radio";
 export default Radio;

package/dist/components/form/upload/index.js

@@ -130,8 +130,10 @@ const Upload = ({ text, file, onChange, allowedTypes, maxSize, type = "list", mu
             _validationErrors.current = [];
             if (_input.current) {
                 if (multiple) {
-                    if (selectedFiles.length === 0)
+                    if (selectedFiles.length === 0) {
+                        onChange(fileFormData, [], [], false);
                         return;
+                    }
                     // Seçilmiş olan dosyalar validasyona gönderiliyor.
                     selectedFiles.forEach((f) => handleValidationFile(f));
                     const inValidFiles = Array.from(new Set(_validationErrors.current));
@@ -161,22 +163,27 @@ const Upload = ({ text, file, onChange, allowedTypes, maxSize, type = "list", mu
                         dataTransfer.items.add(selectedFile);
                         _input.current.files = dataTransfer.files;
                     }
+                    else {
+                        onChange(undefined, null, "");
+                    }
                 }
             }
         })();
     }, [selectedFiles, selectedFile]);
     useEffect(() => {
-        if (_firstLoad.current)
+        if (_firstLoad.current) {
+            // if (multiple && file.length === 0) {
+            //   setSelectedFiles([]);
+            // } else {
+            //   if (!file) setSelectedFile(undefined);
+            // }
             return;
+        }
         if (multiple) {
-            if (file.length === 0)
-                return;
             setSelectedFiles(file);
             _firstLoad.current = true;
         }
         else {
-            if (!file)
-                return;
             setSelectedFile(file);
             _firstLoad.current = true;
         }

package/dist/components/icons/Compiler.js

@@ -72,6 +72,8 @@ class Icon {
                     case "Filter":
                         return (React.createElement(React.Fragment, null,
                             React.createElement("path", { d: "M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5" })));
+                    case "GripVertical":
+                        return (React.createElement("path", { d: "M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0" }));
                     case "Import":
                         return (React.createElement(React.Fragment, null,
                             React.createElement("path", { d: "M3 15C3 17.8284 3 19.2426 3.87868 20.1213C4.75736 21 6.17157 21 9 21H15C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),

package/dist/libs/types/index.d.ts

@@ -71,7 +71,7 @@ export type Errors<TData> = Partial<{
 export type MimeTypes = "image/jpeg" | "image/png" | "image/gif" | "image/webp" | "image/svg+xml" | "image/bmp" | "image/tiff" | "application/pdf" | "application/msword" | "application/vnd.openxmlformats-officedocument.wordprocessingml.document" | "application/vnd.ms-excel" | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" | "application/vnd.openxmlformats-officedocument.presentationml.presentation" | "application/zip" | "application/x-rar-compressed" | "application/x-7z-compressed" | "application/gzip" | "application/json" | "application/xml" | "text/plain" | "text/csv" | "text/html" | "video/mp4" | "video/quicktime" | "video/x-msvideo" | "video/x-matroska" | "video/webm" | "video/x-flv" | "audio/mpeg" | "audio/wav" | "audio/ogg" | "audio/aac" | "audio/flac" | "application/octet-stream";
 export type FileCategory = "image" | "document" | "spreadsheet" | "presentation" | "archive" | "text" | "video" | "audio" | "json" | "xml" | "binary" | "other";
 export type IconVariants = "linear" | "fill";
-export type Icons = "Add" | "ArrowLeft" | "ArrowRight" | "Bold" | "BulletList" | "CameraReels" | "CheckAll" | "CloseCircle" | "CloseSquare" | "CloudUpload" | "Document" | "Download" | "ExclamationCircle" | "ExclamationDiamond" | "Eye" | "File" | "FileEarmark" | "FileTypeCsv" | "FileTypeDoc" | "FileTypeDocx" | "FileTypeHtml" | "FileTypeJson" | "FileTypePdf" | "FileTypePptx" | "FileTypeTxt" | "FileTypeXls" | "FileTypeXlsx" | "FileTypeXml" | "FileTypeZip" | "Filter" | "Folder" | "Import" | "Italic" | "NumberList" | "Strikethrough" | "TextAlingCenter" | "TextAlingLeft" | "TextAlingRight" | "TickCircle" | "Trash" | "Underline" | "Upload" | "Warning" | "XCircle";
+export type Icons = "Add" | "ArrowLeft" | "ArrowRight" | "Bold" | "BulletList" | "CameraReels" | "CheckAll" | "CloseCircle" | "CloseSquare" | "CloudUpload" | "Document" | "Download" | "ExclamationCircle" | "ExclamationDiamond" | "Eye" | "File" | "FileEarmark" | "FileTypeCsv" | "FileTypeDoc" | "FileTypeDocx" | "FileTypeHtml" | "FileTypeJson" | "FileTypePdf" | "FileTypePptx" | "FileTypeTxt" | "FileTypeXls" | "FileTypeXlsx" | "FileTypeXml" | "FileTypeZip" | "Filter" | "Folder" | "GripVertical" | "Import" | "Italic" | "NumberList" | "Strikethrough" | "TextAlingCenter" | "TextAlingLeft" | "TextAlingRight" | "TickCircle" | "Trash" | "Underline" | "Upload" | "Warning" | "XCircle";
 export type PieChartDataType = {
     value: number;
     text: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.2.95",
+  "version": "0.2.97",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",