ar-design 0.1.94 → 0.1.96

package/dist/assets/css/components/data-display/table/media-queries/large.css

@@ -0,0 +1,3 @@
+/* Large (Tablet Yatay & Büyük Tablet) */
+@media (min-width: 768px) and (max-width: 991px) {
+}

package/dist/assets/css/components/data-display/table/media-queries/medium.css

@@ -0,0 +1,3 @@
+/* Medium (Tablet Dikey & Büyük Telefonlar) */
+@media (min-width: 576px) and (max-width: 767px) {
+}

package/dist/assets/css/components/data-display/table/media-queries/small.css

@@ -0,0 +1,3 @@
+/* Small (Küçük Telefonlar) */
+@media (max-width: 575px) {
+}

package/dist/assets/css/components/data-display/table/media-queries/x-large.css

@@ -0,0 +1,3 @@
+/* X-Large (Standart Laptop & Küçük Desktop) */
+@media (min-width: 992px) and (max-width: 1199px) {
+}

package/dist/assets/css/components/data-display/table/media-queries/x-small.css

@@ -0,0 +1,3 @@
+/* X-Small (Ekstra Küçük Telefonlar, Saat vb.) */
+@media (max-width: 320px) {
+}

package/dist/assets/css/components/data-display/table/media-queries/xx-large.css

@@ -0,0 +1,3 @@
+/* XX-Large (Laptop & Büyük Desktop Ekranlar) */
+@media (min-width: 1200px) and (max-width: 1399px) {
+}

package/dist/assets/css/components/data-display/table/media-queries/xxx-large.css

@@ -0,0 +1,4 @@
+/* XXX-Large (Büyük Ekranlar: TV, Ultra Geniş Monitörler) */
+
+@media (min-width: 1400px) {
+}

package/dist/assets/css/components/data-display/table/styles.css

@@ -3,6 +3,8 @@
   flex-direction: column;
   background-color: var(--white);
   max-width: 100%;
+  min-width: 100%;
+  width: 1px;
   border-radius: var(--border-radius-lg);
   box-shadow: 0px 10px 15px -5px rgba(var(--black-rgb), 0.1);
   overflow: hidden;
@@ -78,6 +80,7 @@
   color: var(--gray-700);
   -webkit-text-stroke: 0.25px var(--gray-700);
   text-align: left;
+  text-wrap: nowrap;
   transition: background 250ms, box-shadow 250ms ease-in-out;
   z-index: 2;
 }

package/dist/assets/css/components/feedback/popover/styles.css

