ar-design 0.2.80 → 0.2.82

package/dist/assets/css/core/variants/outlined/styles.css

@@ -0,0 +1,406 @@
+/* #region BLUE */
+.outlined:not(.disabled) {
+  &.blue {
+    &.active {
+      animation: clicked-blue ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.outlined:not(.disabled),
+iframe.outlined:not(.disabled),
+.ar-select > .selections.outlined:not(.disabled) {
+  &.blue {
+    border: solid 1px var(--blue-500);
+    color: var(--blue-500);
+
+    &:focus,
+    &.focused {
+      border-color: var(--blue-300);
+      box-shadow: 0 0 0 3.5px var(--blue-100);
+    }
+  }
+}
+
+button.outlined:not(.disabled) {
+  &.blue { 
+    color: var(--blue-500);
+
+    &:hover,
+    &:focus {
+      background-color: var(--blue-100);
+    }
+  }
+}
+/* #endregion */
+/* BLUE */
+
+/* #region PURPLE */
+.outlined:not(.disabled) {
+  &.purple {
+    &.active {
+      animation: clicked-purple ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.outlined:not(.disabled),
+iframe.outlined:not(.disabled),
+.ar-select > .selections.outlined:not(.disabled) {
+  &.purple {
+    border: solid 1px var(--purple-500);
+    color: var(--purple-500);
+
+    &:focus,
+    &.focused {
+      border-color: var(--purple-300);
+      box-shadow: 0 0 0 3.5px var(--purple-100);
+    }
+  }
+}
+
+button.outlined:not(.disabled) {
+  &.purple { 
+    color: var(--purple-500);
+
+    &:hover,
+    &:focus {
+      background-color: var(--purple-100);
+    }
+  }
+}
+/* #endregion */
+/* PURPLE */
+
+/* #region PINK */
+.outlined:not(.disabled) {
+  &.pink {
+    &.active {
+      animation: clicked-pink ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.outlined:not(.disabled),
+iframe.outlined:not(.disabled),
+.ar-select > .selections.outlined:not(.disabled) {
+  &.pink {
+    border: solid 1px var(--pink-500);
+    color: var(--pink-500);
+
+    &:focus,
+    &.focused {
+      border-color: var(--pink-300);
+      box-shadow: 0 0 0 3.5px var(--pink-100);
+    }
+  }
+}
+
+button.outlined:not(.disabled) {
+  &.pink { 
+    color: var(--pink-500);
+
+    &:hover,
+    &:focus {
+      background-color: var(--pink-100);
+    }
+  }
+}
+/* #endregion */
+/* PINK */
+
+/* #region RED */
+.outlined:not(.disabled) {
+  &.red {
+    &.active {
+      animation: clicked-red ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.outlined:not(.disabled),
+iframe.outlined:not(.disabled),
+.ar-select > .selections.outlined:not(.disabled) {
+  &.red {
+    border: solid 1px var(--red-500);
+    color: var(--red-500);
+
+    &:focus,
+    &.focused {
+      border-color: var(--red-300);
+      box-shadow: 0 0 0 3.5px var(--red-100);
+    }
+  }
+}
+
+button.outlined:not(.disabled) {
+  &.red { 
+    color: var(--red-500);
+
+    &:hover,
+    &:focus {
+      background-color: var(--red-100);
+    }
+  }
+}
+/* #endregion */
+/* RED */
+
+/* #region ORANGE */
+.outlined:not(.disabled) {
+  &.orange {
+    &.active {
+      animation: clicked-orange ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.outlined:not(.disabled),
+iframe.outlined:not(.disabled),
+.ar-select > .selections.outlined:not(.disabled) {
+  &.orange {
+    border: solid 1px var(--orange-500);
+    color: var(--orange-500);
+
+    &:focus,
+    &.focused {
+      border-color: var(--orange-300);
+      box-shadow: 0 0 0 3.5px var(--orange-100);
+    }
+  }
+}
+
+button.outlined:not(.disabled) {
+  &.orange { 
+    color: var(--orange-500);
+
+    &:hover,
+    &:focus {
+      background-color: var(--orange-100);
+    }
+  }
+}
+/* #endregion */
+/* ORANGE */
+
+/* #region YELLOW */
+.outlined:not(.disabled) {
+  &.yellow {
+    &.active {
+      animation: clicked-yellow ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.outlined:not(.disabled),
+iframe.outlined:not(.disabled),
+.ar-select > .selections.outlined:not(.disabled) {
+  &.yellow {
+    border: solid 1px var(--yellow-500);
+    color: var(--yellow-500);
+
+    &:focus,
+    &.focused {
+      border-color: var(--yellow-300);
+      box-shadow: 0 0 0 3.5px var(--yellow-100);
+    }
+  }
+}
+
+button.outlined:not(.disabled) {
+  &.yellow { 
+    color: var(--yellow-500);
+
+    &:hover,
+    &:focus {
+      background-color: var(--yellow-100);
+    }
+  }
+}
+/* #endregion */
+/* YELLOW */
+
+/* #region GREEN */
+.outlined:not(.disabled) {
+  &.green {
+    &.active {
+      animation: clicked-green ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.outlined:not(.disabled),
+iframe.outlined:not(.disabled),
+.ar-select > .selections.outlined:not(.disabled) {
+  &.green {
+    border: solid 1px var(--green-500);
+    color: var(--green-500);
+
+    &:focus,
+    &.focused {
+      border-color: var(--green-300);
+      box-shadow: 0 0 0 3.5px var(--green-100);
+    }
+  }
+}
+
+button.outlined:not(.disabled) {
+  &.green { 
+    color: var(--green-500);
+
+    &:hover,
+    &:focus {
+      background-color: var(--green-100);
+    }
+  }
+}
+/* #endregion */
+/* GREEN */
+
+/* #region TEAL */
+.outlined:not(.disabled) {
+  &.teal {
+    &.active {
+      animation: clicked-teal ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.outlined:not(.disabled),
+iframe.outlined:not(.disabled),
+.ar-select > .selections.outlined:not(.disabled) {
+  &.teal {
+    border: solid 1px var(--teal-500);
+    color: var(--teal-500);
+
+    &:focus,
+    &.focused {
+      border-color: var(--teal-300);
+      box-shadow: 0 0 0 3.5px var(--teal-100);
+    }
+  }
+}
+
+button.outlined:not(.disabled) {
+  &.teal { 
+    color: var(--teal-500);
+
+    &:hover,
+    &:focus {
+      background-color: var(--teal-100);
+    }
+  }
+}
+/* #endregion */
+/* TEAL */
+
+/* #region CYAN */
+.outlined:not(.disabled) {
+  &.cyan {
+    &.active {
+      animation: clicked-cyan ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.outlined:not(.disabled),
+iframe.outlined:not(.disabled),
+.ar-select > .selections.outlined:not(.disabled) {
+  &.cyan {
+    border: solid 1px var(--cyan-500);
+    color: var(--cyan-500);
+
+    &:focus,
+    &.focused {
+      border-color: var(--cyan-300);
+      box-shadow: 0 0 0 3.5px var(--cyan-100);
+    }
+  }
+}
+
+button.outlined:not(.disabled) {
+  &.cyan { 
+    color: var(--cyan-500);
+
+    &:hover,
+    &:focus {
+      background-color: var(--cyan-100);
+    }
+  }
+}
+/* #endregion */
+/* CYAN */
+
+/* #region GRAY */
+.outlined:not(.disabled) {
+  &.gray {
+    &.active {
+      animation: clicked-gray ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.outlined:not(.disabled),
+iframe.outlined:not(.disabled),
+.ar-select > .selections.outlined:not(.disabled) {
+  &.gray {
+    border: solid 1px var(--gray-500);
+    color: var(--gray-500);
+
+    &:focus,
+    &.focused {
+      border-color: var(--gray-300);
+      box-shadow: 0 0 0 3.5px var(--gray-100);
+    }
+  }
+}
+
+button.outlined:not(.disabled) {
+  &.gray { 
+    color: var(--gray-500);
+
+    &:hover,
+    &:focus {
+      background-color: var(--gray-100);
+    }
+  }
+}
+/* #endregion */
+/* GRAY */
+
+/* #region LIGHT */
+.outlined:not(.disabled) {
+  &.light {
+    &.active {
+      animation: clicked-light ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+
+input.outlined:not(.disabled),
+iframe.outlined:not(.disabled),
+.ar-select > .selections.outlined:not(.disabled) {
+  &.light {
+    border: solid 1px var(--light-500);
+    color: var(--black);
+
+    &:focus,
+    &.focused {
+      border-color: var(--light-300);
+      box-shadow: 0 0 0 3.5px var(--light-100);
+    }
+  }
+}
+
+button.outlined:not(.disabled) {
+  &.light { 
+    color: var(--light-500);
+
+    &:hover,
+    &:focus {
+      background-color: var(--light-100);
+    }
+  }
+}
+/* #endregion */
+/* LIGHT */

package/dist/assets/css/core/variants/surface/styles.css

@@ -0,0 +1,263 @@
+/* #region BLUE */
+.surface:not(.disabled) {
+  &.blue {
+    background-color: var(--blue-100);
+    border:solid 1px var(--blue-300);
+    color: var(--blue-600);
+    
+    &.active {
+      animation: clicked-blue ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+      
+button.surface:not(.disabled) {
+  &.blue { 
+    &:hover,
+    &:focus {
+      background-color: var(--blue-300);
+    }
+  }
+}
+/* #endregion */
+/* BLUE */
+
+/* #region PURPLE */
+.surface:not(.disabled) {
+  &.purple {
+    background-color: var(--purple-100);
+    border:solid 1px var(--purple-300);
+    color: var(--purple-600);
+    
+    &.active {
+      animation: clicked-purple ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+      
+button.surface:not(.disabled) {
+  &.purple { 
+    &:hover,
+    &:focus {
+      background-color: var(--purple-300);
+    }
+  }
+}
+/* #endregion */
+/* PURPLE */
+
+/* #region PINK */
+.surface:not(.disabled) {
+  &.pink {
+    background-color: var(--pink-100);
+    border:solid 1px var(--pink-300);
+    color: var(--pink-600);
+    
+    &.active {
+      animation: clicked-pink ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+      
+button.surface:not(.disabled) {
+  &.pink { 
+    &:hover,
+    &:focus {
+      background-color: var(--pink-300);
+    }
+  }
+}
+/* #endregion */
+/* PINK */
+
+/* #region RED */
+.surface:not(.disabled) {
+  &.red {
+    background-color: var(--red-100);
+    border:solid 1px var(--red-300);
+    color: var(--red-600);
+    
+    &.active {
+      animation: clicked-red ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+      
+button.surface:not(.disabled) {
+  &.red { 
+    &:hover,
+    &:focus {
+      background-color: var(--red-300);
+    }
+  }
+}
+/* #endregion */
+/* RED */
+
+/* #region ORANGE */
+.surface:not(.disabled) {
+  &.orange {
+    background-color: var(--orange-100);
+    border:solid 1px var(--orange-300);
+    color: var(--orange-600);
+    
+    &.active {
+      animation: clicked-orange ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+      
+button.surface:not(.disabled) {
+  &.orange { 
+    &:hover,
+    &:focus {
+      background-color: var(--orange-300);
+    }
+  }
+}
+/* #endregion */
+/* ORANGE */
+
+/* #region YELLOW */
+.surface:not(.disabled) {
+  &.yellow {
+    background-color: var(--yellow-100);
+    border:solid 1px var(--yellow-300);
+    color: var(--yellow-600);
+    
+    &.active {
+      animation: clicked-yellow ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+      
+button.surface:not(.disabled) {
+  &.yellow { 
+    &:hover,
+    &:focus {
+      background-color: var(--yellow-300);
+    }
+  }
+}
+/* #endregion */
+/* YELLOW */
+
+/* #region GREEN */
+.surface:not(.disabled) {
+  &.green {
+    background-color: var(--green-100);
+    border:solid 1px var(--green-300);
+    color: var(--green-600);
+    
+    &.active {
+      animation: clicked-green ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+      
+button.surface:not(.disabled) {
+  &.green { 
+    &:hover,
+    &:focus {
+      background-color: var(--green-300);
+    }
+  }
+}
+/* #endregion */
+/* GREEN */
+
+/* #region TEAL */
+.surface:not(.disabled) {
+  &.teal {
+    background-color: var(--teal-100);
+    border:solid 1px var(--teal-300);
+    color: var(--teal-600);
+    
+    &.active {
+      animation: clicked-teal ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+      
+button.surface:not(.disabled) {
+  &.teal { 
+    &:hover,
+    &:focus {
+      background-color: var(--teal-300);
+    }
+  }
+}
+/* #endregion */
+/* TEAL */
+
+/* #region CYAN */
+.surface:not(.disabled) {
+  &.cyan {
+    background-color: var(--cyan-100);
+    border:solid 1px var(--cyan-300);
+    color: var(--cyan-600);
+    
+    &.active {
+      animation: clicked-cyan ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+      
+button.surface:not(.disabled) {
+  &.cyan { 
+    &:hover,
+    &:focus {
+      background-color: var(--cyan-300);
+    }
+  }
+}
+/* #endregion */
+/* CYAN */
+
+/* #region GRAY */
+.surface:not(.disabled) {
+  &.gray {
+    background-color: var(--gray-100);
+    border:solid 1px var(--gray-300);
+    color: var(--gray-600);
+    
+    &.active {
+      animation: clicked-gray ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+      
+button.surface:not(.disabled) {
+  &.gray { 
+    &:hover,
+    &:focus {
+      background-color: var(--gray-300);
+    }
+  }
+}
+/* #endregion */
+/* GRAY */
+
+/* #region LIGHT */
+.surface:not(.disabled) {
+  &.light {
+    background-color: var(--light-100);
+    border:solid 1px var(--light-300);
+    color: var(--light-600);
+    
+    &.active {
+      animation: clicked-light ease-in-out 750ms 0s 1 normal both;
+    }
+  }
+}
+      
+button.surface:not(.disabled) {
+  &.light { 
+    &:hover,
+    &:focus {
+      background-color: var(--light-300);
+    }
+  }
+}
+/* #endregion */
+/* LIGHT */

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

@@ -6,7 +6,7 @@ const { Title } = Typography;
 const Card = ({ children, title = "", actions, status }) => {
     // variables
     const _titleClassName = ["title"];
-    _titleClassName.push(...Utils.GetClassName(undefined, status, undefined, undefined, undefined, undefined));
+    _titleClassName.push(...Utils.GetClassName(undefined, status, undefined, undefined, undefined, undefined, undefined));
     return (React.createElement("div", { className: "ar-card" },
         title && (React.createElement("div", { className: _titleClassName.map((c) => c).join(" ") },
             React.createElement(Title, { Level: "h4" }, title),

package/dist/components/data-display/chip/IProps.d.ts

@@ -1,5 +1,5 @@
-import { IBorder, IIcon, IStatus, IVariant } from "../../../libs/types/IGlobalProps";
-interface IProps extends IVariant, IStatus, IBorder, IIcon {
+import { IBorder, IColors, IIcon, IVariant } from "../../../libs/types/IGlobalProps";
+interface IProps extends IVariant, IColors, IBorder, IIcon {
     /**
      * Bileşende gösterilecek metin.
      *

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

@@ -2,9 +2,9 @@
 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, icon, }) => {
+const Chip = ({ variant = "outlined", color = "light", border = { radius: "sm" }, text, icon }) => {
     let _chipClassName = ["ar-chip"];
-    _chipClassName.push(...Utils.GetClassName(variant, status, border, undefined, undefined, undefined));
+    _chipClassName.push(...Utils.GetClassName(variant, undefined, color, border, undefined, undefined, undefined));
     return (React.createElement("div", { className: _chipClassName.map((c) => c).join(" ") },
         icon?.element && React.createElement("span", null, icon?.element),
         React.createElement("span", null, text)));

package/dist/components/data-display/table/IProps.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { AllowedTypes, TableColumnType } from "../../../libs/types";
+import { MimeTypes, TableColumnType } from "../../../libs/types";
 import { IChildren } from "../../../libs/types/IGlobalProps";
 import { FilterOperator } from "../../../libs/infrastructure/shared/Enums";
 export type Operator = "Contains" | "DoesNotContains" | "Equals" | "DoesNotEquals" | "BeginsWith" | "EndsWith" | "Blank" | "NotBlank";
@@ -61,7 +61,7 @@ type ImportActionType = {
     /**
      * Kabul edilen dosya türleri.
      */
-    allowedTypes?: AllowedTypes[];
+    allowedTypes?: MimeTypes[];
     /**
      * Butonun önünde gösterilecek içerik.
      */