ar-design 0.1.9 → 0.1.11

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

@@ -1,4 +1,5 @@
 .ar-chip {
   padding: 0.25rem 0.5rem;
   font-size: 0.75rem;
+  white-space: nowrap;
 }

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

@@ -6,12 +6,14 @@
 .ar-checkbox-wrapper > label > span {
   display: flex;
   align-items: center;
+  gap: 0 0.5rem;
+  user-select: none;
 }
 .ar-checkbox-wrapper > label > span > .ar-checkbox {
   position: relative;
   display: inline-block;
-  width: 1rem;
-  height: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
 }
 .ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox::before {
   position: absolute;

package/dist/assets/css/components/form/checkbox/core/border.css

@@ -7,6 +7,10 @@
   border-right-color: var(--primary);
   border-bottom-color: var(--primary);
 }
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.borderless.primary::before {
+  border-right-color: var(--primary);
+  border-bottom-color: var(--primary);
+}
 /* #endregion */
 /* Border Color -> PRIMARY */
 
@@ -19,6 +23,10 @@
   border-right-color: var(--secondary);
   border-bottom-color: var(--secondary);
 }
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.borderless.secondary::before {
+  border-right-color: var(--secondary);
+  border-bottom-color: var(--secondary);
+}
 /* #endregion */
 /* Border Color -> SECONDARY */
 
@@ -31,6 +39,10 @@
   border-right-color: var(--success);
   border-bottom-color: var(--success);
 }
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.borderless.success::before {
+  border-right-color: var(--success);
+  border-bottom-color: var(--success);
+}
 /* #endregion */
 /* Border Color -> SUCCESS */
 
@@ -43,6 +55,10 @@
   border-right-color: var(--warning);
   border-bottom-color: var(--warning);
 }
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.borderless.warning::before {
+  border-right-color: var(--warning);
+  border-bottom-color: var(--warning);
+}
 /* #endregion */
 /* Border Color -> WARNING */
 
@@ -55,6 +71,10 @@
   border-right-color: var(--danger);
   border-bottom-color: var(--danger);
 }
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.borderless.danger::before {
+  border-right-color: var(--danger);
+  border-bottom-color: var(--danger);
+}
 /* #endregion */
 /* Border Color -> DANGER */
 
@@ -67,6 +87,10 @@
   border-right-color: var(--information);
   border-bottom-color: var(--information);
 }
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.borderless.information::before {
+  border-right-color: var(--information);
+  border-bottom-color: var(--information);
+}
 /* #endregion */
 /* Border Color -> INFORMATION */
 
@@ -79,6 +103,10 @@
   border-right-color: var(--dark);
   border-bottom-color: var(--dark);
 }
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.borderless.dark::before {
+  border-right-color: var(--dark);
+  border-bottom-color: var(--dark);
+}
 /* #endregion */
 /* Border Color -> DARK */
 
@@ -91,6 +119,10 @@
   border-right-color: var(--light);
   border-bottom-color: var(--light);
 }
+.ar-checkbox-wrapper > label > input[type="checkbox"]:checked + span > .ar-checkbox.borderless.light::before {
+  border-right-color: var(--light);
+  border-bottom-color: var(--light);
+}
 /* #endregion */
 /* Border Color -> LIGHT */
 

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

@@ -8,11 +8,11 @@
   transition: visibility 250ms, opacity 250ms, transform 250ms ease-in-out;
 }
 .ar-select-wrapper > .options.top {
-  inset: var(--input-height) 0 auto 0;
+  inset: 100% 0 auto 0;
   box-shadow: 0 5px 15px -2.5px rgba(var(--black-rgb), 0.1);
 }
 .ar-select-wrapper > .options.bottom {
-  inset: auto 0 var(--input-height) 0;
+  inset: auto 0 100% 0;
   box-shadow: 0 -5px 15px -2.5px rgba(var(--black-rgb), 0.1);
 }
 
