ar-design 0.1.57 → 0.1.59

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

@@ -1,6 +1,14 @@
 .ar-chip {
-  padding: 0.25rem 0.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0 0.5rem;
+  height: 1.75rem;
+  padding: 0 0.5rem;
   font-size: 0.75rem;
   font-weight: 600;
   white-space: nowrap;
+  user-select: none;
+  -webkit-text-stroke: 0.5px var(--white);
+  letter-spacing: 1px;
 }

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

@@ -81,7 +81,6 @@
 .ar-table > .content > table > tbody > tr > td {
   background-color: var(--white);
   padding: 0.5rem;
-  text-wrap: nowrap;
   z-index: 1;
 }
 .ar-table > .content > table > tbody > tr > td.type-of-number {
@@ -97,6 +96,14 @@
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
+  align-items: center;
+}
+
+.ar-table > .content > table > tbody > tr > td.text-wrap {
+  text-wrap: wrap;
+}
+.ar-table > .content > table > tbody > tr > td.text-nowrap {
+  text-wrap: nowrap;
 }
 
 @import url("./scroll.css");

package/dist/assets/css/components/feedback/confirm/confirm.css

@@ -1,8 +1,9 @@
 .ar-confirm-wrapper {
   position: relative;
 }
-.ar-confirm-wrapper > .ar-confirm {
-  position: fixed;
+
+.ar-confirm {
+  position: absolute;
   display: flex;
   flex-direction: column;
   gap: 1rem 0;
@@ -14,34 +15,18 @@
   z-index: 5;
 }
 
-/* #region Open or Close */
-.ar-confirm-wrapper > .ar-confirm:is(.opened) {
-  visibility: visible;
-  opacity: 1;
-  transition: visibility 250ms, opacity 250ms, transform 250ms ease-in-out;
-  z-index: 100;
-}
-.ar-confirm-wrapper > .ar-confirm:is(.closed) {
-  visibility: hidden;
-  opacity: 0;
-  transition: visibility 250ms, opacity 250ms, transform 250ms ease-in-out;
-  z-index: 99;
-}
-/* #endregion */
-/* Open or Close */
-
-.ar-confirm-wrapper > .ar-confirm > .content {
+.ar-confirm > .content {
   max-height: 200px;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
-.ar-confirm-wrapper > .ar-confirm > .message {
+.ar-confirm > .message {
   font-size: 0.85rem;
   text-wrap: wrap;
 }
 
-.ar-confirm-wrapper > .ar-confirm > .footer {
+.ar-confirm > .footer {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;

package/dist/assets/css/components/feedback/modal/modal.css

@@ -6,7 +6,6 @@
   position: fixed;
   inset: 0;
   background-color: rgba(var(--black-rgb), 0.5);
-  backdrop-filter: blur(10px);
 }
 
 /* #region Open or Close */
@@ -17,19 +16,19 @@
   z-index: 100;
 }
 .ar-modal-wrapper:is(.opened) > .ar-modal {
-  top: 4.5rem;
+  top: 1.75rem;
   transition: top 250ms ease-in-out;
 }
 
 .ar-modal-wrapper:is(.closed) {
   visibility: hidden;
   opacity: 0;
-  transition: visibility 250ms 300ms, opacity 250ms 300ms ease-in-out;
+  transition: visibility 250ms, opacity 250ms ease-in-out;
   z-index: 99;
 }
 .ar-modal-wrapper:is(.closed) > .ar-modal {
   top: -100%;
-  transition: top 250ms 300ms ease-in-out;
+  transition: top 250ms ease-in-out;
 }
 /* #endregion */
 /* Open or Close */

package/dist/assets/css/components/feedback/notification/notification.css

@@ -1,38 +1,11 @@
-.notification {
-  background-color: var(--danger);
-  position: fixed;
-  display: flex;
-  flex-direction: column-reverse;
-  gap: 1.25rem 0;
-  user-select: none;
-  z-index: 1051;
-}
-
-.notification.top-left {
-  top: 1rem;
-  left: 1rem;
-}
-.notification.top-right {
-  top: 1rem;
-  right: 1rem;
-}
-.notification.bottom-left {
-  bottom: 1rem;
-  left: 1rem;
-}
-.notification.bottom-right {
-  bottom: 1rem;
-  right: 1rem;
-}
-
 .ar-notification-item {
+  opacity: 1;
   position: fixed;
   left: 2rem;
   display: flex;
   flex-direction: row;
   gap: 0 0.5rem;
-  background-color: rgba(var(--white-rgb), 0.5);
-  backdrop-filter: blur(5px);
+  background-color: var(--white);
   width: 350px;
   height: 7.5rem;
   border-radius: var(--border-radius-xl);
@@ -40,7 +13,16 @@
   transition: all 250ms ease-in-out;
   overflow: hidden;
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
-  animation: openSnackbar ease-in-out 500ms 0s 1 normal both;
+  animation: openedSnackbar ease-in-out 500ms 0s 1 normal both;
+  z-index: 1051;
+}
+.ar-notification-item.previous {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: previousSnackbar ease-in-out 500ms 0s 1 normal both;
+}
+.ar-notification-item.closed {
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: closedSnackbar ease-in-out 500ms 0s 1 normal both;
 }
 
 .ar-notification-item > .icon {
@@ -147,7 +129,7 @@
   }
 }
 
-@keyframes openSnackbar {
+@keyframes openedSnackbar {
   0% {
     transform: translateX(-500px);
   }
@@ -156,7 +138,16 @@
   }
 }
 
-@keyframes removeSnackbar {
+@keyframes previousSnackbar {
+  0% {
+    transform: translateX(0) translateY(0);
+  }
+  100% {
+    transform: translateX(0) translateY(120px);
+  }
+}
+
+@keyframes closedSnackbar {
   0% {
     transform: translateX(0);
   }

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

@@ -27,3 +27,4 @@
 @import url("./core/icon.css");
 @import url("./core/position.css");
 @import url("./core/size.css");
+@import url("./core/tooltip.css");

package/dist/assets/css/components/form/button/core/tooltip.css

@@ -0,0 +1,40 @@
+.ar-button-tooltip {
+  position: absolute;
+  background-color: var(--black);
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--border-radius-sm);
+  z-index: 15;
+}
+.ar-button-tooltip::before {
+  position: absolute;
+  content: "";
+  border: solid 7.5px transparent;
+}
+.ar-button-tooltip.top::before {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: var(--black);
+}
+.ar-button-tooltip.right::before {
+  top: 50%;
+  transform: translateY(-50%);
+  right: 100%;
+  border-right-color: var(--black);
+}
+.ar-button-tooltip.bottom::before {
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 100%;
+  border-bottom-color: var(--black);
+}
+.ar-button-tooltip.left::before {
+  top: 50%;
+  transform: translateY(-50%);
+  left: 100%;
+  border-left-color: var(--black);
+}
+.ar-button-tooltip > span {
+  color: var(--white);
+  text-wrap: nowrap;
+}

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

@@ -0,0 +1,10 @@
+.ar-date-calendar {
+  position: absolute;
+  background-color: var(--white);
+  width: 20rem;
+  border: solid 1px var(--gray-200);
+  border-radius: var(--border-radius-lg);
+  box-shadow: 0 0 10px -5px rgba(var(--black-rgb), 0.25);
+  z-index: 15;
+  transition: visibility 250ms, opacity 250ms ease-in-out;
+}

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

@@ -1,11 +1,11 @@
-.ar-date-picker > .calendar-wrapper > .content {
+.ar-date-calendar > .content {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   gap: 1rem;
   margin: 0.5rem;
 }
-.ar-date-picker > .calendar-wrapper > .content > .calendar {
+.ar-date-calendar > .content > .calendar {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
@@ -13,11 +13,11 @@
 }
 
 /* #region Weekdays */
-.ar-date-picker > .calendar-wrapper > .content > .calendar > .weekdays {
+.ar-date-calendar > .content > .calendar > .weekdays {
   display: flex;
   flex-wrap: nowrap;
 }
-.ar-date-picker > .calendar-wrapper > .content > .calendar > .weekdays > span {
+.ar-date-calendar > .content > .calendar > .weekdays > span {
   width: calc(100% / 7);
   color: var(--gray-600);
   font-size: 0.8rem;
@@ -28,12 +28,12 @@
 /* Weekdays */
 
 /* #region Days */
-.ar-date-picker > .calendar-wrapper > .content > .calendar > .days {
+.ar-date-calendar > .content > .calendar > .days {
   display: flex;
   flex-wrap: wrap;
   user-select: none;
 }
-.ar-date-picker > .calendar-wrapper > .content > .calendar > .days > span {
+.ar-date-calendar > .content > .calendar > .days > span {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -41,7 +41,7 @@
   height: var(--input-height);
   cursor: pointer;
 }
-.ar-date-picker > .calendar-wrapper > .content > .calendar > .days > span > span {
+.ar-date-calendar > .content > .calendar > .days > span > span {
   display: grid;
   justify-content: center;
   align-content: center;
@@ -49,17 +49,11 @@
   height: 75%;
   border-radius: var(--border-radius-sm);
 }
-.ar-date-picker
-  > .calendar-wrapper
-  > .content
-  > .calendar
-  > .days
-  > span:not(.empty-day)
-  > span:hover {
+.ar-date-picker > .calendar-wrapper > .content > .calendar > .days > span:not(.empty-day) > span:hover {
   background-color: var(--gray-200);
   color: var(--gray-700);
 }
-.ar-date-picker > .calendar-wrapper > .content > .calendar > .days > span.selection-day > span {
+.ar-date-calendar > .content > .calendar > .days > span.selection-day > span {
   background-color: var(--primary);
   color: var(--white);
   box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary);

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

@@ -1,4 +1,4 @@
-.ar-date-picker > .calendar-wrapper > .footer {
+.ar-date-calendar > .footer {
   display: flex;
   flex-direction: row;
   justify-content: space-between;

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

@@ -1,17 +1,17 @@
-.ar-date-picker > .calendar-wrapper > .header {
+.ar-date-calendar > .header {
   display: flex;
   align-items: center;
-  min-height: 2.75rem;
+  min-height: 3.75rem;
   border-bottom: solid 1px var(--gray-200);
 }
-.ar-date-picker > .calendar-wrapper > .header > .select-field {
+.ar-date-calendar > .header > .select-field {
   display: flex;
   flex-direction: row;
   justify-content: stretch;
   gap: 0 0.75rem;
   padding: 0 0.5rem;
 }
-.ar-date-picker > .calendar-wrapper > .header > .select-field > .selects {
+.ar-date-calendar > .header > .select-field > .selects {
   display: flex;
   flex-direction: row;
   justify-content: stretch;
@@ -19,8 +19,8 @@
 }
 
 /* #region Prev and Next Buttons */
-.ar-date-picker > .calendar-wrapper > .header > .select-field > .prev,
-.ar-date-picker > .calendar-wrapper > .header > .select-field > .next {
+.ar-date-calendar > .header > .select-field > .prev,
+.ar-date-calendar > .header > .select-field > .next {
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -1,4 +1,4 @@
-.ar-date-picker > .calendar-wrapper > .clock {
+.ar-date-calendar > .clock {
   position: absolute;
   top: -1px;
   display: flex;
@@ -13,18 +13,17 @@
   z-index: 5;
   user-select: none;
 }
-.ar-date-picker > .calendar-wrapper > .clock.active {
+.ar-date-calendar > .clock.active {
   visibility: visible;
   opacity: 1;
   right: -8rem;
   transform: scale(1);
   transition: visibility 250ms, opacity 250ms, right 250ms, transform 150ms 300ms ease-in-out;
 }
-.ar-date-picker > .calendar-wrapper > .clock.passive {
+.ar-date-calendar > .clock.passive {
   visibility: hidden;
   opacity: 0;
   right: -5rem;
   transform: scale(0.8);
-  transition: visibility 250ms 200ms, opacity 250ms 200ms, right 250ms 200ms,
-    transform 150ms ease-in-out;
+  transition: visibility 250ms 200ms, opacity 250ms 200ms, right 250ms 200ms, transform 150ms ease-in-out;
 }

package/dist/assets/css/components/form/date-picker/clock/content.css

@@ -1,28 +1,28 @@
-.ar-date-picker > .calendar-wrapper > .clock > .content {
+.ar-date-calendar > .clock > .content {
   display: flex;
   justify-content: space-between;
   height: calc(100% - 5.5rem);
 }
-.ar-date-picker > .calendar-wrapper > .clock > .content > ul {
+.ar-date-calendar > .clock > .content > ul {
   width: 50%;
   padding-bottom: calc(var(--input-height) * 6.5);
   overflow-y: auto;
   scrollbar-width: none;
 }
-.ar-date-picker > .calendar-wrapper > .clock > .content > ul:nth-child(2) {
+.ar-date-calendar > .clock > .content > ul:nth-child(2) {
   border-left: solid 1px var(--gray-200);
 }
-.ar-date-picker > .calendar-wrapper > .clock > .content > ul::-webkit-scrollbar {
+.ar-date-calendar > .clock > .content > ul::-webkit-scrollbar {
   display: none;
 }
-.ar-date-picker > .calendar-wrapper > .clock > .content > ul > li {
+.ar-date-calendar > .clock > .content > ul > li {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: var(--input-height);
   cursor: pointer;
 }
-.ar-date-picker > .calendar-wrapper > .clock > .content > ul > li > span {
+.ar-date-calendar > .clock > .content > ul > li > span {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -30,7 +30,7 @@
   height: var(--input-height);
   cursor: pointer;
 }
-.ar-date-picker > .calendar-wrapper > .clock > .content > ul > li > span > span {
+.ar-date-calendar > .clock > .content > ul > li > span > span {
   display: grid;
   justify-content: center;
   align-content: center;
@@ -38,18 +38,11 @@
   height: 75%;
   border-radius: var(--border-radius-sm);
 }
-.ar-date-picker
-  > .calendar-wrapper
-  > .clock
-  > .content
-  > ul
-  > li:not(.selection-time)
-  > span
-  > span:hover {
+.ar-date-picker > .calendar-wrapper > .clock > .content > ul > li:not(.selection-time) > span > span:hover {
   background-color: var(--gray-200);
   color: var(--gray-700);
 }
-.ar-date-picker > .calendar-wrapper > .clock > .content > ul > li.selection-time > span > span {
+.ar-date-calendar > .clock > .content > ul > li.selection-time > span > span {
   background-color: var(--success);
   color: var(--white);
   box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--success);

package/dist/assets/css/components/form/date-picker/clock/footer.css

@@ -1,4 +1,4 @@
-.ar-date-picker > .calendar-wrapper > .clock > .footer {
+.ar-date-calendar > .clock > .footer {
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -1,4 +1,4 @@
-.ar-date-picker > .calendar-wrapper > .clock > .header {
+.ar-date-calendar > .clock > .header {
   height: var(--header-height);
   border-bottom: solid 1px var(--gray-200);
   text-align: center;

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

@@ -9,46 +9,20 @@
   flex-wrap: nowrap;
   flex-direction: row;
 }
-.ar-date-picker > .calendar-wrapper {
-  position: fixed;
-  background-color: var(--white);
-  width: 20rem;
-  border: solid 1px var(--gray-200);
-  border-radius: var(--border-radius-lg);
-  box-shadow: 0 0 10px -5px rgba(var(--black-rgb), 0.25);
-  z-index: 15;
-  transition: visibility 250ms, opacity 250ms ease-in-out;
-}
-.ar-date-picker > .calendar-wrapper:is(.opened) {
-  visibility: visible;
-  opacity: 1;
-}
-.ar-date-picker > .calendar-wrapper:is(.closed) {
-  visibility: hidden;
-  opacity: 0;
-}
-
 .ar-date-picker > label {
-  visibility: hidden;
-  opacity: 0;
+  background-color: var(--white);
   position: absolute;
-  top: 0.5rem;
+  top: -0.5rem;
   left: 0.55rem;
+  padding: 0 0.5rem;
   color: var(--gray-600);
+  font-size: 0.75rem;
   letter-spacing: 1px;
   transition: top 250ms ease-in-out;
   z-index: 1;
 }
-.ar-date-picker > label.visible {
-  visibility: visible;
-  opacity: 1;
-  top: -0.5rem;
-  left: 0.55rem;
-  background-color: var(--white);
-  padding: 0 0.5rem;
-  font-size: 0.75rem;
-}
 
+@import url("./calendar/calendar.css");
 @import url("./calendar/header.css");
 @import url("./calendar/content.css");
 @import url("./calendar/footer.css");

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

@@ -1,31 +1,31 @@
-.ar-select-wrapper > .options {
-  position: fixed;
+.ar-select-options {
+  position: absolute;
   background-color: var(--white);
   border: solid 1px var(--gray-200);
   border-radius: var(--border-radius-lg);
   overflow: hidden;
-  z-index: 5;
+  z-index: 101;
   transition: visibility 250ms, opacity 250ms, transform 250ms ease-in-out;
 }
-.ar-select-wrapper > .options.top {
+.ar-select-options.top {
   box-shadow: 0 5px 15px -2.5px rgba(var(--black-rgb), 0.1);
 }
-.ar-select-wrapper > .options.bottom {
+.ar-select-options.bottom {
   box-shadow: 0 -5px 15px -2.5px rgba(var(--black-rgb), 0.1);
 }
 
-.ar-select-wrapper > .options > .search-field {
+.ar-select-options > .search-field {
   padding: 0.5rem;
   border-bottom: solid 1px var(--gray-200);
 }
 
-.ar-select-wrapper > .options > ul {
+.ar-select-options > ul {
   width: 100%;
   max-height: calc(var(--input-height) * 5);
   overflow-x: hidden;
   overflow-y: auto;
 }
-.ar-select-wrapper > .options > ul > li {
+.ar-select-options > ul > li {
   display: flex;
   align-items: center;
   gap: 0 0.5rem;
@@ -33,33 +33,33 @@
   height: var(--input-height);
   cursor: pointer;
 }
-.ar-select-wrapper > .options > ul > li:hover {
+.ar-select-options > ul > li:hover {
   background-color: var(--gray-200);
 }
-.ar-select-wrapper > .options > ul > li.selectedItem {
+.ar-select-options > ul > li.selectedItem {
   /* background-color: rgba(var(--success-rgb), 0.1); */
 }
-.ar-select-wrapper > .options > ul > li.navigate-with-arrow-keys {
+.ar-select-options > ul > li.navigate-with-arrow-keys {
   background-color: var(--gray-100);
 }
 
-.ar-select-wrapper > .options:is(.opened) {
+/* .ar-select-options:is(.opened) {
   visibility: visible;
   opacity: 1;
   transform: scaleY(1);
 }
-.ar-select-wrapper > .options:is(.closed) {
+.ar-select-options:is(.closed) {
   visibility: hidden;
   opacity: 0;
   transform: scaleY(0.8);
   height: 0;
 }
 
-.ar-select-wrapper > .options.top:is(.opened, .closed),
-.ar-select-wrapper > .options.top:is(.opened, .closed) {
+.ar-select-options.top:is(.opened, .closed),
+.ar-select-options.top:is(.opened, .closed) {
   transform-origin: top;
 }
-.ar-select-wrapper > .options.bottom:is(.opened, .closed),
-.ar-select-wrapper > .options.bottom:is(.opened, .closed) {
+.ar-select-options.bottom:is(.opened, .closed),
+.ar-select-options.bottom:is(.opened, .closed) {
   transform-origin: bottom;
-}
+} */

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

@@ -2,9 +2,11 @@
 import React from "react";
 import "../../../assets/css/components/data-display/chip/chip.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
-const Chip = ({ variant = "outlined", status = "primary", border = { radius: "sm" }, text, }) => {
+const Chip = ({ variant = "outlined", status = "primary", border = { radius: "sm" }, text, icon, }) => {
     let _chipClassName = ["ar-chip"];
     _chipClassName.push(...Utils.GetClassName(variant, status, border, undefined, undefined, undefined));
-    return React.createElement("span", { className: _chipClassName.map((c) => c).join(" ") }, text);
+    return (React.createElement("div", { className: _chipClassName.map((c) => c).join(" ") },
+        icon?.element && React.createElement("span", null, icon?.element),
+        React.createElement("span", null, text)));
 };
 export default Chip;

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

@@ -198,10 +198,13 @@ const Table = function ({ children, data, columns, selections, pagination, confi
                         // if (isTypeOfNumber) _className.push(isTypeOfNumber);
                         if (c.config?.sticky)
                             _className.push(`sticky-${c.config.sticky}`);
-                        if (c.config?.alignContent) {
+                        if (c.config?.alignContent)
                             _className.push(`align-content-${c.config.alignContent}`);
-                        }
-                        return (React.createElement("td", { key: `cell-${index}-${cIndex}`, ...(_className.length > 0 && {
+                        if (c.config?.textWrap)
+                            _className.push(`text-${c.config.textWrap}`);
+                        return (React.createElement("td", { key: `cell-${index}-${cIndex}`, ...(c.config?.width && {
+                                style: { width: c.config.width },
+                            }), ...(_className.length > 0 && {
                                 className: `${_className.map((c) => c).join(" ")}`,
                             }), ...(c.config?.sticky && {
                                 "data-sticky-position": c.config.sticky,

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

@@ -10,7 +10,7 @@ const Tabs = ({ tabs = [] }) => {
                 let className = ["item"];
                 if (currentTab === index)
                     className.push("selection");
-                return (React.createElement("div", { key: tab.title || index, className: className.map((c) => c).join(" "), onClick: () => setCurrentTab(index) },
+                return (React.createElement("div", { key: tab.title ?? index, className: className.map((c) => c).join(" "), onClick: () => setCurrentTab(index) },
                     React.createElement("span", null, tab.title)));
             })),
         React.createElement("div", { className: "content" }, tabs.map((tab, index) => currentTab === index && tab.content))));