@@ -4,6 +4,8 @@
 }
 
 .ar-popover {
+  visibility: hidden;
+  opacity: 0;
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -14,6 +16,7 @@
   border-radius: var(--border-radius-sm);
   box-shadow: 0 0 15px -2.5px rgba(var(--black-rgb), 0.1);
   z-index: 1051;
+  transition: visibility 250ms, opacity 250ms;
 }
 
 .ar-popover > .content {

package/dist/assets/css/components/form/date-picker/calendar/calendar.css

@@ -1,4 +1,6 @@
 .ar-date-calendar {
+  visibility: hidden;
+  opacity: 0;
   position: absolute;
   top: 0;
   left: 0;

package/dist/assets/css/components/form/date-picker/calendar/header.css

@@ -30,9 +30,57 @@
 }
 
 /* #region Prev and Next Buttons */
-.ar-date-calendar > .header > .select-field > .prev,
-.ar-date-calendar > .header > .select-field > .next {
+.ar-date-calendar > .header > .select-field > .prev > span,
+.ar-date-calendar > .header > .select-field > .next > span {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  border: solid 2px transparent;
+  transform: rotate(45deg);
   user-select: none;
+  cursor: pointer;
+}
+.ar-date-calendar > .header > .select-field > .prev > span::before,
+.ar-date-calendar > .header > .select-field > .next > span::before {
+  border: solid 2px transparent;
+}
+
+.ar-date-calendar > .header > .select-field > .prev > span:first-child {
+  position: relative;
+  border-left-color: var(--primary);
+  border-bottom-color: var(--primary);
+}
+.ar-date-calendar > .header > .select-field > .prev > span:first-child::before {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  border-left-color: rgba(var(--primary-rgb), 0.25);
+  border-bottom-color: rgba(var(--primary-rgb), 0.25);
+}
+.ar-date-calendar > .header > .select-field > .prev > span:last-child {
+  border-left-color: var(--gray-500);
+  border-bottom-color: var(--gray-500);
+  margin-left: 0.3rem;
+}
+
+.ar-date-calendar > .header > .select-field > .next > span:first-child {
+  border-top-color: var(--gray-500);
+  border-right-color: var(--gray-500);
+  margin-right: 0.3rem;
+}
+.ar-date-calendar > .header > .select-field > .next > span:last-child {
+  position: relative;
+  border-top-color: var(--primary);
+  border-right-color: var(--primary);
+}
+.ar-date-calendar > .header > .select-field > .next > span:last-child::before {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  border-top-color: rgba(var(--primary-rgb), 0.25);
+  border-right-color: rgba(var(--primary-rgb), 0.25);
 }
 /* #endregion Prev and Next Buttons */
 /* Prev and Next Buttons */

package/dist/assets/css/components/form/select/options.css

@@ -1,4 +1,6 @@
 .ar-select-options {
+  visibility: hidden;
+  opacity: 0;
   position: absolute;
   top: 0;
   background-color: var(--white);

package/dist/assets/css/components/layout/layout.css

@@ -13,24 +13,18 @@
 .ar-layout > aside.ar-aside.left {
   display: flex;
   flex-direction: column;
-  min-width: 280px;
-  padding: 0 1rem;
   border-right: solid 1px var(--gray-200);
 }
 .ar-layout > aside.ar-aside.left > .logo {
   display: flex;
   align-items: center;
-  min-height: 5rem;
-  margin-bottom: 1rem;
 }
 .ar-layout > aside.ar-aside.right {
-  width: 100%;
 }
 
 .ar-layout > main {
   display: flex;
   flex-direction: column;
-  width: 100%;
 }
 .ar-layout > main > header {
   display: flex;
@@ -39,8 +33,6 @@
   top: 0;
   background-color: rgba(var(--white-rgb), 0.5);
   backdrop-filter: blur(5px);
-  height: 5rem;
-  padding: 0 2.5rem;
   box-shadow: 0 10px 10px -15px rgba(var(--black-rgb), 0.25);
   z-index: 10;
 }
@@ -49,26 +41,19 @@
 }
 
 .ar-layout > main > section {
-  width: 1280px;
-  margin: 0 auto;
+  width: 100%;
   height: fit-content;
-  padding: 2.5rem;
+  margin-left: auto;
+  margin-right: auto;
 }
 .ar-layout > main > section.full-width {
-  width: 100%;
-}
-
-/* .ar-layout > main:not(:has(> .ar-aside)) > section {
-  min-width: 100%;
-}
-.ar-layout > main:has(> .ar-aside.left) > section {
-  padding-left: 2rem;
 }
-.ar-layout > main:has(> .ar-aside.left) > section:has(~ .ar-aside.right) {
-  padding: 0 2rem;
-} */
 
 /* Media Queries */
-/* @import url("./media-queries/x-large.css");
+/* @import url("./media-queries/xxx-large.css");
+@import url("./media-queries/xx-large.css");
+@import url("./media-queries/x-large.css");
+@import url("./media-queries/large.css");
 @import url("./media-queries/medium.css");
-@import url("./media-queries/small.css"); */
+@import url("./media-queries/small.css");
+@import url("./media-queries/x-small.css"); */

package/dist/assets/css/components/layout/media-queries/large.css

@@ -0,0 +1,35 @@
+/* Large (Tablet Yatay & Büyük Tablet) */
+@media (min-width: 768px) and (max-width: 991px) {
+  .ar-layout > aside.ar-aside.left {
+    min-width: 3.85rem;
+    max-width: 3.85rem;
+    padding: 0 1rem;
+    overflow: hidden;
+  }
+  .ar-layout > aside.ar-aside.left:hover {
+    min-width: 280px;
+    max-width: 280px;
+  }
+  .ar-layout > aside.ar-aside.left > .logo {
+    visibility: hidden;
+    opacity: 0;
+    height: 5rem;
+    margin-bottom: 1rem;
+  }
+  .ar-layout > aside.ar-aside.right {
+    width: 100%;
+  }
+
+  .ar-layout > main {
+    width: 100%;
+  }
+  .ar-layout > main > header {
+    height: 5rem;
+    padding: 0 2.5rem;
+  }
+
+  .ar-layout > main > section {
+    max-width: none;
+    padding: 2.5rem;
+  }
+}

package/dist/assets/css/components/layout/media-queries/medium.css

@@ -1,21 +1,36 @@
-@media (width <= 991px) {
-  .ar-layout > header > .ar-header-with-wrap {
-    width: 767px !important;
+/* Medium (Tablet Dikey & Büyük Telefonlar) */
+@media (min-width: 576px) and (max-width: 767px) {
+  .ar-layout > aside.ar-aside.left {
+    min-width: 3.85rem;
+    max-width: 3.85rem;
+    padding: 0 1rem;
+    overflow: hidden;
+  }
+  .ar-layout > aside.ar-aside.left:hover {
+    min-width: 280px;
+    max-width: 280px;
+  }
+  .ar-layout > aside.ar-aside.left > .logo {
+    visibility: hidden;
+    opacity: 0;
+    height: 5rem;
+    margin-bottom: 1rem;
   }
 
-  .ar-layout > main {
-    width: 767px !important;
+  .ar-layout > aside.ar-aside.right {
+    width: 100%;
   }
 
-  .ar-layout > main > aside.ar-aside.left {
-    display: none;
+  .ar-layout > main {
+    width: 100%;
   }
-  .ar-layout > main > aside.ar-aside.right {
-    display: none;
+  .ar-layout > main > header {
+    height: 5rem;
+    padding: 0 2.5rem;
   }
 
   .ar-layout > main > section {
-    min-width: 100% !important;
-    padding-left: 0 !important;
+    max-width: none;
+    padding: 2.5rem;
   }
 }

package/dist/assets/css/components/layout/media-queries/small.css

@@ -1,21 +1,36 @@
-@media (width <= 767px) {
-  .ar-layout > header > .ar-header-with-wrap {
-    width: 95% !important;
+/* Small (Küçük Telefonlar) */
+@media (max-width: 575px) {
+  .ar-layout > aside.ar-aside.left {
+    min-width: 3.85rem;
+    max-width: 3.85rem;
+    padding: 0 1rem;
+    overflow: hidden;
+  }
+  .ar-layout > aside.ar-aside.left:hover {
+    min-width: 280px;
+    max-width: 280px;
+  }
+  .ar-layout > aside.ar-aside.left > .logo {
+    visibility: hidden;
+    opacity: 0;
+    height: 5rem;
+    margin-bottom: 1rem;
   }
 
-  .ar-layout > main {
-    width: 95% !important;
+  .ar-layout > aside.ar-aside.right {
+    width: 100%;
   }
 
-  .ar-layout > main > aside.ar-aside.left {
-    display: none;
+  .ar-layout > main {
+    width: 100%;
   }
-  .ar-layout > main > aside.ar-aside.right {
-    display: none;
+  .ar-layout > main > header {
+    height: 5rem;
+    padding: 0 2.5rem;
   }
 
   .ar-layout > main > section {
-    min-width: 100% !important;
-    padding-left: 0 !important;
+    max-width: none;
+    padding: 2.5rem;
   }
 }

package/dist/assets/css/components/layout/media-queries/x-large.css

@@ -1,13 +1,29 @@
-@media (width <= 1280px) {
-  .ar-layout > header > .ar-header-with-wrap {
-    width: 991px !important;
+/* X-Large (Standart Laptop & Küçük Desktop) */
+@media (min-width: 992px) and (max-width: 1199px) {
+  .ar-layout > aside.ar-aside.left {
+    min-width: 280px;
+    max-width: 280px;
+    padding: 0 1rem;
+  }
+  .ar-layout > aside.ar-aside.left > .logo {
+    height: 5rem;
+    margin-bottom: 1rem;
+  }
+
+  .ar-layout > aside.ar-aside.right {
+    width: 100%;
   }
 
   .ar-layout > main {
-    width: 991px !important;
+    width: 100%;
+  }
+  .ar-layout > main > header {
+    height: 5rem;
+    padding: 0 2.5rem;
   }
 
   .ar-layout > main > section {
-    min-width: 791px !important;
+    max-width: 960px;
+    padding: 2.5rem;
   }
 }

package/dist/assets/css/components/layout/media-queries/x-small.css

@@ -0,0 +1,19 @@
+/* X-Small (Ekstra Küçük Telefonlar, Saat vb.) */
+@media (max-width: 320px) {
+  .ar-layout > aside.ar-aside.left {
+    min-width: 3.7rem;
+    max-width: 3.7rem;
+    padding: 0 1rem;
+    overflow: hidden;
+  }
+  .ar-layout > aside.ar-aside.left:hover {
+    min-width: 280px;
+    max-width: 280px;
+  }
+  .ar-layout > aside.ar-aside.left > .logo {
+    visibility: hidden;
+    opacity: 0;
+    height: 5rem;
+    margin-bottom: 1rem;
+  }
+}

package/dist/assets/css/components/layout/media-queries/xx-large.css

@@ -0,0 +1,29 @@
+/* XX-Large (Laptop & Büyük Desktop Ekranlar) */
+@media (min-width: 1200px) and (max-width: 1399px) {
+  .ar-layout > aside.ar-aside.left {
+    min-width: 280px;
+    max-width: 280px;
+    padding: 0 1rem;
+  }
+  .ar-layout > aside.ar-aside.left > .logo {
+    height: 5rem;
+    margin-bottom: 1rem;
+  }
+
+  .ar-layout > aside.ar-aside.right {
+    width: 100%;
+  }
+
+  .ar-layout > main {
+    width: 100%;
+  }
+  .ar-layout > main > header {
+    height: 5rem;
+    padding: 0 2.5rem;
+  }
+
+  .ar-layout > main > section {
+    max-width: 1140px;
+    padding: 2.5rem;
+  }
+}

package/dist/assets/css/components/layout/media-queries/xxx-large.css

@@ -0,0 +1,30 @@
+/* XXX-Large (Büyük Ekranlar: TV, Ultra Geniş Monitörler) */
+
+@media (min-width: 1400px) {
+  .ar-layout > aside.ar-aside.left {
+    min-width: 280px;
+    max-width: 280px;
+    padding: 0 1rem;
+  }
+  .ar-layout > aside.ar-aside.left > .logo {
+    height: 5rem;
+    margin-bottom: 1rem;
+  }
+
+  .ar-layout > aside.ar-aside.right {
+    width: 100%;
+  }
+
+  .ar-layout > main {
+    width: 100%;
+  }
+  .ar-layout > main > header {
+    height: 5rem;
+    padding: 0 2.5rem;
+  }
+
+  .ar-layout > main > section {
+    max-width: 1340px;
+    padding: 2.5rem;
+  }
+}

package/dist/components/{layout → data-display}/grid-system/index.d.ts

@@ -1,4 +1,4 @@
-import "../../../assets/css/components/layout/grid-system/grid-system.css";
+import "../../../assets/css/components/data-display/grid-system/styles.css";
 declare const Grid: {
     Box: import("react").FC<{
         children: import("react").ReactNode;

package/dist/components/{layout → data-display}/grid-system/index.js

@@ -1,7 +1,7 @@
 import Box from "./box/Box";
 import Row from "./row/Row";
 import Column from "./column/Column";
-import "../../../assets/css/components/layout/grid-system/grid-system.css";
+import "../../../assets/css/components/data-display/grid-system/styles.css";
 // @@Export
 const Grid = {
     Box,

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

@@ -209,9 +209,6 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
         return _data;
     }, [data, searchedText, currentPage]);
     // useEffects
-    useEffect(() => {
-        handleScroll();
-    }, [data]);
     useEffect(() => {
         if (!selections || selectionItems.length === 0)
             return;
@@ -237,6 +234,9 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
         }
         setSelectAll(allChecked);
     }, [currentPage]);
+    useEffect(() => {
+        setTimeout(() => handleScroll(), 0);
+    }, []);
     return (React.createElement("div", { ref: _tableWrapper, className: _tableClassName.map((c) => c).join(" ") },
         (title || description || actions || React.Children.count(children) > 0) && (React.createElement("div", { className: "header" },
             React.createElement("div", { className: "title" },

package/dist/components/feedback/popover/index.js

@@ -31,6 +31,8 @@ const Popover = ({ children, title, message, content, onConfirm, windowBlur, con
                 const screenCenter = window.innerHeight / 2;
                 const sx = window.scrollX || document.documentElement.scrollLeft;
                 const sy = window.scrollY || document.documentElement.scrollTop;
+                _arPopover.current.style.visibility = "visible";
+                _arPopover.current.style.opacity = "1";
                 _arPopover.current.style.top = `${(elementRect.top > screenCenter
                     ? elementRect.top - popoverRect.height + elementRect.height
                     : elementRect.top) + sy}px`;

package/dist/components/form/date-picker/index.js

@@ -6,7 +6,6 @@ import Button from "../button";
 import Alert from "../../feedback/alert";
 import ReactDOM from "react-dom";
 import DATE from "./DATE";
-import { ARIcon } from "../../icons";
 const weekdays = ["Pzt", "Sal", "Çar", "Per", "Cum", "Cmt", "Paz"];
 const months = [
     { value: 0, text: "Ocak" },
@@ -81,6 +80,8 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
                 const screenCenterY = window.innerHeight / 2;
                 const sx = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
                 const sy = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
+                _arCalendar.current.style.visibility = "visible";
+                _arCalendar.current.style.opacity = "1";
                 _arCalendar.current.style.top = `${(InpuRect.top > screenCenterY ? InpuRect.top - arCalendarRect.height : InpuRect.top + InpuRect.height) + sy}px`;
                 _arCalendar.current.style.left = `${(InpuRect.left > screenCenterX ? InpuRect.right - arCalendarRect.width : InpuRect.left) + sx}px`;
             }
@@ -243,7 +244,7 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
             years.push({ value: i, text: `${i}` });
         }
         setYears(years);
-    }, []);
+    }, [selectedYear]);
     return (React.createElement("div", { className: "ar-date-picker" },
         attributes.placeholder && attributes.placeholder.length > 0 && (React.createElement("label", null,
             validation ? "* " : "",
@@ -293,8 +294,7 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
                                     _year.current -= 1;
                                     setSelectedYear(_year.current);
                                     setDateChanged((prev) => !prev);
-                                } },
-                                React.createElement(ARIcon, { stroke: "var(--primary)", icon: "ArrowLeft", size: 24 })),
+                                } }),
                             React.createElement("span", { onClick: () => {
                                     if (_month.current <= 0) {
                                         _year.current -= 1;
@@ -304,8 +304,7 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
                                     setSelectedYear(_year.current);
                                     setSelectedMonth(_month.current);
                                     setDateChanged((prev) => !prev);
-                                } },
-                                React.createElement(ARIcon, { icon: "ArrowLeft", size: 24 }))),
+                                } })),
                         React.createElement("div", { className: "selects" },
                             React.createElement("div", null,
                                 React.createElement("span", null, months.find((month) => month.value === selectedMonth)?.text)),
@@ -321,14 +320,12 @@ const DatePicker = ({ onChange, isClock, validation, ...attributes }) => {
                                     setSelectedYear(_year.current);
                                     setSelectedMonth(_month.current);
                                     setDateChanged((prev) => !prev);
-                                } },
-                                React.createElement(ARIcon, { icon: "ArrowRight", size: 24 })),
+                                } }),
                             React.createElement("span", { onClick: () => {
                                     _year.current += 1;
                                     setSelectedYear(_year.current);
                                     setDateChanged((prev) => !prev);
-                                } },
-                                React.createElement(ARIcon, { stroke: "var(--primary)", icon: "ArrowRight", size: 24 }))))),
+                                } })))),
                 React.createElement("div", { className: "content" }, !isNaN(_month.current) && !isNaN(_year.current) ? (React.createElement("div", { className: "calendar" },
                     React.createElement("div", { className: "weekdays" }, weekdays.map((weekday, index) => (React.createElement("span", { key: index }, weekday)))),
                     React.createElement("div", { className: "days" }, calendarDays))) : (React.createElement(Alert, { status: "warning" }, "Ay veya y\u0131l se\u00E7imi yapman\u0131z gerekmektedir."))),

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