@@ -23,12 +23,16 @@
 
 .ar-select-wrapper > .options > ul {
   width: 100%;
+  max-height: calc(var(--input-height) * 5);
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 .ar-select-wrapper > .options > ul > li {
   display: flex;
   align-items: center;
   gap: 0 0.5rem;
-  padding: 0.5rem 1rem;
+  padding: 0 1rem;
+  height: var(--input-height);
   cursor: pointer;
 }
 .ar-select-wrapper > .options > ul > li:hover {
@@ -44,7 +48,6 @@
 .ar-select-wrapper > .options:is(.opened) {
   visibility: visible;
   opacity: 1;
-  background-color: var(--white);
   transform: scaleY(1);
 }
 .ar-select-wrapper > .options:is(.closed) {

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

@@ -8,30 +8,45 @@
   width: 100%;
 }
 
-.ar-select-wrapper > .ar-select > .selections {
-  display: flex;
-  align-items: center;
-  gap: 0 0.25rem;
-  height: var(--input-height);
-  padding: 0 0.35rem;
+.ar-select-wrapper > .ar-select > .angel-down {
+  position: absolute;
+  top: 50%;
+  right: 0.5rem;
+  width: 0.75rem;
+  height: 0.75rem;
+  cursor: pointer;
+  transform-origin: center;
+  transition: transform 250ms ease-in-out;
 }
-.ar-select-wrapper > .ar-select > .selections > ul {
-  display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
+.ar-select-wrapper > .ar-select > .angel-down:is(.opened) {
+  transform: translateY(-50%) scaleY(-1);
 }
-.ar-select-wrapper > .ar-select > .selections > ul > li {
-  background-color: var(--gray-100);
-  padding: 0 0.5rem;
-  border: solid 1px var(--gray-200);
-  border-radius: var(--border-radius-sm);
+.ar-select-wrapper > .ar-select > .angel-down:is(.closed) {
+  transform: translateY(-50%) scaleY(1);
+}
+.ar-select-wrapper > .ar-select > .angel-down::before {
+  display: inline-block;
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 1px transparent;
+  border-top-style: dashed;
+  border-right-style: dashed;
+  border-bottom-style: solid;
+  border-left-style: solid;
+  border-top-color: rgba(var(--black-rgb), 0.1);
+  border-right-color: rgba(var(--black-rgb), 0.1);
+  border-bottom-color: rgba(var(--black-rgb), 0.5);
+  border-left-color: rgba(var(--black-rgb), 0.5);
+  transform: rotate(-45deg);
 }
 
 .ar-select-wrapper > .ar-select > .button-clear {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  right: 0.5rem;
+  right: 2rem;
   background-color: rgba(var(--black-rgb), 0.25);
   backdrop-filter: blur(5px);
   width: 1rem;
@@ -47,4 +62,34 @@
   font-size: 0.75rem;
 }
 
+.ar-select-wrapper > .ar-select > .selections {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  min-height: var(--input-height);
+  padding: 0.35rem;
+}
+.ar-select-wrapper > .ar-select > .selections > .items {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  width: calc(100% - 2.75rem);
+}
+.ar-select-wrapper > .ar-select > .selections > .items > span.placeholder {
+  opacity: 0.5;
+  font-weight: 800;
+}
+.ar-select-wrapper > .ar-select > .selections > ul {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+.ar-select-wrapper > .ar-select > .selections > ul > li {
+  background-color: var(--gray-100);
+  padding: 0 0.5rem;
+  border: solid 1px var(--gray-200);
+  border-radius: var(--border-radius-sm);
+}
+
 @import url("./options.css");

package/dist/assets/css/core/ar-core.css

@@ -14,7 +14,7 @@
 
 /* #region Height */
 :root {
-  --input-height: 2.25rem;
+  --input-height: 2.5rem;
 }
 /* #endregion */
 /* Height */
@@ -147,6 +147,13 @@
   border-color: transparent;
   transition: border 250ms, box-shadow 250ms ease-in-out;
 }
+.borderless:disabled {
+  background-color: var(--gray-100) !important;
+  border: none !important;
+  color: var(--gray-500) !important;
+  cursor: no-drop !important;
+}
+
 @import url("./variants/borderless/borderless.css");
 @import url("./variants/border.css");
 
@@ -156,5 +163,16 @@
   color: var(--gray-500) !important;
   cursor: no-drop !important;
 }
+/* :is(button):disabled {
+  background-color: var(--gray-100) !important;
+  color: var(--gray-500) !important;
+  cursor: no-drop !important;
+}
+:is(button):is(.filled):disabled {
+  border: solid 1px var(--gray-500) !important;
+}
+:is(button):is(.outlined):is(.):disabled {
+  border: solid 1px var(--gray-500) !important;
+} */
 /* #endregion */
 /* Variants */

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

@@ -4,6 +4,10 @@
 .outlined.border-style-dashed {
   border-style: dashed;
 }
+.outlined.border-style-dashed:disabled {
+  border-style: dashed !important;
+  border-color: var(--gray-500) !important;
+}
 .outlined.border-style-none {
   border-style: none;
 }

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

@@ -1,3 +1,4 @@
+import { BorderRadiuses } from "../../../libs/types/BorderRadius";
 import { Colors } from "../../../libs/types/Colors";
 import { Variants } from "../../../libs/types/Variants";
 export type Props = {
@@ -5,7 +6,7 @@ export type Props = {
     color?: Colors;
     border?: {
         style?: "solid" | "dashed" | "none";
-        radius?: "sm" | "lg" | "xl" | "xxl" | "pill" | "none";
+        radius?: BorderRadiuses;
     };
     text: string;
 };

package/dist/components/form/button/Types.d.ts

@@ -1,3 +1,4 @@
+import { BorderRadiuses } from "../../../libs/types/BorderRadius";
 import { Colors } from "../../../libs/types/Colors";
 import { Variants } from "../../../libs/types/Variants";
 export type Props = {
@@ -136,7 +137,7 @@ export type Props = {
      */
     border?: {
         style?: "solid" | "dashed" | "none";
-        radius?: "sm" | "lg" | "xl" | "xxl" | "pill" | "none";
+        radius?: BorderRadiuses;
     };
     /**
      * Bileşenin genişlik özelliğini belirtir.

package/dist/components/form/input/Types.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import { Props as ButtonProps } from "../button/Types";
 import { Colors } from "../../../libs/types/Colors";
 import { Variants } from "../../../libs/types/Variants";
+import { BorderRadiuses } from "../../../libs/types/BorderRadius";
 type Props = {
     variant?: Variants;
     status?: Colors;
@@ -10,7 +11,7 @@ type Props = {
         position?: "start" | "end";
     };
     border?: {
-        radius: "sm" | "lg" | "xl" | "xxl" | "pill" | "none";
+        radius: BorderRadiuses;
     };
     button?: ButtonProps;
     addon?: {

package/dist/components/form/input/index.d.ts

@@ -8,7 +8,7 @@ declare const Input: React.ForwardRefExoticComponent<{
         position?: "start" | "end";
     };
     border?: {
-        radius: "sm" | "lg" | "xl" | "xxl" | "pill" | "none";
+        radius: import("../../../libs/types/BorderRadius").BorderRadiuses;
     };
     button?: import("../button/Types").Props;
     addon?: {

package/dist/components/form/select/Types.d.ts

@@ -1,3 +1,4 @@
+import { BorderRadiuses } from "../../../libs/types/BorderRadius";
 import { Colors } from "../../../libs/types/Colors";
 import { Variants } from "../../../libs/types/Variants";
 export type Option = {
@@ -7,7 +8,10 @@ export type Option = {
 type Multiple = {
     status?: {
         color?: Colors;
-        selected?: Colors;
+        selected?: {
+            variant?: Variants;
+            color?: Colors;
+        };
     };
     onChange: (option: Option[]) => void;
     multiple: true;
@@ -18,9 +22,9 @@ type Single = {
     multiple?: false;
 };
 export type Props = {
-    variant?: Variants;
+    variant?: Exclude<Variants, "borderless">;
     border?: {
-        radius: "sm" | "lg" | "xl" | "xxl" | "pill" | "none";
+        radius: BorderRadiuses;
     };
     options: Option[];
     placeholder?: string;

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

@@ -4,6 +4,7 @@ import Input from "../input";
 import "../../../assets/css/components/form/select/select.css";
 import Chip from "../../data-display/chip";
 import Checkbox from "../checkbox";
+import Paragraph from "../../data-display/typography/paragraph/Paragraph";
 const Select = ({ variant = "outlined", status, border, options, onChange, multiple, placeholder, disabled = false, }) => {
     // refs
     let _selectionClassName = useRef("selections").current;
@@ -17,6 +18,7 @@ const Select = ({ variant = "outlined", status, border, options, onChange, multi
     let _navigationIndex = useRef(0);
     // states
     const [optionsOpen, setOptionsOpen] = useState(false);
+    const [filteredOptions, setFilteredOptions] = useState([]);
     const [searchText, setSearchText] = useState("");
     const [selection, setSelection] = useState(null);
     const [selections, setSelections] = useState([]);
@@ -139,8 +141,12 @@ const Select = ({ variant = "outlined", status, border, options, onChange, multi
             };
         }
         else {
-            if (multiple) {
+            // Options paneli kapanma süresi 250ms.
+            // 300ms sonra temizlenmesinin sebebi kapanırken birder veriler gerliyor ve panel yüksekliği artıyor.
+            setTimeout(() => {
                 setSearchText("");
+            }, 300);
+            if (multiple) {
                 if (_searchField.current)
                     _searchField.current.value = "";
             }
@@ -154,6 +160,12 @@ const Select = ({ variant = "outlined", status, border, options, onChange, multi
         }
     }, [optionsOpen]);
     useEffect(() => {
+        // Arama kriterlerine uygun olan değerleri bir state e gönderiyoruz.
+        setFilteredOptions(options.filter((option) => {
+            if (!optionsOpen)
+                return option;
+            return option.text.toLowerCase().includes(searchText.toLowerCase());
+        }));
         // Arama yapılması durumunda değerleri sıfırla.
         setNavigationIndex(0);
         _navigationIndex.current = 0;
@@ -166,14 +178,22 @@ const Select = ({ variant = "outlined", status, border, options, onChange, multi
         _optionItems.current
             .filter((optionItem) => optionItem !== null)
             .forEach((item, index) => {
-            index === navigationIndex
-                ? item?.classList.add("navigate-with-arrow-keys")
-                : item?.classList.remove("navigate-with-arrow-keys");
+            if (index === navigationIndex) {
+                item?.classList.add("navigate-with-arrow-keys");
+                item.scrollIntoView({
+                    behavior: "smooth", // Yumuşak bir kaydırma animasyonu
+                    block: "nearest", // En yakın pozisyona kaydır
+                });
+            }
+            else {
+                item?.classList.remove("navigate-with-arrow-keys");
+            }
         });
     }, [navigationIndex]);
     return (React.createElement("div", { ref: _arSelect, className: "ar-select-wrapper" },
         React.createElement("div", { ref: _multipleInput, className: "ar-select" },
-            multiple ? (React.createElement("div", { className: _selectionClassName, onClick: () => setOptionsOpen((x) => !x) }, selections.map((selection, index) => (React.createElement(Chip, { key: index, color: status?.selected || "primary", text: selection.text }))))) : (
+            multiple ? (React.createElement("div", { className: _selectionClassName, onClick: () => setOptionsOpen((x) => !x) },
+                React.createElement("div", { className: "items" }, selections.length > 0 ? (selections.map((selection, index) => (React.createElement(Chip, { key: index, variant: status?.selected?.variant || "filled", color: status?.selected?.color || status?.color, text: selection.text })))) : (React.createElement("span", { className: `placeholder ${status?.color || "light"}` }, placeholder))))) : (
             // Single
             React.createElement(Input, { ref: _singleInput, variant: variant, status: status || "light", onClick: () => setOptionsOpen((x) => !x), onChange: () => !optionsOpen && setOptionsOpen(true), onKeyUp: (event) => {
                     if (event.key === "Enter")
@@ -196,25 +216,20 @@ const Select = ({ variant = "outlined", status, border, options, onChange, multi
                         }
                         setSelection(null);
                     }
-                } }))),
-        options.length > 0 && (React.createElement("div", { ref: _options, className: optionsClassName.map((className) => className).join(" ") },
+                } })),
+            React.createElement("span", { className: `angel-down ${optionsOpen ? "opened" : "closed"}`, onClick: () => setOptionsOpen((x) => !x) })),
+        React.createElement("div", { ref: _options, className: optionsClassName.map((className) => className).join(" ") },
             multiple && (React.createElement("div", { className: "search-field" },
                 React.createElement(Input, { ref: _searchField, variant: "outlined", status: "light", placeholder: "Search...", onKeyUp: (event) => {
                         // Arama yapmak için kullanılan state bu kısımda dolduruluyor.
                         setSearchText(event.currentTarget.value);
                     } }))),
-            React.createElement("ul", null, options
-                .filter((option) => {
-                if (!optionsOpen)
-                    return option;
-                return option.text.toLowerCase().includes(searchText.toLowerCase());
-            })
-                .map((option, index) => {
+            filteredOptions.length > 0 ? (React.createElement("ul", null, filteredOptions.map((option, index) => {
                 const isItem = selections.some((selection) => selection.value === option.value);
                 return (React.createElement("li", { ref: (element) => (_optionItems.current[index] = element), key: index, onClick: () => handleItemSelected(option, index) },
-                    multiple && (React.createElement(Checkbox, { checked: isItem, status: isItem ? status?.selected || "primary" : "light", disabled: true })),
+                    multiple && (React.createElement(Checkbox, { checked: isItem, status: isItem ? status?.selected?.color || status?.color : "light", disabled: true })),
                     React.createElement("span", null, option.text)));
-            }))))));
+            }))) : (React.createElement(Paragraph, { color: "gray-500", align: "center" }, "Het hangi bir kay\u0131t bulunumad\u0131!")))));
 };
 Select.displayName = "Select";
 export default Select;

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

@@ -0,0 +1 @@
+export type BorderRadiuses = "sm" | "lg" | "xl" | "xxl" | "pill" | "none";

package/dist/libs/types/BorderRadius.js

@@ -0,0 +1 @@
+export {};

package/package.json

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