@@ -74,6 +74,8 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
                 const screenCenter = window.innerHeight / 2;
                 const sx = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
                 const sy = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
+                _options.current.style.visibility = "visible";
+                _options.current.style.opacity = "1";
                 _options.current.style.top = `${(InpuRect.top > screenCenter
                     ? InpuRect.top - optionRect.height - (multiple ? 20 : 0)
                     : InpuRect.top + InpuRect.height) + sy}px`;

package/dist/index.d.ts

@@ -28,6 +28,6 @@ import Tooltip from "./components/feedback/tooltip";
 import Breadcrumb from "./components/navigation/breadcrumb";
 import Menu from "./components/navigation/menu";
 import Steps from "./components/navigation/steps";
-import Grid from "./components/layout/grid-system";
+import Grid from "./components/data-display/grid-system";
 import Layout from "./components/layout";
 export { Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, InputTag, Radio, Select, Switch, TextEditor, Upload, Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Modal, Popover, Progress, Tooltip, Breadcrumb, Menu, Steps, Grid, Layout, };

package/dist/index.js

@@ -33,7 +33,7 @@ import Breadcrumb from "./components/navigation/breadcrumb";
 import Menu from "./components/navigation/menu";
 import Steps from "./components/navigation/steps";
 // Layout
-import Grid from "./components/layout/grid-system";
+import Grid from "./components/data-display/grid-system";
 import Layout from "./components/layout";
 export { 
 // Form Elements

package/package.json

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